x-next 1.1.0 → 1.3.0

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

@@ -1,7 +1,7 @@
-import { defineComponent as r, ref as u, computed as c, inject as f } from "vue";
-import { dropdownInjectionKey as b } from "./context.js";
-import { getClassNameMixin as p } from "../../_utils/config.js";
-const C = r({
+import { defineComponent as y, ref as j, computed as a, inject as m, onBeforeUnmount as p } from "vue";
+import { dropdownInjectionKey as I, dropdownMenuInjectionKey as g } from "./context.js";
+import { getClassNameMixin as w } from "../../_utils/config.js";
+const K = y({
   name: "DropdownOption",
   props: {
     /**
@@ -36,30 +36,34 @@ const C = r({
    * @en Icon
    * @slot icon
    */
-  setup(t, { emit: l }) {
-    const n = p("dropdown--option"), i = u(), d = c(() => {
+  setup(t, { emit: r }) {
+    const o = w("dropdown--option"), i = j(), u = a(() => {
       var e;
       return t.value ?? ((e = i.value) == null ? void 0 : e.textContent) ?? void 0;
-    }), o = t.uninjectContext ? void 0 : f(b, void 0), a = (e) => {
-      t.disabled || (l("click", e), o == null || o.onOptionClick(d.value, e));
-    }, s = (e) => {
-      t.disabled || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), a(e));
-    }, m = c(() => [
-      n.block,
+    }), d = t.uninjectContext ? void 0 : m(I, void 0), n = m(g, void 0), c = { element: i, disabled: a(() => t.disabled) }, l = n == null ? void 0 : n.registerItem(c);
+    p(() => l == null ? void 0 : l());
+    const f = a(() => t.disabled ? -1 : !n || n.activeItem.value === c ? 0 : -1), b = () => n == null ? void 0 : n.setActiveItem(c), s = (e) => {
+      t.disabled || (r("click", e), d == null || d.onOptionClick(u.value, e));
+    }, v = (e) => {
+      t.disabled || e.defaultPrevented || e.isComposing || e.target !== i.value || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), s(e));
+    }, k = a(() => [
+      o.block,
       {
-        [n.modifier("disabled")]: t.disabled,
-        [n.modifier("active")]: t.active
+        [o.modifier("disabled")]: t.disabled,
+        [o.modifier("active")]: t.active
       }
     ]);
     return {
-      className: n,
-      cls: m,
+      className: o,
+      cls: k,
       liRef: i,
-      handleClick: a,
-      handleKeydown: s
+      tabIndex: f,
+      handleFocus: b,
+      handleClick: s,
+      handleKeydown: v
     };
   }
 });
 export {
-  C as default
+  K as default
 };

package/dist/es/components/dropdown/DropdownSubmenu.vue.js

@@ -1,20 +1,24 @@
-import d from "./DropdownSubmenu.vue2.js";
-import { resolveComponent as s, openBlock as c, createBlock as f, withCtx as e, createVNode as i, mergeProps as u, createSlots as p, renderSlot as n, normalizeClass as m } from "vue";
-import g from "../../_virtual/_plugin-vue_export-helper.js";
-function b(o, $, h, v, P, _) {
-  const t = s("IconRight"), r = s("dropdown-option"), l = s("dropdown-panel"), a = s("Trigger");
-  return c(), f(a, {
+import u from "./DropdownSubmenu.vue2.js";
+import { resolveComponent as s, openBlock as f, createBlock as c, withCtx as e, createVNode as p, mergeProps as g, createSlots as r, renderSlot as n, normalizeClass as m } from "vue";
+import b from "../../_virtual/_plugin-vue_export-helper.js";
+function h(o, C, w, $, P, v) {
+  const a = s("IconRight"), t = s("dropdown-option"), l = s("dropdown-panel"), d = s("Trigger");
+  return f(), c(d, {
     "popup-visible": o.computedPopupVisible,
     trigger: o.trigger,
     position: o.position,
     disabled: o.disabled,
     "popup-offset": 4,
-    onPopupVisibleChange: o.handlePopupVisibleChange
+    onPopupVisibleChange: o.handlePopupVisibleChange,
+    onShow: o.handleShow
   }, {
     content: e(() => [
-      i(l, {
-        class: m(o.className.block)
-      }, p({
+      p(l, {
+        ref: "panelRef",
+        class: m(o.className.block),
+        "close-on-arrow-left": "",
+        onClose: o.handleClose
+      }, r({
         default: e(() => [
           n(o.$slots, "content")
         ]),
@@ -27,36 +31,45 @@ function b(o, $, h, v, P, _) {
           ]),
           key: "0"
         } : void 0
-      ]), 1032, ["class"])
+      ]), 1032, ["class", "onClose"])
     ]),
-    default: e(() => [
-      i(r, u(o.optionProps, {
-        active: o.computedPopupVisible,
-        "uninject-context": ""
-      }), p({
-        suffix: e(() => [
-          n(o.$slots, "suffix", {}, () => [
-            i(t)
-          ])
-        ]),
-        default: e(() => [
-          n(o.$slots, "default")
-        ]),
-        _: 2
-      }, [
-        o.$slots.icon ? {
-          name: "icon",
-          fn: e(() => [
-            n(o.$slots, "icon")
+    default: e(() => {
+      var i;
+      return [
+        p(t, g({ ref: "optionRef" }, o.optionProps, {
+          disabled: o.disabled || ((i = o.optionProps) == null ? void 0 : i.disabled),
+          active: o.computedPopupVisible,
+          "uninject-context": "",
+          "aria-haspopup": "menu",
+          "aria-expanded": o.computedPopupVisible,
+          onKeydownCapture: o.handleTriggerKeydown,
+          onFocusinCapture: o.handleTriggerFocus,
+          onFocusoutCapture: o.handleTriggerFocus
+        }), r({
+          suffix: e(() => [
+            n(o.$slots, "suffix", {}, () => [
+              p(a)
+            ])
           ]),
-          key: "0"
-        } : void 0
-      ]), 1040, ["active"])
-    ]),
+          default: e(() => [
+            n(o.$slots, "default")
+          ]),
+          _: 2
+        }, [
+          o.$slots.icon ? {
+            name: "icon",
+            fn: e(() => [
+              n(o.$slots, "icon")
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1040, ["disabled", "active", "aria-expanded", "onKeydownCapture", "onFocusinCapture", "onFocusoutCapture"])
+      ];
+    }),
     _: 3
-  }, 8, ["popup-visible", "trigger", "position", "disabled", "onPopupVisibleChange"]);
+  }, 8, ["popup-visible", "trigger", "position", "disabled", "onPopupVisibleChange", "onShow"]);
 }
-const k = /* @__PURE__ */ g(d, [["render", b]]);
+const k = /* @__PURE__ */ b(u, [["render", h]]);
 export {
   k as default
 };

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

@@ -1,17 +1,18 @@
-import { defineComponent as s, toRefs as l } from "vue";
-import { Trigger as u } from "../trigger/index.js";
-import a from "./dropdown-panel.vue.js";
-import m from "./DropdownOption.vue.js";
-import d from "../../icons/_self/dropdown/more.js";
-import { useTrigger as f } from "../../_hooks/use-trigger.js";
-import { getClassNameMixin as b } from "../../_utils/config.js";
-const v = s({
+import { defineComponent as u, toRefs as m, ref as f, computed as g } from "vue";
+import { Trigger as b } from "../trigger/index.js";
+import c from "./dropdown-panel.vue.js";
+import y from "./DropdownOption.vue.js";
+import w from "../../icons/_self/dropdown/more.js";
+import { useTrigger as V } from "../../_hooks/use-trigger.js";
+import { getClassNameMixin as P } from "../../_utils/config.js";
+import { useDropdownKeyboard as h } from "./use-keyboard.js";
+const K = u({
   name: "DropdownSubmenu",
   components: {
-    Trigger: u,
-    DropdownPanel: a,
-    DropdownOption: m,
-    IconRight: d
+    Trigger: b,
+    DropdownPanel: c,
+    DropdownOption: y,
+    IconRight: w
   },
   props: {
     /**
@@ -77,13 +78,13 @@ const v = s({
     }
   },
   emits: {
-    "update:popupVisible": (e) => !0,
+    "update:popupVisible": (o) => !0,
     /**
      * @zh 下拉框显示状态发生改变时触发
      * @en Triggered when the display status of the drop-down box changes
      * @property {boolean} visible
      */
-    popupVisibleChange: (e) => !0
+    popupVisibleChange: (o) => !0
   },
   /**
    * @zh 子菜单内容
@@ -102,19 +103,39 @@ const v = s({
    * @slot icon
    * @version 2.29.0
    */
-  setup(e, { emit: o }) {
-    const { defaultPopupVisible: p, popupVisible: t } = l(e), i = b("dropdown--submenu"), { computedPopupVisible: r, handlePopupVisibleChange: n } = f({
-      defaultPopupVisible: p,
-      popupVisible: t,
-      emit: o
-    });
+  setup(o, { emit: n }) {
+    const { defaultPopupVisible: l, popupVisible: s } = m(o), a = P("dropdown--submenu"), { computedPopupVisible: t, handlePopupVisibleChange: i } = V({
+      defaultPopupVisible: l,
+      popupVisible: s,
+      emit: n
+    }), p = f(), d = g({
+      get: () => {
+        var e;
+        return (e = p.value) == null ? void 0 : e.$el;
+      },
+      set: () => {
+      }
+    }), r = h(
+      t,
+      i,
+      d,
+      () => {
+        var e;
+        return o.disabled || !!((e = o.optionProps) != null && e.disabled);
+      }
+    );
     return {
-      className: i,
-      computedPopupVisible: r,
-      handlePopupVisibleChange: n
+      ...r,
+      optionRef: p,
+      className: a,
+      computedPopupVisible: t,
+      handlePopupVisibleChange: i,
+      handleTriggerKeydown: (e) => {
+        e.key !== "ArrowDown" && e.key !== "ArrowUp" && r.handleTriggerKeydown(e);
+      }
     };
   }
 });
 export {
-  v as default
+  K as default
 };

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

@@ -1,4 +1,5 @@
-const o = Symbol("ArcoDropdown");
+const o = Symbol("ArcoDropdown"), n = Symbol("DropdownMenu");
 export {
-  o as dropdownInjectionKey
+  o as dropdownInjectionKey,
+  n as dropdownMenuInjectionKey
 };

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

@@ -1,49 +1,52 @@
 import c from "./dropdown-panel.vue2.js";
-import { resolveComponent as s, openBlock as o, createElementBlock as a, normalizeClass as l, createBlock as t, renderSlot as n, createVNode as i, normalizeStyle as d, withCtx as f, createElementVNode as y, createCommentVNode as u } from "vue";
-import k from "../../_virtual/_plugin-vue_export-helper.js";
-function N(e, $, S, g, v, w) {
-  const r = s("spin"), m = s("empty"), p = s("Scrollbar");
-  return o(), a("div", {
-    class: l(e.cls)
+import { resolveComponent as s, openBlock as o, createElementBlock as n, normalizeClass as l, createBlock as t, renderSlot as a, createVNode as y, normalizeStyle as f, withCtx as u, createElementVNode as k, createCommentVNode as N } from "vue";
+import $ from "../../_virtual/_plugin-vue_export-helper.js";
+function w(e, r, S, E, b, g) {
+  const m = s("spin"), p = s("empty"), d = s("Scrollbar");
+  return o(), n("div", {
+    ref: "panelElement",
+    class: l(e.cls),
+    tabindex: "-1",
+    onKeydown: r[0] || (r[0] = (...i) => e.handleKeydown && e.handleKeydown(...i))
   }, [
-    e.loading ? (o(), t(r, {
+    e.loading ? (o(), t(m, {
       key: 0,
       class: l(e.className.element("loading")),
       display: "block",
       tip: e.t("common.loading")
-    }, null, 8, ["class", "tip"])) : e.isEmpty ? (o(), a("div", {
+    }, null, 8, ["class", "tip"])) : e.isEmpty ? (o(), n("div", {
       key: 1,
       class: l(e.className.element("empty"))
     }, [
-      n(e.$slots, "empty", {}, () => [
-        i(m)
+      a(e.$slots, "empty", {}, () => [
+        y(p)
       ])
-    ], 2)) : (o(), t(p, {
+    ], 2)) : (o(), t(d, {
       key: 2,
       ref: "wrapperRef",
       class: l(e.className.element("list--wrapper")),
-      style: d(e.style),
+      style: f(e.style),
       onScroll: e.handleScroll
     }, {
-      default: f(() => [
-        y("ul", {
+      default: u(() => [
+        k("ul", {
           class: l(e.className.element("list")),
           role: "menu"
         }, [
-          n(e.$slots, "default")
+          a(e.$slots, "default")
         ], 2)
       ]),
       _: 3
     }, 8, ["class", "style", "onScroll"])),
-    e.$slots.footer && !e.loading && !e.isEmpty ? (o(), a("div", {
+    e.$slots.footer && !e.loading && !e.isEmpty ? (o(), n("div", {
       key: 3,
       class: l(e.className.element("footer"))
     }, [
-      n(e.$slots, "footer")
-    ], 2)) : u("", !0)
-  ], 2);
+      a(e.$slots, "footer")
+    ], 2)) : N("", !0)
+  ], 34);
 }
-const h = /* @__PURE__ */ k(c, [["render", N]]);
+const B = /* @__PURE__ */ $(c, [["render", w]]);
 export {
-  h as default
+  B as default
 };

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

@@ -1,19 +1,21 @@
-import { defineComponent as h, inject as y, ref as g, computed as n } from "vue";
-import { Empty as x } from "../empty/index.js";
-import { dropdownInjectionKey as b } from "./context.js";
-import { isNumber as H } from "../../_utils/is.js";
-import { Scrollbar as w } from "../scrollbar-v2/index.js";
-import { Spin as B } from "../spin/index.js";
-import { getClassNameMixin as M } from "../../_utils/config.js";
-import { useLocale as N } from "../../locale/index.js";
-const _ = h({
+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 { 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({
   name: "DropdownPanel",
   components: {
-    Scrollbar: w,
-    Empty: x,
-    Spin: B
+    Scrollbar: L,
+    Empty: k,
+    Spin: S
   },
   props: {
+    // private: only submenu panels return to their parent on ArrowLeft.
+    closeOnArrowLeft: Boolean,
     loading: {
       type: Boolean,
       default: !1
@@ -33,37 +35,87 @@ const _ = h({
       type: [Function, Array]
     }
   },
-  emits: ["scroll", "reachBottom"],
-  setup(p, { emit: r, slots: m }) {
-    const o = M("dropdown"), { t: s } = N(), t = y(b, {}), a = g(), i = (e) => {
-      const { scrollTop: f, scrollHeight: d, offsetHeight: u } = e.target;
-      d - (f + u) <= p.bottomOffset && r("reachBottom", e), r("scroll", e);
-    }, l = n(() => {
-      if (H(t.popupMaxHeight))
+  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) => {
+      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.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();
+      return a(e === "last" ? o.at(-1) : o[0]);
+    } }), H(C, {
+      activeItem: n,
+      setActiveItem: I,
+      registerItem: (e) => (r.value = [...r.value, e], () => {
+        r.value = r.value.filter((o) => o !== e);
+      })
+    }), P(() => {
+      var o;
+      const e = p();
+      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) => {
+      if (e.defaultPrevented || e.isComposing) return;
+      if (e.key === "Escape" || m.closeOnArrowLeft && e.key === "ArrowLeft") {
+        e.preventDefault(), e.stopPropagation(), c("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))
+        return;
+      e.preventDefault(), e.stopPropagation();
+      const s = o.findIndex((l) => l.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]);
+      }
+    }, 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))
         return {
-          maxHeight: `${t.popupMaxHeight}px`
+          maxHeight: `${i.popupMaxHeight}px`
         };
-      if (!t.popupMaxHeight)
+      if (!i.popupMaxHeight)
         return {
           maxHeight: "none",
           overflowY: "hidden"
         };
-    }), c = n(() => [
-      o.block,
+    }), O = v(() => [
+      u.block,
       {
-        [o.modifier("has-footer")]: !!m.footer
+        [u.modifier("has-footer")]: !!g.footer
       }
     ]);
     return {
-      className: o,
-      cls: c,
-      style: l,
-      wrapperRef: a,
-      handleScroll: i,
-      t: s
+      className: u,
+      cls: O,
+      style: N,
+      wrapperRef: b,
+      panelElement: f,
+      handleKeydown: E,
+      handleScroll: x,
+      t: w
     };
   }
 });
 export {
-  _ as default
+  q as default
 };

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

@@ -0,0 +1,45 @@
+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;
+    const a = e.currentTarget;
+    if (!a.matches(':disabled, [aria-disabled="true"]')) {
+      if (e.key === "Escape" && n.value)
+        d();
+      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);
+      } 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();
+  };
+  return y(n, (e) => {
+    e ? u(l) : (t = void 0, r && (r = !1, u(() => {
+      var a;
+      o = !0, (a = i.value) == null || a.focus(), o = !1;
+    })));
+  }), {
+    panelRef: s,
+    handleShow: p,
+    handleTriggerKeydown: m,
+    handleTriggerFocus: w,
+    handleClose: d,
+    handleKeyboardSelect: g
+  };
+};
+export {
+  v as useDropdownKeyboard
+};