@itguy614/clean-ui 0.9.0 → 1.0.1

package/dist/components/CuiTreeView.vue.js

@@ -0,0 +1,73 @@
+import { defineComponent as w, ref as v, computed as c, withDirectives as y, openBlock as s, createElementBlock as u, Fragment as z, renderList as B, createBlock as V, withCtx as b, renderSlot as k, mergeProps as E, vShow as A } from "vue";
+import C from "./CuiTreeNode.vue.js";
+import { scaleDensity as d } from "../utils/sizing.js";
+const L = { role: "tree" }, N = /* @__PURE__ */ w({
+  __name: "CuiTreeView",
+  props: {
+    nodes: {},
+    modelValue: {},
+    multiple: { type: Boolean, default: !1 },
+    defaultExpanded: {},
+    expandAll: { type: Boolean, default: !1 },
+    showLines: { type: Boolean, default: !0 },
+    selectable: { type: Boolean, default: !0 },
+    animated: { type: Boolean, default: !0 },
+    size: { default: "md" },
+    hidden: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue", "node-click", "node-expand"],
+  setup(a, { emit: m }) {
+    const l = a, i = m, o = v(new Set(l.defaultExpanded ?? []));
+    if (l.expandAll) {
+      let e = function(t) {
+        for (const n of t)
+          n.children && n.children.length > 0 && (o.value.add(n.id), e(n.children));
+      };
+      e(l.nodes);
+    }
+    const r = c(() => l.modelValue == null ? /* @__PURE__ */ new Set() : Array.isArray(l.modelValue) ? new Set(l.modelValue) : /* @__PURE__ */ new Set([l.modelValue]));
+    function f(e) {
+      const t = new Set(o.value), n = t.has(e.id);
+      n ? t.delete(e.id) : t.add(e.id), o.value = t, i("node-expand", e, !n);
+    }
+    function p(e) {
+      if (!(!l.selectable || e.disabled))
+        if (i("node-click", e), l.multiple) {
+          const t = new Set(r.value);
+          t.has(e.id) ? t.delete(e.id) : t.add(e.id), i("update:modelValue", [...t]);
+        } else
+          i("update:modelValue", r.value.has(e.id) ? null : e.id);
+    }
+    const h = {
+      sm: { fontSize: "0.8125rem", iconSize: "0.75rem", indent: d("1rem"), padY: d("0.1875rem"), padX: d("0.375rem") },
+      md: { fontSize: "0.875rem", iconSize: "0.875rem", indent: d("1.25rem"), padY: d("0.25rem"), padX: d("0.5rem") },
+      lg: { fontSize: "0.9375rem", iconSize: "1rem", indent: d("1.5rem"), padY: d("0.375rem"), padX: d("0.625rem") }
+    }, S = c(() => h[l.size]);
+    return (e, t) => y((s(), u("div", L, [
+      (s(!0), u(z, null, B(a.nodes, (n, x) => (s(), V(C, {
+        key: String(n.id),
+        node: n,
+        depth: 0,
+        "is-last": x === a.nodes.length - 1,
+        expanded: o.value,
+        "selected-set": r.value,
+        selectable: a.selectable,
+        "show-lines": a.showLines,
+        animated: a.animated,
+        cfg: S.value,
+        onToggleExpand: f,
+        onSelectNode: p
+      }, {
+        node: b((g) => [
+          k(e.$slots, "node", E({ ref_for: !0 }, g))
+        ]),
+        _: 3
+      }, 8, ["node", "is-last", "expanded", "selected-set", "selectable", "show-lines", "animated", "cfg"]))), 128))
+    ], 512)), [
+      [A, !a.hidden]
+    ]);
+  }
+});
+export {
+  N as default
+};

package/dist/components/CuiTreeView.vue2.js

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

package/dist/components/accordion-context.js

@@ -0,0 +1,4 @@
+const o = Symbol("accordion-context");
+export {
+  o as AccordionContextKey
+};

package/dist/components/breadcrumb-context.js

@@ -0,0 +1,4 @@
+const e = Symbol("breadcrumb-context");
+export {
+  e as BreadcrumbContextKey
+};

package/dist/components/config-context.js

@@ -0,0 +1,4 @@
+const o = Symbol("cui-config");
+export {
+  o as CuiConfigKey
+};

package/dist/components/data-grid-context.js

@@ -0,0 +1,4 @@
+const t = Symbol("data-grid-context");
+export {
+  t as DataGridContextKey
+};

package/dist/components/dropdown-context.js

@@ -0,0 +1,30 @@
+const h = Symbol("dropdown-context"), a = Symbol("dropdown-radio");
+function m(l, f = "bottom") {
+  const t = l.getBoundingClientRect(), i = typeof window < "u" ? window.innerHeight : 0, p = typeof window < "u" ? window.innerWidth : 0;
+  let e = f;
+  e === "bottom" && i - t.bottom < 200 && t.top > i - t.bottom ? e = "top" : e === "top" && t.top < 200 && i - t.bottom > t.top && (e = "bottom"), e === "right" && p - t.right < 200 && t.left > p - t.right ? e = "left" : e === "left" && t.left < 200 && p - t.right > t.left && (e = "right");
+  const n = 4, o = {
+    position: "fixed",
+    zIndex: "9990"
+  }, r = e === "bottom" || e === "top" ? t.left + 200 > p : !1;
+  switch (e) {
+    case "bottom":
+      o.top = `${t.bottom + n}px`, r ? o.right = `${p - t.right}px` : o.left = `${t.left}px`, o.maxHeight = `${Math.min(i - t.bottom - n - 16, 400)}px`;
+      break;
+    case "top":
+      o.bottom = `${i - t.top + n}px`, r ? o.right = `${p - t.right}px` : o.left = `${t.left}px`, o.maxHeight = `${Math.min(t.top - n - 16, 400)}px`;
+      break;
+    case "right":
+      o.top = `${t.top}px`, o.left = `${t.right + n}px`, o.maxHeight = `${Math.min(i - t.top - 16, 400)}px`;
+      break;
+    case "left":
+      o.top = `${t.top}px`, o.right = `${p - t.left + n}px`, o.maxHeight = `${Math.min(i - t.top - 16, 400)}px`;
+      break;
+  }
+  return { styles: o, actualPlacement: e };
+}
+export {
+  h as DropdownContextKey,
+  a as DropdownRadioKey,
+  m as computeDropdownPosition
+};

package/dist/components/form-context.js

@@ -0,0 +1,4 @@
+const o = Symbol("cui-form");
+export {
+  o as FormContextKey
+};

package/dist/components/multi-select-group-context.js

@@ -0,0 +1,5 @@
+const o = Symbol("checkbox-group"), e = Symbol("toggle-group");
+export {
+  o as CheckboxGroupKey,
+  e as ToggleGroupKey
+};

package/dist/components/radio-context.js

@@ -0,0 +1,4 @@
+const o = Symbol("radio-group");
+export {
+  o as RadioGroupKey
+};

package/dist/components/table-context.js

@@ -0,0 +1,5 @@
+const t = Symbol("table-context"), e = Symbol("table-section-context");
+export {
+  t as TableContextKey,
+  e as TableSectionContextKey
+};

package/dist/components/tabs-context.js

@@ -0,0 +1,4 @@
+const t = Symbol("tabs-context");
+export {
+  t as TabsContextKey
+};

package/dist/components/toast-context.js

@@ -0,0 +1,45 @@
+import { ref as o } from "vue";
+const v = Symbol("toast-context");
+let d = 0;
+function f(s, n, a) {
+  const t = o([]);
+  function r(e) {
+    const i = e.id ?? `cui-toast-${++d}`, u = {
+      id: i,
+      title: e.title,
+      description: e.description,
+      color: e.color ?? "primary",
+      variant: e.variant ?? "subtle",
+      dismissible: e.dismissible ?? !0,
+      autoDismiss: e.autoDismiss ?? 5e3,
+      showProgress: e.showProgress ?? !0,
+      animation: e.animation ?? "none",
+      icon: e.icon,
+      noIcon: e.noIcon ?? !1,
+      live: e.live,
+      createdAt: Date.now()
+    };
+    for (t.value.push(u); t.value.length > a.value; )
+      t.value.shift();
+    return i;
+  }
+  function l(e) {
+    t.value = t.value.filter((i) => i.id !== e);
+  }
+  function c() {
+    t.value = [];
+  }
+  return {
+    toasts: t,
+    position: s,
+    stackMode: n,
+    maxToasts: a,
+    add: r,
+    dismiss: l,
+    dismissAll: c
+  };
+}
+export {
+  v as ToastContextKey,
+  f as createToastState
+};

package/dist/composables/useBreakpoint.js

@@ -0,0 +1,34 @@
+import { readonly as f, ref as l } from "vue";
+const r = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536
+}, e = ["sm", "md", "lg", "xl", "2xl"];
+function o() {
+  if (typeof window > "u") return "base";
+  const i = window.innerWidth;
+  for (let n = e.length - 1; n >= 0; n--)
+    if (i >= r[e[n]])
+      return e[n];
+  return "base";
+}
+let t = null;
+function a() {
+  if (t = l(o()), !(typeof window > "u"))
+    for (const i of e) {
+      const n = window.matchMedia(`(min-width: ${r[i]}px)`), d = () => {
+        t.value = o();
+      };
+      n.addEventListener("change", d);
+    }
+}
+function u() {
+  return t || a(), { breakpoint: f(t) };
+}
+export {
+  r as BREAKPOINTS,
+  e as BREAKPOINT_ORDER,
+  u as useBreakpoint
+};

