@element-plus/nightly 0.0.20240117 → 0.0.20240119

package/dist/index.full.js

@@ -1,4 +1,4 @@
-/*! Element Plus v0.0.20240117 */
+/*! Element Plus v0.0.20240119 */
 
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
@@ -11563,7 +11563,7 @@
 
   const ElConfigProvider = withInstall(ConfigProvider);
 
-  const version$1 = "0.0.20240117";
+  const version$1 = "0.0.20240119";
 
   const makeInstaller = (components = []) => {
     const install = (app, options) => {
@@ -34301,13 +34301,13 @@
       (_b = (_a = tagTooltipRef.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a);
     };
     const onInputChange = () => {
+      if (states.inputValue.length > 0 && !expanded.value) {
+        expanded.value = true;
+      }
       handleQueryChange(states.inputValue);
     };
     const onInput = (event) => {
       states.inputValue = event.target.value;
-      if (states.inputValue.length > 0 && !expanded.value) {
-        expanded.value = true;
-      }
       if (props.remote) {
         debouncedOnInputChange();
       } else {
@@ -34476,6 +34476,8 @@
     const toggleMenu = () => {
       if (selectDisabled.value)
         return;
+      if (props.filterable && props.remote && isFunction$1(props.remoteMethod))
+        return;
       if (states.menuVisibleOnFocus) {
         states.menuVisibleOnFocus = false;
       } else {
@@ -35098,13 +35100,21 @@
               }, 8, ["id", "wrap-class", "view-class", "class", "aria-label"]), [
                 [vue.vShow, _ctx.states.options.size > 0 && !_ctx.loading]
               ]),
-              _ctx.loading || _ctx.filteredOptionsCount === 0 ? vue.renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
-                vue.createElementVNode("p", {
-                  class: vue.normalizeClass(_ctx.nsSelect.be("dropdown", "empty"))
-                }, vue.toDisplayString(_ctx.emptyText), 3)
-              ]) : vue.createCommentVNode("v-if", true),
-              _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("div", {
+              _ctx.$slots.loading && _ctx.loading ? (vue.openBlock(), vue.createElementBlock("div", {
+                key: 1,
+                class: vue.normalizeClass(_ctx.nsSelect.be("dropdown", "loading"))
+              }, [
+                vue.renderSlot(_ctx.$slots, "loading")
+              ], 2)) : _ctx.loading || _ctx.filteredOptionsCount === 0 ? (vue.openBlock(), vue.createElementBlock("div", {
                 key: 2,
+                class: vue.normalizeClass(_ctx.nsSelect.be("dropdown", "empty"))
+              }, [
+                vue.renderSlot(_ctx.$slots, "empty", {}, () => [
+                  vue.createElementVNode("span", null, vue.toDisplayString(_ctx.emptyText), 1)
+                ])
+              ], 2)) : vue.createCommentVNode("v-if", true),
+              _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("div", {
+                key: 3,
                 class: vue.normalizeClass(_ctx.nsSelect.be("dropdown", "footer"))
               }, [
                 vue.renderSlot(_ctx.$slots, "footer")
@@ -38917,6 +38927,7 @@
   var ElSelectMenu = vue.defineComponent({
     name: "ElSelectDropdown",
     props: {
+      loading: Boolean,
       data: {
         type: Array,
         required: true
@@ -39106,7 +39117,7 @@
         }
       };
       return () => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         const {
           data,
           width
@@ -39116,18 +39127,18 @@
           multiple,
           scrollbarAlwaysOn
         } = select.props;
-        if (data.length === 0) {
+        if (slots.loading || slots.empty) {
           return vue.createVNode("div", {
             "class": ns.b("dropdown"),
             "style": {
               width: `${width}px`
             }
-          }, [(_a = slots.empty) == null ? void 0 : _a.call(slots)]);
+          }, [((_a = slots.loading) == null ? void 0 : _a.call(slots)) || ((_b = slots.empty) == null ? void 0 : _b.call(slots))]);
         }
         const List = vue.unref(isSized) ? FixedSizeList$1 : DynamicSizeList$1;
         return vue.createVNode("div", {
           "class": [ns.b("dropdown"), ns.is("multiple", multiple)]
-        }, [(_b = slots.header) == null ? void 0 : _b.call(slots), vue.createVNode(List, vue.mergeProps({
+        }, [(_c = slots.header) == null ? void 0 : _c.call(slots), vue.createVNode(List, vue.mergeProps({
           "ref": listRef
         }, vue.unref(listProps), {
           "className": ns.be("dropdown", "list"),
@@ -39139,7 +39150,7 @@
           "onKeydown": onKeydown
         }), {
           default: (props2) => vue.createVNode(Item, props2, null)
-        }), (_c = slots.footer) == null ? void 0 : _c.call(slots)]);
+        }), (_d = slots.footer) == null ? void 0 : _d.call(slots)]);
       };
     }
   });
@@ -39436,6 +39447,8 @@
     const toggleMenu = () => {
       if (selectDisabled.value)
         return;
+      if (props.filterable && props.remote && isFunction$1(props.remoteMethod))
+        return;
       if (states.menuVisibleOnFocus) {
         states.menuVisibleOnFocus = false;
       } else {
@@ -39443,6 +39456,9 @@
       }
     };
     const onInputChange = () => {
+      if (states.inputValue.length > 0 && !expanded.value) {
+        expanded.value = true;
+      }
       createNewOption(states.inputValue);
       handleQueryChange(states.inputValue);
     };
@@ -39680,9 +39696,6 @@
     };
     const onInput = (event) => {
       states.inputValue = event.target.value;
-      if (states.inputValue.length > 0 && !expanded.value) {
-        expanded.value = true;
-      }
       if (props.remote) {
         debouncedOnInputChange();
       } else {
@@ -40193,13 +40206,6 @@
             default: vue.withCtx((scope) => [
               vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps(scope)))
             ]),
