yuang-framework-ui-pc/lib/ele-icon-select/index.cjs

yuang-framework-ui-pc Library

"use strict";
const vue = require("vue");
const elementPlus = require("element-plus");
const util$1 = require("../ele-pro-layout/util");
const EleBasicSelect = require("../ele-basic-select/index");
const util = require("../ele-basic-select/util");
const icons = require("../icons");
const IconGrid = require("./components/icon-grid");
const props = require("./props");
const _sfc_main = vue.defineComponent({
  name: "EleIconSelect",
  components: { ElInput: elementPlus.ElInput, EleBasicSelect, IconGrid },
  props: props.iconSelectProps,
  emits: props.iconSelectEmits,
  setup(props2, { emit }) {
    const { validateChange } = util.useFormValidate();
    const isResponsive = util$1.useResponsive(props2);
    const selectRef = vue.ref(null);
    const selectVisible = vue.ref(false);
    const tabs = vue.ref([]);
    const tabActive = vue.ref();
    const menus = vue.ref([]);
    const menuActive = vue.ref();
    const icons$1 = vue.ref([]);
    const keywords = vue.ref("");
    const tabBar = vue.computed(() => {
      if (!tabs.value || !tabs.value.length) {
        return false;
      }
      if (props2.hideOnSingleTab && tabs.value.length === 1) {
        return false;
      }
      return true;
    });
    const selectPopperClass = vue.computed(() => {
      const classes = ["ele-icon-select-popper"];
      if (isResponsive.value) {
        classes.push("is-responsive");
      }
      if (props2.popperClass) {
        classes.push(props2.popperClass);
      }
      return classes.join(" ");
    });
    const iconPopperStyle = vue.computed(() => {
      if (!props2.popperHeight) {
        return;
      }
      return {
        height: typeof props2.popperHeight === "number" ? `${props2.popperHeight}px` : props2.popperHeight
      };
    });
    const updatePopover = () => {
      selectRef.value && selectRef.value.updatePopper();
    };
    const initData = () => {
      if (props2.data == null || !props2.data.length || typeof props2.data[0] === "string") {
        tabs.value = [];
        menus.value = [];
        tabActive.value = void 0;
        menuActive.value = void 0;
        icons$1.value = filterData(props2.data);
        return;
      }
      tabs.value = props2.data.map(
        (d) => d.title
      );
      if (tabActive.value == null || tabActive.value >= tabs.value.length) {
        tabActive.value = 0;
      }
      const data = props2.data[tabActive.value];
      if (typeof data !== "string" && data.children != null && data.children.length) {
        menus.value = data.children.map((d) => d.title);
        if (menuActive.value == null || menuActive.value >= menus.value.length) {
          menuActive.value = 0;
        }
        icons$1.value = filterData(data.children[menuActive.value].icons);
        return;
      }
      menus.value = [];
      menuActive.value = void 0;
      icons$1.value = typeof data !== "string" ? filterData(data.icons) : [];
    };
    const filterData = (data) => {
      if (!data) {
        return [];
      }
      if (!keywords.value) {
        return data;
      }
      const keyword = keywords.value.toLowerCase();
      return data.filter((t) => t.toLowerCase().includes(keyword));
    };
    const updateVisible = (visible) => {
      if (visible) {
        handleSelectFilter("");
      }
      if (selectVisible.value !== visible) {
        selectVisible.value = visible;
        emit("visibleChange", visible);
      }
    };
    const updateModelValue = (modelValue) => {
      if (util.valueIsChanged(modelValue, props2.modelValue)) {
        emit("update:modelValue", modelValue);
        validateChange();
        emit("change", modelValue);
      }
    };
    const handleSelectClear = () => {
      updateModelValue(null);
      updateVisible(false);
      emit("clear");
    };
    const handleSelectFocus = (e) => {
      emit("focus", e);
    };
    const handleSelectBlur = (e) => {
      emit("blur", e);
    };
    const handleSelectFilter = (value) => {
      var _a;
      if (keywords.value !== value) {
        keywords.value = value;
      }
      initData();
      if (!((_a = props2.data) == null ? void 0 : _a.length) || icons$1.value.length) {
        return;
      }
      for (let i = 0; i < props2.data.length; i++) {
        const d = props2.data[i];
        if (typeof d === "string") {
          return;
        }
        const keyword = keywords.value.toLowerCase();
        if (d.children != null && d.children.length) {
          for (let j = 0; j < d.children.length; j++) {
            const icons2 = d.children[j].icons;
            if (icons2 && icons2.some((t) => t.toLowerCase().includes(keyword))) {
              menuActive.value = j;
              tabActive.value = i;
              initData();
              return;
            }
          }
        } else if (d.icons != null && d.icons.some((t) => t.toLowerCase().includes(keyword))) {
          tabActive.value = i;
          initData();
          return;
        }
      }
    };
    const handleTabClick = (index2) => {
      tabActive.value = index2;
      initData();
    };
    const handleMenuClick = (index2) => {
      menuActive.value = index2;
      initData();
    };
    const handleIconSelect = (icon) => {
      updateModelValue(icon);
      updateVisible(false);
    };
    vue.watch(
      () => props2.data,
      () => {
        initData();
      },
      {
        immediate: true,
        deep: true
      }
    );
    return {
      SearchOutlined: icons.SearchOutlined,
      selectRef,
      selectVisible,
      tabs,
      tabActive,
      menus,
      menuActive,
      icons: icons$1,
      keywords,
      tabBar,
      selectPopperClass,
      iconPopperStyle,
      updatePopover,
      updateVisible,
      handleSelectClear,
      handleSelectFocus,
      handleSelectBlur,
      handleSelectFilter,
      handleTabClick,
      handleMenuClick,
      handleIconSelect
    };
  }
});
const _export_sfc = (sfc, props2) => {
  const target = sfc.__vccOpts || sfc;
  for (const [key, val] of props2) {
    target[key] = val;
  }
  return target;
};
const _hoisted_1 = ["onClick"];
const _hoisted_2 = { class: "ele-icon-select-main" };
const _hoisted_3 = ["onClick"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_ElInput = vue.resolveComponent("ElInput");
  const _component_IconGrid = vue.resolveComponent("IconGrid");
  const _component_EleBasicSelect = vue.resolveComponent("EleBasicSelect");
  return vue.openBlock(), vue.createBlock(_component_EleBasicSelect, {
    ref: "selectRef",
    value: _ctx.modelValue,
    multiple: false,
    disabled: _ctx.disabled,
    size: _ctx.size,
    clearable: _ctx.clearable,
    placeholder: _ctx.placeholder,
    automaticDropdown: _ctx.automaticDropdown,
    filterable: typeof _ctx.filterable === "boolean" ? _ctx.filterable : false,
    teleported: _ctx.teleported,
    persistent: _ctx.persistent,
    placement: _ctx.placement,
    transition: _ctx.transition,
    popperWidth: _ctx.popperWidth,
    popperOptions: _ctx.popperOptions,
    popperClass: _ctx.selectPopperClass,
    selectClass: "is-icon-select",
    selectStyle: _ctx.selectStyle,
    inputStyle: _ctx.inputStyle,
    selectTagsStyle: _ctx.selectTagsStyle,
    selectedLabel: _ctx.modelValue,
    visible: _ctx.selectVisible,
    "onUpdate:visible": _ctx.updateVisible,
    onFilterChange: _ctx.handleSelectFilter,
    onClear: _ctx.handleSelectClear,
    onFocus: _ctx.handleSelectFocus,
    onBlur: _ctx.handleSelectBlur
  }, vue.createSlots({
    default: vue.withCtx(() => [
      vue.createElementVNode("div", {
        class: "ele-icon-select",
        style: vue.normalizeStyle(_ctx.iconPopperStyle)
      }, [
        _ctx.tabBar || _ctx.filterable === "popper" ? (vue.openBlock(), vue.createElementBlock("div", {
          key: 0,
          class: "ele-icon-select-header",
          style: vue.normalizeStyle(_ctx.headerStyle)
        }, [
          vue.renderSlot(_ctx.$slots, "tabLeftExtra"),
          _ctx.tabBar ? (vue.openBlock(), vue.createElementBlock("div", {
            key: 0,
            class: "ele-icon-select-tabs",
            style: vue.normalizeStyle(_ctx.tabsStyle)
          }, [
            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.tabs, (t, i) => {
              return vue.openBlock(), vue.createElementBlock("div", {
                key: i + "-" + t,
                class: vue.normalizeClass(["ele-icon-select-tab", { "is-active": i === _ctx.tabActive }]),
                onClick: ($event) => _ctx.handleTabClick(i)
              }, vue.toDisplayString(t), 11, _hoisted_1);
            }), 128))
          ], 4)) : vue.createCommentVNode("", true),
          _ctx.filterable === "popper" ? (vue.openBlock(), vue.createElementBlock("div", {
            key: 1,
            class: "ele-icon-select-search",
            style: vue.normalizeStyle(_ctx.searchStyle)
          }, [
            vue.createVNode(_component_ElInput, {
              size: "small",
              clearable: true,
              modelValue: _ctx.keywords,
              validateEvent: false,
              prefixIcon: _ctx.SearchOutlined,
              placeholder: _ctx.filterPlaceholder,
              "onUpdate:modelValue": _ctx.handleSelectFilter
            }, null, 8, ["modelValue", "prefixIcon", "placeholder", "onUpdate:modelValue"])
          ], 4)) : vue.createCommentVNode("", true),
          vue.renderSlot(_ctx.$slots, "tabRightExtra")
        ], 4)) : vue.createCommentVNode("", true),
        vue.createElementVNode("div", _hoisted_2, [
          _ctx.menus && _ctx.menus.length ? (vue.openBlock(), vue.createElementBlock("div", {
            key: 0,
            class: "ele-icon-select-menus",
            style: vue.normalizeStyle(_ctx.menusStyle)
          }, [
            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.menus, (m, i) => {
              return vue.openBlock(), vue.createElementBlock("div", {
                key: i + "-" + m,
                class: vue.normalizeClass(["ele-icon-select-menu", { "is-active": i === _ctx.menuActive }]),
                onClick: ($event) => _ctx.handleMenuClick(i)
              }, vue.toDisplayString(m), 11, _hoisted_3);
            }), 128))
          ], 4)) : vue.createCommentVNode("", true),
          vue.createVNode(_component_IconGrid, {
            data: _ctx.icons,
            icon: _ctx.modelValue,
            emptyProps: _ctx.emptyProps,
            tooltip: _ctx.tooltip,
            tooltipProps: _ctx.tooltipProps,
            popperVisible: _ctx.selectVisible,
            gridStyle: _ctx.gridStyle,
            itemStyle: _ctx.itemStyle,
            style: vue.normalizeStyle(_ctx.bodyStyle),
            onSelect: _ctx.handleIconSelect
          }, vue.createSlots({ _: 2 }, [
            _ctx.$slots.icon ? {
              name: "icon",
              fn: vue.withCtx((slotProps) => [
                vue.renderSlot(_ctx.$slots, "icon", vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
              ]),
              key: "0"
            } : void 0
          ]), 1032, ["data", "icon", "emptyProps", "tooltip", "tooltipProps", "popperVisible", "gridStyle", "itemStyle", "style", "onSelect"])
        ])
      ], 4)
    ]),
    _: 2
  }, [
    _ctx.modelValue && _ctx.$slots.icon ? {
      name: "prefix",
      fn: vue.withCtx(() => [
        vue.renderSlot(_ctx.$slots, "icon", {
          icon: _ctx.modelValue,
          prefix: true
        })
      ]),
      key: "0"
    } : void 0
  ]), 1032, ["value", "disabled", "size", "clearable", "placeholder", "automaticDropdown", "filterable", "teleported", "persistent", "placement", "transition", "popperWidth", "popperOptions", "popperClass", "selectStyle", "inputStyle", "selectTagsStyle", "selectedLabel", "visible", "onUpdate:visible", "onFilterChange", "onClear", "onFocus", "onBlur"]);
}
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
module.exports = index;