package/dist/composables/useClickOutside.js

@@ -0,0 +1,14 @@
+import { onMounted as c, onUnmounted as d } from "vue";
+function f(e, t) {
+  function o(i) {
+    (typeof e == "function" ? e() : e.map((n) => n.value)).some((n) => n == null ? void 0 : n.contains(i.target)) || t();
+  }
+  c(() => {
+    document.addEventListener("mousedown", o);
+  }), d(() => {
+    document.removeEventListener("mousedown", o);
+  });
+}
+export {
+  f as useClickOutside
+};

package/dist/composables/useCopyToClipboard.js

@@ -0,0 +1,25 @@
+import { ref as c } from "vue";
+function l(r = 2e3) {
+  const o = c(!1);
+  let e = null;
+  async function u(a) {
+    try {
+      return await navigator.clipboard.writeText(a), o.value = !0, e && clearTimeout(e), e = setTimeout(() => {
+        o.value = !1;
+      }, r), !0;
+    } catch {
+      try {
+        const t = document.createElement("textarea");
+        return t.value = a, t.style.position = "fixed", t.style.opacity = "0", document.body.appendChild(t), t.select(), document.execCommand("copy"), document.body.removeChild(t), o.value = !0, e && clearTimeout(e), e = setTimeout(() => {
+          o.value = !1;
+        }, r), !0;
+      } catch {
+        return !1;
+      }
+    }
+  }
+  return { copied: o, copy: u };
+}
+export {
+  l as useCopyToClipboard
+};