-            empty: vue.withCtx(() => [
-              vue.renderSlot(_ctx.$slots, "empty", {}, () => [
-                vue.createElementVNode("p", {
-                  class: vue.normalizeClass(_ctx.nsSelect.be("dropdown", "empty"))
-                }, vue.toDisplayString(_ctx.emptyText ? _ctx.emptyText : ""), 3)
-              ])
-            ]),
             _: 2
           }, [
             _ctx.$slots.header ? {
@@ -40212,6 +40218,27 @@
                 ], 2)
               ])
             } : void 0,
+            _ctx.$slots.loading && _ctx.loading ? {
+              name: "loading",
+              fn: vue.withCtx(() => [
+                vue.createElementVNode("div", {
+                  class: vue.normalizeClass(_ctx.nsSelect.be("dropdown", "loading"))
+                }, [
+                  vue.renderSlot(_ctx.$slots, "loading")
+                ], 2)
+              ])
+            } : _ctx.loading || _ctx.filteredOptions.length === 0 ? {
+              name: "empty",
+              fn: vue.withCtx(() => [
+                vue.createElementVNode("div", {
+                  class: vue.normalizeClass(_ctx.nsSelect.be("dropdown", "empty"))
+                }, [
+                  vue.renderSlot(_ctx.$slots, "empty", {}, () => [
+                    vue.createElementVNode("span", null, vue.toDisplayString(_ctx.emptyText), 1)
+                  ])
+                ], 2)
+              ])
+            } : void 0,
             _ctx.$slots.footer ? {
               name: "footer",
               fn: vue.withCtx(() => [
@@ -41306,19 +41333,18 @@
     const horizontalSize = vue.ref(0);
     const verticalSize = vue.ref(0);
     const containerStyle = vue.computed(() => {
-      const wrapKls = props.wrap || props.fill ? { flexWrap: "wrap", marginBottom: `-${verticalSize.value}px` } : {};
+      const wrapKls = props.wrap || props.fill ? { flexWrap: "wrap" } : {};
       const alignment = {
         alignItems: props.alignment
       };
-      return [wrapKls, alignment, props.style];
+      const gap = {
+        rowGap: `${verticalSize.value}px`,
+        columnGap: `${horizontalSize.value}px`
+      };
+      return [wrapKls, alignment, gap, props.style];
     });
     const itemStyle = vue.computed(() => {
-      const itemBaseStyle = {
-        paddingBottom: `${verticalSize.value}px`,
-        marginRight: `${horizontalSize.value}px`
-      };
-      const fillStyle = props.fill ? { flexGrow: 1, minWidth: `${props.fillRatio}%` } : {};
-      return [itemBaseStyle, fillStyle];
+      return props.fill ? { flexGrow: 1, minWidth: `${props.fillRatio}%` } : {};
     });
     vue.watchEffect(() => {
       const { size = "small", wrap, direction: dir, fill } = props;
@@ -54996,15 +55022,27 @@
 
   const useTarget = (target, open, gap, mergedMask, scrollIntoViewOptions) => {
     const posInfo = vue.ref(null);
+    const getTargetEl = () => {
+      let targetEl;
+      if (isString$1(target.value)) {
+        targetEl = document.querySelector(target.value);
+      } else if (isFunction$1(target.value)) {
+        targetEl = target.value();
+      } else {
+        targetEl = target.value;
+      }
+      return targetEl;
+    };
     const updatePosInfo = () => {
-      if (!target.value || !open.value) {
+      const targetEl = getTargetEl();
+      if (!targetEl || !open.value) {
         posInfo.value = null;
         return;
       }
-      if (!isInViewPort(target.value) && open.value) {
-        target.value.scrollIntoView(scrollIntoViewOptions.value);
+      if (!isInViewPort(targetEl) && open.value) {
+        targetEl.scrollIntoView(scrollIntoViewOptions.value);
       }
-      const { left, top, width, height } = target.value.getBoundingClientRect();
+      const { left, top, width, height } = targetEl.getBoundingClientRect();
       posInfo.value = {
         left,
         top,
@@ -55044,8 +55082,9 @@
       };
     });
     const triggerTarget = vue.computed(() => {
-      if (!mergedMask.value || !target.value || !window.DOMRect) {
-        return target.value || void 0;
+      const targetEl = getTargetEl();
+      if (!mergedMask.value || !targetEl || !window.DOMRect) {
+        return targetEl || void 0;
       }
       return {
         getBoundingClientRect() {
@@ -55639,7 +55678,7 @@
 
   const tourStepProps = buildProps({
     target: {
-      type: definePropType(Object)
+      type: definePropType([String, Object, Function])
     },
     title: String,
     description: String,