@element-plus/nightly 0.0.20220903 → 0.0.20220906

package/dist/index.full.js

@@ -1,4 +1,4 @@
-/*! Element Plus v0.0.20220903 */
+/*! Element Plus v0.0.20220906 */
 
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
@@ -9826,7 +9826,8 @@
   };
 
   let cachedContainer;
-  const POPPER_CONTAINER_ID = `el-popper-container-${generateId()}`;
+  const namespace = useGlobalConfig("namespace", defaultNamespace);
+  const POPPER_CONTAINER_ID = `${namespace.value}-popper-container-${generateId()}`;
   const POPPER_CONTAINER_SELECTOR = `#${POPPER_CONTAINER_ID}`;
   const createContainer = () => {
     const container = document.createElement("div");
@@ -11026,7 +11027,7 @@
     return [recordCursor, setCursor];
   }
 
-  const version$1 = "0.0.20220903";
+  const version$1 = "0.0.20220906";
 
   const makeInstaller = (components = []) => {
     const install = (app, options) => {
@@ -12970,7 +12971,7 @@
     },
     fallbackPlacements: {
       type: definePropType(Array),
-      default: () => []
+      default: void 0
     },
     gpuAcceleration: {
       type: Boolean,
@@ -13090,7 +13091,7 @@
         name: "flip",
         options: {
           padding: 5,
-          fallbackPlacements: fallbackPlacements != null ? fallbackPlacements : []
+          fallbackPlacements
         }
       },
       {
@@ -29796,23 +29797,36 @@
         }
         return getProp(model, props.prop).value;
       });
