init

2026-08-04 17:57:01 +08:00
parent 768fd4a3a9
commit f77034edd7
641 changed files with 26137 additions and 0 deletions
@@ -0,0 +1,97 @@
+<script lang="tsx">
+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,
+    },
+    totalPage: {
+      type: Number,
+      default: () => 0,
+    },
+    minPage: {
+      type: Number,
+      default: () => 1,
+    },
+    parent: {
+      type: Object as PropType<HTMLElement>,
+      default: () => document,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props, { emit }) {
+    const totalPage = computed(() =>
+      Number.isNaN(props.totalPage) ? props.minPage : props.totalPage,
+    )
+
+    const page = computed({
+      get() {
+        if (Number.isNaN(props.page)) {
+          return props.minPage
+        }
+        return Math.max(Math.min(props.page, totalPage.value), props.minPage)
+      },
+      set(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)
+      }
+    }
+
+    function next(e: Event) {
+      e.preventDefault()
+      if (page.value < totalPage.value && !props.disabled) {
+        page.value = page.value + 1
+        emit('next')
+        emit('change', page.value)
+      }
+    }
+
+    const removePrev = onKeyStroke(['F1', 'PageUp'], prev, { target: props.parent })
+    const removeNext = onKeyStroke(['F2', 'PageDown'], next, { target: props.parent })
+
+    onUnmounted(() => {
+      removePrev()
+      removeNext()
+    })
+
+    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>
+          <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>
+        </div>
+      )
+    }
+  },
+})
+</script>
+
+<style lang="scss"></style>