@element-plus/nightly 0.0.20230130 → 0.0.20230131

package/dist/index.full.js

@@ -1,4 +1,4 @@
-/*! Element Plus v0.0.20230130 */
+/*! Element Plus v0.0.20230131 */
 
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
@@ -9743,7 +9743,7 @@
     return {
       state: vue.computed(() => {
         var _a;
-        return (_a = vue.unref(instanceRef)) == null ? void 0 : _a.state;
+        return { ...((_a = vue.unref(instanceRef)) == null ? void 0 : _a.state) || {} };
       }),
       styles: vue.computed(() => vue.unref(states).styles),
       attributes: vue.computed(() => vue.unref(states).attributes),
@@ -9760,7 +9760,7 @@
   };
   function deriveState(state) {
     const elements = Object.keys(state.elements);
-    const styles = fromPairs(elements.map((element) => [element, state.elements[element] || {}]));
+    const styles = fromPairs(elements.map((element) => [element, state.styles[element] || {}]));
     const attributes = fromPairs(elements.map((element) => [element, state.attributes[element]]));
     return {
       styles,
@@ -11202,7 +11202,7 @@
     };
   };
 
-  const version$1 = "0.0.20230130";
+  const version$1 = "0.0.20230131";
 
   const makeInstaller = (components = []) => {
     const install = (app, options) => {
@@ -12627,7 +12627,7 @@
     setup(__props, { expose }) {
       const props = __props;
       const ns = useNamespace("popper");
-      const { arrowOffset, arrowRef } = vue.inject(POPPER_CONTENT_INJECTION_KEY, void 0);
+      const { arrowOffset, arrowRef, arrowStyle } = vue.inject(POPPER_CONTENT_INJECTION_KEY, void 0);
       vue.watch(() => props.arrowOffset, (val) => {
         arrowOffset.value = val;
       });
@@ -12642,8 +12642,9 @@
           ref_key: "arrowRef",
           ref: arrowRef,
           class: vue.normalizeClass(vue.unref(ns).e("arrow")),
+          style: vue.normalizeStyle(vue.unref(arrowStyle)),
           "data-popper-arrow": ""
-        }, null, 2);
+        }, null, 6);
       };
     }
   });
@@ -13323,15 +13324,14 @@
   const usePopperContentProps = popperContentProps;
   const usePopperContentEmits = popperContentEmits;
 
-  const buildPopperOptions = (props, arrowProps) => {
+  const buildPopperOptions = (props, modifiers = []) => {
     const { placement, strategy, popperOptions } = props;
     const options = {
       placement,
       strategy,
       ...popperOptions,
-      modifiers: genModifiers(props)
+      modifiers: [...genModifiers(props), ...modifiers]
     };
-    attachArrow(options, arrowProps);
     deriveExtraModifiers(options, popperOptions == null ? void 0 : popperOptions.modifiers);
     return options;
   };
@@ -13375,21 +13375,153 @@
       }
     ];
   }
-  function attachArrow(options, { arrowEl, arrowOffset }) {
-    options.modifiers.push({
-      name: "arrow",
-      options: {
-        element: arrowEl,
-        padding: arrowOffset != null ? arrowOffset : 5
-      }
-    });
-  }
   function deriveExtraModifiers(options, modifiers) {
     if (modifiers) {
       options.modifiers = [...options.modifiers, ...modifiers != null ? modifiers : []];
     }
   }
 
