From 101eb2c2f25d2accc827de40ab2d617652269e49 Mon Sep 17 00:00:00 2001
From: tommytrg <tomastrg22@gmail.com>
Date: Tue, 3 Sep 2024 11:43:02 +0200
Subject: [PATCH] f

---
 src/components/Button/AnimatedArrow.vue       |  2 +-
 src/components/icon/WIcon.vue                 |  5 ++-
 .../pagination/WPagination.stories.ts         |  7 +++--
 src/components/pagination/WPagination.vue     | 31 +++++--------------
 4 files changed, 15 insertions(+), 30 deletions(-)

diff --git a/src/components/Button/AnimatedArrow.vue b/src/components/Button/AnimatedArrow.vue
index 7dedb4a..583c208 100644
--- a/src/components/Button/AnimatedArrow.vue
+++ b/src/components/Button/AnimatedArrow.vue
@@ -20,7 +20,7 @@ const props = defineProps({
   },
   color: {
     type: String,
-    default: "#fff"
+    default: '#fff'
   }
 })
 
diff --git a/src/components/icon/WIcon.vue b/src/components/icon/WIcon.vue
index 05c796b..b8e3478 100644
--- a/src/components/icon/WIcon.vue
+++ b/src/components/icon/WIcon.vue
@@ -24,7 +24,7 @@ const props = defineProps({
   },
   color: {
     type: String,
-    default: "#232323"
+    default: '#232323'
   }
 })
 
@@ -43,8 +43,7 @@ const iconComponent = computed(() => {
 </script>
 
 <style lang="scss" scoped>
-
 :deep(path) {
   fill: v-bind(color);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/pagination/WPagination.stories.ts b/src/components/pagination/WPagination.stories.ts
index 928d51e..bf60602 100644
--- a/src/components/pagination/WPagination.stories.ts
+++ b/src/components/pagination/WPagination.stories.ts
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref, watch } from 'vue'
 import WPagination from './WPagination.vue'
 
 const meta = {
@@ -16,9 +17,11 @@ export const Default: Story = {
   render: (args) => ({
     components: { WPagination },
     setup() {
-      return { args }
+      const page = ref(args.page)
+
+      return { args, page }
     },
-    template: `<WPagination v-bind="args" />`
+    template: `<WPagination v-bind="args" v-model:page="page" />`
   }),
   args: {
     page: 1,
diff --git a/src/components/pagination/WPagination.vue b/src/components/pagination/WPagination.vue
index bd57c10..1bd2e24 100644
--- a/src/components/pagination/WPagination.vue
+++ b/src/components/pagination/WPagination.vue
@@ -33,6 +33,7 @@
         :key="p"
         type="button"
         class="min-h-[38px] min-w-[38px] flex justify-center items-center hover:bg-wit-blue-400 py-sm px-sm text-sm rounded-lg"
+        @click="updatePage(p)"
         :class="{
           'outline-none': p === page,
           'bg-wit-blue-500': p === page,
@@ -82,42 +83,24 @@ const props = defineProps({
     type: Number,
     required: true
   },
-  page: {
-    type: Number,
-    required: true
-  },
   pageSize: {
     type: Number,
     required: true
-  },
-  onPageChange: {
-    type: Function
-  },
-  onPageSizeChange: {
-    type: Function
-  },
-  onPageCountChange: {
-    type: Function
   }
 })
 
-const emit = defineEmits(['page-change', 'page-size-change', 'page-count-change'])
+const page = defineModel<number>('page')
+
+function updatePage(newPage: number) {
+  page.value = newPage
+}
 
 const data = computed(() => {
   // avoid different pagination type: UseOffsetPaginationInfinityPageReturn
   const pagination: UseOffsetPaginationReturn = useOffsetPagination({
     ...props,
     onPageChange(...args) {
-      props.onPageChange?.(...args)
-      emit('page-change', ...args)
-    },
-    onPageSizeChange(...args) {
-      props.onPageSizeChange?.(...args)
-      emit('page-size-change', ...args)
-    },
-    onPageCountChange(...args) {
-      props.onPageCountChange?.(...args)
-      emit('page-count-change', ...args)
+      updatePage(args[0].currentPage)
     }
   } as UseOffsetPaginationOptions) as UseOffsetPaginationReturn