@itguy614/clean-ui 1.2.1 → 1.3.0

package/dist/components/CuiInput.vue2.js

@@ -1,23 +1,21 @@
-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";
-const L = { class: "cui-input-wrapper" }, U = {
+import { defineComponent as I, ref as M, computed as d, useTemplateRef as R, withDirectives as q, openBlock as i, createElementBlock as u, createElementVNode as p, normalizeStyle as D, normalizeClass as N, renderSlot as c, createCommentVNode as r, unref as s, createVNode as P, createBlock as h, toDisplayString as L, vShow as T } from "vue";
+import v from "./CuiIcon.vue.js";
+import { INPUT_SIZE_SCALE as A } from "../utils/sizing.js";
+import { useFieldDescribedBy as F } from "../composables/useFieldDescribedBy.js";
+import { useMessages as U } from "../composables/useMessages.js";
+const Z = { class: "cui-input-wrapper" }, j = {
   key: 0,
   class: "cui-input__prefix-button"
-}, Z = { class: "cui-input__inner" }, j = {
+}, G = { class: "cui-input__inner" }, H = {
   key: 0,
   class: "cui-input__prefix"
-}, q = ["type", "value", "placeholder", "disabled", "readonly", "aria-invalid"], F = ["aria-label"], G = ["aria-label"], H = {
+}, J = ["id", "name", "autocomplete", "aria-describedby", "aria-required", "aria-labelledby", "type", "value", "placeholder", "disabled", "readonly", "aria-invalid"], K = ["aria-label"], O = ["aria-label"], Q = {
   key: 3,
   class: "cui-input__suffix"
-}, J = {
+}, W = {
   key: 1,
   class: "cui-input__suffix-button"
-}, K = {
-  key: 0,
-  class: "cui-input__error"
-}, ee = /* @__PURE__ */ S({
+}, X = ["id"], ue = /* @__PURE__ */ I({
   __name: "CuiInput",
   props: {
     modelValue: { default: "" },
@@ -28,123 +26,137 @@ const L = { class: "cui-input-wrapper" }, U = {
     errorMessage: {},
     readonly: { type: Boolean, default: !1 },
     rounded: { default: "md" },
+    name: {},
+    autocomplete: {},
+    id: {},
+    ariaDescribedby: {},
+    ariaLabelledby: {},
+    ariaRequired: { type: Boolean },
     hidden: { type: Boolean, default: !1 },
     color: { default: "primary" },
     size: { default: "md" },
     disabled: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue", "clear"],
-  setup(t, { expose: x, emit: g }) {
+  setup(e, { expose: g, emit: x }) {
     const k = {
       none: "0",
-      sm: "0.25rem",
-      md: "var(--cui-button-radius, 0.375rem)",
-      lg: "0.5rem",
+      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"
-    }, 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
+    }, t = e, { errorId: $, describedBy: w } = F(t), f = x, l = M(!1), y = d(() => t.type === "password"), B = d(() => y.value && l.value ? "text" : t.type), V = d(
+      () => t.clearable && t.modelValue !== "" && t.modelValue != null && !t.disabled && !t.readonly
     );
-    function V() {
-      var e;
-      c("update:modelValue", ""), c("clear"), (e = r.value) == null || e.focus();
+    function z() {
+      var a;
+      f("update:modelValue", ""), f("clear"), (a = n.value) == null || a.focus();
     }
-    function z(e) {
-      c("update:modelValue", e.target.value);
+    function C(a) {
+      f("update:modelValue", a.target.value);
     }
-    const r = E("inputEl");
-    function C(e) {
-      var s;
-      (s = r.value) == null || s.focus(e);
+    const n = R("inputEl");
+    function S(a) {
+      var o;
+      (o = n.value) == null || o.focus(a);
     }
-    function B() {
-      var e;
-      (e = r.value) == null || e.blur();
+    function E() {
+      var a;
+      (a = n.value) == null || a.blur();
     }
-    x({ el: r, focus: C, blur: B });
-    const f = n(() => D[i.size]), p = A();
-    return (e, s) => I((u(), o("div", L, [
-      m("div", {
+    g({ el: n, focus: S, blur: E });
+    const m = d(() => A[t.size]), b = U();
+    return (a, o) => q((i(), u("div", Z, [
+      p("div", {
         class: N(["cui-input", {
-          "cui-input--error": t.error,
-          "cui-input--disabled": t.disabled,
+          "cui-input--error": e.error,
+          "cui-input--disabled": e.disabled,
           "cui-input--focused": !1,
-          "cui-input--has-prefix-button": e.$slots["prefix-button"],
-          "cui-input--has-suffix-button": e.$slots["suffix-button"]
+          "cui-input--has-prefix-button": a.$slots["prefix-button"],
+          "cui-input--has-suffix-button": a.$slots["suffix-button"]
         }]),
-        style: M({
-          borderRadius: k[t.rounded],
-          "--_input-height": f.value.height,
-          "--_input-font-size": f.value.fontSize,
-          "--_input-px": f.value.px,
-          "--_input-color": `var(--cui-${t.color})`,
-          "--_input-focus-ring": `var(--cui-${t.color}-focus-ring)`,
-          "--_input-border": t.error ? "var(--cui-error)" : "var(--cui-border-strong)",
-          "--_input-focus-border": t.error ? "var(--cui-error)" : `var(--cui-${t.color})`
+        style: D({
+          borderRadius: k[e.rounded],
+          "--_input-height": m.value.height,
+          "--_input-font-size": m.value.fontSize,
+          "--_input-px": m.value.px,
+          "--_input-color": `var(--cui-${e.color})`,
+          "--_input-focus-ring": `var(--cui-${e.color}-focus-ring)`,
+          "--_input-border": e.error ? "var(--cui-error)" : "var(--cui-border-strong)",
+          "--_input-focus-border": e.error ? "var(--cui-error)" : `var(--cui-${e.color})`
         })
       }, [
-        e.$slots["prefix-button"] ? (u(), o("div", U, [
-          d(e.$slots, "prefix-button", {}, void 0, !0)
-        ])) : a("", !0),
-        m("div", Z, [
-          e.$slots.prefix ? (u(), o("span", j, [
-            d(e.$slots, "prefix", {}, void 0, !0)
-          ])) : a("", !0),
-          m("input", {
+        a.$slots["prefix-button"] ? (i(), u("div", j, [
+          c(a.$slots, "prefix-button", {}, void 0, !0)
+        ])) : r("", !0),
+        p("div", G, [
+          a.$slots.prefix ? (i(), u("span", H, [
+            c(a.$slots, "prefix", {}, void 0, !0)
+          ])) : r("", !0),
+          p("input", {
             ref: "inputEl",
-            type: $.value,
-            value: t.modelValue,
-            placeholder: t.placeholder,
-            disabled: t.disabled,
-            readonly: t.readonly,
-            "aria-invalid": t.error || void 0,
+            id: e.id,
+            name: e.name,
+            autocomplete: e.autocomplete,
+            "aria-describedby": s(w),
+            "aria-required": e.ariaRequired || void 0,
+            "aria-labelledby": e.ariaLabelledby,
+            type: B.value,
+            value: e.modelValue,
+            placeholder: e.placeholder,
+            disabled: e.disabled,
+            readonly: e.readonly,
+            "aria-invalid": e.error || void 0,
             class: "cui-input__native",
-            onInput: z
-          }, null, 40, q),
-          w.value ? (u(), o("button", {
+            onInput: C
+          }, null, 40, J),
+          V.value ? (i(), u("button", {
             key: 1,
             type: "button",
             class: "cui-input__clear",
-            tabindex: "-1",
-            "aria-label": v(p).input.clear,
-            onClick: V
+            "aria-label": s(b).input.clear,
+            onClick: z
           }, [
-            P(b, {
+            P(v, {
               name: "x",
               size: "0.75rem"
             })
-          ], 8, F)) : a("", !0),
-          y.value ? (u(), o("button", {
+          ], 8, K)) : r("", !0),
+          y.value ? (i(), u("button", {
             key: 2,
             type: "button",
             class: "cui-input__password-toggle",
-            tabindex: "-1",
-            "aria-label": l.value ? v(p).input.hidePassword : v(p).input.showPassword,
-            onClick: s[0] || (s[0] = (O) => l.value = !l.value)
+            "aria-label": l.value ? s(b).input.hidePassword : s(b).input.showPassword,
+            onClick: o[0] || (o[0] = (Y) => l.value = !l.value)
           }, [
-            l.value ? (u(), h(b, {
+            l.value ? (i(), h(v, {
               key: 1,
               name: "eye-slash",
               size: "1rem"
-            })) : (u(), h(b, {
+            })) : (i(), h(v, {
               key: 0,
               name: "eye",
               size: "1rem"
             }))
-          ], 8, G)) : a("", !0),
-          e.$slots.suffix ? (u(), o("span", H, [
-            d(e.$slots, "suffix", {}, void 0, !0)
-          ])) : a("", !0)
+          ], 8, O)) : r("", !0),
+          a.$slots.suffix ? (i(), u("span", Q, [
+            c(a.$slots, "suffix", {}, void 0, !0)
+          ])) : r("", !0)
         ]),
-        e.$slots["suffix-button"] ? (u(), o("div", J, [
-          d(e.$slots, "suffix-button", {}, void 0, !0)
-        ])) : a("", !0)
+        a.$slots["suffix-button"] ? (i(), u("div", W, [
+          c(a.$slots, "suffix-button", {}, void 0, !0)
+        ])) : r("", !0)
       ], 6),
-      t.error && t.errorMessage ? (u(), o("div", K, R(t.errorMessage), 1)) : a("", !0)
+      e.error && e.errorMessage ? (i(), u("div", {
+        key: 0,
+        id: s($),
+        class: "cui-input__error"
+      }, L(e.errorMessage), 9, X)) : r("", !0)
     ], 512)), [
-      [T, !t.hidden]
+      [T, !e.hidden]
     ]);
   }
 });
 export {
-  ee as default
+  ue as default
 };

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

@@ -1,6 +1,6 @@
-import type { CuiColor, CuiSize, HideableProps, ColorableProps, SizeableProps, DisableableProps } from "../types/common";
+import type { CuiColor, CuiSize, HideableProps, ColorableProps, SizeableProps, DisableableProps, NativeControlProps } from "../types/common";
 export type InputStepperOrientation = "horizontal" | "vertical";
-export interface CuiInputStepperProps extends HideableProps, ColorableProps, SizeableProps, DisableableProps {
+export interface CuiInputStepperProps extends NativeControlProps, HideableProps, ColorableProps, SizeableProps, DisableableProps {
     /** Current value */
     modelValue?: number;
     /** Minimum value */

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

@@ -1 +1 @@
-{"version":3,"file":"CuiInputStepper.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiInputStepper.vue"],"names":[],"mappings":"AA8LA,OAAO,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAKzH,MAAM,MAAM,uBAAuB,GAAG,YAAY,GAAG,UAAU,CAAC;AAEhE,MAAM,WAAW,oBAAqB,SAAQ,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB;IAC1G,oBAAoB;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qBAAqB;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kBAAkB;IAClB,WAAW,CAAC,EAAE,uBAAuB,CAAC;IACtC,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,iDAAiD;IACjD,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AA8ED,iBAAS,KAAK,CAAC,IAAI,CAAC,EAAE,YAAY,QAIjC;AAED,iBAAS,IAAI,SAEZ;;;;;;;;;;;UAvFQ,OAAO;;;;iBANA,uBAAuB;gBARxB,MAAM;UAMZ,MAAM;;AAsWf,wBASG"}
+{"version":3,"file":"CuiInputStepper.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiInputStepper.vue"],"names":[],"mappings":"AAwXA,OAAO,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAK7I,MAAM,MAAM,uBAAuB,GAAG,YAAY,GAAG,UAAU,CAAC;AAEhE,MAAM,WAAW,oBAAqB,SAAQ,kBAAkB,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB;IAC9H,oBAAoB;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qBAAqB;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kBAAkB;IAClB,WAAW,CAAC,EAAE,uBAAuB,CAAC;IACtC,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,iDAAiD;IACjD,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAqJD,iBAAS,KAAK,CAAC,IAAI,CAAC,EAAE,YAAY,QAIjC;AAED,iBAAS,IAAI,SAEZ;;;;;;;;;;;UA9JQ,OAAO;;;;iBANA,uBAAuB;gBARxB,MAAM;UAMZ,MAAM;;AAwdf,wBASG"}

package/dist/components/CuiInputStepper.vue.js

@@ -1,189 +1,7 @@
-import { defineComponent as N, computed as u, useTemplateRef as y, withDirectives as A, openBlock as s, createElementBlock as c, normalizeStyle as r, toDisplayString as F, createCommentVNode as H, createVNode as a, withCtx as m, createElementVNode as W, vShow as T } from "vue";
-import { clampSize as P } from "../utils/sizing.js";
-import v from "./CuiButton.vue.js";
-import b from "./CuiIcon.vue.js";
-const L = ["value", "disabled"], O = ["value", "disabled"], G = /* @__PURE__ */ N({
-  __name: "CuiInputStepper",
-  props: {
-    modelValue: { default: 0 },
-    min: {},
-    max: {},
-    step: { default: 1 },
-    orientation: { default: "horizontal" },
-    label: {},
-    pad: {},
-    wrap: { type: Boolean, default: !1 },
-    hidden: { type: Boolean, default: !1 },
-    color: { default: "primary" },
-    size: { default: "md" },
-    disabled: { type: Boolean, default: !1 }
-  },
-  emits: ["update:modelValue"],
-  setup(t, { expose: R, emit: B }) {
-    const e = t, f = B, h = u(() => e.wrap || e.min === void 0 || e.modelValue - e.step >= e.min), p = u(() => e.wrap || e.max === void 0 || e.modelValue + e.step <= e.max);
-    function S() {
-      if (e.disabled || !h.value) return;
-      let i = Math.round((e.modelValue - e.step) * 1e10) / 1e10;
-      if (e.wrap && e.min !== void 0 && e.max !== void 0 && i < e.min) {
-        const n = e.max - e.min + 1;
-        i = e.min + Math.floor((n - 1) / e.step) * e.step;
-      } else e.min !== void 0 && (i = Math.max(i, e.min));
-      f("update:modelValue", i);
-    }
-    function V() {
-      if (e.disabled || !p.value) return;
-      let i = Math.round((e.modelValue + e.step) * 1e10) / 1e10;
-      e.wrap && e.min !== void 0 && e.max !== void 0 && i > e.max ? i = e.min : e.max !== void 0 && (i = Math.min(i, e.max)), f("update:modelValue", i);
-    }
-    const w = u(() => e.pad && e.pad > 0 ? String(e.modelValue).padStart(e.pad, "0") : String(e.modelValue)), k = u(() => e.orientation === "vertical");
-    function C(i) {
-      const n = i.target.value, l = parseFloat(n);
-      if (isNaN(l)) return;
-      let d = l;
-      e.min !== void 0 && (d = Math.max(d, e.min)), e.max !== void 0 && (d = Math.min(d, e.max)), f("update:modelValue", d);
-    }
-    const E = ["sm", "md", "lg"], I = {
-      sm: { height: "1.75rem", inputWidth: "2.5rem", font: "0.8125rem", buttonSize: "xs", iconSize: "0.75rem" },
-      md: { height: "2.25rem", inputWidth: "3rem", font: "0.875rem", buttonSize: "sm", iconSize: "0.875rem" },
-      lg: { height: "2.75rem", inputWidth: "3.5rem", font: "1rem", buttonSize: "md", iconSize: "1rem" }
-    }, o = u(() => I[P(e.size, E)]), g = y("rootEl"), z = y("inputH"), x = y("inputV");
-    function M(i) {
-      var l;
-      const n = z.value ?? x.value;
-      n ? n.focus(i) : (l = g.value) == null || l.focus(i);
-    }
-    function D() {
-      var i;
-      (i = z.value ?? x.value) == null || i.blur();
-    }
-    return R({ el: g, focus: M, blur: D }), (i, n) => A((s(), c("div", {
-      ref_key: "rootEl",
-      ref: g
-    }, [
-      t.label ? (s(), c("label", {
-        key: 0,
-        style: r({
-          display: "block",
-          marginBottom: "calc(0.25rem * var(--cui-density-scale, 1))",
-          fontWeight: "500",
-          color: "var(--cui-text-secondary)",
-          fontSize: o.value.font,
-          textAlign: k.value ? "center" : void 0
-        })
-      }, F(t.label), 5)) : H("", !0),
-      k.value ? (s(), c("div", {
-        key: 2,
-        style: r({
-          display: "inline-flex",
-          flexDirection: "column",
-          alignItems: "center",
-          borderRadius: "var(--cui-button-radius, 0.375rem)",
-          border: "1px solid var(--cui-border-strong, var(--cui-border))",
-          opacity: t.disabled ? "0.5" : "1",
-          overflow: "hidden"
-        })
-      }, [
-        a(v, {
-          variant: "ghost",
-          size: o.value.buttonSize,
-          disabled: t.disabled || !p.value,
-          color: t.color,
-          style: r({ border: "none", borderRadius: "0", width: "100%", minWidth: o.value.inputWidth }),
-          onClick: V
-        }, {
-          default: m(() => [
-            a(b, {
-              name: "caret-up",
-              size: o.value.iconSize
-            }, null, 8, ["size"])
-          ]),
-          _: 1
-        }, 8, ["size", "disabled", "color", "style"]),
-        W("input", {
-          ref_key: "inputV",
-          ref: x,
-          type: "text",
-          inputmode: "numeric",
-          value: w.value,
-          disabled: t.disabled,
-          style: r({ width: o.value.inputWidth, textAlign: "center", border: "none", borderTop: "1px solid var(--cui-border-strong, var(--cui-border))", borderBottom: "1px solid var(--cui-border-strong, var(--cui-border))", background: "var(--cui-surface-base, white)", color: "var(--cui-text-body)", fontSize: o.value.font, fontWeight: "600", outline: "none", padding: "calc(0.25rem * var(--cui-density-scale, 1)) 0", fontFamily: "inherit" }),
-          onInput: C
-        }, null, 44, O),
-        a(v, {
-          variant: "ghost",
-          size: o.value.buttonSize,
-          disabled: t.disabled || !h.value,
-          color: t.color,
-          style: { border: "none", borderRadius: "0", width: "100%" },
-          onClick: S
-        }, {
-          default: m(() => [
-            a(b, {
-              name: "caret-down",
-              size: o.value.iconSize
-            }, null, 8, ["size"])
-          ]),
-          _: 1
-        }, 8, ["size", "disabled", "color"])
-      ], 4)) : (s(), c("div", {
-        key: 1,
-        style: r({
-          display: "inline-flex",
-          alignItems: "center",
-          borderRadius: "var(--cui-button-radius, 0.375rem)",
-          border: "1px solid var(--cui-border-strong, var(--cui-border))",
-          opacity: t.disabled ? "0.5" : "1",
-          height: o.value.height
-        })
-      }, [
-        a(v, {
-          variant: "ghost",
-          size: o.value.buttonSize,
-          disabled: t.disabled || !h.value,
-          color: t.color,
-          style: { borderRadius: "var(--cui-button-radius, 0.375rem) 0 0 var(--cui-button-radius, 0.375rem)", border: "none", height: "100%" },
-          onClick: S
-        }, {
-          default: m(() => [
-            a(b, {
-              name: "minus",
-              size: o.value.iconSize
-            }, null, 8, ["size"])
-          ]),
-          _: 1
-        }, 8, ["size", "disabled", "color"]),
-        W("input", {
-          ref_key: "inputH",
-          ref: z,
-          type: "text",
-          inputmode: "numeric",
-          value: w.value,
-          disabled: t.disabled,
-          style: r({ width: o.value.inputWidth, height: "100%", textAlign: "center", border: "none", borderLeft: "1px solid var(--cui-border-strong, var(--cui-border))", borderRight: "1px solid var(--cui-border-strong, var(--cui-border))", background: "var(--cui-surface-base, white)", color: "var(--cui-text-body)", fontSize: o.value.font, fontWeight: "600", outline: "none", padding: "0", fontFamily: "inherit" }),
-          onInput: C
-        }, null, 44, L),
-        a(v, {
-          variant: "ghost",
-          size: o.value.buttonSize,
-          disabled: t.disabled || !p.value,
-          color: t.color,
-          style: { borderRadius: "0 var(--cui-button-radius, 0.375rem) var(--cui-button-radius, 0.375rem) 0", border: "none", height: "100%" },
-          onClick: V
-        }, {
-          default: m(() => [
-            a(b, {
-              name: "plus",
-              size: o.value.iconSize
-            }, null, 8, ["size"])
-          ]),
-          _: 1
-        }, 8, ["size", "disabled", "color"])
-      ], 4))
-    ], 512)), [
-      [T, !t.hidden]
-    ]);
-  }
-});
+import t from "./CuiInputStepper.vue2.js";
+/* empty css                     */
+import o from "../_virtual/_plugin-vue_export-helper.js";
+const m = /* @__PURE__ */ o(t, [["__scopeId", "data-v-0c3590bd"]]);
 export {
-  G as default
+  m as default
 };