yuang-framework-ui-pc 1.1.44 → 1.1.46

package/es/ele-icon-select/index.js

@@ -0,0 +1,337 @@
+import { defineComponent, ref, computed, watch, resolveComponent, createBlock, openBlock, createSlots, withCtx, createElementVNode, normalizeStyle, createElementBlock, createCommentVNode, renderSlot, Fragment, renderList, normalizeClass, toDisplayString, createVNode, normalizeProps, guardReactiveProps } from "vue";
+import { ElInput } from "element-plus";
+import { useResponsive } from "../ele-pro-layout/util";
+import EleBasicSelect from "../ele-basic-select/index";
+import { useFormValidate, valueIsChanged } from "../ele-basic-select/util";
+import { SearchOutlined } from "../icons";
+import IconGrid from "./components/icon-grid";
+import { iconSelectEmits, iconSelectProps } from "./props";
+const _sfc_main = defineComponent({
+  name: "EleIconSelect",
+  components: { ElInput, EleBasicSelect, IconGrid },
+  props: iconSelectProps,
+  emits: iconSelectEmits,
+  setup(props, { emit }) {
+    const { validateChange } = useFormValidate();
+    const isResponsive = useResponsive(props);
+    const selectRef = ref(null);
+    const selectVisible = ref(false);
+    const tabs = ref([]);
+    const tabActive = ref();
+    const menus = ref([]);
+    const menuActive = ref();
+    const icons = ref([]);
+    const keywords = ref("");
+    const tabBar = computed(() => {
+      if (!tabs.value || !tabs.value.length) {
+        return false;
+      }
+      if (props.hideOnSingleTab && tabs.value.length === 1) {
+        return false;
+      }
+      return true;
+    });
+    const selectPopperClass = computed(() => {
+      const classes = ["ele-icon-select-popper"];
+      if (isResponsive.value) {
+        classes.push("is-responsive");
+      }
+      if (props.popperClass) {
+        classes.push(props.popperClass);
+      }
+      return classes.join(" ");
+    });
+    const iconPopperStyle = computed(() => {
+      if (!props.popperHeight) {
+        return;
+      }
+      return {
+        height: typeof props.popperHeight === "number" ? `${props.popperHeight}px` : props.popperHeight
+      };
+    });
+    const updatePopover = () => {
+      selectRef.value && selectRef.value.updatePopper();
+    };
+    const initData = () => {
+      if (props.data == null || !props.data.length || typeof props.data[0] === "string") {
+        tabs.value = [];
+        menus.value = [];
+        tabActive.value = void 0;
+        menuActive.value = void 0;
+        icons.value = filterData(props.data);
+        return;
+      }
+      tabs.value = props.data.map(
+        (d) => d.title
+      );
+      if (tabActive.value == null || tabActive.value >= tabs.value.length) {
+        tabActive.value = 0;
+      }
+      const data = props.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.value = filterData(data.children[menuActive.value].icons);
+        return;
+      }
+      menus.value = [];
+      menuActive.value = void 0;
+      icons.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 (valueIsChanged(modelValue, props.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 = props.data) == null ? void 0 : _a.length) || icons.value.length) {
+        return;
+      }
+      for (let i = 0; i < props.data.length; i++) {
+        const d = props.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);
+    };
+    watch(
+      () => props.data,
+      () => {
+        initData();
+      },
+      {
+        immediate: true,
+        deep: true
+      }
+    );
+    return {
+      SearchOutlined,
+      selectRef,
+      selectVisible,
+      tabs,
+      tabActive,
+      menus,
+      menuActive,
+      icons,
+      keywords,
+      tabBar,
+      selectPopperClass,
+      iconPopperStyle,
+      updatePopover,
+      updateVisible,
+      handleSelectClear,
+      handleSelectFocus,
+      handleSelectBlur,
+      handleSelectFilter,
+      handleTabClick,
+      handleMenuClick,
+      handleIconSelect
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    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 = resolveComponent("ElInput");
+  const _component_IconGrid = resolveComponent("IconGrid");
+  const _component_EleBasicSelect = resolveComponent("EleBasicSelect");
+  return openBlock(), 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
+  }, createSlots({
+    default: withCtx(() => [
+      createElementVNode("div", {
+        class: "ele-icon-select",
+        style: normalizeStyle(_ctx.iconPopperStyle)
+      }, [
+        _ctx.tabBar || _ctx.filterable === "popper" ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: "ele-icon-select-header",
+          style: normalizeStyle(_ctx.headerStyle)
+        }, [
+          renderSlot(_ctx.$slots, "tabLeftExtra"),
+          _ctx.tabBar ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: "ele-icon-select-tabs",
+            style: normalizeStyle(_ctx.tabsStyle)
+          }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.tabs, (t, i) => {
+              return openBlock(), createElementBlock("div", {
+                key: i + "-" + t,
+                class: normalizeClass(["ele-icon-select-tab", { "is-active": i === _ctx.tabActive }]),
+                onClick: ($event) => _ctx.handleTabClick(i)
+              }, toDisplayString(t), 11, _hoisted_1);
+            }), 128))
+          ], 4)) : createCommentVNode("", true),
+          _ctx.filterable === "popper" ? (openBlock(), createElementBlock("div", {
+            key: 1,
+            class: "ele-icon-select-search",
+            style: normalizeStyle(_ctx.searchStyle)
+          }, [
+            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)) : createCommentVNode("", true),
+          renderSlot(_ctx.$slots, "tabRightExtra")
+        ], 4)) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_2, [
+          _ctx.menus && _ctx.menus.length ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: "ele-icon-select-menus",
+            style: normalizeStyle(_ctx.menusStyle)
+          }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menus, (m, i) => {
+              return openBlock(), createElementBlock("div", {
+                key: i + "-" + m,
+                class: normalizeClass(["ele-icon-select-menu", { "is-active": i === _ctx.menuActive }]),
+                onClick: ($event) => _ctx.handleMenuClick(i)
+              }, toDisplayString(m), 11, _hoisted_3);
+            }), 128))
+          ], 4)) : createCommentVNode("", true),
+          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: normalizeStyle(_ctx.bodyStyle),
+            onSelect: _ctx.handleIconSelect
+          }, createSlots({ _: 2 }, [
+            _ctx.$slots.icon ? {
+              name: "icon",
+              fn: withCtx((slotProps) => [
+                renderSlot(_ctx.$slots, "icon", normalizeProps(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: withCtx(() => [
+        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]]);
+export {
+  index as default
+};

package/es/ele-icon-select/props.d.ts

@@ -0,0 +1,123 @@
+import { PropType, ExtractPropTypes } from 'vue';
+import { StyleValue } from '../ele-app/types';
+import { ElInputProps, ElEmptyProps } from '../ele-app/el';
+import { EleTooltipProps } from '../ele-app/plus';
+import { IconItem } from './types';
+
+/**
+ * 属性
+ */
+export declare const iconSelectProps: {
+    /** 选中值 */
+    modelValue: StringConstructor;
+    /** 图标数据 */
+    data: {
+        type: PropType<string[] | IconItem[]>;
+        required: boolean;
+    };
+    /** 是否禁用 */
+    disabled: BooleanConstructor;
+    /** 尺寸 */
+    size: PropType<ElInputProps["size"]>;
+    /** 是否支持清除 */
+    clearable: BooleanConstructor;
+    /** 无选中时提示文本 */
+    placeholder: StringConstructor;
+    /** 是否在输入框获得焦点后自动弹出选项菜单 */
+    automaticDropdown: BooleanConstructor;
+    /** 是否可以筛选 */
+    filterable: PropType<boolean | "popper">;
+    /** 是否将下拉框插入 body */
+    teleported: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 始终渲染下拉框 */
+    persistent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 下拉框位置 */
+    placement: {
+        type: PropType<EleTooltipProps["placement"]>;
+        default: string;
+    };
+    /** 下拉框渐变动画 */
+    transition: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** popper.js 参数 */
+    popperOptions: PropType<EleTooltipProps["popperOptions"]>;
+    /** 下拉框类名 */
+    popperClass: StringConstructor;
+    /** 下拉框宽度 */
+    popperWidth: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    /** 下拉框高度 */
+    popperHeight: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    /** 自定义样式 */
+    selectStyle: PropType<StyleValue>;
+    /** 自定义样式 */
+    inputStyle: PropType<StyleValue>;
+    /** 自定义多选标签容器样式 */
+    selectTagsStyle: PropType<StyleValue>;
+    /** 顶部选项卡只有一个时隐藏 */
+    hideOnSingleTab: BooleanConstructor;
+    /** 空组件属性 */
+    emptyProps: PropType<ElEmptyProps>;
+    /** 是否显示文本提示 */
+    tooltip: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 提示属性 */
+    tooltipProps: PropType<EleTooltipProps>;
+    /** 头部样式 */
+    headerStyle: PropType<StyleValue>;
+    /** 选项卡样式 */
+    tabsStyle: PropType<StyleValue>;
+    /** 搜索区样式 */
+    searchStyle: PropType<StyleValue>;
+    /** 菜单样式 */
+    menusStyle: PropType<StyleValue>;
+    /** 主体样式 */
+    bodyStyle: PropType<StyleValue>;
+    /** 网格样式 */
+    gridStyle: PropType<StyleValue>;
+    /** 图标样式 */
+    itemStyle: PropType<StyleValue>;
+    /** 搜索框提示文本 */
+    filterPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 是否开启响应式 */
+    responsive: {
+        type: BooleanConstructor;
+        default: null;
+    };
+};
+export type IconSelectProps = ExtractPropTypes<typeof iconSelectProps>;
+/**
+ * 事件
+ */
+export declare const iconSelectEmits: {
+    /** 更新展开状态 */
+    'update:modelValue': (_value?: string | null) => boolean;
+    /** 选中值改变事件 */
+    change: (_value?: string | null) => boolean;
+    /** 下拉框展开状态改变事件 */
+    visibleChange: (_visible: boolean) => boolean;
+    /** 清空事件 */
+    clear: () => boolean;
+    /** 获取焦点事件 */
+    focus: (_e: FocusEvent) => boolean;
+    /** 失去焦点事件 */
+    blur: (_e: FocusEvent) => boolean;
+};

package/es/ele-icon-select/props.js

@@ -0,0 +1,114 @@
+const iconSelectProps = {
+  /** 选中值 */
+  modelValue: String,
+  /** 图标数据 */
+  data: {
+    type: Array,
+    required: true
+  },
+  /** 是否禁用 */
+  disabled: Boolean,
+  /** 尺寸 */
+  size: String,
+  /** 是否支持清除 */
+  clearable: Boolean,
+  /** 无选中时提示文本 */
+  placeholder: String,
+  /** 是否在输入框获得焦点后自动弹出选项菜单 */
+  automaticDropdown: Boolean,
+  /** 是否可以筛选 */
+  filterable: [Boolean, String],
+  /** 是否将下拉框插入 body */
+  teleported: {
+    type: Boolean,
+    default: true
+  },
+  /** 始终渲染下拉框 */
+  persistent: {
+    type: Boolean,
+    default: true
+  },
+  /** 下拉框位置 */
+  placement: {
+    type: String,
+    default: "bottom-start"
+  },
+  /** 下拉框渐变动画 */
+  transition: {
+    type: String,
+    default: "el-zoom-in-top"
+  },
+  /** popper.js 参数 */
+  popperOptions: Object,
+  /** 下拉框类名 */
+  popperClass: String,
+  /** 下拉框宽度 */
+  popperWidth: {
+    type: [Number, String],
+    default: 414
+  },
+  /** 下拉框高度 */
+  popperHeight: {
+    type: [Number, String],
+    default: 260
+  },
+  /** 自定义样式 */
+  selectStyle: Object,
+  /** 自定义样式 */
+  inputStyle: Object,
+  /** 自定义多选标签容器样式 */
+  selectTagsStyle: Object,
+  /** 顶部选项卡只有一个时隐藏 */
+  hideOnSingleTab: Boolean,
+  /** 空组件属性 */
+  emptyProps: Object,
+  /** 是否显示文本提示 */
+  tooltip: {
+    type: Boolean,
+    default: true
+  },
+  /** 提示属性 */
+  tooltipProps: Object,
+  /** 头部样式 */
+  headerStyle: Object,
+  /** 选项卡样式 */
+  tabsStyle: Object,
+  /** 搜索区样式 */
+  searchStyle: Object,
+  /** 菜单样式 */
+  menusStyle: Object,
+  /** 主体样式 */
+  bodyStyle: Object,
+  /** 网格样式 */
+  gridStyle: Object,
+  /** 图标样式 */
+  itemStyle: Object,
+  /** 搜索框提示文本 */
+  filterPlaceholder: {
+    type: String,
+    default: ""
+  },
+  /** 是否开启响应式 */
+  responsive: {
+    type: Boolean,
+    default: null
+  }
+};
+const iconSelectEmits = {
+  /** 更新展开状态 */
+  "update:modelValue": (_value) => true,
+  /** 选中值改变事件 */
+  change: (_value) => true,
+  /** 下拉框展开状态改变事件 */
+  visibleChange: (_visible) => true,
+  /** 清空事件 */
+  clear: () => true,
+  /** 获取焦点事件 */
+  focus: (_e) => true,
+  /** 失去焦点事件 */
+  blur: (_e) => true
+};
+export {
+  iconSelectEmits,
+  iconSelectProps
+};

package/es/ele-icon-select/style/index.d.ts

@@ -0,0 +1 @@
+

package/es/ele-icon-select/style/index.js

@@ -0,0 +1,6 @@
+import "element-plus/es/components/empty/style/index";
+import "element-plus/es/components/scrollbar/style/index";
+import "element-plus/es/components/input/style/index";
+import "../../ele-tooltip/style/index";
+import "../../ele-basic-select/style/index";
+import "./index.scss";