+  const DEFAULT_ARROW_OFFSET = 0;
+  const usePopperContent = (props) => {
+    const { popperInstanceRef, contentRef, triggerRef, role } = vue.inject(POPPER_INJECTION_KEY, void 0);
+    const arrowRef = vue.ref();
+    const arrowOffset = vue.ref();
+    const eventListenerModifier = vue.computed(() => {
+      return {
+        name: "eventListeners",
+        enabled: !!props.visible
+      };
+    });
+    const arrowModifier = vue.computed(() => {
+      var _a;
+      const arrowEl = vue.unref(arrowRef);
+      const offset = (_a = vue.unref(arrowOffset)) != null ? _a : DEFAULT_ARROW_OFFSET;
+      return {
+        name: "arrow",
+        enabled: !isUndefined$1(arrowEl),
+        options: {
+          element: arrowEl,
+          padding: offset
+        }
+      };
+    });
+    const options = vue.computed(() => {
+      return {
+        onFirstUpdate: () => {
+          update();
+        },
+        ...buildPopperOptions(props, [
+          vue.unref(arrowModifier),
+          vue.unref(eventListenerModifier)
+        ])
+      };
+    });
+    const computedReference = vue.computed(() => unwrapMeasurableEl(props.referenceEl) || vue.unref(triggerRef));
+    const { attributes, state, styles, update, forceUpdate, instanceRef } = usePopper(computedReference, contentRef, options);
+    vue.watch(instanceRef, (instance) => popperInstanceRef.value = instance);
+    vue.onMounted(() => {
+      vue.watch(() => {
+        var _a;
+        return (_a = vue.unref(computedReference)) == null ? void 0 : _a.getBoundingClientRect();
+      }, () => {
+        update();
+      });
+    });
+    return {
+      attributes,
+      arrowRef,
+      contentRef,
+      instanceRef,
+      state,
+      styles,
+      role,
+      forceUpdate,
+      update
+    };
+  };
+
+  const usePopperContentDOM = (props, {
+    attributes,
+    styles,
+    role
+  }) => {
+    const { nextZIndex } = useZIndex();
+    const ns = useNamespace("popper");
+    const contentAttrs = vue.computed(() => vue.unref(attributes).popper);
+    const contentZIndex = vue.ref(props.zIndex || nextZIndex());
+    const contentClass = vue.computed(() => [
+      ns.b(),
+      ns.is("pure", props.pure),
+      ns.is(props.effect),
+      props.popperClass
+    ]);
+    const contentStyle = vue.computed(() => {
+      return [
+        { zIndex: vue.unref(contentZIndex) },
+        props.popperStyle || {},
+        vue.unref(styles).popper
+      ];
+    });
+    const ariaModal = vue.computed(() => role.value === "dialog" ? "false" : void 0);
+    const arrowStyle = vue.computed(() => vue.unref(styles).arrow || {});
+    const updateZIndex = () => {
+      contentZIndex.value = props.zIndex || nextZIndex();
+    };
+    return {
+      ariaModal,
+      arrowStyle,
+      contentAttrs,
+      contentClass,
+      contentStyle,
+      contentZIndex,
+      updateZIndex
+    };
+  };
+
+  const usePopperContentFocusTrap = (props, emit) => {
+    const trapped = vue.ref(false);
+    const focusStartRef = vue.ref();
+    const onFocusAfterTrapped = () => {
+      emit("focus");
+    };
+    const onFocusAfterReleased = (event) => {
+      var _a;
+      if (((_a = event.detail) == null ? void 0 : _a.focusReason) !== "pointer") {
+        focusStartRef.value = "first";
+        emit("blur");
+      }
+    };
+    const onFocusInTrap = (event) => {
+      if (props.visible && !trapped.value) {
+        if (event.target) {
+          focusStartRef.value = event.target;
+        }
+        trapped.value = true;
+      }
+    };
+    const onFocusoutPrevented = (event) => {
+      if (!props.trapping) {
+        if (event.detail.focusReason === "pointer") {
+          event.preventDefault();
+        }
+        trapped.value = false;
+      }
+    };
+    const onReleaseRequested = () => {
+      trapped.value = false;
+      emit("close");
+    };
+    return {
+      focusStartRef,
+      trapped,
+      onFocusAfterReleased,
+      onFocusAfterTrapped,
+      onFocusInTrap,
+      onFocusoutPrevented,
+      onReleaseRequested
+    };
+  };
+
   const __default__$1r = vue.defineComponent({
     name: "ElPopperContent"
   });
