element-plus 2.4.1 → 2.4.2

package/dist/index.full.mjs

@@ -1,4 +1,4 @@
-/*! Element Plus v2.4.1 */
+/*! Element Plus v2.4.2 */
 
 import { getCurrentScope, onScopeDispose, unref, readonly, shallowRef, watchEffect, ref, watch, getCurrentInstance, onMounted, nextTick, computed as computed$1, openBlock, createElementBlock, createElementVNode, warn, isVNode, Fragment, Comment, onBeforeUnmount, isRef, inject, onUnmounted, h as h$1, Teleport, onBeforeMount, provide, defineComponent, renderSlot, normalizeClass, normalizeStyle, mergeProps, useSlots, createBlock, Transition, withCtx, withDirectives, resolveDynamicComponent, createCommentVNode, createTextVNode, toDisplayString, createVNode, vShow, toRef, reactive, toRefs, onUpdated, TransitionGroup, useAttrs as useAttrs$1, withModifiers, cloneVNode, Text as Text$1, onDeactivated, renderList, withKeys, createSlots, normalizeProps, toRaw as toRaw$1, vModelCheckbox, vModelRadio, resolveComponent, onBeforeUpdate, vModelText, toHandlers, guardReactiveProps, markRaw, effectScope, triggerRef, resolveDirective, createApp, shallowReactive, render } from 'vue';
 
@@ -8846,7 +8846,9 @@ const useDraggable = (targetRef, dragRef, draggable) => {
         offsetX: moveX,
         offsetY: moveY
       };
-      targetRef.value.style.transform = `translate(${addUnit(moveX)}, ${addUnit(moveY)})`;
+      if (targetRef.value) {
+        targetRef.value.style.transform = `translate(${addUnit(moveX)}, ${addUnit(moveY)})`;
+      }
     };
     const onMouseup = () => {
       document.removeEventListener("mousemove", onMousemove);
@@ -11287,7 +11289,7 @@ const ConfigProvider = defineComponent({
 
 const ElConfigProvider = withInstall(ConfigProvider);
 
-const version$1 = "2.4.1";
+const version$1 = "2.4.2";
 
 const makeInstaller = (components = []) => {
   const install = (app, options) => {
@@ -29248,6 +29250,7 @@ const dialogEmits = {
 };
 
 const useDialog = (props, targetRef) => {
+  var _a;
   const instance = getCurrentInstance();
   const emit = instance.emit;
   const { nextZIndex } = useZIndex();
@@ -29257,7 +29260,7 @@ const useDialog = (props, targetRef) => {
   const visible = ref(false);
   const closed = ref(false);
   const rendered = ref(false);
-  const zIndex = ref(props.zIndex || nextZIndex());
+  const zIndex = ref((_a = props.zIndex) != null ? _a : nextZIndex());
   let openTimer = void 0;
   let closeTimer = void 0;
   const namespace = useGlobalConfig("namespace", defaultNamespace);
@@ -29344,8 +29347,8 @@ const useDialog = (props, targetRef) => {
     emit("closeAutoFocus");
   }
   function onFocusoutPrevented(event) {
-    var _a;
-    if (((_a = event.detail) == null ? void 0 : _a.focusReason) === "pointer") {
+    var _a2;
+    if (((_a2 = event.detail) == null ? void 0 : _a2.focusReason) === "pointer") {
       event.preventDefault();
     }
   }
@@ -29362,7 +29365,7 @@ const useDialog = (props, targetRef) => {
       closed.value = false;
       open();
       rendered.value = true;
-      zIndex.value = props.zIndex ? zIndex.value++ : nextZIndex();
+      zIndex.value = isUndefined$1(props.zIndex) ? nextZIndex() : zIndex.value++;
       nextTick(() => {
         emit("open");
         if (targetRef.value) {
@@ -36747,16 +36750,20 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
                     [vShow, !(item <= currentValue.value)]
                   ])
                 ], 64)) : createCommentVNode("v-if", true),
-                showDecimalIcon(item) ? (openBlock(), createBlock(unref(ElIcon), {
-                  key: 1,
-                  style: normalizeStyle(unref(decimalStyle)),
-                  class: normalizeClass([unref(ns).e("icon"), unref(ns).e("decimal")])
-                }, {
-                  default: withCtx(() => [
-                    (openBlock(), createBlock(resolveDynamicComponent(unref(decimalIconComponent))))
-                  ]),
-                  _: 1
-                }, 8, ["style", "class"])) : createCommentVNode("v-if", true)
+                showDecimalIcon(item) ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                  (openBlock(), createBlock(resolveDynamicComponent(unref(voidComponent)), {
+                    class: normalizeClass([unref(ns).em("decimal", "box")])
+                  }, null, 8, ["class"])),
+                  createVNode(unref(ElIcon), {
+                    style: normalizeStyle(unref(decimalStyle)),
+                    class: normalizeClass([unref(ns).e("icon"), unref(ns).e("decimal")])
+                  }, {
+                    default: withCtx(() => [
+                      (openBlock(), createBlock(resolveDynamicComponent(unref(decimalIconComponent))))
+                    ]),
+                    _: 1
+                  }, 8, ["style", "class"])
+                ], 64)) : createCommentVNode("v-if", true)
               ]),
               _: 2
             }, 1032, ["class"])
