f

src/components/Button/AnimatedArrow.vue

@@ -20,7 +20,7 @@ const props = defineProps({
   },
   color: {
     type: String,
-    default: "#fff"
+    default: '#fff'
   }
 })
 

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>
+</style>

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,

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