@itguy614/clean-ui 1.0.1 → 1.2.0

package/dist/components/CuiTable.vue.js

@@ -1,11 +1,10 @@
-import { defineComponent as z, computed as l, provide as C, ref as E, withDirectives as f, openBlock as r, createElementBlock as i, createElementVNode as p, unref as a, normalizeStyle as s, normalizeClass as y, renderSlot as h, createCommentVNode as b, vShow as v } from "vue";
-import { TableContextKey as D } from "./table-context.js";
-import { clampSize as T } from "../utils/sizing.js";
-import { useScrollShadows as $, scrollShadowRightStyle as L, scrollShadowBottomStyle as N } from "../composables/useScrollShadows.js";
-const P = {
-  key: 0,
-  style: { position: "relative" }
-}, V = ["aria-rowcount"], I = ["aria-rowcount"], Z = /* @__PURE__ */ z({
+import { defineComponent as _, computed as i, provide as E, ref as m, onMounted as T, onBeforeUnmount as L, watch as O, withDirectives as D, openBlock as v, createElementBlock as h, createElementVNode as y, unref as l, normalizeStyle as u, normalizeClass as M, renderSlot as q, createCommentVNode as w, vShow as N } from "vue";
+import { TableContextKey as P } from "./table-context.js";
+import { clampSize as U } from "../utils/sizing.js";
+import { useScrollShadows as V, scrollShadowRightStyle as X, scrollShadowBottomStyle as $ } from "../composables/useScrollShadows.js";
+import { useMessages as A } from "../composables/useMessages.js";
+import { warnOnce as F } from "../utils/devWarn.js";
+const I = { style: { position: "relative" } }, K = ["role", "tabindex", "aria-label"], Z = ["aria-rowcount"], te = /* @__PURE__ */ _({
   __name: "CuiTable",
   props: {
     striped: { type: Boolean, default: !1 },
@@ -19,15 +18,15 @@ const P = {
     hidden: { type: Boolean, default: !1 },
     size: { default: "md" }
   },
-  setup(o, { expose: S }) {
-    const e = o, w = ["sm", "md", "lg"], n = l(() => T(e.size, w));
-    C(D, {
-      size: n,
-      stickyHeader: l(() => e.stickyHeader)
+  setup(f, { expose: S }) {
+    const e = f, g = ["sm", "md", "lg"], p = i(() => U(e.size, g));
+    E(P, {
+      size: p,
+      stickyHeader: i(() => e.stickyHeader)
     });
-    const d = l(() => [
+    const x = i(() => [
       "cui-table",
-      `cui-table--${n.value}`,
+      `cui-table--${p.value}`,
       {
         "cui-table--striped": e.striped,
         "cui-table--hoverable": e.hoverable,
@@ -35,56 +34,62 @@ const P = {
         "cui-table--sticky-header": e.stickyHeader,
         "cui-table--fixed": e.fixedLayout
       }
-    ]), g = l(() => {
-      if (!e.maxHeight && !e.minWidth) return;
-      const t = { overflow: "auto", position: "relative" };
-      return e.maxHeight && (t.maxHeight = e.maxHeight), t;
-    }), k = l(() => ({
+    ]), k = i(() => ({
       borderCollapse: "separate",
       borderSpacing: "0",
       minWidth: e.minWidth || void 0
-    })), { canScrollRight: x, canScrollDown: H, onScroll: c, onMount: B } = $(), u = E(null);
-    function R(t) {
-      u.value = t, B(t);
+    })), { canScrollRight: H, canScrollDown: B, onScroll: b, update: z } = V(), r = m(null), n = m(null), c = m(!1), s = i(() => !!e.maxHeight || c.value), W = i(() => {
+      const t = { position: "relative" };
+      return e.maxHeight ? (t.overflow = "auto", t.maxHeight = e.maxHeight) : c.value && (t.overflowX = "auto"), t;
+    });
+    function d() {
+      const t = r.value, a = n.value;
+      !t || !a || (c.value = Math.max(a.scrollWidth, a.offsetWidth) - t.clientWidth > 1, z(t), c.value && e.stickyHeader && !e.maxHeight && F(
+        "[clean-ui] CuiTable: stickyHeader with a horizontally overflowing table needs maxHeight. The scroll container required to contain the overflow also becomes the sticky header's scrollport, so the header can't stick to the viewport."
+      ));
     }
-    return S({ scrollWrapper: u }), (t, m) => o.maxHeight || o.minWidth ? f((r(), i("div", P, [
-      p("div", {
-        ref: R,
+    let o;
+    T(() => {
+      requestAnimationFrame(d), typeof ResizeObserver < "u" && (o = new ResizeObserver(d), r.value && o.observe(r.value), n.value && o.observe(n.value));
+    }), L(() => {
+      o == null || o.disconnect(), o = void 0;
+    }), O(() => [e.minWidth, e.maxHeight, e.fixedLayout], d, { flush: "post" });
+    const C = A();
+    return S({ scrollWrapper: r, measure: d }), (t, a) => D((v(), h("div", I, [
+      y("div", {
+        ref_key: "scrollWrapper",
+        ref: r,
         class: "cui-table-wrapper",
-        style: s(g.value),
-        onScroll: m[0] || (m[0] = //@ts-ignore
-        (...W) => a(c) && a(c)(...W))
+        style: u(W.value),
+        role: s.value ? "region" : void 0,
+        tabindex: s.value ? 0 : void 0,
+        "aria-label": s.value ? l(C).table.scrollRegionLabel : void 0,
+        onScroll: a[0] || (a[0] = //@ts-ignore
+        (...R) => l(b) && l(b)(...R))
       }, [
-        p("table", {
-          class: y(d.value),
-          style: s(k.value),
-          "aria-rowcount": o.ariaRowcount
+        y("table", {
+          ref_key: "tableEl",
+          ref: n,
+          class: M(x.value),
+          style: u(k.value),
+          "aria-rowcount": f.ariaRowcount
         }, [
-          h(t.$slots, "default")
-        ], 14, V)
-      ], 36),
-      a(x) ? (r(), i("div", {
+          q(t.$slots, "default")
+        ], 14, Z)
+      ], 44, K),
+      s.value && l(H) ? (v(), h("div", {
         key: 0,
-        style: s(a(L))
-      }, null, 4)) : b("", !0),
-      a(H) ? (r(), i("div", {
+        style: u(l(X))
+      }, null, 4)) : w("", !0),
+      s.value && l(B) ? (v(), h("div", {
         key: 1,
-        style: s(a(N))
-      }, null, 4)) : b("", !0)
+        style: u(l($))
+      }, null, 4)) : w("", !0)
     ], 512)), [
-      [v, !o.hidden]
-    ]) : f((r(), i("table", {
-      key: 1,
-      class: y(d.value),
-      style: { "border-collapse": "separate", "border-spacing": "0" },
-      "aria-rowcount": o.ariaRowcount
-    }, [
-      h(t.$slots, "default")
-    ], 10, I)), [
-      [v, !o.hidden]
+      [N, !f.hidden]
     ]);
   }
 });
 export {
-  Z as default
+  te as default
 };

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

@@ -19,8 +19,9 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_6) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<CuiTableCellProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CuiTableCellProps> & Readonly<{}>, {
-    nowrap: boolean;
+    header: boolean;
     hidden: boolean;
+    nowrap: boolean;
     align: TableCellAlign;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

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

@@ -1 +1 @@
-{"version":3,"file":"CuiTableCell.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiTableCell.vue"],"names":[],"mappings":"AA8DA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzD,MAAM,WAAW,iBAAkB,SAAQ,aAAa;IACtD,4CAA4C;IAC5C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,qBAAqB;IACrB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,gBAAgB;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mBAAmB;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mBAAmB;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4BAA4B;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AA4DD,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAuB/C,QAAA,MAAM,eAAe;YAtFV,OAAO;;WARR,cAAc;6EAqGtB,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":"CuiTableCell.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiTableCell.vue"],"names":[],"mappings":"AAkEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzD,MAAM,WAAW,iBAAkB,SAAQ,aAAa;IACtD,4CAA4C;IAC5C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,qBAAqB;IACrB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,gBAAgB;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mBAAmB;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mBAAmB;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4BAA4B;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAoED,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAuB/C,QAAA,MAAM,eAAe;YAxGV,OAAO;;YAUP,OAAO;WARR,cAAc;6EA6GtB,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/CuiTableCell.vue.js

@@ -1,9 +1,9 @@
-import { defineComponent as s, inject as c, computed as n, withDirectives as d, openBlock as p, createBlock as f, resolveDynamicComponent as u, normalizeStyle as h, withCtx as w, renderSlot as m, vShow as v } from "vue";
+import { defineComponent as s, inject as d, computed as n, withDirectives as c, openBlock as p, createBlock as f, resolveDynamicComponent as u, normalizeStyle as h, withCtx as w, renderSlot as m, vShow as v } from "vue";
 import { TableSectionContextKey as y } from "./table-context.js";
 const B = /* @__PURE__ */ s({
   __name: "CuiTableCell",
   props: {
-    header: { type: Boolean },
+    header: { type: Boolean, default: void 0 },
     align: { default: "left" },
     width: {},
     colspan: {},
@@ -12,11 +12,11 @@ const B = /* @__PURE__ */ s({
     hidden: { type: Boolean, default: !1 }
   },
   setup(o) {
-    const e = o, a = c(y, void 0), l = n(() => e.header !== void 0 ? e.header : (a == null ? void 0 : a.isHead) ?? !1), i = n(() => l.value ? "th" : "td"), r = n(() => {
+    const e = o, a = d(y, void 0), l = n(() => e.header !== void 0 ? e.header : (a == null ? void 0 : a.isHead) ?? !1), i = n(() => l.value ? "th" : "td"), r = n(() => {
       const t = {};
       return e.align !== "left" && (t.textAlign = e.align), e.width && (t.width = e.width), e.nowrap && (t.whiteSpace = "nowrap"), t;
     });
-    return (t, C) => d((p(), f(u(i.value), {
+    return (t, C) => c((p(), f(u(i.value), {
       style: h(r.value),
       colspan: o.colspan,
       rowspan: o.rowspan,

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

@@ -12,9 +12,9 @@ export interface CuiTabsProps extends HideableProps, ColorableProps {
     /** Panel transition animation */
     transition?: TabTransition;
 }
-declare var __VLS_4: {};
+declare var __VLS_8: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_4) => any;
+    default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<CuiTabsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;

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

@@ -1 +1 @@
-{"version":3,"file":"CuiTabs.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiTabs.vue"],"names":[],"mappings":"AAkWA,OAAO,EAGL,KAAK,UAAU,EACf,KAAK,cAAc,EACnB,KAAK,aAAa,EACnB,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGrE,MAAM,WAAW,YAAa,SAAQ,aAAa,EAAE,cAAc;IACjE,uBAAuB;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oBAAoB;IACpB,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,yBAAyB;IACzB,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iCAAiC;IACjC,UAAU,CAAC,EAAE,aAAa,CAAC;CAC5B;AAoQD,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AA4B/C,QAAA,MAAM,eAAe;;;;;;;;;aAzST,UAAU;iBAEN,cAAc;gBAIf,aAAa;eAFd,OAAO;6EA6SnB,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":"CuiTabs.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiTabs.vue"],"names":[],"mappings":"AA2fA,OAAO,EAGL,KAAK,UAAU,EACf,KAAK,cAAc,EACnB,KAAK,aAAa,EACnB,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGrE,MAAM,WAAW,YAAa,SAAQ,aAAa,EAAE,cAAc;IACjE,uBAAuB;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oBAAoB;IACpB,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,yBAAyB;IACzB,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iCAAiC;IACjC,UAAU,CAAC,EAAE,aAAa,CAAC;CAC5B;AA2WD,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAgC/C,QAAA,MAAM,eAAe;;;;;;;;;aApZT,UAAU;iBAEN,cAAc;gBAIf,aAAa;eAFd,OAAO;6EAwZnB,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/CuiTabs.vue.js

@@ -1,7 +1,7 @@
 import o from "./CuiTabs.vue2.js";
 /* empty css             */
 import t from "../_virtual/_plugin-vue_export-helper.js";
-const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-2356dd2a"]]);
+const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-ed16f53a"]]);
 export {
-  p as default
+  m as default
 };

package/dist/components/CuiTabs.vue2.js

@@ -1,8 +1,8 @@
-import { defineComponent as $, ref as p, watch as A, provide as D, toRef as s, computed as T, withDirectives as z, openBlock as v, createElementBlock as f, normalizeClass as _, createElementVNode as h, Fragment as S, renderList as B, normalizeStyle as K, toDisplayString as N, withModifiers as E, unref as H, createVNode as L, createCommentVNode as M, renderSlot as R, vShow as q, nextTick as F } from "vue";
-import U from "./CuiIcon.vue.js";
-import { TabsContextKey as j } from "./tabs-context.js";
-import { useMessages as G } from "../composables/useMessages.js";
-const J = ["aria-orientation"], O = ["data-cui-tab-value", "aria-selected", "aria-disabled", "tabindex", "onClick"], P = { class: "cui-tabs__tab-content" }, Q = ["aria-label", "onClick"], W = { class: "cui-tabs__panels" }, te = /* @__PURE__ */ $({
+import { defineComponent as H, ref as b, watch as _, provide as K, toRef as m, onMounted as M, nextTick as S, onBeforeUnmount as N, computed as L, withDirectives as O, openBlock as v, createElementBlock as h, normalizeClass as T, createElementVNode as k, Fragment as $, renderList as U, normalizeStyle as W, createBlock as q, resolveDynamicComponent as F, createTextVNode as j, toDisplayString as G, withModifiers as J, unref as P, createVNode as Q, createCommentVNode as X, renderSlot as Y, vShow as Z } from "vue";
+import ee from "./CuiIcon.vue.js";
+import { TabsContextKey as te } from "./tabs-context.js";
+import { useMessages as ae } from "../composables/useMessages.js";
+const oe = { class: "cui-tabs__bar-outer" }, le = ["aria-orientation", "data-overflow"], ne = ["data-cui-tab-value", "aria-selected", "aria-disabled", "tabindex", "onClick"], ie = { class: "cui-tabs__tab-content" }, re = ["aria-label", "onClick"], ue = { class: "cui-tabs__panels" }, fe = /* @__PURE__ */ H({
   __name: "CuiTabs",
   props: {
     modelValue: {},
@@ -14,111 +14,149 @@ const J = ["aria-orientation"], O = ["data-cui-tab-value", "aria-selected", "ari
     color: { default: "primary" }
   },
   emits: ["update:modelValue", "close"],
-  setup(o, { emit: x }) {
-    const n = o, b = x, l = p(n.modelValue ?? ""), c = p(""), i = p([]);
-    A(
+  setup(r, { emit: A }) {
+    const n = r, x = A, o = b(n.modelValue ?? ""), p = b(""), l = b([]), f = b(null);
+    _(
       () => n.modelValue,
       (e) => {
-        e !== void 0 && e !== l.value && (c.value = l.value, l.value = e);
+        e !== void 0 && e !== o.value && (p.value = o.value, o.value = e);
       }
     );
-    function k(e) {
-      i.value.find((a) => a.value === e.value) || i.value.push(e), !l.value && !e.disabled && (l.value = e.value, b("update:modelValue", e.value));
+    function D(e) {
+      const a = l.value.findIndex((t) => t.value === e.value);
+      a >= 0 ? l.value[a] = e : l.value.push(e), !o.value && !e.disabled && (o.value = e.value, x("update:modelValue", e.value));
     }
-    function g(e) {
-      i.value = i.value.filter((a) => a.value !== e);
+    function B(e) {
+      l.value = l.value.filter((a) => a.value !== e);
     }
-    function m(e) {
-      const a = i.value.find((t) => t.value === e);
-      a != null && a.disabled || (c.value = l.value, l.value = e, b("update:modelValue", e));
+    function w(e) {
+      const a = l.value.find((t) => t.value === e);
+      a != null && a.disabled || (p.value = o.value, o.value = e, x("update:modelValue", e));
     }
-    function y(e) {
-      b("close", e);
+    function V(e) {
+      x("close", e);
     }
-    D(j, {
-      activeTab: l,
-      variant: s(n, "variant"),
-      orientation: s(n, "orientation"),
-      color: s(n, "color"),
-      keepAlive: s(n, "keepAlive"),
-      transition: s(n, "transition"),
-      previousTab: c,
-      register: k,
-      unregister: g,
-      activate: m,
-      close: y
+    K(te, {
+      activeTab: o,
+      variant: m(n, "variant"),
+      orientation: m(n, "orientation"),
+      color: m(n, "color"),
+      keepAlive: m(n, "keepAlive"),
+      transition: m(n, "transition"),
+      previousTab: p,
+      register: D,
+      unregister: B,
+      activate: w,
+      close: V
     });
-    function w(e) {
-      const a = i.value.filter((r) => !r.disabled), t = a.findIndex((r) => r.value === l.value);
+    function E(e) {
+      const a = l.value.filter((d) => !d.disabled), t = a.findIndex((d) => d.value === o.value);
       if (t < 0) return;
-      const d = n.orientation === "horizontal", I = d ? "ArrowRight" : "ArrowDown", V = d ? "ArrowLeft" : "ArrowUp";
-      let u = -1;
-      e.key === I ? (e.preventDefault(), u = t < a.length - 1 ? t + 1 : 0) : e.key === V ? (e.preventDefault(), u = t > 0 ? t - 1 : a.length - 1) : e.key === "Home" ? (e.preventDefault(), u = 0) : e.key === "End" && (e.preventDefault(), u = a.length - 1), u >= 0 && (m(a[u].value), F(() => {
-        const r = document.querySelector(
-          `[data-cui-tab-value="${a[u].value}"]`
-        );
-        r == null || r.focus();
+      const u = n.orientation === "horizontal", y = u ? "ArrowRight" : "ArrowDown", I = u ? "ArrowLeft" : "ArrowUp";
+      let i = -1;
+      e.key === y ? (e.preventDefault(), i = t < a.length - 1 ? t + 1 : 0) : e.key === I ? (e.preventDefault(), i = t > 0 ? t - 1 : a.length - 1) : e.key === "Home" ? (e.preventDefault(), i = 0) : e.key === "End" && (e.preventDefault(), i = a.length - 1), i >= 0 && (w(a[i].value), S(() => {
+        var d;
+        (d = C(a[i].value)) == null || d.focus();
       }));
     }
-    T(() => {
-      const e = i.value.findIndex((t) => t.value === c.value);
-      return i.value.findIndex((t) => t.value === l.value) >= e ? "left" : "right";
+    function C(e) {
+      var a;
+      return ((a = f.value) == null ? void 0 : a.querySelector(`[data-cui-tab-value="${e}"]`)) ?? null;
+    }
+    const g = b("none");
+    function s() {
+      const e = f.value;
+      if (!e) return;
+      const a = n.orientation === "horizontal", t = a ? e.clientWidth : e.clientHeight, u = a ? e.scrollWidth : e.scrollHeight, y = Math.abs(a ? e.scrollLeft : e.scrollTop);
+      if (u - t <= 1) {
+        g.value = "none";
+        return;
+      }
+      const I = y <= 1, i = y >= u - t - 1;
+      g.value = I ? "end" : i ? "start" : "both";
+    }
+    function z() {
+      var e, a;
+      (a = (e = C(o.value)) == null ? void 0 : e.scrollIntoView) == null || a.call(e, { inline: "nearest", block: "nearest" });
+    }
+    let c;
+    M(() => {
+      S(() => {
+        z(), s();
+      }), typeof ResizeObserver < "u" && f.value && (c = new ResizeObserver(s), c.observe(f.value));
+    }), N(() => {
+      c == null || c.disconnect(), c = void 0;
+    }), _(o, () => {
+      z(), s();
+    }, { flush: "post" }), _(() => l.value.length, s, { flush: "post" }), _(() => n.orientation, s, { flush: "post" }), L(() => {
+      const e = l.value.findIndex((t) => t.value === p.value);
+      return l.value.findIndex((t) => t.value === o.value) >= e ? "left" : "right";
     });
-    const C = G();
-    return (e, a) => z((v(), f("div", {
-      class: _(["cui-tabs", [
-        `cui-tabs--${o.variant}`,
-        `cui-tabs--${o.orientation}`
+    const R = ae();
+    return (e, a) => O((v(), h("div", {
+      class: T(["cui-tabs", [
+        `cui-tabs--${r.variant}`,
+        `cui-tabs--${r.orientation}`
       ]])
     }, [
-      h("div", {
-        class: "cui-tabs__bar",
-        role: "tablist",
-        "aria-orientation": o.orientation,
-        onKeydown: w
-      }, [
-        (v(!0), f(S, null, B(i.value, (t) => (v(), f("button", {
-          key: t.value,
-          "data-cui-tab-value": t.value,
-          class: _(["cui-tabs__tab", {
-            "cui-tabs__tab--active": l.value === t.value,
-            "cui-tabs__tab--disabled": t.disabled
-          }]),
-          style: K({
-            "--_tab-color": `var(--cui-${o.color})`,
-            "--_tab-hover": `var(--cui-${o.color}-hover)`,
-            "--_tab-bg": `var(--cui-${o.color}-bg)`
-          }),
-          role: "tab",
-          "aria-selected": l.value === t.value,
-          "aria-disabled": t.disabled || void 0,
-          tabindex: l.value === t.value ? 0 : -1,
-          onClick: (d) => m(t.value)
+      k("div", oe, [
+        k("div", {
+          ref_key: "barRef",
+          ref: f,
+          class: "cui-tabs__bar",
+          role: "tablist",
+          "aria-orientation": r.orientation,
+          "data-overflow": g.value,
+          onKeydown: E,
+          onScroll: s
         }, [
-          h("span", P, N(t.label), 1),
-          t.closeable ? (v(), f("button", {
-            key: 0,
-            type: "button",
-            class: "cui-tabs__tab-close",
-            "aria-label": H(C).tabs.closeTab,
-            tabindex: "-1",
-            onClick: E((d) => y(t.value), ["stop"])
+          (v(!0), h($, null, U(l.value, (t) => (v(), h("button", {
+            key: t.value,
+            "data-cui-tab-value": t.value,
+            class: T(["cui-tabs__tab", {
+              "cui-tabs__tab--active": o.value === t.value,
+              "cui-tabs__tab--disabled": t.disabled
+            }]),
+            style: W({
+              "--_tab-color": `var(--cui-${r.color})`,
+              "--_tab-hover": `var(--cui-${r.color}-hover)`,
+              "--_tab-bg": `var(--cui-${r.color}-bg)`
+            }),
+            role: "tab",
+            "aria-selected": o.value === t.value,
+            "aria-disabled": t.disabled || void 0,
+            tabindex: o.value === t.value ? 0 : -1,
+            onClick: (u) => w(t.value)
           }, [
-            L(U, {
-              name: "x",
-              size: "0.75rem"
-            })
-          ], 8, Q)) : M("", !0)
-        ], 14, O))), 128))
-      ], 40, J),
-      h("div", W, [
-        R(e.$slots, "default", {}, void 0, !0)
+            k("span", ie, [
+              t.labelSlot ? (v(), q(F(t.labelSlot), { key: 0 })) : (v(), h($, { key: 1 }, [
+                j(G(t.label), 1)
+              ], 64))
+            ]),
+            t.closeable ? (v(), h("button", {
+              key: 0,
+              type: "button",
+              class: "cui-tabs__tab-close",
+              "aria-label": P(R).tabs.closeTab,
+              tabindex: "-1",
+              onClick: J((u) => V(t.value), ["stop"])
+            }, [
+              Q(ee, {
+                name: "x",
+                size: "0.75rem"
+              })
+            ], 8, re)) : X("", !0)
+          ], 14, ne))), 128))
+        ], 40, le)
+      ]),
+      k("div", ue, [
+        Y(e.$slots, "default", {}, void 0, !0)
       ])
     ], 2)), [
-      [q, !o.hidden]
+      [Z, !r.hidden]
     ]);
   }
 });
 export {
-  te as default
+  fe as default
 };

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

@@ -11,6 +11,7 @@ type __VLS_Props = {
     cfg: {
         fontSize: string;
         iconSize: string;
+        hitSize: string;
         indent: string;
         padY: string;
         padX: string;

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

@@ -1 +1 @@
-{"version":3,"file":"CuiTreeNode.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiTreeNode.vue"],"names":[],"mappings":"AA6NA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAElD,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;IAC/B,WAAW,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,GAAG,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;CACzF,CAAC;AAgQF,QAAA,IAAI,OAAO;;;;;CAAU,EAAE,QAAQ,KAAY,CAAE;AAC7C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GACzC;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAiC7C,QAAA,MAAM,eAAe;;;;;;kFAOnB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAQ1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"CuiTreeNode.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiTreeNode.vue"],"names":[],"mappings":"AAiOA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAElD,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;IAC/B,WAAW,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,GAAG,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;CAC1G,CAAC;AAiQF,QAAA,IAAI,OAAO;;;;;CAAU,EAAE,QAAQ,KAAY,CAAE;AAC7C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GACzC;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAiC7C,QAAA,MAAM,eAAe;;;;;;kFAOnB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAQ1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/CuiTreeNode.vue.js

@@ -1,6 +1,6 @@
-import { defineComponent as I, computed as y, ref as b, watch as E, nextTick as H, resolveComponent as R, openBlock as n, createElementBlock as o, normalizeStyle as l, createCommentVNode as c, createElementVNode as k, createBlock as $, renderSlot as S, createTextVNode as Y, toDisplayString as V, Fragment as F, renderList as P, withCtx as W, mergeProps as X } from "vue";
-import C from "./CuiIcon.vue.js";
-const j = ["aria-expanded"], q = { style: { flex: "1", minWidth: "0", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, w = "var(--cui-border-strong, var(--cui-border))", O = /* @__PURE__ */ I({
+import { defineComponent as I, computed as y, ref as b, watch as E, nextTick as H, resolveComponent as R, openBlock as n, createElementBlock as o, normalizeStyle as l, createCommentVNode as c, createElementVNode as $, createBlock as k, renderSlot as w, createTextVNode as Y, toDisplayString as V, Fragment as F, renderList as P, withCtx as W, mergeProps as X } from "vue";
+import z from "./CuiIcon.vue.js";
+const j = ["aria-expanded"], q = { style: { flex: "1", minWidth: "0", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, S = "var(--cui-border-strong, var(--cui-border))", O = /* @__PURE__ */ I({
   __name: "CuiTreeNode",
   props: {
     node: {},
@@ -14,14 +14,14 @@ const j = ["aria-expanded"], q = { style: { flex: "1", minWidth: "0", overflow:
     cfg: {}
   },
   emits: ["toggle-expand", "select-node"],
-  setup(e, { emit: z }) {
-    const t = e, r = z, s = y(() => t.node.children && t.node.children.length > 0), u = y(() => t.expanded.has(t.node.id)), v = y(() => t.selectedSet.has(t.node.id)), f = b(null), i = b(void 0), h = b(u.value);
-    E(u, (d) => {
+  setup(e, { emit: C }) {
+    const t = e, r = C, s = y(() => t.node.children && t.node.children.length > 0), u = y(() => t.expanded.has(t.node.id)), v = y(() => t.selectedSet.has(t.node.id)), f = b(null), i = b(void 0), h = b(u.value);
+    E(u, (a) => {
       if (!t.animated) {
-        h.value = d;
+        h.value = a;
         return;
       }
-      d ? (h.value = !0, i.value = "0px", H(() => {
+      a ? (h.value = !0, i.value = "0px", H(() => {
         f.value && (i.value = f.value.scrollHeight + "px", setTimeout(() => {
           i.value = void 0;
         }, 250));
@@ -31,14 +31,14 @@ const j = ["aria-expanded"], q = { style: { flex: "1", minWidth: "0", overflow:
         }, 250);
       }));
     });
-    function L(d) {
-      d.stopPropagation(), r("toggle-expand", t.node);
+    function L(a) {
+      a.stopPropagation(), r("toggle-expand", t.node);
     }
     function T() {
       s.value && !t.selectable ? r("toggle-expand", t.node) : r("select-node", t.node);
     }
     const m = y(() => t.cfg.padX);
-    return (d, a) => {
+    return (a, d) => {
       const B = R("CuiTreeNode", !0);
       return n(), o("div", {
         role: "treeitem",
@@ -53,7 +53,7 @@ const j = ["aria-expanded"], q = { style: { flex: "1", minWidth: "0", overflow:
             top: "0",
             bottom: "0",
             width: "0",
-            borderLeft: `1px solid ${w}`,
+            borderLeft: `1px solid ${S}`,
             zIndex: "0"
           })
         }, null, 4)) : c("", !0),
@@ -65,7 +65,7 @@ const j = ["aria-expanded"], q = { style: { flex: "1", minWidth: "0", overflow:
             top: "0",
             height: `calc(${e.cfg.padY} + 0.625em)`,
             width: "0",
-            borderLeft: `1px solid ${w}`,
+            borderLeft: `1px solid ${S}`,
             zIndex: "0"
           })
         }, null, 4)) : c("", !0),
@@ -77,11 +77,11 @@ const j = ["aria-expanded"], q = { style: { flex: "1", minWidth: "0", overflow:
             top: `calc(${e.cfg.padY} + 0.625em)`,
             width: `calc(${e.cfg.indent} * 0.5)`,
             height: "0",
-            borderTop: `1px solid ${w}`,
+            borderTop: `1px solid ${S}`,
             zIndex: "0"
           })
         }, null, 4)) : c("", !0),
-        k("div", {
+        $("div", {
           style: l({
             display: "flex",
             alignItems: "center",
@@ -103,10 +103,11 @@ const j = ["aria-expanded"], q = { style: { flex: "1", minWidth: "0", overflow:
           }),
           onClick: T
         }, [
-          k("div", {
+          $("div", {
             style: l({
-              width: e.cfg.iconSize,
-              height: e.cfg.iconSize,
+              width: e.cfg.hitSize,
+              height: e.cfg.hitSize,
+              marginLeft: `calc((${e.cfg.iconSize} - ${e.cfg.hitSize}) / 2)`,
               display: "flex",
               alignItems: "center",
               justifyContent: "center",
@@ -114,23 +115,23 @@ const j = ["aria-expanded"], q = { style: { flex: "1", minWidth: "0", overflow:
               transition: "transform 0.15s ease",
               transform: u.value ? "rotate(90deg)" : "rotate(0deg)"
             }),
-            onClick: a[0] || (a[0] = (x) => s.value && L(x))
+            onClick: d[0] || (d[0] = (x) => s.value && L(x))
           }, [
-            s.value ? (n(), $(C, {
+            s.value ? (n(), k(z, {
               key: 0,
               name: "caret-right",
               size: e.cfg.iconSize,
               style: { color: "var(--cui-text-tertiary)" }
             }, null, 8, ["size"])) : c("", !0)
           ], 4),
-          e.node.icon ? (n(), $(C, {
+          e.node.icon ? (n(), k(z, {
             key: 0,
             name: e.node.icon,
             size: e.cfg.iconSize,
             style: l({ flexShrink: "0", color: v.value ? "var(--cui-primary)" : "var(--cui-text-secondary)" })
           }, null, 8, ["name", "size", "style"])) : c("", !0),
-          k("div", q, [
-            S(d.$slots, "node", {
+          $("div", q, [
+            w(a.$slots, "node", {
               node: e.node,
               selected: v.value,
               expanded: u.value,
@@ -151,7 +152,7 @@ const j = ["aria-expanded"], q = { style: { flex: "1", minWidth: "0", overflow:
             transition: e.animated ? "max-height 0.25s ease" : void 0
           })
         }, [
-          (n(!0), o(F, null, P(e.node.children, (x, N) => (n(), $(B, {
+          (n(!0), o(F, null, P(e.node.children, (x, N) => (n(), k(B, {
             key: String(x.id),
             node: x,
             depth: e.depth + 1,
@@ -162,11 +163,11 @@ const j = ["aria-expanded"], q = { style: { flex: "1", minWidth: "0", overflow:
             "show-lines": e.showLines,
             animated: e.animated,
             cfg: e.cfg,
-            onToggleExpand: a[1] || (a[1] = (g) => r("toggle-expand", g)),
-            onSelectNode: a[2] || (a[2] = (g) => r("select-node", g))
+            onToggleExpand: d[1] || (d[1] = (g) => r("toggle-expand", g)),
+            onSelectNode: d[2] || (d[2] = (g) => r("select-node", g))
           }, {
             node: W((g) => [
-              S(d.$slots, "node", X({ ref_for: !0 }, g))
+              w(a.$slots, "node", X({ ref_for: !0 }, g))
             ]),
             _: 3
           }, 8, ["node", "depth", "is-last", "expanded", "selected-set", "selectable", "show-lines", "animated", "cfg"]))), 128))