element-plus 2.7.6 → 2.7.7

package/dist/index.full.js

@@ -1,4 +1,4 @@
-/*! Element Plus v2.7.6 */
+/*! Element Plus v2.7.7 */
 
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
@@ -11320,6 +11320,7 @@
     };
   }
 
+  const emptyValuesContextKey = Symbol("emptyValuesContextKey");
   const SCOPE$3 = "use-empty-values";
   const DEFAULT_EMPTY_VALUES = ["", void 0, null];
   const DEFAULT_VALUE_ON_CLEAR = void 0;
@@ -11332,10 +11333,7 @@
     }
   });
   const useEmptyValues = (props, defaultValue) => {
-    let config = useGlobalConfig();
-    if (!config.value) {
-      config = vue.ref({});
-    }
+    const config = vue.getCurrentInstance() ? vue.inject(emptyValuesContextKey, vue.ref({})) : vue.ref({});
     const emptyValues = vue.computed(() => props.emptyValues || config.value.emptyValues || DEFAULT_EMPTY_VALUES);
     const valueOnClear = vue.computed(() => {
       if (isFunction$1(props.valueOnClear)) {
@@ -11433,6 +11431,10 @@
     provideFn(SIZE_INJECTION_KEY, {
       size: vue.computed(() => context.value.size || "")
     });
+    provideFn(emptyValuesContextKey, vue.computed(() => ({
+      emptyValues: context.value.emptyValues,
+      valueOnClear: context.value.valueOnClear
+    })));
     if (global || !globalConfig.value) {
       globalConfig.value = context.value;
     }
@@ -11492,7 +11494,7 @@
 
   const ElConfigProvider = withInstall(ConfigProvider);
 
-  const version$1 = "2.7.6";
+  const version$1 = "2.7.7";
 
   const makeInstaller = (components = []) => {
     const install = (app, options) => {
@@ -13183,6 +13185,11 @@
       type: [String, Number],
       default: ""
     },
+    labelPosition: {
+      type: String,
+      values: ["left", "right", "top", ""],
+      default: ""
+    },
     prop: {
       type: definePropType([String, Array])
     },
@@ -13280,7 +13287,8 @@
           const style = {};
           if (hasLabel && autoLabelWidth && autoLabelWidth !== "auto") {
             const marginWidth = Math.max(0, Number.parseInt(autoLabelWidth, 10) - computedWidth.value);
-            const marginPosition = formContext.labelPosition === "left" ? "marginRight" : "marginLeft";
+            const labelPosition = formItemContext.labelPosition || formContext.labelPosition;
+            const marginPosition = labelPosition === "left" ? "marginRight" : "marginLeft";
             if (marginWidth) {
               style[marginPosition] = `${marginWidth}px`;
             }
@@ -13321,8 +13329,9 @@
       const formItemRef = vue.ref();
       let initialValue = void 0;
       let isResettingField = false;
+      const labelPosition = vue.computed(() => props.labelPosition || (formContext == null ? void 0 : formContext.labelPosition));
       const labelStyle = vue.computed(() => {
-        if ((formContext == null ? void 0 : formContext.labelPosition) === "top") {
+        if (labelPosition.value === "top") {
           return {};
         }
         const labelWidth = addUnit(props.labelWidth || (formContext == null ? void 0 : formContext.labelWidth) || "");
@@ -13331,7 +13340,7 @@
         return {};
       });
       const contentStyle = vue.computed(() => {
-        if ((formContext == null ? void 0 : formContext.labelPosition) === "top" || (formContext == null ? void 0 : formContext.inline)) {
+        if (labelPosition.value === "top" || (formContext == null ? void 0 : formContext.inline)) {
           return {};
         }
         if (!props.label && !props.labelWidth && isNested) {
@@ -13352,7 +13361,10 @@
         ns.is("required", isRequired.value || props.required),
         ns.is("no-asterisk", formContext == null ? void 0 : formContext.hideRequiredAsterisk),
         (formContext == null ? void 0 : formContext.requireAsteriskPosition) === "right" ? "asterisk-right" : "asterisk-left",
-        { [ns.m("feedback")]: formContext == null ? void 0 : formContext.statusIcon }
+        {
+          [ns.m("feedback")]: formContext == null ? void 0 : formContext.statusIcon,
+          [ns.m(`label-${labelPosition.value}`)]: labelPosition.value
+        }
       ]);
       const _inlineMessage = vue.computed(() => isBoolean(props.inlineMessage) ? props.inlineMessage : (formContext == null ? void 0 : formContext.inlineMessage) || false);
       const validateClasses = vue.computed(() => [
@@ -18093,8 +18105,12 @@
     const ns = useNamespace("button");
     return vue.computed(() => {
       let styles = {};
-      const buttonColor = props.color;
+      let buttonColor = props.color;
       if (buttonColor) {
+        const match = buttonColor.match(/var\((.*?)\)/);
+        if (match) {
+          buttonColor = window.getComputedStyle(window.document.documentElement).getPropertyValue(match[1]);
+        }
         const color = new TinyColor(buttonColor);
         const activeBgColor = props.dark ? color.tint(20).toString() : darken(color, 20);
         if (props.plain) {
@@ -18796,6 +18812,7 @@
       "change",
       "focus",
       "blur",
+      "clear",
       "calendar-change",
       "panel-change",
       "visible-change",
@@ -19035,6 +19052,7 @@
           pickerVisible.value = false;
           pickerOptions.value.handleClear && pickerOptions.value.handleClear();
         }
+        emit("clear");
       };
       const valueIsEmpty = vue.computed(() => {
         const { modelValue } = props;
@@ -21229,6 +21247,8 @@
         activeIndex.value = activeIndex.value + 1;
       } else if (props.loop) {
         activeIndex.value = 0;
+      } else {
+        isTransitioning.value = false;
       }
     };
     function setActiveItem(index) {
@@ -23778,6 +23798,7 @@
     [CHANGE_EVENT]: (_) => true,
     focus: (evt) => evt instanceof FocusEvent,
     blur: (evt) => evt instanceof FocusEvent,
+    clear: () => true,
     visibleChange: (val) => isBoolean(val),
     expandChange: (val) => !!val,
     removeTag: (val) => !!val
@@ -24069,6 +24090,7 @@
           syncPresentTextValue();
         }
         togglePopperVisible(false);
+        emit("clear");
       };
       const syncPresentTextValue = () => {
         const { value } = presentText;
@@ -32279,6 +32301,7 @@
               "min-scale": _ctx.minScale,
               "max-scale": _ctx.maxScale,
               "url-list": _ctx.previewSrcList,
+              crossorigin: _ctx.crossorigin,
               "hide-on-click-modal": _ctx.hideOnClickModal,
               teleported: _ctx.previewTeleported,
               "close-on-press-escape": _ctx.closeOnPressEscape,
@@ -32291,7 +32314,7 @@
                 ])) : vue.createCommentVNode("v-if", true)
               ]),
               _: 3
-            }, 8, ["z-index", "initial-index", "infinite", "zoom-rate", "min-scale", "max-scale", "url-list", "hide-on-click-modal", "teleported", "close-on-press-escape"])) : vue.createCommentVNode("v-if", true)
+            }, 8, ["z-index", "initial-index", "infinite", "zoom-rate", "min-scale", "max-scale", "url-list", "crossorigin", "hide-on-click-modal", "teleported", "close-on-press-escape"])) : vue.createCommentVNode("v-if", true)
           ], 64)) : vue.createCommentVNode("v-if", true)
         ], 6);
       };
