x-next 1.0.1 → 1.1.0

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

@@ -0,0 +1,612 @@
+import { defineComponent as Be, toRefs as Oe, computed as P, inject as Ee, ref as s, provide as Fe, reactive as Le, watch as I, nextTick as $, onMounted as Ae, 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 { getScrollElements as le, getElementScrollRect as ne, getPopupStyle as $e, getTransformOrigin as Ge, getArrowStyle as He } from "./utils.js";
+import ue from "../../_container/resize-observer-v2.js";
+import { on as G, off as ie } from "../../_utils/dom.js";
+import { isEmptyChildren as Ue, mergeFirstChild as _e } from "../../_utils/vue-eco.js";
+import Ke from "../../_hooks/use-pick-slots.js";
+import { triggerInjectionKey as ae } from "./context.js";
+import { throttleByRaf as se } from "../../_utils/throttle-by-raf.js";
+import Xe from "../../_hooks/use-popup-manager.js";
+import { useResizeObserver as Ye } from "../../_hooks/use-resize-observer.js";
+import qe from "../../_container/client-only.js";
+import { useTeleportContainer as Je } from "../../_hooks/use-teleport-container.js";
+import { useFirstElement as Qe } from "../../_hooks/use-first-element.js";
+import { omit as Ze } from "../../_utils/omit.js";
+import { getClassNameMixin as eo } from "../../_utils/config.js";
+const oo = ["onClick", "onMouseenter", "onMouseleave", "onFocusin", "onFocusout", "onContextmenu"], bo = /* @__PURE__ */ Be({
+  name: "Trigger",
+  inheritAttrs: !1,
+  props: {
+    /**
+     * @zh 弹出框是否可见
+     * @en Whether the popup is visible
+     * @vModel
+     */
+    popupVisible: {
+      type: Boolean,
+      default: void 0
+    },
+    /**
+     * @zh 弹出框默认是否可见（非受控模式）
+     * @en Whether the popup is visible by default (uncontrolled mode)
+     */
+    defaultPopupVisible: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 触发方式
+     * @en Trigger method
+     * @values 'hover','click','focus','contextMenu'
+     */
+    trigger: {
+      type: [String, Array],
+      default: "hover"
+    },
+    /**
+     * @zh 弹出位置
+     * @en Popup position
+     * @values 'top','tl','tr','bottom','bl','br','left','lt','lb','right','rt','rb'
+     */
+    position: {
+      type: String,
+      default: "bottom"
+    },
+    /**
+     * @zh 触发器是否禁用
+     * @en Whether the trigger is disabled
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 弹出框的偏移量（弹出框距离触发器的偏移距离）
+     * @en The offset of the popup (the offset distance of the popup from the trigger)
+     */
+    popupOffset: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * @zh 弹出框的移动距离
+     * @en The moving distance of the popup
+     */
+    popupTranslate: {
+      type: [Array, Object]
+    },
+    /**
+     * @zh 弹出框是否显示箭头
+     * @en Whether the popup shows an arrow
+     */
+    showArrow: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 弹出框是否跟随鼠标
+     * @en Whether the popup follows the mouse
+     */
+    alignPoint: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 是否在移出触发器，并移入弹出框时保持弹出框显示
+     * @en Whether to keep the popup displayed when the trigger is moved out and moved into the popup
+     */
+    popupHoverStay: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * @zh 是否在触发器失去焦点时关闭弹出框
+     * @en Whether to close the popup when the trigger loses focus
+     */
+    blurToClose: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * @zh 是否在点击触发器时关闭弹出框
+     * @en Whether to close the popup when the trigger is clicked
+     */
+    clickToClose: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * @zh 是否在点击外部区域时关闭弹出框
+     * @en Whether to close the popup when clicking on the outer area
+     */
+    clickOutsideToClose: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * @zh 是否在关闭时卸载弹出框节点
+     * @en Whether to uninstall the popup node when closing
+     */
+    unmountOnClose: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * @zh 弹出框内容的类名
+     * @en The class name of the popup content
+     */
+    contentClass: {
+      type: [String, Array, Object]
+    },
+    /**
+     * @zh 弹出框内容的样式
+     * @en The style of the popup content
+     */
+    contentStyle: {
+      type: Object
+    },
+    /**
+     * @zh 弹出框箭头的类名
+     * @en The class name of the popup arrow
+     */
+    arrowClass: {
+      type: [String, Array, Object]
+    },
+    /**
+     * @zh 弹出框箭头的样式
+     * @en The style of the popup arrow
+     */
+    arrowStyle: {
+      type: Object
+    },
+    /**
+     * @zh 弹出框的样式
+     * @en The style of the popup
+     */
+    popupStyle: {
+      type: Object
+    },
+    /**
+     * @zh 弹出动画的name
+     * @en The name of the popup animation
+     */
+    animationName: {
+      type: String,
+      default: "x-fade-in"
+    },
+    /**
+     * @zh 弹出动画的持续时间
+     * @en The duration of the popup animation
+     */
+    duration: {
+      type: [Number, Object]
+    },
+    /**
+     * @zh mouseenter事件延时触发的时间（毫秒）
+     * @en Delay trigger time of mouseenter event (ms)
+     */
+    mouseEnterDelay: {
+      type: Number,
+      default: 100
+    },
+    /**
+     * @zh mouseleave事件延时触发的时间（毫秒）
+     * @en Delay trigger time of mouseleave event (ms)
+     */
+    mouseLeaveDelay: {
+      type: Number,
+      default: 100
+    },
+    /**
+     * @zh focus事件延时触发的时间（毫秒）
+     * @en Delay trigger time of focus event (ms)
+     */
+    focusDelay: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * @zh 是否将弹出框宽度设置为触发器宽度
+     * @en Whether to set the width of the popup to the width of the trigger
+     */
+    autoFitPopupWidth: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 是否将弹出框的最小宽度设置为触发器宽度
+     * @en Whether to set the minimum width of the popup to the trigger width
+     */
+    autoFitPopupMinWidth: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 当触发器的尺寸发生变化时，是否重新计算弹出框位置
+     * @en When the size of the trigger changes, whether to recalculate the position of the popup
+     */
+    autoFixPosition: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * @zh 弹出框的挂载容器
+     * @en Mount container for popup
+     */
+    popupContainer: {
+      type: [String, Object]
+    },
+    /**
+     * @zh 是否在容器滚动时更新弹出框的位置
+     * @us Whether to update the position of the popup when the container is scrolled
+     */
+    updateAtScroll: {
+      type: Boolean,
+      default: !1
+    },
+    autoFitTransformOrigin: {
+      type: Boolean,
+      default: !1
+    },
+    hideEmpty: {
+      type: Boolean,
+      default: !1
+    },
+    openedClass: {
+      type: [String, Array, Object]
+    },
+    /**
+     * @zh 是否自动调整弹出框位置，以适应窗口大小
+     * @en Whether to automatically adjust the position of the popup to fit the window size
+     */
+    autoFitPosition: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * @zh 是否挂载在 `body` 元素下
+     * @en Whether to mount under the `body` element
+     */
+    renderToBody: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * @zh 是否阻止弹出层中的元素点击时获取焦点
+     * @en Whether to prevent elements in the pop-up layer from gaining focus when clicked
+     */
+    preventFocus: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 是否在滚动时关闭弹出框
+     * @en Whether to close the popover when scrolling
+     * @version 2.46.0
+     */
+    scrollToClose: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 滚动阈值，当滚动距离超过该值时触发关闭
+     * @en Scroll threshold, trigger close when the scroll distance exceeds this value
+     */
+    scrollToCloseDistance: {
+      type: Number,
+      default: 0
+    }
+  },
+  // 显式导入插槽
+  slots: Object,
+  emits: {
+    "update:popupVisible": (o) => !0,
+    /**
+     * @zh 弹出框显示状态改变时触发
+     * @en Emitted when the status of the popup changes
+     * @param {boolean} visible
+     */
+    popupVisibleChange: (o) => !0,
+    /**
+     * @zh 弹出框显示后（动画结束）触发
+     * @en Triggered after the trigger is shown (the animation ends)
+     * @version 2.18.0
+     */
+    show: () => !0,
+    /**
+     * @zh 弹出框隐藏后（动画结束）触发
+     * @en Triggered after the popup is hidden (the animation ends)
+     * @version 2.18.0
+     */
+    hide: () => !0,
+    // for internal
+    resize: () => !0
+  },
+  /**
+   * @zh 弹出框内容
+   * @en Popup content
+   * @slot content
+   */
+  setup(o, {
+    emit: b,
+    slots: v,
+    attrs: n
+  }) {
+    const {
+      popupContainer: re
+    } = Oe(o), g = eo("trigger"), ce = P(() => Ze(n, oo)), p = P(() => [].concat(o.trigger)), k = /* @__PURE__ */ new Set(), u = Ee(ae, void 0), {
+      children: M,
+      firstElement: T
+    } = Qe(), y = s(), H = s(o.defaultPopupVisible), B = s(o.position), U = s({}), _ = s({}), K = s({}), S = s(!1), fe = s(), f = s({
+      top: 0,
+      left: 0
+    });
+    let O = null, E = null;
+    const l = P(() => o.popupVisible ?? H.value), {
+      teleportContainer: de,
+      containerRef: D
+    } = Je({
+      popupContainer: re,
+      visible: l,
+      documentContainer: !0
+    }), {
+      zIndex: me
+    } = Xe("popup", {
+      visible: l
+    });
+    let R = 0, h = !1, z = !1;
+    const ve = () => {
+      R && (window.clearTimeout(R), R = 0);
+    }, V = (e) => {
+      if (o.alignPoint) {
+        const {
+          pageX: t,
+          pageY: i
+        } = e;
+        f.value = {
+          top: i,
+          left: t
+        };
+      }
+    }, X = () => {
+      S.value = !0;
+    }, m = () => {
+      if (!T.value || !y.value || !D.value)
+        return;
+      const e = D.value.getBoundingClientRect(), t = o.alignPoint ? {
+        top: f.value.top,
+        bottom: f.value.top,
+        left: f.value.left,
+        right: f.value.left,
+        scrollTop: f.value.top,
+        scrollBottom: f.value.top,
+        scrollLeft: f.value.left,
+        scrollRight: f.value.left,
+        width: 0,
+        height: 0
+      } : ne(T.value, e), i = () => (
+        // @ts-ignore
+        ne(y.value, e)
+      ), d = i(), {
+        style: w,
+        position: C
+      } = $e(o.position, e, t, d, {
+        offset: o.popupOffset,
+        translate: o.popupTranslate,
+        customStyle: o.popupStyle,
+        autoFitPosition: o.autoFitPosition
+      });
+      o.autoFitTransformOrigin && (_.value = {
+        transformOrigin: Ge(C)
+      }), o.autoFitPopupMinWidth ? w.minWidth = `${t.width}px` : o.autoFitPopupWidth && (w.width = `${t.width}px`), B.value !== C && (B.value = C), U.value = w, o.showArrow ? $(() => {
+        K.value = He(C, t, i(), {
+          customStyle: o.arrowStyle
+        }), X();
+      }) : X();
+    }, a = (e, t) => {
+      const i = R !== 0;
+      if (e === l.value && !i)
+        return;
+      const d = () => {
+        e && (S.value = !1), H.value = e, b("update:popupVisible", e), b("popupVisibleChange", e), e && $(() => {
+          m();
+        });
+      };
+      if (e || (O = null, E = null), ve(), t) {
+        e !== l.value && (R = window.setTimeout(d, t));
+        return;
+      }
+      e === l.value && i || d();
+    }, pe = (e) => {
+      var t;
+      (t = n.onClick) == null || t.call(n, e), !(o.disabled || l.value && !o.clickToClose) && (p.value.includes("click") ? (V(e), a(!l.value)) : p.value.includes("contextMenu") && l.value && a(!1));
+    }, Y = (e) => {
+      var t;
+      (t = n.onMouseenter) == null || t.call(n, e), !(o.disabled || !p.value.includes("hover")) && (V(e), a(!0, o.mouseEnterDelay));
+    }, q = (e) => {
+      u == null || u.onMouseenter(e), Y(e);
+    }, J = (e) => {
+      var t;
+      (t = n.onMouseleave) == null || t.call(n, e), !(o.disabled || !p.value.includes("hover")) && a(!1, o.mouseLeaveDelay);
+    }, Q = (e) => {
+      u == null || u.onMouseleave(e), J(e);
+    }, ye = (e) => {
+      var t;
+      (t = n.onFocusin) == null || t.call(n, e), !(o.disabled || !p.value.includes("focus")) && a(!0, o.focusDelay);
+    }, he = (e) => {
+      var t;
+      (t = n.onFocusout) == null || t.call(n, e), !(o.disabled || !p.value.includes("focus")) && o.blurToClose && a(!1);
+    }, we = (e) => {
+      var t;
+      (t = n.onContextmenu) == null || t.call(n, e), !(o.disabled || !p.value.includes("contextMenu") || l.value && !o.clickToClose) && (V(e), a(!l.value), e.preventDefault());
+    };
+    Fe(ae, Le({
+      onMouseenter: q,
+      onMouseleave: Q,
+      addChildRef: (e) => {
+        k.add(e), u == null || u.addChildRef(e);
+      },
+      removeChildRef: (e) => {
+        k.delete(e), u == null || u.removeChildRef(e);
+      }
+    }));
+    const j = () => {
+      ie(document.documentElement, "mousedown", W), h = !1;
+    }, N = Ke(v, "content"), Ce = P(() => {
+      var e;
+      return o.hideEmpty && Ue((e = N.value) == null ? void 0 : e.call(N));
+    }), W = (e) => {
+      var t, i, d;
+      if (!((t = T.value) != null && t.contains(e.target) || (i = y.value) != null && i.contains(e.target))) {
+        for (const w of k)
+          if ((d = w.value) != null && d.contains(e.target))
+            return;
+        j(), a(!1);
+      }
+    }, Z = (e, t) => {
+      const [i, d] = e, {
+        scrollTop: w,
+        scrollLeft: C
+      } = t;
+      return Math.abs(w - i) >= o.scrollToCloseDistance || Math.abs(C - d) >= o.scrollToCloseDistance;
+    }, F = se((e) => {
+      if (l.value)
+        if (o.scrollToClose) {
+          const t = e.target;
+          O || (O = [t.scrollTop, t.scrollLeft]), Z(O, t) ? a(!1) : m();
+        } else
+          m();
+    }), ee = () => {
+      ie(window, "scroll", oe), z = !1;
+    }, oe = se((e) => {
+      const t = e.target.documentElement;
+      E || (E = [t.scrollTop, t.scrollLeft]), Z(E, t) && (a(!1), ee());
+    }), x = () => {
+      l.value && m();
+    }, be = () => {
+      x(), b("resize");
+    }, ge = (e) => {
+      o.preventFocus && e.preventDefault();
+    };
+    u == null || u.addChildRef(y);
+    const Te = P(() => l.value ? o.openedClass : void 0);
+    let r;
+    I(l, (e) => {
+      if (o.clickOutsideToClose && (!e && h ? j() : e && !h && (G(document.documentElement, "mousedown", W), h = !0)), o.scrollToClose && (G(window, "scroll", oe), z = !0), o.updateAtScroll) {
+        if (e) {
+          r = le(T.value);
+          for (const t of r)
+            t.addEventListener("scroll", F);
+        } else if (r) {
+          for (const t of r)
+            t.removeEventListener("scroll", F);
+          r = void 0;
+        }
+      }
+      e && (S.value = !1, L.value = !0);
+    }), I(y, (e) => {
+      e && l.value && !S.value && $(() => m());
+    }), I(() => [o.autoFitPopupWidth, o.autoFitPopupMinWidth], () => {
+      l.value && m();
+    });
+    const {
+      createResizeObserver: Se,
+      destroyResizeObserver: Re
+    } = Ye({
+      elementRef: D,
+      onResize: x
+    });
+    Ae(() => {
+      if (Se(), l.value && (L.value = !0, m(), o.clickOutsideToClose && !h && (G(document.documentElement, "mousedown", W), h = !0), o.updateAtScroll)) {
+        r = le(T.value);
+        for (const e of r)
+          e.addEventListener("scroll", F);
+      }
+    }), ke(() => {
+      l.value && m();
+    }), De(() => {
+      a(!1);
+    }), ze(() => {
+      if (u == null || u.removeChildRef(y), Re(), h && j(), z && ee(), r) {
+        for (const e of r)
+          e.removeEventListener("scroll", F);
+        r = void 0;
+      }
+    });
+    const L = s(l.value), A = s(!1), te = () => {
+      A.value = !0;
+    }, Pe = () => {
+      A.value = !1, l.value && b("show");
+    }, Me = () => {
+      A.value = !1, l.value || (L.value = !1, b("hide"));
+    };
+    return () => {
+      var e;
+      return M.value = ((e = v.default) == null ? void 0 : e.call(v)) ?? [], _e(M.value, {
+        class: Te.value,
+        onClick: pe,
+        onMouseenter: Y,
+        onMouseleave: J,
+        onFocusin: ye,
+        onFocusout: he,
+        onContextmenu: we
+      }), c(Ve, null, [o.autoFixPosition ? c(ue, {
+        onResize: be
+      }, {
+        default: () => [M.value]
+      }) : M.value, c(qe, null, {
+        default: () => [c(je, {
+          to: de.value,
+          disabled: !o.renderToBody
+        }, {
+          default: () => [(!o.unmountOnClose || l.value || L.value) && !Ce.value && c(ue, {
+            onResize: x
+          }, {
+            default: () => [c("div", Ne({
+              ref: y,
+              class: [g.element("popup"), g.modifier(`position-${B.value}`)],
+              style: {
+                ...U.value,
+                zIndex: me.value,
+                ...l.value && !S.value ? {
+                  visibility: "hidden"
+                } : {},
+                pointerEvents: A.value ? "none" : "auto"
+              },
+              "trigger-placement": B.value,
+              onMouseenter: q,
+              onMouseleave: Q,
+              onMousedown: ge
+            }, ce.value), [c(We, {
+              name: o.animationName,
+              duration: o.duration,
+              appear: !0,
+              onBeforeEnter: te,
+              onAfterEnter: Pe,
+              onBeforeLeave: te,
+              onAfterLeave: Me
+            }, {
+              default: () => {
+                var t;
+                return [xe(c("div", {
+                  class: g.element("popup-wrapper"),
+                  style: _.value
+                }, [c("div", {
+                  class: [g.element("content"), o.contentClass],
+                  style: o.contentStyle
+                }, [(t = v.content) == null ? void 0 : t.call(v)]), o.showArrow && c("div", {
+                  ref: fe,
+                  class: [g.element("arrow"), o.arrowClass],
+                  style: K.value
+                }, null)]), [[Ie, l.value]])];
+              }
+            })])]
+          })]
+        })]
+      })]);
+    };
+  }
+});
+export {
+  bo as default
+};

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

@@ -0,0 +1,4 @@
+const r = Symbol("ArcoTrigger");
+export {
+  r as triggerInjectionKey
+};

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

@@ -0,0 +1,8 @@
+import r from "./Trigger.js";
+import { generateComponent as e } from "../../_utils/vue-eco.js";
+import { getComponentPrefix as o } from "../../_utils/config.js";
+const i = e(o("Trigger"), r);
+export {
+  i as Trigger,
+  i as default
+};