x-next 1.18.0 → 1.18.2

package/dist/es/components/dropdown/Dropdown.vue2.js

@@ -1,19 +1,19 @@
-import { defineComponent as v, toRefs as B, provide as C, reactive as w } from "vue";
-import { Trigger as V } from "../trigger/index.js";
+import { defineComponent as O, toRefs as T, watch as P, onBeforeUnmount as S, provide as v, reactive as V } from "vue";
+import { Trigger as E } from "../trigger/index.js";
 import F from "./dropdown-panel.vue.js";
-import { useTrigger as S } from "../../_hooks/use-trigger.js";
-import { dropdownInjectionKey as O } from "./context.js";
-import { getClassNameMixin as P } from "../../_utils/config.js";
-import T from "../../_container/render-function.js";
-import { useFirstElement as k } from "../../_hooks/use-first-element.js";
-import { mergeFirstChild as x } from "../../_utils/vue-eco.js";
-import { useDropdownKeyboard as K } from "./use-keyboard.js";
-const q = v({
+import { useTrigger as K } from "../../_hooks/use-trigger.js";
+import { dropdownInjectionKey as D } from "./context.js";
+import { getClassNameMixin as x } from "../../_utils/config.js";
+import N from "../../_container/render-function.js";
+import { useFirstElement as R } from "../../_hooks/use-first-element.js";
+import { mergeFirstChild as A } from "../../_utils/vue-eco.js";
+import { useDropdownKeyboard as M } from "./use-keyboard.js";
+const l = /* @__PURE__ */ new Set(), Q = O({
   name: "Dropdown",
   components: {
-    Trigger: V,
+    Trigger: E,
     DropdownPanel: F,
-    RenderFunction: T
+    RenderFunction: N
   },
   props: {
     /**
@@ -105,32 +105,32 @@ const q = v({
     }
   },
   emits: {
-    "update:popupVisible": (e) => !0,
+    "update:popupVisible": (r) => !0,
     /**
      * @zh 下拉框显示状态发生改变时触发
      * @en Triggered when the display status of the drop-down box changes
      * @param {boolean} visible
      */
-    popupVisibleChange: (e) => !0,
+    popupVisibleChange: (r) => !0,
     /**
      * @zh 用户选择时触发
      * @en Triggered when the user selects
      * @param {string | number | Record<string, any> | undefined } value
      * @param {Event} ev
      */
-    select: (e, t) => !0,
+    select: (r, n) => !0,
     /**
      * @zh 下拉菜单滚动时触发
      * @en Triggered when the dropdown scrolls
      * @param {Event} ev
      */
-    scroll: (e) => !0,
+    scroll: (r) => !0,
     /**
      * @zh 下拉菜单滚动到底部时触发
      * @en Triggered when the dropdown reaches bottom
      * @param {Event} ev
      */
-    reachBottom: (e) => !0
+    reachBottom: (r) => !0
   },
   /**
    * @zh 内容
@@ -148,19 +148,34 @@ const q = v({
    * @en Empty content
    * @slot empty
    */
-  setup(e, { emit: t, slots: n }) {
-    const { defaultPopupVisible: d, popupVisible: s, popupMaxHeight: c } = B(e), f = P("dropdown"), { computedPopupVisible: a, handlePopupVisibleChange: p } = S({
-      defaultPopupVisible: d,
-      popupVisible: s,
-      emit: t
-    }), { children: l, firstElement: m } = k(), r = K(
+  setup(r, { emit: n, slots: i }) {
+    const { defaultPopupVisible: y, popupVisible: g, popupMaxHeight: b } = T(r), h = x("dropdown"), { computedPopupVisible: a, handlePopupVisibleChange: p } = K({
+      defaultPopupVisible: y,
+      popupVisible: g,
+      emit: n
+    }), { children: u, firstElement: s } = R(), o = M(
       a,
       p,
-      m
-    ), g = (o) => {
-      var i;
-      return l.value = ((i = n.default) == null ? void 0 : i.call(n)) ?? [], x(l.value, {
-        ...o,
+      s
+    ), d = Symbol("dropdown"), m = (e) => {
+      var t;
+      if (!(e.isComposing || e.keyCode === 229 || e.defaultPrevented || Array.from(l).at(-1) !== d)) {
+        if (e.key === "Escape" && (e.target === document.body || e.target === document.documentElement || (t = s.value) != null && t.contains(e.target))) {
+          o.handleClose(), e.preventDefault(), e.stopPropagation();
+          return;
+        }
+        e.key === "Tab" && (o.handleTabOut(), e.stopPropagation());
+      }
+    }, c = () => {
+      l.delete(d), typeof document < "u" && document.removeEventListener("keydown", m, !0);
+    };
+    P(a, (e) => {
+      c(), e && typeof document < "u" && (l.add(d), document.addEventListener("keydown", m, !0));
+    }, { immediate: !0 }), S(c);
+    const w = (e) => {
+      var t;
+      return u.value = ((t = i.default) == null ? void 0 : t.call(i)) ?? [], A(u.value, {
+        ...e,
         /*
          * 根触发器补菜单语义。子菜单的触发器已在 DropdownSubmenu 上声明
          * aria-haspopup/aria-expanded，根触发器此前没有，读屏无法得知
@@ -168,36 +183,37 @@ const q = v({
          */
         "aria-haspopup": "menu",
         "aria-expanded": a.value ? "true" : "false",
-        onKeydown: (u) => {
-          u.key !== "ArrowRight" && r.handleTriggerKeydown(u);
+        onKeydown: (f) => {
+          f.key !== "ArrowRight" && o.handleTriggerKeydown(f);
         },
-        onFocusinCapture: r.handleTriggerFocus,
-        onFocusoutCapture: r.handleTriggerFocus
-      }), l.value;
-    }, h = (o, i) => {
-      t("select", o, i), e.hideOnSelect && (r.handleKeyboardSelect(i), p(!1));
-    }, y = (o) => {
-      t("scroll", o);
-    }, b = (o) => {
-      t("reachBottom", o);
+        onFocusinCapture: o.handleTriggerFocus,
+        onFocusoutCapture: o.handleTriggerFocus
+      }), u.value;
+    }, C = (e, t) => {
+      n("select", e, t), r.hideOnSelect && (o.handleKeyboardSelect(t), p(!1));
+    }, k = (e) => {
+      n("scroll", e);
+    }, B = (e) => {
+      n("reachBottom", e);
     };
-    return C(
-      O,
-      w({
-        popupMaxHeight: c,
-        onOptionClick: h
+    return v(
+      D,
+      V({
+        popupMaxHeight: b,
+        onTabOut: o.handleTabOut,
+        onOptionClick: C
       })
     ), {
-      ...r,
-      renderTrigger: g,
-      className: f,
+      ...o,
+      renderTrigger: w,
+      className: h,
       computedPopupVisible: a,
       handlePopupVisibleChange: p,
-      handleScroll: y,
-      handleReachBottom: b
+      handleScroll: k,
+      handleReachBottom: B
     };
   }
 });
 export {
-  q as default
+  Q as default
 };

package/dist/es/components/dropdown/dropdown-panel.vue2.js

@@ -1,16 +1,16 @@
-import { defineComponent as A, inject as D, ref as d, shallowRef as h, provide as H, watchPostEffect as P, computed as v } from "vue";
-import { Empty as k } from "../empty/index.js";
-import { dropdownInjectionKey as B, dropdownMenuInjectionKey as C } from "./context.js";
-import { isNumber as M } from "../../_utils/is.js";
+import { defineComponent as k, inject as D, ref as h, shallowRef as y, provide as H, watchPostEffect as P, computed as g } from "vue";
+import { Empty as B } from "../empty/index.js";
+import { dropdownInjectionKey as M, dropdownMenuInjectionKey as T } from "./context.js";
+import { isNumber as C } from "../../_utils/is.js";
 import { Scrollbar as L } from "../scrollbar-v2/index.js";
 import { Spin as S } from "../spin/index.js";
 import { getClassNameMixin as _ } from "../../_utils/config.js";
-import { useLocale as T } from "../../locale/index.js";
-const q = A({
+import { useLocale as F } from "../../locale/index.js";
+const z = k({
   name: "DropdownPanel",
   components: {
     Scrollbar: L,
-    Empty: k,
+    Empty: B,
     Spin: S
   },
   props: {
@@ -36,86 +36,91 @@ const q = A({
     }
   },
   emits: ["scroll", "reachBottom", "close"],
-  setup(m, { emit: c, slots: g, expose: y }) {
-    const u = _("dropdown"), { t: w } = T(), i = D(B, {}), b = d(), f = d(), r = h([]), n = h(), p = () => r.value.filter((e) => {
+  setup(d, { emit: u, slots: v, expose: w }) {
+    const i = _("dropdown"), { t: b } = F(), r = D(M, {}), I = h(), f = h(), l = y([]), n = y(), m = () => l.value.filter((e) => {
       var o;
       return !e.disabled.value && ((o = e.element.value) == null ? void 0 : o.isConnected);
     }).sort((e, o) => {
       const t = e.element.value.compareDocumentPosition(o.element.value);
       return t & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : t & Node.DOCUMENT_POSITION_PRECEDING ? 1 : 0;
-    }), I = (e) => {
+    }), E = (e) => {
       e.disabled.value || (n.value = e);
     }, a = (e) => {
       n.value = e;
       const o = (e == null ? void 0 : e.element.value) ?? f.value;
       return o == null || o.focus(), !!(o && document.activeElement === o);
     };
-    y({ focus: (e = "first") => {
-      const o = p();
+    w({ focus: (e = "first") => {
+      const o = m();
       return a(e === "last" ? o.at(-1) : o[0]);
-    } }), H(C, {
+    } }), H(T, {
       activeItem: n,
-      setActiveItem: I,
-      registerItem: (e) => (r.value = [...r.value, e], () => {
-        r.value = r.value.filter((o) => o !== e);
+      setActiveItem: E,
+      registerItem: (e) => (l.value = [...l.value, e], () => {
+        l.value = l.value.filter((o) => o !== e);
       })
     }), P(() => {
       var o;
-      const e = p();
+      const e = m();
       if (!n.value || !e.includes(n.value)) {
         const t = ((o = n.value) == null ? void 0 : o.element.value) === document.activeElement;
         n.value = e[0], t && a(n.value);
       }
     });
-    const E = (e) => {
+    const O = (e) => {
+      var p;
       if (e.defaultPrevented || e.isComposing) return;
-      if (e.key === "Escape" || m.closeOnArrowLeft && e.key === "ArrowLeft") {
-        e.preventDefault(), e.stopPropagation(), c("close");
+      if (e.key === "Tab") {
+        (p = r.onTabOut) == null || p.call(r);
+        return;
+      }
+      if (e.key === "Escape" || d.closeOnArrowLeft && e.key === "ArrowLeft") {
+        e.preventDefault(), e.stopPropagation(), u("close");
         return;
       }
       if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(e.key)) return;
-      const o = p(), t = e.target;
-      if (t !== f.value && !r.value.some((l) => l.element.value === t))
+      const o = m(), t = e.target;
+      if (t !== f.value && !l.value.some((s) => s.element.value === t))
         return;
       e.preventDefault(), e.stopPropagation();
-      const s = o.findIndex((l) => l.element.value === t);
+      const c = o.findIndex((s) => s.element.value === t);
       if (e.key === "Home") a(o[0]);
       else if (e.key === "End") a(o.at(-1));
       else if (o.length) {
-        const l = s < 0 ? e.key === "ArrowUp" ? o.length - 1 : 0 : (s + (e.key === "ArrowDown" ? 1 : -1) + o.length) % o.length;
-        a(o[l]);
+        const s = c < 0 ? e.key === "ArrowUp" ? o.length - 1 : 0 : (c + (e.key === "ArrowDown" ? 1 : -1) + o.length) % o.length;
+        a(o[s]);
       }
-    }, x = (e) => {
-      const { scrollTop: o, scrollHeight: t, offsetHeight: s } = e.target;
-      t - (o + s) <= m.bottomOffset && c("reachBottom", e), c("scroll", e);
-    }, N = v(() => {
-      if (M(i.popupMaxHeight))
+    }, N = (e) => {
+      const { scrollTop: o, scrollHeight: t, offsetHeight: c } = e.target;
+      t - (o + c) <= d.bottomOffset && u("reachBottom", e), u("scroll", e);
+    }, x = g(() => {
+      if (C(r.popupMaxHeight))
         return {
-          maxHeight: `${i.popupMaxHeight}px`
+          maxHeight: `${r.popupMaxHeight}px`
         };
-      if (!i.popupMaxHeight)
+      if (!r.popupMaxHeight)
         return {
           maxHeight: "none",
           overflowY: "hidden"
         };
-    }), O = v(() => [
-      u.block,
+    }), A = g(() => [
+      i.block,
       {
-        [u.modifier("has-footer")]: !!g.footer
+        [i.modifier("has-footer")]: !!v.footer
       }
     ]);
     return {
-      className: u,
-      cls: O,
-      style: N,
-      wrapperRef: b,
+      className: i,
+      cls: A,
+      style: x,
+      wrapperRef: I,
       panelElement: f,
-      handleKeydown: E,
-      handleScroll: x,
-      t: w
+      handleKeydown: O,
+      handleScroll: N,
+      t: b
     };
   }
 });
 export {
-  q as default
+  z as default
 };

package/dist/es/components/dropdown/use-keyboard.js

@@ -1,45 +1,53 @@
-import { ref as h, watch as y, nextTick as u } from "vue";
-const v = (n, f, i, c = () => !1) => {
-  const s = h();
-  let t, r = !1, o = !1;
-  const l = () => {
-    !n.value || !t || !s.value || (o = !0, s.value.focus(t) && (t = void 0), o = !1);
-  }, p = () => {
-    l(), t = void 0;
-  }, m = (e) => {
-    if (c() || e.defaultPrevented || e.isComposing) return;
+import { ref as g, watch as v, nextTick as d } from "vue";
+const k = (n, s, u, p = () => !1) => {
+  const l = g();
+  let t, o = !1, r = !1;
+  const f = () => {
+    !n.value || !t || !l.value || (r = !0, l.value.focus(t) && (t = void 0), r = !1);
+  }, m = () => {
+    f(), t = void 0;
+  }, w = (e) => {
+    if (p() || e.defaultPrevented || e.isComposing) return;
     const a = e.currentTarget;
     if (!a.matches(':disabled, [aria-disabled="true"]')) {
+      if (e.key === "Tab" && n.value) {
+        i();
+        return;
+      }
       if (e.key === "Escape" && n.value)
-        d();
+        c();
       else if (["Enter", " ", "ArrowDown", "ArrowUp", "ArrowRight"].includes(e.key)) {
         if (e.preventDefault(), e.repeat) return;
-        i.value = a, r = !1, t = e.key === "ArrowUp" ? "last" : "first", f(!0), u(l);
+        u.value = a, o = !1, t = e.key === "ArrowUp" ? "last" : "first", s(!0), d(f);
       } else
         return;
       e.preventDefault(), e.stopImmediatePropagation();
     }
-  }, d = () => {
-    t = void 0, r = !0, f(!1);
-  }, g = (e) => {
-    e instanceof KeyboardEvent && (r = !0);
-  }, w = (e) => {
-    o && e.stopImmediatePropagation();
+  }, c = () => {
+    t = void 0, o = !0, s(!1);
+  }, i = () => {
+    var e;
+    t = void 0, o = !1, s(!1), r = !0, (e = u.value) == null || e.focus({ preventScroll: !0 }), r = !1;
+  }, h = (e) => {
+    e instanceof KeyboardEvent && (o = !0);
+  }, y = (e) => {
+    r && e.stopImmediatePropagation();
   };
-  return y(n, (e) => {
-    e ? u(l) : (t = void 0, r && (r = !1, u(() => {
+  return v(n, (e) => {
+    e ? d(f) : (t = void 0, o && (o = !1, d(() => {
       var a;
-      o = !0, (a = i.value) == null || a.focus(), o = !1;
+      r = !0, (a = u.value) == null || a.focus(), r = !1;
     })));
   }), {
-    panelRef: s,
-    handleShow: p,
-    handleTriggerKeydown: m,
-    handleTriggerFocus: w,
-    handleClose: d,
-    handleKeyboardSelect: g
+    panelRef: l,
+    handleShow: m,
+    handleTriggerKeydown: w,
+    handleTriggerFocus: y,
+    handleClose: c,
+    handleTabOut: i,
+    handleKeyboardSelect: h
   };
 };
 export {
-  v as useDropdownKeyboard
+  k as useDropdownKeyboard
 };

package/dist/es/components/popover/Popover.js

@@ -1,11 +1,14 @@
-import { defineComponent as P, ref as b, computed as i, createVNode as l, mergeProps as p, Fragment as y } from "vue";
-import { Trigger as T } from "../trigger/index.js";
-import { getComponentPrefix as g, getClassNameMixin as w } from "../../_utils/config.js";
-import { popoverProps as F } from "./props.js";
-const k = /* @__PURE__ */ P({
-  name: g("Popover"),
+import { defineComponent as x, ref as F, computed as u, watch as A, onBeforeUnmount as B, createVNode as l, mergeProps as K, nextTick as N } from "vue";
+import { Trigger as L } from "../trigger/index.js";
+import { getComponentPrefix as W, getClassNameMixin as H } from "../../_utils/config.js";
+import { popoverProps as M } from "./props.js";
+import { useFirstElement as I } from "../../_hooks/use-first-element.js";
+import { mergeFirstChild as j } from "../../_utils/vue-eco.js";
+import R from "../../_container/render-function.js";
+const p = /* @__PURE__ */ new Set(), Y = /* @__PURE__ */ x({
+  name: W("Popover"),
   inheritAttrs: !1,
-  props: F,
+  props: M,
   slots: Object,
   emits: {
     "update:popupVisible": (e) => !0,
@@ -14,23 +17,58 @@ const k = /* @__PURE__ */ P({
     hide: () => !0
   },
   setup(e, {
-    emit: a,
+    emit: r,
     slots: o,
-    attrs: u
+    attrs: y
   }) {
-    const n = w("popover"), c = b(e.defaultPopupVisible), d = i(() => e.popupVisible ?? c.value), r = i(() => !!(o.title || e.title !== void 0)), s = i(() => !!(o.content || e.content !== void 0)), m = i(() => [n.element("content"), {
-      [n.element("content-has-title")]: r.value
-    }, e.contentClass]), C = i(() => [n.element("arrow"), e.arrowClass]), f = (t) => {
-      c.value = t, a("update:popupVisible", t), a("popupVisibleChange", t);
-    }, h = () => {
+    const i = H("popover"), C = F(e.defaultPopupVisible), d = u(() => e.popupVisible ?? C.value), {
+      children: s,
+      firstElement: v
+    } = I(), g = F(), m = Symbol("popover");
+    let c = !1;
+    const h = u(() => !!(o.title || e.title !== void 0)), S = u(() => !!(o.content || e.content !== void 0)), V = u(() => [i.element("content"), {
+      [i.element("content-has-title")]: h.value
+    }, e.contentClass]), k = u(() => [i.element("arrow"), e.arrowClass]), P = (t) => {
+      C.value = t, r("update:popupVisible", t), r("popupVisibleChange", t);
+    }, D = () => {
       var t;
       return ((t = o.title) == null ? void 0 : t.call(o)) ?? e.title;
-    }, v = () => {
+    }, E = () => {
       var t;
       return ((t = o.content) == null ? void 0 : t.call(o)) ?? e.content;
+    }, f = (t) => {
+      !d.value || t.defaultPrevented || t.isComposing || t.keyCode === 229 || t.key !== "Escape" || (t.preventDefault(), t.stopPropagation(), P(!1), N(() => {
+        var n;
+        c = !0, (n = v.value) == null || n.focus({
+          preventScroll: !0
+        }), c = !1;
+      }));
+    }, O = (t) => {
+      var n;
+      return s.value = ((n = o.default) == null ? void 0 : n.call(o)) ?? [], j(s.value, {
+        ...t,
+        onKeydown: f,
+        onFocusinCapture: (a) => {
+          c && a.stopImmediatePropagation();
+        },
+        onFocusoutCapture: (a) => {
+          c && a.stopImmediatePropagation();
+        }
+      }), s.value;
+    }, b = (t) => {
+      var a, T;
+      if (Array.from(p).at(-1) !== m) return;
+      const n = t.target;
+      n !== document.body && n !== document.documentElement && !((a = v.value) != null && a.contains(n)) && !((T = g.value) != null && T.contains(n)) || f(t);
+    }, w = () => {
+      p.delete(m), typeof document < "u" && document.removeEventListener("keydown", b, !0);
     };
-    return () => l(T, p(u, {
-      class: [n.block, u.class],
+    return A(d, (t) => {
+      w(), t && typeof document < "u" && (p.add(m), document.addEventListener("keydown", b, !0));
+    }, {
+      immediate: !0
+    }), B(w), () => l(L, K(y, {
+      class: [i.block, y.class],
       popupVisible: d.value,
       trigger: e.trigger,
       position: e.position,
@@ -44,9 +82,9 @@ const k = /* @__PURE__ */ P({
       clickToClose: e.clickToClose,
       clickOutsideToClose: e.clickOutsideToClose,
       unmountOnClose: e.unmountOnClose,
-      contentClass: m.value,
+      contentClass: V.value,
       contentStyle: e.contentStyle,
-      arrowClass: C.value,
+      arrowClass: k.value,
       arrowStyle: e.arrowStyle,
       popupStyle: e.popupStyle,
       animationName: e.animationName,
@@ -65,22 +103,24 @@ const k = /* @__PURE__ */ P({
       scrollToClose: e.scrollToClose,
       scrollToCloseDistance: e.scrollToCloseDistance,
       autoFitTransformOrigin: !0,
-      onPopupVisibleChange: f,
-      onShow: () => a("show"),
-      onHide: () => a("hide")
+      onPopupVisibleChange: P,
+      onShow: () => r("show"),
+      onHide: () => r("hide")
     }), {
-      default: () => {
-        var t;
-        return (t = o.default) == null ? void 0 : t.call(o);
-      },
-      content: () => l(y, null, [r.value && l("div", {
-        class: n.element("title")
-      }, [h()]), s.value && l("div", {
-        class: n.element("body")
-      }, [v()])])
+      default: () => l(R, {
+        renderFunc: O
+      }, null),
+      content: () => l("div", {
+        ref: g,
+        onKeydown: f
+      }, [h.value && l("div", {
+        class: i.element("title")
+      }, [D()]), S.value && l("div", {
+        class: i.element("body")
+      }, [E()])])
     });
   }
 });
 export {
-  k as default
+  Y as default
 };