@itguy614/clean-ui 0.9.0 → 1.0.1

package/dist/components/CuiSelect.vue2.js

@@ -0,0 +1,359 @@
+import { defineComponent as ie, computed as p, ref as k, onMounted as ne, onUnmounted as ue, withDirectives as re, openBlock as n, createElementBlock as u, createElementVNode as b, normalizeStyle as O, normalizeClass as L, Fragment as z, renderList as I, createTextVNode as S, toDisplayString as m, withModifiers as F, unref as H, createVNode as A, renderSlot as K, createBlock as C, createCommentVNode as f, Teleport as se, vShow as ce, nextTick as P } from "vue";
+import g from "./CuiIcon.vue.js";
+import { INPUT_SIZE_SCALE as de } from "../utils/sizing.js";
+import { useMessages as ve } from "../composables/useMessages.js";
+const me = { class: "cui-select-wrapper" }, fe = ["aria-expanded", "aria-disabled", "aria-invalid", "tabindex"], he = { class: "cui-select__value" }, pe = ["aria-label", "onClick"], ge = {
+  key: 1,
+  class: "cui-select__label"
+}, be = {
+  key: 2,
+  class: "cui-select__placeholder"
+}, ye = { class: "cui-select__actions" }, ke = ["aria-label"], _e = ["aria-multiselectable"], xe = {
+  key: 0,
+  class: "cui-select__loading"
+}, we = {
+  key: 1,
+  class: "cui-select__empty"
+}, Ve = {
+  key: 0,
+  class: "cui-select__group-header"
+}, ze = ["data-highlighted", "aria-selected", "aria-disabled", "onClick", "onMouseenter"], Se = {
+  key: 0,
+  class: "cui-select__check"
+}, Ae = { class: "cui-select__option-label" }, Ce = {
+  key: 0,
+  class: "cui-select__error"
+}, De = /* @__PURE__ */ ie({
+  __name: "CuiSelect",
+  props: {
+    modelValue: {},
+    options: { default: () => [] },
+    multiple: { type: Boolean, default: !1 },
+    placeholder: { default: "Select..." },
+    clearable: { type: Boolean, default: !1 },
+    loading: { type: Boolean, default: !1 },
+    noOptionsText: { default: "No options available" },
+    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"],
+  setup(a, { expose: Z, emit: G }) {
+    const J = {
+      none: "0",
+      sm: "0.25rem",
+      md: "var(--cui-button-radius, 0.375rem)",
+      lg: "0.5rem",
+      full: "9999px"
+    }, l = a, _ = G, h = p(
+      () => l.options.map(
+        (e) => typeof e == "object" ? e : { value: e, label: String(e) }
+      )
+    ), Q = p(() => {
+      const e = /* @__PURE__ */ new Map(), o = [];
+      for (const t of h.value)
+        t.group ? (e.has(t.group) || e.set(t.group, []), e.get(t.group).push(t)) : o.push(t);
+      const i = [];
+      o.length && i.push({ options: o });
+      for (const [t, c] of e)
+        i.push({ group: t, options: c });
+      return i;
+    }), d = p(
+      () => h.value.filter((e) => !e.disabled)
+    ), s = k(!1), r = k(-1), v = k(), E = k();
+    function $(e) {
+      return l.multiple ? Array.isArray(l.modelValue) && l.modelValue.includes(e) : l.modelValue === e;
+    }
+    function W() {
+      if (l.multiple && Array.isArray(l.modelValue))
+        return l.modelValue.map((e) => {
+          const o = h.value.find((i) => i.value === e);
+          return (o == null ? void 0 : o.label) ?? String(e);
+        });
+      if (l.modelValue != null) {
+        const e = h.value.find((o) => o.value === l.modelValue);
+        return e ? [e.label] : [String(l.modelValue)];
+      }
+      return [];
+    }
+    const X = p(W), R = p(() => l.multiple ? Array.isArray(l.modelValue) && l.modelValue.length > 0 : l.modelValue != null && l.modelValue !== ""), M = p(() => l.multiple || l.modelValue == null ? null : h.value.find((e) => e.value === l.modelValue) ?? null);
+    function Y() {
+      l.disabled || l.readonly || (s.value ? y() : B());
+    }
+    function B() {
+      l.disabled || l.readonly || (s.value = !0, r.value = -1, P(() => {
+        if (j(), !l.multiple && l.modelValue != null) {
+          const e = d.value.findIndex((o) => o.value === l.modelValue);
+          e >= 0 && (r.value = e);
+        }
+      }));
+    }
+    function y() {
+      s.value = !1, r.value = -1;
+    }
+    function T(e) {
+      if (!e.disabled)
+        if (l.multiple) {
+          const o = Array.isArray(l.modelValue) ? [...l.modelValue] : [], i = o.indexOf(e.value);
+          i >= 0 ? o.splice(i, 1) : o.push(e.value), _("update:modelValue", o);
+        } else
+          _("update:modelValue", e.value), y();
+    }
+    function ee(e) {
+      l.disabled || l.readonly || l.multiple && Array.isArray(l.modelValue) && _("update:modelValue", l.modelValue.filter((o) => o !== e));
+    }
+    function le() {
+      l.disabled || l.readonly || _("update:modelValue", l.multiple ? [] : null);
+    }
+    function te(e) {
+      var o;
+      if (!(l.disabled || l.readonly)) {
+        if (!s.value) {
+          (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), B());
+          return;
+        }
+        switch (e.key) {
+          case "ArrowDown":
+            e.preventDefault(), r.value = Math.min(
+              r.value + 1,
+              d.value.length - 1
+            ), x();
+            break;
+          case "ArrowUp":
+            e.preventDefault(), r.value = Math.max(r.value - 1, 0), x();
+            break;
+          case "Enter":
+          case " ":
+            e.preventDefault(), r.value >= 0 && r.value < d.value.length && T(d.value[r.value]);
+            break;
+          case "Escape":
+            e.preventDefault(), y(), (o = v.value) == null || o.focus();
+            break;
+          case "Home":
+            e.preventDefault(), r.value = 0, x();
+            break;
+          case "End":
+            e.preventDefault(), r.value = d.value.length - 1, x();
+            break;
+        }
+      }
+    }
+    function x() {
+      P(() => {
+        var o;
+        const e = (o = E.value) == null ? void 0 : o.querySelector("[data-highlighted]");
+        e == null || e.scrollIntoView({ block: "nearest" });
+      });
+    }
+    function N(e) {
+      var i, t;
+      const o = e.target;
+      (i = v.value) != null && i.contains(o) || (t = E.value) != null && t.contains(o) || y();
+    }
+    function w() {
+      s.value && j();
+    }
+    ne(() => {
+      document.addEventListener("mousedown", N), window.addEventListener("scroll", w, !0), window.addEventListener("resize", w);
+    }), ue(() => {
+      document.removeEventListener("mousedown", N), window.removeEventListener("scroll", w, !0), window.removeEventListener("resize", w);
+    });
+    const U = k({});
+    function j() {
+      if (!v.value) return;
+      const e = v.value.getBoundingClientRect(), o = window.innerHeight, i = o - e.bottom, t = i < 200 && e.top > i, c = Math.min(t ? e.top - 16 : i - 16, 300);
+      U.value = {
+        position: "fixed",
+        left: `${e.left}px`,
+        width: `${e.width}px`,
+        maxHeight: `${c}px`,
+        zIndex: "9990",
+        ...t ? { bottom: `${o - e.top + 4}px` } : { top: `${e.bottom + 4}px` }
+      };
+    }
+    Z({
+      el: v,
+      focus: () => {
+        var e;
+        return (e = v.value) == null ? void 0 : e.focus();
+      },
+      blur: () => {
+        var e;
+        return (e = v.value) == null ? void 0 : e.blur();
+      },
+      open: B,
+      close: y
+    });
+    const V = p(() => {
+      const e = de[l.size];
+      return { minHeight: e.height, px: e.px, fontSize: e.fontSize };
+    }), D = ve();
+    return (e, o) => re((n(), u("div", me, [
+      b("div", {
+        class: L(["cui-select", {
+          "cui-select--open": s.value,
+          "cui-select--error": a.error,
+          "cui-select--disabled": a.disabled
+        }]),
+        style: O({
+          "--_sel-min-height": V.value.minHeight,
+          "--_sel-px": V.value.px,
+          "--_sel-font-size": V.value.fontSize,
+          "--_sel-color": `var(--cui-${a.color})`,
+          "--_sel-focus-ring": `var(--cui-${a.color}-focus-ring)`,
+          "--_sel-border": a.error ? "var(--cui-error)" : "var(--cui-border-strong)",
+          "--_sel-focus-border": a.error ? "var(--cui-error)" : `var(--cui-${a.color})`
+        })
+      }, [
+        b("div", {
+          ref_key: "triggerRef",
+          ref: v,
+          class: "cui-select__trigger",
+          style: O({ borderRadius: J[a.rounded] }),
+          role: "combobox",
+          "aria-expanded": s.value,
+          "aria-haspopup": "listbox",
+          "aria-disabled": a.disabled || a.readonly || void 0,
+          "aria-invalid": a.error || void 0,
+          tabindex: a.disabled ? -1 : 0,
+          onClick: Y,
+          onKeydown: te
+        }, [
+          b("div", he, [
+            a.multiple && Array.isArray(a.modelValue) && a.modelValue.length > 0 ? (n(!0), u(z, { key: 0 }, I(a.modelValue, (i) => {
+              var t;
+              return n(), u("span", {
+                key: String(i),
+                class: "cui-select__chip"
+              }, [
+                S(m(((t = h.value.find((c) => c.value === i)) == null ? void 0 : t.label) ?? i) + " ", 1),
+                b("button", {
+                  type: "button",
+                  class: "cui-select__chip-remove",
+                  tabindex: "-1",
+                  "aria-label": H(D).remove,
+                  onClick: F((c) => ee(i), ["stop"])
+                }, [
+                  A(g, {
+                    name: "x",
+                    size: "0.75rem"
+                  })
+                ], 8, pe)
+              ]);
+            }), 128)) : !a.multiple && R.value ? (n(), u("span", ge, [
+              K(e.$slots, "selected", { option: M.value }, () => {
+                var i;
+                return [
+                  (i = M.value) != null && i.icon ? (n(), C(g, {
+                    key: 0,
+                    name: M.value.icon,
+                    size: "sm",
+                    class: "cui-select__option-icon"
+                  }, null, 8, ["name"])) : f("", !0),
+                  S(" " + m(X.value[0]), 1)
+                ];
+              }, !0)
+            ])) : (n(), u("span", be, m(a.placeholder), 1))
+          ]),
+          b("div", ye, [
+            a.clearable && R.value && !a.disabled && !a.readonly ? (n(), u("button", {
+              key: 0,
+              type: "button",
+              class: "cui-select__clear",
+              tabindex: "-1",
+              "aria-label": H(D).clear,
+              onClick: F(le, ["stop"])
+            }, [
+              A(g, {
+                name: "x",
+                size: "0.75rem"
+              })
+            ], 8, ke)) : f("", !0),
+            A(g, {
+              name: "caret-down",
+              size: "1rem",
+              class: L(["cui-select__chevron", { "cui-select__chevron--open": s.value }])
+            }, null, 8, ["class"])
+          ])
+        ], 44, fe)
+      ], 6),
+      (n(), C(se, { to: "body" }, [
+        s.value ? (n(), u("div", {
+          key: 0,
+          ref_key: "dropdownRef",
+          ref: E,
+          class: "cui-select__dropdown",
+          role: "listbox",
+          "aria-multiselectable": a.multiple || void 0,
+          style: O([
+            U.value,
+            {
+              "--_sel-color": `var(--cui-${a.color})`,
+              "--_sel-font-size": V.value.fontSize
+            }
+          ])
+        }, [
+          a.loading ? (n(), u("div", xe, [
+            A(g, {
+              name: "spinner-gap",
+              size: "1rem",
+              class: "cui-select__spinner"
+            }),
+            S(" " + m(H(D).loading), 1)
+          ])) : h.value.length === 0 ? (n(), u("div", we, m(a.noOptionsText), 1)) : (n(!0), u(z, { key: 2 }, I(Q.value, (i) => (n(), u(z, {
+            key: i.group ?? "__ungrouped"
+          }, [
+            i.group ? (n(), u("div", Ve, m(i.group), 1)) : f("", !0),
+            (n(!0), u(z, null, I(i.options, (t) => {
+              var c, q;
+              return n(), u("div", {
+                key: String(t.value),
+                class: L(["cui-select__option", {
+                  "cui-select__option--selected": $(t.value),
+                  "cui-select__option--highlighted": ((c = d.value[r.value]) == null ? void 0 : c.value) === t.value,
+                  "cui-select__option--disabled": t.disabled
+                }]),
+                "data-highlighted": ((q = d.value[r.value]) == null ? void 0 : q.value) === t.value ? "" : void 0,
+                role: "option",
+                "aria-selected": $(t.value),
+                "aria-disabled": t.disabled || void 0,
+                onClick: (ae) => T(t),
+                onMouseenter: (ae) => r.value = d.value.findIndex((oe) => oe.value === t.value)
+              }, [
+                a.multiple ? (n(), u("span", Se, [
+                  $(t.value) ? (n(), C(g, {
+                    key: 0,
+                    name: "check",
+                    size: "1rem"
+                  })) : f("", !0)
+                ])) : f("", !0),
+                b("span", Ae, [
+                  K(e.$slots, "option", { option: t }, () => [
+                    t.icon ? (n(), C(g, {
+                      key: 0,
+                      name: t.icon,
+                      size: "sm",
+                      class: "cui-select__option-icon"
+                    }, null, 8, ["name"])) : f("", !0),
+                    S(" " + m(t.label), 1)
+                  ], !0)
+                ])
+              ], 42, ze);
+            }), 128))
+          ], 64))), 128))
+        ], 12, _e)) : f("", !0)
+      ])),
+      a.error && a.errorMessage ? (n(), u("div", Ce, m(a.errorMessage), 1)) : f("", !0)
+    ], 512)), [
+      [ce, !a.hidden]
+    ]);
+  }
+});
+export {
+  De as default
+};

