@itguy614/clean-ui 0.9.0 → 1.0.0

package/dist/components/CuiIcon.vue.js

@@ -0,0 +1,7 @@
+import o from "./CuiIcon.vue2.js";
+/* empty css             */
+import t from "../_virtual/_plugin-vue_export-helper.js";
+const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-9be9ff93"]]);
+export {
+  p as default
+};

package/dist/components/CuiIcon.vue2.js

@@ -0,0 +1,72 @@
+import { defineComponent as w, computed as d, ref as C, onMounted as y, watch as g, withDirectives as z, openBlock as r, createElementBlock as m, normalizeStyle as h, normalizeClass as k, createBlock as I, resolveDynamicComponent as S, unref as x, vShow as B } from "vue";
+import { resolveColor as M } from "../utils/color.js";
+const D = /* @__PURE__ */ w({
+  __name: "CuiIcon",
+  props: {
+    name: {},
+    weight: { default: "regular" },
+    size: { default: "md" },
+    color: { default: "currentColor" },
+    duotoneColor: {},
+    duotoneOpacity: { default: 0.2 },
+    hidden: { type: Boolean, default: !1 }
+  },
+  setup(n) {
+    const o = n, p = {
+      xs: "0.875rem",
+      // 14px
+      sm: "1rem",
+      // 16px
+      md: "1.25rem",
+      // 20px
+      lg: "1.5rem",
+      // 24px
+      xl: "2rem"
+      // 32px
+    }, a = d(() => p[o.size] ?? o.size);
+    function f(e) {
+      return "Ph" + e.split("-").map((t) => t.charAt(0).toUpperCase() + t.slice(1)).join("");
+    }
+    const i = /* @__PURE__ */ new Map(), l = C(null);
+    async function s(e) {
+      const t = f(e);
+      if (i.has(t)) {
+        l.value = i.get(t);
+        return;
+      }
+      try {
+        const u = await import("@phosphor-icons/vue");
+        let c = u[t];
+        c || (console.warn(`[CuiIcon] Icon "${e}" (${t}) not found in @phosphor-icons/vue`), c = u.PhQuestion), i.set(t, c), o.name === e && (l.value = c);
+      } catch {
+        console.warn(`[CuiIcon] Failed to load icon "${e}"`);
+      }
+    }
+    y(() => s(o.name)), g(() => o.name, (e) => s(e));
+    const v = d(() => {
+      const e = {};
+      return o.weight === "duotone" && (o.duotoneColor && (e["--_duotone-color"] = o.duotoneColor), e["--_duotone-opacity"] = String(o.duotoneOpacity)), e;
+    });
+    return (e, t) => z((r(), m("span", {
+      class: k(["cui-icon", { "cui-icon--duotone": n.weight === "duotone" }]),
+      style: h(v.value)
+    }, [
+      l.value ? (r(), I(S(l.value), {
+        key: 0,
+        weight: n.weight,
+        size: a.value,
+        color: x(M)(n.color)
+      }, null, 8, ["weight", "size", "color"])) : (r(), m("span", {
+        key: 1,
+        class: "cui-icon__placeholder",
+        style: h({ width: a.value, height: a.value }),
+        "aria-hidden": "true"
+      }, null, 4))
+    ], 6)), [
+      [B, !n.hidden]
+    ]);
+  }
+});
+export {
+  D as default
+};

package/dist/components/CuiInput.vue.js

@@ -0,0 +1,7 @@
+import o from "./CuiInput.vue2.js";
+/* empty css              */
+import t from "../_virtual/_plugin-vue_export-helper.js";
+const f = /* @__PURE__ */ t(o, [["__scopeId", "data-v-30a3b85f"]]);
+export {
+  f as default
+};

package/dist/components/CuiInput.vue2.js