@@ -34948,6 +34971,7 @@
       default: arrow_down_default
     },
     tagType: { ...tagProps.type, default: "info" },
+    tagEffect: { ...tagProps.effect, default: "light" },
     validateEvent: {
       type: Boolean,
       default: true
@@ -35082,6 +35106,7 @@
                         closable: !_ctx.selectDisabled && !item.isDisabled,
                         size: _ctx.collapseTagSize,
                         type: _ctx.tagType,
+                        effect: _ctx.tagEffect,
                         "disable-transitions": "",
                         style: vue.normalizeStyle(_ctx.tagStyle),
                         onClose: ($event) => _ctx.deleteTag($event, item)
@@ -35099,7 +35124,7 @@
                           ], 2)
                         ]),
                         _: 2
-                      }, 1032, ["closable", "size", "type", "style", "onClose"])
+                      }, 1032, ["closable", "size", "type", "effect", "style", "onClose"])
                     ], 2);
                   }), 128)),
                   _ctx.collapseTags && _ctx.states.selected.length > _ctx.maxCollapseTags ? (vue.openBlock(), vue.createBlock(_component_el_tooltip, {
@@ -35120,6 +35145,7 @@
                           closable: false,
                           size: _ctx.collapseTagSize,
                           type: _ctx.tagType,
+                          effect: _ctx.tagEffect,
                           "disable-transitions": "",
                           style: vue.normalizeStyle(_ctx.collapseTagStyle)
                         }, {
@@ -35129,7 +35155,7 @@
                             }, " + " + vue.toDisplayString(_ctx.states.selected.length - _ctx.maxCollapseTags), 3)
                           ]),
                           _: 1
