@element-plus/nightly 0.0.20220630 → 0.0.20220703

package/dist/index.full.js

@@ -1,4 +1,4 @@
-/*! Element Plus v0.0.20220630 */
+/*! Element Plus v0.0.20220703 */
 
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
@@ -10734,7 +10734,7 @@
     return [recordCursor, setCursor];
   }
 
-  const version$1 = "0.0.20220630";
+  const version$1 = "0.0.20220703";
 
   const makeInstaller = (components = []) => {
     const install = (app, options) => {
@@ -13573,6 +13573,10 @@
     highlightFirstItem: {
       type: Boolean,
       default: false
+    },
+    fitInputWidth: {
+      type: Boolean,
+      default: false
     }
   });
   const autocompleteEmits = {
@@ -13793,7 +13797,6 @@
           ref_key: "popperRef",
           ref: popperRef,
           visible: vue.unref(suggestionVisible),
-          "onUpdate:visible": _cache[2] || (_cache[2] = ($event) => vue.isRef(suggestionVisible) ? suggestionVisible.value = $event : null),
           placement: _ctx.placement,
           "fallback-placements": ["bottom-start", "top-start"],
           "popper-class": [vue.unref(ns).e("popper"), _ctx.popperClass],
@@ -13814,7 +13817,10 @@
               ref_key: "regionRef",
               ref: regionRef,
               class: vue.normalizeClass([vue.unref(ns).b("suggestion"), vue.unref(ns).is("loading", vue.unref(suggestionLoading))]),
-              style: vue.normalizeStyle({ minWidth: dropdownWidth.value, outline: "none" }),
+              style: vue.normalizeStyle({
+                [_ctx.fitInputWidth ? "width" : "minWidth"]: dropdownWidth.value,
+                outline: "none"
+              }),
               role: "region"
             }, [
               vue.createVNode(vue.unref(ElScrollbar), {
@@ -16358,6 +16364,8 @@
         return pickerOptions.value.isValidValue(value);
       };
       const handleKeydownInput = async (event) => {
+        if (props.readonly || pickerDisabled.value)
+          return;
         const { code } = event;
         emitKeydown(event);
         if (code === EVENT_CODE.esc) {
@@ -18743,6 +18751,10 @@
     tag: {
       type: String,
       default: "div"
+    },
+    validateEvent: {
+      type: Boolean,
+      default: true
     }
   };
   const checkboxProps = {
@@ -18778,7 +18790,11 @@
     },
     border: Boolean,
     size: useSizeProp,
-    tabindex: [String, Number]
+    tabindex: [String, Number],
+    validateEvent: {
+      type: Boolean,
+      default: true
+    }
   };
   const useCheckboxGroup = () => {
     const elForm = vue.inject(formContextKey, {});
@@ -18902,7 +18918,7 @@
     isDisabled,
     isLabeledByFormItem
   }) => {
-    const { elFormItem } = useCheckboxGroup();
+    const { elFormItem, checkboxGroup } = useCheckboxGroup();
     const { emit } = vue.getCurrentInstance();
     function getLabeledValue(value) {
       var _a, _b;
@@ -18926,9 +18942,15 @@
         emitChangeEvent(model.value, e);
       }
     }
+    const validateEvent = vue.computed(() => {
+      var _a;
+      return ((_a = checkboxGroup.validateEvent) == null ? void 0 : _a.value) || props.validateEvent;
+    });
     vue.watch(() => props.modelValue, () => {
       var _a;
-      (_a = elFormItem == null ? void 0 : elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "change").catch((err) => debugWarn());
+      if (validateEvent.value) {
+        (_a = elFormItem == null ? void 0 : elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "change").catch((err) => debugWarn());
+      }
     });
     return {
       handleChange,
@@ -19203,7 +19225,9 @@
       });
       vue.watch(() => props.modelValue, () => {
         var _a;
-        (_a = elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "change").catch((err) => debugWarn());
+        if (props.validateEvent) {
+          (_a = elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "change").catch((err) => debugWarn());
+        }
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tag), {
@@ -19304,7 +19328,7 @@
       const rawAttrs = vue.useAttrs();
       const containerStyle = vue.computed(() => rawAttrs.style);
       const inputAttrs = useAttrs({ excludeListeners: true });
-      const labelListieners = useAttrs({
+      const labelListeners = useAttrs({
         excludeKeys: vue.computed(() => {
           return Object.keys(inputAttrs.value);
         })
@@ -19327,7 +19351,7 @@
             vue.unref(rawAttrs).class
           ],
           style: vue.unref(containerStyle)
-        }, vue.unref(labelListieners)), [
+        }, vue.unref(labelListeners)), [
           vue.createElementVNode("span", {
             class: vue.normalizeClass([
               vue.unref(ns).e("input"),
@@ -19464,6 +19488,10 @@
     name: {
       type: String,
       default: void 0
+    },
+    validateEvent: {
+      type: Boolean,
+      default: true
     }
   });
   const radioGroupEmits = radioEmits;
@@ -19504,7 +19532,11 @@
         changeEvent,
         name
       }));
-      vue.watch(() => props.modelValue, () => formItem == null ? void 0 : formItem.validate("change").catch((err) => debugWarn()));
+      vue.watch(() => props.modelValue, () => {
+        if (props.validateEvent) {
+          formItem == null ? void 0 : formItem.validate("change").catch((err) => debugWarn());
+        }
+      });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
           id: vue.unref(groupId),
@@ -20585,7 +20617,11 @@
         default: ""
       },
       teleported: useTooltipContentProps.teleported,
-      tagType: { ...tagProps.type, default: "info" }
+      tagType: { ...tagProps.type, default: "info" },
+      validateEvent: {
+        type: Boolean,
+        default: true
+      }
     },
     emits: [
       UPDATE_MODEL_EVENT,
@@ -20647,7 +20683,9 @@
           var _a;
           emit(UPDATE_MODEL_EVENT, val);
           emit(CHANGE_EVENT, val);
-          (_a = elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "change").catch((err) => debugWarn());
+          if (props.validateEvent) {
+            (_a = elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "change").catch((err) => debugWarn());
+          }
         }
       });
       const popperPaneRef = vue.computed(() => {
@@ -22334,7 +22372,11 @@
         type: [String, Number],
         default: 0
       },
-      predefine: Array
+      predefine: Array,
+      validateEvent: {
+        type: Boolean,
+        default: true
+      }
     },
     emits: ["change", "active-change", UPDATE_MODEL_EVENT],
     setup(props, { emit }) {
@@ -22435,7 +22477,9 @@
         const value = color.value;
         emit(UPDATE_MODEL_EVENT, value);
         emit("change", value);
-        (_a = elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "change").catch((err) => debugWarn());
+        if (props.validateEvent) {
+          (_a = elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "change").catch((err) => debugWarn());
+        }
         debounceSetShowPicker(false);
         vue.nextTick(() => {
           const newColor = new Color({
@@ -22453,7 +22497,7 @@
         debounceSetShowPicker(false);
         emit(UPDATE_MODEL_EVENT, null);
         emit("change", null);
-        if (props.modelValue !== null) {
+        if (props.modelValue !== null && props.validateEvent) {
           (_a = elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "change").catch((err) => debugWarn());
         }
         resetColor();
@@ -23782,7 +23826,7 @@
         const clickTarget = event.target;
         const target = clickTarget.closest("td");
         if (target) {
-          if (hasClass(target.parentNode, "disabled"))
+          if (hasClass(target, "disabled"))
             return;
           const year = target.textContent || target.innerText;
           emit("pick", Number(year));
@@ -26105,7 +26149,7 @@
     },
     modelValue: {
       type: Boolean,
-      required: true
+      default: false
     },
     modalClass: String,
     width: {
@@ -26385,7 +26429,6 @@
                           draggable: vue.unref(draggable),
                           fullscreen: _ctx.fullscreen,
                           "show-close": _ctx.showClose,
-                          style: vue.normalizeStyle(vue.unref(style)),
                           title: _ctx.title,
                           onClose: vue.unref(handleClose)
                         }, vue.createSlots({
@@ -26408,7 +26451,7 @@
                               vue.renderSlot(_ctx.$slots, "footer")
                             ])
                           } : void 0
-                        ]), 1032, ["custom-class", "center", "close-icon", "draggable", "fullscreen", "show-close", "style", "title", "onClose"])) : vue.createCommentVNode("v-if", true)
+                        ]), 1032, ["custom-class", "center", "close-icon", "draggable", "fullscreen", "show-close", "title", "onClose"])) : vue.createCommentVNode("v-if", true)
                       ]),
                       _: 3
                     }, 8, ["trapped", "onFocusAfterTrapped", "onFocusAfterReleased", "onReleaseRequested"])
