hs-admin-ui 15.4.5 → 15.4.7

package/dist/index.vue_vue_type_script_setup_true_name_iconSelector_lang-DPhvpj3R.mjs

@@ -0,0 +1,288 @@
+import { defineComponent, defineAsyncComponent, ref, reactive, computed, onMounted, watch, resolveComponent, createElementBlock, openBlock, createVNode, createSlots, withCtx, createBlock, normalizeClass, createElementVNode, toDisplayString, unref, nextTick } from "vue";
+import { e as initIconfont } from "./index-6N7rbleN.mjs";
+const _hoisted_1 = { class: "icon-selector w100 h100" };
+const _hoisted_2 = { class: "icon-selector-warp" };
+const _hoisted_3 = { class: "icon-selector-warp-title" };
+const __default__ = defineComponent({
+  name: "iconSelector"
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: {
+    // 输入框前置内容
+    prepend: {
+      type: String,
+      default: () => "ele-Pointer"
+    },
+    // 输入框占位文本
+    placeholder: {
+      type: String,
+      default: () => "请输入内容搜索图标或者选择图标"
+    },
+    // 输入框占位文本
+    size: {
+      type: String,
+      default: () => "default"
+    },
+    // 弹窗标题
+    title: {
+      type: String,
+      default: () => "请选择图标"
+    },
+    // 禁用
+    disabled: {
+      type: Boolean,
+      default: () => false
+    },
+    // 是否可清空
+    clearable: {
+      type: Boolean,
+      default: () => true
+    },
+    // 自定义空状态描述文字
+    emptyDescription: {
+      type: String,
+      default: () => "无相关图标"
+    },
+    isShowPrepend: {
+      type: Boolean,
+      default: true
+    },
+    // 双向绑定值，默认为 modelValue，
+    // 参考：https://v3.cn.vuejs.org/guide/migration/v-model.html#%E8%BF%81%E7%A7%BB%E7%AD%96%E7%95%A5
+    // 参考：https://v3.cn.vuejs.org/guide/component-custom-events.html#%E5%A4%9A%E4%B8%AA-v-model-%E7%BB%91%E5%AE%9A
+    modelValue: String
+  },
+  emits: ["update:modelValue", "get", "clear"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const IconList = defineAsyncComponent(() => import("./list-DdPA5WjU.mjs"));
+    const inputWidthRef = ref();
+    const state = reactive({
+      fontIconPrefix: "",
+      fontIconWidth: 0,
+      fontIconSearch: "",
+      fontIconPlaceholder: "",
+      fontIconTabActive: "ali",
+      fontIconList: {
+        ali: [],
+        ele: [],
+        awe: []
+      }
+    });
+    const onIconFocus = () => {
+      if (!props.modelValue) return false;
+      state.fontIconSearch = props.modelValue;
+      state.fontIconPlaceholder = props.modelValue;
+    };
+    const onIconBlur = () => {
+      const list = fontIconTabNameList();
+      setTimeout(() => {
+        const icon = list.filter((icon2) => icon2 === state.fontIconSearch);
+        if (icon.length <= 0) state.fontIconSearch = "";
+      }, 300);
+    };
+    const fontIconSheetsFilterList = computed(() => {
+      const list = fontIconTabNameList();
+      if (!state.fontIconSearch) return list;
+      let search = state.fontIconSearch.trim().toLowerCase();
+      return list.filter((item) => {
+        if (item.toLowerCase().indexOf(search) !== -1) return item;
+      });
+    });
+    const fontIconTabNameList = () => {
+      let iconList = [];
+      if (state.fontIconTabActive === "ali") iconList = state.fontIconList.ali;
+      else if (state.fontIconTabActive === "ele") iconList = state.fontIconList.ele;
+      else if (state.fontIconTabActive === "awe") iconList = state.fontIconList.awe;
+      return iconList;
+    };
+    const initModeValueEcho = () => {
+      if (props.modelValue === "") return state.fontIconPlaceholder = props.placeholder;
+      state.fontIconPlaceholder = props.modelValue;
+      state.fontIconPrefix = props.modelValue;
+    };
+    const initFontIconName = () => {
+      let name = "ali";
+      if (!props.modelValue) return name;
+      if (props.modelValue.indexOf("iconfont") > -1) name = "ali";
+      else if (props.modelValue.indexOf("ele-") > -1) name = "ele";
+      else if (props.modelValue.indexOf("fa") > -1) name = "awe";
+      state.fontIconTabActive = name;
+      return name;
+    };
+    const initFontIconData = async (name) => {
+      if (name === "ali") {
+        if (state.fontIconList.ali.length > 0) return;
+        await initIconfont.ali().then((res) => {
+          state.fontIconList.ali = res.map((i) => `iconfont ${i}`);
+        });
+      } else if (name === "ele") {
+        if (state.fontIconList.ele.length > 0) return;
+        await initIconfont.ele().then((res) => {
+          state.fontIconList.ele = res;
+        });
+      } else if (name === "awe") {
+        if (state.fontIconList.awe.length > 0) return;
+        await initIconfont.awe().then((res) => {
+          state.fontIconList.awe = res.map((i) => `fa ${i}`);
+        });
+      }
+      state.fontIconPlaceholder = props.placeholder;
+      initModeValueEcho();
+    };
+    const onIconClick = (pane) => {
+      initFontIconData(pane.paneName);
+      inputWidthRef.value.focus();
+    };
+    const onColClick = (v) => {
+      state.fontIconPlaceholder = v;
+      state.fontIconPrefix = v;
+      emit("get", state.fontIconPrefix);
+      emit("update:modelValue", state.fontIconPrefix);
+      inputWidthRef.value.focus();
+    };
+    const onClearFontIcon = () => {
+      state.fontIconPrefix = "";
+      emit("clear", state.fontIconPrefix);
+      emit("update:modelValue", state.fontIconPrefix);
+    };
+    const getInputWidth = () => {
+      nextTick(() => {
+        var _a;
+        state.fontIconWidth = (_a = inputWidthRef.value.$el) == null ? void 0 : _a.offsetWidth;
+      });
+    };
+    const initResize = () => {
+      window.addEventListener("resize", () => {
+        getInputWidth();
+      });
+    };
+    onMounted(() => {
+      initFontIconData(initFontIconName());
+      initResize();
+      getInputWidth();
+    });
+    watch(
+      () => props.modelValue,
+      () => {
+        initModeValueEcho();
+        initFontIconName();
+      }
+    );
+    return (_ctx, _cache) => {
+      const _component_SvgIcon = resolveComponent("SvgIcon");
+      const _component_el_input = resolveComponent("el-input");
+      const _component_el_tab_pane = resolveComponent("el-tab-pane");
+      const _component_el_tabs = resolveComponent("el-tabs");
+      const _component_el_popover = resolveComponent("el-popover");
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(_component_el_input, {
+          modelValue: state.fontIconSearch,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => state.fontIconSearch = $event),
+          placeholder: state.fontIconPlaceholder,
+          clearable: __props.clearable,
+          disabled: __props.disabled,
+          size: __props.size,
+          ref_key: "inputWidthRef",
+          ref: inputWidthRef,
+          onClear: onClearFontIcon,
+          onFocus: onIconFocus,
+          onBlur: onIconBlur
+        }, createSlots({ _: 2 }, [
+          __props.isShowPrepend ? {
+            name: "prepend",
+            fn: withCtx(() => {
+              var _a, _b;
+              return [
+                (state.fontIconPrefix === "" ? ((_a = __props.prepend) == null ? void 0 : _a.indexOf("ele-")) > -1 : ((_b = state.fontIconPrefix) == null ? void 0 : _b.indexOf("ele-")) > -1) ? (openBlock(), createBlock(_component_SvgIcon, {
+                  key: 0,
+                  name: state.fontIconPrefix === "" ? __props.prepend : state.fontIconPrefix,
+                  class: "font14"
+                }, null, 8, ["name"])) : (openBlock(), createElementBlock("i", {
+                  key: 1,
+                  class: normalizeClass([state.fontIconPrefix === "" ? __props.prepend : state.fontIconPrefix, "font14"])
+                }, null, 2))
+              ];
+            }),
+            key: "0"
+          } : void 0
+        ]), 1032, ["modelValue", "placeholder", "clearable", "disabled", "size"]),
+        createVNode(_component_el_popover, {
+          placement: "bottom",
+          width: state.fontIconWidth,
+          transition: "el-zoom-in-top",
+          "popper-class": "icon-selector-popper",
+          trigger: "click",
+          "virtual-ref": inputWidthRef.value,
+          "virtual-triggering": ""
+        }, {
+          default: withCtx(() => [
+            createElementVNode("div", _hoisted_2, [
+              createElementVNode("div", _hoisted_3, toDisplayString(__props.title), 1),
+              createVNode(_component_el_tabs, {
+                modelValue: state.fontIconTabActive,
+                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => state.fontIconTabActive = $event),
+                onTabClick: onIconClick
+              }, {
+                default: withCtx(() => [
+                  createVNode(_component_el_tab_pane, {
+                    lazy: "",
+                    label: "ali",
+                    name: "ali"
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(unref(IconList), {
+                        list: fontIconSheetsFilterList.value,
+                        empty: __props.emptyDescription,
+                        prefix: state.fontIconPrefix,
+                        onGetIcon: onColClick
+                      }, null, 8, ["list", "empty", "prefix"])
+                    ]),
+                    _: 1
+                  }),
+                  createVNode(_component_el_tab_pane, {
+                    lazy: "",
+                    label: "ele",
+                    name: "ele"
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(unref(IconList), {
+                        list: fontIconSheetsFilterList.value,
+                        empty: __props.emptyDescription,
+                        prefix: state.fontIconPrefix,
+                        onGetIcon: onColClick
+                      }, null, 8, ["list", "empty", "prefix"])
+                    ]),
+                    _: 1
+                  }),
+                  createVNode(_component_el_tab_pane, {
+                    lazy: "",
+                    label: "awe",
+                    name: "awe"
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(unref(IconList), {
+                        list: fontIconSheetsFilterList.value,
+                        empty: __props.emptyDescription,
+                        prefix: state.fontIconPrefix,
+                        onGetIcon: onColClick
+                      }, null, 8, ["list", "empty", "prefix"])
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }, 8, ["modelValue"])
+            ])
+          ]),
+          _: 1
+        }, 8, ["width", "virtual-ref"])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};