-                        }, 8, ["size", "type", "style"])
+                        }, 8, ["size", "type", "effect", "style"])
                       ], 2)
                     ]),
                     content: vue.withCtx(() => [
@@ -35147,6 +35173,7 @@
                               closable: !_ctx.selectDisabled && !item.isDisabled,
                               size: _ctx.collapseTagSize,
                               type: _ctx.tagType,
+                              effect: _ctx.tagEffect,
                               "disable-transitions": "",
                               onClose: ($event) => _ctx.deleteTag($event, item)
                             }, {
@@ -35163,7 +35190,7 @@
                                 ], 2)
                               ]),
                               _: 2
-                            }, 1032, ["closable", "size", "type", "onClose"])
+                            }, 1032, ["closable", "size", "type", "effect", "onClose"])
                           ], 2);
                         }), 128))
                       ], 2)
@@ -35901,7 +35928,10 @@
       const { t } = useLocale();
       const ns = useNamespace("pagination");
       const vnodeProps = vue.getCurrentInstance().vnode.props || {};
-      const _size = vue.computed(() => props.small ? "small" : props == null ? void 0 : props.size);
+      const _size = vue.computed(() => {
+        var _a;
+        return props.small ? "small" : (_a = props.size) != null ? _a : useGlobalSize().value;
+      });
       useDeprecated({
         from: "small",
         replacement: "size",
@@ -39100,6 +39130,7 @@
       default: ["bottom-start", "top-start", "right", "left"]
     },
     tagType: { ...tagProps.type, default: "info" },
+    tagEffect: { ...tagProps.effect, default: "light" },
     ...useEmptyValuesProps,
     ...useAriaProps(["ariaLabel"])
   });
@@ -40252,6 +40283,7 @@
                       closable: !_ctx.selectDisabled && !_ctx.getDisabled(item),
                       size: _ctx.collapseTagSize,
                       type: _ctx.tagType,
+                      effect: _ctx.tagEffect,
                       "disable-transitions": "",
                       style: vue.normalizeStyle(_ctx.tagStyle),
                       onClose: ($event) => _ctx.deleteTag($event, item)
@@ -40269,7 +40301,7 @@
                         ], 2)
                       ]),
                       _: 2
-                    }, 1032, ["closable", "size", "type", "style", "onClose"])
+                    }, 1032, ["closable", "size", "type", "effect", "style", "onClose"])
                   ], 2);
                 }), 128)),
                 _ctx.collapseTags && _ctx.modelValue.length > _ctx.maxCollapseTags ? (vue.openBlock(), vue.createBlock(_component_el_tooltip, {
@@ -40290,6 +40322,7 @@
                         closable: false,
                         size: _ctx.collapseTagSize,
                         type: _ctx.tagType,
+                        effect: _ctx.tagEffect,
                         style: vue.normalizeStyle(_ctx.collapseTagStyle),
                         "disable-transitions": ""
                       }, {
@@ -40299,7 +40332,7 @@
                           }, " + " + vue.toDisplayString(_ctx.modelValue.length - _ctx.maxCollapseTags), 3)
                         ]),
                         _: 1
-                      }, 8, ["size", "type", "style"])
+                      }, 8, ["size", "type", "effect", "style"])
                     ], 2)
                   ]),
                   content: vue.withCtx(() => [
@@ -40317,6 +40350,7 @@
                             closable: !_ctx.selectDisabled && !_ctx.getDisabled(selected),
                             size: _ctx.collapseTagSize,
                             type: _ctx.tagType,
+                            effect: _ctx.tagEffect,
                             "disable-transitions": "",
                             onClose: ($event) => _ctx.deleteTag($event, selected)
                           }, {
@@ -40333,7 +40367,7 @@
                               ], 2)
                             ]),
                             _: 2
-                          }, 1032, ["closable", "size", "type", "onClose"])
+                          }, 1032, ["closable", "size", "type", "effect", "onClose"])
                         ], 2);
                       }), 128))
                     ], 2)
@@ -49891,7 +49925,7 @@
   const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
     ...__default__$p,
     props: timeSelectProps,
