@itguy614/clean-ui 1.3.0 → 1.3.2

package/dist/components/CuiTagInput.vue2.js

@@ -1,17 +1,17 @@
-import { defineComponent as se, ref as c, computed as b, onMounted as de, onUnmounted as ce, watch as ve, nextTick as B, withDirectives as fe, openBlock as r, createElementBlock as v, normalizeStyle as M, toDisplayString as h, createCommentVNode as y, createElementVNode as R, normalizeClass as $, Fragment as O, renderList as U, createBlock as K, withCtx as me, createTextVNode as ge, unref as W, Teleport as pe, createVNode as Y, withModifiers as Z, renderSlot as be, vShow as he } from "vue";
-import { INPUT_SIZE_SCALE as ye, nestedSize as we, scaleDensity as xe } from "../utils/sizing.js";
-import { useFieldDescribedBy as ke } from "../composables/useFieldDescribedBy.js";
-import Ce from "./CuiIcon.vue.js";
-import Se from "./CuiBadge.vue.js";
-import Te from "./CuiSpinner.vue.js";
+import { defineComponent as de, ref as c, computed as p, onMounted as ce, onUnmounted as ve, watch as fe, nextTick as B, withDirectives as me, openBlock as r, createElementBlock as v, normalizeStyle as M, toDisplayString as b, createCommentVNode as h, createElementVNode as $, normalizeClass as E, Fragment as U, renderList as K, createBlock as W, withCtx as ge, createTextVNode as pe, unref as Y, Teleport as be, createVNode as Z, withModifiers as j, renderSlot as he, vShow as ye } from "vue";
+import { INPUT_SIZE_SCALE as we, nestedSize as xe, scaleDensity as ke } from "../utils/sizing.js";
+import { useFieldDescribedBy as Ce } from "../composables/useFieldDescribedBy.js";
+import Se from "./CuiIcon.vue.js";
+import Te from "./CuiBadge.vue.js";
+import Ve from "./CuiSpinner.vue.js";
 /* empty css                */
