element-plus 2.2.33 → 2.2.35

package/dist/index.full.js

@@ -1,4 +1,4 @@
-/*! Element Plus v2.2.33 */
+/*! Element Plus v2.2.35 */
 
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
@@ -9020,8 +9020,8 @@
     };
   };
   const localeContextKey = Symbol("localeContextKey");
-  const useLocale = () => {
-    const locale = vue.inject(localeContextKey, vue.ref());
+  const useLocale = (localeOverrides) => {
+    const locale = localeOverrides || vue.inject(localeContextKey, vue.ref());
     return buildLocaleContext(vue.computed(() => locale.value || English));
   };
 
@@ -9251,15 +9251,15 @@
     return cls;
   };
   const namespaceContextKey = Symbol("localeContextKey");
-  const useGetDerivedNamespace = () => {
-    const derivedNamespace = vue.inject(namespaceContextKey, vue.ref(defaultNamespace));
+  const useGetDerivedNamespace = (namespaceOverrides) => {
+    const derivedNamespace = namespaceOverrides || vue.inject(namespaceContextKey, vue.ref(defaultNamespace));
     const namespace = vue.computed(() => {
       return vue.unref(derivedNamespace) || defaultNamespace;
     });
     return namespace;
   };
-  const useNamespace = (block) => {
-    const namespace = useGetDerivedNamespace();
+  const useNamespace = (block, namespaceOverrides) => {
+    const namespace = useGetDerivedNamespace(namespaceOverrides);
     const b = (blockSuffix = "") => _bem(namespace.value, block, blockSuffix, "", "");
     const e = (element) => element ? _bem(namespace.value, block, "", element, "") : "";
     const m = (modifier) => modifier ? _bem(namespace.value, block, "", "", modifier) : "";
@@ -9308,11 +9308,11 @@
     };
   };
 
-  const useLockscreen = (trigger) => {
+  const useLockscreen = (trigger, options = {}) => {
     if (!vue.isRef(trigger)) {
       throwError("[useLockscreen]", "You need to pass a ref param to this function");
     }
-    const ns = useNamespace("popup");
+    const ns = options.ns || useNamespace("popup");
     const hiddenCls = computed(() => ns.bm("parent", "hidden"));
     if (!isClient || hasClass(document.body, hiddenCls.value)) {
       return;
@@ -9839,14 +9839,18 @@
     return container;
   };
   const usePopperContainer = () => {
+    const { id, selector } = usePopperContainerId();
     vue.onBeforeMount(() => {
       if (!isClient)
         return;
-      const { id, selector } = usePopperContainerId();
       if (!cachedContainer && !document.body.querySelector(selector.value)) {
         cachedContainer = createContainer(id.value);
       }
     });
+    return {
+      id,
+      selector
+    };
   };
 
   const useDelayedRender = ({
@@ -9947,8 +9951,8 @@
   const zIndex = vue.ref(0);
   const defaultInitialZIndex = 2e3;
   const zIndexContextKey = Symbol("zIndexContextKey");
-  const useZIndex = () => {
-    const zIndexInjection = vue.inject(zIndexContextKey, void 0);
+  const useZIndex = (zIndexOverrides) => {
+    const zIndexInjection = zIndexOverrides || vue.inject(zIndexContextKey, void 0);
     const initialZIndex = vue.computed(() => {
       const zIndexFromInjection = vue.unref(zIndexInjection);
       return isNumber$1(zIndexFromInjection) ? zIndexFromInjection : defaultInitialZIndex;
@@ -11093,6 +11097,31 @@
       return config;
     }
   }
+  function useGlobalComponentSettings(block, sizeFallback) {
+    const config = useGlobalConfig();
+    const ns = useNamespace(block, vue.computed(() => {
+      var _a;
+      return ((_a = config.value) == null ? void 0 : _a.namespace) || defaultNamespace;
+    }));
+    const locale = useLocale(vue.computed(() => {
+      var _a;
+      return (_a = config.value) == null ? void 0 : _a.locale;
+    }));
+    const zIndex = useZIndex(vue.computed(() => {
+      var _a;
+      return ((_a = config.value) == null ? void 0 : _a.zIndex) || defaultInitialZIndex;
+    }));
+    const size = vue.computed(() => {
+      var _a;
+      return vue.unref(sizeFallback) || ((_a = config.value) == null ? void 0 : _a.size) || "";
+    });
+    return {
+      ns,
+      locale,
+      zIndex,
+      size
+    };
+  }
   const provideGlobalConfig = (config, app, global = false) => {
     var _a;
     const inSetup = !!vue.getCurrentInstance();
@@ -11173,7 +11202,7 @@
 
   const ElConfigProvider = withInstall(ConfigProvider);
 
-  const version$1 = "2.2.33";
+  const version$1 = "2.2.35";
 
   const makeInstaller = (components = []) => {
     const install = (app, options) => {
@@ -28570,17 +28599,21 @@
     },
     zIndex: {
       type: definePropType([String, Number])
+    },
+    isGlobal: {
+      type: Boolean
     }
   });
   const overlayEmits = {
     click: (evt) => evt instanceof MouseEvent
   };
+  const BLOCK = "overlay";
   var Overlay$1 = vue.defineComponent({
     name: "ElOverlay",
     props: overlayProps,
     emits: overlayEmits,
     setup(props, { slots, emit }) {
-      const ns = useNamespace("overlay");
+      const ns = props.isGlobal ? useGlobalComponentSettings(BLOCK).ns : useNamespace(BLOCK);
       const onMaskClick = (e) => {
         emit("click", e);
       };
@@ -33186,17 +33219,8 @@
     const hoverOption = vue.ref(-1);
     const queryChange = vue.shallowRef({ query: "" });
     const groupQueryChange = vue.shallowRef("");
-    const instance = vue.getCurrentInstance();
     const optionList = vue.ref([]);
     let originClientHeight = 0;
-    vue.onUpdated(() => {
-      var _a, _b;
-      const childrens = (_b = instance == null ? void 0 : (_a = instance.slots).default) == null ? void 0 : _b.call(_a)[0].children;
-      if (childrens && childrens.length) {
-        const options = childrens.filter((item) => item.type.name === "ElOption").map((item) => item.props.label);
-        optionList.value = options;
-      }
-    });
     const { form, formItem } = useFormItem();
     const readonly = vue.computed(() => !props.filterable || props.multiple || !states.visible);
     const selectDisabled = vue.computed(() => props.disabled || (form == null ? void 0 : form.disabled));
@@ -33809,6 +33833,7 @@
       states.mouseEnter = false;
     };
     return {
+      optionList,
       optionsArray,
       selectSize,
       handleResize,
@@ -33860,6 +33885,31 @@
     };
   };
 
+  var ElOptions = vue.defineComponent({
+    name: "ElOptions",
+    emits: ["update-options"],
+    setup(_, { slots, emit }) {
+      return () => {
+        var _a, _b, _c, _d;
+        const children = (_a = slots.default) == null ? void 0 : _a.call(slots);
+        if (children.length) {
+          const options = ((_d = (_c = (_b = children[0]) == null ? void 0 : _b.children) == null ? void 0 : _c[0]) == null ? void 0 : _d.children) || [];
+          if (options && options.length) {
+            const filteredOptions = options.filter((item) => {
+              var _a2;
+              return ((_a2 = (item == null ? void 0 : item.type) || {}) == null ? void 0 : _a2.name) === "ElOption";
+            }).map((item) => {
+              var _a2;
+              return (_a2 = item.props) == null ? void 0 : _a2.label;
+            });
+            emit("update-options", filteredOptions);
+          }
+        }
+        return children;
+      };
+    }
+  });
+
   const COMPONENT_NAME$9 = "ElSelect";
   const _sfc_main$N = vue.defineComponent({
     name: COMPONENT_NAME$9,
@@ -33868,6 +33918,7 @@
       ElInput,
       ElSelectMenu: ElSelectMenu$1,
       ElOption: Option,
+      ElOptions,
       ElTag,
       ElScrollbar,
       ElTooltip,
@@ -33986,6 +34037,7 @@
       const { t } = useLocale();
       const states = useSelectStates(props);
       const {
+        optionList,
         optionsArray,
         selectSize,
         readonly,
@@ -34124,7 +34176,11 @@
         var _a, _b;
         return (_b = (_a = tooltipRef.value) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef;
       });
+      const onOptionsRendered = (v) => {
+        optionList.value = v;
+      };
       return {
+        onOptionsRendered,
         tagInMultiLine,
         prefixWidth,
         selectSize,
@@ -34201,6 +34257,7 @@
     const _component_el_icon = vue.resolveComponent("el-icon");
     const _component_el_input = vue.resolveComponent("el-input");
     const _component_el_option = vue.resolveComponent("el-option");
+    const _component_el_options = vue.resolveComponent("el-options");
     const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
     const _component_el_select_menu = vue.resolveComponent("el-select-menu");
     const _directive_click_outside = vue.resolveDirective("click-outside");
@@ -34479,7 +34536,12 @@
                     value: _ctx.query,
                     created: true
                   }, null, 8, ["value"])) : vue.createCommentVNode("v-if", true),
-                  vue.renderSlot(_ctx.$slots, "default")
+                  vue.createVNode(_component_el_options, { onUpdateOptions: _ctx.onOptionsRendered }, {
+                    default: vue.withCtx(() => [
+                      vue.renderSlot(_ctx.$slots, "default")
+                    ]),
+                    _: 3
+                  }, 8, ["onUpdateOptions"])
                 ]),
                 _: 3
               }, 8, ["wrap-class", "view-class", "class"]), [
@@ -47753,7 +47815,7 @@
       rowIndex
     };
     const Cell = CellComponent(cellProps);
-    const kls = [ns.e("row-cell"), column.align === Alignment.CENTER && ns.is("align-center"), column.align === Alignment.RIGHT && ns.is("align-right")];
+    const kls = [ns.e("row-cell"), column.class, column.align === Alignment.CENTER && ns.is("align-center"), column.align === Alignment.RIGHT && ns.is("align-right")];
     const expandable = rowIndex >= 0 && column.key === expandColumnKey;
     const expanded = rowIndex >= 0 && expandedRowKeys.includes(rowData[rowKey]);
     let IconOrPlaceholder;
@@ -52037,13 +52099,17 @@
     setup(props) {
       const select = vue.inject(selectKey);
       vue.watch(() => props.data, () => {
+        var _a;
         props.data.forEach((item) => {
           if (!select.cachedOptions.has(item.value)) {
             select.cachedOptions.set(item.value, item);
           }
         });
-        select.setSelected();
-      }, { immediate: true, deep: true });
+        const inputs = ((_a = select.selectWrapper) == null ? void 0 : _a.querySelectorAll("input")) || [];
+        if (!Array.from(inputs).includes(document.activeElement)) {
+          select.setSelected();
+        }
+      }, { flush: "post", immediate: true });
       return () => void 0;
     }
   });