@@ -13399,15 +13531,33 @@
     emits: popperContentEmits,
     setup(__props, { expose, emit }) {
       const props = __props;
-      const { popperInstanceRef, contentRef, triggerRef, role } = vue.inject(POPPER_INJECTION_KEY, void 0);
+      const {
+        focusStartRef,
+        trapped,
+        onFocusAfterReleased,
+        onFocusAfterTrapped,
+        onFocusInTrap,
+        onFocusoutPrevented,
+        onReleaseRequested
+      } = usePopperContentFocusTrap(props, emit);
+      const { attributes, arrowRef, contentRef, styles, instanceRef, role, update } = usePopperContent(props);
+      const {
+        ariaModal,
+        arrowStyle,
+        contentAttrs,
+        contentClass,
+        contentStyle,
+        updateZIndex
+      } = usePopperContentDOM(props, {
+        styles,
+        attributes,
+        role
+      });
       const formItemContext = vue.inject(formItemContextKey, void 0);
-      const { nextZIndex } = useZIndex();
-      const ns = useNamespace("popper");
       const popperContentRef = vue.ref();
-      const focusStartRef = vue.ref("first");
-      const arrowRef = vue.ref();
       const arrowOffset = vue.ref();
       vue.provide(POPPER_CONTENT_INJECTION_KEY, {
+        arrowStyle,
         arrowRef,
         arrowOffset
       });
@@ -13418,43 +13568,12 @@
           removeInputId: NOOP
         });
       }
-      const contentZIndex = vue.ref(props.zIndex || nextZIndex());
-      const trapped = vue.ref(false);
       let triggerTargetAriaStopWatch = void 0;
-      const computedReference = vue.computed(() => unwrapMeasurableEl(props.referenceEl) || vue.unref(triggerRef));
-      const contentStyle = vue.computed(() => [{ zIndex: vue.unref(contentZIndex) }, props.popperStyle]);
-      const contentClass = vue.computed(() => [
-        ns.b(),
-        ns.is("pure", props.pure),
-        ns.is(props.effect),
-        props.popperClass
-      ]);
-      const ariaModal = vue.computed(() => {
-        return role && role.value === "dialog" ? "false" : void 0;
-      });
-      const createPopperInstance = ({
-        referenceEl,
-        popperContentEl,
-        arrowEl
-      }) => {
-        const options = buildPopperOptions(props, {
-          arrowEl,
-          arrowOffset: vue.unref(arrowOffset)
-        });
-        return yn(referenceEl, popperContentEl, options);
-      };
       const updatePopper = (shouldUpdateZIndex = true) => {
-        var _a;
-        (_a = vue.unref(popperInstanceRef)) == null ? void 0 : _a.update();
-        shouldUpdateZIndex && (contentZIndex.value = props.zIndex || nextZIndex());
+        update();
+        shouldUpdateZIndex && updateZIndex();
       };
       const togglePopperAlive = () => {
-        var _a, _b;
-        const monitorable = { name: "eventListeners", enabled: props.visible };
-        (_b = (_a = vue.unref(popperInstanceRef)) == null ? void 0 : _a.setOptions) == null ? void 0 : _b.call(_a, (options) => ({
-          ...options,
-          modifiers: [...options.modifiers || [], monitorable]
-        }));
         updatePopper(false);
         if (props.visible && props.focusOnShow) {
           trapped.value = true;
@@ -13462,60 +13581,7 @@
           trapped.value = false;
         }
       };
