@itguy614/clean-ui 1.0.0 → 1.0.1

package/dist/components/CuiInput.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent as S, ref as _, computed as n, useTemplateRef as E, withDirectives as I, openBlock as i, createElementBlock as u, createElementVNode as m, normalizeStyle as M, normalizeClass as N, renderSlot as d, createCommentVNode as a, unref as v, createVNode as P, createBlock as h, toDisplayString as R, vShow as T } from "vue";
+import { defineComponent as S, ref as _, computed as n, useTemplateRef as E, withDirectives as I, openBlock as u, createElementBlock as o, createElementVNode as m, normalizeStyle as M, normalizeClass as N, renderSlot as d, createCommentVNode as a, unref as v, createVNode as P, createBlock as h, toDisplayString as R, vShow as T } from "vue";
 import b from "./CuiIcon.vue.js";
 import { INPUT_SIZE_SCALE as D } from "../utils/sizing.js";
 import { useMessages as A } from "../composables/useMessages.js";
@@ -41,7 +41,9 @@ const L = { class: "cui-input-wrapper" }, U = {
       md: "var(--cui-button-radius, 0.375rem)",
       lg: "0.5rem",
       full: "9999px"
-    }, o = t, c = g, l = _(!1), y = n(() => o.type === "password"), $ = n(() => y.value && l.value ? "text" : o.type), w = n(() => o.clearable && o.modelValue && !o.disabled && !o.readonly);
+    }, i = t, c = g, l = _(!1), y = n(() => i.type === "password"), $ = n(() => y.value && l.value ? "text" : i.type), w = n(
+      () => i.clearable && i.modelValue !== "" && i.modelValue != null && !i.disabled && !i.readonly
+    );
     function V() {
       var e;
       c("update:modelValue", ""), c("clear"), (e = r.value) == null || e.focus();
@@ -59,8 +61,8 @@ const L = { class: "cui-input-wrapper" }, U = {
       (e = r.value) == null || e.blur();
     }
     x({ el: r, focus: C, blur: B });
-    const f = n(() => D[o.size]), p = A();
-    return (e, s) => I((i(), u("div", L, [
+    const f = n(() => D[i.size]), p = A();
+    return (e, s) => I((u(), o("div", L, [
       m("div", {
         class: N(["cui-input", {
           "cui-input--error": t.error,
@@ -80,11 +82,11 @@ const L = { class: "cui-input-wrapper" }, U = {
           "--_input-focus-border": t.error ? "var(--cui-error)" : `var(--cui-${t.color})`
         })
       }, [
-        e.$slots["prefix-button"] ? (i(), u("div", U, [
+        e.$slots["prefix-button"] ? (u(), o("div", U, [
           d(e.$slots, "prefix-button", {}, void 0, !0)
         ])) : a("", !0),
         m("div", Z, [
-          e.$slots.prefix ? (i(), u("span", j, [
+          e.$slots.prefix ? (u(), o("span", j, [
             d(e.$slots, "prefix", {}, void 0, !0)
           ])) : a("", !0),
           m("input", {
@@ -98,7 +100,7 @@ const L = { class: "cui-input-wrapper" }, U = {
             class: "cui-input__native",
             onInput: z
           }, null, 40, q),
-          w.value ? (i(), u("button", {
+          w.value ? (u(), o("button", {
             key: 1,
             type: "button",
             class: "cui-input__clear",
@@ -111,7 +113,7 @@ const L = { class: "cui-input-wrapper" }, U = {
               size: "0.75rem"
             })
           ], 8, F)) : a("", !0),
-          y.value ? (i(), u("button", {
+          y.value ? (u(), o("button", {
             key: 2,
             type: "button",
             class: "cui-input__password-toggle",
@@ -119,25 +121,25 @@ const L = { class: "cui-input-wrapper" }, U = {
             "aria-label": l.value ? v(p).input.hidePassword : v(p).input.showPassword,
             onClick: s[0] || (s[0] = (O) => l.value = !l.value)
           }, [
-            l.value ? (i(), h(b, {
+            l.value ? (u(), h(b, {
               key: 1,
               name: "eye-slash",
               size: "1rem"
-            })) : (i(), h(b, {
+            })) : (u(), h(b, {
               key: 0,
               name: "eye",
               size: "1rem"
             }))
           ], 8, G)) : a("", !0),
-          e.$slots.suffix ? (i(), u("span", H, [
+          e.$slots.suffix ? (u(), o("span", H, [
             d(e.$slots, "suffix", {}, void 0, !0)
           ])) : a("", !0)
         ]),
-        e.$slots["suffix-button"] ? (i(), u("div", J, [
+        e.$slots["suffix-button"] ? (u(), o("div", J, [
           d(e.$slots, "suffix-button", {}, void 0, !0)
         ])) : a("", !0)
       ], 6),
-      t.error && t.errorMessage ? (i(), u("div", K, R(t.errorMessage), 1)) : a("", !0)
+      t.error && t.errorMessage ? (u(), o("div", K, R(t.errorMessage), 1)) : a("", !0)
     ], 512)), [
       [T, !t.hidden]
     ]);

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

@@ -38,7 +38,7 @@ declare const __VLS_component: import("vue").DefineComponent<CuiMaskedInputProps
         $: import("vue").ComponentInternalInstance;
         $data: {};
         $props: {
-            readonly modelValue?: string | undefined;
+            readonly modelValue?: string | number | undefined;
             readonly type?: import("./CuiInput.vue").InputType | undefined;
             readonly placeholder?: string | undefined;
             readonly clearable?: boolean | undefined;
@@ -51,7 +51,7 @@ declare const __VLS_component: import("vue").DefineComponent<CuiMaskedInputProps
             readonly size?: CuiSize | undefined;
             readonly disabled?: boolean | undefined;
             readonly onClear?: (() => any) | undefined;
-            readonly "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+            readonly "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
         } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
         $attrs: import("vue").Attrs;
         $refs: {
@@ -63,18 +63,18 @@ declare const __VLS_component: import("vue").DefineComponent<CuiMaskedInputProps
         $root: import("vue").ComponentPublicInstance | null;
         $parent: import("vue").ComponentPublicInstance | null;
         $host: Element | null;
-        $emit: ((event: "clear") => void) & ((event: "update:modelValue", value: string) => void);
+        $emit: ((event: "clear") => void) & ((event: "update:modelValue", value: string | number) => void);
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<import("./CuiInput.vue").CuiInputProps> & Readonly<{
             onClear?: (() => any) | undefined;
-            "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+            "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
         }>, {
             el: Readonly<import("vue").ShallowRef<HTMLInputElement | null>>;
             focus: (opts?: FocusOptions) => void;
             blur: () => void;
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
             clear: () => any;
-            "update:modelValue": (value: string) => any;
+            "update:modelValue": (value: string | number) => any;
         }, string, {
             error: boolean;
             readonly: boolean;
@@ -84,7 +84,7 @@ declare const __VLS_component: import("vue").DefineComponent<CuiMaskedInputProps
             type: import("./CuiInput.vue").InputType;
             rounded: import("../index.js").CuiRounded;
             disabled: boolean;
-            modelValue: string;
+            modelValue: string | number;
             clearable: boolean;
         }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
             beforeCreate?: (() => void) | (() => void)[];
@@ -115,11 +115,11 @@ declare const __VLS_component: import("vue").DefineComponent<CuiMaskedInputProps
         type: import("./CuiInput.vue").InputType;
         rounded: import("../index.js").CuiRounded;
         disabled: boolean;
-        modelValue: string;
+        modelValue: string | number;
         clearable: boolean;
     }> & Omit<Readonly<import("./CuiInput.vue").CuiInputProps> & Readonly<{
         onClear?: (() => any) | undefined;
-        "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
     }>, "el" | "focus" | "blur" | ("error" | "readonly" | "hidden" | "size" | "color" | "type" | "rounded" | "disabled" | "modelValue" | "clearable")> & {
         el: HTMLInputElement | null;
         focus: (opts?: FocusOptions) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"CuiTable.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiTable.vue"],"names":[],"mappings":"AAgPA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAIpE,MAAM,WAAW,aAAc,SAAQ,aAAa,EAAE,aAAa;IACjE,kCAAkC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,uDAAuD;IACvD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sFAAsF;IACtF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAuHD,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;AA4B/C,QAAA,MAAM,eAAe;;;;;aAzKT,OAAO;eAEL,OAAO;cAER,OAAO;kBAEH,OAAO;iBAER,OAAO;6EAyKrB,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":"CuiTable.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiTable.vue"],"names":[],"mappings":"AAyPA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAIpE,MAAM,WAAW,aAAc,SAAQ,aAAa,EAAE,aAAa;IACjE,kCAAkC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,uDAAuD;IACvD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sFAAsF;IACtF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAuHD,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;AA4B/C,QAAA,MAAM,eAAe;;;;;aAzKT,OAAO;eAEL,OAAO;cAER,OAAO;kBAEH,OAAO;iBAER,OAAO;6EAyKrB,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/composables/useOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useOverlay.d.ts","sourceRoot":"","sources":["../../src/composables/useOverlay.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgD,KAAK,GAAG,EAAE,KAAK,UAAU,EAAE,MAAM,KAAK,CAAC;AAK9F,MAAM,WAAW,iBAAiB;IAChC,2CAA2C;IAC3C,IAAI,EAAE,MAAM,OAAO,CAAC;IACpB,qDAAqD;IACrD,SAAS,EAAE,GAAG,CAAC,WAAW,GAAG,SAAS,CAAC,GAAG,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC,CAAC;IACpH,qDAAqD;IACrD,UAAU,EAAE,MAAM,OAAO,CAAC;IAC1B,8CAA8C;IAC9C,WAAW,EAAE,MAAM,OAAO,CAAC;IAC3B,oCAAoC;IACpC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iCAAiC;IACjC,YAAY,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,2BAA2B;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,UAAU,CAAC,OAAO,EAAE,iBAAiB;;;;;;;mBAgE7B,aAAa;EAyDpC"}
+{"version":3,"file":"useOverlay.d.ts","sourceRoot":"","sources":["../../src/composables/useOverlay.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgD,KAAK,GAAG,EAAE,KAAK,UAAU,EAAE,MAAM,KAAK,CAAC;AAK9F,MAAM,WAAW,iBAAiB;IAChC,2CAA2C;IAC3C,IAAI,EAAE,MAAM,OAAO,CAAC;IACpB,qDAAqD;IACrD,SAAS,EAAE,GAAG,CAAC,WAAW,GAAG,SAAS,CAAC,GAAG,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC,CAAC;IACpH,qDAAqD;IACrD,UAAU,EAAE,MAAM,OAAO,CAAC;IAC1B,8CAA8C;IAC9C,WAAW,EAAE,MAAM,OAAO,CAAC;IAC3B,oCAAoC;IACpC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iCAAiC;IACjC,YAAY,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,2BAA2B;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,UAAU,CAAC,OAAO,EAAE,iBAAiB;;;;;;;mBAuE7B,aAAa;EAyDpC"}

package/dist/composables/useOverlay.js

@@ -1,6 +1,6 @@
-import { ref as d, watch as x, onMounted as A, onUnmounted as E, nextTick as z } from "vue";
+import { ref as d, watch as x, onMounted as A, onUnmounted as E, nextTick as q } from "vue";
 const t = /* @__PURE__ */ new Set();
-function D(m) {
+function C(y) {
   const {
     open: v,
     dialogRef: l,
@@ -9,17 +9,19 @@ function D(m) {
     animationDuration: g = 200,
     onUpdateOpen: w,
     onClose: O
-  } = m, s = Symbol("overlay"), i = d(!1), a = d(!1), y = d(null);
+  } = y, i = Symbol("overlay"), s = d(!1), a = d(!1), m = d(null);
   function u() {
-    !b() && t.size > 0 && t.clear(), t.add(s), y.value = document.activeElement, i.value = !0, document.body.style.overflow = "hidden", z(() => {
-      var e;
-      a.value = !0, (e = l.value) == null || e.focus();
+    !b() && t.size > 0 && t.clear(), t.add(i), m.value = document.activeElement, s.value = !0, document.body.style.overflow = "hidden", q(() => {
+      requestAnimationFrame(() => {
+        var e;
+        a.value = !0, (e = l.value) == null || e.focus();
+      });
     });
   }
   function c() {
-    a.value = !1, t.delete(s), setTimeout(() => {
+    a.value = !1, t.delete(i), setTimeout(() => {
       var e;
-      i.value = !1, w(!1), O(), t.size === 0 && (document.body.style.overflow = ""), (e = y.value) == null || e.focus();
+      s.value = !1, w(!1), O(), t.size === 0 && (document.body.style.overflow = ""), (e = m.value) == null || e.focus();
     }, g);
   }
   function f() {
@@ -41,9 +43,9 @@ function D(m) {
   }), A(() => {
     v() && u();
   }), E(() => {
-    t.delete(s), t.size === 0 && (document.body.style.overflow = "");
+    t.delete(i), t.size === 0 && (document.body.style.overflow = "");
   }), {
-    isVisible: i,
+    isVisible: s,
     isAnimating: a,
     openOverlay: u,
     closeOverlay: c,
@@ -53,5 +55,5 @@ function D(m) {
   };
 }
 export {
-  D as useOverlay
+  C as useOverlay
 };

package/dist/utils/devWarn.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Sanity-check the two most-confused props. `color` sets the semantic role;
+ * `variant` sets the structural style — passing a role name to `variant`
+ * (e.g. `variant="info"`) is the common mistake, so we detect it and point at
+ * the right prop. Only warns on invalid values; valid usage is silent.
+ *
+ * @param component  Display name, e.g. "CuiBadge".
+ * @param variant    The value passed to `variant` + that component's allowed set.
+ * @param color      The value passed to `color` (validated against the roles).
+ */
+export declare function warnVariantColor(component: string, variant: {
+    value: string | undefined;
+    allowed: readonly string[];
+}, color: string | undefined): void;
+//# sourceMappingURL=devWarn.d.ts.map

package/dist/utils/devWarn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"devWarn.d.ts","sourceRoot":"","sources":["../../src/utils/devWarn.ts"],"names":[],"mappings":"AAiBA;;;;;;;;;GASG;AACH,wBAAgB,gBAAgB,CAC9B,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE;IAAE,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAAC,OAAO,EAAE,SAAS,MAAM,EAAE,CAAA;CAAE,EAClE,KAAK,EAAE,MAAM,GAAG,SAAS,GACxB,IAAI,CAmBN"}

package/dist/utils/devWarn.js

@@ -0,0 +1,20 @@
+import { isColorRole as i } from "./color.js";
+const s = "primary, secondary, success, error, warning, info, surface, surface-light, surface-dark", l = /* @__PURE__ */ new Set();
+function c(o) {
+  l.has(o) || (l.add(o), console.warn(o));
+}
+function d(o, e, r) {
+  const n = e.value;
+  if (n != null && !e.allowed.includes(n)) {
+    const a = i(n) ? ` "${n}" is a color role — did you mean color="${n}"?` : "";
+    c(
+      `[clean-ui] ${o}: variant="${n}" is not valid. Expected one of: ${e.allowed.join(", ")}.${a}`
+    );
+  }
+  r != null && !i(r) && c(
+    `[clean-ui] ${o}: color="${r}" is not a valid role. Expected one of: ${s}.${r === "danger" ? ' Use color="error".' : ""}`
+  );
+}
+export {
+  d as warnVariantColor
+};

package/package.json

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