ele-admin-plus 1.0.0-beta.1

package/lib/ele-icon-select/components/icon-popper.js

@@ -0,0 +1,241 @@
+"use strict";
+const vue = require("vue");
+const iconsVue = require("@element-plus/icons-vue");
+const elementPlus = require("element-plus");
+const IconGrid = require("./icon-grid");
+const _sfc_main = vue.defineComponent({
+  name: "IconPopper",
+  components: { ElInput: elementPlus.ElInput, IconGrid },
+  props: {
+    // 选中的图标
+    icon: String,
+    // 图标数据
+    data: Array,
+    // 空组件属性
+    emptyProps: Object,
+    // 是否显示搜索框
+    filterable: Boolean,
+    // 搜索框提示文本
+    filterPlaceholder: String,
+    // 顶栏选项卡只有一个时是否隐藏
+    hideOnSingleTab: Boolean,
+    // 是否显示提示
+    tooltip: Boolean,
+    // 提示属性
+    tooltipProps: Object,
+    // 气泡是否展开
+    popperVisible: Boolean
+  },
+  emits: {
+    select: (_icon) => true
+  },
+  setup(props, { emit }) {
+    const tabs = vue.ref([]);
+    const tabActive = vue.ref();
+    const menus = vue.ref([]);
+    const menuActive = vue.ref();
+    const icons = vue.ref([]);
+    const keywords = vue.ref("");
+    const tabBar = vue.computed(() => {
+      if (!tabs.value || !tabs.value.length) {
+        return false;
+      }
+      if (props.hideOnSingleTab && tabs.value.length === 1) {
+        return false;
+      }
+      return true;
+    });
+    const init = () => {
+      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 onSearch = () => {
+      init();
+      if (keywords.value && props.data && props.data.length && !icons.value.length) {
+        const keyword = keywords.value.toLowerCase();
+        for (let i = 0; i < props.data.length; i++) {
+          const d = props.data[i];
+          if (typeof d === "string") {
+            return;
+          }
+          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;
+                init();
+                return;
+              }
+            }
+          } else if (d.icons != null && d.icons.some((t) => t.toLowerCase().includes(keyword))) {
+            tabActive.value = i;
+            init();
+            return;
+          }
+        }
+      }
+    };
+    const onTabClick = (index) => {
+      tabActive.value = index;
+      init();
+    };
+    const onMenuClick = (index) => {
+      menuActive.value = index;
+      init();
+    };
+    const onSelect = (icon) => {
+      emit("select", icon);
+    };
+    vue.watch(
+      () => props.data,
+      () => {
+        init();
+      },
+      {
+        immediate: true,
+        deep: true
+      }
+    );
+    return {
+      Search: iconsVue.Search,
+      tabs,
+      tabActive,
+      menus,
+      menuActive,
+      icons,
+      keywords,
+      tabBar,
+      onSearch,
+      onTabClick,
+      onMenuClick,
+      onSelect
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = { class: "ele-icon-select-popup" };
+const _hoisted_2 = {
+  key: 0,
+  class: "ele-icon-select-header"
+};
+const _hoisted_3 = {
+  key: 0,
+  class: "ele-icon-select-tab ele-scrollbar-hover ele-scrollbar-mini"
+};
+const _hoisted_4 = ["onClick"];
+const _hoisted_5 = {
+  key: 1,
+  class: "ele-icon-select-search"
+};
+const _hoisted_6 = { class: "ele-icon-select-body" };
+const _hoisted_7 = {
+  key: 0,
+  class: "ele-icon-select-menu ele-scrollbar-hover ele-scrollbar-mini"
+};
+const _hoisted_8 = ["onClick"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ElInput = vue.resolveComponent("ElInput");
+  const _component_IconGrid = vue.resolveComponent("IconGrid");
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+    _ctx.tabBar || _ctx.filterable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+      _ctx.tabBar ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+        (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-item",
+              { "is-active": i === _ctx.tabActive }
+            ]),
+            onClick: ($event) => _ctx.onTabClick(i)
+          }, vue.toDisplayString(t), 11, _hoisted_4);
+        }), 128))
+      ])) : vue.createCommentVNode("", true),
+      _ctx.filterable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
+        vue.createVNode(_component_ElInput, {
+          clearable: "",
+          size: "small",
+          modelValue: _ctx.keywords,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.keywords = $event),
+          prefixIcon: _ctx.Search,
+          placeholder: _ctx.filterPlaceholder,
+          onClear: _ctx.onSearch,
+          onChange: _ctx.onSearch
+        }, null, 8, ["modelValue", "prefixIcon", "placeholder", "onClear", "onChange"])
+      ])) : vue.createCommentVNode("", true)
+    ])) : vue.createCommentVNode("", true),
+    vue.createElementVNode("div", _hoisted_6, [
+      _ctx.menus && _ctx.menus.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
+        (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-item",
+              { "is-active": i === _ctx.menuActive }
+            ]),
+            onClick: ($event) => _ctx.onMenuClick(i)
+          }, vue.toDisplayString(m), 11, _hoisted_8);
+        }), 128))
+      ])) : vue.createCommentVNode("", true),
+      vue.createVNode(_component_IconGrid, {
+        icon: _ctx.icon,
+        data: _ctx.icons,
+        emptyProps: _ctx.emptyProps,
+        tooltip: _ctx.tooltip,
+        tooltipProps: _ctx.tooltipProps,
+        popperVisible: _ctx.popperVisible,
+        onSelect: _ctx.onSelect
+      }, 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, ["icon", "data", "emptyProps", "tooltip", "tooltipProps", "popperVisible", "onSelect"])
+    ])
+  ]);
+}
+const iconPopper = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = iconPopper;

