@itguy614/clean-ui 1.2.2 → 1.3.1

package/dist/components/CuiTreeNode.vue2.js

@@ -1,4 +1,200 @@
-import f from "./CuiTreeNode.vue.js";
+import { defineComponent as E, computed as m, ref as b, watch as F, nextTick as H, resolveComponent as R, openBlock as n, createElementBlock as r, withModifiers as Y, normalizeStyle as c, createCommentVNode as u, createElementVNode as S, createBlock as z, renderSlot as k, createTextVNode as O, toDisplayString as V, Fragment as A, renderList as P, withCtx as W, mergeProps as X } from "vue";
+import C from "./CuiIcon.vue.js";
+const j = ["data-cui-tree-id", "tabindex", "aria-expanded", "aria-selected", "aria-disabled", "aria-level", "aria-setsize", "aria-posinset"], q = { style: { flex: "1", minWidth: "0", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, $ = "var(--cui-border-strong, var(--cui-border))", G = /* @__PURE__ */ E({
+  __name: "CuiTreeNode",
+  props: {
+    node: {},
+    depth: {},
+    isLast: { type: Boolean },
+    expanded: {},
+    selectedSet: {},
+    selectable: { type: Boolean },
+    showLines: { type: Boolean },
+    animated: { type: Boolean },
+    cfg: {},
+    activeId: {},
+    sizeOfSet: {},
+    positionInSet: {}
+  },
+  emits: ["toggle-expand", "select-node", "node-focused"],
+  setup(e, { emit: L }) {
+    const t = e, d = L, v = m(() => t.node.children && t.node.children.length > 0), I = m(() => t.activeId === t.node.id), f = m(() => t.expanded.has(t.node.id)), s = m(() => t.selectedSet.has(t.node.id)), g = b(null), a = b(void 0), x = b(f.value);
+    F(f, (l) => {
+      if (!t.animated) {
+        x.value = l;
+        return;
+      }
+      l ? (x.value = !0, a.value = "0px", H(() => {
+        g.value && (a.value = g.value.scrollHeight + "px", setTimeout(() => {
+          a.value = void 0;
+        }, 250));
+      })) : g.value && (a.value = g.value.scrollHeight + "px", requestAnimationFrame(() => {
+        a.value = "0px", setTimeout(() => {
+          x.value = !1, a.value = void 0;
+        }, 250);
+      }));
+    });
+    function T(l) {
+      l.stopPropagation(), d("toggle-expand", t.node);
+    }
+    function N() {
+      d("node-focused", t.node.id), v.value && !t.selectable ? d("toggle-expand", t.node) : d("select-node", t.node);
+    }
+    const y = m(() => t.cfg.padX);
+    return (l, i) => {
+      const B = R("CuiTreeNode", !0);
+      return n(), r("div", {
+        class: "cui-tree-node",
+        role: "treeitem",
+        "data-cui-tree-id": String(e.node.id),
+        tabindex: e.node.disabled ? void 0 : I.value ? 0 : -1,
+        "aria-expanded": v.value ? f.value : void 0,
+        "aria-selected": e.selectable ? s.value : void 0,
+        "aria-disabled": e.node.disabled || void 0,
+        "aria-level": e.depth + 1,
+        "aria-setsize": e.sizeOfSet,
+        "aria-posinset": e.positionInSet,
+        style: { position: "relative", outline: "none" },
+        onFocusin: i[4] || (i[4] = Y((h) => d("node-focused", e.node.id), ["self"]))
+      }, [
+        e.showLines && e.depth > 0 && !e.isLast ? (n(), r("div", {
+          key: 0,
+          style: c({
+            position: "absolute",
+            left: `calc((${e.depth} - 1) * ${e.cfg.indent} + ${y.value} + 0.5rem)`,
+            top: "0",
+            bottom: "0",
+            width: "0",
+            borderLeft: `1px solid ${$}`,
+            zIndex: "0"
+          })
+        }, null, 4)) : u("", !0),
+        e.showLines && e.depth > 0 && e.isLast ? (n(), r("div", {
+          key: 1,
+          style: c({
+            position: "absolute",
+            left: `calc((${e.depth} - 1) * ${e.cfg.indent} + ${y.value} + 0.5rem)`,
+            top: "0",
+            height: `calc(${e.cfg.padY} + 0.625em)`,
+            width: "0",
+            borderLeft: `1px solid ${$}`,
+            zIndex: "0"
+          })
+        }, null, 4)) : u("", !0),
+        e.showLines && e.depth > 0 ? (n(), r("div", {
+          key: 2,
+          style: c({
+            position: "absolute",
+            left: `calc((${e.depth} - 1) * ${e.cfg.indent} + ${y.value} + 0.5rem)`,
+            top: `calc(${e.cfg.padY} + 0.625em)`,
+            width: `calc(${e.cfg.indent} * 0.5)`,
+            height: "0",
+            borderTop: `1px solid ${$}`,
+            zIndex: "0"
+          })
+        }, null, 4)) : u("", !0),
+        S("div", {
+          class: "cui-tree-node__row",
+          style: c({
+            display: "flex",
+            alignItems: "center",
+            gap: "calc(0.25rem * var(--cui-density-scale, 1))",
+            paddingTop: e.cfg.padY,
+            paddingRight: e.cfg.padX,
+            paddingBottom: e.cfg.padY,
+            paddingLeft: `calc(${y.value} + ${e.depth} * ${e.cfg.indent})`,
+            fontSize: e.cfg.fontSize,
+            cursor: e.node.disabled ? "default" : "pointer",
+            borderRadius: "0.25rem",
+            background: s.value ? "var(--cui-primary-bg)" : "transparent",
+            color: e.node.disabled ? "var(--cui-text-tertiary)" : s.value ? "var(--cui-primary)" : "var(--cui-text-body)",
+            fontWeight: s.value ? "600" : "400",
+            opacity: e.node.disabled ? "0.5" : "1",
+            transition: "background 0.1s ease",
+            position: "relative",
+            zIndex: "1"
+          }),
+          onClick: N
+        }, [
+          S("div", {
+            class: "cui-tree-node__chevron",
+            style: c({
+              width: e.cfg.hitSize,
+              height: e.cfg.hitSize,
+              marginLeft: `calc((${e.cfg.iconSize} - ${e.cfg.hitSize}) / 2)`,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: "0",
+              transition: "transform 0.15s ease",
+              transform: f.value ? "rotate(90deg)" : "rotate(0deg)"
+            }),
+            onClick: i[0] || (i[0] = (h) => v.value && T(h))
+          }, [
+            v.value ? (n(), z(C, {
+              key: 0,
+              name: "caret-right",
+              size: e.cfg.iconSize,
+              style: { color: "var(--cui-text-tertiary)" }
+            }, null, 8, ["size"])) : u("", !0)
+          ], 4),
+          e.node.icon ? (n(), z(C, {
+            key: 0,
+            name: e.node.icon,
+            size: e.cfg.iconSize,
+            style: c({ flexShrink: "0", color: s.value ? "var(--cui-primary)" : "var(--cui-text-secondary)" })
+          }, null, 8, ["name", "size", "style"])) : u("", !0),
+          S("div", q, [
+            k(l.$slots, "node", {
+              node: e.node,
+              selected: s.value,
+              expanded: f.value,
+              depth: e.depth
+            }, () => [
+              O(V(e.node.label), 1)
+            ], !0)
+          ])
+        ], 4),
+        v.value && x.value ? (n(), r("div", {
+          key: 3,
+          ref_key: "childrenRef",
+          ref: g,
+          role: "group",
+          style: c({
+            position: "relative",
+            overflow: e.animated ? "hidden" : void 0,
+            maxHeight: a.value,
+            transition: e.animated ? "max-height 0.25s ease" : void 0
+          })
+        }, [
+          (n(!0), r(A, null, P(e.node.children, (h, w) => (n(), z(B, {
+            key: String(h.id),
+            node: h,
+            depth: e.depth + 1,
+            "is-last": w === e.node.children.length - 1,
+            expanded: e.expanded,
+            "selected-set": e.selectedSet,
+            selectable: e.selectable,
+            "show-lines": e.showLines,
+            animated: e.animated,
+            cfg: e.cfg,
+            "active-id": e.activeId,
+            "size-of-set": e.node.children.length,
+            "position-in-set": w + 1,
+            onToggleExpand: i[1] || (i[1] = (o) => d("toggle-expand", o)),
+            onSelectNode: i[2] || (i[2] = (o) => d("select-node", o)),
+            onNodeFocused: i[3] || (i[3] = (o) => d("node-focused", o))
+          }, {
+            node: W((o) => [
+              k(l.$slots, "node", X({ ref_for: !0 }, o), void 0, !0)
+            ]),
+            _: 3
+          }, 8, ["node", "depth", "is-last", "expanded", "selected-set", "selectable", "show-lines", "animated", "cfg", "active-id", "size-of-set", "position-in-set"]))), 128))
+        ], 4)) : u("", !0)
+      ], 40, j);
+    };
+  }
+});
 export {
-  f as default
+  G as default
 };

package/dist/components/CuiTreeView.vue.d.ts

@@ -20,9 +20,17 @@ export interface CuiTreeViewProps extends HideableProps {
     modelValue?: string | number | (string | number)[] | null;
     /** Allow multiple selection */
     multiple?: boolean;
-    /** Initially expanded node ids */
+    /**
+     * Expanded node ids (`v-model:expanded`). Pass it and expansion is
+     * controlled — the tree renders exactly these ids and every change is emitted
+     * for you to apply, so expansion can be driven from app state, persisted, or
+     * restored. Omit it and the tree manages expansion itself, seeded from
+     * `defaultExpanded` / `expandAll`.
+     */
+    expanded?: (string | number)[];
+    /** Initially expanded node ids — read once, for uncontrolled use */
     defaultExpanded?: (string | number)[];
-    /** Expand all nodes by default */
+    /** Expand all nodes by default — read once, for uncontrolled use */
     expandAll?: boolean;
     /** Show connecting lines */
     showLines?: boolean;
@@ -33,16 +41,36 @@ export interface CuiTreeViewProps extends HideableProps {
     /** Size */
     size?: "sm" | "md" | "lg";
 }
-declare var __VLS_9: any;
+declare var __VLS_10: any;
 type __VLS_Slots = {} & {
-    node?: (props: typeof __VLS_9) => any;
+    node?: (props: typeof __VLS_10) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<CuiTreeViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_component: import("vue").DefineComponent<CuiTreeViewProps, {
+    el: Readonly<import("vue").ShallowRef<HTMLElement | null>>;
+    /** Expand one node by id. No-op if it is already expanded. */
+    expand: (id: string | number) => void;
+    /** Collapse one node by id. No-op if it is already collapsed. */
+    collapse: (id: string | number) => void;
+    /** Flip one node's expanded state. */
+    toggleExpand: (id: string | number) => void;
+    /** Expand every node that has children, at any depth. */
+    expandAll: () => void;
+    /** Collapse everything. */
+    collapseAll: () => void;
+    /** Expand a node and all of its ancestors, so a deep node is revealed. */
+    reveal: (id: string | number) => void;
+    /** Whether a node id is currently expanded. */
+    isExpanded: (id: string | number) => boolean;
+    /** The ids currently expanded, in insertion order. */
+    expandedIds: () => (string | number)[];
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string | number | (string | number)[] | null) => any;
+    "update:expanded": (value: (string | number)[]) => any;
     "node-click": (node: TreeNode) => any;
     "node-expand": (node: TreeNode, expanded: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<CuiTreeViewProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | number | (string | number)[] | null) => any) | undefined;
+    "onUpdate:expanded"?: ((value: (string | number)[]) => any) | undefined;
     "onNode-click"?: ((node: TreeNode) => any) | undefined;
     "onNode-expand"?: ((node: TreeNode, expanded: boolean) => any) | undefined;
 }>, {

package/dist/components/CuiTreeView.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CuiTreeView.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiTreeView.vue"],"names":[],"mappings":"AA6IA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGrD,MAAM,WAAW,QAAQ;IACvB,wBAAwB;IACxB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;IACtB,eAAe;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,gBAAiB,SAAQ,aAAa;IACrD,gBAAgB;IAChB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,yEAAyE;IACzE,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,GAAG,IAAI,CAAC;IAC1D,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kCAAkC;IAClC,eAAe,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IACtC,kCAAkC;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2DAA2D;IAC3D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW;IACX,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAiJD,QAAA,IAAI,OAAO,KAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AA2B5C,QAAA,MAAM,eAAe;;;;;;;;;;UA/KZ,IAAI,GAAG,IAAI,GAAG,IAAI;cAZd,OAAO;gBAQL,OAAO;eAFR,OAAO;cAIR,OAAO;eANN,OAAO;6EA+LnB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAa1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"CuiTreeView.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiTreeView.vue"],"names":[],"mappings":"AA+YA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGrD,MAAM,WAAW,QAAQ;IACvB,wBAAwB;IACxB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;IACtB,eAAe;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,gBAAiB,SAAQ,aAAa;IACrD,gBAAgB;IAChB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,yEAAyE;IACzE,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,GAAG,IAAI,CAAC;IAC1D,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAC/B,oEAAoE;IACpE,eAAe,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IACtC,oEAAoE;IACpE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2DAA2D;IAC3D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW;IACX,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAiZD,QAAA,IAAI,QAAQ,KAAW,CAAE;AACzB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAgC7C,QAAA,MAAM,eAAe;;IAvJnB,8DAA8D;iBACjD,MAAM,GAAG,MAAM;IAC5B,iEAAiE;mBAClD,MAAM,GAAG,MAAM;IAC9B,sCAAsC;uBACnB,MAAM,GAAG,MAAM;IAClC,yDAAyD;;IAEzD,2BAA2B;;IAE3B,0EAA0E;iBAC7D,MAAM,GAAG,MAAM;IAa5B,+CAA+C;qBAC9B,MAAM,GAAG,MAAM;IAChC,sDAAsD;;;;;;;;;;;;;;UAvT/C,IAAI,GAAG,IAAI,GAAG,IAAI;cApBd,OAAO;gBAgBL,OAAO;eAFR,OAAO;cAIR,OAAO;eANN,OAAO;6EAqcnB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAa1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/CuiTreeView.vue.js

@@ -1,12 +1,13 @@
-import { defineComponent as z, ref as v, computed as u, withDirectives as y, openBlock as s, createElementBlock as m, Fragment as B, renderList as V, createBlock as b, withCtx as k, renderSlot as E, mergeProps as C, vShow as A } from "vue";
-import L from "./CuiTreeNode.vue.js";
-import { scaleDensity as d, scaleControlHeight as c } from "../utils/sizing.js";
-const X = { role: "tree" }, T = /* @__PURE__ */ z({
+import { defineComponent as U, useTemplateRef as W, ref as L, computed as m, watch as $, withDirectives as j, openBlock as D, createElementBlock as N, Fragment as G, renderList as J, createBlock as O, withCtx as Q, renderSlot as Z, mergeProps as _, vShow as ee, nextTick as te } from "vue";
+import ne from "./CuiTreeNode.vue.js";
+import { scaleDensity as u, scaleControlHeight as C } from "../utils/sizing.js";
+const le = ["aria-multiselectable"], oe = /* @__PURE__ */ U({
   __name: "CuiTreeView",
   props: {
     nodes: {},
     modelValue: {},
     multiple: { type: Boolean, default: !1 },
+    expanded: {},
     defaultExpanded: {},
     expandAll: { type: Boolean, default: !1 },
     showLines: { type: Boolean, default: !0 },
@@ -15,59 +16,201 @@ const X = { role: "tree" }, T = /* @__PURE__ */ z({
     size: { default: "md" },
     hidden: { type: Boolean, default: !1 }
   },
-  emits: ["update:modelValue", "node-click", "node-expand"],
-  setup(a, { emit: f }) {
-    const l = a, i = f, o = v(new Set(l.defaultExpanded ?? []));
-    if (l.expandAll) {
-      let e = function(t) {
-        for (const n of t)
-          n.children && n.children.length > 0 && (o.value.add(n.id), e(n.children));
-      };
-      e(l.nodes);
+  emits: ["update:modelValue", "update:expanded", "node-click", "node-expand"],
+  setup(r, { expose: K, emit: F }) {
+    const a = r, p = F, b = W("el");
+    function y(e) {
+      return e.flatMap(
+        (t) => t.children && t.children.length > 0 ? [t.id, ...y(t.children)] : []
+      );
+    }
+    function T(e, t) {
+      for (const n of e) {
+        if (n.id === t) return n;
+        const l = n.children && T(n.children, t);
+        if (l) return l;
+      }
+    }
+    const E = L(
+      new Set(a.expandAll ? y(a.nodes) : a.defaultExpanded ?? [])
+    ), o = m(
+      () => a.expanded !== void 0 ? new Set(a.expanded) : E.value
+    );
+    function v(e) {
+      a.expanded === void 0 && (E.value = e), p("update:expanded", [...e]);
     }
-    const r = u(() => l.modelValue == null ? /* @__PURE__ */ new Set() : Array.isArray(l.modelValue) ? new Set(l.modelValue) : /* @__PURE__ */ new Set([l.modelValue]));
-    function p(e) {
-      const t = new Set(o.value), n = t.has(e.id);
-      n ? t.delete(e.id) : t.add(e.id), o.value = t, i("node-expand", e, !n);
+    function f(e, t) {
+      const n = new Set(o.value);
+      if (n.has(e) === t) return;
+      t ? n.add(e) : n.delete(e), v(n);
+      const l = T(a.nodes, e);
+      l && p("node-expand", l, t);
     }
-    function h(e) {
-      if (!(!l.selectable || e.disabled))
-        if (i("node-click", e), l.multiple) {
-          const t = new Set(r.value);
-          t.has(e.id) ? t.delete(e.id) : t.add(e.id), i("update:modelValue", [...t]);
+    function B(e) {
+      f(e.id, !o.value.has(e.id));
+    }
+    const k = m(() => a.modelValue == null ? /* @__PURE__ */ new Set() : Array.isArray(a.modelValue) ? new Set(a.modelValue) : /* @__PURE__ */ new Set([a.modelValue]));
+    function V(e) {
+      if (!(!a.selectable || e.disabled))
+        if (p("node-click", e), a.multiple) {
+          const t = new Set(k.value);
+          t.has(e.id) ? t.delete(e.id) : t.add(e.id), p("update:modelValue", [...t]);
         } else
-          i("update:modelValue", r.value.has(e.id) ? null : e.id);
+          p("update:modelValue", k.value.has(e.id) ? null : e.id);
+    }
+    const g = m(() => {
+      const e = [], t = (n, l, i) => {
+        for (const d of n) {
+          const x = !!d.children && d.children.length > 0;
+          e.push({ node: d, depth: l, parentId: i, hasChildren: x }), x && o.value.has(d.id) && t(d.children, l + 1, d.id);
+        }
+      };
+      return t(a.nodes, 0, null), e;
+    }), s = m(() => g.value.filter((e) => !e.node.disabled)), c = L(null), h = m(() => {
+      const e = s.value;
+      return e.length === 0 ? null : c.value == null || !e.some((t) => t.node.id === c.value) ? e[0].node.id : c.value;
+    });
+    function M(e) {
+      var n;
+      const t = (n = b.value) == null ? void 0 : n.querySelectorAll('[role="treeitem"]');
+      for (const l of t ?? [])
+        if (l.dataset.cuiTreeId === String(e)) return l;
+      return null;
+    }
+    function w(e) {
+      e != null && (c.value = e, te(() => {
+        var t;
+        return (t = M(e)) == null ? void 0 : t.focus();
+      }));
+    }
+    function z(e) {
+      const t = s.value;
+      if (t.length === 0) return;
+      const n = t.findIndex((i) => i.node.id === h.value), l = Math.min(t.length - 1, Math.max(0, (n === -1 ? 0 : n) + e));
+      w(t[l].node.id);
+    }
+    function X() {
+      return g.value.find((e) => e.node.id === h.value);
+    }
+    let A = "", I = null;
+    function Y(e) {
+      I && clearTimeout(I), A += e.toLowerCase(), I = setTimeout(() => {
+        A = "";
+      }, 600);
+      const t = s.value, n = t.findIndex((l) => l.node.id === h.value);
+      for (let l = 1; l <= t.length; l++) {
+        const i = t[(n + l) % t.length];
+        if (i.node.label.toLowerCase().startsWith(A)) {
+          w(i.node.id);
+          return;
+        }
+      }
+    }
+    function H(e) {
+      const t = X();
+      if (!t) return;
+      const { node: n, hasChildren: l, parentId: i } = t, d = o.value.has(n.id);
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault(), z(1);
+          break;
+        case "ArrowUp":
+          e.preventDefault(), z(-1);
+          break;
+        case "ArrowRight":
+          e.preventDefault(), l && !d ? f(n.id, !0) : l && d && z(1);
+          break;
+        case "ArrowLeft":
+          e.preventDefault(), l && d ? f(n.id, !1) : i != null && w(i);
+          break;
+        case "Home":
+          e.preventDefault(), s.value.length && w(s.value[0].node.id);
+          break;
+        case "End":
+          e.preventDefault(), s.value.length && w(s.value[s.value.length - 1].node.id);
+          break;
+        case "Enter":
+        case " ":
+          e.preventDefault(), l && !a.selectable ? B(n) : V(n);
+          break;
+        case "*": {
+          e.preventDefault();
+          const x = g.value.filter((S) => S.parentId === i && S.hasChildren);
+          x.length && v(/* @__PURE__ */ new Set([...o.value, ...x.map((S) => S.node.id)]));
+          break;
+        }
+        default:
+          e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && (e.preventDefault(), Y(e.key));
+      }
+    }
+    function R(e) {
+      c.value = e;
     }
-    const S = {
-      sm: { fontSize: "0.8125rem", iconSize: "0.75rem", hitSize: c("0.75rem"), indent: d("1rem"), padY: d("0.1875rem"), padX: d("0.375rem") },
-      md: { fontSize: "0.875rem", iconSize: "0.875rem", hitSize: c("0.875rem"), indent: d("1.25rem"), padY: d("0.25rem"), padX: d("0.5rem") },
-      lg: { fontSize: "0.9375rem", iconSize: "1rem", hitSize: c("1rem"), indent: d("1.5rem"), padY: d("0.375rem"), padX: d("0.625rem") }
-    }, g = u(() => S[l.size]);
-    return (e, t) => y((s(), m("div", X, [
-      (s(!0), m(B, null, V(a.nodes, (n, x) => (s(), b(L, {
+    $(g, () => {
+      c.value != null && (s.value.some((e) => e.node.id === c.value) || (c.value = h.value));
+    });
+    const q = {
+      sm: { fontSize: "0.8125rem", iconSize: "0.75rem", hitSize: C("0.75rem"), indent: u("1rem"), padY: u("0.1875rem"), padX: u("0.375rem") },
+      md: { fontSize: "0.875rem", iconSize: "0.875rem", hitSize: C("0.875rem"), indent: u("1.25rem"), padY: u("0.25rem"), padX: u("0.5rem") },
+      lg: { fontSize: "0.9375rem", iconSize: "1rem", hitSize: C("1rem"), indent: u("1.5rem"), padY: u("0.375rem"), padX: u("0.625rem") }
+    }, P = m(() => q[a.size]);
+    return K({
+      el: b,
+      /** Expand one node by id. No-op if it is already expanded. */
+      expand: (e) => f(e, !0),
+      /** Collapse one node by id. No-op if it is already collapsed. */
+      collapse: (e) => f(e, !1),
+      /** Flip one node's expanded state. */
+      toggleExpand: (e) => f(e, !o.value.has(e)),
+      /** Expand every node that has children, at any depth. */
+      expandAll: () => v(new Set(y(a.nodes))),
+      /** Collapse everything. */
+      collapseAll: () => v(/* @__PURE__ */ new Set()),
+      /** Expand a node and all of its ancestors, so a deep node is revealed. */
+      reveal: (e) => {
+        const t = [], n = (l, i) => l.some((d) => d.id === e ? (t.push(...i), !0) : d.children ? n(d.children, [...i, d.id]) : !1);
+        n(a.nodes, []) && v(/* @__PURE__ */ new Set([...o.value, ...t]));
+      },
+      /** Whether a node id is currently expanded. */
+      isExpanded: (e) => o.value.has(e),
+      /** The ids currently expanded, in insertion order. */
+      expandedIds: () => [...o.value]
+    }), (e, t) => j((D(), N("div", {
+      ref_key: "el",
+      ref: b,
+      class: "cui-tree-view",
+      role: "tree",
+      "aria-multiselectable": r.multiple || void 0,
+      onKeydown: H
+    }, [
+      (D(!0), N(G, null, J(r.nodes, (n, l) => (D(), O(ne, {
         key: String(n.id),
         node: n,
         depth: 0,
-        "is-last": x === a.nodes.length - 1,
+        "is-last": l === r.nodes.length - 1,
         expanded: o.value,
-        "selected-set": r.value,
-        selectable: a.selectable,
-        "show-lines": a.showLines,
-        animated: a.animated,
-        cfg: g.value,
-        onToggleExpand: p,
-        onSelectNode: h
+        "selected-set": k.value,
+        selectable: r.selectable,
+        "show-lines": r.showLines,
+        animated: r.animated,
+        cfg: P.value,
+        "active-id": h.value,
+        "size-of-set": r.nodes.length,
+        "position-in-set": l + 1,
+        onToggleExpand: B,
+        onSelectNode: V,
+        onNodeFocused: R
       }, {
-        node: k((w) => [
-          E(e.$slots, "node", C({ ref_for: !0 }, w))
+        node: Q((i) => [
+          Z(e.$slots, "node", _({ ref_for: !0 }, i))
         ]),
         _: 3
-      }, 8, ["node", "is-last", "expanded", "selected-set", "selectable", "show-lines", "animated", "cfg"]))), 128))
-    ], 512)), [
-      [A, !a.hidden]
+      }, 8, ["node", "is-last", "expanded", "selected-set", "selectable", "show-lines", "animated", "cfg", "active-id", "size-of-set", "position-in-set"]))), 128))
+    ], 40, le)), [
+      [ee, !r.hidden]
     ]);
   }
 });
 export {
-  T as default
+  oe as default
 };

package/dist/composables/useCalendarKeyboard.d.ts

@@ -0,0 +1,48 @@
+import { type Ref } from "vue";
+export type CalendarViewMode = "days" | "months" | "years";
+export interface UseCalendarKeyboardOptions {
+    /** Which grid is showing — the same ref the component switches on. */
+    viewMode: Ref<CalendarViewMode>;
+    viewYear: Ref<number>;
+    viewMonth: Ref<number>;
+    /** How many years one page of the years grid shows. */
+    yearsPerPage?: number;
+    selectDay: (date: Date) => void;
+    selectMonth: (month: number) => void;
+    selectYear: (year: number) => void;
+    /** Open the panel. */
+    open: () => void;
+    /** Close the panel and hand focus back to the trigger. */
+    close: () => void;
+    /** Whether the control is currently disabled. */
+    isDisabled?: () => boolean;
+}
+/** Stable key for a cell, so focus can be restored to it after a re-render. */
+export declare function calendarCellKey(mode: CalendarViewMode, value: Date | number): string;
+/**
+ * Keyboard navigation for the day/month/year grids shared by CuiDatePicker and
+ * CuiDateRangePicker (#74). Both built their calendar out of unfocusable
+ * `<div>`s with a click handler, so a date could only be picked with a pointer.
+ *
+ * One piece of state drives all three grids: `focusedDate`. The months grid
+ * focuses its month, the years grid its year, so switching views keeps the
+ * user where they were instead of resetting to today. Movement also pulls
+ * `viewMonth`/`viewYear` along, so stepping off the edge of a month pages the
+ * calendar rather than focusing a cell nobody can see.
+ *
+ * Movement deliberately does NOT skip disabled dates — unlike a menu, a
+ * calendar is a grid whose shape carries meaning, and holes in it make it
+ * impossible to navigate predictably. Disabled cells are reachable and
+ * announced via `aria-disabled`; it is *selection* that refuses.
+ */
+export declare function useCalendarKeyboard(options: UseCalendarKeyboardOptions): {
+    gridRef: Ref<HTMLElement | null, HTMLElement | null>;
+    focusedDate: Ref<Date, Date>;
+    focusedKey: import("vue").ComputedRef<string>;
+    cellTabIndex: (key: string) => 0 | -1;
+    onGridKeydown: (e: KeyboardEvent) => void;
+    onFieldKeydown: (e: KeyboardEvent) => void;
+    resetFocus: (date?: Date) => void;
+    focusCell: () => void;
+};
+//# sourceMappingURL=useCalendarKeyboard.d.ts.map

package/dist/composables/useCalendarKeyboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCalendarKeyboard.d.ts","sourceRoot":"","sources":["../../src/composables/useCalendarKeyboard.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,KAAK,GAAG,EAAE,MAAM,KAAK,CAAC;AAGxD,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE3D,MAAM,WAAW,0BAA0B;IACzC,sEAAsE;IACtE,QAAQ,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAChC,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACtB,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACvB,uDAAuD;IACvD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,sBAAsB;IACtB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,0DAA0D;IAC1D,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,iDAAiD;IACjD,UAAU,CAAC,EAAE,MAAM,OAAO,CAAC;CAC5B;AAKD,+EAA+E;AAC/E,wBAAgB,eAAe,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAMpF;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,0BAA0B;;;;wBA+B1C,MAAM;uBA6BP,aAAa;wBAuEZ,aAAa;wBAzEd,IAAI;;EA2F/B"}