ninemoon-ui 0.0.27 → 0.1.1

package/dist/js/pagination/pagination.js

@@ -1,228 +1,197 @@
-import { defineComponent, computed, ref, watch, resolveComponent, withDirectives, openBlock, createElementBlock, createVNode, withCtx, Fragment, renderList, createBlock, createCommentVNode, createElementVNode, normalizeClass, toDisplayString, vShow } from "vue";
-const _hoisted_1 = { class: "tdd-flex tdd-items-center tdd-w-full tdd-h-7 tdd-text-sm tdd-text-center" };
-const _hoisted_2 = {
-  key: 0,
-  class: "tdd-w-24 tdd-flex-none tdd-px-1"
-};
-const _hoisted_3 = ["disabled"];
-const _hoisted_4 = { class: "tdd-flex tdd-items-center" };
-const _hoisted_5 = {
-  key: 0,
-  class: "tdd-fill-word6 tdd-w-4 tdd-h-4 tdd-block",
+import { openBlock, createElementBlock, createElementVNode, defineComponent, defineAsyncComponent, computed, withDirectives, createVNode, unref, withCtx, Fragment, renderList, createBlock, toDisplayString, createCommentVNode, normalizeClass, vShow } from "vue";
+import { A as ArrowPlug } from "../dateArrowplus/dateArrowplus.js";
+import { _ as _export_sfc } from "../index/index.js";
+const _sfc_main$1 = {};
+const _hoisted_1$1 = {
   style: { "width": "1em", "height": "1em", "vertical-align": "middle", "fill": "currentColor", "overflow": "hidden" },
   viewBox: "0 0 1024 1024",
   version: "1.1",
   xmlns: "http://www.w3.org/2000/svg"
 };
-const _hoisted_6 = ["onClick"];
-const _hoisted_7 = {
-  key: 1,
-  class: "tdd-fill-word6 tdd-w-4 tdd-h-4 tdd-block",
-  style: { "width": "1em", "height": "1em", "vertical-align": "middle", "fill": "currentColor", "overflow": "hidden" },
-  viewBox: "0 0 1024 1024",
-  version: "1.1",
-  xmlns: "http://www.w3.org/2000/svg"
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$1, _cache[0] || (_cache[0] = [
+    createElementVNode("path", {
+      d: "M192 512m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z",
+      fill: "currentColor"
+    }, null, -1),
+    createElementVNode("path", {
+      d: "M512 512m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z",
+      fill: "currentColor"
+    }, null, -1),
+    createElementVNode("path", {
+      d: "M832 512m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z",
+      fill: "currentColor"
+    }, null, -1)
+  ]));
+}
+const ellipsisIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render]]);
+const _hoisted_1 = { class: "flex items-center w-full h-7 text-sm text-center select-none" };
+const _hoisted_2 = {
+  key: 0,
+  class: "w-24 h-7 flex-none px-1"
 };