package/dist/composables/useDataGrid.js

@@ -0,0 +1,269 @@
+import { ref as v, computed as y, provide as ye, inject as pe } from "vue";
+import { DataGridContextKey as I } from "../components/data-grid-context.js";
+function he(d) {
+  const {
+    columns: p,
+    serverSide: F = !1,
+    rowKey: $ = "id",
+    defaultPerPage: L = 15,
+    initialView: l,
+    hydrateFromUrl: z = !1
+  } = d, G = p.map((e) => ({
+    key: e.key,
+    visible: e.visible !== !1
+  })), m = v(
+    (l == null ? void 0 : l.columns) ?? G.map((e) => ({ ...e }))
+  ), H = y(
+    () => m.value.filter((e) => e.visible).map((e) => p.find((t) => t.key === e.key)).filter(Boolean)
+  ), W = y(
+    () => p.filter((e) => e.filterable)
+  );
+  function X(e) {
+    const t = m.value.find((a) => a.key === e);
+    t && (t.visible = !t.visible);
+  }
+  function Y(e, t) {
+    const a = [...m.value], [r] = a.splice(e, 1);
+    a.splice(t, 0, r), m.value = a;
+  }
+  const i = v((l == null ? void 0 : l.sort) ?? null);
+  function Z(e) {
+    var r;
+    const t = p.find((n) => n.key === e);
+    if (!(t != null && t.sortable)) return;
+    const a = t.sortKey ?? e;
+    ((r = i.value) == null ? void 0 : r.key) === a ? i.value.direction === "asc" ? i.value = { key: a, direction: "desc" } : i.value = null : i.value = { key: a, direction: "asc" }, o.value = 1;
+  }
+  const s = v(l != null && l.filters ? [...l.filters] : []);
+  function N(e) {
+    const t = s.value.findIndex((a) => a.key === e.key);
+    t >= 0 ? s.value[t] = e : s.value.push(e), s.value = [...s.value], o.value = 1;
+  }
+  function V(e) {
+    s.value = s.value.filter((t) => t.key !== e), o.value = 1;
+  }
+  function ee() {
+    s.value = [], o.value = 1;
+  }
+  const P = v(""), S = v(null);
+  function te(e, t) {
+    P.value = e, S.value = t ?? null, o.value = 1;
+  }
+  function O() {
+    P.value = "", S.value = null, o.value = 1;
+  }
+  const o = v(1), c = v((l == null ? void 0 : l.perPage) ?? L);
+  function ae(e) {
+    o.value = e;
+  }
+  function le(e) {
+    c.value = e, o.value = 1;
+  }
+  const k = v(/* @__PURE__ */ new Set());
+  function re(e) {
+    const t = new Set(k.value);
+    t.has(e) ? t.delete(e) : t.add(e), k.value = t;
+  }
+  function ne(e) {
+    const t = /* @__PURE__ */ new Set();
+    for (const a of e) {
+      const r = String(a[$] ?? "");
+      r && t.add(r);
+    }
+    k.value = t;
+  }
+  function J() {
+    k.value = /* @__PURE__ */ new Set();
+  }
+  const C = v((l == null ? void 0 : l.viewMode) ?? "grid");
+  function ue(e) {
+    C.value = e;
+  }
+  const D = v(!1), w = v((l == null ? void 0 : l.filterPanelPinned) ?? !1);
+  function oe() {
+    D.value = !D.value;
+  }
+  function se() {
+    w.value = !w.value;
+  }
+  const _ = y(() => {
+    const e = d.data.value;
+    return Array.isArray(e) ? e : e.data ?? [];
+  }), b = y(() => {
+    if (F) return !0;
+    const e = d.data.value;
+    return !Array.isArray(e) && "current_page" in e;
+  }), x = y(() => {
+    if (b.value) return _.value;
+    let e = [..._.value];
+    if (P.value) {
+      const t = P.value.toLowerCase();
+      e = e.filter((a) => S.value ? String(a[S.value] ?? "").toLowerCase().includes(t) : Object.values(a).some(
+        (r) => String(r ?? "").toLowerCase().includes(t)
+      ));
+    }
+    for (const t of s.value) {
+      const a = p.find((n) => (n.filterKey ?? n.key) === t.key), r = (a == null ? void 0 : a.key) ?? t.key;
+      e = e.filter((n) => {
+        const u = String(n[r] ?? "").toLowerCase();
+        return t.type === "text" ? u.includes(String(t.value).toLowerCase()) : t.type === "select" ? u === String(t.value).toLowerCase() : t.type === "multi-select" ? (Array.isArray(t.value) ? t.value : [t.value]).some((g) => u === g.toLowerCase()) : t.type === "date-range" && Array.isArray(t.value) && t.value.length === 2 ? u >= t.value[0] && u <= t.value[1] : !0;
+      });
+    }
+    return e;
+  }), j = y(() => {
+    if (b.value || !i.value) return x.value;
+    const { key: e, direction: t } = i.value, a = p.find((n) => (n.sortKey ?? n.key) === e), r = (a == null ? void 0 : a.key) ?? e;
+    return [...x.value].sort((n, u) => {
+      const f = n[r], g = u[r];
+      if (f == null && g == null) return 0;
+      if (f == null) return 1;
+      if (g == null) return -1;
+      let h;
+      return typeof f == "number" && typeof g == "number" ? h = f - g : h = String(f).localeCompare(String(g)), t === "desc" ? -h : h;
+    });
+  }), ie = y(() => {
+    if (b.value) return _.value;
+    const e = (o.value - 1) * c.value;
+    return j.value.slice(e, e + c.value);
+  }), ce = y(() => {
+    if (b.value) {
+      const n = d.data.value;
+      if (!Array.isArray(n) && "current_page" in n) {
+        const u = n;
+        return {
+          current_page: u.current_page,
+          last_page: u.last_page,
+          per_page: u.per_page,
+          total: u.total,
+          from: u.from,
+          to: u.to
+        };
+      }
+    }
+    const e = j.value.length, t = Math.max(1, Math.ceil(e / c.value)), a = e > 0 ? (o.value - 1) * c.value + 1 : null, r = e > 0 ? Math.min(o.value * c.value, e) : null;
+    return {
+      current_page: o.value,
+      last_page: t,
+      per_page: c.value,
+      total: e,
+      from: a,
+      to: r
+    };
+  });
+  function ve() {
+    return {
+      page: o.value,
+      perPage: c.value,
+      sort: i.value,
+      filters: s.value.length > 0 ? [...s.value] : void 0,
+      search: P.value || void 0,
+      searchField: S.value
+    };
+  }
+  let A = JSON.stringify(Q());
+  function Q() {
+    return {
+      columns: G.map((e) => ({ ...e })),
+      sort: null,
+      filters: [],
+      perPage: L,
+      viewMode: "grid",
+      filterPanelPinned: !1
+    };
+  }
+  function M() {
+    return {
+      columns: m.value.map((e) => ({ ...e })),
+      sort: i.value ? { ...i.value } : null,
+      filters: s.value.map((e) => ({ ...e })),
+      perPage: c.value,
+      viewMode: C.value,
+      filterPanelPinned: w.value
+    };
+  }
+  function R(e) {
+    m.value = e.columns.map((t) => ({ ...t })), i.value = e.sort ? { ...e.sort } : null, s.value = e.filters.map((t) => ({ ...t })), c.value = e.perPage, C.value = e.viewMode, w.value = e.filterPanelPinned, o.value = 1, T();
+  }
+  const fe = y(
+    () => JSON.stringify(M()) !== A
+  );
+  function T() {
+    A = JSON.stringify(M());
+  }
+  function de() {
+    R(Q()), O(), J();
+  }
+  if (l && (A = JSON.stringify(l)), z && typeof window < "u") {
+    const e = new URLSearchParams(window.location.search), t = e.get("sort"), a = e.get("direction");
+    t && (i.value = { key: t, direction: a === "desc" ? "desc" : "asc" });
+    const r = e.get("search");
+    r && (P.value = r, S.value = e.get("search_field") ?? null);
+    const n = e.get("per_page");
+    n && (c.value = Number(n));
+    const u = e.get("page");
+    u && (o.value = Number(u));
+    const f = e.get("view_mode");
+    (f === "card" || f === "grid") && (C.value = f);
+    for (const [g, h] of e.entries()) {
+      const U = g.match(/^filter\[(.+)\]$/);
+      if (U) {
+        const q = U[1], K = p.find((E) => (E.filterKey ?? E.key) === q), B = (K == null ? void 0 : K.filterType) ?? "text", ge = B === "multi-select" ? h.split(",") : h;
+        N({ key: q, value: ge, type: B });
+      }
+    }
+  }
+  return {
+    columns: p,
+    columnState: m,
+    visibleColumns: H,
+    filterableColumns: W,
+    sort: i,
+    applySort: Z,
+    filters: s,
+    applyFilter: N,
+    removeFilter: V,
+    clearFilters: ee,
+    searchQuery: P,
+    searchField: S,
+    search: te,
+    clearSearch: O,
+    page: o,
+    perPage: c,
+    setPage: ae,
+    setPerPage: le,
+    selectedRows: k,
+    toggleSelection: re,
+    selectAll: ne,
+    clearSelection: J,
+    toggleColumnVisibility: X,
+    reorderColumns: Y,
+    viewMode: C,
+    setViewMode: ue,
+    filterPanelOpen: D,
+    filterPanelPinned: w,
+    toggleFilterPanel: oe,
+    toggleFilterPanelPin: se,
+    displayData: ie,
+    paginationMeta: ce,
+    getConfig: M,
+    loadConfig: R,
+    isDirty: fe,
+    markClean: T,
+    resetToDefaults: de,
+    serverSide: F,
+    getQueryParams: ve
+  };
+}
+function ke(d) {
+  ye(I, d);
+}
+function Ce() {
+  const d = pe(I);
+  if (!d) throw new Error("useDataGridState must be used within a CuiDataGrid");
+  return d;
+}
+export {
+  ke as provideDataGrid,
+  he as useDataGrid,
+  Ce as useDataGridState
+};

