@itguy614/clean-ui 1.3.1 → 1.3.2

package/dist/components/CuiColorPicker.vue.js

@@ -1,17 +1,17 @@
-import { defineComponent as me, ref as s, computed as m, watch as pe, onMounted as J, onUnmounted as he, useTemplateRef as Q, withDirectives as _, openBlock as d, createElementBlock as c, normalizeStyle as r, withModifiers as H, createElementVNode as l, createCommentVNode as p, withKeys as be, vModelText as ge, createBlock as ye, withCtx as xe, createTextVNode as we, toDisplayString as ke, Fragment as Se, renderList as Ee, vShow as Re } from "vue";
-import { clampSize as ze } from "../utils/sizing.js";
-import Pe from "./CuiButton.vue.js";
-import { hsvToRgb as ee, rgbToHex as Ce, formatColor as Le, getThemePalette as Me, PALETTE_BASIC as Te, PALETTE_MATERIAL as Be, PALETTE_TAILWIND as He, parseColor as D, rgbToHsv as A } from "../utils/color.js";
-const De = {
+import { defineComponent as ce, ref as d, computed as p, watch as U, onMounted as X, onUnmounted as ve, useTemplateRef as G, withDirectives as K, openBlock as c, createElementBlock as v, normalizeStyle as i, withModifiers as $, createElementVNode as u, createCommentVNode as b, withKeys as fe, vModelText as he, createBlock as me, withCtx as pe, createTextVNode as be, toDisplayString as ge, Fragment as ye, renderList as xe, vShow as we } from "vue";
+import { clampSize as ke } from "../utils/sizing.js";
+import Se from "./CuiButton.vue.js";
+import { hsvToRgb as Y, rgbToHex as Re, formatColor as Ee, getThemePalette as ze, PALETTE_BASIC as Ce, PALETTE_MATERIAL as Pe, PALETTE_TAILWIND as Te, parseColor as I, rgbToHsv as V } from "../utils/color.js";
+const Le = {
   key: 0,
   style: { display: "flex", gap: "calc(0.625rem * var(--cui-density-scale, 1))", alignItems: "center" }
-}, Ae = { style: { flex: "1", display: "flex", flexDirection: "column", gap: "calc(0.5rem * var(--cui-density-scale, 1))" } }, $e = {
+}, Me = { style: { flex: "1", display: "flex", flexDirection: "column", gap: "calc(0.5rem * var(--cui-density-scale, 1))" } }, Be = {
   key: 1,
   style: { display: "flex", gap: "calc(0.375rem * var(--cui-density-scale, 1))", alignItems: "center" }
-}, Ve = ["id", "name", "autocomplete", "aria-describedby", "aria-required", "aria-labelledby"], Fe = {
+}, Ae = ["id", "name", "autocomplete", "aria-describedby", "aria-required", "aria-labelledby"], He = {
   key: 2,
   style: { display: "flex", flexWrap: "wrap", gap: "calc(0.3125rem * var(--cui-density-scale, 1))" }
-}, Ie = ["onClick"], te = "repeating-conic-gradient(#d0d0d0 0% 25%, transparent 0% 50%) 0 0 / 12px 12px", Ge = /* @__PURE__ */ me({
+}, $e = ["onClick"], Z = "repeating-conic-gradient(#d0d0d0 0% 25%, transparent 0% 50%) 0 0 / 12px 12px", De = /* @__PURE__ */ ce({
   __name: "CuiColorPicker",
   props: {
     modelValue: { default: "#000000" },
@@ -33,153 +33,142 @@ const De = {
     disabled: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue"],
-  setup(n, { expose: ne, emit: ae }) {
-    const ie = ["sm", "md", "lg"], a = n, re = ae, v = s(0), h = s(1), b = s(1), u = s(1), S = s(a.format), f = s(""), oe = {
+  setup(a, { expose: j, emit: J }) {
+    const Q = ["sm", "md", "lg"], n = a, _ = J, f = d(0), g = d(1), y = d(1), s = d(1), z = d(n.format), h = d(""), ee = {
       sm: { width: "220px", gradientHeight: "130px", sliderHeight: "10px", thumbSize: "14px", swatchSize: "20px", fontSize: "0.75rem" },
       md: { width: "280px", gradientHeight: "160px", sliderHeight: "12px", thumbSize: "16px", swatchSize: "24px", fontSize: "0.8125rem" },
       lg: { width: "340px", gradientHeight: "200px", sliderHeight: "14px", thumbSize: "18px", swatchSize: "28px", fontSize: "0.875rem" }
-    }, o = m(() => oe[ze(a.size, ie)]), g = m(() => ee(v.value, h.value, b.value)), y = m(() => Ce(g.value.r, g.value.g, g.value.b)), $ = m(() => {
-      const { r: e, g: t, b: i } = g.value;
-      return u.value < 1 ? `rgba(${e}, ${t}, ${i}, ${u.value.toFixed(2)})` : y.value;
-    }), x = m(() => {
-      const { r: e, g: t, b: i } = g.value;
-      return Le(e, t, i, u.value, S.value);
+    }, r = p(() => ee[ke(n.size, Q)]), w = p(() => Y(f.value, g.value, y.value)), k = p(() => Re(w.value.r, w.value.g, w.value.b)), F = p(() => {
+      const { r: e, g: t, b: o } = w.value;
+      return s.value < 1 ? `rgba(${e}, ${t}, ${o}, ${s.value.toFixed(2)})` : k.value;
+    }), S = p(() => {
+      const { r: e, g: t, b: o } = w.value;
+      return Ee(e, t, o, s.value, z.value);
     });
-    function V() {
-      const e = D(a.modelValue);
+    function O() {
+      const e = I(n.modelValue);
       if (e) {
-        const t = A(e.r, e.g, e.b);
-        v.value = t.h, h.value = t.s, b.value = t.v, u.value = e.a, f.value = x.value;
+        const t = V(e.r, e.g, e.b);
+        f.value = t.h, g.value = t.s, y.value = t.v, s.value = e.a, h.value = S.value;
       }
     }
-    pe(() => a.modelValue, V), J(V);
-    const F = s(0);
-    let w = null;
-    J(() => {
-      a.presetPalette === "theme" && typeof MutationObserver < "u" && (w = new MutationObserver(() => {
-        F.value++;
-      }), w.observe(document.documentElement, { attributes: !0, attributeFilter: ["class"] }));
-    }), he(() => {
-      w == null || w.disconnect();
+    U(() => n.modelValue, O), X(O);
+    const D = d(0);
+    let R = null;
+    X(() => {
+      n.presetPalette === "theme" && typeof MutationObserver < "u" && (R = new MutationObserver(() => {
+        D.value++;
+      }), R.observe(document.documentElement, { attributes: !0, attributeFilter: ["class"] }));
+    }), ve(() => {
+      R == null || R.disconnect(), l == null || l();
     });
-    function k() {
-      f.value = x.value, re("update:modelValue", x.value);
+    function E() {
+      h.value = S.value, _("update:modelValue", S.value);
     }
-    const I = m(() => a.palette ? a.palette : a.presetPalette === "theme" ? (F.value, Me()) : a.presetPalette === "basic" ? Te : a.presetPalette === "material" ? Be : a.presetPalette === "tailwind" ? He : []), P = s(null);
-    let C = !1;
-    function le(e) {
-      a.disabled || (C = !0, W(e), document.addEventListener("pointermove", O), document.addEventListener("pointerup", U));
+    const W = p(() => n.palette ? n.palette : n.presetPalette === "theme" ? (D.value, ze()) : n.presetPalette === "basic" ? Ce : n.presetPalette === "material" ? Pe : n.presetPalette === "tailwind" ? Te : []);
+    let l = null;
+    function L(e, t) {
+      if (n.disabled) return;
+      l == null || l(), t(e);
+      const o = (x) => x.pointerId === e.pointerId, m = (x) => {
+        o(x) && t(x);
+      }, T = (x) => {
+        o(x) && H();
+      }, H = () => {
+        document.removeEventListener("pointermove", m), document.removeEventListener("pointerup", T), document.removeEventListener("pointercancel", T), l === H && (l = null);
+      };
+      l = H, document.addEventListener("pointermove", m), document.addEventListener("pointerup", T), document.addEventListener("pointercancel", T);
     }
-    function O(e) {
-      C && W(e);
-    }
-    function U() {
-      C = !1, document.removeEventListener("pointermove", O), document.removeEventListener("pointerup", U);
-    }
-    function W(e) {
-      if (!P.value) return;
-      const t = P.value.getBoundingClientRect();
-      h.value = Math.max(0, Math.min(1, (e.clientX - t.left) / t.width)), b.value = Math.max(0, Math.min(1, 1 - (e.clientY - t.top) / t.height)), k();
-    }
-    const L = s(null);
-    let M = !1;
-    function ue(e) {
-      a.disabled || (M = !0, N(e), document.addEventListener("pointermove", q), document.addEventListener("pointerup", G));
-    }
-    function q(e) {
-      M && N(e);
-    }
-    function G() {
-      M = !1, document.removeEventListener("pointermove", q), document.removeEventListener("pointerup", G);
-    }
-    function N(e) {
-      if (!L.value) return;
-      const t = L.value.getBoundingClientRect();
-      v.value = Math.max(0, Math.min(360, (e.clientX - t.left) / t.width * 360)), k();
-    }
-    const T = s(null);
-    let B = !1;
-    function se(e) {
-      a.disabled || (B = !0, Y(e), document.addEventListener("pointermove", X), document.addEventListener("pointerup", K));
-    }
-    function X(e) {
-      B && Y(e);
+    U(() => n.disabled, (e) => {
+      e && (l == null || l());
+    });
+    const M = d(null), te = (e) => L(e, ae);
+    function ae(e) {
+      if (!M.value) return;
+      const t = M.value.getBoundingClientRect();
+      g.value = Math.max(0, Math.min(1, (e.clientX - t.left) / t.width)), y.value = Math.max(0, Math.min(1, 1 - (e.clientY - t.top) / t.height)), E();
     }
-    function K() {
-      B = !1, document.removeEventListener("pointermove", X), document.removeEventListener("pointerup", K);
+    const B = d(null), oe = (e) => L(e, ie);
+    function ie(e) {
+      if (!B.value) return;
+      const t = B.value.getBoundingClientRect();
+      f.value = Math.max(0, Math.min(360, (e.clientX - t.left) / t.width * 360)), E();
     }
-    function Y(e) {
-      if (!T.value) return;
-      const t = T.value.getBoundingClientRect();
-      u.value = Math.max(0, Math.min(1, (e.clientX - t.left) / t.width)), u.value = Math.round(u.value * 100) / 100, k();
+    const A = d(null), ne = (e) => L(e, re);
+    function re(e) {
+      if (!A.value) return;
+      const t = A.value.getBoundingClientRect();
+      s.value = Math.max(0, Math.min(1, (e.clientX - t.left) / t.width)), s.value = Math.round(s.value * 100) / 100, E();
     }
-    function Z() {
-      const e = D(f.value);
+    function q() {
+      const e = I(h.value);
       if (e) {
-        const t = A(e.r, e.g, e.b);
-        v.value = t.h, h.value = t.s, b.value = t.v, u.value = e.a, k();
+        const t = V(e.r, e.g, e.b);
+        f.value = t.h, g.value = t.s, y.value = t.v, s.value = e.a, E();
       } else
-        f.value = x.value;
+        h.value = S.value;
     }
-    function de() {
-      const e = ["hex", "rgb", "hsl"], t = e.indexOf(S.value);
-      S.value = e[(t + 1) % e.length], f.value = x.value;
+    function le() {
+      const e = ["hex", "rgb", "hsl"], t = e.indexOf(z.value);
+      z.value = e[(t + 1) % e.length], h.value = S.value;
     }
-    function ce(e) {
-      if (a.disabled) return;
-      const t = D(e);
+    function ue(e) {
+      if (n.disabled) return;
+      const t = I(e);
       if (t) {
-        const i = A(t.r, t.g, t.b);
-        v.value = i.h, h.value = i.s, b.value = i.v, u.value = t.a, k();
+        const o = V(t.r, t.g, t.b);
+        f.value = o.h, g.value = o.s, y.value = o.v, s.value = t.a, E();
       }
     }
-    const j = m(() => {
-      const e = ee(v.value, 1, 1);
+    const N = p(() => {
+      const e = Y(f.value, 1, 1);
       return `rgb(${e.r}, ${e.g}, ${e.b})`;
-    }), E = Q("rootEl"), R = Q("inputEl");
-    function ve(e) {
+    }), C = G("rootEl"), P = G("inputEl");
+    function se(e) {
       var t;
-      R.value ? R.value.focus(e) : (t = E.value) == null || t.focus(e);
+      P.value ? P.value.focus(e) : (t = C.value) == null || t.focus(e);
     }
-    function fe() {
+    function de() {
       var e;
-      R.value ? R.value.blur() : (e = E.value) == null || e.blur();
+      P.value ? P.value.blur() : (e = C.value) == null || e.blur();
     }
-    return ne({ el: E, focus: ve, blur: fe }), (e, t) => _((d(), c("div", {
+    return j({ el: C, focus: se, blur: de }), (e, t) => K((c(), v("div", {
       class: "cui-color-picker",
       ref_key: "rootEl",
-      ref: E,
-      style: r({
-        width: o.value.width,
-        opacity: n.disabled ? "0.5" : "1",
-        pointerEvents: n.disabled ? "none" : void 0,
+      ref: C,
+      style: i({
+        width: r.value.width,
+        opacity: a.disabled ? "0.5" : "1",
+        pointerEvents: a.disabled ? "none" : void 0,
         userSelect: "none"
       })
     }, [
-      n.swatchOnly ? p("", !0) : (d(), c("div", {
+      a.swatchOnly ? b("", !0) : (c(), v("div", {
         key: 0,
         ref_key: "gradientRef",
-        ref: P,
-        style: r({
+        ref: M,
+        class: "cui-color-picker__gradient",
+        style: i({
           position: "relative",
           width: "100%",
-          height: o.value.gradientHeight,
+          height: r.value.gradientHeight,
           borderRadius: "0.5rem 0.5rem 0 0",
           cursor: "crosshair",
+          touchAction: "none",
           overflow: "hidden",
-          background: j.value
+          background: N.value
         }),
-        onPointerdown: H(le, ["prevent"])
+        onPointerdown: $(te, ["prevent"])
       }, [
-        t[3] || (t[3] = l("div", { style: { position: "absolute", inset: "0", background: "linear-gradient(to right, white, transparent)" } }, null, -1)),
-        t[4] || (t[4] = l("div", { style: { position: "absolute", inset: "0", background: "linear-gradient(to bottom, transparent, black)" } }, null, -1)),
-        l("div", {
-          style: r({
+        t[3] || (t[3] = u("div", { style: { position: "absolute", inset: "0", background: "linear-gradient(to right, white, transparent)" } }, null, -1)),
+        t[4] || (t[4] = u("div", { style: { position: "absolute", inset: "0", background: "linear-gradient(to bottom, transparent, black)" } }, null, -1)),
+        u("div", {
+          style: i({
             position: "absolute",
-            left: `${h.value * 100}%`,
-            top: `${(1 - b.value) * 100}%`,
-            width: o.value.thumbSize,
-            height: o.value.thumbSize,
+            left: `${g.value * 100}%`,
+            top: `${(1 - y.value) * 100}%`,
+            width: r.value.thumbSize,
+            height: r.value.thumbSize,
             borderRadius: "50%",
             border: "2px solid white",
             boxShadow: "0 1px 4px rgba(0,0,0,0.3)",
@@ -188,124 +177,128 @@ const De = {
           })
         }, null, 4)
       ], 36)),
-      l("div", {
-        style: r({
+      u("div", {
+        style: i({
           padding: "calc(0.75rem * var(--cui-density-scale, 1))",
           background: "var(--cui-surface-base, white)",
           border: "1px solid var(--cui-border)",
-          borderTop: n.swatchOnly ? void 0 : "none",
-          borderRadius: n.swatchOnly ? "0.5rem" : "0 0 0.5rem 0.5rem",
+          borderTop: a.swatchOnly ? void 0 : "none",
+          borderRadius: a.swatchOnly ? "0.5rem" : "0 0 0.5rem 0.5rem",
           display: "flex",
           flexDirection: "column",
           gap: "calc(0.625rem * var(--cui-density-scale, 1))"
         })
       }, [
-        n.swatchOnly ? p("", !0) : (d(), c("div", De, [
-          l("div", {
-            style: r({
+        a.swatchOnly ? b("", !0) : (c(), v("div", Le, [
+          u("div", {
+            style: i({
               width: "2rem",
               height: "2rem",
               borderRadius: "50%",
               border: "1px solid var(--cui-border)",
               flexShrink: "0",
-              background: te,
+              background: Z,
               position: "relative",
               overflow: "hidden"
             })
           }, [
-            l("div", {
-              style: r({ position: "absolute", inset: "0", borderRadius: "50%", background: $.value })
+            u("div", {
+              style: i({ position: "absolute", inset: "0", borderRadius: "50%", background: F.value })
             }, null, 4)
           ], 4),
-          l("div", Ae, [
-            l("div", {
+          u("div", Me, [
+            u("div", {
               ref_key: "hueRef",
-              ref: L,
-              style: r({
+              ref: B,
+              class: "cui-color-picker__hue",
+              style: i({
                 position: "relative",
-                height: o.value.sliderHeight,
+                height: r.value.sliderHeight,
                 borderRadius: "9999px",
                 cursor: "pointer",
+                touchAction: "none",
                 background: "linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)"
               }),
-              onPointerdown: H(ue, ["prevent"])
+              onPointerdown: $(oe, ["prevent"])
             }, [
-              l("div", {
-                style: r({
+              u("div", {
+                style: i({
                   position: "absolute",
-                  left: `${v.value / 360 * 100}%`,
+                  left: `${f.value / 360 * 100}%`,
                   top: "50%",
-                  width: o.value.thumbSize,
-                  height: o.value.thumbSize,
+                  width: r.value.thumbSize,
+                  height: r.value.thumbSize,
                   borderRadius: "50%",
                   border: "2px solid white",
                   boxShadow: "0 1px 3px rgba(0,0,0,0.3)",
                   transform: "translate(-50%, -50%)",
                   pointerEvents: "none",
-                  background: j.value
+                  background: N.value
                 })
               }, null, 4)
             ], 36),
-            n.showAlpha ? (d(), c("div", {
+            a.showAlpha ? (c(), v("div", {
               key: 0,
               ref_key: "alphaRef",
-              ref: T,
-              style: r({
+              ref: A,
+              class: "cui-color-picker__alpha",
+              style: i({
                 position: "relative",
-                height: o.value.sliderHeight,
+                height: r.value.sliderHeight,
                 borderRadius: "9999px",
                 cursor: "pointer",
-                background: te,
+                touchAction: "none",
+                background: Z,
                 overflow: "hidden"
               }),
-              onPointerdown: H(se, ["prevent"])
+              onPointerdown: $(ne, ["prevent"])
             }, [
-              l("div", {
-                style: r({ position: "absolute", inset: "0", borderRadius: "9999px", background: `linear-gradient(to right, transparent, ${y.value})` })
+              u("div", {
+                style: i({ position: "absolute", inset: "0", borderRadius: "9999px", background: `linear-gradient(to right, transparent, ${k.value})` })
               }, null, 4),
-              l("div", {
-                style: r({
+              u("div", {
+                style: i({
                   position: "absolute",
-                  left: `${u.value * 100}%`,
+                  left: `${s.value * 100}%`,
                   top: "50%",
-                  width: o.value.thumbSize,
-                  height: o.value.thumbSize,
+                  width: r.value.thumbSize,
+                  height: r.value.thumbSize,
                   borderRadius: "50%",
                   border: "2px solid white",
                   boxShadow: "0 1px 3px rgba(0,0,0,0.3)",
                   transform: "translate(-50%, -50%)",
                   pointerEvents: "none",
-                  background: y.value
+                  background: k.value
                 })
               }, null, 4)
-            ], 36)) : p("", !0)
+            ], 36)) : b("", !0)
           ])
         ])),
-        n.showInput ? (d(), c("div", $e, [
-          n.swatchOnly ? (d(), c("div", {
+        a.showInput ? (c(), v("div", Be, [
+          a.swatchOnly ? (c(), v("div", {
             key: 0,
-            style: r({
+            style: i({
               width: "1.5rem",
               height: "1.5rem",
               borderRadius: "0.25rem",
               border: "1px solid var(--cui-border)",
               flexShrink: "0",
-              background: $.value
+              background: F.value
             })
-          }, null, 4)) : p("", !0),
-          _(l("input", {
+          }, null, 4)) : b("", !0),
+          K(u("input", {
             ref: "inputEl",
-            id: n.id,
-            name: n.name,
-            autocomplete: n.autocomplete,
-            "aria-describedby": n.ariaDescribedby,
-            "aria-required": n.ariaRequired || void 0,
-            "aria-labelledby": n.ariaLabelledby,
-            "onUpdate:modelValue": t[0] || (t[0] = (i) => f.value = i),
-            style: r({
+            id: a.id,
+            name: a.name,
+            autocomplete: a.autocomplete,
+            "aria-describedby": a.ariaDescribedby,
+            "aria-required": a.ariaRequired || void 0,
+            "aria-labelledby": a.ariaLabelledby,
+            "onUpdate:modelValue": t[0] || (t[0] = (o) => h.value = o),
+            style: i({
               flex: "1",
               padding: "calc(0.3125rem * var(--cui-density-scale, 1)) calc(0.5rem * var(--cui-density-scale, 1))",
-              fontSize: o.value.fontSize,
+              fontSize: r.value.fontSize,
               fontFamily: "var(--cui-font-mono, monospace)",
               border: "1px solid var(--cui-border-strong, var(--cui-border))",
               borderRadius: "0.25rem",
@@ -314,48 +307,48 @@ const De = {
               outline: "none",
               minWidth: "0"
             }),
-            onKeydown: be(Z, ["enter"]),
-            onBlur: Z
-          }, null, 44, Ve), [
-            [ge, f.value]
+            onKeydown: fe(q, ["enter"]),
+            onBlur: q
+          }, null, 44, Ae), [
+            [he, h.value]
           ]),
-          n.showFormatToggle ? (d(), ye(Pe, {
+          a.showFormatToggle ? (c(), me(Se, {
             key: 1,
             variant: "ghost",
             size: "xs",
-            style: r({ flexShrink: "0", fontFamily: "var(--cui-font-mono, monospace)", fontSize: o.value.fontSize, fontWeight: "600", minWidth: "2.5rem" }),
-            onClick: de
+            style: i({ flexShrink: "0", fontFamily: "var(--cui-font-mono, monospace)", fontSize: r.value.fontSize, fontWeight: "600", minWidth: "2.5rem" }),
+            onClick: le
           }, {
-            default: xe(() => [
-              we(ke(S.value.toUpperCase()), 1)
+            default: pe(() => [
+              be(ge(z.value.toUpperCase()), 1)
             ]),
             _: 1
-          }, 8, ["style"])) : p("", !0)
-        ])) : p("", !0),
-        I.value.length > 0 ? (d(), c("div", Fe, [
-          (d(!0), c(Se, null, Ee(I.value, (i) => (d(), c("div", {
-            key: i,
-            style: r({
-              width: o.value.swatchSize,
-              height: o.value.swatchSize,
+          }, 8, ["style"])) : b("", !0)
+        ])) : b("", !0),
+        W.value.length > 0 ? (c(), v("div", He, [
+          (c(!0), v(ye, null, xe(W.value, (o) => (c(), v("div", {
+            key: o,
+            style: i({
+              width: r.value.swatchSize,
+              height: r.value.swatchSize,
               borderRadius: "0.25rem",
-              background: i,
+              background: o,
               cursor: "pointer",
-              border: y.value.toLowerCase() === i.toLowerCase() ? "2px solid var(--cui-primary)" : "1px solid var(--cui-border)",
-              boxShadow: y.value.toLowerCase() === i.toLowerCase() ? "0 0 0 1px var(--cui-primary)" : "none",
+              border: k.value.toLowerCase() === o.toLowerCase() ? "2px solid var(--cui-primary)" : "1px solid var(--cui-border)",
+              boxShadow: k.value.toLowerCase() === o.toLowerCase() ? "0 0 0 1px var(--cui-primary)" : "none",
               transition: "transform 0.1s ease"
             }),
-            onClick: (z) => ce(i),
-            onMouseenter: t[1] || (t[1] = (z) => z.target.style.transform = "scale(1.15)"),
-            onMouseleave: t[2] || (t[2] = (z) => z.target.style.transform = "scale(1)")
-          }, null, 44, Ie))), 128))
-        ])) : p("", !0)
+            onClick: (m) => ue(o),
+            onMouseenter: t[1] || (t[1] = (m) => m.target.style.transform = "scale(1.15)"),
+            onMouseleave: t[2] || (t[2] = (m) => m.target.style.transform = "scale(1)")
+          }, null, 44, $e))), 128))
+        ])) : b("", !0)
       ], 4)
     ], 4)), [
-      [Re, !n.hidden]
+      [we, !a.hidden]
     ]);
   }
 });
 export {
-  Ge as default
+  De as default
 };

package/dist/components/CuiDataGrid.vue.js

@@ -52,7 +52,7 @@ const W = { class: "cui-data-grid" }, X = {
   setup(e, { expose: C, emit: P }) {
     var w;
     const l = e, d = P, $ = z(), t = N({
-      columns: l.columns,
+      columns: () => l.columns,
       // The grid internals operate on the loose DataGridRow shape; T is a public-API
       // refinement, so cast once here at the boundary.
       data: A(l, "data"),

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":"AAgTA,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;AAgQD,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;;;;;;;eAvTP,gBAAgB;aAElB,cAAc;eAEZ,MAAM;eAEN,MAAM;aAER,OAAO;6EAuTjB,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 m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-cd44838e"]]);
+const i = /* @__PURE__ */ t(o, [["__scopeId", "data-v-25260ac8"]]);
 export {
-  m as default
+  i as default
 };