-      const _rules = vue.computed(() => {
-        const rules = props.rules ? castArray$1(props.rules) : [];
+      const normalizedRules = vue.computed(() => {
+        const { required } = props;
+        const rules = [];
+        if (props.rules) {
+          rules.push(...castArray$1(props.rules));
+        }
         const formRules = formContext == null ? void 0 : formContext.rules;
         if (formRules && props.prop) {
-          const _rules2 = getProp(formRules, props.prop).value;
-          if (_rules2) {
-            rules.push(...castArray$1(_rules2));
+          const _rules = getProp(formRules, props.prop).value;
+          if (_rules) {
+            rules.push(...castArray$1(_rules));
+          }
+        }
+        if (required !== void 0) {
+          const requiredRules = rules.map((rule, i) => [rule, i]).filter(([rule]) => Object.keys(rule).includes("required"));
+          if (requiredRules.length > 0) {
+            for (const [rule, i] of requiredRules) {
+              if (rule.required === required)
+                continue;
+              rules[i] = { ...rule, required };
+            }
+          } else {
+            rules.push({ required });
           }
         }
-        if (props.required !== void 0) {
-          rules.push({ required: !!props.required });
-        }
         return rules;
       });
-      const validateEnabled = vue.computed(() => _rules.value.length > 0);
+      const validateEnabled = vue.computed(() => normalizedRules.value.length > 0);
       const getFilteredRule = (trigger) => {
-        const rules = _rules.value;
+        const rules = normalizedRules.value;
         return rules.filter((rule) => {
           if (!rule.trigger || !trigger)
             return true;
@@ -29823,7 +29837,7 @@
           }
         }).map(({ trigger: trigger2, ...rule }) => rule);
       };
-      const isRequired = vue.computed(() => _rules.value.some((rule) => rule.required === true));
+      const isRequired = vue.computed(() => normalizedRules.value.some((rule) => rule.required));
       const shouldShowError = vue.computed(() => {
         var _a;
         return validateStateDebounced.value === "error" && props.showMessage && ((_a = formContext == null ? void 0 : formContext.showMessage) != null ? _a : true);
@@ -32535,8 +32549,8 @@
       const criteria = props.clearable && !selectDisabled.value && states.inputHovering && hasValue;
       return criteria;
     });
-    const iconComponent = vue.computed(() => props.remote && props.filterable ? "" : props.suffixIcon);
-    const iconReverse = vue.computed(() => ns.is("reverse", iconComponent.value && states.visible));
+    const iconComponent = vue.computed(() => props.remote && props.filterable && !props.remoteShowSuffix ? "" : props.suffixIcon);
+    const iconReverse = vue.computed(() => ns.is("reverse", iconComponent.value && states.visible && props.suffixTransition));
     const debounce$1 = vue.computed(() => props.remote ? 300 : 0);
     const emptyText = vue.computed(() => {
       if (props.loading) {
@@ -32678,6 +32692,8 @@
     vue.watch(() => states.hoverIndex, (val) => {
       if (typeof val === "number" && val > -1) {
         hoverOption.value = optionsArray.value[val] || {};
+      } else {
+        hoverOption.value = {};
       }
       optionsArray.value.forEach((option) => {
         option.hover = hoverOption.value === option;
@@ -32889,6 +32905,7 @@
       }
       ctx.emit(UPDATE_MODEL_EVENT, value);
       emitChange(value);
+      states.hoverIndex = -1;
       states.visible = false;
       ctx.emit("clear");
     };
@@ -33230,7 +33247,7 @@
         default: true
       },
       clearIcon: {
-        type: [String, Object],
+        type: iconPropType,
         default: circle_close_default
       },
       fitInputWidth: {
@@ -33238,13 +33255,26 @@
         default: false
       },
       suffixIcon: {
-        type: [String, Object],
-        default: arrow_up_default
+        type: iconPropType,
+        default: arrow_down_default
       },
       tagType: { ...tagProps.type, default: "info" },
       validateEvent: {
         type: Boolean,
         default: true
+      },
+      remoteShowSuffix: {
+        type: Boolean,
+        default: false
+      },
+      suffixTransition: {
+        type: Boolean,
+        default: true
+      },
+      placement: {
+        type: String,
+        values: Ee,
+        default: "bottom-start"
       }
     },
     emits: [
@@ -33346,6 +33376,10 @@
         maxWidth: `${vue.unref(inputWidth) - 32}px`,
         width: "100%"
       }));
+      const tagTextStyle = vue.computed(() => {
+        const maxWidth = vue.unref(inputWidth) > 123 ? vue.unref(inputWidth) - 123 : vue.unref(inputWidth) - 75;
+        return { maxWidth: `${maxWidth}px` };
+      });
       vue.provide(selectKey, vue.reactive({
         props,
         options,
@@ -33456,7 +33490,8 @@
         scrollbar,
         wrapperKls,
         selectTagsStyle,
-        nsSelect
+        nsSelect,
+        tagTextStyle
       };
     }
   });
@@ -33480,7 +33515,7 @@
       vue.createVNode(_component_el_tooltip, {
         ref: "tooltipRef",
         visible: _ctx.dropMenuVisible,
-        placement: "bottom-start",
+        placement: _ctx.placement,
         teleported: _ctx.teleported,
         "popper-class": [_ctx.nsSelect.e("popper"), _ctx.popperClass],
         "fallback-placements": ["bottom-start", "top-start", "right", "left"],
@@ -33519,7 +33554,7 @@
                   default: vue.withCtx(() => [
                     vue.createElementVNode("span", {
                       class: vue.normalizeClass(_ctx.nsSelect.e("tags-text")),
-                      style: vue.normalizeStyle({ maxWidth: _ctx.inputWidth - 123 + "px" })
+                      style: vue.normalizeStyle(_ctx.tagTextStyle)
                     }, vue.toDisplayString(_ctx.selected[0].currentLabel), 7)
                   ]),
                   _: 1
@@ -33759,7 +33794,7 @@
           })
         ]),
         _: 3
-      }, 8, ["visible", "teleported", "popper-class", "effect", "transition", "persistent", "onShow"])
+      }, 8, ["visible", "placement", "teleported", "popper-class", "effect", "transition", "persistent", "onShow"])
     ], 2)), [
       [_directive_click_outside, _ctx.handleClose, _ctx.popperPaneRef]
     ]);
@@ -35227,24 +35262,21 @@
           width
         };
       });
