ele-admin-plus 1.1.6-beta.2 → 1.1.6-beta.3

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

@@ -2,9 +2,8 @@
 const vue = require("vue");
 const iconsVue = require("@element-plus/icons-vue");
 const elementPlus = require("element-plus");
-const EleTooltip = require("../ele-tooltip/index");
 const receiver = require("../ele-config-provider/receiver");
-const SelectTag = require("./components/select-tag");
+const EleTooltip = require("../ele-tooltip/index");
 const props = require("./props");
 const _sfc_main = vue.defineComponent({
   name: "EleBasicSelect",
@@ -13,96 +12,142 @@ const _sfc_main = vue.defineComponent({
     ArrowDown: iconsVue.ArrowDown,
     ElInput: elementPlus.ElInput,
     ElIcon: elementPlus.ElIcon,
-    EleTooltip,
-    SelectTag
+    ElTag: elementPlus.ElTag,
+    EleTooltip
   },
   props: props.basicSelectProps,
   emits: props.basicSelectEmits,
   setup(props2, { emit }) {
     const { authenticated } = receiver.useLicense();
     const tooltipRef = vue.ref(null);
-    const isDisabled = vue.computed(() => {
-      return !authenticated.value || props2.disabled;
-    });
+    const inputRef = vue.ref(null);
+    const searchRef = vue.ref(null);
+    const inputValue = vue.ref(
+      props2.multiple || !props2.selectedLabel ? "" : props2.selectedLabel
+    );
+    const searchValue = vue.ref("");
     const isEmpty = vue.computed(() => {
       if (!props2.multiple) {
         return props2.value == null || props2.value === "";
       }
       return !Array.isArray(props2.value) || !props2.value.length;
     });
-    const closeEnable = vue.computed(() => {
-      return props2.clearable && !isDisabled.value && !isEmpty.value;
-    });
     const inputPlaceholder = vue.computed(() => {
-      return isEmpty.value ? props2.placeholder : "";
+      const str = isEmpty.value && props2.placeholder ? props2.placeholder : "";
+      if (!props2.filterable || !props2.visible || props2.multiple) {
+        return str;
+      }
+      return props2.selectedLabel || str;
     });
     const isCollapse = vue.computed(() => {
       return typeof props2.maxTagCount === "number" && props2.selected != null && props2.selected.length > props2.maxTagCount;
     });
-    const currentValues = vue.computed(() => {
-      if (!isCollapse.value || props2.selected == null) {
-        return props2.selected ?? [];
+    const currentTags = vue.computed(() => {
+      if (!isCollapse.value || isEmpty.value || props2.selected == null) {
+        return props2.selected || [];
       }
       return props2.selected.slice(0, props2.maxTagCount);
     });
-    const omittedValues = vue.computed(() => {
-      if (!isCollapse.value || props2.selected == null) {
+    const omittedTags = vue.computed(() => {
+      if (!isCollapse.value || isEmpty.value || props2.selected == null) {
         return [];
       }
       return props2.selected.slice(props2.maxTagCount);
     });
-    const updateVisible = (visible) => {
-      if (isDisabled.value && visible) {
-        return;
+    const omittedSize = vue.computed(() => {
+      if (isEmpty.value || props2.maxTagCount == null || props2.maxTagCount < 0) {
+        return 0;
       }
-      emit("update:visible", visible);
-    };
+      return props2.value.length - props2.maxTagCount;
+    });
     const updatePopper = () => {
       tooltipRef.value && tooltipRef.value.updatePopper();
     };
+    const focusSearchInput = () => {
+      if (props2.filterable && props2.visible) {
+        const input = props2.multiple ? searchRef.value : inputRef.value;
+        input && input.focus();
+      }
+    };
+    const updateSearchValue = (modelValue) => {
+      if (props2.filterable && props2.visible && props2.multiple) {
+        searchValue.value = modelValue;
+        emit("filterChange", modelValue);
+      }
+    };
+    const updateInputValue = (modelValue) => {
+      if (props2.filterable && props2.visible && !props2.multiple) {
+        inputValue.value = modelValue;
+        emit("filterChange", modelValue);
+      }
+    };
+    const updateVisible = (visible) => {
+      if (authenticated.value && !props2.disabled || !visible) {
+        emit("update:visible", visible);
+      }
+    };
     const onTagClose = (item) => {
-      if (!isDisabled.value) {
+      if (authenticated.value && !props2.disabled) {
         emit("removeTag", item);
       }
     };
     const onClear = () => {
       emit("clear");
     };
-    const onFocus = (e) => {
+    const onInputFocus = (e) => {
       if (props2.automaticDropdown && !props2.visible) {
         updateVisible(true);
       }
       emit("focus", e);
     };
-    const onBlur = (e) => {
+    const onInputBlur = (e) => {
       emit("blur", e);
     };
     vue.watch(
-      () => props2.disabled,
-      (disabled) => {
-        if (disabled && props2.visible) {
-          updateVisible(false);
+      () => props2.selectedLabel,
+      (label) => {
+        if (!props2.filterable || !props2.visible) {
+          inputValue.value = props2.multiple || !label ? "" : label;
         }
-      },
-      { immediate: true }
+      }
+    );
+    vue.watch(
+      () => props2.visible,
+      (visible) => {
+        if (props2.filterable) {
+          if (props2.multiple) {
+            searchValue.value = "";
+            if (visible) {
+              focusSearchInput();
+            }
+          } else {
+            const label = props2.selectedLabel;
+            inputValue.value = visible || !label ? "" : label;
+          }
+        }
+      }
     );
-    vue.watch(currentValues, () => {
-      updatePopper();
-    });
     return {
       tooltipRef,
-      isDisabled,
-      closeEnable,
+      inputRef,
+      searchRef,
+      inputValue,
+      searchValue,
+      isEmpty,
       inputPlaceholder,
       isCollapse,
-      currentValues,
-      omittedValues,
-      updateVisible,
+      currentTags,
+      omittedTags,
+      omittedSize,
       updatePopper,
+      focusSearchInput,
+      updateSearchValue,
+      updateInputValue,
+      updateVisible,
       onTagClose,
       onClear,
-      onFocus,
-      onBlur
+      onInputFocus,
+      onInputBlur
     };
   }
 });
@@ -118,36 +163,36 @@ const _hoisted_2 = {
   key: 0,
   class: "ele-select-tags"
 };
-const _hoisted_3 = {
-  key: 0,
-  class: "ele-popover-body"
-};
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_CircleClose = vue.resolveComponent("CircleClose");
   const _component_ElIcon = vue.resolveComponent("ElIcon");
   const _component_ArrowDown = vue.resolveComponent("ArrowDown");
   const _component_ElInput = vue.resolveComponent("ElInput");
-  const _component_SelectTag = vue.resolveComponent("SelectTag");
+  const _component_ElTag = vue.resolveComponent("ElTag");
   const _component_EleTooltip = vue.resolveComponent("EleTooltip");
   return vue.openBlock(), vue.createBlock(_component_EleTooltip, {
     ref: "tooltipRef",
     trigger: "click",
     visible: _ctx.visible,
-    width: _ctx.popperWidth,
+    disabled: _ctx.disabled,
     placement: _ctx.placement,
     teleported: _ctx.teleported,
-    disabled: _ctx.isDisabled,
-    transition: "el-zoom-in-top",
+    width: _ctx.popperWidth,
     popperClass: _ctx.popperClass,
     popperOptions: _ctx.popperOptions,
-    gpuAcceleration: false,
-    persistent: true,
+    transition: _ctx.transition,
+    gpuAcceleration: _ctx.transition === "el-fade-in-linear",
     effect: "light",
+    persistent: true,
     isPopover: true,
     "onUpdate:visible": _ctx.updateVisible
   }, {
     body: vue.withCtx(() => [
-      _ctx.persistent || _ctx.visible ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+      _ctx.persistent || _ctx.visible ? (vue.openBlock(), vue.createElementBlock("div", {
+        key: 0,
+        class: "ele-popover-body",
+        onClick: _cache[0] || (_cache[0] = (...args) => _ctx.focusSearchInput && _ctx.focusSearchInput(...args))
+      }, [
         vue.renderSlot(_ctx.$slots, "default")
       ])) : vue.createCommentVNode("", true)
     ]),
@@ -155,25 +200,30 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       vue.createElementVNode("div", {
         class: vue.normalizeClass([
           "ele-select",
+          { "is-empty": _ctx.isEmpty },
           { "is-multiple": _ctx.multiple },
+          { "is-disabled": _ctx.disabled },
+          { "is-filterable": _ctx.filterable },
+          { "is-small": _ctx.size === "small" },
+          { "is-large": _ctx.size === "large" },
           { "is-opened": _ctx.visible }
         ])
       }, [
         vue.createVNode(_component_ElInput, {
-          name: _ctx.name,
+          ref: "inputRef",
           size: _ctx.size,
-          readonly: true,
+          disabled: _ctx.disabled,
           validateEvent: false,
-          disabled: _ctx.isDisabled,
-          autocomplete: _ctx.autocomplete,
-          placeholder: _ctx.inputPlaceholder,
-          modelValue: _ctx.multiple ? "" : _ctx.selectedLabel,
-          onFocus: _ctx.onFocus,
-          onBlur: _ctx.onBlur
+          modelValue: _ctx.inputValue,
+          placeholder: _ctx.filterable && _ctx.multiple && _ctx.visible ? "" : _ctx.inputPlaceholder,
+          readonly: !_ctx.filterable || !_ctx.visible || _ctx.multiple,
+          "onUpdate:modelValue": _ctx.updateInputValue,
+          onFocus: _ctx.onInputFocus,
+          onBlur: _ctx.onInputBlur
         }, vue.createSlots({
           suffix: vue.withCtx(() => [
             vue.createElementVNode("div", _hoisted_1, [
-              _ctx.closeEnable ? (vue.openBlock(), vue.createBlock(_component_ElIcon, {
+              _ctx.clearable && !_ctx.disabled && !_ctx.isEmpty ? (vue.openBlock(), vue.createBlock(_component_ElIcon, {
                 key: 0,
                 class: "ele-select-clear",
                 onClick: vue.withModifiers(_ctx.onClear, ["stop"])
@@ -204,36 +254,63 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             ]),
             key: "0"
           } : void 0
-        ]), 1032, ["name", "size", "disabled", "autocomplete", "placeholder", "modelValue", "onFocus", "onBlur"]),
+        ]), 1032, ["size", "disabled", "modelValue", "placeholder", "readonly", "onUpdate:modelValue", "onFocus", "onBlur"]),
         _ctx.multiple ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
-          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.currentValues, (item, index2) => {
-            return vue.openBlock(), vue.createBlock(_component_SelectTag, {
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.currentTags, (item, index2) => {
+            return vue.openBlock(), vue.createBlock(_component_ElTag, {
               key: index2 + "-" + item.value,
               size: _ctx.size,
               type: _ctx.tagType,
-              label: item.label,
-              closable: !_ctx.isDisabled,
-              maxTagTextLength: _ctx.maxTagTextLength,
+              closable: !_ctx.disabled,
+              disableTransitions: true,
+              title: item.label,
               onClose: ($event) => _ctx.onTagClose(item)
-            }, null, 8, ["size", "type", "label", "closable", "maxTagTextLength", "onClose"]);
+            }, {
+              default: vue.withCtx(() => [
+                item.label && _ctx.maxTagTextLength && item.label.length > _ctx.maxTagTextLength ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+                  vue.createTextVNode(vue.toDisplayString(item.label.slice(0, _ctx.maxTagTextLength)) + "... ", 1)
+                ], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+                  vue.createTextVNode(vue.toDisplayString(item.label), 1)
+                ], 64))
+              ]),
+              _: 2
+            }, 1032, ["size", "type", "closable", "title", "onClose"]);
           }), 128)),
-          _ctx.isCollapse ? (vue.openBlock(), vue.createBlock(_component_SelectTag, {
+          _ctx.isCollapse ? (vue.openBlock(), vue.createBlock(_component_ElTag, {
             key: 0,
             size: _ctx.size,
-            type: _ctx.tagType
+            type: _ctx.tagType,
+            disableTransitions: true
           }, {
             default: vue.withCtx(() => [
-              vue.renderSlot(_ctx.$slots, "maxTagPlaceholder", { omittedValues: _ctx.omittedValues }, () => [
-                vue.createTextVNode(" + " + vue.toDisplayString(_ctx.omittedValues.length) + " ... ", 1)
+              vue.renderSlot(_ctx.$slots, "maxTagPlaceholder", { omittedValues: _ctx.omittedTags }, () => [
+                vue.createTextVNode(" +" + vue.toDisplayString(_ctx.omittedSize), 1)
               ])
             ]),
             _: 3
-          }, 8, ["size", "type"])) : vue.createCommentVNode("", true)
+          }, 8, ["size", "type"])) : vue.createCommentVNode("", true),
+          !_ctx.disabled && _ctx.filterable ? (vue.openBlock(), vue.createBlock(_component_ElTag, {
+            key: 1,
+            size: _ctx.size,
+            disableTransitions: true,
+            class: "ele-select-search"
+          }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(_component_ElInput, {
+                ref: "searchRef",
+                validateEvent: false,
+                modelValue: _ctx.searchValue,
+                placeholder: _ctx.inputPlaceholder,
+                "onUpdate:modelValue": _ctx.updateSearchValue
+              }, null, 8, ["modelValue", "placeholder", "onUpdate:modelValue"])
+            ]),
+            _: 1
+          }, 8, ["size"])) : vue.createCommentVNode("", true)
         ])) : vue.createCommentVNode("", true)
       ], 2)
     ]),
     _: 3
-  }, 8, ["visible", "width", "placement", "teleported", "disabled", "popperClass", "popperOptions", "onUpdate:visible"]);
+  }, 8, ["visible", "disabled", "placement", "teleported", "width", "popperClass", "popperOptions", "transition", "gpuAcceleration", "onUpdate:visible"]);
 }
 const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 module.exports = index;

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

@@ -4,62 +4,70 @@ import type { SelectValue, SelectedItem } from './types';
  * 属性
  */
 export declare const basicSelectProps: {
-    /** 值 */
-    value: PropType<SelectValue>;
+    /** 选中值 */
+    value: {
+        type: PropType<SelectValue>;
+        default: () => null;
+    };
     /** 是否多选 */
     multiple: BooleanConstructor;
     /** 是否禁用 */
     disabled: BooleanConstructor;
     /** 尺寸 */
-    size: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never> | undefined>;
+    size: PropType<import("element-plus/es/utils/index").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never> | undefined>;
     /** 是否支持清除 */
     clearable: BooleanConstructor;
-    /** 占位符 */
+    /** 无选中时提示文本 */
     placeholder: StringConstructor;
-    /** input 的 name 属性 */
-    name: StringConstructor;
-    /** input 的 autocomplete 属性 */
-    autocomplete: StringConstructor;
-    /** 单选选中展示的文本 */
-    selectedLabel: (StringConstructor | NumberConstructor)[];
-    /** 多选选中的数据 */
+    /** 单选选中展示文本 */
+    selectedLabel: StringConstructor;
+    /** 多选选中数据 */
     selected: PropType<SelectedItem[]>;
-    /** 最多显示多少个 tag */
+    /** 多选标签最大显示数量 */
     maxTagCount: NumberConstructor;
-    /** 最大显示的 tag 文本长度 */
+    /** 多选标签最大显示文本长度 */
     maxTagTextLength: NumberConstructor;
-    /** popover 是否显示 */
+    /** 多选标签类型 */
+    tagType: PropType<import("element-plus/es/utils/index").EpPropMergeType<StringConstructor, "" | "success" | "warning" | "info" | "danger", unknown> | undefined>;
+    /** 是否在输入框获得焦点后自动弹出选项菜单 */
+    automaticDropdown: BooleanConstructor;
+    /** 是否可以筛选 */
+    filterable: BooleanConstructor;
+    /** 下拉框是否显示 */
     visible: BooleanConstructor;
-    /** 是否将 popover 内容插入 body */
+    /** 是否将下拉框插入 body */
     teleported: BooleanConstructor;
-    /** 始终渲染 popover 内容 */
+    /** 始终渲染下拉框 */
     persistent: BooleanConstructor;
-    /** 是否在输入框获得焦点后自动弹出选项菜单 */
-    automaticDropdown: BooleanConstructor;
-    /** 标签类型 */
-    tagType: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "success" | "warning" | "info" | "danger", unknown> | undefined>;
-    /** 气泡框位置 */
-    placement: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, import("element-plus").Placement, unknown> | undefined>;
-    /** popper 宽度 */
-    popperWidth: (StringConstructor | NumberConstructor)[];
-    /** popper.js 的参数 */
+    /** 下拉框位置 */
+    placement: PropType<import("element-plus/es/utils/index").EpPropMergeType<StringConstructor, import("element-plus").Placement, unknown> | undefined>;
+    /** 下拉框渐变动画 */
+    transition: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** popper.js 参数 */
     popperOptions: PropType<Partial<import("element-plus").Options> | undefined>;
-    /** 下拉框的类名 */
+    /** 下拉框类名 */
     popperClass: StringConstructor;
+    /** 下拉框宽度 */
+    popperWidth: (StringConstructor | NumberConstructor)[];
 };
 export type BasicSelectProps = ExtractPropTypes<typeof basicSelectProps>;
 /**
  * 事件
  */
 export declare const basicSelectEmits: {
-    /** 更新气泡显示状态 */
+    /** 更新下拉框显示状态 */
     'update:visible': (_visible: boolean) => boolean;
-    /** 多选移除事件 */
+    /** 多选标签移除事件 */
     removeTag: (_item: SelectedItem) => boolean;
-    /** 清除按钮点击事件 */
+    /** 清空事件 */
     clear: () => boolean;
     /** 获取焦点事件 */
     focus: (_e: FocusEvent) => boolean;
     /** 失去焦点事件 */
     blur: (_e: FocusEvent) => boolean;
+    /** 筛选输入框值改变事件 */
+    filterChange: (_value: string) => boolean;
 };

package/lib/ele-basic-select/props.js

@@ -1,8 +1,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const basicSelectProps = {
-  /** 值 */
-  value: [String, Number, Boolean, Array],
+  /** 选中值 */
+  value: {
+    type: [String, Number, Boolean, Array],
+    default: () => {
+      return null;
+    }
+  },
   /** 是否多选 */
   multiple: Boolean,
   /** 是否禁用 */
@@ -11,50 +16,55 @@ const basicSelectProps = {
   size: String,
   /** 是否支持清除 */
   clearable: Boolean,
-  /** 占位符 */
+  /** 无选中时提示文本 */
   placeholder: String,
-  /** input 的 name 属性 */
-  name: String,
-  /** input 的 autocomplete 属性 */
-  autocomplete: String,
-  /** 单选选中展示的文本 */
-  selectedLabel: [String, Number],
-  /** 多选选中的数据 */
+  /** 单选选中展示文本 */
+  selectedLabel: String,
+  /** 多选选中数据 */
   selected: Array,
-  /** 最多显示多少个 tag */
+  /** 多选标签最大显示数量 */
   maxTagCount: Number,
-  /** 最大显示的 tag 文本长度 */
+  /** 多选标签最大显示文本长度 */
   maxTagTextLength: Number,
-  /** popover 是否显示 */
+  /** 多选标签类型 */
+  tagType: String,
+  /** 是否在输入框获得焦点后自动弹出选项菜单 */
+  automaticDropdown: Boolean,
+  /** 是否可以筛选 */
+  filterable: Boolean,
+  /** 下拉框是否显示 */
   visible: Boolean,
-  /** 是否将 popover 内容插入 body */
+  /** 是否将下拉框插入 body */
   teleported: Boolean,
-  /** 始终渲染 popover 内容 */
+  /** 始终渲染下拉框 */
   persistent: Boolean,
-  /** 是否在输入框获得焦点后自动弹出选项菜单 */
-  automaticDropdown: Boolean,
-  /** 标签类型 */
-  tagType: String,
-  /** 气泡框位置 */
+  /** 下拉框位置 */
   placement: String,
-  /** popper 宽度 */
-  popperWidth: [Number, String],
-  /** popper.js 的参数 */
+  /** 下拉框渐变动画 */
+  transition: {
+    type: String,
+    default: "el-fade-in-linear"
+  },
+  /** popper.js 参数 */
   popperOptions: Object,
-  /** 下拉框的类名 */
-  popperClass: String
+  /** 下拉框类名 */
+  popperClass: String,
+  /** 下拉框宽度 */
+  popperWidth: [Number, String]
 };
 const basicSelectEmits = {
-  /** 更新气泡显示状态 */
+  /** 更新下拉框显示状态 */
   "update:visible": (_visible) => true,
-  /** 多选移除事件 */
+  /** 多选标签移除事件 */
   removeTag: (_item) => true,
-  /** 清除按钮点击事件 */
+  /** 清空事件 */
   clear: () => true,
   /** 获取焦点事件 */
   focus: (_e) => true,
   /** 失去焦点事件 */
-  blur: (_e) => true
+  blur: (_e) => true,
+  /** 筛选输入框值改变事件 */
+  filterChange: (_value) => true
 };
 exports.basicSelectEmits = basicSelectEmits;
 exports.basicSelectProps = basicSelectProps;