@itguy614/clean-ui 1.3.0 → 1.3.1

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":"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"}

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 m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-cd44838e"]]);
 export {
-  c as default
+  m as default
 };

package/dist/components/CuiTooltip.vue2.js

@@ -22,7 +22,8 @@ const Q = { class: "cui-tooltip__content" }, Z = /* @__PURE__ */ N({
       () => 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"),

package/dist/version.js

@@ -1,4 +1,4 @@
-const o = "1.3.0";
+const o = "1.3.1";
 export {
   o as version
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itguy614/clean-ui",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "type": "module",
   "description": "A clean, dark-mode-ready Vue 3 component library — 100+ token-driven, themeable, accessible components.",
   "license": "MIT",