@itguy614/clean-ui 0.9.0 → 1.0.1

package/dist/composables/useDensity.js

@@ -0,0 +1,42 @@
+import { ref as l, watch as u } from "vue";
+const c = [
+  { id: "compact", label: "Compact", description: "Tighter spacing — more on screen" },
+  { id: "default", label: "Default", description: "Balanced default spacing" },
+  { id: "comfortable", label: "Comfortable", description: "Roomier spacing" }
+], a = "cui-density", s = "cui-density-", i = "default", d = new Set(c.map((t) => t.id)), n = l(f());
+function f() {
+  if (typeof window > "u") return i;
+  const t = localStorage.getItem(a);
+  return t && d.has(t) ? t : i;
+}
+function r(t) {
+  if (typeof document > "u") return;
+  const e = document.documentElement;
+  for (const o of Array.from(e.classList))
+    o.startsWith(s) && e.classList.remove(o);
+  t !== "default" && e.classList.add(`${s}${t}`), localStorage.setItem(a, t);
+}
+r(n.value);
+u(n, r);
+function p() {
+  function t(o) {
+    n.value = o;
+  }
+  function e() {
+    return n.value;
+  }
+  return {
+    /** Current density id (reactive) */
+    density: n,
+    /** Available density presets */
+    presets: c,
+    /** Set the active density */
+    setDensity: t,
+    /** Get the current density id */
+    getDensity: e
+  };
+}
+export {
+  c as DENSITY_PRESETS,
+  p as useDensity
+};

package/dist/composables/useLayoutContext.js

@@ -0,0 +1,21 @@
+import { inject as u, ref as x, provide as c } from "vue";
+const l = Symbol("grid-context"), i = Symbol("flex-context");
+function r(t) {
+  const n = t === "grid" ? l : i, e = u(n, null), o = x({
+    type: t,
+    isNested: e !== null,
+    depth: e ? e.value.depth + 1 : 0,
+    debug: (e == null ? void 0 : e.value.debug) ?? !1
+  });
+  return c(n, o), { context: o, parentContext: e };
+}
+function s() {
+  return r("grid");
+}
+function f() {
+  return r("flex");
+}
+export {
+  f as useFlexContext,
+  s as useGridContext
+};

package/dist/composables/useMessages.js

@@ -0,0 +1,10 @@
+import { inject as e, computed as o } from "vue";
+import { CuiConfigKey as t } from "../components/config-context.js";
+import { defaultMessages as r } from "../messages.js";
+const s = o(() => r);
+function n() {
+  return e(t, s);
+}
+export {
+  n as useMessages
+};