-const Ve = {
+const ze = {
   key: 0,
   class: "cui-tag-input__label"
-}, ze = ["id", "name", "autocomplete", "aria-describedby", "aria-required", "aria-labelledby", "value", "placeholder", "disabled"], Le = ["id"], Be = {
+}, Le = ["id", "name", "autocomplete", "aria-describedby", "aria-required", "aria-labelledby", "value", "placeholder", "disabled"], Re = ["id"], Be = {
   key: 0,
   style: { padding: "calc(0.75rem * var(--cui-density-scale, 1))", textAlign: "center" }
-}, Me = ["data-index", "onClick", "onMouseenter"], Ae = /* @__PURE__ */ se({
+}, Me = ["data-index", "onClick", "onMouseenter"], Ne = /* @__PURE__ */ de({
   __name: "CuiTagInput",
   props: {
     modelValue: { default: () => [] },
@@ -40,80 +40,80 @@ const Ve = {
     disabled: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue"],
-  setup(u, { expose: j, emit: G }) {
-    const l = u, { errorId: J, describedBy: Q } = ke(l), X = {
+  setup(u, { expose: G, emit: J }) {
+    const l = u, { errorId: Q, describedBy: X } = Ce(l), ee = {
       none: "0",
       sm: "var(--cui-radius-sm, 0.25rem)",
       md: "var(--cui-button-radius, var(--cui-radius-md, 0.375rem))",
       lg: "var(--cui-radius-lg, 0.5rem)",
       full: "9999px"
-    }, D = G, o = c(""), s = c(!1), i = c(-1), V = c(!1), m = c([]), f = c(null), _ = c(null), w = c(null), E = c(null), I = c({});
-    let x = null;
-    const k = b(() => new Set(l.modelValue)), C = b(() => l.maxTags > 0 && l.modelValue.length >= l.maxTags);
-    function ee(e) {
+    }, D = J, o = c(""), s = c(!1), i = c(-1), z = c(!1), m = c([]), f = c(null), _ = c(null), y = c(null), I = c(null), q = c({});
+    let w = null;
+    const k = p(() => new Set(l.modelValue)), C = p(() => l.maxTags > 0 && l.modelValue.length >= l.maxTags);
+    function te(e) {
       const t = [...l.suggestions, ...m.value].find((a) => a.value === e);
       return (t == null ? void 0 : t.label) ?? e;
     }
-    function te(e) {
+    function ae(e) {
       const t = [...l.suggestions, ...m.value].find((a) => a.value === e);
       return (t == null ? void 0 : t.color) ?? l.color;
     }
-    const d = b(() => {
+    const d = p(() => {
       const t = (l.fetchSuggestions ? m.value : l.suggestions).filter((n) => !k.value.has(n.value));
       if (!o.value || l.fetchSuggestions) return t;
       const a = o.value.toLowerCase();
       return t.filter(
         (n) => n.value.toLowerCase().includes(a) || n.label && n.label.toLowerCase().includes(a)
       );
-    }), g = b(() => {
+    }), g = p(() => {
       if (!l.allowCreate || !o.value.trim() || C.value) return !1;
       const e = o.value.trim().toLowerCase();
       return k.value.has(e) || k.value.has(o.value.trim()) ? !1 : ![...l.suggestions, ...m.value].map((a) => a.value.toLowerCase()).includes(e);
-    }), q = b(() => V.value), ae = xe("0.25rem"), z = b(() => {
-      const e = ye[l.size];
+    }), A = p(() => z.value), le = ke("0.25rem"), L = p(() => {
+      const e = we[l.size];
       return {
-        tagSize: we(l.size),
+        tagSize: xe(l.size),
         style: {
           "--_tag-input-font-size": e.fontSize,
-          "--_tag-input-padding": `${ae} ${e.px}`,
+          "--_tag-input-padding": `${le} ${e.px}`,
           "--_tag-input-min-height": e.height
         }
       };
     });
-    function p() {
-      const e = E.value ?? w.value;
+    function x() {
+      const e = I.value ?? y.value;
       if (!e) return;
-      const t = e.getBoundingClientRect(), a = window.innerHeight, n = a - t.bottom, T = t.top, F = n < 200 && T > n, re = Math.max(0, Math.min(240, (F ? T : n) - 16)), L = {
+      const t = e.getBoundingClientRect(), a = window.innerHeight, n = a - t.bottom, V = t.top, F = n < 200 && V > n, se = Math.max(0, Math.min(240, (F ? V : n) - 16)), R = {
         // The panel is teleported to <body>, so it inherits nothing from the component — it
         // has to carry the size-derived properties itself (#123).
-        ...z.value.style,
+        ...L.value.style,
         position: "fixed",
         zIndex: "9990",
         left: `${t.left}px`,
         width: `${t.width}px`,
-        maxHeight: `${re}px`
+        maxHeight: `${se}px`
         // Only the geometry the positioner computes stays inline; the panel's paint lives in
         // the stylesheet so it can be themed (#123).
       };
-      F ? L.bottom = `${a - t.top + 4}px` : L.top = `${t.bottom + 4}px`, I.value = L;
+      F ? R.bottom = `${a - t.top + 4}px` : R.top = `${t.bottom + 4}px`, q.value = R;
     }
-    function le(e) {
-      if (o.value = e.target.value, i.value = -1, s.value || (s.value = !0, p()), l.fetchSuggestions) {
+    function ue(e) {
+      if (o.value = e.target.value, i.value = -1, s.value || (s.value = !0, x()), l.fetchSuggestions) {
         if (o.value.length < l.minChars) {
           m.value = [];
           return;
         }
-        x && clearTimeout(x), x = setTimeout(async () => {
-          V.value = !0;
+        w && clearTimeout(w), w = setTimeout(async () => {
+          z.value = !0;
           try {
             m.value = await l.fetchSuggestions(o.value);
           } finally {
-            V.value = !1;
+            z.value = !1;
           }
         }, l.debounce);
       }
     }
-    function A(e) {
+    function N(e) {
       if (l.disabled || C.value) return;
       const t = e.trim();
       !t || k.value.has(t) || (D("update:modelValue", [...l.modelValue, t]), o.value = "", i.value = -1, B(() => {
@@ -121,68 +121,67 @@ const Ve = {
         return (a = f.value) == null ? void 0 : a.focus();
       }));
     }
-    function N(e) {
-      A(e.value);
+    function H(e) {
+      N(e.value);
     }
     function S() {
-      g.value && A(o.value.trim());
+      g.value && N(o.value.trim());
     }
-    function H(e) {
+    function O(e) {
       l.disabled || (D("update:modelValue", l.modelValue.filter((t) => t !== e)), B(() => {
         var t;
         return (t = f.value) == null ? void 0 : t.focus();
       }));
     }
-    function ue(e) {
+    function ne(e) {
       const t = d.value.length + (g.value ? 1 : 0);
       if (e.key === "ArrowDown") {
         if (e.preventDefault(), !s.value) {
-          s.value = !0, p();
+          s.value = !0, x();
           return;
         }
         i.value = Math.min(i.value + 1, t - 1);
-      } else e.key === "ArrowUp" ? (e.preventDefault(), i.value = Math.max(i.value - 1, 0)) : e.key === "Enter" ? (e.preventDefault(), i.value >= 0 && i.value < d.value.length ? N(d.value[i.value]) : (g.value && (i.value === d.value.length || i.value === -1) || g.value && o.value.trim()) && S()) : e.key === "," || e.key === "Tab" ? o.value.trim() && l.allowCreate && (e.preventDefault(), S()) : e.key === "Escape" ? s.value = !1 : e.key === "Backspace" && !o.value && l.modelValue.length > 0 && H(l.modelValue[l.modelValue.length - 1]);
+      } else e.key === "ArrowUp" ? (e.preventDefault(), i.value = Math.max(i.value - 1, 0)) : e.key === "Enter" ? (e.preventDefault(), i.value >= 0 && i.value < d.value.length ? H(d.value[i.value]) : (g.value && (i.value === d.value.length || i.value === -1) || g.value && o.value.trim()) && S()) : e.key === "," || e.key === "Tab" ? o.value.trim() && l.allowCreate && (e.preventDefault(), S()) : e.key === "Escape" ? s.value = !1 : e.key === "Backspace" && !o.value && l.modelValue.length > 0 && O(l.modelValue[l.modelValue.length - 1]);
     }
     function P(e) {
       var a, n;
       const t = e.target;
-      (a = w.value) != null && a.contains(t) || (n = _.value) != null && n.contains(t) || (s.value = !1);
+      (a = y.value) != null && a.contains(t) || (n = _.value) != null && n.contains(t) || (s.value = !1);
+    }
+    function oe() {
+      !l.disabled && !C.value && (s.value = !0, x());
     }
-    function ne() {
-      !l.disabled && !C.value && (s.value = !0, p());
+    function T() {
+      s.value && x();
     }
-    de(() => {
-      document.addEventListener("mousedown", P), window.addEventListener("scroll", () => {
-        s.value && p();
-      }, !0), window.addEventListener("resize", () => {
-        s.value && p();
-      });
-    }), ce(() => {
-      document.removeEventListener("mousedown", P), x && clearTimeout(x);
-    }), ve(s, (e) => {
-      e || (o.value = ""), e && B(p);
+    ce(() => {
+      document.addEventListener("mousedown", P), window.addEventListener("scroll", T, !0), window.addEventListener("resize", T);
+    }), ve(() => {
+      document.removeEventListener("mousedown", P), window.removeEventListener("scroll", T, !0), window.removeEventListener("resize", T), w && clearTimeout(w);
+    }), fe(s, (e) => {
+      e || (o.value = ""), e && B(x);
     });
-    function oe(e) {
+    function ie(e) {
       var t;
-      f.value ? f.value.focus(e) : (t = w.value) == null || t.focus(e);
+      f.value ? f.value.focus(e) : (t = y.value) == null || t.focus(e);
     }
-    function ie() {
+    function re() {
       var e;
       (e = f.value) == null || e.blur();
     }
-    return j({ el: w, focus: oe, blur: ie }), (e, t) => fe((r(), v("div", {
+    return G({ el: y, focus: ie, blur: re }), (e, t) => me((r(), v("div", {
       class: "cui-tag-input",
       ref_key: "wrapperRef",
-      ref: w,
-      style: M(z.value.style)
+      ref: y,
+      style: M(L.value.style)
     }, [
-      u.label ? (r(), v("label", Ve, h(u.label), 1)) : y("", !0),
-      R("div", {
+      u.label ? (r(), v("label", ze, b(u.label), 1)) : h("", !0),
+      $("div", {
         ref_key: "controlRef",
-        ref: E,
-        class: $(["cui-tag-input__control", { "cui-tag-input__control--disabled": u.disabled }]),
+        ref: I,
+        class: E(["cui-tag-input__control", { "cui-tag-input__control--disabled": u.disabled }]),
         style: M({
-          "--_tag-input-radius": X[u.rounded],
+          "--_tag-input-radius": ee[u.rounded],
           "--_tag-input-border": u.error ? "var(--cui-error)" : "var(--cui-border-strong, var(--cui-border))"
         }),
         onClick: t[0] || (t[0] = (a) => {
@@ -190,24 +189,24 @@ const Ve = {
           return (n = f.value) == null ? void 0 : n.focus();
         })
       }, [
-        (r(!0), v(O, null, U(u.modelValue, (a) => (r(), K(Se, {
+        (r(!0), v(U, null, K(u.modelValue, (a) => (r(), W(Te, {
           key: a,
-          color: te(a),
-          size: z.value.tagSize,
+          color: ae(a),
+          size: L.value.tagSize,
           removable: "",
-          onRemove: (n) => H(a)
+          onRemove: (n) => O(a)
         }, {
-          default: me(() => [
-            ge(h(ee(a)), 1)
+          default: ge(() => [
+            pe(b(te(a)), 1)
           ]),
           _: 2
         }, 1032, ["color", "size", "onRemove"]))), 128)),
-        C.value ? y("", !0) : (r(), v("input", {
+        C.value ? h("", !0) : (r(), v("input", {
           key: 0,
           id: u.id,
           name: u.name,
           autocomplete: u.autocomplete,
-          "aria-describedby": W(Q),
+          "aria-describedby": Y(X),
           "aria-required": u.ariaRequired || void 0,
           "aria-labelledby": u.ariaLabelledby,
           ref_key: "inputRef",
@@ -216,64 +215,64 @@ const Ve = {
           placeholder: u.modelValue.length > 0 ? "" : u.placeholder,
           disabled: u.disabled,
           class: "cui-tag-input__input",
-          onInput: le,
-          onFocus: ne,
-          onKeydown: ue
-        }, null, 40, ze))
+          onInput: ue,
+          onFocus: oe,
+          onKeydown: ne
+        }, null, 40, Le))
       ], 6),
       u.error && u.errorMessage ? (r(), v("div", {
         key: 1,
-        id: W(J),
+        id: Y(Q),
         class: "cui-tag-input__error"
-      }, h(u.errorMessage), 9, Le)) : y("", !0),
-      (r(), K(pe, { to: "body" }, [
-        s.value && (d.value.length > 0 || g.value || q.value) ? (r(), v("div", {
+      }, b(u.errorMessage), 9, Re)) : h("", !0),
+      (r(), W(be, { to: "body" }, [
+        s.value && (d.value.length > 0 || g.value || A.value) ? (r(), v("div", {
           key: 0,
           ref_key: "dropdownRef",
           ref: _,
           class: "cui-tag-input__dropdown",
-          style: M(I.value)
+          style: M(q.value)
         }, [
-          q.value && d.value.length === 0 ? (r(), v("div", Be, [
-            Y(Te, {
+          A.value && d.value.length === 0 ? (r(), v("div", Be, [
+            Z(Ve, {
               size: "xs",
               "show-label": "",
               label: "Searching..."
             })
-          ])) : y("", !0),
-          (r(!0), v(O, null, U(d.value, (a, n) => (r(), v("div", {
+          ])) : h("", !0),
+          (r(!0), v(U, null, K(d.value, (a, n) => (r(), v("div", {
             key: a.value,
             "data-index": n,
-            class: $(["cui-tag-input__suggestion", { "cui-tag-input__suggestion--focused": i.value === n }]),
-            onClick: Z((T) => N(a), ["stop"]),
-            onMouseenter: (T) => i.value = n
+            class: E(["cui-tag-input__suggestion", { "cui-tag-input__suggestion--focused": i.value === n }]),
+            onClick: j((V) => H(a), ["stop"]),
+            onMouseenter: (V) => i.value = n
           }, [
-            be(e.$slots, "suggestion", { suggestion: a }, () => [
-              R("span", null, h(a.label || a.value), 1)
+            he(e.$slots, "suggestion", { suggestion: a }, () => [
+              $("span", null, b(a.label || a.value), 1)
             ], !0)
           ], 42, Me))), 128)),
           g.value ? (r(), v("div", {
             key: 1,
-            class: $(["cui-tag-input__create", {
+            class: E(["cui-tag-input__create", {
               "cui-tag-input__suggestion--focused": i.value === d.value.length,
               "cui-tag-input__create--divided": d.value.length > 0
             }]),
-            onClick: Z(S, ["stop"]),
+            onClick: j(S, ["stop"]),
             onMouseenter: t[1] || (t[1] = (a) => i.value = d.value.length)
           }, [
-            Y(Ce, {
+            Z(Se, {
               name: "plus",
               size: "0.75rem"
             }),
-            R("span", null, h(u.createText) + " “" + h(o.value.trim()) + "”", 1)
-          ], 34)) : y("", !0)
-        ], 4)) : y("", !0)
+            $("span", null, b(u.createText) + " “" + b(o.value.trim()) + "”", 1)
+          ], 34)) : h("", !0)
+        ], 4)) : h("", !0)
       ]))
     ], 4)), [
-      [he, !u.hidden]
+      [ye, !u.hidden]
     ]);
   }
 });
 export {
-  Ae as default
+  Ne as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"CuiTooltip.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiTooltip.vue"],"names":[],"mappings":"AA+SA,OAAO,EAAc,KAAK,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC9E,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAEvF,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,aAAa,CAAC;AAEzE,MAAM,WAAW,eAAgB,SAAQ,aAAa,EAAE,cAAc,EAAE,gBAAgB;IACtF,0BAA0B;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0BAA0B;IAC1B,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,mCAAmC;IACnC,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gCAAgC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA+PD,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO,IAAW,CAAE;AAC3C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAyC/C,QAAA,MAAM,eAAe;;;;;;;eAtTP,gBAAgB;aAElB,cAAc;eAEZ,MAAM;eAEN,MAAM;aAER,OAAO;6EAsTjB,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":"CuiTooltip.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiTooltip.vue"],"names":[],"mappings":"AAwUA,OAAO,EAAc,KAAK,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC9E,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAEvF,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,aAAa,CAAC;AAEzE,MAAM,WAAW,eAAgB,SAAQ,aAAa,EAAE,cAAc,EAAE,gBAAgB;IACtF,0BAA0B;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0BAA0B;IAC1B,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,mCAAmC;IACnC,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gCAAgC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAwRD,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO,IAAW,CAAE;AAC3C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAwC/C,QAAA,MAAM,eAAe;;;;;;;eA9UP,gBAAgB;aAElB,cAAc;eAEZ,MAAM;eAEN,MAAM;aAER,OAAO;6EA8UjB,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/CuiTooltip.vue.js

@@ -1,7 +1,7 @@
 import o from "./CuiTooltip.vue2.js";
 /* empty css                */
 import t from "../_virtual/_plugin-vue_export-helper.js";
-const c = /* @__PURE__ */ t(o, [["__scopeId", "data-v-edabcc13"]]);
+const i = /* @__PURE__ */ t(o, [["__scopeId", "data-v-25260ac8"]]);
 export {
-  c as default
+  i as default
 };

package/dist/components/CuiTooltip.vue2.js

@@ -1,6 +1,6 @@
-import { defineComponent as N, ref as P, watch as z, toRef as L, onUnmounted as U, computed as a, withDirectives as I, openBlock as u, createElementBlock as s, createElementVNode as v, renderSlot as g, createBlock as K, Teleport as O, normalizeStyle as p, unref as f, normalizeClass as j, createTextVNode as q, toDisplayString as G, createCommentVNode as m, vShow as H } from "vue";
-import { usePopover as J } from "../composables/usePopover.js";
-const Q = { class: "cui-tooltip__content" }, Z = /* @__PURE__ */ N({
+import { defineComponent as I, ref as K, watch as h, toRef as O, onUnmounted as j, computed as d, withDirectives as q, openBlock as c, createElementBlock as v, createElementVNode as w, renderSlot as k, createBlock as G, Teleport as H, normalizeStyle as T, unref as m, normalizeClass as J, createTextVNode as Q, toDisplayString as W, createCommentVNode as b, vShow as X } from "vue";
+import { usePopover as Y } from "../composables/usePopover.js";
+const Z = { class: "cui-tooltip__content" }, te = /* @__PURE__ */ I({
   __name: "CuiTooltip",
   props: {
     text: {},
@@ -15,117 +15,131 @@ const Q = { class: "cui-tooltip__content" }, Z = /* @__PURE__ */ N({
     disabled: { type: Boolean, default: !1 }
   },
   emits: ["update:visible"],
-  setup(n, { emit: h }) {
-    const e = n, d = h, i = P(!1);
-    let r = null, t = null;
-    z(
+  setup(n, { emit: _ }) {
+    const e = n, p = _, i = K(!1);
+    let l = null, t = null;
+    h(
       () => e.visible,
       (o) => {
         o !== void 0 && (i.value = o);
-      }
+      },
+      { immediate: !0 }
     );
-    const { referenceRef: y, floatingRef: w, arrowRef: T, floatingStyles: k, arrowStyle: b, currentSide: _, isPositioned: M } = J({
-      placement: L(e, "placement"),
+    const { referenceRef: E, floatingRef: D, arrowRef: M, floatingStyles: S, arrowStyle: B, currentSide: R, isPositioned: x } = Y({
+      placement: O(e, "placement"),
       offsetDistance: 8,
       arrow: !e.noArrow
     });
-    function c() {
-      e.disabled || (t && (clearTimeout(t), t = null), r = setTimeout(() => {
-        i.value = !0, d("update:visible", !0);
+    function s() {
+      e.disabled || (t && (clearTimeout(t), t = null), l = setTimeout(() => {
+        i.value = !0, p("update:visible", !0);
       }, e.showDelay));
     }
-    function l() {
-      r && (clearTimeout(r), r = null), t = setTimeout(() => {
-        i.value = !1, d("update:visible", !1);
-      }, e.hideDelay);
+    function a() {
+      l && clearTimeout(l), t && clearTimeout(t), l = t = null;
     }
-    function S() {
-      i.value ? l() : c();
+    function g() {
+      a(), i.value = !1, p("update:visible", !1);
     }
-    function B() {
-      (e.trigger === "hover" || e.trigger === "hover-focus") && c();
+    function u() {
+      a(), t = setTimeout(g, e.hideDelay);
     }
-    function D() {
-      (e.trigger === "hover" || e.trigger === "hover-focus") && l();
+    function C() {
+      i.value ? u() : s();
     }
-    function R() {
-      (e.trigger === "focus" || e.trigger === "hover-focus") && c();
+    function $() {
+      (e.trigger === "hover" || e.trigger === "hover-focus") && s();
     }
-    function E() {
-      (e.trigger === "focus" || e.trigger === "hover-focus") && l();
+    function L() {
+      (e.trigger === "hover" || e.trigger === "hover-focus") && u();
     }
-    function $() {
-      e.trigger === "click" && S();
+    function F() {
+      (e.trigger === "focus" || e.trigger === "hover-focus") && s();
     }
-    function x(o) {
-      o.key === "Escape" && i.value && l();
+    function N() {
+      (e.trigger === "focus" || e.trigger === "hover-focus") && u();
     }
-    function C() {
+    function P() {
+      e.trigger === "click" && C();
+    }
+    function f(o) {
+      var y;
+      if (o.key !== "Escape" || o.isComposing) return;
+      const r = o.target;
+      (y = r == null ? void 0 : r.closest) != null && y.call(r, '[aria-expanded="true"]') || o.stopPropagation(), g();
+    }
+    h(
+      i,
+      (o) => {
+        typeof document > "u" || (o ? document.addEventListener("keydown", f, !0) : document.removeEventListener("keydown", f, !0));
+      },
+      { immediate: !0 }
+    );
+    function V() {
       (e.trigger === "hover" || e.trigger === "hover-focus") && t && (clearTimeout(t), t = null);
     }
-    function F() {
-      (e.trigger === "hover" || e.trigger === "hover-focus") && l();
+    function A() {
+      (e.trigger === "hover" || e.trigger === "hover-focus") && u();
     }
-    U(() => {
-      r && clearTimeout(r), t && clearTimeout(t);
+    j(() => {
+      a(), document.removeEventListener("keydown", f, !0);
     });
-    const V = a(() => {
+    const z = d(() => {
       const o = {};
-      return M.value || (o.opacity = "0", o.pointerEvents = "none", o.animation = "none"), o;
-    }), A = a(() => e.color ? {
+      return x.value || (o.opacity = "0", o.pointerEvents = "none", o.animation = "none"), o;
+    }), U = d(() => e.color ? {
       background: `var(--cui-${e.color})`,
       color: `var(--cui-${e.color}-text)`,
       "--_arrow-bg": `var(--cui-${e.color})`
     } : {});
-    return a(() => e.text || !0), (o, W) => I((u(), s("div", {
+    return d(() => e.text || !0), (o, r) => q((c(), v("div", {
       class: "cui-tooltip-wrapper",
-      onMouseenter: B,
-      onMouseleave: D,
-      onFocusin: R,
-      onFocusout: E,
-      onClick: $,
-      onKeydown: x
+      onMouseenter: $,
+      onMouseleave: L,
+      onFocusin: F,
+      onFocusout: N,
+      onClick: P
     }, [
-      v("div", {
+      w("div", {
         ref_key: "referenceRef",
-        ref: y,
+        ref: E,
         class: "cui-tooltip__trigger"
       }, [
-        g(o.$slots, "default", {}, void 0, !0)
+        k(o.$slots, "default", {}, void 0, !0)
       ], 512),
-      (u(), K(O, { to: "body" }, [
-        i.value ? (u(), s("div", {
+      (c(), G(H, { to: "body" }, [
+        i.value ? (c(), v("div", {
           key: 0,
           ref_key: "floatingRef",
-          ref: w,
-          class: j(["cui-tooltip", [
+          ref: D,
+          class: J(["cui-tooltip", [
             e.color ? "cui-tooltip--colored" : "cui-tooltip--default",
-            `cui-tooltip--${f(_)}`
+            `cui-tooltip--${m(R)}`
           ]]),
-          style: p({ ...f(k), ...A.value, ...V.value }),
+          style: T({ ...m(S), ...U.value, ...z.value }),
           role: "tooltip",
-          onMouseenter: C,
-          onMouseleave: F
+          onMouseenter: V,
+          onMouseleave: A
         }, [
-          v("div", Q, [
-            g(o.$slots, "content", {}, () => [
-              q(G(n.text), 1)
+          w("div", Z, [
+            k(o.$slots, "content", {}, () => [
+              Q(W(n.text), 1)
             ], !0)
           ]),
-          n.noArrow ? m("", !0) : (u(), s("div", {
+          n.noArrow ? b("", !0) : (c(), v("div", {
             key: 0,
             ref_key: "arrowRef",
-            ref: T,
+            ref: M,
             class: "cui-tooltip__arrow",
-            style: p(f(b))
+            style: T(m(B))
           }, null, 4))
-        ], 38)) : m("", !0)
+        ], 38)) : b("", !0)
       ]))
     ], 544)), [
-      [H, !n.hidden]
+      [X, !n.hidden]
     ]);
   }
 });
 export {
-  Z as default
+  te as default
 };

package/dist/composables/useDataGrid.d.ts

@@ -1,8 +1,9 @@
-import { type Ref } from "vue";
+import { type MaybeRefOrGetter, type Ref } from "vue";
 import type { DataGridColumn, DataGridRow, DataGridViewConfig, PaginatedData } from "../types/data-grid";
 import { type DataGridContext } from "../components/data-grid-context";
 export interface UseDataGridOptions {
-    columns: DataGridColumn[];
+    /** A plain array is read once; pass a ref or getter to follow later changes. */
+    columns: MaybeRefOrGetter<DataGridColumn[]>;
     data: Ref<DataGridRow[] | PaginatedData>;
     serverSide?: boolean;
     rowKey?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"useDataGrid.d.ts","sourceRoot":"","sources":["../../src/composables/useDataGrid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkC,KAAK,GAAG,EAAE,MAAM,KAAK,CAAC;AAC/D,OAAO,KAAK,EACV,cAAc,EAKd,WAAW,EACX,kBAAkB,EAElB,aAAa,EACd,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAsB,KAAK,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAE3F,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,IAAI,EAAE,GAAG,CAAC,WAAW,EAAE,GAAG,aAAa,CAAC,CAAC;IACzC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,wBAAgB,WAAW,CAAC,OAAO,EAAE,kBAAkB,mBAibtD;AAED,sDAAsD;AACtD,wBAAgB,eAAe,CAAC,OAAO,EAAE,eAAe,QAEvD;AAED,4DAA4D;AAC5D,wBAAgB,gBAAgB,IAAI,eAAe,CAIlD"}
+{"version":3,"file":"useDataGrid.d.ts","sourceRoot":"","sources":["../../src/composables/useDataGrid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmE,KAAK,gBAAgB,EAAE,KAAK,GAAG,EAAE,MAAM,KAAK,CAAC;AACvH,OAAO,KAAK,EACV,cAAc,EAKd,WAAW,EACX,kBAAkB,EAElB,aAAa,EACd,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAsB,KAAK,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAE3F,MAAM,WAAW,kBAAkB;IACjC,gFAAgF;IAChF,OAAO,EAAE,gBAAgB,CAAC,cAAc,EAAE,CAAC,CAAC;IAC5C,IAAI,EAAE,GAAG,CAAC,WAAW,EAAE,GAAG,aAAa,CAAC,CAAC;IACzC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,wBAAgB,WAAW,CAAC,OAAO,EAAE,kBAAkB,mBA8ftD;AAED,sDAAsD;AACtD,wBAAgB,eAAe,CAAC,OAAO,EAAE,eAAe,QAEvD;AAED,4DAA4D;AAC5D,wBAAgB,gBAAgB,IAAI,eAAe,CAIlD"}