@@ -0,0 +1,148 @@
+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 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 = {
+  key: 0,
+  class: "cui-input__prefix-button"
+}, Z = { class: "cui-input__inner" }, j = {
+  key: 0,
+  class: "cui-input__prefix"
+}, q = ["type", "value", "placeholder", "disabled", "readonly", "aria-invalid"], F = ["aria-label"], G = ["aria-label"], H = {
+  key: 3,
+  class: "cui-input__suffix"
+}, J = {
+  key: 1,
+  class: "cui-input__suffix-button"
+}, K = {
+  key: 0,
+  class: "cui-input__error"
+}, ee = /* @__PURE__ */ S({
+  __name: "CuiInput",
+  props: {
+    modelValue: { default: "" },
+    type: { default: "text" },
+    placeholder: {},
+    clearable: { type: Boolean, default: !1 },
+    error: { type: Boolean, default: !1 },
+    errorMessage: {},
+    readonly: { type: Boolean, default: !1 },
+    rounded: { default: "md" },
+    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 }) {
+    const k = {
+      none: "0",
+      sm: "0.25rem",
+      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);
+    function V() {
+      var e;
+      c("update:modelValue", ""), c("clear"), (e = r.value) == null || e.focus();
+    }
+    function z(e) {
+      c("update:modelValue", e.target.value);
+    }
+    const r = E("inputEl");
+    function C(e) {
+      var s;
+      (s = r.value) == null || s.focus(e);
+    }
+    function B() {
+      var e;
+      (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, [
+      m("div", {
+        class: N(["cui-input", {
+          "cui-input--error": t.error,
+          "cui-input--disabled": t.disabled,
+          "cui-input--focused": !1,
+          "cui-input--has-prefix-button": e.$slots["prefix-button"],
+          "cui-input--has-suffix-button": e.$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})`
+        })
+      }, [
+        e.$slots["prefix-button"] ? (i(), u("div", U, [
+          d(e.$slots, "prefix-button", {}, void 0, !0)
+        ])) : a("", !0),
+        m("div", Z, [
+          e.$slots.prefix ? (i(), u("span", j, [
+            d(e.$slots, "prefix", {}, void 0, !0)
+          ])) : a("", !0),
+          m("input", {
+            ref: "inputEl",
+            type: $.value,
+            value: t.modelValue,
+            placeholder: t.placeholder,
+            disabled: t.disabled,
+            readonly: t.readonly,
+            "aria-invalid": t.error || void 0,
+            class: "cui-input__native",
+            onInput: z
+          }, null, 40, q),
+          w.value ? (i(), u("button", {
+            key: 1,
+            type: "button",
+            class: "cui-input__clear",
+            tabindex: "-1",
+            "aria-label": v(p).input.clear,
+            onClick: V
+          }, [
+            P(b, {
+              name: "x",
+              size: "0.75rem"
+            })
+          ], 8, F)) : a("", !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)
+          }, [
+            l.value ? (i(), h(b, {
+              key: 1,
+              name: "eye-slash",
+              size: "1rem"
+            })) : (i(), h(b, {
+              key: 0,
+              name: "eye",
+              size: "1rem"
+            }))
+          ], 8, G)) : a("", !0),
+          e.$slots.suffix ? (i(), u("span", H, [
+            d(e.$slots, "suffix", {}, void 0, !0)
+          ])) : a("", !0)
+        ]),
+        e.$slots["suffix-button"] ? (i(), u("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)
+    ], 512)), [
+      [T, !t.hidden]
+    ]);
+  }
+});
+export {
+  ee as default
+};

package/dist/components/CuiInputStepper.vue.js

@@ -0,0 +1,189 @@
+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]
+    ]);
+  }
+});
+export {
+  G as default
+};

package/dist/components/CuiInputStepper.vue2.js

@@ -0,0 +1,4 @@
+import f from "./CuiInputStepper.vue.js";
+export {
+  f as default
+};

package/dist/components/CuiKbd.vue.js

@@ -0,0 +1,44 @@
+import { defineComponent as a, computed as m, withDirectives as s, openBlock as l, createElementBlock as c, normalizeStyle as p, renderSlot as u, vShow as f } from "vue";
+import { clampSize as h, scaleDensity as e } from "../utils/sizing.js";
+const b = /* @__PURE__ */ a({
+  __name: "CuiKbd",
+  props: {
+    hidden: { type: Boolean, default: !1 },
+    size: { default: "md" }
+  },
+  setup(r) {
+    const n = r, o = ["sm", "md", "lg"], i = {
+      sm: { fontSize: "0.6875rem", padding: `${e("0.0625rem")} ${e("0.3125rem")}`, minWidth: "1.125rem" },
+      md: { fontSize: "0.75rem", padding: `${e("0.125rem")} ${e("0.375rem")}`, minWidth: "1.375rem" },
+      lg: { fontSize: "0.8125rem", padding: `${e("0.1875rem")} ${e("0.4375rem")}`, minWidth: "1.5rem" }
+    }, t = m(() => h(n.size, o));
+    return (d, S) => s((l(), c("kbd", {
+      style: p({
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: i[t.value].fontSize,
+        padding: i[t.value].padding,
+        minWidth: i[t.value].minWidth,
+        fontFamily: "var(--cui-font-sans, system-ui, sans-serif)",
+        fontWeight: "500",
+        lineHeight: "1.4",
+        color: "var(--cui-text-secondary)",
+        background: "var(--cui-surface-base, white)",
+        border: "1px solid var(--cui-border)",
+        borderBottom: "2px solid var(--cui-border)",
+        borderRadius: "0.25rem",
+        boxShadow: "0 1px 0 var(--cui-border)",
+        whiteSpace: "nowrap",
+        verticalAlign: "middle"
+      })
+    }, [
+      u(d.$slots, "default")
+    ], 4)), [
+      [f, !r.hidden]
+    ]);
+  }
+});
+export {
+  b as default
+};

package/dist/components/CuiKbd.vue2.js

@@ -0,0 +1,4 @@
+import f from "./CuiKbd.vue.js";
+export {
+  f as default
+};