init

2025-03-25 23:25:59 +08:00
parent ddda5c1c68
commit 9579987fd9
61 changed files with 3902 additions and 1 deletions
@@ -0,0 +1,86 @@
+<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>