@itguy614/clean-ui 0.9.0 → 1.0.0

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
+};