@itguy614/clean-ui 0.9.0 → 1.0.0

package/dist/components/CuiButton.vue.js

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

package/dist/components/CuiButton.vue2.js

@@ -0,0 +1,133 @@
+import { defineComponent as _, computed as u, useTemplateRef as y, withDirectives as x, openBlock as s, createBlock as k, resolveDynamicComponent as B, mergeProps as C, withCtx as S, createElementBlock as c, renderSlot as d, createCommentVNode as b, createVNode as z, createElementVNode as R, normalizeClass as E, vShow as N } from "vue";
+import w from "./CuiIcon.vue.js";
+import { BUTTON_SIZE_SCALE as D } from "../utils/sizing.js";
+const T = {
+  key: 0,
+  class: "cui-button__prefix"
+}, V = {
+  key: 1,
+  class: "cui-button__spinner",
+  "aria-hidden": "true"
+}, A = {
+  key: 2,
+  class: "cui-button__suffix"
+}, O = /* @__PURE__ */ _({
+  __name: "CuiButton",
+  props: {
+    variant: { default: "outline" },
+    rounded: { default: "md" },
+    type: { default: "button" },
+    href: {},
+    to: {},
+    loading: { type: Boolean, default: !1 },
+    hidden: { type: Boolean, default: !1 },
+    color: { default: "primary" },
+    size: { default: "md" },
+    disabled: { type: Boolean, default: !1 }
+  },
+  setup(a, { expose: v }) {
+    const t = a, o = u(() => t.disabled || t.loading), f = u(() => t.to ? "router-link" : t.href ? "a" : "button"), p = u(() => t.to ? { to: t.to, ...o.value ? { "aria-disabled": "true", tabindex: "-1" } : {} } : t.href ? {
+      href: o.value ? void 0 : t.href,
+      role: "button",
+      ...o.value ? { "aria-disabled": "true", tabindex: "-1" } : {}
+    } : {
+      type: t.type,
+      disabled: o.value || void 0,
+      "aria-disabled": o.value || void 0
+    }), l = y("buttonRef");
+    function h(e) {
+      var r;
+      (r = l.value) == null || r.focus(e);
+    }
+    function g() {
+      var e;
+      (e = l.value) == null || e.blur();
+    }
+    v({ el: l, focus: h, blur: g });
+    const m = {
+      none: "0",
+      sm: "0.25rem",
+      md: "var(--cui-button-radius, 0.375rem)",
+      lg: "0.5rem",
+      full: "9999px"
+    }, $ = u(() => {
+      const e = t.color, r = t.variant, i = D[t.size], n = {
+        height: i.height,
+        paddingLeft: i.px,
+        paddingRight: i.px,
+        fontSize: i.fontSize,
+        gap: i.gap,
+        borderRadius: m[t.rounded],
+        "--_btn-focus-ring": `var(--cui-${e}-focus-ring)`
+      };
+      return r === "solid" ? {
+        ...n,
+        background: `var(--cui-${e}-solid, var(--cui-${e}))`,
+        color: `var(--cui-${e}-text)`,
+        border: "1px solid transparent",
+        "--_btn-hover-bg": `var(--cui-${e}-solid-hover, var(--cui-${e}-hover))`,
+        "--_btn-active-bg": `var(--cui-${e}-solid-active, var(--cui-${e}-active))`
+      } : r === "outline" ? {
+        ...n,
+        background: "transparent",
+        color: `var(--cui-${e})`,
+        border: "1px solid var(--cui-border-strong)",
+        "--_btn-hover-bg": `var(--cui-${e}-bg)`,
+        "--_btn-hover-color": `var(--cui-${e}-hover)`,
+        "--_btn-hover-border": `var(--cui-${e})`,
+        "--_btn-active-bg": `var(--cui-${e}-subtle)`
+      } : r === "dash" ? {
+        ...n,
+        background: "transparent",
+        color: `var(--cui-${e})`,
+        border: "1px dashed var(--cui-border-strong)",
+        "--_btn-hover-bg": `var(--cui-${e}-bg)`,
+        "--_btn-hover-color": `var(--cui-${e}-hover)`,
+        "--_btn-hover-border": `var(--cui-${e})`,
+        "--_btn-active-bg": `var(--cui-${e}-subtle)`
+      } : {
+        ...n,
+        background: "transparent",
+        color: `var(--cui-${e})`,
+        border: "1px solid transparent",
+        "--_btn-hover-bg": `var(--cui-${e}-bg)`,
+        "--_btn-hover-color": `var(--cui-${e}-hover)`,
+        "--_btn-active-bg": `var(--cui-${e}-subtle)`
+      };
+    });
+    return (e, r) => x((s(), k(B(f.value), C({
+      ref: "buttonRef",
+      class: ["cui-button", { "cui-button--disabled": o.value }],
+      style: $.value
+    }, p.value, {
+      "aria-busy": a.loading || void 0
+    }), {
+      default: S(() => [
+        e.$slots.prefix ? (s(), c("span", T, [
+          d(e.$slots, "prefix", {}, void 0, !0)
+        ])) : b("", !0),
+        a.loading ? (s(), c("span", V, [
+          z(w, {
+            name: "circle-notch",
+            size: "1em",
+            class: "cui-button__spinner-svg"
+          })
+        ])) : b("", !0),
+        R("span", {
+          class: E([{ "opacity-0": a.loading }, "cui-button__content"])
+        }, [
+          d(e.$slots, "default", {}, void 0, !0)
+        ], 2),
+        e.$slots.suffix ? (s(), c("span", A, [
+          d(e.$slots, "suffix", {}, void 0, !0)
+        ])) : b("", !0)
+      ]),
+      _: 3
+    }, 16, ["class", "style", "aria-busy"])), [
+      [N, !a.hidden]
+    ]);
+  }
+});
+export {
+  O as default
+};

