@itguy614/clean-ui 0.9.0 → 1.0.1

package/dist/components/CuiCodeBlock.vue.js

@@ -0,0 +1,129 @@
+import { defineComponent as p, computed as c, withDirectives as x, openBlock as n, createElementBlock as i, normalizeStyle as l, toDisplayString as u, createBlock as L, createCommentVNode as m, createElementVNode as g, Fragment as h, renderList as y, vShow as k } from "vue";
+import { clampSize as z, scaleDensity as f } from "../utils/sizing.js";
+import H from "./CuiCopyButton.vue.js";
+const R = { style: {
+  borderRadius: "0.5rem",
+  overflow: "hidden",
+  border: "1px solid var(--cui-border)",
+  background: "var(--color-surface-950, #1a1a2e)"
+} }, B = { key: 1 }, E = /* @__PURE__ */ p({
+  __name: "CuiCodeBlock",
+  props: {
+    code: {},
+    language: {},
+    filename: {},
+    lineNumbers: { type: Boolean, default: !1 },
+    startLine: { default: 1 },
+    highlightLines: {},
+    copyable: { type: Boolean, default: !0 },
+    maxHeight: {},
+    hidden: { type: Boolean, default: !1 },
+    size: { default: "md" }
+  },
+  setup(e) {
+    const b = ["sm", "md", "lg"], o = e, d = c(() => o.code.split(`
+`)), S = {
+      sm: { fontSize: "0.75rem", lineHeight: "1.6", padding: f("0.75rem"), headerFont: "0.6875rem" },
+      md: { fontSize: "0.8125rem", lineHeight: "1.65", padding: f("1rem"), headerFont: "0.75rem" },
+      lg: { fontSize: "0.875rem", lineHeight: "1.7", padding: f("1.25rem"), headerFont: "0.8125rem" }
+    }, t = c(() => S[z(o.size, b)]), s = c(() => o.filename || o.language || ""), r = c(() => new Set(o.highlightLines ?? []));
+    return (F, w) => x((n(), i("div", R, [
+      s.value || e.copyable ? (n(), i("div", {
+        key: 0,
+        style: l({
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          padding: `calc(0.375rem * var(--cui-density-scale, 1)) ${t.value.padding}`,
+          background: "rgba(255,255,255,0.04)",
+          borderBottom: "1px solid rgba(255,255,255,0.06)"
+        })
+      }, [
+        s.value ? (n(), i("span", {
+          key: 0,
+          style: l({
+            fontSize: t.value.headerFont,
+            fontWeight: "500",
+            color: "var(--color-surface-400, #999)",
+            fontFamily: "var(--cui-font-mono, monospace)",
+            textTransform: e.language && !e.filename ? "uppercase" : "none",
+            letterSpacing: e.language && !e.filename ? "0.04em" : "normal"
+          })
+        }, u(s.value), 5)) : (n(), i("span", B)),
+        e.copyable ? (n(), L(H, {
+          key: 2,
+          value: e.code,
+          size: "xs",
+          variant: "ghost",
+          style: { color: "var(--color-surface-400, #999)" }
+        }, null, 8, ["value"])) : m("", !0)
+      ], 4)) : m("", !0),
+      g("div", {
+        style: l({
+          overflow: "auto",
+          maxHeight: e.maxHeight || void 0
+        })
+      }, [
+        g("div", {
+          style: l({
+            display: "flex",
+            padding: `${t.value.padding} 0`,
+            minWidth: "fit-content"
+          })
+        }, [
+          e.lineNumbers ? (n(), i("div", {
+            key: 0,
+            style: l({
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "flex-end",
+              paddingRight: "calc(0.75rem * var(--cui-density-scale, 1))",
+              paddingLeft: t.value.padding,
+              borderRight: "1px solid rgba(255,255,255,0.06)",
+              marginRight: "calc(0.75rem * var(--cui-density-scale, 1))",
+              userSelect: "none",
+              flexShrink: "0"
+            })
+          }, [
+            (n(!0), i(h, null, y(d.value, (v, a) => (n(), i("span", {
+              key: a,
+              style: l({
+                fontSize: t.value.fontSize,
+                lineHeight: t.value.lineHeight,
+                fontFamily: "var(--cui-font-mono, monospace)",
+                color: r.value.has(e.startLine + a) ? "var(--color-surface-200, #ccc)" : "var(--color-surface-600, #555)",
+                minWidth: `${String(e.startLine + d.value.length - 1).length}ch`
+              })
+            }, u(e.startLine + a), 5))), 128))
+          ], 4)) : m("", !0),
+          g("div", {
+            style: l({ flex: "1", paddingRight: t.value.padding, paddingLeft: e.lineNumbers ? "0" : t.value.padding })
+          }, [
+            (n(!0), i(h, null, y(d.value, (v, a) => (n(), i("div", {
+              key: a,
+              style: l({
+                fontSize: t.value.fontSize,
+                lineHeight: t.value.lineHeight,
+                fontFamily: "var(--cui-font-mono, monospace)",
+                color: "var(--color-surface-200, #e0e0e0)",
+                whiteSpace: "pre",
+                background: r.value.has(e.startLine + a) ? "rgba(255,255,255,0.06)" : "transparent",
+                marginLeft: r.value.has(e.startLine + a) ? "calc(-0.5rem * var(--cui-density-scale, 1))" : "0",
+                marginRight: r.value.has(e.startLine + a) ? "calc(-0.5rem * var(--cui-density-scale, 1))" : "0",
+                paddingLeft: r.value.has(e.startLine + a) ? "calc(0.5rem * var(--cui-density-scale, 1))" : "0",
+                paddingRight: r.value.has(e.startLine + a) ? "calc(0.5rem * var(--cui-density-scale, 1))" : "0",
+                borderLeft: r.value.has(e.startLine + a) ? "2px solid var(--cui-primary)" : "2px solid transparent",
+                borderRadius: "2px"
+              })
+            }, u(v || " "), 5))), 128))
+          ], 4)
+        ], 4)
+      ], 4)
+    ], 512)), [
+      [k, !e.hidden]
+    ]);
+  }
+});
+export {
+  E as default
+};

