x-next 1.10.0 → 1.11.0

package/dist/es/components/trigger/Trigger.js

@@ -1,19 +1,19 @@
-import { defineComponent as Ee, toRefs as Oe, computed as P, inject as Be, ref as i, provide as Fe, reactive as Ae, watch as F, nextTick as I, onMounted as Le, onUpdated as ke, onDeactivated as De, onBeforeUnmount as ze, createVNode as c, Fragment as Ve, Teleport as je, mergeProps as Ne, Transition as We, withDirectives as xe, vShow as Ie } from "vue";
-import { getElementScrollRect as ne, getPopupStyle as $e, getTransformOrigin as Ge, getArrowStyle as He, getScrollElements as Ue } from "./utils.js";
-import ue from "../../_container/resize-observer-v2.js";
-import { on as $, off as ae } from "../../_utils/dom.js";
-import { isEmptyChildren as Ke, mergeFirstChild as Xe } from "../../_utils/vue-eco.js";
-import Ye from "../../_hooks/use-pick-slots.js";
-import { triggerInjectionKey as ie } from "./context.js";
-import { throttleByRaf as _e } from "../../_utils/throttle-by-raf.js";
-import qe from "../../_hooks/use-popup-manager.js";
-import { useResizeObserver as Je } from "../../_hooks/use-resize-observer.js";
-import Qe from "../../_container/client-only.js";
-import { useTeleportContainer as Ze } from "../../_hooks/use-teleport-container.js";
-import { useFirstElement as eo } from "../../_hooks/use-first-element.js";
-import { omit as oo } from "../../_utils/omit.js";
-import { getClassNameMixin as to } from "../../_utils/config.js";
-const lo = ["onClick", "onMouseenter", "onMouseleave", "onFocusin", "onFocusout", "onContextmenu"], So = /* @__PURE__ */ Ee({
+import { defineComponent as Fe, toRefs as Ae, computed as L, inject as Le, ref as i, provide as ke, reactive as De, watch as P, nextTick as k, onMounted as je, onUpdated as ze, onDeactivated as Ne, onBeforeUnmount as Ve, createVNode as c, Fragment as We, Teleport as xe, mergeProps as Ie, Transition as $e, withDirectives as Ge, vShow as He } from "vue";
+import { getElementScrollRect as ae, getPopupStyle as Ue, getTransformOrigin as Ke, getArrowStyle as Xe, getScrollElements as ie } from "./utils.js";
+import se from "../../_container/resize-observer-v2.js";
+import { on as $, off as ce } from "../../_utils/dom.js";
+import { isEmptyChildren as Ye, mergeFirstChild as _e } from "../../_utils/vue-eco.js";
+import qe from "../../_hooks/use-pick-slots.js";
+import { triggerInjectionKey as re } from "./context.js";
+import { throttleByRaf as Je } from "../../_utils/throttle-by-raf.js";
+import Qe from "../../_hooks/use-popup-manager.js";
+import { useResizeObserver as Ze } from "../../_hooks/use-resize-observer.js";
+import eo from "../../_container/client-only.js";
+import { useTeleportContainer as oo } from "../../_hooks/use-teleport-container.js";
+import { usePopupTheme as to } from "../../_hooks/use-popup-theme.js";
+import { useFirstElement as lo } from "../../_hooks/use-first-element.js";
+import { getClassNameMixin as no } from "../../_utils/config.js";
+const uo = ["onClick", "onMouseenter", "onMouseleave", "onFocusin", "onFocusout", "onContextmenu"], Ro = /* @__PURE__ */ Fe({
   name: "Trigger",
   inheritAttrs: !1,
   props: {
@@ -329,33 +329,36 @@ const lo = ["onClick", "onMouseenter", "onMouseleave", "onFocusin", "onFocusout"
    */
   setup(o, {
     emit: C,
-    slots: f,
+    slots: v,
     attrs: n
   }) {
     const {
-      popupContainer: se
-    } = Oe(o), b = to("trigger"), ce = P(() => oo(n, lo)), m = P(() => [].concat(o.trigger)), A = /* @__PURE__ */ new Set(), u = Be(ie, void 0), {
-      children: M,
-      firstElement: g
-    } = eo(), v = i(), G = i(o.defaultPopupVisible), E = i(o.position), H = i({}), U = i({}), K = i({}), S = i(!1), re = i(), r = i({
+      popupContainer: de
+    } = Ae(o), b = no("trigger"), {
+      popupThemeStyle: fe,
+      popupThemeName: me
+    } = to(), ve = () => Object.fromEntries(Object.entries(n).filter(([e]) => ![...uo, "class", "style"].includes(e))), p = L(() => [].concat(o.trigger)), D = /* @__PURE__ */ new Set(), u = Le(re, void 0), {
+      children: E,
+      firstElement: T
+    } = lo(), f = i(), G = i(o.defaultPopupVisible), M = i(o.position), H = i({}), U = i({}), K = i({}), S = i(!1), pe = i(), r = i({
       top: 0,
       left: 0
-    }), L = /* @__PURE__ */ new Map(), l = P(() => o.popupVisible ?? G.value), {
-      teleportContainer: de,
-      containerRef: k
-    } = Ze({
-      popupContainer: se,
+    }), j = /* @__PURE__ */ new Map(), l = L(() => o.popupVisible ?? G.value), {
+      teleportContainer: ye,
+      containerRef: O
+    } = oo({
+      popupContainer: de,
       visible: l,
       documentContainer: !0
     }), {
-      zIndex: fe
-    } = qe("popup", {
+      zIndex: he
+    } = Qe("popup", {
       visible: l
     });
-    let T = 0, p = !1;
-    const me = () => {
-      T && (window.clearTimeout(T), T = 0);
-    }, D = (e) => {
+    let g = 0, y = !1;
+    const X = () => {
+      g && (window.clearTimeout(g), g = 0);
+    }, z = (e) => {
       if (o.alignPoint) {
         const {
           pageX: t,
@@ -366,12 +369,12 @@ const lo = ["onClick", "onMouseenter", "onMouseleave", "onFocusin", "onFocusout"
           left: t
         };
       }
-    }, X = () => {
+    }, Y = () => {
       S.value = !0;
-    }, y = () => {
-      if (!g.value || !v.value || !k.value)
+    }, m = () => {
+      if (!T.value || !f.value || !O.value)
         return;
-      const e = k.value.getBoundingClientRect(), t = o.alignPoint ? {
+      const e = O.value.getBoundingClientRect(), t = o.alignPoint ? {
         top: r.value.top,
         bottom: r.value.top,
         left: r.value.left,
@@ -382,214 +385,219 @@ const lo = ["onClick", "onMouseenter", "onMouseleave", "onFocusin", "onFocusout"
         scrollRight: r.value.left,
         width: 0,
         height: 0
-      } : ne(g.value, e), a = () => (
+      } : ae(T.value, e), a = () => (
         // @ts-ignore
-        ne(v.value, e)
+        ae(f.value, e)
       ), d = a(), {
         style: h,
         position: w
-      } = $e(o.position, e, t, d, {
+      } = Ue(o.position, e, t, d, {
         offset: o.popupOffset,
         translate: o.popupTranslate,
         customStyle: o.popupStyle,
         autoFitPosition: o.autoFitPosition
       });
       o.autoFitTransformOrigin && (U.value = {
-        transformOrigin: Ge(w)
-      }), o.autoFitPopupMinWidth ? h.minWidth = `${t.width}px` : o.autoFitPopupWidth && (h.width = `${t.width}px`), E.value !== w && (E.value = w), H.value = h, o.showArrow ? I(() => {
-        K.value = He(w, t, a(), {
+        transformOrigin: Ke(w)
+      }), o.autoFitPopupMinWidth ? h.minWidth = `${t.width}px` : o.autoFitPopupWidth && (h.width = `${t.width}px`), M.value !== w && (M.value = w), H.value = h, o.showArrow ? k(() => {
+        K.value = Xe(w, t, a(), {
           customStyle: o.arrowStyle
-        }), X();
-      }) : X();
+        }), Y();
+      }) : Y();
     }, s = (e, t) => {
-      const a = T !== 0;
+      const a = g !== 0;
       if (e === l.value && !a)
         return;
       const d = () => {
-        e && (S.value = !1), G.value = e, C("update:popupVisible", e), C("popupVisibleChange", e), e && I(() => {
-          y();
+        e && (S.value = !1), G.value = e, C("update:popupVisible", e), C("popupVisibleChange", e), e && k(() => {
+          m();
         });
       };
-      if (me(), t) {
-        e !== l.value && (T = window.setTimeout(d, t));
+      if (X(), t) {
+        e !== l.value && (g = window.setTimeout(d, t));
         return;
       }
       e === l.value && a || d();
-    }, ve = (e) => {
-      var t;
-      (t = n.onClick) == null || t.call(n, e), !(o.disabled || l.value && !o.clickToClose) && (m.value.includes("click") ? (D(e), s(!l.value)) : m.value.includes("contextMenu") && l.value && s(!1));
-    }, Y = (e) => {
+    }, we = (e) => {
       var t;
-      (t = n.onMouseenter) == null || t.call(n, e), !(o.disabled || !m.value.includes("hover")) && (D(e), s(!0, o.mouseEnterDelay));
+      (t = n.onClick) == null || t.call(n, e), !(o.disabled || l.value && !o.clickToClose) && (p.value.includes("click") ? (z(e), s(!l.value)) : p.value.includes("contextMenu") && l.value && s(!1));
     }, _ = (e) => {
-      u == null || u.onMouseenter(e), Y(e);
-    }, q = (e) => {
       var t;
-      (t = n.onMouseleave) == null || t.call(n, e), !(o.disabled || !m.value.includes("hover")) && s(!1, o.mouseLeaveDelay);
+      (t = n.onMouseenter) == null || t.call(n, e), !(o.disabled || !p.value.includes("hover")) && (z(e), s(!0, o.mouseEnterDelay));
+    }, q = (e) => {
+      u == null || u.onMouseenter(e), _(e);
     }, J = (e) => {
-      u == null || u.onMouseleave(e), q(e);
-    }, pe = (e) => {
       var t;
-      (t = n.onFocusin) == null || t.call(n, e), !(o.disabled || !m.value.includes("focus")) && s(!0, o.focusDelay);
-    }, ye = (e) => {
+      (t = n.onMouseleave) == null || t.call(n, e), !(o.disabled || !p.value.includes("hover")) && s(!1, o.mouseLeaveDelay);
+    }, Q = (e) => {
+      u == null || u.onMouseleave(e), J(e);
+    }, Ce = (e) => {
+      var t;
+      (t = n.onFocusin) == null || t.call(n, e), !(o.disabled || !p.value.includes("focus")) && s(!0, o.focusDelay);
+    }, be = (e) => {
       var t;
-      (t = n.onFocusout) == null || t.call(n, e), !(o.disabled || !m.value.includes("focus")) && o.blurToClose && s(!1);
-    }, he = (e) => {
+      (t = n.onFocusout) == null || t.call(n, e), !(o.disabled || !p.value.includes("focus")) && o.blurToClose && s(!1);
+    }, Te = (e) => {
       var t;
-      (t = n.onContextmenu) == null || t.call(n, e), !(o.disabled || !m.value.includes("contextMenu") || l.value && !o.clickToClose) && (D(e), s(!l.value), e.preventDefault());
+      (t = n.onContextmenu) == null || t.call(n, e), !(o.disabled || !p.value.includes("contextMenu") || l.value && !o.clickToClose) && (z(e), s(!l.value), e.preventDefault());
     };
-    Fe(ie, Ae({
-      onMouseenter: _,
-      onMouseleave: J,
+    ke(re, De({
+      onMouseenter: q,
+      onMouseleave: Q,
       addChildRef: (e) => {
-        A.add(e), u == null || u.addChildRef(e);
+        D.add(e), u == null || u.addChildRef(e);
       },
       removeChildRef: (e) => {
-        A.delete(e), u == null || u.removeChildRef(e);
+        D.delete(e), u == null || u.removeChildRef(e);
       }
     }));
-    const z = () => {
-      ae(document.documentElement, "mousedown", j), p = !1;
-    }, V = Ye(f, "content"), we = P(() => {
+    const N = () => {
+      ce(document.documentElement, "mousedown", W), y = !1;
+    }, V = qe(v, "content"), Se = L(() => {
       var e;
-      return o.hideEmpty && Ke((e = V.value) == null ? void 0 : e.call(V));
-    }), j = (e) => {
+      return o.hideEmpty && Ye((e = V.value) == null ? void 0 : e.call(V));
+    }), W = (e) => {
       var t, a, d;
-      if (!((t = g.value) != null && t.contains(e.target) || (a = v.value) != null && a.contains(e.target))) {
-        for (const h of A)
+      if (!((t = T.value) != null && t.contains(e.target) || (a = f.value) != null && a.contains(e.target))) {
+        for (const h of D)
           if ((d = h.value) != null && d.contains(e.target))
             return;
-        z(), s(!1);
+        N(), s(!1);
       }
-    }, Ce = (e, t) => {
+    }, ge = (e, t) => {
       const [a, d] = e, {
         scrollTop: h,
         scrollLeft: w
       } = t;
       return Math.abs(h - a) >= o.scrollToCloseDistance || Math.abs(w - d) >= o.scrollToCloseDistance;
-    }, Q = (e) => {
+    }, Z = (e) => {
       if (!l.value) return;
-      const t = L.get(e);
-      o.scrollToClose && t && Ce(t, e) ? s(!1) : o.updateAtScroll && oe();
-    }, Z = (e) => Q(e.currentTarget), ee = () => Q(document.scrollingElement ?? document.documentElement), oe = _e(() => {
-      l.value && y();
+      const t = j.get(e);
+      o.scrollToClose && t && ge(t, e) ? s(!1) : o.updateAtScroll && te();
+    }, ee = (e) => Z(e.currentTarget), oe = () => Z(document.scrollingElement ?? document.documentElement), te = Je(() => {
+      l.value && m();
     });
-    let R = [], N = !1;
-    const te = () => {
+    let R = [], x = !1;
+    const le = () => {
       for (const e of R)
-        e.removeEventListener("scroll", Z);
-      N && (ae(window, "scroll", ee), N = !1), R = [], L.clear(), oe.cancel();
-    }, W = () => {
-      if (te(), !l.value || !(o.updateAtScroll || o.scrollToClose)) return;
-      R = Ue(g.value);
+        e.removeEventListener("scroll", ee);
+      x && (ce(window, "scroll", oe), x = !1), R = [], j.clear(), te.cancel();
+    }, B = () => {
+      if (le(), !l.value || !(o.updateAtScroll || o.scrollToClose)) return;
+      R = [.../* @__PURE__ */ new Set([...ie(T.value), ...ie(f.value)])];
       const e = document.scrollingElement ?? document.documentElement;
       for (const t of [...R, e])
-        L.set(t, [t.scrollTop, t.scrollLeft]);
+        j.set(t, [t.scrollTop, t.scrollLeft]);
       for (const t of R)
-        t.addEventListener("scroll", Z, {
+        t.addEventListener("scroll", ee, {
           passive: !0
         });
-      $(window, "scroll", ee, {
+      $(window, "scroll", oe, {
         passive: !0
-      }), N = !0;
-    }, x = () => {
-      l.value && y();
-    }, be = () => {
-      x(), C("resize");
-    }, ge = (e) => {
+      }), x = !0;
+    }, I = () => {
+      l.value && m();
+    }, Re = () => {
+      I(), C("resize");
+    }, Pe = (e) => {
       o.preventFocus && e.preventDefault();
     };
-    u == null || u.addChildRef(v);
-    const Se = P(() => l.value ? o.openedClass : void 0);
-    F(l, (e) => {
-      o.clickOutsideToClose && (!e && p ? z() : e && !p && ($(document.documentElement, "mousedown", j), p = !0)), W(), e && (S.value = !1, O.value = !0);
-    }), F(() => [o.updateAtScroll, o.scrollToClose, g.value], W), F(v, (e) => {
-      e && l.value && !S.value && I(() => y());
-    }), F(() => [o.autoFitPopupWidth, o.autoFitPopupMinWidth], () => {
-      l.value && y();
+    u == null || u.addChildRef(f);
+    const Ee = L(() => l.value ? o.openedClass : void 0);
+    P(l, (e) => {
+      o.clickOutsideToClose && (!e && y ? N() : e && !y && ($(document.documentElement, "mousedown", W), y = !0)), B(), e && (S.value = !1, F.value = !0);
+    }), P(() => [o.updateAtScroll, o.scrollToClose, T.value], B), P(f, (e) => {
+      e && l.value && !S.value && k(() => m());
+    }), P(() => [o.autoFitPopupWidth, o.autoFitPopupMinWidth], () => {
+      l.value && m();
     });
     const {
-      createResizeObserver: Te,
-      destroyResizeObserver: Re
-    } = Je({
-      elementRef: k,
-      onResize: x
+      createResizeObserver: Me,
+      destroyResizeObserver: ne
+    } = Ze({
+      elementRef: O,
+      onResize: I
     });
-    Le(() => {
-      Te(), l.value && (O.value = !0, y(), o.clickOutsideToClose && !p && ($(document.documentElement, "mousedown", j), p = !0), W());
-    }), ke(() => {
-      l.value && y();
-    }), De(() => {
-      s(!1);
+    P(O, () => {
+      ne(), Me(), B(), l.value && k(m);
+    }, {
+      flush: "post"
+    }), je(() => {
+      l.value && (F.value = !0, m(), o.clickOutsideToClose && !y && ($(document.documentElement, "mousedown", W), y = !0), B());
     }), ze(() => {
-      u == null || u.removeChildRef(v), Re(), p && z(), te();
+      l.value && m();
+    }), Ne(() => {
+      s(!1);
+    }), Ve(() => {
+      X(), u == null || u.removeChildRef(f), ne(), y && N(), le();
     });
-    const O = i(l.value), B = i(!1), le = () => {
-      B.value = !0;
-    }, Pe = () => {
-      B.value = !1, l.value && C("show");
-    }, Me = () => {
-      B.value = !1, l.value || (O.value = !1, C("hide"));
+    const F = i(l.value), A = i(!1), ue = () => {
+      A.value = !0;
+    }, Oe = () => {
+      A.value = !1, l.value && C("show");
+    }, Be = () => {
+      A.value = !1, l.value || (F.value = !1, C("hide"));
     };
     return () => {
       var e;
-      return M.value = ((e = f.default) == null ? void 0 : e.call(f)) ?? [], Xe(M.value, {
-        class: Se.value,
-        onClick: ve,
-        onMouseenter: Y,
-        onMouseleave: q,
-        onFocusin: pe,
-        onFocusout: ye,
-        onContextmenu: he
-      }), c(Ve, null, [o.autoFixPosition ? c(ue, {
-        onResize: be
+      return E.value = ((e = v.default) == null ? void 0 : e.call(v)) ?? [], _e(E.value, {
+        class: Ee.value,
+        onClick: we,
+        onMouseenter: _,
+        onMouseleave: J,
+        onFocusin: Ce,
+        onFocusout: be,
+        onContextmenu: Te
+      }), c(We, null, [o.autoFixPosition ? c(se, {
+        onResize: Re
       }, {
-        default: () => [M.value]
-      }) : M.value, c(Qe, null, {
-        default: () => [c(je, {
-          to: de.value,
+        default: () => [E.value]
+      }) : E.value, c(eo, null, {
+        default: () => [c(xe, {
+          to: ye.value,
           disabled: !o.renderToBody
         }, {
-          default: () => [(!o.unmountOnClose || l.value || O.value) && !we.value && c(ue, {
-            onResize: x
+          default: () => [(!o.unmountOnClose || l.value || F.value) && !Se.value && c(se, {
+            onResize: I
           }, {
-            default: () => [c("div", Ne({
-              ref: v,
-              class: [b.element("popup"), b.modifier(`position-${E.value}`)],
-              style: {
+            default: () => [c("div", Ie(ve(), {
+              ref: f,
+              class: [b.element("popup"), b.modifier(`position-${M.value}`), n.class],
+              "data-theme": me.value,
+              style: [fe.value, n.style, {
                 ...H.value,
-                zIndex: fe.value,
+                zIndex: he.value,
                 ...l.value && !S.value ? {
                   visibility: "hidden"
                 } : {},
-                pointerEvents: B.value ? "none" : "auto"
-              },
-              "trigger-placement": E.value,
-              onMouseenter: _,
-              onMouseleave: J,
-              onMousedown: ge
-            }, ce.value), [c(We, {
+                pointerEvents: A.value ? "none" : "auto"
+              }],
+              "trigger-placement": M.value,
+              onMouseenter: q,
+              onMouseleave: Q,
+              onMousedown: Pe
+            }), [c($e, {
               name: o.animationName,
               duration: o.duration,
               appear: !0,
-              onBeforeEnter: le,
-              onAfterEnter: Pe,
-              onBeforeLeave: le,
-              onAfterLeave: Me
+              onBeforeEnter: ue,
+              onAfterEnter: Oe,
+              onBeforeLeave: ue,
+              onAfterLeave: Be
             }, {
               default: () => {
                 var t;
-                return [xe(c("div", {
+                return [Ge(c("div", {
                   class: b.element("popup-wrapper"),
                   style: U.value
                 }, [c("div", {
                   class: [b.element("content"), o.contentClass],
                   style: o.contentStyle
-                }, [(t = f.content) == null ? void 0 : t.call(f)]), o.showArrow && c("div", {
-                  ref: re,
+                }, [(t = v.content) == null ? void 0 : t.call(v)]), o.showArrow && c("div", {
+                  ref: pe,
                   class: [b.element("arrow"), o.arrowClass],
                   style: K.value
-                }, null)]), [[Ie, l.value]])];
+                }, null)]), [[He, l.value]])];
               }
             })])]
           })]
@@ -599,5 +607,5 @@ const lo = ["onClick", "onMouseenter", "onMouseleave", "onFocusin", "onFocusout"
   }
 });
 export {
-  So as default
+  Ro as default
 };