package/lib/ele-icon-select/index.d.ts

@@ -0,0 +1,149 @@
+import type { CSSProperties } from 'vue';
+declare const _sfc_main: import("vue").DefineComponent<{
+    modelValue: StringConstructor;
+    data: {
+        type: import("vue").PropType<string[] | import("./types").IconItem[]>;
+        required: boolean;
+    };
+    disabled: BooleanConstructor;
+    size: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never> | undefined>;
+    clearable: BooleanConstructor;
+    placeholder: StringConstructor;
+    name: StringConstructor;
+    autocomplete: {
+        type: StringConstructor;
+        default: string;
+    };
+    teleported: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    persistent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    automaticDropdown: BooleanConstructor;
+    placement: {
+        type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => "bottom" | "auto" | "auto-start" | "auto-end" | "top" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("element-plus").Placement) | ((new (...args: any[]) => "bottom" | "auto" | "auto-start" | "auto-end" | "top" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("element-plus").Placement))[], unknown, unknown>>;
+        default: string;
+    };
+    popperWidth: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    popperHeight: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    popperOptions: import("vue").PropType<Partial<import("element-plus").Options>>;
+    popperClass: StringConstructor;
+    filterable: BooleanConstructor;
+    filterPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    hideOnSingleTab: BooleanConstructor;
+    emptyProps: import("vue").PropType<Partial<import("element-plus").EmptyProps>>;
+    tooltip: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tooltipProps: import("vue").PropType<Partial<import("element-plus").ElTooltipProps>>;
+    responsive: {
+        type: BooleanConstructor;
+        default: null;
+    };
+}, {
+    visible: import("vue").Ref<boolean>;
+    popupClass: import("vue").ComputedRef<string>;
+    popupStyle: import("vue").ComputedRef<CSSProperties | undefined>;
+    updateVisible: (value: boolean) => void;
+    onClear: () => void;
+    onFocus: (e: FocusEvent) => void;
+    onBlur: (e: FocusEvent) => void;
+    onSelect: (value: string) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'update:modelValue': (_value?: string | null | undefined) => boolean;
+    change: (_value?: string | null | undefined) => boolean;
+    visibleChange: (_visible: boolean) => boolean;
+    clear: () => boolean;
+    focus: (_e: FocusEvent) => boolean;
+    blur: (_e: FocusEvent) => boolean;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: StringConstructor;
+    data: {
+        type: import("vue").PropType<string[] | import("./types").IconItem[]>;
+        required: boolean;
+    };
+    disabled: BooleanConstructor;
+    size: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never> | undefined>;
+    clearable: BooleanConstructor;
+    placeholder: StringConstructor;
+    name: StringConstructor;
+    autocomplete: {
+        type: StringConstructor;
+        default: string;
+    };
+    teleported: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    persistent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    automaticDropdown: BooleanConstructor;
+    placement: {
+        type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => "bottom" | "auto" | "auto-start" | "auto-end" | "top" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("element-plus").Placement) | ((new (...args: any[]) => "bottom" | "auto" | "auto-start" | "auto-end" | "top" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("element-plus").Placement))[], unknown, unknown>>;
+        default: string;
+    };
+    popperWidth: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    popperHeight: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    popperOptions: import("vue").PropType<Partial<import("element-plus").Options>>;
+    popperClass: StringConstructor;
+    filterable: BooleanConstructor;
+    filterPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    hideOnSingleTab: BooleanConstructor;
+    emptyProps: import("vue").PropType<Partial<import("element-plus").EmptyProps>>;
+    tooltip: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tooltipProps: import("vue").PropType<Partial<import("element-plus").ElTooltipProps>>;
+    responsive: {
+        type: BooleanConstructor;
+        default: null;
+    };
+}>> & {
+    onFocus?: ((_e: FocusEvent) => any) | undefined;
+    onBlur?: ((_e: FocusEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((_value?: string | null | undefined) => any) | undefined;
+    onChange?: ((_value?: string | null | undefined) => any) | undefined;
+    onVisibleChange?: ((_visible: boolean) => any) | undefined;
+    onClear?: (() => any) | undefined;
+}, {
+    disabled: boolean;
+    autocomplete: string;
+    clearable: boolean;
+    placement: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => "bottom" | "auto" | "auto-start" | "auto-end" | "top" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("element-plus").Placement) | ((new (...args: any[]) => "bottom" | "auto" | "auto-start" | "auto-end" | "top" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("element-plus").Placement))[], unknown, unknown>;
+    teleported: boolean;
+    persistent: boolean;
+    tooltip: boolean;
+    automaticDropdown: boolean;
+    popperWidth: string | number;
+    popperHeight: string | number;
+    filterable: boolean;
+    filterPlaceholder: string;
+    hideOnSingleTab: boolean;
+    responsive: boolean;
+}, {}>;
+export default _sfc_main;

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

@@ -0,0 +1,141 @@
+"use strict";
+const vue = require("vue");
+const useReceiver = require("../ele-config-provider/use-receiver");
+const EleBasicSelect = require("../ele-basic-select/index");
+const IconPopper = require("./components/icon-popper");
+const props = require("./props");
+const _sfc_main = vue.defineComponent({
+  name: "EleIconSelect",
+  components: { EleBasicSelect, IconPopper },
+  props: props.iconSelectProps,
+  emits: props.iconSelectEmits,
+  setup(props2, { emit }) {
+    const isResponsive = useReceiver.useResponsive(props2);
+    const visible = vue.ref(false);
+    const popupClass = 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 popupStyle = vue.computed(() => {
+      if (!props2.popperHeight) {
+        return;
+      }
+      return {
+        height: typeof props2.popperHeight === "number" ? `${props2.popperHeight}px` : props2.popperHeight
+      };
+    });
+    const updateVisible = (value) => {
+      if (visible.value !== value) {
+        visible.value = value;
+        emit("visibleChange", value);
+      }
+    };
+    const updateModelValue = (value) => {
+      emit("update:modelValue", value);
+      emit("change", value);
+    };
+    const onClear = () => {
+      updateModelValue(null);
+      updateVisible(false);
+      emit("clear");
+    };
+    const onFocus = (e) => {
+      emit("focus", e);
+    };
+    const onBlur = (e) => {
+      emit("blur", e);
+    };
+    const onSelect = (value) => {
+      updateModelValue(value);
+      updateVisible(false);
+    };
+    return {
+      visible,
+      popupClass,
+      popupStyle,
+      updateVisible,
+      onClear,
+      onFocus,
+      onBlur,
+      onSelect
+    };
+  }
+});
+const _export_sfc = (sfc, props2) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props2) {
+    target[key] = val;
+  }
+  return target;
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_IconPopper = vue.resolveComponent("IconPopper");
+  const _component_EleBasicSelect = vue.resolveComponent("EleBasicSelect");
+  return vue.openBlock(), vue.createBlock(_component_EleBasicSelect, {
+    value: _ctx.modelValue,
+    multiple: false,
+    disabled: _ctx.disabled,
+    size: _ctx.size,
+    clearable: _ctx.clearable,
+    placeholder: _ctx.placeholder,
+    name: _ctx.name,
+    autocomplete: _ctx.autocomplete,
+    selectedLabel: _ctx.modelValue,
+    visible: _ctx.visible,
+    teleported: _ctx.teleported,
+    persistent: _ctx.persistent,
+    automaticDropdown: _ctx.automaticDropdown,
+    placement: _ctx.placement,
+    popperWidth: _ctx.popperWidth,
+    popperOptions: _ctx.popperOptions,
+    popperClass: _ctx.popupClass,
+    "onUpdate:visible": _ctx.updateVisible,
+    onClear: _ctx.onClear,
+    onFocus: _ctx.onFocus,
+    onBlur: _ctx.onBlur
+  }, vue.createSlots({
+    default: vue.withCtx(() => [
+      vue.createVNode(_component_IconPopper, {
+        icon: _ctx.modelValue,
+        data: _ctx.data,
+        emptyProps: _ctx.emptyProps,
+        filterable: _ctx.filterable,
+        filterPlaceholder: _ctx.filterPlaceholder,
+        hideOnSingleTab: _ctx.hideOnSingleTab,
+        tooltip: _ctx.tooltip,
+        tooltipProps: _ctx.tooltipProps,
+        popperVisible: _ctx.visible,
+        style: vue.normalizeStyle(_ctx.popupStyle),
+        onSelect: _ctx.onSelect
+      }, 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, ["icon", "data", "emptyProps", "filterable", "filterPlaceholder", "hideOnSingleTab", "tooltip", "tooltipProps", "popperVisible", "style", "onSelect"])
+    ]),
+    _: 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", "name", "autocomplete", "selectedLabel", "visible", "teleported", "persistent", "automaticDropdown", "placement", "popperWidth", "popperOptions", "popperClass", "onUpdate:visible", "onClear", "onFocus", "onBlur"]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = index;

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

@@ -0,0 +1,73 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { EmptyProps, ElTooltipProps } from 'element-plus';
+import type { IconItem } from './types';
+/**
+ * 属性
+ */
+export declare const iconSelectProps: {
+    modelValue: StringConstructor;
+    data: {
+        type: PropType<string[] | IconItem[]>;
+        required: boolean;
+    };
+    disabled: BooleanConstructor;
+    size: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never> | undefined>;
+    clearable: BooleanConstructor;
+    placeholder: StringConstructor;
+    name: StringConstructor;
+    autocomplete: {
+        type: StringConstructor;
+        default: string;
+    };
+    teleported: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    persistent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    automaticDropdown: BooleanConstructor;
+    placement: {
+        type: PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => "bottom" | "auto" | "auto-start" | "auto-end" | "top" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("element-plus").Placement) | ((new (...args: any[]) => "bottom" | "auto" | "auto-start" | "auto-end" | "top" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("element-plus").Placement))[], unknown, unknown>>;
+        default: string;
+    };
+    popperWidth: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    popperHeight: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    popperOptions: PropType<Partial<import("element-plus").Options>>;
+    popperClass: StringConstructor;
+    filterable: BooleanConstructor;
+    filterPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    hideOnSingleTab: BooleanConstructor;
+    emptyProps: PropType<Partial<EmptyProps>>;
+    tooltip: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tooltipProps: PropType<Partial<ElTooltipProps>>;
+    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;
+};