package/dist/composables/useOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useOverlay.d.ts","sourceRoot":"","sources":["../../src/composables/useOverlay.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgD,KAAK,GAAG,EAAE,KAAK,UAAU,EAAE,MAAM,KAAK,CAAC;AAK9F,MAAM,WAAW,iBAAiB;IAChC,2CAA2C;IAC3C,IAAI,EAAE,MAAM,OAAO,CAAC;IACpB,qDAAqD;IACrD,SAAS,EAAE,GAAG,CAAC,WAAW,GAAG,SAAS,CAAC,GAAG,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC,CAAC;IACpH,qDAAqD;IACrD,UAAU,EAAE,MAAM,OAAO,CAAC;IAC1B,8CAA8C;IAC9C,WAAW,EAAE,MAAM,OAAO,CAAC;IAC3B,oCAAoC;IACpC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iCAAiC;IACjC,YAAY,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,2BAA2B;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,UAAU,CAAC,OAAO,EAAE,iBAAiB;;;;;;;mBAgE7B,aAAa;EAyDpC"}
+{"version":3,"file":"useOverlay.d.ts","sourceRoot":"","sources":["../../src/composables/useOverlay.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgD,KAAK,GAAG,EAAE,KAAK,UAAU,EAAE,MAAM,KAAK,CAAC;AAK9F,MAAM,WAAW,iBAAiB;IAChC,2CAA2C;IAC3C,IAAI,EAAE,MAAM,OAAO,CAAC;IACpB,qDAAqD;IACrD,SAAS,EAAE,GAAG,CAAC,WAAW,GAAG,SAAS,CAAC,GAAG,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC,CAAC;IACpH,qDAAqD;IACrD,UAAU,EAAE,MAAM,OAAO,CAAC;IAC1B,8CAA8C;IAC9C,WAAW,EAAE,MAAM,OAAO,CAAC;IAC3B,oCAAoC;IACpC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iCAAiC;IACjC,YAAY,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,2BAA2B;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,UAAU,CAAC,OAAO,EAAE,iBAAiB;;;;;;;mBAuE7B,aAAa;EAyDpC"}

package/dist/composables/useOverlay.js

@@ -0,0 +1,59 @@
+import { ref as d, watch as x, onMounted as A, onUnmounted as E, nextTick as q } from "vue";
+const t = /* @__PURE__ */ new Set();
+function C(y) {
+  const {
+    open: v,
+    dialogRef: l,
+    persistent: p,
+    allowNested: b,
+    animationDuration: g = 200,
+    onUpdateOpen: w,
+    onClose: O
+  } = y, i = Symbol("overlay"), s = d(!1), a = d(!1), m = d(null);
+  function u() {
+    !b() && t.size > 0 && t.clear(), t.add(i), m.value = document.activeElement, s.value = !0, document.body.style.overflow = "hidden", q(() => {
+      requestAnimationFrame(() => {
+        var e;
+        a.value = !0, (e = l.value) == null || e.focus();
+      });
+    });
+  }
+  function c() {
+    a.value = !1, t.delete(i), setTimeout(() => {
+      var e;
+      s.value = !1, w(!1), O(), t.size === 0 && (document.body.style.overflow = ""), (e = m.value) == null || e.focus();
+    }, g);
+  }
+  function f() {
+    p() || c();
+  }
+  function h() {
+    f();
+  }
+  function k(e) {
+    if (e.key === "Escape" && (e.stopPropagation(), f()), e.key === "Tab" && l.value) {
+      const r = l.value.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      ), o = r[0], n = r[r.length - 1];
+      e.shiftKey ? document.activeElement === o && (e.preventDefault(), n == null || n.focus()) : document.activeElement === n && (e.preventDefault(), o == null || o.focus());
+    }
+  }
+  return x(v, (e) => {
+    e ? u() : c();
+  }), A(() => {
+    v() && u();
+  }), E(() => {
+    t.delete(i), t.size === 0 && (document.body.style.overflow = "");
+  }), {
+    isVisible: s,
+    isAnimating: a,
+    openOverlay: u,
+    closeOverlay: c,
+    requestClose: f,
+    onBackdropClick: h,
+    onKeydown: k
+  };
+}
+export {
+  C as useOverlay
+};

package/dist/composables/usePopover.js

@@ -0,0 +1,53 @@
+import { ref as a, computed as o, toValue as c } from "vue";
+import { offset as S, flip as D, shift as P, arrow as R, useFloating as $, autoUpdate as k } from "@floating-ui/vue";
+function F(e = {}) {
+  const l = a(null), s = a(null), r = a(null), f = e.placement ?? "top", p = e.offsetDistance ?? 8, d = o(() => {
+    const t = c(f);
+    if (t !== "auto")
+      return t;
+  }), m = o(() => {
+    const t = [
+      S(c(p)),
+      D({ fallbackAxisSideDirection: "start" }),
+      P({ padding: 8 })
+    ];
+    return e.arrow && r.value && t.push(R({ element: r.value, padding: 4 })), t;
+  }), { floatingStyles: w, placement: n, middlewareData: i, isPositioned: g, update: v } = $(
+    l,
+    s,
+    {
+      placement: d,
+      middleware: m,
+      strategy: e.strategy ?? "absolute",
+      whileElementsMounted: k
+    }
+  ), x = o(() => {
+    if (!e.arrow || !i.value.arrow) return {};
+    const { x: t, y: u } = i.value.arrow, h = n.value.split("-")[0], y = {
+      top: "bottom",
+      bottom: "top",
+      left: "right",
+      right: "left"
+    };
+    return {
+      position: "absolute",
+      left: t != null ? `${t}px` : "",
+      top: u != null ? `${u}px` : "",
+      [y[h]]: "-4px"
+    };
+  }), b = o(() => n.value.split("-")[0]);
+  return {
+    referenceRef: l,
+    floatingRef: s,
+    arrowRef: r,
+    floatingStyles: w,
+    arrowStyle: x,
+    placement: n,
+    currentSide: b,
+    isPositioned: g,
+    update: v
+  };
+}
+export {
+  F as usePopover
+};