package/dist/components/CuiCodeBlock.vue2.js

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

package/dist/components/CuiColorPicker.vue.js

@@ -0,0 +1,348 @@
+import { defineComponent as pe, ref as s, computed as p, watch as he, onMounted as J, onUnmounted as me, useTemplateRef as Q, withDirectives as _, openBlock as d, createElementBlock as c, normalizeStyle as r, withModifiers as B, createElementVNode as l, createCommentVNode as h, withKeys as ge, vModelText as be, createBlock as xe, withCtx as ye, createTextVNode as we, toDisplayString as ke, Fragment as Se, renderList as Ee, vShow as Re } from "vue";
+import { clampSize as ze } from "../utils/sizing.js";
+import Pe from "./CuiButton.vue.js";
+import { hsvToRgb as ee, rgbToHex as Ce, formatColor as Le, getThemePalette as Me, PALETTE_BASIC as Te, PALETTE_MATERIAL as He, PALETTE_TAILWIND as Be, parseColor as A, rgbToHsv as $ } from "../utils/color.js";
+const Ae = {
+  key: 0,
+  style: { display: "flex", gap: "calc(0.625rem * var(--cui-density-scale, 1))", alignItems: "center" }
+}, $e = { style: { flex: "1", display: "flex", flexDirection: "column", gap: "calc(0.5rem * var(--cui-density-scale, 1))" } }, De = {
+  key: 1,
+  style: { display: "flex", gap: "calc(0.375rem * var(--cui-density-scale, 1))", alignItems: "center" }
+}, Ve = {
+  key: 2,
+  style: { display: "flex", flexWrap: "wrap", gap: "calc(0.3125rem * var(--cui-density-scale, 1))" }
+}, Fe = ["onClick"], te = "repeating-conic-gradient(#d0d0d0 0% 25%, transparent 0% 50%) 0 0 / 12px 12px", Ge = /* @__PURE__ */ pe({
+  __name: "CuiColorPicker",
+  props: {
+    modelValue: { default: "#000000" },
+    format: { default: "hex" },
+    palette: {},
+    presetPalette: {},
+    showAlpha: { type: Boolean, default: !1 },
+    showInput: { type: Boolean, default: !0 },
+    showFormatToggle: { type: Boolean, default: !0 },
+    swatchOnly: { type: Boolean, default: !1 },
+    hidden: { type: Boolean, default: !1 },
+    size: { default: "md" },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue"],
+  setup(a, { expose: ne, emit: oe }) {
+    const re = ["sm", "md", "lg"], n = a, ie = oe, v = s(0), m = s(1), g = s(1), u = s(1), S = s(n.format), f = s(""), ae = {
+      sm: { width: "220px", gradientHeight: "130px", sliderHeight: "10px", thumbSize: "14px", swatchSize: "20px", fontSize: "0.75rem" },
+      md: { width: "280px", gradientHeight: "160px", sliderHeight: "12px", thumbSize: "16px", swatchSize: "24px", fontSize: "0.8125rem" },
+      lg: { width: "340px", gradientHeight: "200px", sliderHeight: "14px", thumbSize: "18px", swatchSize: "28px", fontSize: "0.875rem" }
+    }, i = p(() => ae[ze(n.size, re)]), b = p(() => ee(v.value, m.value, g.value)), x = p(() => Ce(b.value.r, b.value.g, b.value.b)), D = p(() => {
+      const { r: e, g: t, b: o } = b.value;
+      return u.value < 1 ? `rgba(${e}, ${t}, ${o}, ${u.value.toFixed(2)})` : x.value;
+    }), y = p(() => {
+      const { r: e, g: t, b: o } = b.value;
+      return Le(e, t, o, u.value, S.value);
+    });
+    function V() {
+      const e = A(n.modelValue);
+      if (e) {
+        const t = $(e.r, e.g, e.b);
+        v.value = t.h, m.value = t.s, g.value = t.v, u.value = e.a, f.value = y.value;
+      }
+    }
+    he(() => n.modelValue, V), J(V);
+    const F = s(0);
+    let w = null;
+    J(() => {
+      n.presetPalette === "theme" && typeof MutationObserver < "u" && (w = new MutationObserver(() => {
+        F.value++;
+      }), w.observe(document.documentElement, { attributes: !0, attributeFilter: ["class"] }));
+    }), me(() => {
+      w == null || w.disconnect();
+    });
+    function k() {
+      f.value = y.value, ie("update:modelValue", y.value);
+    }
+    const I = p(() => n.palette ? n.palette : n.presetPalette === "theme" ? (F.value, Me()) : n.presetPalette === "basic" ? Te : n.presetPalette === "material" ? He : n.presetPalette === "tailwind" ? Be : []), P = s(null);
+    let C = !1;
+    function le(e) {
+      n.disabled || (C = !0, W(e), document.addEventListener("pointermove", O), document.addEventListener("pointerup", U));
+    }
+    function O(e) {
+      C && W(e);
+    }
+    function U() {
+      C = !1, document.removeEventListener("pointermove", O), document.removeEventListener("pointerup", U);
+    }
+    function W(e) {
+      if (!P.value) return;
+      const t = P.value.getBoundingClientRect();
+      m.value = Math.max(0, Math.min(1, (e.clientX - t.left) / t.width)), g.value = Math.max(0, Math.min(1, 1 - (e.clientY - t.top) / t.height)), k();
+    }
+    const L = s(null);
+    let M = !1;
+    function ue(e) {
+      n.disabled || (M = !0, X(e), document.addEventListener("pointermove", G), document.addEventListener("pointerup", N));
+    }
+    function G(e) {
+      M && X(e);
+    }
+    function N() {
+      M = !1, document.removeEventListener("pointermove", G), document.removeEventListener("pointerup", N);
+    }
+    function X(e) {
+      if (!L.value) return;
+      const t = L.value.getBoundingClientRect();
+      v.value = Math.max(0, Math.min(360, (e.clientX - t.left) / t.width * 360)), k();
+    }
+    const T = s(null);
+    let H = !1;
+    function se(e) {
+      n.disabled || (H = !0, Z(e), document.addEventListener("pointermove", K), document.addEventListener("pointerup", Y));
+    }
+    function K(e) {
+      H && Z(e);
+    }
+    function Y() {
+      H = !1, document.removeEventListener("pointermove", K), document.removeEventListener("pointerup", Y);
+    }
+    function Z(e) {
+      if (!T.value) return;
+      const t = T.value.getBoundingClientRect();
+      u.value = Math.max(0, Math.min(1, (e.clientX - t.left) / t.width)), u.value = Math.round(u.value * 100) / 100, k();
+    }
+    function j() {
+      const e = A(f.value);
+      if (e) {
+        const t = $(e.r, e.g, e.b);
+        v.value = t.h, m.value = t.s, g.value = t.v, u.value = e.a, k();
+      } else
+        f.value = y.value;
+    }
+    function de() {
+      const e = ["hex", "rgb", "hsl"], t = e.indexOf(S.value);
+      S.value = e[(t + 1) % e.length], f.value = y.value;
+    }
+    function ce(e) {
+      if (n.disabled) return;
+      const t = A(e);
+      if (t) {
+        const o = $(t.r, t.g, t.b);
+        v.value = o.h, m.value = o.s, g.value = o.v, u.value = t.a, k();
+      }
+    }
+    const q = p(() => {
+      const e = ee(v.value, 1, 1);
+      return `rgb(${e.r}, ${e.g}, ${e.b})`;
+    }), E = Q("rootEl"), R = Q("inputEl");
+    function ve(e) {
+      var t;
+      R.value ? R.value.focus(e) : (t = E.value) == null || t.focus(e);
+    }
+    function fe() {
+      var e;
+      R.value ? R.value.blur() : (e = E.value) == null || e.blur();
+    }
+    return ne({ el: E, focus: ve, blur: fe }), (e, t) => _((d(), c("div", {
+      ref_key: "rootEl",
+      ref: E,
+      style: r({
+        width: i.value.width,
+        opacity: a.disabled ? "0.5" : "1",
+        pointerEvents: a.disabled ? "none" : void 0,
+        userSelect: "none"
+      })
+    }, [
+      a.swatchOnly ? h("", !0) : (d(), c("div", {
+        key: 0,
+        ref_key: "gradientRef",
+        ref: P,
+        style: r({
+          position: "relative",
+          width: "100%",
+          height: i.value.gradientHeight,
+          borderRadius: "0.5rem 0.5rem 0 0",
+          cursor: "crosshair",
+          overflow: "hidden",
+          background: q.value
+        }),
+        onPointerdown: B(le, ["prevent"])
+      }, [
+        t[3] || (t[3] = l("div", { style: { position: "absolute", inset: "0", background: "linear-gradient(to right, white, transparent)" } }, null, -1)),
+        t[4] || (t[4] = l("div", { style: { position: "absolute", inset: "0", background: "linear-gradient(to bottom, transparent, black)" } }, null, -1)),
+        l("div", {
+          style: r({
+            position: "absolute",
+            left: `${m.value * 100}%`,
+            top: `${(1 - g.value) * 100}%`,
+            width: i.value.thumbSize,
+            height: i.value.thumbSize,
+            borderRadius: "50%",
+            border: "2px solid white",
+            boxShadow: "0 1px 4px rgba(0,0,0,0.3)",
+            transform: "translate(-50%, -50%)",
+            pointerEvents: "none"
+          })
+        }, null, 4)
+      ], 36)),
+      l("div", {
+        style: r({
+          padding: "calc(0.75rem * var(--cui-density-scale, 1))",
+          background: "var(--cui-surface-base, white)",
+          border: "1px solid var(--cui-border)",
+          borderTop: a.swatchOnly ? void 0 : "none",
+          borderRadius: a.swatchOnly ? "0.5rem" : "0 0 0.5rem 0.5rem",
+          display: "flex",
+          flexDirection: "column",
+          gap: "calc(0.625rem * var(--cui-density-scale, 1))"
+        })
+      }, [
+        a.swatchOnly ? h("", !0) : (d(), c("div", Ae, [
+          l("div", {
+            style: r({
+              width: "2rem",
+              height: "2rem",
+              borderRadius: "50%",
+              border: "1px solid var(--cui-border)",
+              flexShrink: "0",
+              background: te,
+              position: "relative",
+              overflow: "hidden"
+            })
+          }, [
+            l("div", {
+              style: r({ position: "absolute", inset: "0", borderRadius: "50%", background: D.value })
+            }, null, 4)
+          ], 4),
+          l("div", $e, [
+            l("div", {
+              ref_key: "hueRef",
+              ref: L,
+              style: r({
+                position: "relative",
+                height: i.value.sliderHeight,
+                borderRadius: "9999px",
+                cursor: "pointer",
+                background: "linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)"
+              }),
+              onPointerdown: B(ue, ["prevent"])
+            }, [
+              l("div", {
+                style: r({
+                  position: "absolute",
+                  left: `${v.value / 360 * 100}%`,
+                  top: "50%",
+                  width: i.value.thumbSize,
+                  height: i.value.thumbSize,
+                  borderRadius: "50%",
+                  border: "2px solid white",
+                  boxShadow: "0 1px 3px rgba(0,0,0,0.3)",
+                  transform: "translate(-50%, -50%)",
+                  pointerEvents: "none",
+                  background: q.value
+                })
+              }, null, 4)
+            ], 36),
+            a.showAlpha ? (d(), c("div", {
+              key: 0,
+              ref_key: "alphaRef",
+              ref: T,
+              style: r({
+                position: "relative",
+                height: i.value.sliderHeight,
+                borderRadius: "9999px",
+                cursor: "pointer",
+                background: te,
+                overflow: "hidden"
+              }),
+              onPointerdown: B(se, ["prevent"])
+            }, [
+              l("div", {
+                style: r({ position: "absolute", inset: "0", borderRadius: "9999px", background: `linear-gradient(to right, transparent, ${x.value})` })
+              }, null, 4),
+              l("div", {
+                style: r({
+                  position: "absolute",
+                  left: `${u.value * 100}%`,
+                  top: "50%",
+                  width: i.value.thumbSize,
+                  height: i.value.thumbSize,
+                  borderRadius: "50%",
+                  border: "2px solid white",
+                  boxShadow: "0 1px 3px rgba(0,0,0,0.3)",
+                  transform: "translate(-50%, -50%)",
+                  pointerEvents: "none",
+                  background: x.value
+                })
+              }, null, 4)
+            ], 36)) : h("", !0)
+          ])
+        ])),
+        a.showInput ? (d(), c("div", De, [
+          a.swatchOnly ? (d(), c("div", {
+            key: 0,
+            style: r({
+              width: "1.5rem",
+              height: "1.5rem",
+              borderRadius: "0.25rem",
+              border: "1px solid var(--cui-border)",
+              flexShrink: "0",
+              background: D.value
+            })
+          }, null, 4)) : h("", !0),
+          _(l("input", {
+            ref: "inputEl",
+            "onUpdate:modelValue": t[0] || (t[0] = (o) => f.value = o),
+            style: r({
+              flex: "1",
+              padding: "calc(0.3125rem * var(--cui-density-scale, 1)) calc(0.5rem * var(--cui-density-scale, 1))",
+              fontSize: i.value.fontSize,
+              fontFamily: "var(--cui-font-mono, monospace)",
+              border: "1px solid var(--cui-border-strong, var(--cui-border))",
+              borderRadius: "0.25rem",
+              background: "var(--cui-surface-base, white)",
+              color: "var(--cui-text-body)",
+              outline: "none",
+              minWidth: "0"
+            }),
+            onKeydown: ge(j, ["enter"]),
+            onBlur: j
+          }, null, 36), [
+            [be, f.value]
+          ]),
+          a.showFormatToggle ? (d(), xe(Pe, {
+            key: 1,
+            variant: "ghost",
+            size: "xs",
+            style: r({ flexShrink: "0", fontFamily: "var(--cui-font-mono, monospace)", fontSize: i.value.fontSize, fontWeight: "600", minWidth: "2.5rem" }),
+            onClick: de
+          }, {
+            default: ye(() => [
+              we(ke(S.value.toUpperCase()), 1)
+            ]),
+            _: 1
+          }, 8, ["style"])) : h("", !0)
+        ])) : h("", !0),
+        I.value.length > 0 ? (d(), c("div", Ve, [
+          (d(!0), c(Se, null, Ee(I.value, (o) => (d(), c("div", {
+            key: o,
+            style: r({
+              width: i.value.swatchSize,
+              height: i.value.swatchSize,
+              borderRadius: "0.25rem",
+              background: o,
+              cursor: "pointer",
+              border: x.value.toLowerCase() === o.toLowerCase() ? "2px solid var(--cui-primary)" : "1px solid var(--cui-border)",
+              boxShadow: x.value.toLowerCase() === o.toLowerCase() ? "0 0 0 1px var(--cui-primary)" : "none",
+              transition: "transform 0.1s ease"
+            }),
+            onClick: (z) => ce(o),
+            onMouseenter: t[1] || (t[1] = (z) => z.target.style.transform = "scale(1.15)"),
+            onMouseleave: t[2] || (t[2] = (z) => z.target.style.transform = "scale(1)")
+          }, null, 44, Fe))), 128))
+        ])) : h("", !0)
+      ], 4)
+    ], 4)), [
+      [Re, !a.hidden]
+    ]);
+  }
+});
+export {
+  Ge as default
+};

package/dist/components/CuiColorPicker.vue2.js

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