package/dist/composables/useDataGridInertia.js

@@ -0,0 +1,35 @@
+import { watch as g } from "vue";
+function v(n) {
+  const { grid: t, url: c, router: l, extraParams: a = {} } = n;
+  function o(e) {
+    const r = { ...a };
+    if (e.page && e.page > 1 && (r.page = String(e.page)), e.perPage && (r.per_page = String(e.perPage)), e.sort && (r.sort = e.sort.key, r.direction = e.sort.direction), e.search && (r.search = e.search, e.searchField && (r.search_field = e.searchField)), e.filters)
+      for (const i of e.filters) {
+        const f = Array.isArray(i.value) ? i.value.join(",") : i.value;
+        r[`filter[${i.key}]`] = f;
+      }
+    return r;
+  }
+  function u() {
+    const e = t.getQueryParams(), r = o(e);
+    l.get(c, r, {
+      preserveState: !0,
+      preserveScroll: !0
+    });
+  }
+  return g(
+    [
+      () => t.sort.value,
+      () => t.filters.value,
+      () => t.searchQuery.value,
+      () => t.page.value,
+      () => t.perPage.value
+    ],
+    () => {
+      u();
+    }
+  ), { navigate: u, buildQueryData: o };
+}
+export {
+  v as useDataGridInertia
+};

