@itguy614/clean-ui 0.9.0 → 1.0.1

package/dist/components/CuiRadioGroup.vue2.js

@@ -0,0 +1,78 @@
+import { defineComponent as S, computed as s, useSlots as w, provide as B, toRef as i, withDirectives as C, openBlock as c, createElementBlock as f, normalizeClass as V, createElementVNode as z, createBlock as A, withCtx as D, renderSlot as m, toDisplayString as x, createCommentVNode as M, vShow as N } from "vue";
+import R from "./CuiButtonGroup.vue.js";
+import { RadioGroupKey as $ } from "./radio-context.js";
+const E = ["aria-label", "aria-invalid"], G = { class: "cui-radio-group__options" }, I = {
+  key: 0,
+  class: "cui-radio-group__error"
+}, T = /* @__PURE__ */ S({
+  __name: "CuiRadioGroup",
+  props: {
+    modelValue: { type: [String, Number, Boolean] },
+    name: {},
+    orientation: { default: "auto" },
+    variant: { default: "default" },
+    readonly: { type: Boolean, default: !1 },
+    error: { type: Boolean, default: !1 },
+    errorMessage: {},
+    label: {},
+    hidden: { type: Boolean, default: !1 },
+    color: { default: "primary" },
+    size: { default: "md" },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue"],
+  setup(r, { emit: v }) {
+    const e = r, y = v, b = s(() => e.name ?? `cui-radio-${Math.random().toString(36).slice(2, 8)}`), d = w(), g = s(() => {
+      var n;
+      const t = (n = d.default) == null ? void 0 : n.call(d);
+      return t ? t.reduce((u, o) => {
+        var a;
+        return o.type === Symbol.for("v-fgm") || o.type === Symbol.for("v-fgt") ? u + (((a = o.children) == null ? void 0 : a.length) ?? 0) : u + 1;
+      }, 0) : 0;
+    }), p = s(() => e.variant === "buttons" ? "horizontal" : e.orientation !== "auto" ? e.orientation : g.value <= 2 ? "horizontal" : "vertical");
+    B($, {
+      modelValue: i(e, "modelValue"),
+      name: b.value,
+      color: i(e, "color"),
+      disabled: i(e, "disabled"),
+      readonly: i(e, "readonly"),
+      variant: i(e, "variant"),
+      size: i(e, "size"),
+      select(t) {
+        e.disabled || e.readonly || y("update:modelValue", t);
+      }
+    });
+    function h(t) {
+      if (e.disabled || e.readonly) return;
+      const n = t.currentTarget, u = e.variant === "buttons" ? "button.cui-radio-button:not(:disabled)" : '[role="radio"]:not([aria-disabled="true"])', o = Array.from(n.querySelectorAll(u)), a = o.findIndex((k) => k === document.activeElement);
+      let l = -1;
+      t.key === "ArrowDown" || t.key === "ArrowRight" ? (t.preventDefault(), l = a < o.length - 1 ? a + 1 : 0) : (t.key === "ArrowUp" || t.key === "ArrowLeft") && (t.preventDefault(), l = a > 0 ? a - 1 : o.length - 1), l >= 0 && (o[l].focus(), o[l].click());
+    }
+    return (t, n) => C((c(), f("div", {
+      role: "radiogroup",
+      "aria-label": r.label,
+      "aria-invalid": r.error || void 0,
+      class: V(["cui-radio-group", [
+        r.variant !== "buttons" ? `cui-radio-group--${p.value}` : "",
+        { "cui-radio-group--error": r.error },
+        { "cui-radio-group--buttons": r.variant === "buttons" }
+      ]]),
+      onKeydown: h
+    }, [
+      z("div", G, [
+        r.variant === "buttons" ? (c(), A(R, { key: 0 }, {
+          default: D(() => [
+            m(t.$slots, "default", {}, void 0, !0)
+          ]),
+          _: 3
+        })) : m(t.$slots, "default", { key: 1 }, void 0, !0)
+      ]),
+      r.error && r.errorMessage ? (c(), f("div", I, x(r.errorMessage), 1)) : M("", !0)
+    ], 42, E)), [
+      [N, !r.hidden]
+    ]);
+  }
+});
+export {
+  T as default
+};

package/dist/components/CuiRating.vue.js

@@ -0,0 +1,129 @@
+import { defineComponent as D, ref as h, computed as b, useTemplateRef as T, withDirectives as M, openBlock as i, createElementBlock as u, normalizeStyle as c, toDisplayString as p, createCommentVNode as S, createElementVNode as W, Fragment as P, renderList as X, createVNode as O, vShow as U } from "vue";
+import { clampSize as Z, scaleDensity as v } from "../utils/sizing.js";
+import $ from "./CuiIcon.vue.js";
+const j = ["onClick", "onMousemove"], J = /* @__PURE__ */ D({
+  __name: "CuiRating",
+  props: {
+    modelValue: { default: 0 },
+    max: { default: 5 },
+    half: { type: Boolean, default: !1 },
+    icon: { default: "star" },
+    halfIcon: { default: "star-half" },
+    readonly: { type: Boolean, default: !1 },
+    showValue: { type: Boolean, default: !1 },
+    label: {},
+    clearable: { type: Boolean, default: !0 },
+    hidden: { type: Boolean, default: !1 },
+    color: { default: "warning" },
+    size: { default: "md" },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue"],
+  setup(o, { expose: V, emit: z }) {
+    const l = o, f = z, r = h(0), s = h(!1), C = b(
+      () => s.value && !l.readonly && !l.disabled ? r.value : l.modelValue
+    ), k = ["sm", "md", "lg", "xl"], B = {
+      sm: { iconSize: "1rem", gap: v("0.125rem"), valueFont: "0.75rem", labelFont: "0.75rem" },
+      md: { iconSize: "1.375rem", gap: v("0.1875rem"), valueFont: "0.875rem", labelFont: "0.8125rem" },
+      lg: { iconSize: "1.75rem", gap: v("0.25rem"), valueFont: "1rem", labelFont: "0.875rem" },
+      xl: { iconSize: "2.25rem", gap: v("0.375rem"), valueFont: "1.125rem", labelFont: "1rem" }
+    }, d = b(() => B[Z(l.size, k)]);
+    function y(e) {
+      const a = C.value;
+      return a >= e ? "filled" : l.half && a >= e - 0.5 ? "half" : "empty";
+    }
+    function F(e) {
+      return e === "half" ? l.halfIcon : l.icon;
+    }
+    function w(e) {
+      return e === "filled" || e === "half" ? "fill" : "regular";
+    }
+    function E(e) {
+      l.readonly || l.disabled || (l.clearable && l.modelValue === e ? f("update:modelValue", 0) : f("update:modelValue", e));
+    }
+    function I(e, a) {
+      if (l.readonly || l.disabled) return;
+      if (!l.half) {
+        E(e);
+        return;
+      }
+      const t = a.currentTarget.getBoundingClientRect(), g = a.clientX - t.left < t.width / 2 ? e - 0.5 : e;
+      l.clearable && l.modelValue === g ? f("update:modelValue", 0) : f("update:modelValue", g);
+    }
+    function x(e, a) {
+      if (!(l.readonly || l.disabled))
+        if (s.value = !0, l.half) {
+          const t = a.currentTarget.getBoundingClientRect(), n = a.clientX - t.left < t.width / 2;
+          r.value = n ? e - 0.5 : e;
+        } else
+          r.value = e;
+    }
+    function H() {
+      s.value = !1, r.value = 0;
+    }
+    function L(e) {
+      return e === "empty" ? "var(--cui-text-tertiary)" : `var(--cui-${l.color})`;
+    }
+    const m = T("rootEl");
+    function N(e) {
+      var a;
+      (a = m.value) == null || a.focus(e);
+    }
+    function R() {
+      var e;
+      (e = m.value) == null || e.blur();
+    }
+    return V({ el: m, focus: N, blur: R }), (e, a) => M((i(), u("div", {
+      ref_key: "rootEl",
+      ref: m
+    }, [
+      o.label ? (i(), u("label", {
+        key: 0,
+        style: c({ display: "block", marginBottom: "calc(0.25rem * var(--cui-density-scale, 1))", fontSize: d.value.labelFont, fontWeight: "500", color: "var(--cui-text-secondary)" })
+      }, p(o.label), 5)) : S("", !0),
+      W("div", {
+        style: c({
+          display: "inline-flex",
+          alignItems: "center",
+          gap: d.value.gap,
+          opacity: o.disabled ? "0.5" : "1"
+        }),
+        onMouseleave: H
+      }, [
+        (i(!0), u(P, null, X(o.max, (t) => (i(), u("div", {
+          key: t,
+          style: c({
+            cursor: o.readonly || o.disabled ? "default" : "pointer",
+            display: "inline-flex",
+            transition: "transform 0.1s ease",
+            transform: s.value && r.value >= t ? "scale(1.15)" : "scale(1)"
+          }),
+          onClick: (n) => I(t, n),
+          onMousemove: (n) => x(t, n)
+        }, [
+          O($, {
+            name: F(y(t)),
+            weight: w(y(t)),
+            size: d.value.iconSize,
+            style: c({ color: L(y(t)), transition: "color 0.1s ease" })
+          }, null, 8, ["name", "weight", "size", "style"])
+        ], 44, j))), 128)),
+        o.showValue ? (i(), u("span", {
+          key: 0,
+          style: c({
+            fontSize: d.value.valueFont,
+            fontWeight: "600",
+            color: "var(--cui-text-body)",
+            marginLeft: "calc(0.25rem * var(--cui-density-scale, 1))",
+            fontVariantNumeric: "tabular-nums"
+          })
+        }, p(o.modelValue), 5)) : S("", !0)
+      ], 36)
+    ], 512)), [
+      [U, !o.hidden]
+    ]);
+  }
+});
+export {
+  J as default
+};

package/dist/components/CuiRating.vue2.js

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

package/dist/components/CuiResizablePanels.vue.js

@@ -0,0 +1,147 @@
+import { defineComponent as M, ref as f, computed as i, onUnmounted as B, withDirectives as T, openBlock as W, createElementBlock as X, normalizeStyle as s, createElementVNode as p, renderSlot as S, createVNode as Y, vShow as j } from "vue";
+import N from "./CuiIcon.vue.js";
+const A = /* @__PURE__ */ M({
+  __name: "CuiResizablePanels",
+  props: {
+    orientation: { default: "horizontal" },
+    initialSize: { default: 50 },
+    minFirst: { default: 100 },
+    minSecond: { default: 100 },
+    collapseThreshold: { default: 0 },
+    hidden: { type: Boolean, default: !1 }
+  },
+  emits: ["resize", "collapse"],
+  setup(x, { emit: z }) {
+    const t = x, u = z, m = f(null), c = f(t.initialSize), l = f(!1), r = f(!1), n = i(() => t.orientation === "horizontal"), P = i(() => ({
+      display: "flex",
+      flexDirection: n.value ? "row" : "column",
+      width: "100%",
+      height: "100%",
+      overflow: "hidden"
+    })), k = i(() => r.value ? n.value ? { width: "0", minWidth: "0", overflow: "hidden" } : { height: "0", minHeight: "0", overflow: "hidden" } : n.value ? { width: `${c.value}%`, minWidth: `${t.minFirst}px`, overflow: "auto" } : { height: `${c.value}%`, minHeight: `${t.minFirst}px`, overflow: "auto" }), $ = i(() => ({
+      flex: "1",
+      minWidth: n.value ? `${t.minSecond}px` : void 0,
+      minHeight: n.value ? void 0 : `${t.minSecond}px`,
+      overflow: "auto"
+    })), d = f(!1), E = i(() => {
+      l.value || d.value;
+      const e = {
+        flexShrink: "0",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "transparent",
+        userSelect: "none",
+        zIndex: "1",
+        position: "relative"
+      };
+      return n.value ? (e.width = "9px", e.cursor = "col-resize") : (e.height = "9px", e.cursor = "row-resize"), e;
+    }), R = i(() => {
+      const e = l.value || d.value;
+      return n.value ? {
+        position: "absolute",
+        top: "0",
+        bottom: "0",
+        left: "50%",
+        transform: "translateX(-50%)",
+        width: e ? "3px" : "1px",
+        background: e ? "var(--cui-primary)" : "var(--cui-border)",
+        borderRadius: "1px",
+        transition: "width 0.15s ease, background 0.15s ease"
+      } : {
+        position: "absolute",
+        left: "0",
+        right: "0",
+        top: "50%",
+        transform: "translateY(-50%)",
+        height: e ? "3px" : "1px",
+        background: e ? "var(--cui-primary)" : "var(--cui-border)",
+        borderRadius: "1px",
+        transition: "height 0.15s ease, background 0.15s ease"
+      };
+    }), C = i(() => ({
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      position: "absolute",
+      top: "50%",
+      left: "50%",
+      transform: "translate(-50%, -50%)",
+      zIndex: "2",
+      opacity: l.value || d.value ? "0.8" : "0.35",
+      transition: "opacity 0.15s ease",
+      background: "var(--cui-surface-base, white)",
+      borderRadius: "3px",
+      padding: "2px"
+    }));
+    i(() => ({
+      width: "3px",
+      height: "3px",
+      borderRadius: "50%",
+      background: "var(--cui-text-secondary)"
+    }));
+    let y = 0, b = 0;
+    function L(e) {
+      m.value && (e.preventDefault(), l.value = !0, y = n.value ? e.clientX : e.clientY, b = c.value, document.addEventListener("pointermove", h), document.addEventListener("pointerup", g));
+    }
+    function h(e) {
+      if (!m.value || !l.value) return;
+      const o = m.value.getBoundingClientRect(), a = n.value ? o.width : o.height, F = ((n.value ? e.clientX : e.clientY) - y) / a * 100;
+      let v = b + F;
+      const H = t.minFirst / a * 100, I = t.minSecond / a * 100;
+      if (v = Math.max(H, Math.min(100 - I, v)), t.collapseThreshold > 0) {
+        const w = v / 100 * a;
+        w < t.collapseThreshold && !r.value ? (r.value = !0, u("collapse", !0)) : w >= t.collapseThreshold && r.value && (r.value = !1, u("collapse", !1));
+      }
+      c.value = v, u("resize", v);
+    }
+    function g() {
+      l.value = !1, document.removeEventListener("pointermove", h), document.removeEventListener("pointerup", g);
+    }
+    function D() {
+      c.value = t.initialSize, r.value = !1, u("resize", t.initialSize), u("collapse", !1);
+    }
+    return B(() => {
+      document.removeEventListener("pointermove", h), document.removeEventListener("pointerup", g);
+    }), (e, o) => T((W(), X("div", {
+      ref_key: "containerRef",
+      ref: m,
+      style: s(P.value)
+    }, [
+      p("div", {
+        style: s(k.value)
+      }, [
+        S(e.$slots, "first")
+      ], 4),
+      p("div", {
+        style: s(E.value),
+        onPointerdown: L,
+        onDblclick: D,
+        onMouseenter: o[0] || (o[0] = (a) => d.value = !0),
+        onMouseleave: o[1] || (o[1] = (a) => d.value = !1)
+      }, [
+        p("div", {
+          style: s(R.value)
+        }, null, 4),
+        p("div", {
+          style: s(C.value)
+        }, [
+          Y(N, {
+            name: "dots-nine",
+            size: "1.25rem"
+          })
+        ], 4)
+      ], 36),
+      p("div", {
+        style: s($.value)
+      }, [
+        S(e.$slots, "second")
+      ], 4)
+    ], 4)), [
+      [j, !x.hidden]
+    ]);
+  }
+});
+export {
+  A as default
+};

package/dist/components/CuiResizablePanels.vue2.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"CuiSelect.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiSelect.vue"],"names":[],"mappings":"AA0uBA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAalH,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,cAAe,SAAQ,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB;IACpG,mDAAmD;IACnD,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;IAC7D,gFAAgF;IAChF,OAAO,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,GAAG,YAAY,CAAC,CAAC;IAChD,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wBAAwB;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kBAAkB;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oBAAoB;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,UAAU,CAAC;CACtB;AA4GD,iBAAS,IAAI,SAYZ;AAED,iBAAS,KAAK,SAGb;AAygBD,QAAA,IAAI,OAAO;;CAAU,EAAE,QAAQ;;CAAY,CAAE;AAC7C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC7C;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AA4C/C,QAAA,MAAM,eAAe;;;;;;;;;;;WA5rBX,OAAO;cAIJ,OAAO;;;;aAER,UAAU;aAVV,OAAO;;iBAJH,MAAM;eAER,OAAO;aANT,KAAK,CAAC,MAAM,GAAG,MAAM,GAAG,YAAY,CAAC;cAEpC,OAAO;mBAQF,MAAM;6EAusBtB,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":"CuiSelect.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiSelect.vue"],"names":[],"mappings":"AAgvBA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAalH,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,cAAe,SAAQ,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB;IACpG,mDAAmD;IACnD,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;IAC7D,gFAAgF;IAChF,OAAO,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,GAAG,YAAY,CAAC,CAAC;IAChD,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wBAAwB;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kBAAkB;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oBAAoB;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,UAAU,CAAC;CACtB;AA4GD,iBAAS,IAAI,SAYZ;AAED,iBAAS,KAAK,SAGb;AA+gBD,QAAA,IAAI,OAAO;;CAAU,EAAE,QAAQ;;CAAY,CAAE;AAC7C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC7C;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AA4C/C,QAAA,MAAM,eAAe;;;;;;;;;;;WAlsBX,OAAO;cAIJ,OAAO;;;;aAER,UAAU;aAVV,OAAO;;iBAJH,MAAM;eAER,OAAO;aANT,KAAK,CAAC,MAAM,GAAG,MAAM,GAAG,YAAY,CAAC;cAEpC,OAAO;mBAQF,MAAM;6EA6sBtB,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/components/CuiSelect.vue.js

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