ele-admin-plus 1.4.0 → 1.4.1-beta.1

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

@@ -1,9 +1,8 @@
 "use strict";
 const vue = require("vue");
-const elementPlus = require("element-plus");
-const index = require("../icons/index");
 const EleTooltip = require("../ele-tooltip/index");
 const ReceiverView = require("../ele-config-provider/components/receiver-view");
+const SelectView = require("./components/select-view");
 const props = require("./props");
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ...{ name: "EleBasicSelect" },
@@ -13,48 +12,15 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   setup(__props, { expose: __expose, emit: __emit }) {
     const props2 = __props;
     const emit = __emit;
+    const selectViewRef = vue.ref(null);
     const tooltipRef = vue.ref(null);
-    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 inputPlaceholder = vue.computed(() => {
-      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 currentTags = vue.computed(() => {
-      if (!isCollapse.value || isEmpty.value || props2.selected == null) {
-        return props2.selected || [];
-      }
-      return props2.selected.slice(0, props2.maxTagCount);
-    });
-    const omittedTags = vue.computed(() => {
-      if (!isCollapse.value || isEmpty.value || props2.selected == null) {
-        return [];
-      }
-      return props2.selected.slice(props2.maxTagCount);
-    });
-    const omittedSize = vue.computed(() => {
-      if (isEmpty.value || props2.maxTagCount == null || props2.maxTagCount < 0) {
-        return 0;
+    const isSelectInputClick = vue.ref(false);
+    const updateVisible = (visible) => {
+      isSelectInputClick.value = false;
+      if (!props2.disabled || !visible) {
+        emit("update:visible", visible);
       }
-      return props2.value.length - props2.maxTagCount;
-    });
-    let isSelectInputClick = false;
+    };
     const updatePopper = () => {
       tooltipRef.value && tooltipRef.value.updatePopper();
     };
@@ -66,115 +32,113 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             return;
           }
         }
-        const input = props2.multiple ? searchRef.value : inputRef.value;
-        input && input.focus();
-        vue.nextTick(() => {
-          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) => {
-      isSelectInputClick = false;
-      if (!props2.disabled || !visible) {
-        emit("update:visible", visible);
+        selectViewRef.value && selectViewRef.value.focusSearchInput();
       }
     };
     const handleUpdatePopoverVisible = (visible) => {
-      if (!visible && props2.filterable && isSelectInputClick) {
-        isSelectInputClick = false;
+      if (!visible && props2.filterable && isSelectInputClick.value) {
+        isSelectInputClick.value = false;
         return;
       }
       updateVisible(visible);
     };
     const handleSelectInputClick = () => {
-      isSelectInputClick = true;
-    };
-    const handleTagClose = (item) => {
-      if (!props2.disabled) {
-        emit("removeTag", item);
+      isSelectInputClick.value = true;
+      if (props2.popperType === "modal") {
+        updateVisible(true);
       }
     };
-    const handleClear = () => {
-      isSelectInputClick = false;
-      emit("clear");
-    };
     const handleInputClick = (e) => {
       if (props2.automaticDropdown && props2.visible) {
-        isSelectInputClick = true;
+        isSelectInputClick.value = true;
         e.stopPropagation();
       }
     };
-    const handleInputFocus = (e) => {
+    const handleRemoveTag = (item) => {
+      emit("removeTag", item);
+    };
+    const handleClear = () => {
+      isSelectInputClick.value = false;
+      emit("clear");
+    };
+    const handleFocus = (e) => {
       if (props2.automaticDropdown && !props2.visible) {
         updateVisible(true);
       }
       emit("focus", e);
     };
-    const handleInputBlur = (e) => {
+    const handleBlur = (e) => {
       emit("blur", e);
     };
-    const handleInputEsc = (e) => {
-      if (!props2.disabled && props2.visible) {
-        e.stopPropagation();
-        e.preventDefault();
-        updateVisible(false);
-      }
+    const handleFilterChange = (value) => {
+      emit("filterChange", value);
     };
-    vue.watch(
-      () => props2.selectedLabel,
-      (label) => {
-        if (!props2.filterable || !props2.visible) {
-          inputValue.value = props2.multiple || !label ? "" : label;
-        }
-      }
-    );
-    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;
-          }
-        }
-      }
-    );
     __expose({
       tooltipRef,
-      inputRef,
-      searchRef,
-      currentTags,
-      omittedTags,
-      omittedSize,
+      selectViewRef,
       updatePopper,
       focusSearchInput,
-      updateSearchValue,
-      updateInputValue,
       updateVisible
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(EleTooltip, {
+      const _component_EleModal = vue.resolveComponent("EleModal");
+      return _ctx.popperType === "modal" ? (vue.openBlock(), vue.createBlock(SelectView, vue.mergeProps({ key: 0 }, _ctx.$props, {
+        ref_key: "selectViewRef",
+        ref: selectViewRef,
+        "onUpdate:visible": updateVisible,
+        onRemoveTag: handleRemoveTag,
+        onClear: handleClear,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onFilterChange: handleFilterChange,
+        onInputClick: handleInputClick,
+        onClick: handleSelectInputClick
+      }), vue.createSlots({
+        default: vue.withCtx(() => [
+          vue.createVNode(_component_EleModal, vue.mergeProps({
+            position: "center",
+            width: _ctx.popperWidth,
+            destroyOnClose: !_ctx.persistent,
+            class: _ctx.popperClass
+          }, _ctx.popperProps || {}, {
+            modelValue: _ctx.visible,
+            "onUpdate:modelValue": handleUpdatePopoverVisible
+          }), vue.createSlots({
+            default: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 2
+          }, [
+            vue.renderList(Object.keys(_ctx.popperSlots || {}).filter(
+              (k) => k !== "default" && _ctx.popperSlots && _ctx.popperSlots[k] && _ctx.popperSlots[k] !== "default" && _ctx.$slots[_ctx.popperSlots[k]]
+            ), (name) => {
+              return {
+                name,
+                fn: vue.withCtx((slotProps) => {
+                  var _a;
+                  return [
+                    vue.renderSlot(_ctx.$slots, (_a = _ctx.popperSlots) == null ? void 0 : _a[name], vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+                  ];
+                })
+              };
+            })
+          ]), 1040, ["width", "destroyOnClose", "class", "modelValue"])
+        ]),
+        _: 2
+      }, [
+        vue.renderList(Object.keys(_ctx.$slots).filter((k) => k !== "default"), (name) => {
+          return {
+            name,
+            fn: vue.withCtx((slotProps) => [
+              vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+            ])
+          };
+        })
+      ]), 1040)) : (vue.openBlock(), vue.createBlock(EleTooltip, vue.mergeProps({
+        key: 1,
         ref_key: "tooltipRef",
         ref: tooltipRef,
         trigger: "click",
-        visible: _ctx.visible,
         disabled: _ctx.disabled,
         placement: _ctx.placement,
         teleported: _ctx.teleported,
@@ -186,9 +150,11 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         effect: "light",
         persistent: true,
         isPopover: true,
-        triggerKeys: [],
+        triggerKeys: []
+      }, _ctx.popperProps || {}, {
+        visible: _ctx.visible,
         "onUpdate:visible": handleUpdatePopoverVisible
-      }, {
+      }), {
         body: vue.withCtx(() => [
           _ctx.persistent || _ctx.visible ? (vue.openBlock(), vue.createBlock(vue.unref(ReceiverView), {
             key: 0,
@@ -203,135 +169,30 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           })) : vue.createCommentVNode("", true)
         ]),
         default: vue.withCtx(() => [
-          vue.createElementVNode("div", {
-            class: vue.normalizeClass([
-              "ele-select",
-              _ctx.selectClass,
-              { "is-empty": isEmpty.value },
-              { "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 }
-            ]),
-            style: vue.normalizeStyle(_ctx.selectStyle),
+          vue.createVNode(SelectView, vue.mergeProps(_ctx.$props, {
+            ref_key: "selectViewRef",
+            ref: selectViewRef,
+            "onUpdate:visible": updateVisible,
+            onRemoveTag: handleRemoveTag,
+            onClear: handleClear,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            onFilterChange: handleFilterChange,
+            onInputClick: handleInputClick,
             onClick: handleSelectInputClick
-          }, [
-            vue.createVNode(vue.unref(elementPlus.ElInput), {
-              ref_key: "inputRef",
-              ref: inputRef,
-              size: _ctx.size,
-              disabled: _ctx.disabled,
-              validateEvent: false,
-              modelValue: inputValue.value,
-              placeholder: _ctx.filterable && _ctx.multiple && _ctx.visible ? "" : inputPlaceholder.value,
-              readonly: !(_ctx.filterable && !_ctx.multiple),
-              style: vue.normalizeStyle(_ctx.inputStyle),
-              "onUpdate:modelValue": updateInputValue,
-              onClick: handleInputClick,
-              onFocus: handleInputFocus,
-              onBlur: handleInputBlur,
-              onKeydown: vue.withKeys(handleInputEsc, ["esc"])
-            }, vue.createSlots({
-              suffix: vue.withCtx(() => [
-                _ctx.clearable && !_ctx.disabled && !isEmpty.value ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElIcon), {
-                  key: 0,
-                  class: "ele-select-clear el-input__icon",
-                  onClick: vue.withModifiers(handleClear, ["stop"])
-                }, {
-                  default: vue.withCtx(() => [
-                    vue.renderSlot(_ctx.$slots, "clearIcon", {}, () => [
-                      vue.createVNode(vue.unref(index.CloseCircleFilled))
-                    ])
-                  ]),
-                  _: 3
-                })) : vue.createCommentVNode("", true),
-                vue.createVNode(vue.unref(elementPlus.ElIcon), { class: "ele-select-arrow el-input__icon" }, {
-                  default: vue.withCtx(() => [
-                    vue.renderSlot(_ctx.$slots, "suffixIcon", { visible: _ctx.visible }, () => [
-                      vue.createVNode(vue.unref(index.ArrowDown))
-                    ])
-                  ]),
-                  _: 3
-                })
-              ]),
-              _: 2
-            }, [
-              _ctx.$slots.prefix ? {
-                name: "prefix",
-                fn: vue.withCtx(() => [
-                  vue.renderSlot(_ctx.$slots, "prefix")
-                ]),
-                key: "0"
-              } : void 0
-            ]), 1032, ["size", "disabled", "modelValue", "placeholder", "readonly", "style"]),
-            _ctx.multiple ? (vue.openBlock(), vue.createElementBlock("div", {
-              key: 0,
-              class: "ele-select-tags",
-              style: vue.normalizeStyle(_ctx.selectTagsStyle)
-            }, [
-              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(currentTags.value, (item, index2) => {
-                return vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElTag), {
-                  key: index2 + "-" + item.value,
-                  size: _ctx.size,
-                  type: _ctx.tagType,
-                  closable: !_ctx.disabled,
-                  disableTransitions: true,
-                  title: item.label,
-                  onClose: ($event) => handleTagClose(item)
-                }, {
-                  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)),
-              isCollapse.value ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElTag), {
-                key: 0,
-                size: _ctx.size,
-                type: _ctx.tagType,
-                disableTransitions: true
-              }, {
-                default: vue.withCtx(() => [
-                  vue.renderSlot(_ctx.$slots, "maxTagPlaceholder", {
-                    omittedValues: omittedTags.value,
-                    omittedSize: omittedSize.value
-                  }, () => [
-                    vue.createTextVNode(" +" + vue.toDisplayString(omittedSize.value), 1)
-                  ])
-                ]),
-                _: 3
-              }, 8, ["size", "type"])) : vue.createCommentVNode("", true),
-              !_ctx.disabled && _ctx.filterable ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElTag), {
-                key: 1,
-                size: _ctx.size,
-                disableTransitions: true,
-                class: "ele-select-search"
-              }, {
-                default: vue.withCtx(() => [
-                  vue.createVNode(vue.unref(elementPlus.ElInput), {
-                    ref_key: "searchRef",
-                    ref: searchRef,
-                    size: _ctx.size,
-                    validateEvent: false,
-                    modelValue: searchValue.value,
-                    placeholder: inputPlaceholder.value,
-                    "onUpdate:modelValue": updateSearchValue,
-                    onKeydown: vue.withKeys(handleInputEsc, ["esc"])
-                  }, null, 8, ["size", "modelValue", "placeholder"])
-                ]),
-                _: 1
-              }, 8, ["size"])) : vue.createCommentVNode("", true)
-            ], 4)) : vue.createCommentVNode("", true)
-          ], 6)
+          }), vue.createSlots({ _: 2 }, [
+            vue.renderList(Object.keys(_ctx.$slots).filter((k) => k !== "default"), (name) => {
+              return {
+                name,
+                fn: vue.withCtx((slotProps) => [
+                  vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+                ])
+              };
+            })
+          ]), 1040)
         ]),
         _: 3
-      }, 8, ["visible", "disabled", "placement", "teleported", "width", "popperClass", "popperOptions", "transition", "gpuAcceleration"]);
+      }, 16, ["disabled", "placement", "teleported", "width", "popperClass", "popperOptions", "transition", "gpuAcceleration", "visible"]));
     };
   }
 });

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