@@ -38715,20 +38722,41 @@ function useOption(props, { emit }) {
   };
 }
 
-const SelectProps = {
+const defaultProps$4 = {
+  label: "label",
+  value: "value",
+  disabled: "disabled",
+  options: "options"
+};
+function useProps(props) {
+  const aliasProps = computed$1(() => ({ ...defaultProps$4, ...props.props }));
+  const getLabel = (option) => get(option, aliasProps.value.label);
+  const getValue = (option) => get(option, aliasProps.value.value);
+  const getDisabled = (option) => get(option, aliasProps.value.disabled);
+  const getOptions = (option) => get(option, aliasProps.value.options);
+  return {
+    aliasProps,
+    getLabel,
+    getValue,
+    getDisabled,
+    getOptions
+  };
+}
+
+const SelectProps = buildProps({
   allowCreate: Boolean,
   autocomplete: {
-    type: String,
+    type: definePropType(String),
     default: "none"
   },
   automaticDropdown: Boolean,
   clearable: Boolean,
   clearIcon: {
-    type: [String, Object],
+    type: iconPropType,
     default: circle_close_default
   },
   effect: {
-    type: String,
+    type: definePropType(String),
     default: "light"
   },
   collapseTags: Boolean,
@@ -38760,7 +38788,9 @@ const SelectProps = {
   loading: Boolean,
   loadingText: String,
   label: String,
-  modelValue: [Array, String, Number, Boolean, Object],
+  modelValue: {
+    type: definePropType([Array, String, Number, Boolean, Object])
+  },
   multiple: Boolean,
   multipleLimit: {
     type: Number,
@@ -38775,7 +38805,7 @@ const SelectProps = {
     default: true
   },
   options: {
-    type: Array,
+    type: definePropType(Array),
     required: true
   },
   placeholder: {
@@ -38791,13 +38821,14 @@ const SelectProps = {
     default: ""
   },
   popperOptions: {
-    type: Object,
+    type: definePropType(Object),
     default: () => ({})
   },
   remote: Boolean,
-  size: {
-    type: String,
-    validator: isValidComponentSize
+  size: useSizeProp,
+  props: {
+    type: definePropType(Object),
+    default: () => defaultProps$4
   },
   valueKey: {
     type: String,
@@ -38816,28 +38847,36 @@ const SelectProps = {
     values: Ee,
     default: "bottom-start"
   }
-};
-const OptionProps = {
+});
+const OptionProps = buildProps({
   data: Array,
   disabled: Boolean,
   hovering: Boolean,
-  item: Object,
+  item: {
+    type: definePropType(Object),
+    required: true
+  },
   index: Number,
   style: Object,
   selected: Boolean,
   created: Boolean
-};
+});
+
+const selectV2InjectionKey = Symbol("ElSelectV2Injection");
 
 const _sfc_main$D = defineComponent({
   props: OptionProps,
   emits: ["select", "hover"],
   setup(props, { emit }) {
+    const select = inject(selectV2InjectionKey);
     const ns = useNamespace("select");
     const { hoverItem, selectOptionClick } = useOption(props, { emit });
+    const { getLabel } = useProps(select.props);
     return {
       ns,
       hoverItem,
-      selectOptionClick
+      selectOptionClick,
+      getLabel
     };
   }
 });
@@ -38861,14 +38900,12 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
       index: _ctx.index,
       disabled: _ctx.disabled
     }, () => [
-      createElementVNode("span", null, toDisplayString(_ctx.item.label), 1)
+      createElementVNode("span", null, toDisplayString(_ctx.getLabel(_ctx.item)), 1)
     ])
   ], 46, _hoisted_1$h);
 }
 var OptionItem = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["render", _sfc_render$6], ["__file", "option-item.vue"]]);
 