-      const componentMap = vue.computed(() => isArray(props.icons) ? {
-        [props.lowThreshold]: props.icons[0],
-        [props.highThreshold]: {
-          value: props.icons[1],
-          excluded: true
-        },
-        [props.max]: props.icons[2]
-      } : props.icons);
+      const componentMap = vue.computed(() => {
+        let icons = isArray(props.icons) ? [...props.icons] : { ...props.icons };
+        icons = vue.markRaw(icons);
+        return isArray(icons) ? {
+          [props.lowThreshold]: icons[0],
+          [props.highThreshold]: {
+            value: icons[1],
+            excluded: true
+          },
+          [props.max]: icons[2]
+        } : icons;
+      });
       const decimalIconComponent = vue.computed(() => getValueFromMap(props.modelValue, componentMap.value));
-      const voidComponent = vue.computed(() => rateDisabled.value ? props.disabledVoidIcon : props.voidIcon);
+      const voidComponent = vue.computed(() => rateDisabled.value ? isString(props.disabledVoidIcon) ? props.disabledVoidIcon : vue.markRaw(props.disabledVoidIcon) : isString(props.voidIcon) ? props.voidIcon : vue.markRaw(props.voidIcon));
       const activeComponent = vue.computed(() => getValueFromMap(currentValue.value, componentMap.value));
-      const iconComponents = vue.computed(() => {
-        const result = Array.from({ length: props.max });
-        const threshold = currentValue.value;
-        result.fill(activeComponent.value, 0, threshold);
-        result.fill(voidComponent.value, threshold, props.max);
-        return result;
-      });
       function showDecimalIcon(item) {
         const showWhenDisabled = rateDisabled.value && valueDecimal.value > 0 && item - 1 < props.modelValue && item > props.modelValue;
         const showWhenAllowHalf = props.allowHalf && pointerAtLeftHalf.value && item - 0.5 <= currentValue.value && item > currentValue.value;
@@ -35367,7 +35399,14 @@
                 ])
               }, {
                 default: vue.withCtx(() => [
-                  !showDecimalIcon(item) ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(iconComponents)[item - 1]), { key: 0 })) : vue.createCommentVNode("v-if", true),
+                  !showDecimalIcon(item) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+                    vue.withDirectives((vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(activeComponent)), null, null, 512)), [
+                      [vue.vShow, item <= currentValue.value]
+                    ]),
+                    vue.withDirectives((vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(voidComponent)), null, null, 512)), [
+                      [vue.vShow, !(item <= currentValue.value)]
+                    ])
+                  ], 64)) : vue.createCommentVNode("v-if", true),
                   showDecimalIcon(item) ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), {
                     key: 1,
                     style: vue.normalizeStyle(vue.unref(decimalStyle)),
@@ -37495,6 +37534,11 @@
     validateEvent: {
       type: Boolean,
       default: true
+    },
+    placement: {
+      type: definePropType(String),
+      values: Ee,
+      default: "bottom-start"
     }
   };
   const OptionProps = {
@@ -38576,7 +38620,7 @@
         "popper-options": _ctx.popperOptions,
         "fallback-placements": ["bottom-start", "top-start", "right", "left"],
         effect: _ctx.effect,
-        placement: "bottom-start",
+        placement: _ctx.placement,
         pure: "",
         transition: `${_ctx.nsSelectV2.namespace.value}-zoom-in-top`,
         trigger: "click",
@@ -38890,7 +38934,7 @@
           }, 8, ["data", "width", "hovering-index", "scrollbar-always-on"])
         ]),
         _: 3
-      }, 8, ["visible", "teleported", "popper-class", "popper-options", "effect", "transition", "persistent", "onBeforeShow"])
+      }, 8, ["visible", "teleported", "popper-class", "popper-options", "effect", "placement", "transition", "persistent", "onBeforeShow"])
     ], 34)), [
       [_directive_click_outside, _ctx.handleClickOutside, _ctx.popperRef]
     ]);