package/dist/composables/useScrollShadows.js

@@ -0,0 +1,56 @@
+import { ref as o } from "vue";
+function p() {
+  const r = o(!1), l = o(!1), s = o(!1), a = o(!1);
+  function n(t) {
+    r.value = t.scrollTop > 4, l.value = t.scrollHeight - t.scrollTop - t.clientHeight > 4, s.value = t.scrollLeft > 4, a.value = t.scrollWidth - t.scrollLeft - t.clientWidth > 4;
+  }
+  function c(t) {
+    n(t.target);
+  }
+  function i(t) {
+    t && requestAnimationFrame(() => n(t));
+  }
+  return {
+    canScrollUp: r,
+    canScrollDown: l,
+    canScrollLeft: s,
+    canScrollRight: a,
+    onScroll: c,
+    onMount: i,
+    update: n
+  };
+}
+const e = "var(--cui-surface-base, white)", u = {
+  position: "absolute",
+  top: "0",
+  left: "0",
+  right: "0",
+  height: "36px",
+  pointerEvents: "none",
+  zIndex: "5",
+  background: `linear-gradient(to bottom, ${e}, transparent)`
+}, f = {
+  position: "absolute",
+  bottom: "0",
+  left: "0",
+  right: "0",
+  height: "36px",
+  pointerEvents: "none",
+  zIndex: "5",
+  background: `linear-gradient(to top, ${e}, transparent)`
+}, g = {
+  position: "absolute",
+  right: "0",
+  top: "0",
+  bottom: "0",
+  width: "36px",
+  pointerEvents: "none",
+  zIndex: "20",
+  background: `linear-gradient(to left, ${e}, transparent)`
+};
+export {
+  f as scrollShadowBottomStyle,
+  g as scrollShadowRightStyle,
+  u as scrollShadowTopStyle,
+  p as useScrollShadows
+};

package/dist/composables/useTheme.js

@@ -0,0 +1,57 @@
+import { ref as c, watch as s } from "vue";
+const u = [
+  { id: "mono", label: "Mono", description: "Monochrome — default theme" },
+  { id: "default", label: "Navy", description: "Navy blue" },
+  { id: "forest", label: "Forest", description: "Natural green" },
+  { id: "amber", label: "Amber", description: "Warm orange with warm grays" },
+  { id: "azure", label: "Azure", description: "Vibrant blue" },
+  { id: "teal", label: "Teal", description: "Cool teal" },
+  { id: "violet", label: "Violet", description: "Rich purple" },
+  { id: "ruby", label: "Ruby", description: "Bold red" }
+], n = "cui-theme", i = "cui-theme-", a = typeof window < "u";
+function d() {
+  if (!a) return "mono";
+  try {
+    return localStorage.getItem(n) ?? "mono";
+  } catch {
+    return "mono";
+  }
+}
+const o = c(d());
+function l(e) {
+  if (typeof document > "u") return;
+  const t = document.documentElement;
+  for (const r of Array.from(t.classList))
+    r.startsWith(i) && t.classList.remove(r);
+  e !== "default" && t.classList.add(`${i}${e}`);
+}
+l(o.value);
+s(o, (e) => {
+  if (l(e), a)
+    try {
+      localStorage.setItem(n, e);
+    } catch {
+    }
+});
+function f() {
+  function e(r) {
+    o.value = r;
+  }
+  function t() {
+    return o.value;
+  }
+  return {
+    /** Current theme ID (reactive) */
+    theme: o,
+    /** List of available theme presets */
+    presets: u,
+    /** Set the active theme by ID */
+    setTheme: e,
+    /** Get the current theme ID */
+    getTheme: t
+  };
+}
+export {
+  u as THEME_PRESETS,
+  f as useTheme
+};