@@ -30311,6 +30354,10 @@
     precision: {
       type: Number,
       validator: (val) => val >= 0 && val === Number.parseInt(`${val}`, 10)
+    },
+    validateEvent: {
+      type: Boolean,
+      default: true
     }
   });
   const inputNumberEmits = {
@@ -30434,7 +30481,7 @@
           newVal = isString(valueOnClear) ? { min, max }[valueOnClear] : valueOnClear;
         }
         if (stepStrictly) {
-          newVal = Math.round(newVal / step) * step;
+          newVal = toPrecision(Math.round(newVal / step) * step, precision);
         }
         if (!isUndefined(precision)) {
           newVal = toPrecision(newVal, precision);
@@ -30455,7 +30502,9 @@
         emit("update:modelValue", newVal);
         emit("input", newVal);
         emit("change", newVal, oldVal);
-        (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change").catch((err) => debugWarn());
+        if (props.validateEvent) {
+          (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change").catch((err) => debugWarn());
+        }
         data.currentValue = newVal;
       };
       const handleInput = (value) => {
@@ -30482,7 +30531,9 @@
       const handleBlur = (event) => {
         var _a;
         emit("blur", event);
-        (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "blur").catch((err) => debugWarn());
+        if (props.validateEvent) {
+          (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "blur").catch((err) => debugWarn());
+        }
       };
       vue.watch(() => props.modelValue, (value) => {
         data.currentValue = verifyValue(value, true);
@@ -31021,7 +31072,7 @@
       };
       const handleMouseenter = (event, showTimeout = props.showTimeout) => {
         var _a;
-        if (event.type === "focus" && !event.relatedTarget) {
+        if (event.type === "focus") {
           return;
         }
         if (rootMenu.props.menuTrigger === "click" && rootMenu.props.mode === "horizontal" || !rootMenu.props.collapse && rootMenu.props.mode === "vertical" || props.disabled) {
@@ -32067,7 +32118,7 @@
       if (props.filterable && !props.multiple) {
         states.inputLength = 20;
       }
-      if (!isEqual$1(val, oldVal)) {
+      if (!isEqual$1(val, oldVal) && props.validateEvent) {
         (_a = elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "change").catch((err) => debugWarn());
       }
     }, {
@@ -32711,7 +32762,11 @@
         type: [String, Object],
         default: arrow_up_default
       },
-      tagType: { ...tagProps.type, default: "info" }
+      tagType: { ...tagProps.type, default: "info" },
+      validateEvent: {
+        type: Boolean,
+        default: true
+      }
     },
     emits: [
       UPDATE_MODEL_EVENT,
@@ -36929,6 +36984,10 @@
     scrollbarAlwaysOn: {
       type: Boolean,
       default: false
+    },
+    validateEvent: {
+      type: Boolean,
+      default: true
     }
   };
   const OptionProps = {
@@ -37866,7 +37925,7 @@
       if (!val || val.toString() !== states.previousValue) {
         initStates();
       }
-      if (!isEqual$1(val, oldVal)) {
+      if (!isEqual$1(val, oldVal) && props.validateEvent) {
         (_a = elFormItem == null ? void 0 : elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "change").catch((err) => debugWarn());
       }
     }, {
@@ -38510,6 +38569,10 @@
     },
     marks: {
       type: definePropType(Object)
+    },
+    validateEvent: {
+      type: Boolean,
+      default: true
     }
   });
   const isValidValue$1 = (value) => isNumber(value) || isArray(value) && value.every(isNumber);
@@ -38977,7 +39040,9 @@
           initData.firstValue = val[0];
           initData.secondValue = val[1];
           if (valueChanged()) {
-            (_a = elFormItem == null ? void 0 : elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "change").catch((err) => debugWarn());
+            if (props.validateEvent) {
+              (_a = elFormItem == null ? void 0 : elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "change").catch((err) => debugWarn());
+            }
             initData.oldValue = val.slice();
           }
         }
@@ -38989,7 +39054,9 @@
         } else {
           initData.firstValue = val;
           if (valueChanged()) {
-            (_b = elFormItem == null ? void 0 : elFormItem.validate) == null ? void 0 : _b.call(elFormItem, "change").catch((err) => debugWarn());
+            if (props.validateEvent) {
+              (_b = elFormItem == null ? void 0 : elFormItem.validate) == null ? void 0 : _b.call(elFormItem, "change").catch((err) => debugWarn());
+            }
             initData.oldValue = val;
           }
         }
@@ -47091,6 +47158,14 @@
         emit("edit", void 0, "add");
         emit("tab-add");
       };
+      useDeprecated({
+        from: '"activeName"',
+        replacement: '"model-value" or "v-model"',
+        scope: "ElTabs",
+        version: "2.3.0",
+        ref: "https://element-plus.org/en-US/component/tabs.html#attributes",
+        type: "Attribute"
+      }, vue.computed(() => !!props.activeName));
       vue.watch(() => props.activeName, (modelValue) => setCurrentName(modelValue));
       vue.watch(() => props.modelValue, (modelValue) => setCurrentName(modelValue));
       vue.watch(currentName, async () => {
@@ -48190,6 +48265,10 @@
       type: String,
       values: ["original", "push", "unshift"],
       default: "original"
+    },
+    validateEvent: {
+      type: Boolean,
+      default: true
     }
   });
   const transferCheckedChangeFn = (value, movedKeys) => [value, movedKeys].every(isArray) || isArray(value) && isNil(movedKeys);
@@ -48545,7 +48624,9 @@
       const panelFilterPlaceholder = vue.computed(() => props.filterPlaceholder || t("el.transfer.filterPlaceholder"));
       vue.watch(() => props.modelValue, () => {
         var _a;
-        (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change").catch((err) => debugWarn());
+        if (props.validateEvent) {
+          (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change").catch((err) => debugWarn());
+        }
       });
       const optionRender = vue.computed(() => (option) => {
         if (props.renderContent)
@@ -50306,6 +50387,12 @@
     setup(props, ctx) {
       const result = ElOption.setup(props, ctx);
       delete result.selectOptionClick;
+      const vm = vue.getCurrentInstance().proxy;
+      vue.nextTick(() => {
+        if (!result.select.cachedOptions.get(vm.value)) {
+          result.select.onOptionCreate(vm);
+        }
+      });
       return result;
     },
     methods: {
@@ -50316,6 +50403,31 @@
   });
   var TreeSelectOption = component;
 
+  function isValidValue(val) {
+    return val || val === 0;
+  }
+  function isValidArray(val) {
+    return Array.isArray(val) && val.length;
+  }
+  function toValidArray(val) {
+    return Array.isArray(val) ? val : isValidValue(val) ? [val] : [];
+  }
+  function treeFind(treeData, findCallback, getChildren, resultCallback, parent) {
+    for (let i = 0; i < treeData.length; i++) {
+      const data = treeData[i];
+      if (findCallback(data, i, treeData, parent)) {
+        return resultCallback ? resultCallback(data, i, treeData, parent) : data;
+      } else {
+        const children = getChildren(data);
+        if (isValidArray(children)) {
+          const find = treeFind(children, findCallback, getChildren, resultCallback, data);
+          if (find)
+            return find;
+        }
+      }
+    }
+  }
+
   const useTree$1 = (props, { attrs, slots, emit }, {
     select,
     tree,
@@ -50347,6 +50459,9 @@
         return data[propVal];
       }
     };
+    const defaultExpandedParentKeys = toValidArray(props.modelValue).map((value) => {
+      return treeFind(props.data || [], (data) => getNodeValByProp("value", data) === value, (data) => getNodeValByProp("children", data), (data, index, array, parent) => parent && getNodeValByProp("value", parent));
+    }).filter((item) => isValidValue(item));
     return {
       ...pick(vue.toRefs(props), Object.keys(_Tree.props)),
       ...attrs,
@@ -50355,12 +50470,7 @@
         return !props.checkStrictly;
       }),
       defaultExpandedKeys: vue.computed(() => {
-        const values = toValidArray(props.modelValue);
-        const parentKeys = tree.value ? values.map((item) => {
-          var _a, _b, _c;
-          return (_c = (_b = (_a = tree.value) == null ? void 0 : _a.getNode(item)) == null ? void 0 : _b.parent) == null ? void 0 : _c.key;
-        }).filter((item) => isValidValue(item)) : values;
-        return props.defaultExpandedKeys ? props.defaultExpandedKeys.concat(parentKeys) : parentKeys;
+        return props.defaultExpandedKeys ? props.defaultExpandedKeys.concat(defaultExpandedParentKeys) : defaultExpandedParentKeys;
       }),
       renderContent: (h, { node, data, store }) => {
         return h(TreeSelectOption, {
@@ -50380,7 +50490,9 @@
       onNodeClick: (data, node, e) => {
         var _a, _b, _c;
         (_a = attrs.onNodeClick) == null ? void 0 : _a.call(attrs, data, node, e);
-        if ((props.checkStrictly ? props.showCheckbox ? props.checkOnClickNode : props.checkStrictly : props.checkStrictly) || node.isLeaf) {
+        if (props.showCheckbox && props.checkOnClickNode)
+          return;
+        if (!props.showCheckbox && (props.checkStrictly || node.isLeaf)) {
           if (!getNodeValByProp("disabled", data)) {
             const option = (_b = select.value) == null ? void 0 : _b.options.get(getNodeValByProp("value", data));
             (_c = select.value) == null ? void 0 : _c.handleOptionSelect(option, true);
@@ -50390,20 +50502,24 @@
         }
       },
       onCheck: (data, params) => {
-        var _a, _b;
+        var _a;
         (_a = attrs.onCheck) == null ? void 0 : _a.call(attrs, data, params);
-        const checkedKeys = !props.checkStrictly ? (_b = tree.value) == null ? void 0 : _b.getCheckedKeys(true) : params.checkedKeys;
-        const value = getNodeValByProp("value", data);
-        emit(UPDATE_MODEL_EVENT, props.multiple ? checkedKeys : checkedKeys.includes(value) ? value : void 0);
+        const dataValue = getNodeValByProp("value", data);
+        if (props.checkStrictly) {
+          emit(UPDATE_MODEL_EVENT, props.multiple ? params.checkedKeys : params.checkedKeys.includes(dataValue) ? dataValue : void 0);
+        } else {
+          if (props.multiple) {
+            emit(UPDATE_MODEL_EVENT, tree.value.getCheckedKeys(true));
+          } else {
+            const firstLeaf = treeFind([data], (data2) => !isValidArray(getNodeValByProp("children", data2)) && !getNodeValByProp("disabled", data2), (data2) => getNodeValByProp("children", data2));
+            const firstLeafKey = firstLeaf ? getNodeValByProp("value", firstLeaf) : void 0;
+            const hasCheckedChild = isValidValue(props.modelValue) && !!treeFind([data], (data2) => getNodeValByProp("value", data2) === props.modelValue, (data2) => getNodeValByProp("children", data2));
+            emit(UPDATE_MODEL_EVENT, firstLeafKey === props.modelValue || hasCheckedChild ? void 0 : firstLeafKey);
+          }
+        }
       }
     };
   };
-  function isValidValue(val) {
-    return val || val === 0;
-  }
-  function toValidArray(val) {
-    return Array.isArray(val) ? val : isValidValue(val) ? [val] : [];
-  }
 
   const _sfc_main$9 = vue.defineComponent({
     name: "ElTreeSelect",
@@ -52826,7 +52942,7 @@
     const { prev } = getInstance(id);
     if (!prev)
       return 0;
-    return prev.vm.bottom;
+    return prev.vm.exposeProxy.bottom;
   };
 
   const _hoisted_1$2 = ["id"];
@@ -52991,14 +53107,13 @@
     handler.close();
   };
   const createMessage = ({ appendTo, ...options }, context) => {
-    var _a;
     const { nextZIndex } = useZIndex();
     const id = `message_${seed$1++}`;
     const userOnClose = options.onClose;
     const container = document.createElement("div");
     const props = {
       ...options,
-      zIndex: (_a = options.zIndex) != null ? _a : nextZIndex(),
+      zIndex: nextZIndex() + options.zIndex,
       id,
       onClose: () => {
         userOnClose == null ? void 0 : userOnClose();
@@ -53012,10 +53127,10 @@
     vnode.appContext = context || message._context;
     vue.render(vnode, container);
     appendTo.appendChild(container.firstElementChild);
-    const vm = vnode.component.proxy;
+    const vm = vnode.component;
     const handler = {
       close: () => {
-        vm.visible = false;
+        vm.exposeProxy.visible = false;
       }
     };
     const instance = {