@@ -54113,7 +54179,6 @@
 
   function createLoadingComponent(options) {
     let afterLeaveTimer;
-    const ns = useNamespace("loading");
     const afterLeaveFlag = vue.ref(false);
     const data = vue.reactive({
       ...options,
@@ -54126,6 +54191,7 @@
     }
     function destroySelf() {
       const target = data.parent;
+      const ns = vm.ns;
       if (!target.vLoadingAddClassList) {
         let loadingNumber = target.getAttribute("loading-number");
         loadingNumber = Number.parseInt(loadingNumber) - 1;
@@ -54162,9 +54228,15 @@
       target.vLoadingAddClassList = void 0;
       destroySelf();
     }
-    const elLoadingComponent = {
+    const elLoadingComponent = vue.defineComponent({
       name: "ElLoading",
-      setup() {
+      setup(_, { expose }) {
+        const ns = useNamespace("loading");
+        const zIndex = useZIndex();
+        expose({
+          ns,
+          zIndex
+        });
         return () => {
           const svg = data.spinner || data.svg;
           const spinner = vue.h("svg", {
@@ -54204,7 +54276,7 @@
           });
         };
       }
-    };
+    });
     const loadingInstance = vue.createApp(elLoadingComponent);
     const vm = loadingInstance.mount(document.createElement("div"));
     return {
@@ -54277,7 +54349,7 @@
     };
   };
   const addStyle = async (options, parent, instance) => {
-    const { nextZIndex } = useZIndex();
+    const { nextZIndex } = instance.vm.zIndex;
     const maskStyle = {};
     if (options.fullscreen) {
       instance.originalPosition.value = getStyle(document.body, "position");
@@ -54301,7 +54373,7 @@
     }
   };
   const addClassList = (options, parent, instance) => {
-    const ns = useNamespace("loading");
+    const ns = instance.vm.ns;
     if (!["absolute", "fixed", "sticky"].includes(instance.originalPosition.value)) {
       addClass(parent, ns.bm("parent", "relative"));
     } else {
@@ -54503,8 +54575,8 @@
     setup(__props, { expose }) {
       const props = __props;
       const { Close } = TypeComponents;
-      const ns = useNamespace("message");
-      const { currentZIndex, nextZIndex } = useZIndex();
+      const { ns, zIndex } = useGlobalComponentSettings("message");
+      const { currentZIndex, nextZIndex } = zIndex;
       const messageRef = vue.ref();
       const visible = vue.ref(false);
       const height = vue.ref(0);
@@ -54793,10 +54865,15 @@
     },
     emits: ["vanish", "action"],
     setup(props, { emit }) {
-      const { t } = useLocale();
-      const ns = useNamespace("message-box");
+      const {
+        locale,
+        zIndex,
+        ns,
+        size: btnSize
+      } = useGlobalComponentSettings("message-box", vue.computed(() => props.buttonSize));
+      const { t } = locale;
+      const { nextZIndex } = zIndex;
       const visible = vue.ref(false);
-      const { nextZIndex } = useZIndex();
       const state = vue.reactive({
         autofocus: true,
         beforeClose: null,
@@ -54838,7 +54915,6 @@
       });
       const contentId = useId();
       const inputId = useId();
-      const btnSize = useFormSize(vue.computed(() => props.buttonSize), { prop: true, form: true, formItem: true });
       const iconComponent = vue.computed(() => state.icon || TypeComponentsMap[state.type] || "");
       const hasMessage = vue.computed(() => !!state.message);
       const rootRef = vue.ref();
@@ -54969,7 +55045,7 @@
         }
       };
       if (props.lockScroll) {
-        useLockscreen(visible);
+        useLockscreen(visible, { ns });
       }
       useRestoreActive(visible);
       return {
@@ -55018,7 +55094,8 @@
         vue.withDirectives(vue.createVNode(_component_el_overlay, {
           "z-index": _ctx.zIndex,
           "overlay-class": [_ctx.ns.is("message-box"), _ctx.modalClass],
-          mask: _ctx.modal
+          mask: _ctx.modal,
+          "is-global": ""
         }, {
           default: vue.withCtx(() => [
             vue.createElementVNode("div", {
@@ -55420,7 +55497,8 @@
     emits: notificationEmits,
     setup(__props, { expose }) {
       const props = __props;
-      const ns = useNamespace("notification");
+      const { ns, zIndex } = useGlobalComponentSettings("notification");
+      const { nextZIndex, currentZIndex } = zIndex;
       const { Close } = CloseComponents;
       const visible = vue.ref(false);
       let timer = void 0;
@@ -55438,7 +55516,7 @@
       const positionStyle = vue.computed(() => {
         return {
           [verticalProperty.value]: `${props.offset}px`,
-          zIndex: props.zIndex
+          zIndex: currentZIndex.value
         };
       });
       function startTimer() {
@@ -55468,6 +55546,7 @@
       }
       vue.onMounted(() => {
         startTimer();
+        nextZIndex();
         visible.value = true;
       });
       useEventListener(document, "keydown", onKeydown);
@@ -55564,11 +55643,9 @@
       verticalOffset += (((_a = vm2.el) == null ? void 0 : _a.offsetHeight) || 0) + GAP_SIZE;
     });
     verticalOffset += GAP_SIZE;
-    const { nextZIndex } = useZIndex();
     const id = `notification_${seed++}`;
     const userOnClose = options.onClose;
     const props = {
-      zIndex: nextZIndex(),
       ...options,
       offset: verticalOffset,
       id,
@@ -55884,6 +55961,7 @@
   exports.datePickTypes = datePickTypes;
   exports.dayjs = dayjs;
   exports["default"] = installer;
+  exports.defaultInitialZIndex = defaultInitialZIndex;
   exports.defaultNamespace = defaultNamespace;
   exports.descriptionProps = descriptionProps;
   exports.dialogEmits = dialogEmits;
@@ -56040,6 +56118,7 @@
   exports.useForwardRef = useForwardRef;
   exports.useForwardRefDirective = useForwardRefDirective;
   exports.useGetDerivedNamespace = useGetDerivedNamespace;
+  exports.useGlobalComponentSettings = useGlobalComponentSettings;
   exports.useGlobalConfig = useGlobalConfig;
   exports.useGlobalSize = useGlobalSize;
   exports.useId = useId;