@@ -40345,7 +40389,7 @@
             vue.createElementVNode("div", {
               class: vue.normalizeClass([vue.unref(ns).e("icon"), vue.unref(ns).is(_ctx.icon || _ctx.$slots.icon ? "icon" : "text")])
             }, [
-              vue.unref(currentStatus) !== "success" && vue.unref(currentStatus) !== "error" ? vue.renderSlot(_ctx.$slots, "icon", { key: 0 }, () => [
+              vue.renderSlot(_ctx.$slots, "icon", {}, () => [
                 _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), {
                   key: 0,
                   class: vue.normalizeClass(vue.unref(ns).e("icon-inner"))
@@ -40354,20 +40398,27 @@
                     (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon)))
                   ]),
                   _: 1
-                }, 8, ["class"])) : vue.createCommentVNode("v-if", true),
-                !_ctx.icon && !vue.unref(isSimple) ? (vue.openBlock(), vue.createElementBlock("div", {
+                }, 8, ["class"])) : vue.unref(currentStatus) === "success" ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), {
                   key: 1,
+                  class: vue.normalizeClass([vue.unref(ns).e("icon-inner"), vue.unref(ns).is("status")])
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(vue.unref(check_default))
+                  ]),
+                  _: 1
+                }, 8, ["class"])) : vue.unref(currentStatus) === "error" ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), {
+                  key: 2,
+                  class: vue.normalizeClass([vue.unref(ns).e("icon-inner"), vue.unref(ns).is("status")])
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(vue.unref(close_default))
+                  ]),
+                  _: 1
+                }, 8, ["class"])) : !vue.unref(isSimple) ? (vue.openBlock(), vue.createElementBlock("div", {
+                  key: 3,
                   class: vue.normalizeClass(vue.unref(ns).e("icon-inner"))
                 }, vue.toDisplayString(index.value + 1), 3)) : vue.createCommentVNode("v-if", true)
-              ]) : (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), {
-                key: 1,
-                class: vue.normalizeClass([vue.unref(ns).e("icon-inner"), vue.unref(ns).is("status")])
-              }, {
-                default: vue.withCtx(() => [
-                  vue.unref(currentStatus) === "success" ? (vue.openBlock(), vue.createBlock(vue.unref(check_default), { key: 0 })) : (vue.openBlock(), vue.createBlock(vue.unref(close_default), { key: 1 }))
-                ]),
-                _: 1
-              }, 8, ["class"]))
+              ])
             ], 2)
           ], 2),
           vue.createCommentVNode(" title & description "),
@@ -44285,7 +44336,7 @@
       } = useStyle(props, layout, store, table);
       const { scrollBarRef, scrollTo, setScrollLeft, setScrollTop } = useScrollbar$1();
       const debouncedUpdateLayout = debounce(doLayout, 50);
-      const tableId = `el-table_${tableIdSeed++}`;
+      const tableId = `${ns.namespace.value}-table_${tableIdSeed++}`;
       table.tableId = tableId;
       table.state = {
         isGroup,
@@ -44811,6 +44862,9 @@
       if (realMinWidth.value) {
         column.minWidth = realMinWidth.value;
       }
+      if (!realWidth.value && realMinWidth.value) {
+        column.width = void 0;
+      }
       if (!column.minWidth) {
         column.minWidth = 80;
       }
@@ -44872,7 +44926,7 @@
           } else {
             children = originRenderCell(data);
           }
-          const shouldCreatePlaceholder = hasTreeColumn.value && data.cellIndex === 0;
+          const shouldCreatePlaceholder = hasTreeColumn.value && data.cellIndex === 0 && data.column.type !== "selection";
           const prefix = treeCellPrefix(data, shouldCreatePlaceholder);
           const props2 = {
             class: "cell",
@@ -49199,6 +49253,14 @@
       return data[NODE_KEY];
     return data[key];
   };