-      const onFocusAfterTrapped = () => {
-        emit("focus");
-      };
-      const onFocusAfterReleased = (event) => {
-        var _a;
-        if (((_a = event.detail) == null ? void 0 : _a.focusReason) !== "pointer") {
-          focusStartRef.value = "first";
-          emit("blur");
-        }
-      };
-      const onFocusInTrap = (event) => {
-        if (props.visible && !trapped.value) {
-          if (event.target) {
-            focusStartRef.value = event.target;
-          }
-          trapped.value = true;
-        }
-      };
-      const onFocusoutPrevented = (event) => {
-        if (!props.trapping) {
-          if (event.detail.focusReason === "pointer") {
-            event.preventDefault();
-          }
-          trapped.value = false;
-        }
-      };
-      const onReleaseRequested = () => {
-        trapped.value = false;
-        emit("close");
-      };
       vue.onMounted(() => {
-        let updateHandle;
-        vue.watch(computedReference, (referenceEl) => {
-          var _a;
-          updateHandle == null ? void 0 : updateHandle();
-          const popperInstance = vue.unref(popperInstanceRef);
-          (_a = popperInstance == null ? void 0 : popperInstance.destroy) == null ? void 0 : _a.call(popperInstance);
-          if (referenceEl) {
-            const popperContentEl = vue.unref(popperContentRef);
-            contentRef.value = popperContentEl;
-            popperInstanceRef.value = createPopperInstance({
-              referenceEl,
-              popperContentEl,
-              arrowEl: vue.unref(arrowRef)
-            });
-            updateHandle = vue.watch(() => referenceEl.getBoundingClientRect(), () => updatePopper(), {
-              immediate: true
-            });
-          } else {
-            popperInstanceRef.value = void 0;
-          }
-        }, {
-          immediate: true
-        });
         vue.watch(() => props.triggerTargetEl, (triggerTargetEl, prevTriggerTargetEl) => {
           triggerTargetAriaStopWatch == null ? void 0 : triggerTargetAriaStopWatch();
           triggerTargetAriaStopWatch = void 0;
@@ -13535,13 +13601,6 @@
           }
         }, { immediate: true });
         vue.watch(() => props.visible, togglePopperAlive, { immediate: true });
-        vue.watch(() => buildPopperOptions(props, {
-          arrowEl: vue.unref(arrowRef),
-          arrowOffset: vue.unref(arrowOffset)
-        }), (option) => {
-          var _a;
-          return (_a = popperInstanceRef.value) == null ? void 0 : _a.setOptions(option);
-        });
       });
       vue.onBeforeUnmount(() => {
         triggerTargetAriaStopWatch == null ? void 0 : triggerTargetAriaStopWatch();
@@ -13549,37 +13608,38 @@
       });
       expose({
         popperContentRef,
-        popperInstanceRef,
+        popperInstanceRef: instanceRef,
         updatePopper,
         contentStyle
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", {
-          ref_key: "popperContentRef",
-          ref: popperContentRef,
-          style: vue.normalizeStyle(vue.unref(contentStyle)),
-          class: vue.normalizeClass(vue.unref(contentClass)),
+        return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+          ref_key: "contentRef",
+          ref: contentRef
+        }, vue.unref(contentAttrs), {
+          style: vue.unref(contentStyle),
+          class: vue.unref(contentClass),
           tabindex: "-1",
           onMouseenter: _cache[0] || (_cache[0] = (e) => _ctx.$emit("mouseenter", e)),
           onMouseleave: _cache[1] || (_cache[1] = (e) => _ctx.$emit("mouseleave", e))
-        }, [
+        }), [
           vue.createVNode(vue.unref(ElFocusTrap), {
-            trapped: trapped.value,
+            trapped: vue.unref(trapped),
             "trap-on-focus-in": true,
             "focus-trap-el": popperContentRef.value,
-            "focus-start-el": focusStartRef.value,
-            onFocusAfterTrapped,
-            onFocusAfterReleased,
-            onFocusin: onFocusInTrap,
-            onFocusoutPrevented,
-            onReleaseRequested
+            "focus-start-el": vue.unref(focusStartRef),
+            onFocusAfterTrapped: vue.unref(onFocusAfterTrapped),
+            onFocusAfterReleased: vue.unref(onFocusAfterReleased),
+            onFocusin: vue.unref(onFocusInTrap),
+            onFocusoutPrevented: vue.unref(onFocusoutPrevented),
+            onReleaseRequested: vue.unref(onReleaseRequested)
           }, {
             default: vue.withCtx(() => [
               vue.renderSlot(_ctx.$slots, "default")
             ]),
             _: 3
-          }, 8, ["trapped", "focus-trap-el", "focus-start-el"])
-        ], 38);
+          }, 8, ["trapped", "focus-trap-el", "focus-start-el", "onFocusAfterTrapped", "onFocusAfterReleased", "onFocusin", "onFocusoutPrevented", "onReleaseRequested"])
+        ], 16);
       };
     }
   });