package/dist/components/CuiButtonGroup.vue.js

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

package/dist/components/CuiButtonGroup.vue2.js

@@ -0,0 +1,21 @@
+import { defineComponent as t, withDirectives as n, openBlock as r, createElementBlock as i, normalizeClass as u, renderSlot as a, vShow as l } from "vue";
+const c = /* @__PURE__ */ t({
+  __name: "CuiButtonGroup",
+  props: {
+    orientation: { default: "horizontal" },
+    hidden: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    return (o, d) => n((r(), i("div", {
+      class: u(["cui-button-group", `cui-button-group--${e.orientation}`]),
+      role: "group"
+    }, [
+      a(o.$slots, "default", {}, void 0, !0)
+    ], 2)), [
+      [l, !e.hidden]
+    ]);
+  }
+});
+export {
+  c as default
+};

package/dist/components/CuiCard.vue.js

@@ -0,0 +1,35 @@
+import { defineComponent as d, computed as n, withDirectives as l, openBlock as i, createElementBlock as u, normalizeStyle as s, renderSlot as c, vShow as p } from "vue";
+const v = /* @__PURE__ */ d({
+  __name: "CuiCard",
+  props: {
+    variant: { default: "elevated" },
+    rounded: { default: "lg" },
+    hidden: { type: Boolean, default: !1 }
+  },
+  setup(a) {
+    const o = {
+      none: "0",
+      sm: "0.25rem",
+      md: "var(--cui-button-radius, 0.375rem)",
+      lg: "0.5rem",
+      full: "9999px"
+    }, r = a, t = n(() => {
+      const e = {
+        borderRadius: o[r.rounded],
+        overflow: "clip",
+        background: "var(--cui-surface-base)"
+      };
+      return r.variant === "elevated" ? (e.border = "1px solid var(--cui-border)", e.boxShadow = "0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.03)") : r.variant === "outline" ? e.border = "1px solid var(--cui-border)" : (e.border = "none", e.background = "transparent"), e;
+    });
+    return (e, b) => l((i(), u("div", {
+      style: s(t.value)
+    }, [
+      c(e.$slots, "default")
+    ], 4)), [
+      [p, !a.hidden]
+    ]);
+  }
+});
+export {
+  v as default
+};

package/dist/components/CuiCard.vue2.js

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

package/dist/components/CuiCardBody.vue.js

@@ -0,0 +1,20 @@
+import { defineComponent as n, withDirectives as t, openBlock as d, createElementBlock as l, normalizeStyle as o, renderSlot as i, vShow as r } from "vue";
+const u = /* @__PURE__ */ n({
+  __name: "CuiCardBody",
+  props: {
+    noPadding: { type: Boolean, default: !1 },
+    hidden: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    return (a, c) => t((d(), l("div", {
+      style: o({ padding: e.noPadding ? "0" : "calc(0.5rem * var(--cui-density-scale, 1)) calc(1.125rem * var(--cui-density-scale, 1))" })
+    }, [
+      i(a.$slots, "default")
+    ], 4)), [
+      [r, !e.hidden]
+    ]);
+  }
+});
+export {
+  u as default
+};

