@itguy614/clean-ui 0.3.1 → 1.0.0

package/dist/components/CuiDataGridTable.vue.js

@@ -0,0 +1,336 @@
+import { defineComponent as X, computed as c, ref as Y, openBlock as r, createBlock as s, unref as d, withCtx as n, createVNode as f, normalizeStyle as p, createCommentVNode as y, createElementBlock as k, Fragment as b, renderList as w, createElementVNode as _, createTextVNode as S, toDisplayString as z, withModifiers as T, renderSlot as Z } from "vue";
+import { useDataGridState as ee } from "../composables/useDataGrid.js";
+import { useVirtualScroll as te } from "../composables/useVirtualScroll.js";
+import le from "./CuiTable.vue.js";
+/* empty css              */
+import ae from "./CuiTableHead.vue.js";
+import ie from "./CuiTableBody.vue.js";
+import M from "./CuiTableRow.vue.js";
+import h from "./CuiTableCell.vue.js";
+import N from "./CuiCheckbox.vue.js";
+import W from "./CuiIcon.vue.js";
+import re from "./CuiDropdown.vue.js";
+import ne from "./CuiDropdownTrigger.vue.js";
+import oe from "./CuiDropdownMenu.vue.js";
+import E from "./CuiDropdownItem.vue.js";
+import ue from "./CuiButton.vue.js";
+import se from "./CuiContextMenu.vue.js";
+const de = { style: { display: "inline-flex", "align-items": "center", gap: "calc(0.25rem * var(--cui-density-scale, 1))" } }, ce = ["colspan"], fe = ["colspan"], He = /* @__PURE__ */ X({
+  __name: "CuiDataGridTable",
+  props: {
+    rowKey: { default: "id" },
+    bulkActions: {},
+    showSelectAll: { type: Boolean, default: !0 },
+    stickyHeader: { type: Boolean, default: !0 },
+    maxHeight: {},
+    striped: { type: Boolean, default: !1 },
+    hoverable: { type: Boolean, default: !0 },
+    bordered: { type: Boolean, default: !1 },
+    size: { default: "md" },
+    virtualize: { type: Boolean, default: !1 },
+    virtualRowHeight: {}
+  },
+  emits: ["row-click", "row-action"],
+  setup(u, { emit: U }) {
+    const m = u, $ = U, i = ee(), g = c(() => {
+      var t;
+      return (((t = m.bulkActions) == null ? void 0 : t.length) ?? 0) > 0;
+    }), C = c(
+      () => i.displayData.value.some((t) => t._actions && t._actions.length > 0)
+    );
+    function B(t) {
+      return String(t[m.rowKey] ?? "");
+    }
+    function D(t) {
+      return i.selectedRows.value.has(B(t));
+    }
+    const H = c(() => {
+      const t = i.displayData.value;
+      if (t.length === 0) return !1;
+      const a = t.filter((e) => D(e)).length;
+      return a === 0 ? !1 : a === t.length ? !0 : "indeterminate";
+    });
+    function G(t) {
+      t ? i.selectAll(i.displayData.value) : i.clearSelection();
+    }
+    function x(t) {
+      return t._actions ?? [];
+    }
+    function O(t) {
+      var o;
+      const a = i.columns.find((l) => l.key === t), e = (a == null ? void 0 : a.sortKey) ?? t;
+      return ((o = i.sort.value) == null ? void 0 : o.key) === e ? i.sort.value.direction === "asc" ? "caret-up" : "caret-down" : "caret-up-down";
+    }
+    function F(t) {
+      var o;
+      const a = i.columns.find((l) => l.key === t), e = (a == null ? void 0 : a.sortKey) ?? t;
+      return ((o = i.sort.value) == null ? void 0 : o.key) === e ? "1" : "0.3";
+    }
+    const L = c(() => {
+      const t = i.visibleColumns.value;
+      if (!t.some((o) => o.width)) return;
+      let e = 0;
+      g.value && (e += 48);
+      for (const o of t)
+        e += parseInt(o.width ?? "150", 10) || 150;
+      return C.value && (e += 48), `${e}px`;
+    }), V = c(() => {
+      const t = /* @__PURE__ */ new Map();
+      let a = 0;
+      g.value && (a += 48);
+      for (const e of i.visibleColumns.value)
+        e.sticky && e.width ? (t.set(e.key, `${a}px`), a += parseInt(e.width, 10) || 0) : e.sticky && t.set(e.key, `${a}px`);
+      return t;
+    }), A = c(() => {
+      const t = i.visibleColumns.value;
+      for (let a = t.length - 1; a >= 0; a--)
+        if (t[a].sticky) return t[a].key;
+      return null;
+    });
+    function j(t) {
+      const a = V.value.get(t);
+      if (!a) return;
+      const e = {
+        position: "sticky",
+        left: a,
+        zIndex: 4,
+        background: "var(--cui-table-head-bg, var(--color-surface-50))"
+      };
+      return t === A.value && (e.boxShadow = "2px 0 4px -1px rgba(0,0,0,0.08)"), e;
+    }
+    function q(t) {
+      const a = V.value.get(t.key), e = !!a, o = m.stickyHeader, l = t.sortable ? { cursor: "pointer", userSelect: "none" } : {};
+      return (e || o) && (l.position = "sticky", l.background = "var(--cui-table-head-bg, var(--color-surface-50))", l.zIndex = e && o ? 11 : e ? 5 : 10), o && (l.top = 0), e && (l.left = a, t.key === A.value && (l.boxShadow = "2px 0 4px -1px rgba(0,0,0,0.08)")), l;
+    }
+    const I = c(
+      () => m.stickyHeader ? {
+        position: "sticky",
+        top: 0,
+        zIndex: 10,
+        background: "var(--cui-table-head-bg, var(--color-surface-50))"
+      } : {}
+    ), R = Y(null);
+    function J(t) {
+      R.value = m.virtualize && m.maxHeight ? t : null;
+    }
+    const v = te(
+      c(() => i.displayData.value),
+      {
+        containerRef: R,
+        rowHeight: m.virtualRowHeight
+      }
+    ), P = c(
+      () => m.virtualize ? v.visibleRows.value : i.displayData.value
+    ), K = c(() => {
+      let t = i.visibleColumns.value.length;
+      return g.value && (t += 1), C.value && (t += 1), t;
+    });
+    return (t, a) => (r(), s(le, {
+      ref: (e) => J((e == null ? void 0 : e.scrollWrapper) ?? null),
+      size: u.size,
+      striped: u.striped,
+      hoverable: u.hoverable,
+      bordered: u.bordered,
+      "sticky-header": u.stickyHeader,
+      "max-height": u.maxHeight,
+      "min-width": L.value,
+      "aria-rowcount": u.virtualize ? d(i).displayData.value.length + 1 : void 0
+    }, {
+      default: n(() => [
+        f(ae, null, {
+          default: n(() => [
+            f(M, {
+              "aria-rowindex": u.virtualize ? 1 : void 0
+            }, {
+              default: n(() => [
+                g.value ? (r(), s(h, {
+                  key: 0,
+                  width: "3rem",
+                  align: "center",
+                  style: p(I.value)
+                }, {
+                  default: n(() => [
+                    u.showSelectAll ? (r(), s(N, {
+                      key: 0,
+                      "model-value": H.value === !0,
+                      indeterminate: H.value === "indeterminate",
+                      "onUpdate:modelValue": G
+                    }, null, 8, ["model-value", "indeterminate"])) : y("", !0)
+                  ]),
+                  _: 1
+                }, 8, ["style"])) : y("", !0),
+                (r(!0), k(b, null, w(d(i).visibleColumns.value, (e) => (r(), s(h, {
+                  key: e.key,
+                  align: e.align,
+                  width: e.width,
+                  nowrap: e.nowrap,
+                  style: p(q(e)),
+                  onClick: (o) => e.sortable ? d(i).applySort(e.key) : void 0
+                }, {
+                  default: n(() => [
+                    _("span", de, [
+                      S(z(e.label) + " ", 1),
+                      e.sortable ? (r(), s(W, {
+                        key: 0,
+                        name: O(e.key),
+                        size: "0.875rem",
+                        style: p({ opacity: F(e.key) })
+                      }, null, 8, ["name", "style"])) : y("", !0)
+                    ])
+                  ]),
+                  _: 2
+                }, 1032, ["align", "width", "nowrap", "style", "onClick"]))), 128)),
+                C.value ? (r(), s(h, {
+                  key: 1,
+                  width: "3rem",
+                  style: p(I.value)
+                }, null, 8, ["style"])) : y("", !0)
+              ]),
+              _: 1
+            }, 8, ["aria-rowindex"])
+          ]),
+          _: 1
+        }),
+        f(ie, null, {
+          default: n(() => [
+            u.virtualize && d(v).paddingTop.value > 0 ? (r(), k("tr", {
+              key: 0,
+              "aria-hidden": "true",
+              style: p({ height: `${d(v).paddingTop.value}px`, padding: 0, border: 0 })
+            }, [
+              _("td", {
+                colspan: K.value,
+                style: { padding: "0", border: "none" }
+              }, null, 8, ce)
+            ], 4)) : y("", !0),
+            (r(!0), k(b, null, w(P.value, (e, o) => (r(), s(se, {
+              key: B(e),
+              disabled: x(e).length === 0
+            }, {
+              menu: n(() => [
+                (r(!0), k(b, null, w(x(e), (l) => (r(), s(E, {
+                  key: l.key,
+                  onSelect: (Q) => $("row-action", { action: l, row: e })
+                }, {
+                  default: n(() => [
+                    S(z(l.label), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["onSelect"]))), 128))
+              ]),
+              default: n(() => [
+                f(M, {
+                  ref_for: !0,
+                  ref: (l) => {
+                    u.virtualize && o === 0 && d(v).measureRow((l == null ? void 0 : l.rowEl) ?? null);
+                  },
+                  selected: D(e),
+                  "aria-rowindex": u.virtualize ? d(v).firstVisibleIndex.value + o + 2 : void 0,
+                  style: { cursor: "pointer" },
+                  onClick: (l) => $("row-click", { row: e })
+                }, {
+                  default: n(() => [
+                    g.value ? (r(), s(h, {
+                      key: 0,
+                      align: "center",
+                      onClick: a[0] || (a[0] = T(() => {
+                      }, ["stop"]))
+                    }, {
+                      default: n(() => [
+                        f(N, {
+                          "model-value": D(e),
+                          "onUpdate:modelValue": (l) => d(i).toggleSelection(B(e))
+                        }, null, 8, ["model-value", "onUpdate:modelValue"])
+                      ]),
+                      _: 2
+                    }, 1024)) : y("", !0),
+                    (r(!0), k(b, null, w(d(i).visibleColumns.value, (l) => (r(), s(h, {
+                      key: l.key,
+                      align: l.align,
+                      nowrap: l.nowrap,
+                      style: p(j(l.key))
+                    }, {
+                      default: n(() => [
+                        Z(t.$slots, `cell-${l.key}`, {
+                          value: e[l.key],
+                          row: e
+                        }, () => [
+                          S(z(e[l.key]), 1)
+                        ])
+                      ]),
+                      _: 2
+                    }, 1032, ["align", "nowrap", "style"]))), 128)),
+                    C.value ? (r(), s(h, {
+                      key: 1,
+                      align: "right",
+                      onClick: a[1] || (a[1] = T(() => {
+                      }, ["stop"]))
+                    }, {
+                      default: n(() => [
+                        x(e).length > 0 ? (r(), s(re, { key: 0 }, {
+                          default: n(() => [
+                            f(ne, null, {
+                              default: n(() => [
+                                f(ue, {
+                                  variant: "ghost",
+                                  size: "xs",
+                                  style: { opacity: "0.4" }
+                                }, {
+                                  default: n(() => [
+                                    f(W, {
+                                      name: "dots-three",
+                                      size: "1rem"
+                                    })
+                                  ]),
+                                  _: 1
+                                })
+                              ]),
+                              _: 1
+                            }),
+                            f(oe, null, {
+                              default: n(() => [
+                                (r(!0), k(b, null, w(x(e), (l) => (r(), s(E, {
+                                  key: l.key,
+                                  onSelect: (Q) => $("row-action", { action: l, row: e })
+                                }, {
+                                  default: n(() => [
+                                    S(z(l.label), 1)
+                                  ]),
+                                  _: 2
+                                }, 1032, ["onSelect"]))), 128))
+                              ]),
+                              _: 2
+                            }, 1024)
+                          ]),
+                          _: 2
+                        }, 1024)) : y("", !0)
+                      ]),
+                      _: 2
+                    }, 1024)) : y("", !0)
+                  ]),
+                  _: 2
+                }, 1032, ["selected", "aria-rowindex", "onClick"])
+              ]),
+              _: 2
+            }, 1032, ["disabled"]))), 128)),
+            u.virtualize && d(v).paddingBottom.value > 0 ? (r(), k("tr", {
+              key: 1,
+              "aria-hidden": "true",
+              style: p({ height: `${d(v).paddingBottom.value}px`, padding: 0, border: 0 })
+            }, [
+              _("td", {
+                colspan: K.value,
+                style: { padding: "0", border: "none" }
+              }, null, 8, fe)
+            ], 4)) : y("", !0)
+          ]),
+          _: 3
+        })
+      ]),
+      _: 3
+    }, 8, ["size", "striped", "hoverable", "bordered", "sticky-header", "max-height", "min-width", "aria-rowcount"]));
+  }
+});
+export {
+  He as default
+};

package/dist/components/CuiDataGridTable.vue2.js

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

package/dist/components/CuiDataGridToolbar.vue.js

@@ -0,0 +1,73 @@
+import { defineComponent as g, computed as f, openBlock as t, createElementBlock as y, createElementVNode as s, renderSlot as u, createBlock as r, createCommentVNode as o, unref as l, normalizeStyle as p, withCtx as n, createTextVNode as c, toDisplayString as h, createVNode as v } from "vue";
+import { useDataGridState as C } from "../composables/useDataGrid.js";
+import k from "./CuiDataGridSearch.vue.js";
+import B from "./CuiDataGridColumnManager.vue.js";
+import b from "./CuiDataGridViewToggle.vue.js";
+/* empty css                           */
+import S from "./CuiDataGridViewManager.vue.js";
+import $ from "./CuiButton.vue.js";
+import T from "./CuiIcon.vue.js";
+import V from "./CuiBadge.vue.js";
+const _ = { class: "cui-data-grid-toolbar" }, w = { class: "cui-data-grid-toolbar__start" }, F = { class: "cui-data-grid-toolbar__end" }, j = /* @__PURE__ */ g({
+  __name: "CuiDataGridToolbar",
+  props: {
+    hideSearch: { type: Boolean },
+    hideColumnManager: { type: Boolean },
+    hideFilterToggle: { type: Boolean },
+    hideViewToggle: { type: Boolean },
+    hasCardSlot: { type: Boolean },
+    gridId: {},
+    viewAdapter: {}
+  },
+  setup(e) {
+    const i = C(), d = f(() => i.filters.value.length);
+    return (m, a) => (t(), y("div", _, [
+      s("div", w, [
+        u(m.$slots, "toolbar-start"),
+        e.hideSearch ? o("", !0) : (t(), r(k, { key: 0 }))
+      ]),
+      s("div", F, [
+        u(m.$slots, "toolbar-end"),
+        !e.hideFilterToggle && l(i).filterableColumns.value.length > 0 ? (t(), r($, {
+          key: 0,
+          variant: "outline",
+          size: "sm",
+          style: p({ background: l(i).filterPanelOpen.value ? "var(--cui-primary-bg)" : void 0 }),
+          onClick: a[0] || (a[0] = (z) => l(i).toggleFilterPanel())
+        }, {
+          prefix: n(() => [
+            v(T, {
+              name: "funnel",
+              size: "0.875rem"
+            })
+          ]),
+          default: n(() => [
+            a[1] || (a[1] = c(" Filters ", -1)),
+            d.value > 0 ? (t(), r(V, {
+              key: 0,
+              color: "primary",
+              size: "sm",
+              style: { "margin-left": "0.25rem" }
+            }, {
+              default: n(() => [
+                c(h(d.value), 1)
+              ]),
+              _: 1
+            })) : o("", !0)
+          ]),
+          _: 1
+        }, 8, ["style"])) : o("", !0),
+        e.hideColumnManager ? o("", !0) : (t(), r(B, { key: 1 })),
+        !e.hideViewToggle && e.hasCardSlot ? (t(), r(b, { key: 2 })) : o("", !0),
+        e.gridId ? (t(), r(S, {
+          key: 3,
+          "grid-id": e.gridId,
+          adapter: e.viewAdapter
+        }, null, 8, ["grid-id", "adapter"])) : o("", !0)
+      ])
+    ]));
+  }
+});
+export {
+  j as default
+};

package/dist/components/CuiDataGridToolbar.vue3.js

@@ -0,0 +1,5 @@
+import o from "./CuiDataGridToolbar.vue.js";
+/* empty css                        */
+export {
+  o as default
+};

package/dist/components/CuiDataGridViewManager.vue.js

@@ -0,0 +1,209 @@
+import { defineComponent as B, ref as w, onMounted as M, openBlock as n, createBlock as u, withCtx as a, createVNode as t, createTextVNode as l, unref as d, createCommentVNode as y, createElementBlock as k, Fragment as G, renderList as R, createElementVNode as g, toDisplayString as T, withModifiers as $, withKeys as A } from "vue";
+import { useDataGridState as E } from "../composables/useDataGrid.js";
+import { useDataGridViews as K } from "../composables/useDataGridViews.js";
+import L from "./CuiDropdown.vue.js";
+import j from "./CuiDropdownTrigger.vue.js";
+import F from "./CuiDropdownMenu.vue.js";
+import v from "./CuiDropdownItem.vue.js";
+import x from "./CuiDropdownDivider.vue.js";
+import H from "./CuiDropdownHeader.vue.js";
+import D from "./CuiButton.vue.js";
+import m from "./CuiIcon.vue.js";
+import U from "./CuiInput.vue.js";
+import q from "./CuiBadge.vue.js";
+const J = { style: { display: "flex", "align-items": "center", "justify-content": "space-between", width: "100%" } }, O = { style: { display: "flex", "align-items": "center", gap: "calc(0.375rem * var(--cui-density-scale, 1))" } }, P = ["onClick"], Q = {
+  key: 3,
+  style: { padding: "calc(0.375rem * var(--cui-density-scale, 1)) calc(0.625rem * var(--cui-density-scale, 1))", display: "flex", gap: "calc(0.375rem * var(--cui-density-scale, 1))" }
+}, se = /* @__PURE__ */ B({
+  __name: "CuiDataGridViewManager",
+  props: {
+    gridId: {},
+    adapter: {}
+  },
+  setup(S) {
+    const V = S, r = E(), i = K({
+      gridId: V.gridId,
+      adapter: V.adapter
+    }), p = w(!1), s = w(""), c = w(!1);
+    M(() => {
+      i.fetchViews();
+    });
+    function z(f) {
+      const e = i.views.value.find((o) => o.id === f);
+      e && (r.loadConfig(e.config), i.selectView(f));
+    }
+    async function I() {
+      if (i.activeViewId.value) {
+        c.value = !0;
+        try {
+          await i.updateView(i.activeViewId.value, r.getConfig()), r.markClean();
+        } finally {
+          c.value = !1;
+        }
+      }
+    }
+    async function C() {
+      if (s.value.trim()) {
+        c.value = !0;
+        try {
+          await i.saveView(s.value.trim(), r.getConfig()), r.markClean(), s.value = "", p.value = !1;
+        } finally {
+          c.value = !1;
+        }
+      }
+    }
+    async function b(f) {
+      await i.removeView(f);
+    }
+    function _() {
+      r.resetToDefaults(), i.selectView("");
+    }
+    return (f, e) => (n(), u(L, null, {
+      default: a(() => [
+        t(j, null, {
+          default: a(() => [
+            t(D, {
+              variant: "outline",
+              size: "sm"
+            }, {
+              prefix: a(() => [
+                t(m, {
+                  name: "bookmark-simple",
+                  size: "0.875rem"
+                })
+              ]),
+              default: a(() => [
+                e[2] || (e[2] = l(" Views ", -1)),
+                d(r).isDirty.value ? (n(), u(q, {
+                  key: 0,
+                  dot: "",
+                  color: "warning",
+                  animation: "pulse",
+                  size: "sm",
+                  style: { "margin-left": "0.25rem" }
+                })) : y("", !0)
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }),
+        t(F, { "min-width": "14rem" }, {
+          default: a(() => [
+            t(H, null, {
+              default: a(() => [...e[3] || (e[3] = [
+                l("Saved Views", -1)
+              ])]),
+              _: 1
+            }),
+            d(i).views.value.length > 0 ? (n(!0), k(G, { key: 0 }, R(d(i).views.value, (o) => (n(), u(v, {
+              key: o.id,
+              "close-on-select": !0,
+              onSelect: (N) => z(o.id)
+            }, {
+              default: a(() => [
+                g("div", J, [
+                  g("span", O, [
+                    d(i).activeViewId.value === o.id ? (n(), u(m, {
+                      key: 0,
+                      name: "check",
+                      size: "0.75rem",
+                      style: { color: "var(--cui-primary)" }
+                    })) : y("", !0),
+                    l(" " + T(o.name), 1)
+                  ]),
+                  g("button", {
+                    style: { border: "none", background: "none", cursor: "pointer", padding: "calc(0.125rem * var(--cui-density-scale, 1))", color: "var(--cui-text-tertiary)", opacity: "0.6" },
+                    onClick: $((N) => b(o.id), ["stop"])
+                  }, [
+                    t(m, {
+                      name: "trash",
+                      size: "0.75rem"
+                    })
+                  ], 8, P)
+                ])
+              ]),
+              _: 2
+            }, 1032, ["onSelect"]))), 128)) : (n(), u(v, {
+              key: 1,
+              disabled: ""
+            }, {
+              default: a(() => [...e[4] || (e[4] = [
+                l("No saved views", -1)
+              ])]),
+              _: 1
+            })),
+            t(x),
+            d(i).activeViewId.value && d(r).isDirty.value ? (n(), u(v, {
+              key: 2,
+              "close-on-select": !1,
+              onSelect: I
+            }, {
+              default: a(() => [
+                t(m, {
+                  name: "floppy-disk",
+                  size: "0.875rem",
+                  style: { color: "var(--cui-text-secondary)" }
+                }),
+                e[5] || (e[5] = l(" Save current ", -1))
+              ]),
+              _: 1
+            })) : y("", !0),
+            t(v, {
+              "close-on-select": !1,
+              onSelect: e[0] || (e[0] = (o) => p.value = !p.value)
+            }, {
+              default: a(() => [
+                t(m, {
+                  name: "floppy-disk",
+                  size: "0.875rem",
+                  style: { color: "var(--cui-text-secondary)" }
+                }),
+                e[6] || (e[6] = l(" Save as... ", -1))
+              ]),
+              _: 1
+            }),
+            p.value ? (n(), k("div", Q, [
+              t(U, {
+                modelValue: s.value,
+                "onUpdate:modelValue": e[1] || (e[1] = (o) => s.value = o),
+                placeholder: "View name",
+                size: "sm",
+                style: { flex: "1" },
+                onKeydown: A(C, ["enter"])
+              }, null, 8, ["modelValue"]),
+              t(D, {
+                size: "xs",
+                variant: "solid",
+                disabled: !s.value.trim() || c.value,
+                onClick: C
+              }, {
+                default: a(() => [...e[7] || (e[7] = [
+                  l(" Save ", -1)
+                ])]),
+                _: 1
+              }, 8, ["disabled"])
+            ])) : y("", !0),
+            t(x),
+            t(v, { onSelect: _ }, {
+              default: a(() => [
+                t(m, {
+                  name: "arrow-counter-clockwise",
+                  size: "0.875rem",
+                  style: { color: "var(--cui-text-secondary)" }
+                }),
+                e[8] || (e[8] = l(" Reset to defaults ", -1))
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        })
+      ]),
+      _: 1
+    }));
+  }
+});
+export {
+  se as default
+};

package/dist/components/CuiDataGridViewManager.vue2.js

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

package/dist/components/CuiDataGridViewToggle.vue.js

@@ -0,0 +1,43 @@
+import { defineComponent as u, openBlock as l, createElementBlock as m, createVNode as i, unref as r, normalizeStyle as o, withCtx as a } from "vue";
+import { useDataGridState as c } from "../composables/useDataGrid.js";
+import s from "./CuiButton.vue.js";
+import n from "./CuiIcon.vue.js";
+const g = { class: "cui-data-grid-view-toggle" }, C = /* @__PURE__ */ u({
+  __name: "CuiDataGridViewToggle",
+  setup(v) {
+    const e = c();
+    return (p, t) => (l(), m("div", g, [
+      i(s, {
+        variant: "ghost",
+        size: "xs",
+        style: o({ background: r(e).viewMode.value === "grid" ? "var(--cui-primary-bg)" : void 0 }),
+        onClick: t[0] || (t[0] = (d) => r(e).setViewMode("grid"))
+      }, {
+        default: a(() => [
+          i(n, {
+            name: "table",
+            size: "0.875rem"
+          })
+        ]),
+        _: 1
+      }, 8, ["style"]),
+      i(s, {
+        variant: "ghost",
+        size: "xs",
+        style: o({ background: r(e).viewMode.value === "card" ? "var(--cui-primary-bg)" : void 0 }),
+        onClick: t[1] || (t[1] = (d) => r(e).setViewMode("card"))
+      }, {
+        default: a(() => [
+          i(n, {
+            name: "squares-four",
+            size: "0.875rem"
+          })
+        ]),
+        _: 1
+      }, 8, ["style"])
+    ]));
+  }
+});
+export {
+  C as default
+};

package/dist/components/CuiDataGridViewToggle.vue3.js

@@ -0,0 +1,5 @@
+import o from "./CuiDataGridViewToggle.vue.js";
+/* empty css                           */
+export {
+  o as default
+};