package/dist/components/CuiSkeleton.vue.js

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

package/dist/components/CuiSkeleton.vue2.js

@@ -0,0 +1,80 @@
+import { defineComponent as f, computed as o, withDirectives as b, openBlock as i, createElementBlock as l, unref as y, Fragment as v, renderList as g, normalizeStyle as n, normalizeClass as s, vShow as _ } from "vue";
+import { useMessages as w } from "../composables/useMessages.js";
+const x = ["aria-label"], L = {
+  key: 0,
+  class: "cui-skeleton__text"
+}, B = /* @__PURE__ */ f({
+  __name: "CuiSkeleton",
+  props: {
+    variant: { default: "text" },
+    animation: { default: "shimmer" },
+    lines: { default: 3 },
+    lastLineWidth: { default: "60%" },
+    width: { default: "100%" },
+    height: { default: "1rem" },
+    size: { default: "3rem" },
+    rounded: { default: "sm" },
+    hidden: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    const t = e, r = {
+      none: "0",
+      sm: "0.25rem",
+      md: "0.5rem",
+      lg: "0.75rem",
+      full: "9999px"
+    }, c = o(() => ({
+      width: t.width,
+      height: t.height,
+      borderRadius: r[t.rounded]
+    })), m = o(() => ({
+      width: t.size,
+      height: t.size,
+      borderRadius: "50%"
+    }));
+    function d(a) {
+      return {
+        width: a === t.lines - 1 && t.lines > 1 ? t.lastLineWidth : "100%",
+        height: "0.75rem",
+        borderRadius: "0.25rem"
+      };
+    }
+    const h = w();
+    return (a, k) => b((i(), l("div", {
+      role: "status",
+      "aria-busy": "true",
+      "aria-label": y(h).skeleton.label,
+      class: "cui-skeleton"
+    }, [
+      e.variant === "text" ? (i(), l("div", L, [
+        (i(!0), l(v, null, g(e.lines, (u) => (i(), l("div", {
+          key: u,
+          class: s(["cui-skeleton__line", {
+            "cui-skeleton__line--shimmer": e.animation === "shimmer",
+            "cui-skeleton__line--pulse": e.animation === "pulse"
+          }]),
+          style: n(d(u - 1))
+        }, null, 6))), 128))
+      ])) : e.variant === "rectangle" ? (i(), l("div", {
+        key: 1,
+        class: s(["cui-skeleton__block", {
+          "cui-skeleton__block--shimmer": e.animation === "shimmer",
+          "cui-skeleton__block--pulse": e.animation === "pulse"
+        }]),
+        style: n(c.value)
+      }, null, 6)) : (i(), l("div", {
+        key: 2,
+        class: s(["cui-skeleton__block", {
+          "cui-skeleton__block--shimmer": e.animation === "shimmer",
+          "cui-skeleton__block--pulse": e.animation === "pulse"
+        }]),
+        style: n(m.value)
+      }, null, 6))
+    ], 8, x)), [
+      [_, !e.hidden]
+    ]);
+  }
+});
+export {
+  B as default
+};