package/dist/components/CuiCardBody.vue2.js

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

package/dist/components/CuiCardFooter.vue.js

@@ -0,0 +1,32 @@
+import { defineComponent as n, withDirectives as l, openBlock as c, createElementBlock as i, normalizeStyle as r, renderSlot as s, vShow as d } from "vue";
+const u = /* @__PURE__ */ n({
+  __name: "CuiCardFooter",
+  props: {
+    align: { default: "right" },
+    hidden: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    const t = {
+      left: "flex-start",
+      right: "flex-end",
+      center: "center",
+      between: "space-between"
+    };
+    return (a, o) => l((c(), i("div", {
+      style: r({
+        display: "flex",
+        alignItems: "center",
+        gap: "calc(0.5rem * var(--cui-density-scale, 1))",
+        padding: "calc(0.375rem * var(--cui-density-scale, 1)) calc(1.125rem * var(--cui-density-scale, 1)) calc(1rem * var(--cui-density-scale, 1))",
+        justifyContent: t[e.align]
+      })
+    }, [
+      s(a.$slots, "default")
+    ], 4)), [
+      [d, !e.hidden]
+    ]);
+  }
+});
+export {
+  u as default
+};

package/dist/components/CuiCardFooter.vue2.js

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

package/dist/components/CuiCardHeader.vue.js

@@ -0,0 +1,51 @@
+import { defineComponent as n, withDirectives as o, openBlock as t, createElementBlock as i, createElementVNode as r, renderSlot as l, toDisplayString as c, createCommentVNode as a, vShow as d } from "vue";
+const m = { style: {
+  display: "flex",
+  alignItems: "flex-start",
+  justifyContent: "space-between",
+  gap: "calc(0.75rem * var(--cui-density-scale, 1))",
+  padding: "calc(1rem * var(--cui-density-scale, 1)) calc(1.125rem * var(--cui-density-scale, 1)) calc(0.375rem * var(--cui-density-scale, 1))"
+} }, u = { style: { flex: "1", minWidth: "0" } }, y = {
+  key: 0,
+  style: {
+    fontSize: "1.0625rem",
+    fontWeight: "600",
+    lineHeight: "1.4",
+    color: "var(--cui-text-emphasis)"
+  }
+}, f = {
+  key: 1,
+  style: {
+    fontSize: "0.8125rem",
+    color: "var(--cui-text-secondary)",
+    marginTop: "calc(0.125rem * var(--cui-density-scale, 1))"
+  }
+}, h = {
+  key: 0,
+  style: { display: "flex", alignItems: "center", gap: "calc(0.5rem * var(--cui-density-scale, 1))", flexShrink: "0" }
+}, p = /* @__PURE__ */ n({
+  __name: "CuiCardHeader",
+  props: {
+    title: {},
+    subtitle: {},
+    hidden: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    return (s, v) => o((t(), i("div", m, [
+      r("div", u, [
+        l(s.$slots, "default", {}, () => [
+          e.title ? (t(), i("div", y, c(e.title), 1)) : a("", !0),
+          e.subtitle ? (t(), i("div", f, c(e.subtitle), 1)) : a("", !0)
+        ])
+      ]),
+      s.$slots.actions ? (t(), i("div", h, [
+        l(s.$slots, "actions")
+      ])) : a("", !0)
+    ], 512)), [
+      [d, !e.hidden]
+    ]);
+  }
+});
+export {
+  p as default
+};

package/dist/components/CuiCardHeader.vue2.js

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

package/dist/components/CuiCardMedia.vue.js

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

package/dist/components/CuiCardMedia.vue2.js

@@ -0,0 +1,38 @@
+import { defineComponent as l, computed as d, withDirectives as n, openBlock as a, createElementBlock as c, normalizeClass as r, renderSlot as u, normalizeStyle as m, createCommentVNode as p, vShow as f } from "vue";
+const h = ["src", "alt"], C = /* @__PURE__ */ l({
+  __name: "CuiCardMedia",
+  props: {
+    src: {},
+    alt: { default: "" },
+    aspect: { default: "video" },
+    position: { default: "top" },
+    hidden: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    const t = e, o = {
+      auto: "auto",
+      video: "16 / 9",
+      square: "1 / 1"
+    }, s = d(() => ({
+      aspectRatio: o[t.aspect] ?? t.aspect
+    }));
+    return (i, v) => n((a(), c("div", {
+      class: r(["cui-card-media", `cui-card-media--${e.position}`])
+    }, [
+      u(i.$slots, "default", {}, () => [
+        e.src ? (a(), c("img", {
+          key: 0,
+          src: e.src,
+          alt: e.alt,
+          class: "cui-card-media__img",
+          style: m(s.value)
+        }, null, 12, h)) : p("", !0)
+      ], !0)
+    ], 2)), [
+      [f, !e.hidden]
+    ]);
+  }
+});
+export {
+  C as default
+};