-const _hoisted_8 = ["disabled"];
+const _hoisted_3 = { class: "text-center" };
+const _hoisted_4 = ["disabled"];
+const _hoisted_5 = { class: "flex items-center" };
+const _hoisted_6 = ["onClick"];
+const _hoisted_7 = ["disabled"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "pagination",
   props: {
     sizeArr: {},
     total: {},
-    hideOnSinglePage: { type: Boolean, default: false }
+    hideOnSinglePage: { type: Boolean, default: false },
+    currentPage: { default: 1 },
+    activeSize: { default: 20 },
+    visibleRange: { default: 3 },
+    edgeVisibleCount: { default: 7 }
   },
-  emits: ["size-change", "current-change"],
+  emits: [
+    "size-change",
+    "current-change",
+    "update:currentPage",
+    "update:activeSize"
+  ],
   setup(__props, { emit: __emit }) {
+    const LibSelect = defineAsyncComponent(() => import("../select/select.js"));
+    const LibSelectOption = defineAsyncComponent(
+      () => import("../select/selectoption.js")
+    );
     const props = __props;
-    const showSizeArr = computed(() => {
+    const showSizeSelector = computed(() => {
       var _a;
       return props.sizeArr && ((_a = props.sizeArr) == null ? void 0 : _a.length) > 0;
     });
     const emit = __emit;
-    const size = ref(20);
-    if (props.sizeArr && props.sizeArr.length > 0) {
-      size.value = props.sizeArr[0];
-    }
-    const maxNumber = computed(() => {
+    const size = computed({
+      set(num) {
+        emit("size-change", num);
+        emit("update:activeSize", num);
+      },
+      get() {
+        return props.activeSize;
+      }
+    });
+    const maxPage = computed(() => {
       return Math.ceil(props.total / size.value);
     });
     const numberArr = computed(() => {
-      let arr = [];
-      for (let i = 2; i < maxNumber.value; i++) {
-        arr.push(i);
+      if (maxPage.value <= props.edgeVisibleCount) {
+        return range(2, maxPage.value - 1);
       }
-      return arr;
+      const start = Math.max(2, currentPage.value - props.visibleRange);
+      const end = Math.min(
+        maxPage.value - 1,
+        currentPage.value + props.visibleRange
+      );
+      return range(start, end);
     });
     const showComponent = computed(() => {
       if (props.hideOnSinglePage === true) {
-        return maxNumber.value > 1;
+        return maxPage.value > 1;
       } else {
         return true;
       }
     });
-    const activeIndex = ref(1);
+    const currentPage = computed({
+      set(num) {
+        emit("current-change", num);
+        emit("update:currentPage", num);
+      },
+      get() {
+        return props.currentPage;
+      }
+    });
     const firstBtnDisable = computed(() => {
-      return activeIndex.value === 1;
+      return currentPage.value === 1;
     });
     const lastBtnDisable = computed(() => {
-      return activeIndex.value >= maxNumber.value;
+      return currentPage.value >= maxPage.value;
     });
     const showFirst = computed(() => {
-      return activeIndex.value - 5 > 0 && maxNumber.value > 7;
+      return currentPage.value - 5 > 0 && maxPage.value > 7;
     });
     const showLast = computed(() => {
-      return maxNumber.value - activeIndex.value > 4 && maxNumber.value > 7;
+      return maxPage.value - currentPage.value > 4 && maxPage.value > 7;
     });
-    const addNum = () => {
-      activeIndex.value += 1;
-    };
-    const redNum = () => {
-      activeIndex.value -= 1;
+    const activeChange = (num) => {
+      currentPage.value += num;
     };
     const indexHandle = (k) => {
-      activeIndex.value = k;
+      currentPage.value = k;
     };
-    watch(activeIndex, (pagenum) => {
-      emit("current-change", pagenum);
-    });
-    watch(size, (sizenum) => {
-      emit("size-change", sizenum);
-    });
-    const hiddenHandle = (i) => {
-      if (activeIndex.value <= 3) {
-        if (i <= 7) {
-          return true;
-        } else {
-          return false;
-        }
-      } else if (maxNumber.value - activeIndex.value <= 3) {
-        if (i >= maxNumber.value - 7) {
-          return true;
-        } else {
-          return false;
-        }
-      } else if (activeIndex.value > i && activeIndex.value - 3 <= i) {
-        return true;
-      } else if (activeIndex.value < i && activeIndex.value + 3 >= i) {
-        return true;
-      } else if (activeIndex.value === i) {
-        return true;
-      } else {
-        return false;
-      }
+    const range = (start, end) => {
+      const length = end - start + 1;
+      return Array.from({ length }, (_, i) => start + i);
     };
     return (_ctx, _cache) => {
-      const _component_LibSelectOption = resolveComponent("LibSelectOption");
-      const _component_LibSelect = resolveComponent("LibSelect");
       return withDirectives((openBlock(), createElementBlock("div", _hoisted_1, [
-        showSizeArr.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
-          createVNode(_component_LibSelect, {
+        showSizeSelector.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
+          createVNode(unref(LibSelect), {
             modelValue: size.value,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => size.value = $event)
           }, {
             default: withCtx(() => [
               (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.sizeArr, (i) => {
-                return openBlock(), createBlock(_component_LibSelectOption, {
+                return openBlock(), createBlock(unref(LibSelectOption), {
                   value: i,
                   label: `${i}条/页`
-                }, null, 8, ["value", "label"]);
+                }, {
+                  default: withCtx(() => [
+                    createElementVNode("div", _hoisted_3, [
+                      createElementVNode("span", null, toDisplayString(i) + "条", 1),
+                      _cache[5] || (_cache[5] = createElementVNode("span", null, "/页", -1))
+                    ])
+                  ]),
+                  _: 2
+                }, 1032, ["value", "label"]);
               }), 256))
             ]),
             _: 1
           }, 8, ["modelValue"])
         ])) : createCommentVNode("", true),
         createElementVNode("button", {
-          onClick: redNum,
+          onClick: _cache[1] || (_cache[1] = ($event) => activeChange(-1)),
           type: "button",
-          class: normalizeClass(["w-5 h-5", { "tdd-cursor-not-allowed": firstBtnDisable.value }]),
+          class: normalizeClass(["w-5 h-5", { "cursor-not-allowed": firstBtnDisable.value }]),
           disabled: firstBtnDisable.value
-        }, _cache[3] || (_cache[3] = [
-          createElementVNode("svg", {
-            class: "tdd-w-4 tdd-h-4 tdd-block tdd-fill-word6",
-            viewBox: "0 0 1024 1024",
-            version: "1.1",
-            xmlns: "http://www.w3.org/2000/svg"
-          }, [
-            createElementVNode("path", {
-              d: "M842.666667 864c-8.533333 0-14.933333-2.133333-21.333334-8.533333l-341.333333-309.333334c-6.4-6.4-10.666667-14.933333-10.666667-23.466666 0-8.533333 4.266667-17.066667 10.666667-23.466667l341.333333-309.333333c12.8-12.8 34.133333-10.666667 44.8 2.133333 12.8 12.8 10.666667 34.133333-2.133333 44.8L548.266667 522.666667l315.733333 285.866666c12.8 10.666667 14.933333 32 2.133333 44.8-6.4 6.4-14.933333 10.666667-23.466666 10.666667z",
-              fill: "currentColor"
-            }),
-            createElementVNode("path", {
-              d: "M512 864c-8.533333 0-14.933333-2.133333-21.333333-8.533333L149.333333 546.133333c-6.4-6.4-10.666667-14.933333-10.666666-23.466666 0-8.533333 4.266667-17.066667 10.666666-23.466667L490.666667 189.866667c12.8-12.8 34.133333-10.666667 44.8 2.133333 12.8 12.8 10.666667 34.133333-2.133334 44.8L217.6 522.666667 533.333333 808.533333c12.8 12.8 14.933333 32 2.133334 44.8-6.4 6.4-14.933333 10.666667-23.466667 10.666667z",
-              fill: "currentColor"
-            })
-          ], -1)
-        ]), 10, _hoisted_3),
-        createElementVNode("ul", _hoisted_4, [
+        }, [
+          createVNode(ArrowPlug, { class: "h-4 w-4" })
+        ], 10, _hoisted_4),
+        createElementVNode("ul", _hoisted_5, [
           createElementVNode("li", {
-            onClick: _cache[1] || (_cache[1] = ($event) => indexHandle(1)),
-            class: normalizeClass(["tdd-px-2 tdd-h-5 tdd-leading-5 tdd-cursor-pointer tdd-font-bold", { "tdd-text-blue-500": 1 === activeIndex.value }])
+            onClick: _cache[2] || (_cache[2] = ($event) => indexHandle(1)),
+            class: normalizeClass(["px-2 h-5 leading-5 cursor-pointer font-bold", { "text-blue-500": 1 === currentPage.value }])
           }, " 1 ", 2),
-          showFirst.value ? (openBlock(), createElementBlock("svg", _hoisted_5, _cache[4] || (_cache[4] = [
-            createElementVNode("path", {
-              d: "M192 512m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z",
-              fill: "currentColor"
-            }, null, -1),
-            createElementVNode("path", {
-              d: "M512 512m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z",
-              fill: "currentColor"
-            }, null, -1),
-            createElementVNode("path", {
-              d: "M832 512m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z",
-              fill: "currentColor"
-            }, null, -1)
-          ]))) : createCommentVNode("", true),
+          showFirst.value ? (openBlock(), createBlock(ellipsisIcon, {
+            key: 0,
+            class: "fill-word6 w-4 h-4 block"
+          })) : createCommentVNode("", true),
           (openBlock(true), createElementBlock(Fragment, null, renderList(numberArr.value, (i) => {
-            return withDirectives((openBlock(), createElementBlock("li", {
+            return openBlock(), createElementBlock("li", {
               onClick: ($event) => indexHandle(i),
-              class: normalizeClass([{ "tdd-text-blue-500": i === activeIndex.value }, "tdd-px-2 tdd-h-5 tdd-leading-5 tdd-cursor-pointer tdd-font-bold"]),
+              class: normalizeClass([{ "text-blue-500": i === currentPage.value }, "px-2 h-5 leading-5 cursor-pointer font-bold"]),
               key: i
-            }, toDisplayString(i), 11, _hoisted_6)), [
-              [vShow, hiddenHandle(i)]
-            ]);
+            }, toDisplayString(i), 11, _hoisted_6);
           }), 128)),
-          showLast.value ? (openBlock(), createElementBlock("svg", _hoisted_7, _cache[5] || (_cache[5] = [
-            createElementVNode("path", {
-              d: "M192 512m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z",
-              fill: "currentColor"
-            }, null, -1),
-            createElementVNode("path", {
-              d: "M512 512m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z",
-              fill: "currentColor"
-            }, null, -1),
-            createElementVNode("path", {
-              d: "M832 512m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z",
-              fill: "currentColor"
-            }, null, -1)
-          ]))) : createCommentVNode("", true),
-          maxNumber.value > 1 ? (openBlock(), createElementBlock("li", {
+          showLast.value ? (openBlock(), createBlock(ellipsisIcon, {
+            key: 1,
+            class: "fill-word6 w-4 h-4 block"
+          })) : createCommentVNode("", true),
+          maxPage.value > 1 ? (openBlock(), createElementBlock("li", {
             key: 2,
-            onClick: _cache[2] || (_cache[2] = ($event) => indexHandle(maxNumber.value)),
-            class: normalizeClass(["tdd-px-2 tdd-h-5 tdd-leading-5 tdd-cursor-pointer tdd-font-bold", { "tdd-text-blue-500": maxNumber.value === activeIndex.value }])
-          }, toDisplayString(maxNumber.value), 3)) : createCommentVNode("", true)
+            onClick: _cache[3] || (_cache[3] = ($event) => indexHandle(maxPage.value)),
+            class: normalizeClass(["px-2 h-5 leading-5 cursor-pointer font-bold", { "text-blue-500": maxPage.value === currentPage.value }])
+          }, toDisplayString(maxPage.value), 3)) : createCommentVNode("", true)
         ]),
         createElementVNode("button", {
-          onClick: addNum,
+          onClick: _cache[4] || (_cache[4] = ($event) => activeChange(1)),
           type: "button",
-          class: normalizeClass(["tdd-w-5 tdd-h-5", { "tdd-cursor-not-allowed": lastBtnDisable.value }]),
+          class: normalizeClass(["w-5 h-5", { "cursor-not-allowed": lastBtnDisable.value }]),
           disabled: lastBtnDisable.value
-        }, _cache[6] || (_cache[6] = [
-          createElementVNode("svg", {
-            class: "tdd-w-4 tdd-h-4 tdd-block tdd-fill-word6",
-            viewBox: "0 0 1024 1024",
-            version: "1.1",
-            xmlns: "http://www.w3.org/2000/svg"
-          }, [
-            createElementVNode("path", {
-              d: "M544 522.666667c0-8.533333-4.266667-17.066667-10.666667-23.466667L192 189.866667c-12.8-12.8-34.133333-10.666667-44.8 2.133333-12.8 12.8-10.666667 34.133333 2.133333 44.8l315.733334 285.866667L149.333333 808.533333c-12.8 12.8-14.933333 32-2.133333 44.8 6.4 6.4 14.933333 10.666667 23.466667 10.666667 8.533333 0 14.933333-2.133333 21.333333-8.533333l341.333333-309.333334c6.4-6.4 10.666667-14.933333 10.666667-23.466666z",
-              fill: "currentColor"
-            }),
-            createElementVNode("path", {
-              d: "M864 499.2l-341.333333-309.333333c-12.8-12.8-34.133333-10.666667-44.8 2.133333-12.8 12.8-10.666667 34.133333 2.133333 44.8l315.733333 285.866667-315.733333 285.866666c-12.8 12.8-14.933333 32-2.133333 44.8 6.4 6.4 14.933333 10.666667 23.466666 10.666667 8.533333 0 14.933333-2.133333 21.333334-8.533333l341.333333-309.333334c6.4-6.4 10.666667-14.933333 10.666667-23.466666 0-8.533333-4.266667-17.066667-10.666667-23.466667z",
-              fill: "currentColor"
-            })
-          ], -1)
-        ]), 10, _hoisted_8)
+        }, [
+          createVNode(ArrowPlug, { class: "h-4 w-4 rotate-180 transform" })
+        ], 10, _hoisted_7)
       ], 512)), [
         [vShow, showComponent.value]
       ]);