package/dist/components/CuiSlideover.vue.js

@@ -0,0 +1,109 @@
+import { defineComponent as z, useTemplateRef as S, computed as i, openBlock as a, createBlock as N, Teleport as I, unref as o, withDirectives as O, createElementBlock as u, createVNode as n, createElementVNode as $, normalizeStyle as D, Fragment as E, withCtx as V, renderSlot as p, vShow as M, createCommentVNode as R } from "vue";
+import { useOverlay as G } from "../composables/useOverlay.js";
+import H from "./CuiBackdrop.vue.js";
+import K from "./CuiModalHeader.vue.js";
+import T from "./CuiModalBody.vue.js";
+const X = ["aria-labelledby"], j = /* @__PURE__ */ z({
+  __name: "CuiSlideover",
+  props: {
+    visible: { type: Boolean, default: !1 },
+    side: { default: "right" },
+    size: { default: "md" },
+    title: {},
+    persistent: { type: Boolean, default: !1 },
+    noCloseButton: { type: Boolean, default: !1 },
+    allowNested: { type: Boolean, default: !1 },
+    backdropOpacity: { default: 0.5 },
+    backdropBlur: { default: "none" },
+    backdropColor: { default: "black" },
+    backdropImage: {},
+    backdropGradient: {},
+    hidden: { type: Boolean, default: !1 }
+  },
+  emits: ["update:visible", "close"],
+  setup(l, { emit: b }) {
+    const t = l, s = b, v = S("panelEl"), { isVisible: h, isAnimating: r, closeOverlay: y, onBackdropClick: g, onKeydown: d } = G({
+      open: () => t.visible,
+      dialogRef: v,
+      persistent: () => t.persistent,
+      allowNested: () => t.allowNested,
+      animationDuration: 250,
+      onUpdateOpen: (e) => s("update:visible", e),
+      onClose: () => s("close")
+    }), c = i(() => t.side === "left" || t.side === "right"), k = {
+      sm: "20rem",
+      // 320px
+      md: "28rem",
+      // 448px
+      lg: "36rem",
+      // 576px
+      xl: "48rem",
+      // 768px
+      full: "100vw"
+    }, w = {
+      sm: "25vh",
+      md: "40vh",
+      lg: "60vh",
+      xl: "80vh",
+      full: "100vh"
+    }, f = i(() => (c.value ? k : w)[t.size] ?? t.size), C = i(() => {
+      const e = {
+        position: "absolute",
+        zIndex: "2",
+        display: "flex",
+        flexDirection: "column",
+        background: "var(--cui-surface-base)",
+        boxShadow: "0 16px 48px rgb(0 0 0 / 0.15)",
+        outline: "none",
+        overflow: "hidden",
+        transition: "transform 0.25s ease"
+      };
+      return c.value ? (e.width = f.value, e.maxWidth = t.size === "full" ? "100vw" : "calc(100vw - 2rem)", e.top = "0", e.height = "100%") : (e.height = f.value, e.maxHeight = t.size === "full" ? "100vh" : "calc(100vh - 2rem)", e.left = "0", e.width = "100%"), t.side === "right" ? e.right = "0" : t.side === "left" ? e.left = "0" : t.side === "top" ? e.top = "0" : t.side === "bottom" && (e.bottom = "0"), r.value ? e.transform = "translate(0)" : t.side === "right" ? e.transform = "translateX(100%)" : t.side === "left" ? e.transform = "translateX(-100%)" : t.side === "top" ? e.transform = "translateY(-100%)" : t.side === "bottom" && (e.transform = "translateY(100%)"), e;
+    }), x = `cui-slideover-title-${Math.random().toString(36).slice(2, 8)}`;
+    return (e, m) => (a(), N(I, { to: "body" }, [
+      o(h) ? O((a(), u("div", {
+        key: 0,
+        style: { position: "fixed", inset: "0", zIndex: "9990" },
+        onKeydown: m[0] || (m[0] = //@ts-ignore
+        (...B) => o(d) && o(d)(...B))
+      }, [
+        n(H, {
+          visible: o(r),
+          opacity: l.backdropOpacity,
+          blur: l.backdropBlur,
+          color: l.backdropColor,
+          image: l.backdropImage,
+          gradient: l.backdropGradient,
+          onClick: o(g)
+        }, null, 8, ["visible", "opacity", "blur", "color", "image", "gradient", "onClick"]),
+        $("div", {
+          ref: "panelEl",
+          style: D(C.value),
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": l.title ? x : void 0,
+          tabindex: "-1"
+        }, [
+          l.title ? (a(), u(E, { key: 0 }, [
+            n(K, {
+              title: l.title,
+              "no-close-button": l.noCloseButton,
+              onClose: o(y)
+            }, null, 8, ["title", "no-close-button", "onClose"]),
+            n(T, null, {
+              default: V(() => [
+                p(e.$slots, "default")
+              ]),
+              _: 3
+            })
+          ], 64)) : p(e.$slots, "default", { key: 1 })
+        ], 12, X)
+      ], 544)), [
+        [M, !l.hidden]
+      ]) : R("", !0)
+    ]));
+  }
+});
+export {
+  j as default
+};

package/dist/components/CuiSlideover.vue2.js

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