dev

frontend/src/components/calc/pagination/index.vue

@@ -1,33 +1,35 @@
 <script lang="tsx">
-import { onKeyStroke } from "@vueuse/core"
-import type { PropType } from "vue";
-import { computed, defineComponent, onUnmounted } from "vue"
+import { onKeyStroke } from '@vueuse/core'
+import type { PropType } from 'vue'
+import { computed, defineComponent, onUnmounted } from 'vue'
 
 export default defineComponent({
   props: {
     page: {
       type: Number,
-      default: () => 0
+      default: () => 0,
     },
     totalPage: {
       type: Number,
-      default: () => 0
+      default: () => 0,
     },
     minPage: {
       type: Number,
-      default: () => 1
+      default: () => 1,
     },
     parent: {
       type: Object as PropType<HTMLElement>,
-      default: () => document
+      default: () => document,
     },
     disabled: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   setup(props, { emit }) {
-    const totalPage = computed(() => (Number.isNaN(props.totalPage) ? props.minPage : props.totalPage))
+    const totalPage = computed(() =>
+      Number.isNaN(props.totalPage) ? props.minPage : props.totalPage,
+    )
 
     const page = computed({
       get() {
@@ -37,17 +39,16 @@ export default defineComponent({
         return Math.max(Math.min(props.page, totalPage.value), props.minPage)
       },
       set(val) {
-        emit("update:page", val)
-      }
+        emit('update:page', val)
+      },
     })
 
-
     function prev(e: Event) {
       e.preventDefault()
       if (page.value > 1 && !props.disabled) {
         page.value--
-        emit("prev")
-        emit("change", page.value)
+        emit('prev')
+        emit('change', page.value)
       }
     }
 
@@ -55,13 +56,13 @@ export default defineComponent({
       e.preventDefault()
       if (page.value < totalPage.value && !props.disabled) {
         page.value = page.value + 1
-        emit("next")
-        emit("change", page.value)
+        emit('next')
+        emit('change', page.value)
       }
     }
 
-    const removePrev = onKeyStroke(["F1", "PageUp"], prev, { target: props.parent })
-    const removeNext = onKeyStroke(["F2", "PageDown"], next, { target: props.parent })
+    const removePrev = onKeyStroke(['F1', 'PageUp'], prev, { target: props.parent })
+    const removeNext = onKeyStroke(['F2', 'PageDown'], next, { target: props.parent })
 
     onUnmounted(() => {
       removePrev()
@@ -71,15 +72,23 @@ export default defineComponent({
     return () => {
       return (
         <div class="flex space-x-1 h-10 w-full items-center justify-center">
-          <calc-button icon="prev" disabled={page.value <= 1 || props.disabled} onClick={prev}></calc-button>
+          <calc-button
+            icon="prev"
+            disabled={page.value <= 1 || props.disabled}
+            onClick={prev}
+          ></calc-button>
           <span class="text-center w-8">
             {page.value}/{totalPage.value}
           </span>
-          <calc-button icon="next" disabled={page.value >= totalPage.value || props.disabled} onClick={next}></calc-button>
+          <calc-button
+            icon="next"
+            disabled={page.value >= totalPage.value || props.disabled}
+            onClick={next}
+          ></calc-button>
         </div>
       )
     }
-  }
+  },
 })
 </script>