sctj-components 1.0.28 → 1.0.30

package/lib/sctj-components.es.js

@@ -1,8 +1,8 @@
-import { computed as computed$1, resolveComponent, openBlock, createElementBlock, Fragment, renderList, unref, normalizeClass, toDisplayString, createBlock, withCtx, createTextVNode, createCommentVNode, createElementVNode, ref as ref$1, watch, mergeProps, createSlots, renderSlot, createVNode, TransitionGroup, onMounted as onMounted$1, onUpdated, nextTick, withModifiers, normalizeStyle, isRef, pushScopeId, popScopeId, onBeforeMount, onUnmounted, getCurrentInstance, reactive, resolveDirective, withDirectives, toRefs, resolveDynamicComponent, withKeys, useSlots, vShow, onBeforeUnmount, markRaw, useCssVars, shallowRef } from "vue";
+import { computed as computed$1, resolveComponent, openBlock, createElementBlock, Fragment, renderList, unref, normalizeClass, toDisplayString, createBlock, withCtx, createTextVNode, createCommentVNode, createElementVNode, ref as ref$1, watch, mergeProps, createSlots, renderSlot, createVNode, TransitionGroup, onMounted as onMounted$1, onUpdated, nextTick, withModifiers, normalizeStyle, onUnmounted, isRef, withDirectives, vShow, onBeforeMount, getCurrentInstance, reactive, resolveDirective, toRefs, resolveDynamicComponent, withKeys, pushScopeId, popScopeId, useSlots, onBeforeUnmount, markRaw, useCssVars, shallowRef } from "vue";
 import VueOfficePdf from "@vue-office/pdf";
 import VueOfficeDocx from "@vue-office/docx";
 import VueOfficeExcel from "@vue-office/excel";
-import { View, Download, Delete, Plus, Picture, Loading, UploadFilled, QuestionFilled } from "@element-plus/icons-vue";
+import { View, Download, Delete, Plus, Picture, Search, Loading, UploadFilled, QuestionFilled } from "@element-plus/icons-vue";
 import { ElMessage, ElLoading, ElMessageBox, ElButton, ElIcon } from "element-plus";
 import * as echarts from "echarts";
 import { throttle, isEqual } from "lodash";
@@ -135,7 +135,7 @@ const index_vue_vue_type_style_index_1_lang = "";
 const _hoisted_1$i = { class: "upload-file" };
 const _hoisted_2$b = { class: "el-upload__tip" };
 const _hoisted_3$9 = { style: { "color": "#f56c6c" } };
-const _hoisted_4$8 = { style: { "color": "#f56c6c" } };
+const _hoisted_4$7 = { style: { "color": "#f56c6c" } };
 const _hoisted_5$6 = ["title"];
 const _hoisted_6$3 = { class: "ele-upload-list__item-content-action" };
 const _hoisted_7$3 = { style: { "width": "100%", "height": "100%", "overflow": "auto" } };
@@ -411,7 +411,7 @@ const _sfc_main$o = {
                 ], 64)) : createCommentVNode("", true),
                 __props.fileType ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                   createTextVNode(" \u683C\u5F0F\u4E3A "),
-                  createElementVNode("b", _hoisted_4$8, toDisplayString(__props.fileType.join("/")), 1)
+                  createElementVNode("b", _hoisted_4$7, toDisplayString(__props.fileType.join("/")), 1)
                 ], 64)) : createCommentVNode("", true),
                 createTextVNode(" \u7684\u6587\u4EF6 ")
               ])
@@ -518,7 +518,7 @@ const _hoisted_2$a = {
   class: "el-upload__tip"
 };
 const _hoisted_3$8 = { style: { "color": "#f56c6c" } };
-const _hoisted_4$7 = { style: { "color": "#f56c6c" } };
+const _hoisted_4$6 = { style: { "color": "#f56c6c" } };
 const _hoisted_5$5 = ["src"];
 const _sfc_main$n = {
   __name: "index",
@@ -779,7 +779,7 @@ const _sfc_main$n = {
           ], 64)) : createCommentVNode("", true),
           props.fileType ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
             createTextVNode(" \u683C\u5F0F\u4E3A "),
-            createElementVNode("b", _hoisted_4$7, toDisplayString(props.fileType.join("/")), 1)
+            createElementVNode("b", _hoisted_4$6, toDisplayString(props.fileType.join("/")), 1)
           ], 64)) : createCommentVNode("", true),
           createTextVNode(" \u7684\u6587\u4EF6 ")
         ])) : createCommentVNode("", true),
@@ -1023,87 +1023,150 @@ const icons = [
   "wechat",
   "zip"
 ];
