@wfrog/vc-ui 1.1.0 → 1.2.0

package/dist/es/components/icon-picker/icon-picker.mjs

@@ -0,0 +1,1375 @@
+import './index.css'
+import { c as buildProps, d as definePropType, u as useNamespace, i as isArray, f as isNumber, e as debugWarn } from '../../chunk/CcKUdl3e.mjs';
+import '../../chunk/DMYHOxhk.mjs';
+/* empty css                    */
+import { defineComponent, computed, createElementBlock, openBlock, unref, createBlock, toDisplayString, withCtx, resolveDynamicComponent, inject, ref, watch, normalizeClass, createVNode, Fragment, renderList, createElementVNode, withKeys, createCommentVNode, getCurrentInstance, provide, h, useTemplateRef, onMounted, isRef, createTextVNode, useCssModule, onUnmounted, createSlots, mergeProps } from 'vue';
+import { promiseTimeout, useVModel } from '@vueuse/core';
+import { C as Component$2 } from '../iconify-icon/iconify-icon.mjs';
+import { C as Component$4 } from '../input/input.mjs';
+import '../../chunk/B1BnPYNG.mjs';
+import { E as ElSelect, a as ElOption } from '../../chunk/CitH0taR.mjs';
+import '../../chunk/_8u_XVHh.mjs';
+import { E as ElInput } from '../../chunk/DgFT6snA.mjs';
+import { E as ElDivider } from '../../chunk/egk9EEzo.mjs';
+import { E as ElButton } from '../../chunk/CKbkzlkO.mjs';
+import { C as Component$3 } from '../select/select.mjs';
+import { C as Component$1 } from '../scrollbar/scrollbar.mjs';
+import { d as debounce } from '../../chunk/BambM7zX.mjs';
+import { _ as _export_sfc$1 } from '../../chunk/pcqpp-6-.mjs';
+import { DArrowLeft, MoreFilled, DArrowRight, ArrowRight, ArrowLeft } from '@element-plus/icons-vue';
+import { E as ElIcon } from '../../chunk/DEPZhJ0Z.mjs';
+import { i as iconPropType } from '../icon/icon2.mjs';
+import { _ as _export_sfc, w as withInstall } from '../../chunk/BTsEMnf_.mjs';
+import { u as useLocale } from '../../chunk/plK2vnjp.mjs';
+import { m as mutable } from '../../chunk/B-rxnVJv.mjs';
+import { c as componentSizes, a as useGlobalSize, u as useSizeProp } from '../../chunk/BK4T_2ha.mjs';
+import { i as isEqual } from '../../chunk/Dw-yyl2m.mjs';
+import { C as CHANGE_EVENT } from '../../chunk/Ct6q2FXg.mjs';
+import { u as useDeprecated } from '../../chunk/DTEM_vYZ.mjs';
+import { E as ElPopover } from '../../chunk/DHpbQMGk.mjs';
+
+const elPaginationKey = Symbol("elPaginationKey");
+
+const paginationPrevProps = buildProps({
+  disabled: Boolean,
+  currentPage: {
+    type: Number,
+    default: 1
+  },
+  prevText: {
+    type: String
+  },
+  prevIcon: {
+    type: iconPropType
+  }
+});
+const paginationPrevEmits = {
+  click: (evt) => evt instanceof MouseEvent
+};
+
+const _hoisted_1$6 = ["disabled", "aria-label", "aria-disabled"];
+const _hoisted_2$2 = { key: 0 };
+const _sfc_main$8 = defineComponent({
+  ...{
+    name: "ElPaginationPrev"
+  },
+  __name: "prev",
+  props: paginationPrevProps,
+  emits: paginationPrevEmits,
+  setup(__props) {
+    const props = __props;
+    const { t } = useLocale();
+    const internalDisabled = computed(
+      () => props.disabled || props.currentPage <= 1
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("button", {
+        type: "button",
+        class: "btn-prev",
+        disabled: internalDisabled.value,
+        "aria-label": _ctx.prevText || unref(t)("el.pagination.prev"),
+        "aria-disabled": internalDisabled.value,
+        onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+      }, [
+        _ctx.prevText ? (openBlock(), createElementBlock(
+          "span",
+          _hoisted_2$2,
+          toDisplayString(_ctx.prevText),
+          1
+        )) : (openBlock(), createBlock(unref(ElIcon), { key: 1 }, {
+          default: withCtx(() => [
+            (openBlock(), createBlock(resolveDynamicComponent(_ctx.prevIcon)))
+          ]),
+          _: 1
+        }))
+      ], 8, _hoisted_1$6);
+    };
+  }
+});
+var Prev = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/pagination/src/components/prev.vue"]]);
+
+const paginationNextProps = buildProps({
+  disabled: Boolean,
+  currentPage: {
+    type: Number,
+    default: 1
+  },
+  pageCount: {
+    type: Number,
+    default: 50
+  },
+  nextText: {
+    type: String
+  },
+  nextIcon: {
+    type: iconPropType
+  }
+});
+
+const _hoisted_1$5 = ["disabled", "aria-label", "aria-disabled"];
+const _hoisted_2$1 = { key: 0 };
+const _sfc_main$7 = defineComponent({
+  ...{
+    name: "ElPaginationNext"
+  },
+  __name: "next",
+  props: paginationNextProps,
+  emits: ["click"],
+  setup(__props) {
+    const props = __props;
+    const { t } = useLocale();
+    const internalDisabled = computed(
+      () => props.disabled || props.currentPage === props.pageCount || props.pageCount === 0
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("button", {
+        type: "button",
+        class: "btn-next",
+        disabled: internalDisabled.value,
+        "aria-label": _ctx.nextText || unref(t)("el.pagination.next"),
+        "aria-disabled": internalDisabled.value,
+        onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+      }, [
+        _ctx.nextText ? (openBlock(), createElementBlock(
+          "span",
+          _hoisted_2$1,
+          toDisplayString(_ctx.nextText),
+          1
+        )) : (openBlock(), createBlock(unref(ElIcon), { key: 1 }, {
+          default: withCtx(() => [
+            (openBlock(), createBlock(resolveDynamicComponent(_ctx.nextIcon)))
+          ]),
+          _: 1
+        }))
+      ], 8, _hoisted_1$5);
+    };
+  }
+});
+var Next = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/pagination/src/components/next.vue"]]);
+
+const usePagination = () => inject(elPaginationKey, {});
+
+const paginationSizesProps = buildProps({
+  pageSize: {
+    type: Number,
+    required: true
+  },
+  pageSizes: {
+    type: definePropType(Array),
+    default: () => mutable([10, 20, 30, 40, 50, 100])
+  },
+  popperClass: {
+    type: String
+  },
+  popperStyle: {
+    type: definePropType([String, Object])
+  },
+  disabled: Boolean,
+  teleported: Boolean,
+  size: {
+    type: String,
+    values: componentSizes
+  },
+  appendSizeTo: String
+});
+
+const _sfc_main$6 = defineComponent({
+  ...{
+    name: "ElPaginationSizes"
+  },
+  __name: "sizes",
+  props: paginationSizesProps,
+  emits: ["page-size-change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { t } = useLocale();
+    const ns = useNamespace("pagination");
+    const pagination = usePagination();
+    const innerPageSize = ref(props.pageSize);
+    watch(
+      () => props.pageSizes,
+      (newVal, oldVal) => {
+        if (isEqual(newVal, oldVal))
+          return;
+        if (isArray(newVal)) {
+          const pageSize = newVal.includes(props.pageSize) ? props.pageSize : props.pageSizes[0];
+          emit("page-size-change", pageSize);
+        }
+      }
+    );
+    watch(
+      () => props.pageSize,
+      (newVal) => {
+        innerPageSize.value = newVal;
+      }
+    );
+    const innerPageSizes = computed(() => props.pageSizes);
+    function handleChange(val) {
+      var _a;
+      if (val !== innerPageSize.value) {
+        innerPageSize.value = val;
+        (_a = pagination.handleSizeChange) == null ? void 0 : _a.call(pagination, Number(val));
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "span",
+        {
+          class: normalizeClass(unref(ns).e("sizes"))
+        },
+        [
+          createVNode(unref(ElSelect), {
+            "model-value": innerPageSize.value,
+            disabled: _ctx.disabled,
+            "popper-class": _ctx.popperClass,
+            "popper-style": _ctx.popperStyle,
+            size: _ctx.size,
+            teleported: _ctx.teleported,
+            "validate-event": false,
+            "append-to": _ctx.appendSizeTo,
+            onChange: handleChange
+          }, {
+            default: withCtx(() => [
+              (openBlock(true), createElementBlock(
+                Fragment,
+                null,
+                renderList(innerPageSizes.value, (item) => {
+                  return openBlock(), createBlock(unref(ElOption), {
+                    key: item,
+                    value: item,
+                    label: item + unref(t)("el.pagination.pagesize")
+                  }, null, 8, ["value", "label"]);
+                }),
+                128
+              ))
+            ]),
+            _: 1
+          }, 8, ["model-value", "disabled", "popper-class", "popper-style", "size", "teleported", "append-to"])
+        ],
+        2
+      );
+    };
+  }
+});
+var Sizes = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/pagination/src/components/sizes.vue"]]);
+
+const paginationJumperProps = buildProps({
+  size: {
+    type: String,
+    values: componentSizes
+  }
+});
+
+const _hoisted_1$4 = ["disabled"];
+const _sfc_main$5 = defineComponent({
+  ...{
+    name: "ElPaginationJumper"
+  },
+  __name: "jumper",
+  props: paginationJumperProps,
+  setup(__props) {
+    const { t } = useLocale();
+    const ns = useNamespace("pagination");
+    const { pageCount, disabled, currentPage, changeEvent } = usePagination();
+    const userInput = ref();
+    const innerValue = computed(() => {
+      var _a;
+      return (_a = userInput.value) != null ? _a : currentPage == null ? void 0 : currentPage.value;
+    });
+    function handleInput(val) {
+      userInput.value = val ? +val : "";
+    }
+    function handleChange(val) {
+      val = Math.trunc(+val);
+      changeEvent == null ? void 0 : changeEvent(val);
+      userInput.value = void 0;
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", {
+        class: normalizeClass(unref(ns).e("jump")),
+        disabled: unref(disabled)
+      }, [
+        createElementVNode(
+          "span",
+          {
+            class: normalizeClass([unref(ns).e("goto")])
+          },
+          toDisplayString(unref(t)("el.pagination.goto")),
+          3
+        ),
+        createVNode(unref(ElInput), {
+          size: _ctx.size,
+          class: normalizeClass([unref(ns).e("editor"), unref(ns).is("in-pagination")]),
+          min: 1,
+          max: unref(pageCount),
+          disabled: unref(disabled),
+          "model-value": innerValue.value,
+          "validate-event": false,
+          "aria-label": unref(t)("el.pagination.page"),
+          type: "number",
+          "onUpdate:modelValue": handleInput,
+          onChange: handleChange
+        }, null, 8, ["size", "class", "max", "disabled", "model-value", "aria-label"]),
+        createElementVNode(
+          "span",
+          {
+            class: normalizeClass([unref(ns).e("classifier")])
+          },
+          toDisplayString(unref(t)("el.pagination.pageClassifier")),
+          3
+        )
+      ], 10, _hoisted_1$4);
+    };
+  }
+});
+var Jumper = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/pagination/src/components/jumper.vue"]]);
+
+const paginationTotalProps = buildProps({
+  total: {
+    type: Number,
+    default: 1e3
+  }
+});
+
+const _hoisted_1$3 = ["disabled"];
+const _sfc_main$4 = defineComponent({
+  ...{
+    name: "ElPaginationTotal"
+  },
+  __name: "total",
+  props: paginationTotalProps,
+  setup(__props) {
+    const { t } = useLocale();
+    const ns = useNamespace("pagination");
+    const { disabled } = usePagination();
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", {
+        class: normalizeClass(unref(ns).e("total")),
+        disabled: unref(disabled)
+      }, toDisplayString(unref(t)("el.pagination.total", {
+        total: _ctx.total
+      })), 11, _hoisted_1$3);
+    };
+  }
+});
+var Total = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/pagination/src/components/total.vue"]]);
+
+const paginationPagerProps = buildProps({
+  currentPage: {
+    type: Number,
+    default: 1
+  },
+  pageCount: {
+    type: Number,
+    required: true
+  },
+  pagerCount: {
+    type: Number,
+    default: 7
+  },
+  disabled: Boolean
+});
+
+const _hoisted_1$2 = ["aria-current", "aria-label", "tabindex"];
+const _hoisted_2 = ["tabindex", "aria-label"];
+const _hoisted_3 = ["aria-current", "aria-label", "tabindex"];
+const _hoisted_4 = ["tabindex", "aria-label"];
+const _hoisted_5 = ["aria-current", "aria-label", "tabindex"];
+const _sfc_main$3 = defineComponent({
+  ...{
+    name: "ElPaginationPager"
+  },
+  __name: "pager",
+  props: paginationPagerProps,
+  emits: [CHANGE_EVENT],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const nsPager = useNamespace("pager");
+    const nsIcon = useNamespace("icon");
+    const { t } = useLocale();
+    const showPrevMore = ref(false);
+    const showNextMore = ref(false);
+    const quickPrevHover = ref(false);
+    const quickNextHover = ref(false);
+    const quickPrevFocus = ref(false);
+    const quickNextFocus = ref(false);
+    const pagers = computed(() => {
+      const pagerCount = props.pagerCount;
+      const halfPagerCount = (pagerCount - 1) / 2;
+      const currentPage = Number(props.currentPage);
+      const pageCount = Number(props.pageCount);
+      let showPrevMore2 = false;
+      let showNextMore2 = false;
+      if (pageCount > pagerCount) {
+        if (currentPage > pagerCount - halfPagerCount) {
+          showPrevMore2 = true;
+        }
+        if (currentPage < pageCount - halfPagerCount) {
+          showNextMore2 = true;
+        }
+      }
+      const array = [];
+      if (showPrevMore2 && !showNextMore2) {
+        const startPage = pageCount - (pagerCount - 2);
+        for (let i = startPage; i < pageCount; i++) {
+          array.push(i);
+        }
+      } else if (!showPrevMore2 && showNextMore2) {
+        for (let i = 2; i < pagerCount; i++) {
+          array.push(i);
+        }
+      } else if (showPrevMore2 && showNextMore2) {
+        const offset = Math.floor(pagerCount / 2) - 1;
+        for (let i = currentPage - offset; i <= currentPage + offset; i++) {
+          array.push(i);
+        }
+      } else {
+        for (let i = 2; i < pageCount; i++) {
+          array.push(i);
+        }
+      }
+      return array;
+    });
+    const prevMoreKls = computed(() => [
+      "more",
+      "btn-quickprev",
+      nsIcon.b(),
+      nsPager.is("disabled", props.disabled)
+    ]);
+    const nextMoreKls = computed(() => [
+      "more",
+      "btn-quicknext",
+      nsIcon.b(),
+      nsPager.is("disabled", props.disabled)
+    ]);
+    const tabindex = computed(() => props.disabled ? -1 : 0);
+    watch(
+      () => [props.pageCount, props.pagerCount, props.currentPage],
+      ([pageCount, pagerCount, currentPage]) => {
+        const halfPagerCount = (pagerCount - 1) / 2;
+        let showPrev = false;
+        let showNext = false;
+        if (pageCount > pagerCount) {
+          showPrev = currentPage > pagerCount - halfPagerCount;
+          showNext = currentPage < pageCount - halfPagerCount;
+        }
+        quickPrevHover.value && (quickPrevHover.value = showPrev);
+        quickNextHover.value && (quickNextHover.value = showNext);
+        showPrevMore.value = showPrev;
+        showNextMore.value = showNext;
+      },
+      { immediate: true }
+    );
+    function onMouseEnter(forward = false) {
+      if (props.disabled)
+        return;
+      if (forward) {
+        quickPrevHover.value = true;
+      } else {
+        quickNextHover.value = true;
+      }
+    }
+    function onFocus(forward = false) {
+      if (forward) {
+        quickPrevFocus.value = true;
+      } else {
+        quickNextFocus.value = true;
+      }
+    }
+    function onEnter(e) {
+      const target = e.target;
+      if (target.tagName.toLowerCase() === "li" && Array.from(target.classList).includes("number")) {
+        const newPage = Number(target.textContent);
+        if (newPage !== props.currentPage) {
+          emit(CHANGE_EVENT, newPage);
+        }
+      } else if (target.tagName.toLowerCase() === "li" && Array.from(target.classList).includes("more")) {
+        onPagerClick(e);
+      }
+    }
+    function onPagerClick(event) {
+      const target = event.target;
+      if (target.tagName.toLowerCase() === "ul" || props.disabled) {
+        return;
+      }
+      let newPage = Number(target.textContent);
+      const pageCount = props.pageCount;
+      const currentPage = props.currentPage;
+      const pagerCountOffset = props.pagerCount - 2;
+      if (target.className.includes("more")) {
+        if (target.className.includes("quickprev")) {
+          newPage = currentPage - pagerCountOffset;
+        } else if (target.className.includes("quicknext")) {
+          newPage = currentPage + pagerCountOffset;
+        }
+      }
+      if (!Number.isNaN(+newPage)) {
+        if (newPage < 1) {
+          newPage = 1;
+        }
+        if (newPage > pageCount) {
+          newPage = pageCount;
+        }
+      }
+      if (newPage !== currentPage) {
+        emit(CHANGE_EVENT, newPage);
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "ul",
+        {
+          class: normalizeClass(unref(nsPager).b()),
+          onClick: onPagerClick,
+          onKeyup: withKeys(onEnter, ["enter"])
+        },
+        [
+          _ctx.pageCount > 0 ? (openBlock(), createElementBlock("li", {
+            key: 0,
+            class: normalizeClass([[
+              unref(nsPager).is("active", _ctx.currentPage === 1),
+              unref(nsPager).is("disabled", _ctx.disabled)
+            ], "number"]),
+            "aria-current": _ctx.currentPage === 1,
+            "aria-label": unref(t)("el.pagination.currentPage", { pager: 1 }),
+            tabindex: tabindex.value
+          }, " 1 ", 10, _hoisted_1$2)) : createCommentVNode("v-if", true),
+          showPrevMore.value ? (openBlock(), createElementBlock("li", {
+            key: 1,
+            class: normalizeClass(prevMoreKls.value),
+            tabindex: tabindex.value,
+            "aria-label": unref(t)("el.pagination.prevPages", { pager: _ctx.pagerCount - 2 }),
+            onMouseenter: _cache[0] || (_cache[0] = ($event) => onMouseEnter(true)),
+            onMouseleave: _cache[1] || (_cache[1] = ($event) => quickPrevHover.value = false),
+            onFocus: _cache[2] || (_cache[2] = ($event) => onFocus(true)),
+            onBlur: _cache[3] || (_cache[3] = ($event) => quickPrevFocus.value = false)
+          }, [
+            (quickPrevHover.value || quickPrevFocus.value) && !_ctx.disabled ? (openBlock(), createBlock(unref(DArrowLeft), { key: 0 })) : (openBlock(), createBlock(unref(MoreFilled), { key: 1 }))
+          ], 42, _hoisted_2)) : createCommentVNode("v-if", true),
+          (openBlock(true), createElementBlock(
+            Fragment,
+            null,
+            renderList(pagers.value, (pager) => {
+              return openBlock(), createElementBlock("li", {
+                key: pager,
+                class: normalizeClass([[
+                  unref(nsPager).is("active", _ctx.currentPage === pager),
+                  unref(nsPager).is("disabled", _ctx.disabled)
+                ], "number"]),
+                "aria-current": _ctx.currentPage === pager,
+                "aria-label": unref(t)("el.pagination.currentPage", { pager }),
+                tabindex: tabindex.value
+              }, toDisplayString(pager), 11, _hoisted_3);
+            }),
+            128
+          )),
+          showNextMore.value ? (openBlock(), createElementBlock("li", {
+            key: 2,
+            class: normalizeClass(nextMoreKls.value),
+            tabindex: tabindex.value,
+            "aria-label": unref(t)("el.pagination.nextPages", { pager: _ctx.pagerCount - 2 }),
+            onMouseenter: _cache[4] || (_cache[4] = ($event) => onMouseEnter()),
+            onMouseleave: _cache[5] || (_cache[5] = ($event) => quickNextHover.value = false),
+            onFocus: _cache[6] || (_cache[6] = ($event) => onFocus()),
+            onBlur: _cache[7] || (_cache[7] = ($event) => quickNextFocus.value = false)
+          }, [
+            (quickNextHover.value || quickNextFocus.value) && !_ctx.disabled ? (openBlock(), createBlock(unref(DArrowRight), { key: 0 })) : (openBlock(), createBlock(unref(MoreFilled), { key: 1 }))
+          ], 42, _hoisted_4)) : createCommentVNode("v-if", true),
+          _ctx.pageCount > 1 ? (openBlock(), createElementBlock("li", {
+            key: 3,
+            class: normalizeClass([[
+              unref(nsPager).is("active", _ctx.currentPage === _ctx.pageCount),
+              unref(nsPager).is("disabled", _ctx.disabled)
+            ], "number"]),
+            "aria-current": _ctx.currentPage === _ctx.pageCount,
+            "aria-label": unref(t)("el.pagination.currentPage", { pager: _ctx.pageCount }),
+            tabindex: tabindex.value
+          }, toDisplayString(_ctx.pageCount), 11, _hoisted_5)) : createCommentVNode("v-if", true)
+        ],
+        34
+      );
+    };
+  }
+});
+var Pager = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/pagination/src/components/pager.vue"]]);
+
+const isAbsent = (v) => typeof v !== "number";
+const paginationProps = buildProps({
+  pageSize: Number,
+  defaultPageSize: Number,
+  total: Number,
+  pageCount: Number,
+  pagerCount: {
+    type: Number,
+    validator: (value) => {
+      return isNumber(value) && Math.trunc(value) === value && value > 4 && value < 22 && value % 2 === 1;
+    },
+    default: 7
+  },
+  currentPage: Number,
+  defaultCurrentPage: Number,
+  layout: {
+    type: String,
+    default: ["prev", "pager", "next", "jumper", "->", "total"].join(", ")
+  },
+  pageSizes: {
+    type: definePropType(Array),
+    default: () => mutable([10, 20, 30, 40, 50, 100])
+  },
+  popperClass: {
+    type: String,
+    default: ""
+  },
+  popperStyle: {
+    type: definePropType([String, Object])
+  },
+  prevText: {
+    type: String,
+    default: ""
+  },
+  prevIcon: {
+    type: iconPropType,
+    default: () => ArrowLeft
+  },
+  nextText: {
+    type: String,
+    default: ""
+  },
+  nextIcon: {
+    type: iconPropType,
+    default: () => ArrowRight
+  },
+  teleported: {
+    type: Boolean,
+    default: true
+  },
+  small: Boolean,
+  size: useSizeProp,
+  background: Boolean,
+  disabled: Boolean,
+  hideOnSinglePage: Boolean,
+  appendSizeTo: String
+});
+const paginationEmits = {
+  "update:current-page": (val) => isNumber(val),
+  "update:page-size": (val) => isNumber(val),
+  "size-change": (val) => isNumber(val),
+  change: (currentPage, pageSize) => isNumber(currentPage) && isNumber(pageSize),
+  "current-change": (val) => isNumber(val),
+  "prev-click": (val) => isNumber(val),
+  "next-click": (val) => isNumber(val)
+};
+const componentName = "ElPagination";
+var Pagination = defineComponent({
+  name: componentName,
+  props: paginationProps,
+  emits: paginationEmits,
+  setup(props, { emit, slots }) {
+    const { t } = useLocale();
+    const ns = useNamespace("pagination");
+    const vnodeProps = getCurrentInstance().vnode.props || {};
+    const _globalSize = useGlobalSize();
+    const _size = computed(
+      () => {
+        var _a;
+        return props.small ? "small" : (_a = props.size) != null ? _a : _globalSize.value;
+      }
+    );
+    useDeprecated(
+      {
+        from: "small",
+        replacement: "size",
+        version: "3.0.0",
+        scope: "el-pagination",
+        ref: "https://element-plus.org/zh-CN/component/pagination.html"
+      },
+      computed(() => !!props.small)
+    );
+    const hasCurrentPageListener = "onUpdate:currentPage" in vnodeProps || "onUpdate:current-page" in vnodeProps || "onCurrentChange" in vnodeProps;
+    const hasPageSizeListener = "onUpdate:pageSize" in vnodeProps || "onUpdate:page-size" in vnodeProps || "onSizeChange" in vnodeProps;
+    const assertValidUsage = computed(() => {
+      if (isAbsent(props.total) && isAbsent(props.pageCount))
+        return false;
+      if (!isAbsent(props.currentPage) && !hasCurrentPageListener)
+        return false;
+      if (props.layout.includes("sizes")) {
+        if (!isAbsent(props.pageCount)) {
+          if (!hasPageSizeListener)
+            return false;
+        } else if (!isAbsent(props.total)) {
+          if (!isAbsent(props.pageSize)) {
+            if (!hasPageSizeListener) {
+              return false;
+            }
+          }
+        }
+      }
+      return true;
+    });
+    const innerPageSize = ref(
+      isAbsent(props.defaultPageSize) ? 10 : props.defaultPageSize
+    );
+    const innerCurrentPage = ref(
+      isAbsent(props.defaultCurrentPage) ? 1 : props.defaultCurrentPage
+    );
+    const pageSizeBridge = computed({
+      get() {
+        return isAbsent(props.pageSize) ? innerPageSize.value : props.pageSize;
+      },
+      set(v) {
+        if (isAbsent(props.pageSize)) {
+          innerPageSize.value = v;
+        }
+        if (hasPageSizeListener) {
+          emit("update:page-size", v);
+          emit("size-change", v);
+        }
+      }
+    });
+    const pageCountBridge = computed(() => {
+      let pageCount = 0;
+      if (!isAbsent(props.pageCount)) {
+        pageCount = props.pageCount;
+      } else if (!isAbsent(props.total)) {
+        pageCount = Math.max(1, Math.ceil(props.total / pageSizeBridge.value));
+      }
+      return pageCount;
+    });
+    const currentPageBridge = computed({
+      get() {
+        return isAbsent(props.currentPage) ? innerCurrentPage.value : props.currentPage;
+      },
+      set(v) {
+        let newCurrentPage = v;
+        if (v < 1) {
+          newCurrentPage = 1;
+        } else if (v > pageCountBridge.value) {
+          newCurrentPage = pageCountBridge.value;
+        }
+        if (isAbsent(props.currentPage)) {
+          innerCurrentPage.value = newCurrentPage;
+        }
+        if (hasCurrentPageListener) {
+          emit("update:current-page", newCurrentPage);
+          emit("current-change", newCurrentPage);
+        }
+      }
+    });
+    watch(pageCountBridge, (val) => {
+      if (currentPageBridge.value > val)
+        currentPageBridge.value = val;
+    });
+    watch(
+      [currentPageBridge, pageSizeBridge],
+      (value) => {
+        emit(CHANGE_EVENT, ...value);
+      },
+      { flush: "post" }
+    );
+    function handleCurrentChange(val) {
+      currentPageBridge.value = val;
+    }
+    function handleSizeChange(val) {
+      pageSizeBridge.value = val;
+      const newPageCount = pageCountBridge.value;
+      if (currentPageBridge.value > newPageCount) {
+        currentPageBridge.value = newPageCount;
+      }
+    }
+    function prev() {
+      if (props.disabled)
+        return;
+      currentPageBridge.value -= 1;
+      emit("prev-click", currentPageBridge.value);
+    }
+    function next() {
+      if (props.disabled)
+        return;
+      currentPageBridge.value += 1;
+      emit("next-click", currentPageBridge.value);
+    }
+    function addClass(element, cls) {
+      if (element) {
+        if (!element.props) {
+          element.props = {};
+        }
+        element.props.class = [element.props.class, cls].join(" ");
+      }
+    }
+    provide(elPaginationKey, {
+      pageCount: pageCountBridge,
+      disabled: computed(() => props.disabled),
+      currentPage: currentPageBridge,
+      changeEvent: handleCurrentChange,
+      handleSizeChange
+    });
+    return () => {
+      var _a, _b;
+      if (!assertValidUsage.value) {
+        debugWarn(componentName, t("el.pagination.deprecationWarning"));
+        return null;
+      }
+      if (!props.layout)
+        return null;
+      if (props.hideOnSinglePage && pageCountBridge.value <= 1)
+        return null;
+      const rootChildren = [];
+      const rightWrapperChildren = [];
+      const rightWrapperRoot = h(
+        "div",
+        { class: ns.e("rightwrapper") },
+        rightWrapperChildren
+      );
+      const TEMPLATE_MAP = {
+        prev: h(Prev, {
+          disabled: props.disabled,
+          currentPage: currentPageBridge.value,
+          prevText: props.prevText,
+          prevIcon: props.prevIcon,
+          onClick: prev
+        }),
+        jumper: h(Jumper, {
+          size: _size.value
+        }),
+        pager: h(Pager, {
+          currentPage: currentPageBridge.value,
+          pageCount: pageCountBridge.value,
+          pagerCount: props.pagerCount,
+          onChange: handleCurrentChange,
+          disabled: props.disabled
+        }),
+        next: h(Next, {
+          disabled: props.disabled,
+          currentPage: currentPageBridge.value,
+          pageCount: pageCountBridge.value,
+          nextText: props.nextText,
+          nextIcon: props.nextIcon,
+          onClick: next
+        }),
+        sizes: h(Sizes, {
+          pageSize: pageSizeBridge.value,
+          pageSizes: props.pageSizes,
+          popperClass: props.popperClass,
+          popperStyle: props.popperStyle,
+          disabled: props.disabled,
+          teleported: props.teleported,
+          size: _size.value,
+          appendSizeTo: props.appendSizeTo
+        }),
+        slot: (_b = (_a = slots == null ? void 0 : slots.default) == null ? void 0 : _a.call(slots)) != null ? _b : null,
+        total: h(Total, { total: isAbsent(props.total) ? 0 : props.total })
+      };
+      const components = props.layout.split(",").map((item) => item.trim());
+      let haveRightWrapper = false;
+      components.forEach((c) => {
+        if (c === "->") {
+          haveRightWrapper = true;
+          return;
+        }
+        if (!haveRightWrapper) {
+          rootChildren.push(TEMPLATE_MAP[c]);
+        } else {
+          rightWrapperChildren.push(TEMPLATE_MAP[c]);
+        }
+      });
+      addClass(rootChildren[0], ns.is("first"));
+      addClass(rootChildren[rootChildren.length - 1], ns.is("last"));
+      if (haveRightWrapper && rightWrapperChildren.length > 0) {
+        addClass(rightWrapperChildren[0], ns.is("first"));
+        addClass(
+          rightWrapperChildren[rightWrapperChildren.length - 1],
+          ns.is("last")
+        );
+        rootChildren.push(rightWrapperRoot);
+      }
+      return h(
+        "div",
+        {
+          class: [
+            ns.b(),
+            ns.is("background", props.background),
+            ns.m(_size.value)
+          ]
+        },
+        rootChildren
+      );
+    };
+  }
+});
+
+const ElPagination = withInstall(Pagination);
+
+const baseUrl = "https://api.iconify.design";
+function paginateArray(array, ps, p) {
+  return array.slice((p - 1) * ps, p * ps);
+}
+function useIcon() {
+  const categories = ref([]);
+  const currentCategory = ref("");
+  const categoriesData = ref();
+  const uncategorizedData = ref();
+  const ps = ref(50);
+  const p = ref(1);
+  const keyword = ref("");
+  const collection = ref("carbon");
+  const allIcons = computed(() => {
+    let icons = [];
+    if (uncategorizedData.value) {
+      icons = icons.concat(uncategorizedData.value);
+    }
+    if (categoriesData.value) {
+      Object.values(categoriesData.value).forEach((categoryIcons2) => {
+        icons = icons.concat(categoryIcons2);
+      });
+    }
+    return Array.from(new Set(icons));
+  });
+  const categoryIcons = computed(() => {
+    if (keyword.value) {
+      return allIcons.value.filter((icon) => icon.includes(keyword.value));
+    }
+    if (!currentCategory.value || !categoriesData.value) {
+      return allIcons.value;
+    }
+    return categoriesData.value[currentCategory.value];
+  });
+  const pageIcons = computed(() => paginateArray(categoryIcons.value, ps.value, p.value));
+  const total = computed(() => categoryIcons.value.length);
+  const fetchData = async (prefix = "carbon") => {
+    const url = `${baseUrl}/collection?prefix=${prefix}`;
+    const res = await fetch(url);
+    const data = await res.json();
+    categoriesData.value = data.categories;
+    uncategorizedData.value = data.uncategorized;
+    categories.value = Object.keys(data.categories || {});
+  };
+  watch(collection, () => {
+    p.value = 1;
+    fetchData(collection.value);
+  });
+  return {
+    fetchData,
+    categoryIcons,
+    allIcons,
+    pageIcons,
+    categories,
+    currentCategory,
+    collection,
+    total,
+    ps,
+    p,
+    keyword
+  };
+}
+function useCollection() {
+  const collections = ref([]);
+  const collectionsData = ref();
+  const ps = ref(10);
+  const p = ref(1);
+  const keyword = ref("");
+  const listCollections = computed(() => {
+    const myCollections = keyword.value ? collections.value.filter((collection) => collection.includes(keyword.value)) : collections.value;
+    return paginateArray(myCollections, ps.value * p.value, 1);
+  });
+  const fetchData = async () => {
+    const url = `${baseUrl}/collections`;
+    const res = await fetch(url);
+    const data = await res.json();
+    collections.value = Object.keys(data);
+    collectionsData.value = data;
+  };
+  const loadMore = () => {
+    p.value++;
+  };
+  const search = (val) => {
+    keyword.value = val;
+    p.value = 1;
+  };
+  return {
+    fetchData,
+    collections,
+    collectionsData,
+    listCollections,
+    loadMore,
+    keyword,
+    search,
+    ps,
+    p
+  };
+}
+
+const _hoisted_1$1 = ["data-collection-name"];
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "collections",
+  props: {
+    collection: {},
+    collections: {}
+  },
+  emits: ["choiced"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const { fetchData, listCollections, loadMore, collectionsData, collections, search } = useCollection();
+    const scrollbarRef = useTemplateRef("scrollbarRef");
+    const keyword = ref("");
+    const handleSearch = debounce(() => {
+      search(keyword.value);
+      scrollbarRef.value?.setScrollTop(0);
+    }, 500);
+    function handleChoice(e) {
+      let target = e.target;
+      while (target.getAttribute("data-collection-name") === null) {
+        target = target.parentElement;
+      }
+      const name = target.getAttribute("data-collection-name");
+      if (name) {
+        emits("choiced", name);
+      }
+    }
+    onMounted(async () => {
+      await fetchData();
+      if (Array.isArray(props.collections) && props.collections.length > 0) {
+        collections.value = props.collections;
+      }
+    });
+    return (_ctx, _cache) => {
+      const _component_ElInput = ElInput;
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style.wrapper)
+      }, [
+        createVNode(Component$1, {
+          ref_key: "scrollbarRef",
+          ref: scrollbarRef,
+          flex: "",
+          onEndReached: unref(loadMore)
+        }, {
+          default: withCtx(() => [
+            createElementVNode("div", {
+              class: normalizeClass(_ctx.$style["search-wrapper"])
+            }, [
+              createVNode(_component_ElInput, {
+                modelValue: unref(keyword),
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(keyword) ? keyword.value = $event : null),
+                placeholder: "搜索合集...",
+                class: normalizeClass(_ctx.$style["search-input"]),
+                clearable: "",
+                onKeyup: unref(handleSearch),
+                onClear: unref(handleSearch)
+              }, null, 8, ["modelValue", "class", "onKeyup", "onClear"])
+            ], 2),
+            createElementVNode("div", {
+              class: normalizeClass(_ctx.$style.container),
+              onClick: handleChoice
+            }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(listCollections), (item) => {
+                return openBlock(), createElementBlock("div", {
+                  key: item,
+                  class: normalizeClass([_ctx.$style.collection, { [_ctx.$style.active]: item === __props.collection }]),
+                  "data-collection-name": item
+                }, [
+                  createElementVNode("h5", null, [
+                    createElementVNode("span", null, "[" + toDisplayString(unref(collectionsData)[item].total) + "]", 1),
+                    createTextVNode(toDisplayString(item), 1)
+                  ]),
+                  createElementVNode("div", {
+                    class: normalizeClass(_ctx.$style.icons)
+                  }, [
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(unref(collectionsData)[item].samples, (icon) => {
+                      return openBlock(), createBlock(Component$2, {
+                        key: `${item}:${icon}`,
+                        name: `${item}:${icon}`
+                      }, null, 8, ["name"]);
+                    }), 128))
+                  ], 2)
+                ], 10, _hoisted_1$1);
+              }), 128))
+            ], 2)
+          ]),
+          _: 1
+        }, 8, ["onEndReached"])
+      ], 2);
+    };
+  }
+});
+
+/* unplugin-vue-components disabled */const wrapper$1 = "_wrapper_58yrj_1";
+const container$1 = "_container_58yrj_14";
+const collection = "_collection_58yrj_20";
+const active = "_active_58yrj_27";
+const icons = "_icons_58yrj_46";
+const style0$2 = {
+	wrapper: wrapper$1,
+	"search-wrapper": "_search-wrapper_58yrj_7",
+	container: container$1,
+	collection: collection,
+	active: active,
+	icons: icons
+};
+
+const cssModules$2 = {
+  "$style": style0$2
+};
+const Collections = /* @__PURE__ */ _export_sfc$1(_sfc_main$2, [["__cssModules", cssModules$2]]);
+
+const _hoisted_1 = ["data-icon-name"];
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "panel",
+  props: {
+    modelValue: {},
+    collection: {},
+    collections: {}
+  },
+  emits: ["choiced"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const $style = useCssModule();
+    const { fetchData, pageIcons, categories, currentCategory, total, ps, p, keyword, collection } = useIcon();
+    const collectionsWrapperRef = useTemplateRef("collectionsWrapperRef");
+    const collectionsVisible = ref(false);
+    const icon = h(Component$2, { name: "mage:caret-left", size: 40 });
+    const showCollections = computed(() => !(Array.isArray(props.collections) && props.collections.length === 1));
+    async function toggleCollections() {
+      if (!collectionsVisible.value || collectionsWrapperRef.value?.classList.contains($style.hidden)) {
+        collectionsVisible.value = true;
+        await promiseTimeout(0);
+        const element = collectionsWrapperRef.value;
+        element.classList.add($style.visible);
+        element.classList.remove($style.hidden);
+        setTimeout(() => {
+          element.classList.add($style.shadow);
+        }, 200);
+      } else {
+        const element = collectionsWrapperRef.value;
+        element.classList.remove($style.shadow);
+        element.classList.remove($style.visible);
+        setTimeout(() => {
+          element.classList.add($style.hidden);
+        }, 300);
+      }
+    }
+    function handleChoice(e) {
+      let target = e.target;
+      while (target.tagName !== "LI") {
+        target = target.parentElement;
+      }
+      const name = target.getAttribute("data-icon-name");
+      if (name) {
+        emits("choiced", `${collection.value}:${name}`);
+      }
+    }
+    function handleCollectionChoiced(name) {
+      collection.value = name;
+    }
+    const collectionWatch = watch(() => props.modelValue, () => {
+      if (props.collections?.length === 1) {
+        collection.value = props.collections[0];
+        return;
+      }
+      if (props.collection) {
+        collection.value = props.collection;
+        return;
+      }
+      if (props.modelValue && props.modelValue.includes(":")) {
+        collection.value = props.modelValue.split(":")[0];
+      }
+    }, { immediate: true });
+    onMounted(() => fetchData(collection.value));
+    onUnmounted(() => collectionWatch.stop());
+    return (_ctx, _cache) => {
+      const _component_ElButton = ElButton;
+      const _component_ElInput = ElInput;
+      const _component_ElDivider = ElDivider;
+      const _component_ElPagination = ElPagination;
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(unref($style).panel)
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(unref($style).wrapper)
+        }, [
+          createVNode(_component_ElInput, {
+            modelValue: unref(keyword),
+            "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(keyword) ? keyword.value = $event : null),
+            placeholder: "搜索图标...",
+            class: normalizeClass(unref($style)["search-input"]),
+            clearable: ""
+          }, createSlots({ _: 2 }, [
+            unref(showCollections) ? {
+              name: "prepend",
+              fn: withCtx(() => [
+                createVNode(_component_ElButton, {
+                  icon: unref(icon),
+                  type: "primary",
+                  class: normalizeClass(unref($style)["collections-button"]),
+                  onClick: toggleCollections
+                }, null, 8, ["icon", "class"])
+              ]),
+              key: "0"
+            } : void 0,
+            unref(categories).length ? {
+              name: "append",
+              fn: withCtx(() => [
+                createVNode(Component$3, {
+                  modelValue: unref(currentCategory),
+                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(currentCategory) ? currentCategory.value = $event : null),
+                  placeholder: "分类",
+                  options: unref(categories),
+                  width: "120px",
+                  teleported: false,
+                  clearable: "",
+                  onChange: _cache[1] || (_cache[1] = ($event) => p.value = 1)
+                }, null, 8, ["modelValue", "options"])
+              ]),
+              key: "1"
+            } : void 0
+          ]), 1032, ["modelValue", "class"]),
+          createElementVNode("ul", {
+            class: normalizeClass(unref($style).container),
+            onClick: handleChoice
+          }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(pageIcons), (item) => {
+              return openBlock(), createElementBlock("li", {
+                key: item,
+                "data-icon-name": item
+              }, [
+                createVNode(Component$2, {
+                  name: `${unref(collection)}:${item}`
+                }, null, 8, ["name"])
+              ], 8, _hoisted_1);
+            }), 128))
+          ], 2),
+          createVNode(_component_ElDivider, {
+            class: normalizeClass(unref($style).divider)
+          }, null, 8, ["class"]),
+          createVNode(_component_ElPagination, {
+            "current-page": unref(p),
+            "onUpdate:currentPage": _cache[3] || (_cache[3] = ($event) => isRef(p) ? p.value = $event : null),
+            size: "small",
+            layout: "prev, pager, next",
+            total: unref(total),
+            "page-size": unref(ps),
+            class: normalizeClass(unref($style).pagination)
+          }, null, 8, ["current-page", "total", "page-size", "class"])
+        ], 2),
+        unref(showCollections) && unref(collectionsVisible) ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          ref_key: "collectionsWrapperRef",
+          ref: collectionsWrapperRef,
+          class: normalizeClass(unref($style)["collections-wrapper"])
+        }, [
+          createVNode(Collections, {
+            collection: unref(collection),
+            collections: __props.collections,
+            onChoiced: handleCollectionChoiced
+          }, null, 8, ["collection", "collections"])
+        ], 2)) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+
+/* unplugin-vue-components disabled */const panel = "_panel_16t7i_1";
+const wrapper = "_wrapper_16t7i_5";
+const shadow = "_shadow_16t7i_42";
+const visible = "_visible_16t7i_45";
+const hidden = "_hidden_16t7i_48";
+const container = "_container_16t7i_52";
+const divider = "_divider_16t7i_73";
+const pagination = "_pagination_16t7i_77";
+const style0$1 = {
+	panel: panel,
+	wrapper: wrapper,
+	"search-input": "_search-input_16t7i_11",
+	"collections-button": "_collections-button_16t7i_15",
+	"collections-wrapper": "_collections-wrapper_16t7i_30",
+	shadow: shadow,
+	visible: visible,
+	hidden: hidden,
+	container: container,
+	divider: divider,
+	pagination: pagination
+};
+
+const cssModules$1 = {
+  "$style": style0$1
+};
+const Panel = /* @__PURE__ */ _export_sfc$1(_sfc_main$1, [["__cssModules", cssModules$1]]);
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "icon-picker",
+  props: {
+    modelValue: {},
+    collection: {},
+    collections: {}
+  },
+  emits: ["update:modelValue", "change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const visible = ref(false);
+    const panelVisible = ref(false);
+    const myValue = useVModel(props, "modelValue", emits);
+    const iconName = computed(() => myValue.value || "lucide:grip");
+    function handleChoiced(icon) {
+      myValue.value = icon;
+      visible.value = false;
+      emits("change", icon);
+    }
+    const pickerVisibleWatch = watch(visible, (val) => {
+      if (!val) {
+        return;
+      }
+      panelVisible.value = true;
+      pickerVisibleWatch.stop();
+    });
+    return (_ctx, _cache) => {
+      const _component_ElPopover = ElPopover;
+      return openBlock(), createBlock(_component_ElPopover, {
+        visible: unref(visible),
+        "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => isRef(visible) ? visible.value = $event : null),
+        placement: "bottom-start",
+        trigger: "click",
+        width: "350px"
+      }, {
+        reference: withCtx(() => [
+          createVNode(Component$4, mergeProps({
+            modelValue: unref(myValue),
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(myValue) ? myValue.value = $event : null),
+            class: _ctx.$style.input
+          }, _ctx.$attrs), {
+            prepend: withCtx(() => [
+              createVNode(Component$2, {
+                name: unref(iconName),
+                size: "24"
+              }, null, 8, ["name"])
+            ]),
+            _: 1
+          }, 16, ["modelValue", "class"])
+        ]),
+        default: withCtx(() => [
+          unref(panelVisible) ? (openBlock(), createBlock(Panel, mergeProps({ key: 0 }, props, { onChoiced: handleChoiced }), null, 16)) : createCommentVNode("", true)
+        ]),
+        _: 1
+      }, 8, ["visible"]);
+    };
+  }
+});
+
+/* unplugin-vue-components disabled */const input = "_input_1gamt_1";
+const style0 = {
+	input: input
+};
+
+const cssModules = {
+  "$style": style0
+};
+const Component = /* @__PURE__ */ _export_sfc$1(_sfc_main, [["__cssModules", cssModules]]);
+
+const __vite_glob_0_19 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+  __proto__: null,
+  default: Component
+}, Symbol.toStringTag, { value: 'Module' }));
+
+export { Component as C, __vite_glob_0_19 as _ };