@@ -1,17 +1,7 @@
-import { ElInputInstance } from '../ele-app/el';
-import { EleTooltipInstance } from '../ele-app/plus';
+import { EleTooltipInstance, EleBasicSelectViewInstance } from '../ele-app/plus';
 import { SelectedItem } from './types';
 
-declare function __VLS_template(): {
-    prefix?(_: {}): any;
-    clearIcon?(_: {}): any;
-    suffixIcon?(_: {
-        visible: boolean;
-    }): any;
-    maxTagPlaceholder?(_: {
-        omittedValues: SelectedItem[];
-        omittedSize: number;
-    }): any;
+declare function __VLS_template(): Partial<Record<string, (_: any) => any>> & Partial<Record<any, (_: any) => any>> & Partial<Record<string, (_: any) => any>> & {
     default?(_: {}): any;
 };
 declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
@@ -46,21 +36,18 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     selectStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
     inputStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
     selectTagsStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    popperType: import('vue').PropType<import('./types').PopperType>;
+    popperProps: import('vue').PropType<import('./types').PopperProps>;
+    popperSlots: ObjectConstructor;
 }>, {
     tooltipRef: import('vue').Ref<EleTooltipInstance, EleTooltipInstance>;
-    inputRef: import('vue').Ref<ElInputInstance, ElInputInstance>;
-    searchRef: import('vue').Ref<ElInputInstance, ElInputInstance>;
-    currentTags: import('vue').ComputedRef<SelectedItem[]>;
-    omittedTags: import('vue').ComputedRef<SelectedItem[]>;
-    omittedSize: import('vue').ComputedRef<number>;
+    selectViewRef: import('vue').Ref<EleBasicSelectViewInstance, EleBasicSelectViewInstance>;
     updatePopper: () => void;
     focusSearchInput: (e?: MouseEvent) => void;
-    updateSearchValue: (modelValue: string) => void;
-    updateInputValue: (modelValue: string) => void;
     updateVisible: (visible: boolean) => void;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    focus: (_e: FocusEvent) => void;
     blur: (_e: FocusEvent) => void;
+    focus: (_e: FocusEvent) => void;
     clear: () => void;
     "update:visible": (_visible: boolean) => void;
     filterChange: (_value: string) => void;
@@ -97,18 +84,21 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     selectStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
     inputStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
     selectTagsStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    popperType: import('vue').PropType<import('./types').PopperType>;
+    popperProps: import('vue').PropType<import('./types').PopperProps>;
+    popperSlots: ObjectConstructor;
 }>> & Readonly<{
-    onFocus?: ((_e: FocusEvent) => any) | undefined;
     onBlur?: ((_e: FocusEvent) => any) | undefined;
+    onFocus?: ((_e: FocusEvent) => any) | undefined;
     onClear?: (() => any) | undefined;
     "onUpdate:visible"?: ((_visible: boolean) => any) | undefined;
     onFilterChange?: ((_value: string) => any) | undefined;
     onRemoveTag?: ((_item: SelectedItem) => any) | undefined;
 }>, {
-    value: import('./types').SelectValue;
     teleported: boolean;
-    clearable: boolean;
     disabled: boolean;
+    clearable: boolean;
+    value: import('./types').SelectValue;
     filterable: boolean;
     persistent: boolean;
     visible: boolean;

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

@@ -58,7 +58,13 @@ const basicSelectProps = {
   /** 自定义输入框样式 */
   inputStyle: Object,
   /** 自定义多选标签容器样式 */
-  selectTagsStyle: Object
+  selectTagsStyle: Object,
+  /** 下拉类型 */
+  popperType: String,
+  /** 下拉组件属性 */
+  popperProps: Object,
+  /** 下拉组件插槽 */
+  popperSlots: Object
 };
 const basicSelectEmits = {
   /** 更新下拉框显示状态 */

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

@@ -2,7 +2,7 @@ import { PropType, ExtractPropTypes } from 'vue';
 import { StyleValue } from '../ele-app/types';
 import { ElInputProps, ElTagProps } from '../ele-app/el';
 import { EleTooltipProps } from '../ele-app/plus';
-import { SelectValue, SelectedItem } from './types';
+import { SelectValue, SelectedItem, PopperType, PopperProps } from './types';
 
 /**
  * 属性
@@ -55,7 +55,7 @@ export declare const basicSelectProps: {
     /** 下拉框类名 */
     popperClass: StringConstructor;
     /** 下拉框宽度 */
-    popperWidth: (StringConstructor | NumberConstructor)[];
+    popperWidth: (NumberConstructor | StringConstructor)[];
     /** 自定义类名 */
     selectClass: StringConstructor;
     /** 自定义样式 */
@@ -64,6 +64,12 @@ export declare const basicSelectProps: {
     inputStyle: PropType<StyleValue>;
     /** 自定义多选标签容器样式 */
     selectTagsStyle: PropType<StyleValue>;
+    /** 下拉类型 */
+    popperType: PropType<PopperType>;
+    /** 下拉组件属性 */
+    popperProps: PropType<PopperProps>;
+    /** 下拉组件插槽 */
+    popperSlots: ObjectConstructor;
 };
 export type BasicSelectProps = ExtractPropTypes<typeof basicSelectProps>;
 /**

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

@@ -1,3 +1,10 @@
+import type { ComponentProps } from '../ele-app/types';
+import type {
+  EleModalProps,
+  EleDrawerProps,
+  EleTooltipProps
+} from '../ele-app/plus';
+
 /**
  * 单选值
  */
@@ -26,3 +33,17 @@ export interface SelectedItem {
   /** 排序号 */
   index?: number;
 }
+
+/**
+ * 下拉类型
+ */
+export type PopperType = 'popper' | 'modal' | 'drawer' | 'default';
+
+/**
+ * 下拉组件属性
+ */
+export type PopperProps =
+  | EleModalProps
+  | EleDrawerProps
+  | EleTooltipProps
+  | ComponentProps<{}>;

package/lib/ele-basic-select/util.cjs

@@ -27,7 +27,12 @@ function valueIsChanged(value1, value2, multiple) {
   if (value1.length !== value2.length) {
     return true;
   }
-  return value1.some((v) => !value2.includes(v));
+  for (let i = 0; i < value1.length; i++) {
+    if (value1[i] !== value2[i]) {
+      return true;
+    }
+  }
+  return false;
 }
 function useFormValidate() {
   const formItem = vue.inject(elementPlus.formItemContextKey, null);

package/lib/ele-bottom-bar/index.cjs

@@ -3,7 +3,7 @@ const vue = require("vue");
 const util = require("../ele-pro-layout/util");
 const props = require("./props");
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
-  ...{ name: "EleBottomBar" },
+  ...{ name: "EleBottomBar", inheritAttrs: false },
   __name: "index",
   props: props.bottomBarProps,
   setup(__props) {
@@ -24,9 +24,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         to: teleportTo.value,
         disabled: !_ctx.teleported || !teleportTo.value
       }, [
-        vue.createElementVNode("div", {
-          class: vue.normalizeClass(["ele-bottom-bar", { "is-deactivated": !isActivated.value }])
-        }, [
+        vue.createElementVNode("div", vue.mergeProps(_ctx.$attrs, {
+          class: ["ele-bottom-bar", { "is-deactivated": !isActivated.value }]
+        }), [
           vue.createElementVNode("div", {
             class: "ele-bottom-bar-body",
             style: vue.normalizeStyle(_ctx.bodyStyle)
@@ -39,7 +39,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           }, [
             vue.renderSlot(_ctx.$slots, "extra")
           ], 4)
-        ], 2)
+        ], 16)
       ], 8, ["to", "disabled"]);
     };
   }

package/lib/ele-breadcrumb/types.d.ts

@@ -17,7 +17,7 @@ export type BreadcrumbSeparator =
  */
 export interface BreadcrumbItem extends ElBreadcrumbItemProps {
   /** 循环的 key */
-  key?: string | number | symbol;
+  key?: PropertyKey;
   /** 标题 */
   title?: string;
   /** 图标 */