-const selectV2InjectionKey = Symbol("ElSelectV2Injection");
-
 var ElSelectMenu = defineComponent({
   name: "ElSelectDropdown",
   props: {
@@ -38885,6 +38922,11 @@ var ElSelectMenu = defineComponent({
   }) {
     const select = inject(selectV2InjectionKey);
     const ns = useNamespace("select");
+    const {
+      getLabel,
+      getValue,
+      getDisabled
+    } = useProps(select.props);
     const cachedHeights = ref([]);
     const listRef = ref();
     const size = computed$1(() => props.data.length);
@@ -38929,9 +38971,9 @@ var ElSelectMenu = defineComponent({
     };
     const isItemSelected = (modelValue, target) => {
       if (select.props.multiple) {
-        return contains(modelValue, target.value);
+        return contains(modelValue, getValue(target));
       }
-      return isEqual(modelValue, target.value);
+      return isEqual(modelValue, getValue(target));
     };
     const isItemDisabled = (modelValue, selected) => {
       const {
@@ -38994,7 +39036,7 @@ var ElSelectMenu = defineComponent({
       const isHovering = isItemHovering(index);
       return createVNode(OptionItem, mergeProps(itemProps, {
         "selected": isSelected,
-        "disabled": item.disabled || isDisabled,
+        "disabled": getDisabled(item) || isDisabled,
         "created": !!item.created,
         "hovering": isHovering,
         "item": item,
@@ -39003,7 +39045,7 @@ var ElSelectMenu = defineComponent({
       }), {
         default: (props2) => {
           var _a;
-          return ((_a = slots.default) == null ? void 0 : _a.call(slots, props2)) || createVNode("span", null, [item.label]);
+          return ((_a = slots.default) == null ? void 0 : _a.call(slots, props2)) || createVNode("span", null, [getLabel(item)]);
         }
       });
     };
@@ -39095,13 +39137,14 @@ var ElSelectMenu = defineComponent({
 });
 
 function useAllowCreate(props, states) {
+  const { aliasProps, getLabel, getValue } = useProps(props);
   const createOptionCount = ref(0);
   const cachedSelectedOption = ref(null);
   const enableAllowCreateMode = computed$1(() => {
     return props.allowCreate && props.filterable;
   });
   function hasExistingOption(query) {
-    const hasValue = (option) => option.value === query;
+    const hasValue = (option) => getValue(option) === query;
     return props.options && props.options.some(hasValue) || states.createdOptions.some(hasValue);
   }
   function selectNewOption(option) {
@@ -39118,10 +39161,10 @@ function useAllowCreate(props, states) {
     if (enableAllowCreateMode.value) {
       if (query && query.length > 0 && !hasExistingOption(query)) {
         const newOption = {
-          value: query,
-          label: query,
+          [aliasProps.value.value]: query,
+          [aliasProps.value.label]: query,
           created: true,
-          disabled: false
+          [aliasProps.value.disabled]: false
         };
         if (states.createdOptions.length >= createOptionCount.value) {
           states.createdOptions[createOptionCount.value] = newOption;
@@ -39142,10 +39185,10 @@ function useAllowCreate(props, states) {
     }
   }
   function removeNewOption(option) {
-    if (!enableAllowCreateMode.value || !option || !option.created || option.created && props.reserveKeyword && states.inputValue === option.label) {
+    if (!enableAllowCreateMode.value || !option || !option.created || option.created && props.reserveKeyword && states.inputValue === getLabel(option)) {
       return;
     }
-    const idx = states.createdOptions.findIndex((it) => it.value === option.value);
+    const idx = states.createdOptions.findIndex((it) => getValue(it) === getValue(option));
     if (~idx) {
       states.createdOptions.splice(idx, 1);
       createOptionCount.value--;
@@ -39165,28 +39208,6 @@ function useAllowCreate(props, states) {
   };
 }
 
-const flattenOptions = (options) => {
-  const flattened = [];
-  options.forEach((option) => {
-    if (isArray$1(option.options)) {
-      flattened.push({
-        label: option.label,
-        isTitle: true,
-        type: "Group"
-      });
-      option.options.forEach((o) => {
-        flattened.push(o);
-      });
-      flattened.push({
-        type: "Group"
-      });
-    } else {
-      flattened.push(option);
-    }
-  });
-  return flattened;
-};
-
 function useInput(handleInput) {
   const isComposing = ref(false);
   const handleCompositionStart = () => {
@@ -39224,6 +39245,7 @@ const useSelect$1 = (props, emit) => {
   const nsSelectV2 = useNamespace("select-v2");
   const nsInput = useNamespace("input");
   const { form: elForm, formItem: elFormItem } = useFormItem();
+  const { getLabel, getValue, getDisabled, getOptions } = useProps(props);
   const states = reactive({
     inputValue: DEFAULT_INPUT_PLACEHOLDER,
     displayInputValue: DEFAULT_INPUT_PLACEHOLDER,
@@ -39297,37 +39319,37 @@ const useSelect$1 = (props, emit) => {
     const isValidOption = (o) => {
       const query = states.inputValue;
       const regexp = new RegExp(escapeStringRegexp(query), "i");
-      const containsQueryString = query ? regexp.test(o.label || "") : true;
+      const containsQueryString = query ? regexp.test(getLabel(o) || "") : true;
       return containsQueryString;
     };
     if (props.loading) {
       return [];
     }
-    return flattenOptions(props.options.concat(states.createdOptions).map((v) => {
-      if (isArray$1(v.options)) {
-        const filtered = v.options.filter(isValidOption);
+    return [...props.options, ...states.createdOptions].reduce((all, item) => {
+      const options = getOptions(item);
+      if (isArray$1(options)) {
+        const filtered = options.filter(isValidOption);
         if (filtered.length > 0) {
-          return {
-            ...v,
-            options: filtered
-          };
-        }
-      } else {
-        if (props.remote || isValidOption(v)) {
-          return v;
+          all.push({
+            label: getLabel(item),
+            isTitle: true,
+            type: "Group"
+          }, ...filtered, { type: "Group" });
         }
+      } else if (props.remote || isValidOption(item)) {
+        all.push(item);
       }
-      return null;
-    }).filter((v) => v !== null));
+      return all;
+    }, []);
   });
   const filteredOptionsValueMap = computed$1(() => {
     const valueMap = /* @__PURE__ */ new Map();
     filteredOptions.value.forEach((option, index) => {
-      valueMap.set(getValueKey(option.value), { option, index });
+      valueMap.set(getValueKey(getValue(option)), { option, index });
     });
     return valueMap;
   });
-  const optionsAllDisabled = computed$1(() => filteredOptions.value.every((option) => option.disabled));
+  const optionsAllDisabled = computed$1(() => filteredOptions.value.every((option) => getDisabled(option)));
   const selectSize = useFormSize();
   const collapseTagSize = computed$1(() => selectSize.value === "small" ? "small" : "default");
   const tagMaxWidth = computed$1(() => {
@@ -39443,7 +39465,7 @@ const useSelect$1 = (props, emit) => {
   const update = (val) => {
     emit(UPDATE_MODEL_EVENT, val);
     emitChange(val);
-    states.previousValue = val == null ? void 0 : val.toString();
+    states.previousValue = String(val);
   };
   const getValueIndex = (arr = [], value) => {
     if (!isObject$1(value)) {
@@ -39463,9 +39485,6 @@ const useSelect$1 = (props, emit) => {
   const getValueKey = (item) => {
     return isObject$1(item) ? get(item, props.valueKey) : item;
   };
-  const getLabel = (item) => {
-    return isObject$1(item) ? item.label : item;
-  };
   const resetInputHeight = () => {
     return nextTick(() => {
       var _a, _b;
@@ -39497,7 +39516,7 @@ const useSelect$1 = (props, emit) => {
     var _a, _b;
     if (props.multiple) {
       let selectedOptions = props.modelValue.slice();
-      const index = getValueIndex(selectedOptions, option.value);
+      const index = getValueIndex(selectedOptions, getValue(option));
       if (index > -1) {
         selectedOptions = [
           ...selectedOptions.slice(0, index),
@@ -39506,7 +39525,7 @@ const useSelect$1 = (props, emit) => {
         states.cachedOptions.splice(index, 1);
         removeNewOption(option);
       } else if (props.multipleLimit <= 0 || selectedOptions.length < props.multipleLimit) {
-        selectedOptions = [...selectedOptions, option.value];
+        selectedOptions = [...selectedOptions, getValue(option)];
         states.cachedOptions.push(option);
         selectNewOption(option);
         updateHoveringIndex(idx);
@@ -39528,8 +39547,8 @@ const useSelect$1 = (props, emit) => {
       setSoftFocus();
     } else {
       selectedIndex.value = idx;
-      states.selectedLabel = option.label;
-      update(option.value);
+      states.selectedLabel = getLabel(option);
+      update(getValue(option));
       expanded.value = false;
       states.isComposing = false;
       states.isSilentBlur = byClick;
@@ -39542,7 +39561,7 @@ const useSelect$1 = (props, emit) => {
   };
   const deleteTag = (event, option) => {
     let selectedOptions = props.modelValue.slice();
-    const index = getValueIndex(selectedOptions, option.value);
+    const index = getValueIndex(selectedOptions, getValue(option));
     if (index > -1 && !selectDisabled.value) {
       selectedOptions = [
         ...props.modelValue.slice(0, index),
@@ -39550,7 +39569,7 @@ const useSelect$1 = (props, emit) => {
       ];
       states.cachedOptions.splice(index, 1);
       update(selectedOptions);
-      emit("remove-tag", option.value);
+      emit("remove-tag", getValue(option));
       states.softFocus = true;
       removeNewOption(option);
       return nextTick(focusAndUpdatePopup);
@@ -39648,7 +39667,7 @@ const useSelect$1 = (props, emit) => {
       }
     }
     const option = options[newIndex];
-    if (option.disabled || option.type === "Group") {
+    if (getDisabled(option) || option.type === "Group") {
       return onKeyboardNavigate(direction, newIndex);
     } else {
       updateHoveringIndex(newIndex);
@@ -39733,12 +39752,12 @@ const useSelect$1 = (props, emit) => {
       if (hasModelValue.value) {
         states.previousValue = props.modelValue;
         const options = filteredOptions.value;
-        const selectedItemIndex = options.findIndex((option) => getValueKey(option.value) === getValueKey(props.modelValue));
+        const selectedItemIndex = options.findIndex((option) => getValueKey(getValue(option)) === getValueKey(props.modelValue));
         if (~selectedItemIndex) {
-          states.selectedLabel = options[selectedItemIndex].label;
+          states.selectedLabel = getLabel(options[selectedItemIndex]);
           updateHoveringIndex(selectedItemIndex);
         } else {
-          states.selectedLabel = `${props.modelValue}`;
+          states.selectedLabel = getValueKey(props.modelValue);
         }
       } else {
         states.selectedLabel = "";
@@ -39827,6 +39846,8 @@ const useSelect$1 = (props, emit) => {
     debouncedOnInputChange,
     deleteTag,
     getLabel,
+    getValue,
+    getDisabled,
     getValueKey,
     handleBlur,
     handleClear,
@@ -39959,11 +39980,11 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
             _ctx.collapseTags && _ctx.modelValue.length > 0 ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.showTagList, (item) => {
                 return openBlock(), createElementBlock("div", {
-                  key: _ctx.getValueKey(item),
+                  key: _ctx.getValueKey(_ctx.getValue(item)),
                   class: normalizeClass(_ctx.nsSelectV2.e("selected-item"))
                 }, [
                   createVNode(_component_el_tag, {
-                    closable: !_ctx.selectDisabled && !(item == null ? void 0 : item.disable),
+                    closable: !_ctx.selectDisabled && !_ctx.getDisabled(item),
                     size: _ctx.collapseTagSize,
                     type: "info",
                     "disable-transitions": "",
@@ -39975,7 +39996,7 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
                         style: normalizeStyle({
                           maxWidth: `${_ctx.tagMaxWidth}px`
                         })
-                      }, toDisplayString(item == null ? void 0 : item.label), 7)
+                      }, toDisplayString(_ctx.getLabel(item)), 7)
                     ]),
                     _: 2
                   }, 1032, ["closable", "size", "onClose"])
@@ -40006,7 +40027,7 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
                           style: normalizeStyle({
                             maxWidth: `${_ctx.tagMaxWidth}px`
                           })
-                        }, "+ " + toDisplayString(_ctx.modelValue.length - _ctx.maxCollapseTags), 7)
+                        }, " + " + toDisplayString(_ctx.modelValue.length - _ctx.maxCollapseTags), 7)
                       ]),
                       content: withCtx(() => [
                         createElementVNode("div", {
@@ -40014,11 +40035,11 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
                         }, [
                           (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.collapseTagList, (selected) => {
                             return openBlock(), createElementBlock("div", {
-                              key: _ctx.getValueKey(selected),
+                              key: _ctx.getValueKey(_ctx.getValue(selected)),
                               class: normalizeClass(_ctx.nsSelectV2.e("selected-item"))
                             }, [
                               createVNode(_component_el_tag, {
-                                closable: !_ctx.selectDisabled && !selected.disabled,
+                                closable: !_ctx.selectDisabled && !_ctx.getDisabled(selected),
                                 size: _ctx.collapseTagSize,
                                 class: "in-tooltip",
                                 type: "info",
@@ -40046,18 +40067,18 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
                       style: normalizeStyle({
                         maxWidth: `${_ctx.tagMaxWidth}px`
                       })
-                    }, "+ " + toDisplayString(_ctx.modelValue.length - _ctx.maxCollapseTags), 7))
+                    }, " + " + toDisplayString(_ctx.modelValue.length - _ctx.maxCollapseTags), 7))
                   ]),
                   _: 1
                 }, 8, ["size"])) : createCommentVNode("v-if", true)
               ], 2)
             ], 64)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.states.cachedOptions, (selected) => {
               return openBlock(), createElementBlock("div", {
-                key: _ctx.getValueKey(selected),
+                key: _ctx.getValueKey(_ctx.getValue(selected)),
                 class: normalizeClass(_ctx.nsSelectV2.e("selected-item"))
               }, [
                 createVNode(_component_el_tag, {
-                  closable: !_ctx.selectDisabled && !selected.disabled,
+                  closable: !_ctx.selectDisabled && !_ctx.getDisabled(selected),
                   size: _ctx.collapseTagSize,
                   type: "info",
                   "disable-transitions": "",
@@ -52619,7 +52640,7 @@ Tree.install = (app) => {
 const _Tree = Tree;
 const ElTree = _Tree;
 
-const useSelect = (props, { attrs }, {
+const useSelect = (props, { attrs, emit }, {
   tree,
   key
 }) => {
@@ -52627,6 +52648,7 @@ const useSelect = (props, { attrs }, {
   const result = {
     ...pick(toRefs(props), Object.keys(ElSelect.props)),
     ...attrs,
+    "onUpdate:modelValue": (value) => emit(UPDATE_MODEL_EVENT, value),
     valueKey: key,
     popperClass: computed$1(() => {
       const classes = [ns.e("popper")];
@@ -54782,12 +54804,20 @@ function useClips() {
     if (content instanceof HTMLImageElement) {
       ctx.drawImage(content, 0, 0, contentWidth, contentHeight);
     } else {
-      const { color, fontSize, fontStyle, fontWeight, fontFamily } = font;
+      const {
+        color,
+        fontSize,
+        fontStyle,
+        fontWeight,
+        fontFamily,
+        textAlign,
+        textBaseline
+      } = font;
       const mergedFontSize = Number(fontSize) * ratio;
       ctx.font = `${fontStyle} normal ${fontWeight} ${mergedFontSize}px/${height}px ${fontFamily}`;
       ctx.fillStyle = color;
-      ctx.textAlign = "center";
-      ctx.textBaseline = "top";
+      ctx.textAlign = textAlign;
+      ctx.textBaseline = textBaseline;
       const contents = Array.isArray(content) ? content : [content];
       contents == null ? void 0 : contents.forEach((item, index) => {
         ctx.fillText(item != null ? item : "", contentWidth / 2, index * (mergedFontSize + FontGap * ratio));
@@ -54876,6 +54906,14 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       var _a, _b;
       return (_b = (_a = props.font) == null ? void 0 : _a.fontFamily) != null ? _b : "sans-serif";
     });
+    const textAlign = computed$1(() => {
+      var _a, _b;
+      return (_b = (_a = props.font) == null ? void 0 : _a.textAlign) != null ? _b : "center";
+    });
+    const textBaseline = computed$1(() => {
+      var _a, _b;
+      return (_b = (_a = props.font) == null ? void 0 : _a.textBaseline) != null ? _b : "top";
+    });
     const gapX = computed$1(() => props.gap[0]);
     const gapY = computed$1(() => props.gap[1]);
     const gapXCenter = computed$1(() => gapX.value / 2);
@@ -54979,7 +55017,9 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
             fontSize: fontSize.value,
             fontStyle: fontStyle.value,
             fontWeight: fontWeight.value,
-            fontFamily: fontFamily.value
+            fontFamily: fontFamily.value,
+            textAlign: textAlign.value,
+            textBaseline: textBaseline.value
           }, gapX.value, gapY.value);
           appendWatermark(textClips, clipWidth);
         };

package/dist/locale/af.js

@@ -1,4 +1,4 @@
-/*! Element Plus v2.4.1 */
+/*! Element Plus v2.4.2 */
 
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :

package/dist/locale/af.min.js

@@ -1,2 +1,2 @@
-/*! Element Plus v2.4.1 */(function(e,t){typeof exports=="object"&&typeof module!="undefined"?module.exports=t():typeof define=="function"&&define.amd?define(t):(e=typeof globalThis!="undefined"?globalThis:e||self,e.ElementPlusLocaleAf=t())})(this,function(){"use strict";var e={name:"af",el:{colorpicker:{confirm:"Bevestig",clear:"Maak skoon"},datepicker:{now:"Nou",today:"Vandag",cancel:"Kanselleer",clear:"Maak skoon",confirm:"Bevestig",selectDate:"Kies datum",selectTime:"Kies tyd",startDate:"Begindatum",startTime:"Begintyd",endDate:"Einddatum",endTime:"Eindtyd",prevYear:"Previous Year",nextYear:"Next Year",prevMonth:"Previous Month",nextMonth:"Next Month",year:"Jaar",month1:"Jan",month2:"Feb",month3:"Mrt",month4:"Apr",month5:"Mei",month6:"Jun",month7:"Jul",month8:"Aug",month9:"Sep",month10:"Okt",month11:"Nov",month12:"Des",weeks:{sun:"So",mon:"Ma",tue:"Di",wed:"Wo",thu:"Do",fri:"Vr",sat:"Sa"},months:{jan:"Jan",feb:"Feb",mar:"Mrt",apr:"Apr",may:"Mei",jun:"Jun",jul:"Jul",aug:"Aug",sep:"Sep",oct:"Okt",nov:"Nov",dec:"Des"}},select:{loading:"Laai",noMatch:"Geen toepaslike data",noData:"Geen data",placeholder:"Kies"},cascader:{noMatch:"Geen toepaslike data",loading:"Laai",placeholder:"Kies",noData:"Geen data"},pagination:{goto:"Gaan na",pagesize:"/page",total:"Totaal {total}",pageClassifier:"",page:"Page",prev:"Go to previous page",next:"Go to next page",currentPage:"page {pager}",prevPages:"Previous {pager} pages",nextPages:"Next {pager} pages"},messagebox:{title:"Boodskap",confirm:"Bevestig",cancel:"Kanselleer",error:"Ongeldige invoer"},upload:{deleteTip:"press delete to remove",delete:"Verwyder",preview:"Voorskou",continue:"Gaan voort"},table:{emptyText:"Geen Data",confirmFilter:"Bevestig",resetFilter:"Herstel",clearFilter:"Alles",sumText:"Som"},tree:{emptyText:"Geen Data"},transfer:{noMatch:"Geen toepaslike data",noData:"Geen data",titles:["Lys 1","Lys 2"],filterPlaceholder:"Voer sleutelwoord in",noCheckedFormat:"{total} items",hasCheckedFormat:"{checked}/{total} gekies"},image:{error:"FAILED"},pageHeader:{title:"Back"},popconfirm:{confirmButtonText:"Yes",cancelButtonText:"No"}}};return e});
+/*! Element Plus v2.4.2 */(function(e,t){typeof exports=="object"&&typeof module!="undefined"?module.exports=t():typeof define=="function"&&define.amd?define(t):(e=typeof globalThis!="undefined"?globalThis:e||self,e.ElementPlusLocaleAf=t())})(this,function(){"use strict";var e={name:"af",el:{colorpicker:{confirm:"Bevestig",clear:"Maak skoon"},datepicker:{now:"Nou",today:"Vandag",cancel:"Kanselleer",clear:"Maak skoon",confirm:"Bevestig",selectDate:"Kies datum",selectTime:"Kies tyd",startDate:"Begindatum",startTime:"Begintyd",endDate:"Einddatum",endTime:"Eindtyd",prevYear:"Previous Year",nextYear:"Next Year",prevMonth:"Previous Month",nextMonth:"Next Month",year:"Jaar",month1:"Jan",month2:"Feb",month3:"Mrt",month4:"Apr",month5:"Mei",month6:"Jun",month7:"Jul",month8:"Aug",month9:"Sep",month10:"Okt",month11:"Nov",month12:"Des",weeks:{sun:"So",mon:"Ma",tue:"Di",wed:"Wo",thu:"Do",fri:"Vr",sat:"Sa"},months:{jan:"Jan",feb:"Feb",mar:"Mrt",apr:"Apr",may:"Mei",jun:"Jun",jul:"Jul",aug:"Aug",sep:"Sep",oct:"Okt",nov:"Nov",dec:"Des"}},select:{loading:"Laai",noMatch:"Geen toepaslike data",noData:"Geen data",placeholder:"Kies"},cascader:{noMatch:"Geen toepaslike data",loading:"Laai",placeholder:"Kies",noData:"Geen data"},pagination:{goto:"Gaan na",pagesize:"/page",total:"Totaal {total}",pageClassifier:"",page:"Page",prev:"Go to previous page",next:"Go to next page",currentPage:"page {pager}",prevPages:"Previous {pager} pages",nextPages:"Next {pager} pages"},messagebox:{title:"Boodskap",confirm:"Bevestig",cancel:"Kanselleer",error:"Ongeldige invoer"},upload:{deleteTip:"press delete to remove",delete:"Verwyder",preview:"Voorskou",continue:"Gaan voort"},table:{emptyText:"Geen Data",confirmFilter:"Bevestig",resetFilter:"Herstel",clearFilter:"Alles",sumText:"Som"},tree:{emptyText:"Geen Data"},transfer:{noMatch:"Geen toepaslike data",noData:"Geen data",titles:["Lys 1","Lys 2"],filterPlaceholder:"Voer sleutelwoord in",noCheckedFormat:"{total} items",hasCheckedFormat:"{checked}/{total} gekies"},image:{error:"FAILED"},pageHeader:{title:"Back"},popconfirm:{confirmButtonText:"Yes",cancelButtonText:"No"}}};return e});
 //# sourceMappingURL=af.min.js.map