package/dist/components/CuiCheckbox.vue.js

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

package/dist/components/CuiCheckbox.vue2.js

@@ -0,0 +1,105 @@
+import { defineComponent as w, inject as _, computed as u, ref as S, withDirectives as z, openBlock as r, createElementBlock as b, normalizeStyle as h, normalizeClass as D, createElementVNode as d, withModifiers as E, createBlock as k, createCommentVNode as f, renderSlot as y, createTextVNode as x, toDisplayString as p, vShow as N } from "vue";
+import { CheckboxGroupKey as R } from "./multi-select-group-context.js";
+import C from "./CuiIcon.vue.js";
+const K = ["aria-checked", "aria-disabled", "tabindex"], j = ["value", "checked", "indeterminate", "disabled", "readonly"], G = { class: "cui-checkbox__label-wrap" }, I = { class: "cui-checkbox__label" }, M = {
+  key: 0,
+  class: "cui-checkbox__description"
+}, F = /* @__PURE__ */ w({
+  __name: "CuiCheckbox",
+  props: {
+    value: {},
+    modelValue: { type: Boolean },
+    label: {},
+    description: {},
+    indeterminate: { type: Boolean, default: !1 },
+    readonly: { type: Boolean, default: !1 },
+    hidden: { type: Boolean, default: !1 },
+    color: {},
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { expose: V, emit: $ }) {
+    const t = e, g = $, l = _(R, null), a = u(() => l && t.value !== void 0 ? l.modelValue.value.includes(t.value) : t.modelValue === !0), o = u(() => l != null && l.disabled.value ? !0 : t.disabled), n = u(() => l != null && l.readonly.value ? !0 : t.readonly), c = u(() => t.color ?? (l == null ? void 0 : l.color.value) ?? "primary"), s = S();
+    function v() {
+      o.value || n.value || (l && t.value !== void 0 ? l.toggle(t.value) : g("update:modelValue", !t.modelValue));
+    }
+    function B(i) {
+      (i.key === " " || i.key === "Enter") && (i.preventDefault(), v());
+    }
+    return V({ el: s, focus: () => {
+      var i;
+      return (i = s.value) == null ? void 0 : i.focus();
+    } }), (i, m) => z((r(), b("label", {
+      ref_key: "elRef",
+      ref: s,
+      class: D(["cui-checkbox", {
+        "cui-checkbox--checked": a.value,
+        "cui-checkbox--indeterminate": e.indeterminate && !a.value,
+        "cui-checkbox--disabled": o.value,
+        "cui-checkbox--readonly": n.value
+      }]),
+      style: h({ "--_check-focus-ring": `var(--cui-${c.value}-focus-ring)` }),
+      role: "checkbox",
+      "aria-checked": e.indeterminate && !a.value ? "mixed" : a.value,
+      "aria-disabled": o.value || n.value || void 0,
+      tabindex: o.value ? -1 : 0,
+      onClick: v,
+      onKeydown: B
+    }, [
+      d("input", {
+        type: "checkbox",
+        value: e.value !== void 0 ? String(e.value) : void 0,
+        checked: a.value,
+        indeterminate: e.indeterminate && !a.value,
+        disabled: o.value,
+        readonly: n.value,
+        tabindex: "-1",
+        "aria-hidden": "true",
+        class: "cui-checkbox__input",
+        onClick: m[0] || (m[0] = E(() => {
+        }, ["stop", "prevent"]))
+      }, null, 8, j),
+      d("span", {
+        class: "cui-checkbox__indicator",
+        style: h({
+          "--_check-color": `var(--cui-${c.value})`,
+          "--_check-border": a.value || e.indeterminate && !a.value ? `var(--cui-${c.value})` : "var(--cui-border-strong)",
+          "--_check-bg": a.value || e.indeterminate && !a.value ? `var(--cui-${c.value}-bg)` : "transparent"
+        })
+      }, [
+        a.value ? (r(), k(C, {
+          key: 0,
+          name: "check",
+          weight: "bold",
+          size: "0.875rem",
+          color: `var(--cui-${c.value})`,
+          class: "cui-checkbox__icon"
+        }, null, 8, ["color"])) : e.indeterminate ? (r(), k(C, {
+          key: 1,
+          name: "minus",
+          weight: "bold",
+          size: "0.875rem",
+          color: `var(--cui-${c.value})`,
+          class: "cui-checkbox__icon"
+        }, null, 8, ["color"])) : f("", !0)
+      ], 4),
+      d("span", G, [
+        d("span", I, [
+          y(i.$slots, "default", {}, () => [
+            x(p(e.label), 1)
+          ], !0)
+        ]),
+        e.description || i.$slots.description ? (r(), b("span", M, [
+          y(i.$slots, "description", {}, () => [
+            x(p(e.description), 1)
+          ], !0)
+        ])) : f("", !0)
+      ])
+    ], 46, K)), [
+      [N, !e.hidden]
+    ]);
+  }
+});
+export {
+  F as default
+};