+  const handleCurrentChange = (store, emit, setCurrent) => {
+    const preCurrentNode = store.value.currentNode;
+    setCurrent();
+    const currentNode = store.value.currentNode;
+    if (preCurrentNode === currentNode)
+      return;
+    emit("current-change", currentNode ? currentNode : null, currentNode);
+  };
 
   const getChildState = (node) => {
     let all = true;
@@ -50202,9 +50264,7 @@
         oldIndeterminate.value = indeterminate;
       };
       const handleClick = (e) => {
-        const store = tree.store.value;
-        store.setCurrentNode(props.node);
-        tree.ctx.emit("current-change", store.currentNode ? store.currentNode.data : null, store.currentNode);
+        handleCurrentChange(tree.store, tree.ctx.emit, () => tree.store.value.setCurrentNode(props.node));
         tree.currentNode.value = props.node;
         if (tree.props.expandOnClickNode) {
           handleExpandIconClick();
@@ -50683,22 +50743,12 @@
       const setCurrentNode = (node, shouldAutoExpandParent = true) => {
         if (!props.nodeKey)
           throw new Error("[Tree] nodeKey is required in setCurrentNode");
-        const preNode = store.value.currentNode;
-        store.value.setUserCurrentNode(node, shouldAutoExpandParent);
-        const currNode = store.value.currentNode;
-        if (preNode !== currNode) {
-          ctx.emit("current-change", currNode ? currNode.data : null, currNode);
-        }
+        handleCurrentChange(store, ctx.emit, () => store.value.setUserCurrentNode(node, shouldAutoExpandParent));
       };
       const setCurrentKey = (key, shouldAutoExpandParent = true) => {
         if (!props.nodeKey)
           throw new Error("[Tree] nodeKey is required in setCurrentKey");
-        const preNode = store.value.currentNode;
-        store.value.setCurrentNodeKey(key, shouldAutoExpandParent);
-        const currNode = store.value.currentNode;
-        if (preNode !== currNode) {
-          ctx.emit("current-change", currNode ? currNode.data : null, currNode);
-        }
+        handleCurrentChange(store, ctx.emit, () => store.value.setCurrentNodeKey(key, shouldAutoExpandParent));
       };
       const getNode = (data) => {
         return store.value.getNode(data);
@@ -53086,23 +53136,18 @@
       var _a;
       if (options.beforeClose && !options.beforeClose())
         return;
-      const target = data.parent;
-      target.vLoadingAddClassList = void 0;
       afterLeaveFlag.value = true;
       clearTimeout(afterLeaveTimer);
-      afterLeaveTimer = window.setTimeout(() => {
-        if (afterLeaveFlag.value) {
-          afterLeaveFlag.value = false;
-          destroySelf();
-        }
-      }, 400);
+      afterLeaveTimer = window.setTimeout(handleAfterLeave, 400);
       data.visible = false;
       (_a = options.closed) == null ? void 0 : _a.call(options);
     }
     function handleAfterLeave() {
       if (!afterLeaveFlag.value)
         return;
+      const target = data.parent;
       afterLeaveFlag.value = false;
+      target.vLoadingAddClassList = void 0;
       destroySelf();
     }
     const elLoadingComponent = {
@@ -53610,7 +53655,9 @@
         vue.render(null, container);
       }
     };
-    const vnode = vue.createVNode(MessageConstructor, props, isFunction(props.message) || vue.isVNode(props.message) ? { default: props.message } : null);
+    const vnode = vue.createVNode(MessageConstructor, props, isFunction(props.message) || vue.isVNode(props.message) ? {
+      default: isFunction(props.message) ? props.message : () => props.message
+    } : null);
     vnode.appContext = context || message._context;
     vue.render(vnode, container);
     appendTo.appendChild(container.firstElementChild);
@@ -54141,7 +54188,9 @@
 
   const messageInstance = /* @__PURE__ */ new Map();
   const initInstance = (props, container, appContext = null) => {
-    const vnode = vue.h(MessageBoxConstructor, props);
+    const vnode = vue.createVNode(MessageBoxConstructor, props, isFunction(props.message) || vue.isVNode(props.message) ? {
+      default: isFunction(props.message) ? props.message : () => props.message
+    } : null);
     vnode.appContext = appContext;
     vue.render(vnode, container);
     document.body.appendChild(container.firstElementChild);
@@ -54185,15 +54234,6 @@
         vm[prop] = options[prop];
       }
     }
-    vue.watch(() => vm.message, (newVal, oldVal) => {
-      if (vue.isVNode(newVal)) {
-        instance.slots.default = () => [newVal];
-      } else if (vue.isVNode(oldVal) && !vue.isVNode(newVal)) {
-        delete instance.slots.default;
-      }
-    }, {
-      immediate: true
-    });
     vm.visible = true;
     return vm;
   };