@wocwin/t-ui-plus/lib/packages/components/select-icon/src/index.vue2.js

Page level components developed based on Element Plus.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var Icons = require('@element-plus/icons-vue');

function _interopNamespaceDefault(e) {
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n.default = e;
  return Object.freeze(n);
}

var Icons__namespace = /*#__PURE__*/_interopNamespaceDefault(Icons);

const _hoisted_1 = { class: "t_select_icon" };
const _hoisted_2 = { class: "icon-list" };
const _hoisted_3 = ["onClick"];
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{
    name: "TSelectIcon"
  },
  __name: "index",
  props: {
    modelValue: { default: "" },
    prefixIcon: { default: "Search" },
    selectBind: { default: () => ({}) },
    isShowSearch: { type: Boolean, default: true },
    isShowIcon: { type: Boolean, default: true }
  },
  emits: ["update:modelValue", "select"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emit = __emit;
    let valueIcon = vue.computed({
      get() {
        return props.modelValue;
      },
      set(val) {
        emit("update:modelValue", val);
      }
    });
    const $attrs = vue.useAttrs();
    const attrs = vue.computed(() => {
      const selectBind = {
        "prefix-icon": customIcons[props.prefixIcon],
        placeholder: "\u8BF7\u9009\u62E9\u56FE\u6807",
        dialogTitle: "\u8BF7\u9009\u62E9\u56FE\u6807",
        searchPlaceholder: "\u641C\u7D22\u56FE\u6807",
        emptyDescription: "\u672A\u641C\u7D22\u5230\u60A8\u8981\u627E\u7684\u56FE\u6807",
        clearable: true,
        width: "50%",
        ...props.selectBind
      };
      return { ...$attrs, ...selectBind };
    });
    const dialogVisible = vue.ref(false);
    const selectIcon = (item) => {
      dialogVisible.value = false;
      valueIcon.value = item.name;
      emit("update:modelValue", item.name);
      emit("select", item.name);
    };
    const inputRef = vue.ref();
    const clearIcon = () => {
      valueIcon.value = "";
      emit("update:modelValue", "");
      setTimeout(() => inputRef.value.blur(), 0);
    };
    const inputValue = vue.ref("");
    const customIcons = Icons__namespace;
    const iconsList = vue.computed(() => {
      if (!inputValue.value) return Icons__namespace;
      let result = {};
      for (const key in customIcons) {
        if (key.toLowerCase().indexOf(inputValue.value.toLowerCase()) > -1)
          result[key] = customIcons[key];
      }
      return result;
    });
    __expose({ clearIcon });
    return (_ctx, _cache) => {
      const _component_el_button = vue.resolveComponent("el-button");
      const _component_el_input = vue.resolveComponent("el-input");
      const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
      const _component_el_empty = vue.resolveComponent("el-empty");
      const _component_el_dialog = vue.resolveComponent("el-dialog");
      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
        vue.createVNode(_component_el_input, vue.mergeProps({
          ref_key: "inputRef",
          ref: inputRef,
          modelValue: vue.unref(valueIcon),
          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(valueIcon) ? valueIcon.value = $event : valueIcon = $event)
        }, attrs.value, {
          onClear: clearIcon,
          onClick: _cache[1] || (_cache[1] = () => {
            ;
            dialogVisible.value = true, inputValue.value = "";
          })
        }), vue.createSlots({
          _: 2
          /* DYNAMIC */
        }, [
          _ctx.isShowIcon ? {
            name: "append",
            fn: vue.withCtx(() => [
              vue.createVNode(_component_el_button, {
                icon: vue.unref(customIcons)[_ctx.modelValue]
              }, null, 8, ["icon"])
            ]),
            key: "0"
          } : void 0
        ]), 1040, ["modelValue"]),
        vue.createVNode(_component_el_dialog, {
          modelValue: dialogVisible.value,
          "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => dialogVisible.value = $event),
          title: attrs.value.dialogTitle,
          draggable: "",
          width: attrs.value.width,
          class: "t_select_icon_dialog"
        }, {
          default: vue.withCtx(() => [
            _ctx.isShowSearch ? (vue.openBlock(), vue.createBlock(_component_el_input, {
              key: 0,
              modelValue: inputValue.value,
              "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => inputValue.value = $event),
              placeholder: attrs.value.searchPlaceholder,
              clearable: "",
              "prefix-icon": Icons__namespace.Search
            }, null, 8, ["modelValue", "placeholder", "prefix-icon"])) : vue.createCommentVNode("v-if", true),
            Object.keys(iconsList.value).length ? (vue.openBlock(), vue.createBlock(_component_el_scrollbar, { key: 1 }, {
              default: vue.withCtx(() => [
                vue.createElementVNode("div", _hoisted_2, [
                  (vue.openBlock(true), vue.createElementBlock(
                    vue.Fragment,
                    null,
                    vue.renderList(iconsList.value, (item) => {
                      return vue.openBlock(), vue.createElementBlock("div", {
                        key: item,
                        class: vue.normalizeClass(["icon-item", { "icon-active": item.name == vue.unref(valueIcon) }]),
                        onClick: ($event) => selectIcon(item)
                      }, [
                        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item))),
                        vue.createElementVNode(
                          "span",
                          null,
                          vue.toDisplayString(item.name),
                          1
                          /* TEXT */
                        )
                      ], 10, _hoisted_3);
                    }),
                    128
                    /* KEYED_FRAGMENT */
                  ))
                ])
              ]),
              _: 1
              /* STABLE */
            })) : (vue.openBlock(), vue.createBlock(_component_el_empty, {
              key: 2,
              description: attrs.value.emptyDescription
            }, null, 8, ["description"]))
          ]),
          _: 1
          /* STABLE */
        }, 8, ["modelValue", "title", "width"])
      ]);
    };
  }
});

exports.default = _sfc_main;