package/dist/composables/useToast.js

@@ -0,0 +1,23 @@
+import { inject as c } from "vue";
+import { ToastContextKey as u } from "../components/toast-context.js";
+function f() {
+  const i = c(u);
+  if (!i)
+    throw new Error(
+      "[CuiToast] useToast() must be used within a <CuiToastProvider>. Wrap your app with <CuiToastProvider> to enable toasts."
+    );
+  const r = i;
+  function s(o) {
+    return r.add(o);
+  }
+  function n(o) {
+    r.dismiss(o);
+  }
+  function e() {
+    r.dismissAll();
+  }
+  return s.success = (o, t) => s({ ...t, title: o, color: "success" }), s.error = (o, t) => s({ ...t, title: o, color: "error" }), s.warning = (o, t) => s({ ...t, title: o, color: "warning" }), s.info = (o, t) => s({ ...t, title: o, color: "info" }), { toast: s, dismiss: n, dismissAll: e };
+}
+export {
+  f as useToast
+};

package/dist/composables/useVirtualScroll.js

@@ -0,0 +1,69 @@
+import { ref as c, computed as u, watch as w, onBeforeUnmount as x } from "vue";
+const A = 41, V = 5;
+function F(r, H) {
+  const { containerRef: i, rowHeight: v, overscan: f = V } = H, a = c(0), h = c(0), n = c(v ?? A);
+  let d = !!v;
+  const s = u(() => {
+    const e = n.value;
+    return e <= 0 ? 0 : Math.max(0, Math.floor(a.value / e) - f);
+  }), m = u(() => {
+    const e = n.value;
+    if (e <= 0) return r.value.length - 1;
+    const t = Math.ceil(h.value / e);
+    return Math.min(
+      r.value.length - 1,
+      Math.floor(a.value / e) + t + f
+    );
+  }), b = u(
+    () => r.value.slice(s.value, m.value + 1)
+  ), E = u(
+    () => s.value * n.value
+  ), L = u(() => {
+    const e = r.value.length - 1 - m.value;
+    return Math.max(0, e * n.value);
+  });
+  let o = null;
+  function g() {
+    o === null && (o = requestAnimationFrame(() => {
+      o = null;
+      const e = i.value;
+      e && (a.value = e.scrollTop);
+    }));
+  }
+  function p() {
+    const e = i.value;
+    e && (h.value = e.clientHeight);
+  }
+  let l = null;
+  function M(e) {
+    e.addEventListener("scroll", g, { passive: !0 }), p(), l = new ResizeObserver(p), l.observe(e);
+  }
+  function R(e) {
+    e.removeEventListener("scroll", g), l == null || l.disconnect(), l = null;
+  }
+  w(
+    i,
+    (e, t) => {
+      t && R(t), e && M(e);
+    },
+    { immediate: !0 }
+  ), x(() => {
+    o !== null && cancelAnimationFrame(o), i.value && R(i.value);
+  });
+  function T(e) {
+    if (!e || d) return;
+    const t = e.getBoundingClientRect().height;
+    t > 0 && (n.value = t, d = !0);
+  }
+  return {
+    visibleRows: b,
+    firstVisibleIndex: s,
+    paddingTop: E,
+    paddingBottom: L,
+    measureRow: T,
+    resolvedRowHeight: n
+  };
+}
+export {
+  F as useVirtualScroll
+};