-    emits: ["change", "blur", "focus", "update:modelValue"],
+    emits: ["change", "blur", "focus", "clear", "update:modelValue"],
     setup(__props, { expose }) {
       const props = __props;
       dayjs.extend(customParseFormat);
@@ -49967,7 +50001,8 @@
           "onUpdate:modelValue": _cache[0] || (_cache[0] = (event) => _ctx.$emit("update:modelValue", event)),
           onChange: _cache[1] || (_cache[1] = (event) => _ctx.$emit("change", event)),
           onBlur: _cache[2] || (_cache[2] = (event) => _ctx.$emit("blur", event)),
-          onFocus: _cache[3] || (_cache[3] = (event) => _ctx.$emit("focus", event))
+          onFocus: _cache[3] || (_cache[3] = (event) => _ctx.$emit("focus", event)),
+          onClear: _cache[4] || (_cache[4] = () => _ctx.$emit("clear"))
         }, {
           prefix: vue.withCtx(() => [
             _ctx.prefixIcon ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), {
@@ -52934,6 +52969,11 @@
           result.select.onOptionCreate(vm);
         }
       });
+      vue.watch(() => ctx.attrs.visible, (val) => {
+        result.states.visible = val;
+      }, {
+        immediate: true
+      });
       return result;
     },
     methods: {
@@ -53045,7 +53085,8 @@
         return h(TreeSelectOption, {
           value: getNodeValByProp("value", data),
           label: getNodeValByProp("label", data),
-          disabled: getNodeValByProp("disabled", data)
+          disabled: getNodeValByProp("disabled", data),
+          visible: node.visible
         }, props.renderContent ? () => props.renderContent(h, { node, data, store }) : slots.default ? () => slots.default({ node, data, store }) : void 0);
       },
       filterNodeMethod: (value, data, node) => {
@@ -53127,7 +53168,7 @@
           }
         });
         const inputs = ((_a = select.selectRef) == null ? void 0 : _a.querySelectorAll("input")) || [];
-        if (!Array.from(inputs).includes(document.activeElement)) {
+        if (isClient && !Array.from(inputs).includes(document.activeElement)) {
           select.setSelected();
         }
       }, { flush: "post", immediate: true });
@@ -57637,6 +57678,8 @@
         action: "",
         confirmButtonLoading: false,
         cancelButtonLoading: false,
+        confirmButtonLoadingIcon: loading_default,
+        cancelButtonLoadingIcon: loading_default,
         confirmButtonDisabled: false,
         editorErrorMessage: "",
         validateError: false,
@@ -57965,6 +58008,7 @@
                       _ctx.showCancelButton ? (vue.openBlock(), vue.createBlock(_component_el_button, {
                         key: 0,
                         loading: _ctx.cancelButtonLoading,
+                        "loading-icon": _ctx.cancelButtonLoadingIcon,
                         class: vue.normalizeClass([_ctx.cancelButtonClass]),
                         round: _ctx.roundButton,
                         size: _ctx.btnSize,
@@ -57975,11 +58019,12 @@
                           vue.createTextVNode(vue.toDisplayString(_ctx.cancelButtonText || _ctx.t("el.messagebox.cancel")), 1)
                         ]),
                         _: 1
-                      }, 8, ["loading", "class", "round", "size"])) : vue.createCommentVNode("v-if", true),
+                      }, 8, ["loading", "loading-icon", "class", "round", "size"])) : vue.createCommentVNode("v-if", true),
                       vue.withDirectives(vue.createVNode(_component_el_button, {
                         ref: "confirmRef",
                         type: "primary",
                         loading: _ctx.confirmButtonLoading,
+                        "loading-icon": _ctx.confirmButtonLoadingIcon,
                         class: vue.normalizeClass([_ctx.confirmButtonClasses]),
                         round: _ctx.roundButton,
                         disabled: _ctx.confirmButtonDisabled,
@@ -57991,7 +58036,7 @@
                           vue.createTextVNode(vue.toDisplayString(_ctx.confirmButtonText || _ctx.t("el.messagebox.confirm")), 1)
                         ]),
                         _: 1
-                      }, 8, ["loading", "class", "round", "disabled", "size"]), [
+                      }, 8, ["loading", "loading-icon", "class", "round", "disabled", "size"]), [
                         [vue.vShow, _ctx.showConfirmButton]
                       ])
                     ], 2)
@@ -58722,6 +58767,7 @@
   exports.elPaginationKey = elPaginationKey;
   exports.emitChangeFn = emitChangeFn;
   exports.emptyProps = emptyProps;
+  exports.emptyValuesContextKey = emptyValuesContextKey;
   exports.extractDateFormat = extractDateFormat;
   exports.extractTimeFormat = extractTimeFormat;
   exports.formContextKey = formContextKey;