x-next 1.2.0 → 1.3.1

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

@@ -1,9 +1,9 @@
-import r from "./Dropdown.vue2.js";
-import { resolveComponent as t, openBlock as s, createBlock as a, withCtx as e, renderSlot as n, createVNode as l, createSlots as m } from "vue";
+import l from "./Dropdown.vue2.js";
+import { resolveComponent as n, openBlock as a, createBlock as d, withCtx as e, createVNode as i, createSlots as m, renderSlot as t } from "vue";
 import f from "../../_virtual/_plugin-vue_export-helper.js";
-function d(o, g, u, c, h, $) {
-  const i = t("DropdownPanel"), p = t("Trigger");
-  return s(), a(p, {
+function g(o, u, c, h, b, y) {
+  const p = n("RenderFunction"), r = n("DropdownPanel"), s = n("Trigger");
+  return a(), d(s, {
     "popup-visible": o.computedPopupVisible,
     "animation-name": "x-slide-dynamic-origin",
     "auto-fit-transform-origin": "",
@@ -13,10 +13,13 @@ function d(o, g, u, c, h, $) {
     "popup-offset": 4,
     "popup-container": o.popupContainer,
     "opened-class": o.className.modifier("open"),
-    onPopupVisibleChange: o.handlePopupVisibleChange
+    onPopupVisibleChange: o.handlePopupVisibleChange,
+    onShow: o.handleShow
   }, {
     content: e(() => [
-      l(i, {
+      i(r, {
+        ref: "panelRef",
+        onClose: o.handleClose,
         loading: o.loading,
         "is-empty": o.isEmpty,
         "bottom-offset": o.bottomOffset,
@@ -24,33 +27,33 @@ function d(o, g, u, c, h, $) {
         onReachBottom: o.handleReachBottom
       }, m({
         default: e(() => [
-          n(o.$slots, "content")
+          t(o.$slots, "content")
         ]),
         _: 2
       }, [
         o.$slots.empty ? {
           name: "empty",
           fn: e(() => [
-            n(o.$slots, "empty")
+            t(o.$slots, "empty")
           ]),
           key: "0"
         } : void 0,
         o.$slots.footer ? {
           name: "footer",
           fn: e(() => [
-            n(o.$slots, "footer")
+            t(o.$slots, "footer")
           ]),
           key: "1"
         } : void 0
-      ]), 1032, ["loading", "is-empty", "bottom-offset", "onScroll", "onReachBottom"])
+      ]), 1032, ["onClose", "loading", "is-empty", "bottom-offset", "onScroll", "onReachBottom"])
     ]),
     default: e(() => [
-      n(o.$slots, "default")
+      i(p, { "render-func": o.renderTrigger }, null, 8, ["render-func"])
     ]),
     _: 3
-  }, 8, ["popup-visible", "trigger", "position", "align-point", "popup-container", "opened-class", "onPopupVisibleChange"]);
+  }, 8, ["popup-visible", "trigger", "position", "align-point", "popup-container", "opened-class", "onPopupVisibleChange", "onShow"]);
 }
-const C = /* @__PURE__ */ f(r, [["render", d]]);
+const w = /* @__PURE__ */ f(l, [["render", g]]);
 export {
-  C as default
+  w as default
 };

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

@@ -1,14 +1,19 @@
-import { defineComponent as c, toRefs as m, provide as g, reactive as b } from "vue";
-import { Trigger as y } from "../trigger/index.js";
-import h from "./dropdown-panel.vue.js";
-import { useTrigger as B } from "../../_hooks/use-trigger.js";
-import { dropdownInjectionKey as v } from "./context.js";
-import { getClassNameMixin as V } from "../../_utils/config.js";
-const N = c({
+import { defineComponent as v, toRefs as B, provide as C, reactive as w } from "vue";
+import { Trigger as V } 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 K } from "../../_utils/vue-eco.js";
+import { useDropdownKeyboard as x } from "./use-keyboard.js";
+const q = v({
   name: "Dropdown",
   components: {
-    Trigger: y,
-    DropdownPanel: h
+    Trigger: V,
+    DropdownPanel: F,
+    RenderFunction: T
   },
   props: {
     /**
@@ -113,7 +118,7 @@ const N = c({
      * @param {string | number | Record<string, any> | undefined } value
      * @param {Event} ev
      */
-    select: (e, o) => !0,
+    select: (e, t) => !0,
     /**
      * @zh 下拉菜单滚动时触发
      * @en Triggered when the dropdown scrolls
@@ -143,33 +148,49 @@ const N = c({
    * @en Empty content
    * @slot empty
    */
-  setup(e, { emit: o }) {
-    const { defaultPopupVisible: l, popupVisible: i, popupMaxHeight: a } = m(e), n = V("dropdown"), { computedPopupVisible: r, handlePopupVisibleChange: p } = B({
-      defaultPopupVisible: l,
-      popupVisible: i,
-      emit: o
-    }), s = (t, f) => {
-      o("select", t, f), e.hideOnSelect && p(!1);
-    }, u = (t) => {
-      o("scroll", t);
-    }, d = (t) => {
-      o("reachBottom", t);
+  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 = x(
+      a,
+      p,
+      m
+    ), g = (o) => {
+      var i;
+      return l.value = ((i = n.default) == null ? void 0 : i.call(n)) ?? [], K(l.value, {
+        ...o,
+        onKeydown: (u) => {
+          u.key !== "ArrowRight" && r.handleTriggerKeydown(u);
+        },
+        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);
     };
-    return g(
-      v,
-      b({
-        popupMaxHeight: a,
-        onOptionClick: s
+    return C(
+      O,
+      w({
+        popupMaxHeight: c,
+        onOptionClick: h
       })
     ), {
-      className: n,
-      computedPopupVisible: r,
+      ...r,
+      renderTrigger: g,
+      className: f,
+      computedPopupVisible: a,
       handlePopupVisibleChange: p,
-      handleScroll: u,
-      handleReachBottom: d
+      handleScroll: y,
+      handleReachBottom: b
     };
   }
 });
 export {
-  N as default
+  q as default
 };

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

@@ -1,37 +1,38 @@
-import d from "./DropdownOption.vue2.js";
-import { openBlock as n, createElementBlock as a, normalizeClass as o, renderSlot as i, createCommentVNode as r, createElementVNode as t } from "vue";
-import f from "../../_virtual/_plugin-vue_export-helper.js";
-const m = ["aria-disabled", "tabindex"];
-function p(e, s, u, $, k, b) {
-  return n(), a("li", {
+import r from "./DropdownOption.vue2.js";
+import { openBlock as l, createElementBlock as a, normalizeClass as n, renderSlot as i, createCommentVNode as d, createElementVNode as f } from "vue";
+import m from "../../_virtual/_plugin-vue_export-helper.js";
+const t = ["aria-disabled", "tabindex"];
+function u(e, s, p, $, k, b) {
+  return l(), a("li", {
     ref: "liRef",
-    class: o([e.cls, { [e.className.modifier("has-suffix")]: !!e.$slots.suffix }]),
+    class: n([e.cls, { [e.className.modifier("has-suffix")]: !!e.$slots.suffix }]),
     role: "menuitem",
     "aria-disabled": e.disabled,
-    tabindex: e.disabled ? -1 : 0,
-    onClick: s[0] || (s[0] = (...l) => e.handleClick && e.handleClick(...l)),
-    onKeydown: s[1] || (s[1] = (...l) => e.handleKeydown && e.handleKeydown(...l))
+    tabindex: e.tabIndex,
+    onFocus: s[0] || (s[0] = (...o) => e.handleFocus && e.handleFocus(...o)),
+    onClick: s[1] || (s[1] = (...o) => e.handleClick && e.handleClick(...o)),
+    onKeydown: s[2] || (s[2] = (...o) => e.handleKeydown && e.handleKeydown(...o))
   }, [
-    e.$slots.icon ? (n(), a("span", {
+    e.$slots.icon ? (l(), a("span", {
       key: 0,
-      class: o(e.className.element("icon"))
+      class: n(e.className.element("icon"))
     }, [
       i(e.$slots, "icon")
-    ], 2)) : r("", !0),
-    t("span", {
-      class: o(e.className.element("content"))
+    ], 2)) : d("", !0),
+    f("span", {
+      class: n(e.className.element("content"))
     }, [
       i(e.$slots, "default")
     ], 2),
-    e.$slots.suffix ? (n(), a("span", {
+    e.$slots.suffix ? (l(), a("span", {
       key: 1,
-      class: o(e.className.element("suffix"))
+      class: n(e.className.element("suffix"))
     }, [
       i(e.$slots, "suffix")
-    ], 2)) : r("", !0)
-  ], 42, m);
+    ], 2)) : d("", !0)
+  ], 42, t);
 }
-const C = /* @__PURE__ */ f(d, [["render", p]]);
+const w = /* @__PURE__ */ m(r, [["render", u]]);
 export {
-  C as default
+  w as default
 };

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
 };