x-next 1.2.0 → 1.3.1

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

package/dist/es/components/form-checkbox/Checkbox.js

@@ -1,17 +1,17 @@
-import { defineComponent as U, toRefs as X, ref as j, inject as _, computed as s, watch as C, watchEffect as $, createVNode as c, mergeProps as A, nextTick as q } from "vue";
-import F from "../_components/icon-hover/index.vue.js";
-import I from "./icon-check.js";
-import { isArray as h, isUndefined as J, isNull as L } from "../../_utils/is.js";
-import { checkboxGroupKey as Q } from "./context.js";
-import { useFormItem as Y, useFormItemControl as Z } from "../../_hooks/use-form-item.js";
+import { defineComponent as W, toRefs as X, ref as A, inject as _, computed as s, watch as C, watchEffect as $, createVNode as c, mergeProps as I, nextTick as J } from "vue";
+import j from "../_components/icon-hover/index.vue.js";
+import p from "./icon-check.js";
+import { isArray as h, isUndefined as L, isNull as Q } from "../../_utils/is.js";
+import { checkboxGroupKey as Y } from "./context.js";
+import { useFormItem as Z, useFormItemControl as x } from "../../_hooks/use-form-item.js";
 import { getClassNameMixin as G } from "../../_utils/config.js";
-import { useSize as x } from "../../_hooks/use-size.js";
-const oe = /* @__PURE__ */ U({
+import { useSize as ee } from "../../_hooks/use-size.js";
+const ae = /* @__PURE__ */ new Set(["id", "name", "required", "form", "tabindex", "tabIndex", "autofocus", "autoFocus", "autocomplete", "autoComplete"]), F = (t) => ae.has(t) || t.startsWith("aria-"), ce = /* @__PURE__ */ W({
   name: "Checkbox",
   inheritAttrs: !1,
   components: {
-    IconCheck: I,
-    IconHover: F
+    IconCheck: p,
+    IconHover: j
   },
   props: {
     /**
@@ -95,78 +95,78 @@ const oe = /* @__PURE__ */ U({
       disabled: N,
       modelValue: w,
       size: O
-    } = X(t), i = G("checkbox"), d = j(), l = t.uninjectGroupContext ? void 0 : _(Q, void 0), z = (l == null ? void 0 : l.name) === "XCheckboxGroup", {
-      formItemCtx: p,
-      mergedDisabled: k,
-      mergedSize: E,
-      eventHandlers: y
-    } = Y({
+    } = X(t), i = G("checkbox"), u = A(), l = t.uninjectGroupContext ? void 0 : _(Y, void 0), k = (l == null ? void 0 : l.name) === "XCheckboxGroup", {
+      formItemCtx: E,
+      mergedDisabled: y,
+      mergedSize: M,
+      eventHandlers: z
+    } = Z({
       disabled: N,
       size: O
-    }), M = Z(z ? {} : p, () => Object.fromEntries(Object.entries(f).filter(([e]) => e === "id" || e === "name" || e.startsWith("aria-")))), H = s(() => Object.fromEntries(Object.entries(f).filter(([e]) => e !== "id" && e !== "name" && e !== "class" && e !== "style" && !e.startsWith("aria-")))), {
-      mergedSize: P
-    } = x(E), r = j(t.defaultChecked), o = s(() => z ? l == null ? void 0 : l.computedValue : t.modelValue ?? r.value), u = s(() => h(o.value) ? o.value.includes(t.value ?? !0) : o.value), m = s(() => (l == null ? void 0 : l.disabled) || (k == null ? void 0 : k.value) || !u.value && (l == null ? void 0 : l.isMaxed)), S = s(() => (l == null ? void 0 : l.size) ?? P.value), R = (e) => {
+    }), H = x(k ? {} : E, () => Object.fromEntries(Object.entries(f).filter(([e]) => F(e)))), P = s(() => Object.fromEntries(Object.entries(f).filter(([e]) => e !== "class" && e !== "style" && !F(e)))), {
+      mergedSize: R
+    } = ee(M), r = A(t.defaultChecked), o = s(() => k ? l == null ? void 0 : l.computedValue : t.modelValue ?? r.value), d = s(() => h(o.value) ? o.value.includes(t.value ?? !0) : o.value), m = s(() => (l == null ? void 0 : l.disabled) || (y == null ? void 0 : y.value) || !d.value && (l == null ? void 0 : l.isMaxed)), B = s(() => (l == null ? void 0 : l.size) ?? R.value), q = (e) => {
       e.stopPropagation();
-    }, W = (e) => {
+    }, D = (e) => {
       var v, V;
       const {
         checked: a
       } = e.target;
       let n = a;
       if (h(o.value)) {
-        const B = new Set(o.value);
-        a ? B.add(t.value ?? !0) : B.delete(t.value ?? !0), n = Array.from(B);
+        const S = new Set(o.value);
+        a ? S.add(t.value ?? !0) : S.delete(t.value ?? !0), n = Array.from(S);
       }
-      r.value = a, z && h(n) ? l == null || l.handleChange(n, e) : (g("update:modelValue", n), g("change", n, e), (V = (v = y.value) == null ? void 0 : v.onChange) == null || V.call(v, e)), q(() => {
-        d.value && d.value.checked !== u.value && (d.value.checked = u.value);
+      r.value = a, k && h(n) ? l == null || l.handleChange(n, e) : (g("update:modelValue", n), g("change", n, e), (V = (v = z.value) == null ? void 0 : v.onChange) == null || V.call(v, e)), J(() => {
+        u.value && u.value.checked !== d.value && (u.value.checked = d.value);
       });
-    }, D = s(() => [i.block, i.modifier(`size-${S.value}`), {
-      [i.modifier("checked")]: u.value,
+    }, K = s(() => [i.block, i.modifier(`size-${B.value}`), {
+      [i.modifier("checked")]: d.value,
       [i.modifier("indeterminate")]: t.indeterminate,
       [i.modifier("disabled")]: m.value
-    }]), K = (e) => {
+    }]), T = (e) => {
       var a, n;
-      (n = (a = y.value) == null ? void 0 : a.onFocus) == null || n.call(a, e);
-    }, T = (e) => {
+      (n = (a = z.value) == null ? void 0 : a.onFocus) == null || n.call(a, e);
+    }, U = (e) => {
       var a, n;
-      (n = (a = y.value) == null ? void 0 : a.onBlur) == null || n.call(a, e);
+      (n = (a = z.value) == null ? void 0 : a.onBlur) == null || n.call(a, e);
     };
     return C(w, (e) => {
-      (J(e) || L(e)) && (r.value = !1);
+      (L(e) || Q(e)) && (r.value = !1);
     }), C(o, (e) => {
       let a;
-      h(e) ? a = e.includes(t.value ?? !0) : a = e, r.value !== a && (r.value = a), d.value && d.value.checked !== a && (d.value.checked = a);
+      h(e) ? a = e.includes(t.value ?? !0) : a = e, r.value !== a && (r.value = a), u.value && u.value.checked !== a && (u.value.checked = a);
     }), $(() => {
-      d.value && (d.value.indeterminate = t.indeterminate);
+      u.value && (u.value.indeterminate = t.indeterminate);
     }), () => {
       var e, a;
-      return c("label", A(H.value, {
+      return c("label", I(P.value, {
         "aria-disabled": m.value,
-        class: [D.value, f.class],
+        class: [K.value, f.class],
         style: f.style
-      }), [c("input", A(M.value, {
-        ref: d,
+      }), [c("input", I(H.value, {
+        ref: u,
         type: "checkbox",
-        checked: u.value,
-        "aria-checked": t.indeterminate ? "mixed" : u.value,
+        checked: d.value,
+        "aria-checked": t.indeterminate ? "mixed" : d.value,
         value: t.value,
         class: i.modifier("target"),
         disabled: m.value,
-        onClick: R,
-        onChange: W,
-        onFocus: K,
-        onBlur: T
+        onClick: q,
+        onChange: D,
+        onFocus: T,
+        onBlur: U
       }), null), ((a = b.checkbox ?? ((e = l == null ? void 0 : l.slots) == null ? void 0 : e.checkbox)) == null ? void 0 : a({
-        checked: u.value,
+        checked: d.value,
         disabled: m.value
-      })) ?? c(F, {
+      })) ?? c(j, {
         class: i.modifier("icon-hover"),
-        size: S.value,
-        disabled: m.value || u.value
+        size: B.value,
+        disabled: m.value || d.value
       }, {
         default: () => [c("div", {
           class: i.modifier("icon")
-        }, [u.value && c(I, {
+        }, [d.value && c(p, {
           class: i.modifier("icon-check")
         }, null)])]
       }), b.default && c("span", {
@@ -176,5 +176,5 @@ const oe = /* @__PURE__ */ U({
   }
 });
 export {
-  oe as default
+  ce as default
 };

package/dist/es/components/form-select/Select.js

@@ -1,5 +1,5 @@
 import { defineComponent as Ne, toRefs as je, useId as De, computed as i, ref as p, watch as H, nextTick as Re, watchEffect as Te, createVNode as m, mergeProps as A, isVNode as _e } from "vue";
-import { isObject as N, isFunction as y, isArray as Ie, isNumber as Ke, isString as $e, isBoolean as ze, isUndefined as S, isNull as He, isEmptyObject as Me } from "../../_utils/is.js";
+import { isObject as N, isFunction as y, isArray as Ie, isNumber as Ke, isString as $e, isBoolean as ze, isUndefined as C, isNull as He, isEmptyObject as Me } from "../../_utils/is.js";
 import { getKeyFromValue as M, isGroupOptionInfo as Ue, isValidOption as Ge, hasEmptyStringKey as We } from "./utils.js";
 import { Trigger as U } from "../trigger/index.js";
 import G from "../_components/select-view/select-view.js";
@@ -439,7 +439,7 @@ const W = ["id", "aria-label", "aria-labelledby", "aria-describedby"], rt = {
   setup(t, {
     slots: o,
     emit: r,
-    attrs: C
+    attrs: B
   }) {
     const {
       size: Y,
@@ -456,10 +456,10 @@ const W = ["id", "aria-label", "aria-labelledby", "aria-describedby"], rt = {
       fieldNames: V,
       loading: ae,
       defaultActiveFirstOption: le
-    } = je(t), ne = lt("select"), D = De(), B = `${D}-listbox`, x = (e) => `${D}-option-${encodeURIComponent(e)}`, {
+    } = je(t), ne = lt("select"), D = De(), x = `${D}-listbox`, F = (e) => `${D}-option-${encodeURIComponent(e)}`, {
       formItemCtx: oe,
       mergedSize: ue,
-      mergedDisabled: F,
+      mergedDisabled: w,
       mergedError: re,
       eventHandlers: ie
     } = et({
@@ -478,7 +478,7 @@ const W = ["id", "aria-label", "aria-labelledby", "aria-describedby"], rt = {
     });
     const R = p(), T = p({}), _ = p(), {
       computedPopupVisible: c,
-      handlePopupVisibleChange: w
+      handlePopupVisibleChange: O
     } = Ze({
       popupVisible: X,
       defaultPopupVisible: Z,
@@ -491,7 +491,7 @@ const W = ["id", "aria-label", "aria-labelledby", "aria-describedby"], rt = {
       }));
     });
     H(te, (e) => {
-      (S(e) || He(e)) && (k.value = j.value ? [] : e);
+      (C(e) || He(e)) && (k.value = j.value ? [] : e);
     });
     const d = i(() => E.value.map((e) => e.key)), I = i(() => ({
       ...rt,
@@ -530,7 +530,7 @@ const W = ["id", "aria-label", "aria-labelledby", "aria-describedby"], rt = {
       var n;
       let l = pe(e.value);
       const a = (n = K.value) == null ? void 0 : n[e.key];
-      return !S(a) && !Me(a) && (l = {
+      return !C(a) && !Me(a) && (l = {
         ...l,
         ...a
       }), l;
@@ -585,12 +585,12 @@ const W = ["id", "aria-label", "aria-labelledby", "aria-describedby"], rt = {
           const a = u.get(e);
           a && g(a.label);
         }
-        w(!1);
+        O(!1);
       }
     }, ye = at((e) => {
       r("search", e);
     }, t.searchDelay), he = (e) => {
-      e !== s.value && (c.value || w(!0), g(e), t.allowSearch && ye(e));
+      e !== s.value && (c.value || O(!0), g(e), t.allowSearch && ye(e));
     }, Ve = (e) => {
       const l = u.get(e), a = d.value.filter((n) => n !== e);
       b(a), r("remove", l == null ? void 0 : l.value);
@@ -610,7 +610,7 @@ const W = ["id", "aria-label", "aria-labelledby", "aria-describedby"], rt = {
       optionInfoMap: u,
       validOptionInfos: Ce,
       enabledOptionKeys: Be,
-      activeKey: O,
+      activeKey: S,
       handleKeyDown: xe
     } = Xe({
       multiple: j,
@@ -623,6 +623,7 @@ const W = ["id", "aria-label", "aria-labelledby", "aria-describedby"], rt = {
       valueKey: f,
       fieldNames: V,
       loading: ae,
+      disabled: w,
       popupVisible: c,
       valueKeys: d,
       dropdownRef: R,
@@ -630,17 +631,17 @@ const W = ["id", "aria-label", "aria-labelledby", "aria-describedby"], rt = {
       virtualListRef: _,
       defaultActiveFirstOption: le,
       onSelect: ge,
-      onPopupVisibleChange: w,
-      getOptionId: x
-    }), Fe = i(() => nt(C, [...W])), Pe = i(() => ({
-      ...ot(C, [...W]),
+      onPopupVisibleChange: O,
+      getOptionId: F
+    }), Fe = i(() => nt(B, [...W])), Pe = i(() => ({
+      ...ot(B, [...W]),
       role: "combobox",
       "aria-haspopup": "listbox",
       "aria-expanded": String(c.value),
-      "aria-controls": B,
-      "aria-activedescendant": c.value && !S(O.value) ? x(O.value) : void 0,
+      "aria-controls": x,
+      "aria-activedescendant": c.value && !C(S.value) ? F(S.value) : void 0,
       "aria-autocomplete": t.allowSearch || t.allowCreate ? "list" : "none",
-      "aria-label": C["aria-label"] ?? (oe.labelId ? void 0 : t.placeholder ?? ce("common.select"))
+      "aria-label": B["aria-label"] ?? (oe.labelId ? void 0 : t.placeholder ?? ce("common.select"))
     })), ke = i(() => {
       const e = [];
       for (const l of E.value) {
@@ -689,7 +690,7 @@ const W = ["id", "aria-label", "aria-labelledby", "aria-describedby"], rt = {
       }) : null;
     }, Le = () => m(Ye, {
       ref: R,
-      id: B,
+      id: x,
       multiple: t.multiple,
       loading: t.loading,
       empty: Ce.value.length === 0,
@@ -748,26 +749,26 @@ const W = ["id", "aria-label", "aria-labelledby", "aria-describedby"], rt = {
       preventFocus: !0,
       autoFitPopupWidth: !0,
       autoFitTransformOrigin: !0,
-      disabled: F.value,
+      disabled: w.value,
       popupVisible: c.value,
       unmountOnClose: t.unmountOnClose,
       clickToClose: !(t.allowSearch || t.allowCreate),
       popupContainer: t.popupContainer,
-      onPopupVisibleChange: w
+      onPopupVisibleChange: O
     }, t.triggerProps), {
       default: () => {
         var e;
         return [((e = o.trigger) == null ? void 0 : e.call(o, {
           popupVisible: c.value,
-          disabled: F.value,
-          listboxId: B,
-          activeDescendant: c.value && !S(O.value) ? x(O.value) : void 0
+          disabled: w.value,
+          listboxId: x,
+          activeDescendant: c.value && !C(S.value) ? F(S.value) : void 0
         })) ?? m(G, A({
           class: ne.block,
           modelValue: ke.value,
           inputValue: s.value,
           multiple: t.multiple,
-          disabled: F.value,
+          disabled: w.value,
           error: re.value,
           loading: t.loading,
           allowClear: t.allowClear,