package/dist/composables/useDataGridViews.js

@@ -0,0 +1,67 @@
+import { ref as u } from "vue";
+function g(s = "cui-datagrid") {
+  function r(a) {
+    return `${s}-views-${a}`;
+  }
+  return {
+    async load(a) {
+      try {
+        const e = localStorage.getItem(r(a));
+        return e ? JSON.parse(e) : [];
+      } catch {
+        return [];
+      }
+    },
+    async save(a, e) {
+      const t = await this.load(a), i = t.findIndex((l) => l.id === e.id);
+      i >= 0 ? t[i] = e : t.push(e), localStorage.setItem(r(a), JSON.stringify(t));
+    },
+    async remove(a, e) {
+      const i = (await this.load(a)).filter((l) => l.id !== e);
+      localStorage.setItem(r(a), JSON.stringify(i));
+    }
+  };
+}
+function I(s) {
+  const r = s.adapter ?? g(), a = u([]), e = u(null), t = u(!1);
+  async function i() {
+    t.value = !0;
+    try {
+      a.value = await r.load(s.gridId);
+    } finally {
+      t.value = !1;
+    }
+  }
+  async function l(n, d) {
+    const c = a.value.find((y) => y.name === n), o = {
+      id: (c == null ? void 0 : c.id) ?? crypto.randomUUID(),
+      name: n,
+      config: d
+    };
+    await r.save(s.gridId, o), await i(), e.value = o.id;
+  }
+  async function f(n, d) {
+    const c = a.value.find((o) => o.id === n);
+    c && (await r.save(s.gridId, { ...c, config: d }), await i());
+  }
+  async function w(n) {
+    await r.remove(s.gridId, n), e.value === n && (e.value = null), await i();
+  }
+  function v(n) {
+    e.value = n;
+  }
+  return {
+    views: a,
+    activeViewId: e,
+    loading: t,
+    fetchViews: i,
+    saveView: l,
+    updateView: f,
+    removeView: w,
+    selectView: v
+  };
+}
+export {
+  g as localStorageViewAdapter,
+  I as useDataGridViews
+};