-const index_vue_vue_type_style_index_0_scoped_cf88a853_lang = "";
-const _withScopeId$5 = (n) => (pushScopeId("data-v-cf88a853"), n = n(), popScopeId(), n);
-const _hoisted_1$f = { class: "icon-body" };
-const _hoisted_2$9 = /* @__PURE__ */ _withScopeId$5(() => /* @__PURE__ */ createElementVNode("i", { class: "el-icon-search el-input__icon" }, null, -1));
-const _hoisted_3$7 = { class: "icon-list" };
-const _hoisted_4$6 = ["onClick"];
+const index_vue_vue_type_style_index_0_scoped_37029e19_lang = "";
+const _hoisted_1$f = { class: "icon-content" };
+const _hoisted_2$9 = { class: "icon-list" };
+const _hoisted_3$7 = ["onClick"];
 const _sfc_main$l = {
   __name: "index",
   props: {
-    modalValue: {
+    modelValue: {
       type: String,
       default: ""
     }
   },
-  emits: ["selected", "update:modalValue"],
+  emits: ["selected", "update:modelValue"],
   setup(__props, { expose, emit }) {
     const props = __props;
     const iconName = computed$1({
       get() {
-        return props.modalValue;
+        return props.modelValue;
       },
       set(val) {
-        emit("update:modalValue", val);
+        emit("update:modelValue", val);
       }
     });
+    const keyWord = ref$1("");
     const iconList = ref$1(icons);
+    const visible = ref$1(false);
+    const iconBodyRef = ref$1(null);
+    function toggleIconContent() {
+      visible.value = !visible.value;
+      if (visible.value) {
+        keyWord.value = "";
+        filterIcons();
+      }
+    }
     function filterIcons() {
       iconList.value = icons;
-      if (iconName.value) {
-        iconList.value = icons.filter((item) => item.indexOf(iconName.value) !== -1);
+      if (keyWord.value) {
+        iconList.value = icons.filter((item) => item.indexOf(keyWord.value) !== -1);
       }
     }
     function selectedIcon(name) {
       iconName.value = name;
       emit("selected", name);
-      document.body.click();
+      visible.value = false;
+      keyWord.value = "";
+      filterIcons();
+    }
+    function handleClickOutside(event) {
+      if (iconBodyRef.value && !iconBodyRef.value.contains(event.target)) {
+        visible.value = false;
+      }
     }
     function reset() {
-      iconName.value = "";
+      keyWord.value = "";
       iconList.value = icons;
+      visible.value = false;
     }
+    onMounted$1(() => {
+      document.addEventListener("click", handleClickOutside);
+    });
+    onUnmounted(() => {
+      document.removeEventListener("click", handleClickOutside);
+    });
     expose({
       reset
     });
     return (_ctx, _cache) => {
+      const _component_el_icon = resolveComponent("el-icon");
       const _component_el_input = resolveComponent("el-input");
-      return openBlock(), createElementBlock("div", _hoisted_1$f, [
+      return openBlock(), createElementBlock("div", {
+        class: "icon-body",
+        ref_key: "iconBodyRef",
+        ref: iconBodyRef
+      }, [
         createVNode(_component_el_input, {
           modelValue: unref(iconName),
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(iconName) ? iconName.value = $event : null),
-          modelModifiers: { trim: true },
           style: { "position": "relative" },
           clearable: "",
-          placeholder: "\u8BF7\u8F93\u5165\u56FE\u6807\u540D\u79F0",
-          onClear: filterIcons,
-          onChange: filterIcons
-        }, {
+          placeholder: "\u8BF7\u9009\u62E9",
+          onClick: toggleIconContent
+        }, createSlots({
           suffix: withCtx(() => [
-            _hoisted_2$9
+            createVNode(_component_el_icon, null, {
+              default: withCtx(() => [
+                createVNode(unref(Search))
+              ]),
+              _: 1
+            })
           ]),
-          _: 1
-        }, 8, ["modelValue"]),
-        createElementVNode("div", _hoisted_3$7, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(iconList.value, (item, index2) => {
-            return openBlock(), createElementBlock("div", {
-              key: index2,
-              onClick: ($event) => selectedIcon(item)
-            }, [
-              createVNode(_sfc_main$p, {
-                "icon-class": item,
-                style: { "height": "30px", "width": "16px" }
-              }, null, 8, ["icon-class"]),
-              createElementVNode("span", null, toDisplayString(item), 1)
-            ], 8, _hoisted_4$6);
-          }), 128))
+          _: 2
+        }, [
+          unref(iconName) ? {
+            name: "prefix",
+            fn: withCtx(() => [
+              createVNode(_sfc_main$p, { "icon-class": unref(iconName) }, null, 8, ["icon-class"])
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["modelValue"]),
+        withDirectives(createElementVNode("div", _hoisted_1$f, [
+          createElementVNode("div", null, [
+            createVNode(_component_el_input, {
+              modelValue: keyWord.value,
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => keyWord.value = $event),
+              modelModifiers: { trim: true },
+              clearable: "",
+              placeholder: "\u8BF7\u8F93\u5165\u56FE\u6807\u540D\u79F0",
+              onClear: filterIcons,
+              onInput: filterIcons
+            }, {
+              suffix: withCtx(() => [
+                createVNode(_component_el_icon, null, {
+                  default: withCtx(() => [
+                    createVNode(unref(Search))
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }, 8, ["modelValue"])
+          ]),
+          createElementVNode("div", _hoisted_2$9, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(iconList.value, (item, index2) => {
+              return openBlock(), createElementBlock("div", {
+                key: index2,
+                onClick: ($event) => selectedIcon(item)
+              }, [
+                createVNode(_sfc_main$p, {
+                  "icon-class": item,
+                  style: { "height": "30px", "width": "16px", "flex-shrink": "0" }
+                }, null, 8, ["icon-class"]),
+                createElementVNode("span", null, toDisplayString(item), 1)
+              ], 8, _hoisted_3$7);
+            }), 128))
+          ])
+        ], 512), [
+          [vShow, visible.value]
         ])
-      ]);
+      ], 512);
     };
   }
 };
-const SCTJIconSelect = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-cf88a853"]]);
+const SCTJIconSelect = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-37029e19"]]);
 function useMobile() {
   const isMobile = ref$1(false);
   const checkIsMobile = () => {