package/dist/components/CuiCheckboxGroup.vue.js

@@ -0,0 +1,7 @@
+import o from "./CuiCheckboxGroup.vue2.js";
+/* empty css                      */
+import r from "../_virtual/_plugin-vue_export-helper.js";
+const e = /* @__PURE__ */ r(o, [["__scopeId", "data-v-045a818e"]]);
+export {
+  e as default
+};

package/dist/components/CuiCheckboxGroup.vue2.js

@@ -0,0 +1,59 @@
+import { defineComponent as b, useSlots as y, computed as u, provide as g, toRef as a, withDirectives as v, openBlock as c, createElementBlock as s, normalizeClass as k, createElementVNode as x, renderSlot as V, toDisplayString as C, createCommentVNode as S, vShow as B } from "vue";
+import { CheckboxGroupKey as D } from "./multi-select-group-context.js";
+const M = ["aria-label", "aria-invalid"], w = { class: "cui-checkbox-group__options" }, z = {
+  key: 0,
+  class: "cui-checkbox-group__error"
+}, N = /* @__PURE__ */ b({
+  __name: "CuiCheckboxGroup",
+  props: {
+    modelValue: { default: () => [] },
+    orientation: { default: "auto" },
+    readonly: { type: Boolean, default: !1 },
+    error: { type: Boolean, default: !1 },
+    errorMessage: {},
+    label: {},
+    hidden: { type: Boolean, default: !1 },
+    color: { default: "primary" },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue"],
+  setup(o, { emit: f }) {
+    const e = o, m = f, i = y(), h = u(() => {
+      var r;
+      const t = (r = i.default) == null ? void 0 : r.call(i);
+      return t ? t.reduce((l, n) => {
+        var d;
+        return n.type === Symbol.for("v-fgm") || n.type === Symbol.for("v-fgt") ? l + (((d = n.children) == null ? void 0 : d.length) ?? 0) : l + 1;
+      }, 0) : 0;
+    }), p = u(() => e.orientation !== "auto" ? e.orientation : h.value <= 2 ? "horizontal" : "vertical");
+    return g(D, {
+      modelValue: a(e, "modelValue"),
+      color: a(e, "color"),
+      disabled: a(e, "disabled"),
+      readonly: a(e, "readonly"),
+      toggle(t) {
+        if (e.disabled || e.readonly) return;
+        const r = [...e.modelValue], l = r.indexOf(t);
+        l >= 0 ? r.splice(l, 1) : r.push(t), m("update:modelValue", r);
+      }
+    }), (t, r) => v((c(), s("div", {
+      role: "group",
+      "aria-label": o.label,
+      "aria-invalid": o.error || void 0,
+      class: k(["cui-checkbox-group", [
+        `cui-checkbox-group--${p.value}`,
+        { "cui-checkbox-group--error": o.error }
+      ]])
+    }, [
+      x("div", w, [
+        V(t.$slots, "default", {}, void 0, !0)
+      ]),
+      o.error && o.errorMessage ? (c(), s("div", z, C(o.errorMessage), 1)) : S("", !0)
+    ], 10, M)), [
+      [B, !o.hidden]
+    ]);
+  }
+});
+export {
+  N as default
+};