@itguy614/clean-ui 0.9.0 → 1.0.1

package/dist/components/CuiDataGridBulkBar.vue.js

@@ -0,0 +1,70 @@
+import { defineComponent as h, computed as d, openBlock as i, createBlock as m, Transition as B, withCtx as r, createElementBlock as _, createElementVNode as o, toDisplayString as s, unref as n, Fragment as w, renderList as S, createTextVNode as v, createVNode as f, createCommentVNode as V } from "vue";
+import { useDataGridState as z } from "../composables/useDataGrid.js";
+import k from "./CuiButton.vue.js";
+import D from "./CuiIcon.vue.js";
+import { useMessages as N } from "../composables/useMessages.js";
+const G = {
+  key: 0,
+  class: "cui-data-grid-bulk-bar"
+}, R = { class: "cui-data-grid-bulk-bar__inner" }, E = { class: "cui-data-grid-bulk-bar__count" }, T = { class: "cui-data-grid-bulk-bar__actions" }, j = /* @__PURE__ */ h({
+  __name: "CuiDataGridBulkBar",
+  props: {
+    actions: {}
+  },
+  emits: ["bulk-action"],
+  setup(p, { emit: b }) {
+    const l = N(), g = b, t = z(), c = d(() => t.selectedRows.value.size), C = d(() => c.value > 0);
+    function x() {
+      return t.displayData.value.filter(
+        (a) => t.selectedRows.value.has(String(a.id ?? ""))
+      );
+    }
+    function y(a) {
+      g("bulk-action", { action: a, rows: x() });
+    }
+    return (a, u) => (i(), m(B, { name: "cui-bulk-bar" }, {
+      default: r(() => [
+        C.value ? (i(), _("div", G, [
+          o("div", R, [
+            o("span", E, s(n(l).dataGrid.selected(c.value)), 1),
+            o("div", T, [
+              (i(!0), _(w, null, S(p.actions, (e) => (i(), m(k, {
+                key: e.key,
+                size: "xs",
+                variant: e.variant === "destructive" ? "solid" : "outline",
+                color: e.variant === "destructive" ? "error" : "primary",
+                onClick: ($) => y(e)
+              }, {
+                default: r(() => [
+                  v(s(e.label), 1)
+                ]),
+                _: 2
+              }, 1032, ["variant", "color", "onClick"]))), 128))
+            ]),
+            f(k, {
+              variant: "ghost",
+              size: "xs",
+              onClick: u[0] || (u[0] = (e) => n(t).clearSelection()),
+              style: { "margin-left": "auto" }
+            }, {
+              prefix: r(() => [
+                f(D, {
+                  name: "x",
+                  size: "0.75rem"
+                })
+              ]),
+              default: r(() => [
+                v(" " + s(n(l).clear), 1)
+              ]),
+              _: 1
+            })
+          ])
+        ])) : V("", !0)
+      ]),
+      _: 1
+    }));
+  }
+});
+export {
+  j as default
+};

package/dist/components/CuiDataGridBulkBar.vue3.js

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

package/dist/components/CuiDataGridCardView.vue.js

@@ -0,0 +1,31 @@
+import { defineComponent as s, openBlock as r, createBlock as u, withCtx as c, createElementBlock as o, Fragment as l, renderList as m, unref as p, renderSlot as f } from "vue";
+import { useDataGridState as g } from "../composables/useDataGrid.js";
+import _ from "./CuiGrid.vue.js";
+const B = /* @__PURE__ */ s({
+  __name: "CuiDataGridCardView",
+  props: {
+    rowKey: {}
+  },
+  setup(n) {
+    const a = n, i = g();
+    function d(e) {
+      return String(e[a.rowKey ?? "id"] ?? "");
+    }
+    return (e, C) => (r(), u(_, {
+      cols: { sm: 1, md: 2, lg: 3 },
+      gap: "4"
+    }, {
+      default: c(() => [
+        (r(!0), o(l, null, m(p(i).displayData.value, (t) => (r(), o("div", {
+          key: d(t)
+        }, [
+          f(e.$slots, "card", { row: t })
+        ]))), 128))
+      ]),
+      _: 3
+    }));
+  }
+});
+export {
+  B as default
+};

package/dist/components/CuiDataGridCardView.vue2.js

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

package/dist/components/CuiDataGridColumnManager.vue.js

@@ -0,0 +1,86 @@
+import { defineComponent as x, ref as m, openBlock as c, createBlock as C, withCtx as i, createVNode as s, createTextVNode as k, createElementVNode as V, createElementBlock as d, Fragment as h, renderList as S, unref as f, normalizeStyle as T } from "vue";
+import { useDataGridState as z } from "../composables/useDataGrid.js";
+import B from "./CuiPopover.vue.js";
+import w from "./CuiButton.vue.js";
+import E from "./CuiCheckbox.vue.js";
+import p from "./CuiIcon.vue.js";
+const L = { style: { display: "flex", "flex-direction": "column", gap: "calc(0.125rem * var(--cui-density-scale, 1))" } }, N = ["onDragstart", "onDragover", "onDrop"], O = /* @__PURE__ */ x({
+  __name: "CuiDataGridColumnManager",
+  setup(G) {
+    const u = z(), t = m(null), n = m(null);
+    function v(a) {
+      var e;
+      return ((e = u.columns.find((r) => r.key === a)) == null ? void 0 : e.label) ?? a;
+    }
+    function g(a, e) {
+      t.value = e, a.dataTransfer && (a.dataTransfer.effectAllowed = "move", a.dataTransfer.setData("text/plain", String(e)));
+    }
+    function D(a, e) {
+      a.preventDefault(), n.value = e;
+    }
+    function y() {
+      n.value = null;
+    }
+    function _(a, e) {
+      a.preventDefault(), t.value !== null && t.value !== e && u.reorderColumns(t.value, e), t.value = null, n.value = null;
+    }
+    function b() {
+      t.value = null, n.value = null;
+    }
+    return (a, e) => (c(), C(B, {
+      placement: "bottom",
+      width: "240px",
+      title: "Columns"
+    }, {
+      content: i(() => [
+        V("div", L, [
+          (c(!0), d(h, null, S(f(u).columnState.value, (r, o) => (c(), d("div", {
+            key: r.key,
+            draggable: "true",
+            style: T([{ display: "flex", "align-items": "center", gap: "calc(0.5rem * var(--cui-density-scale, 1))", padding: "calc(0.375rem * var(--cui-density-scale, 1)) 0", "border-radius": "0.25rem", cursor: "grab" }, {
+              opacity: t.value === o ? 0.5 : 1,
+              borderTop: n.value === o ? "2px solid var(--cui-primary)" : "2px solid transparent"
+            }]),
+            onDragstart: (l) => g(l, o),
+            onDragover: (l) => D(l, o),
+            onDragleave: y,
+            onDrop: (l) => _(l, o),
+            onDragend: b
+          }, [
+            s(p, {
+              name: "dots-six-vertical",
+              size: "0.875rem",
+              style: { color: "var(--cui-text-tertiary)", "flex-shrink": "0" }
+            }),
+            s(E, {
+              "model-value": r.visible,
+              label: v(r.key),
+              "onUpdate:modelValue": (l) => f(u).toggleColumnVisibility(r.key)
+            }, null, 8, ["model-value", "label", "onUpdate:modelValue"])
+          ], 44, N))), 128))
+        ])
+      ]),
+      default: i(() => [
+        s(w, {
+          variant: "outline",
+          size: "sm"
+        }, {
+          prefix: i(() => [
+            s(p, {
+              name: "columns",
+              size: "0.875rem"
+            })
+          ]),
+          default: i(() => [
+            e[0] || (e[0] = k(" Columns ", -1))
+          ]),
+          _: 1
+        })
+      ]),
+      _: 1
+    }));
+  }
+});
+export {
+  O as default
+};

package/dist/components/CuiDataGridColumnManager.vue2.js

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

package/dist/components/CuiDataGridFilterPanel.vue.js

@@ -0,0 +1,181 @@
+import { defineComponent as U, ref as B, watch as D, computed as O, unref as n, openBlock as u, createElementBlock as o, createElementVNode as s, toDisplayString as c, createVNode as d, normalizeStyle as N, withCtx as y, Fragment as h, renderList as x, createBlock as m, createCommentVNode as V, createTextVNode as C } from "vue";
+import { useDataGridState as M } from "../composables/useDataGrid.js";
+import $ from "./CuiInput.vue.js";
+import w from "./CuiSelect.vue.js";
+import E from "./CuiCheckbox.vue.js";
+import p from "./CuiButton.vue.js";
+import b from "./CuiIcon.vue.js";
+import { useMessages as R } from "../composables/useMessages.js";
+const j = {
+  key: 0,
+  class: "cui-data-grid-filter-panel"
+}, L = { class: "cui-data-grid-filter-panel__header" }, q = { class: "cui-data-grid-filter-panel__title" }, H = { style: { display: "flex", gap: "calc(0.25rem * var(--cui-density-scale, 1))" } }, J = { class: "cui-data-grid-filter-panel__body" }, Q = { class: "cui-data-grid-filter-panel__label" }, W = {
+  key: 2,
+  style: { display: "flex", "flex-direction": "column", gap: "calc(0.25rem * var(--cui-density-scale, 1))" }
+}, X = {
+  key: 3,
+  style: { display: "flex", gap: "calc(0.5rem * var(--cui-density-scale, 1))" }
+}, Y = ["value", "onInput"], Z = ["value", "onInput"], ee = { class: "cui-data-grid-filter-panel__footer" }, de = /* @__PURE__ */ U({
+  __name: "CuiDataGridFilterPanel",
+  setup(te) {
+    const f = R(), r = M(), i = B({});
+    D(
+      () => r.filterPanelOpen.value,
+      (t) => {
+        t && A();
+      },
+      { immediate: !0 }
+    );
+    function A() {
+      const t = {};
+      for (const l of r.filters.value)
+        t[l.key] = l.value;
+      i.value = t;
+    }
+    function S(t) {
+      return String(i.value[t] ?? "");
+    }
+    function K(t, l) {
+      i.value = { ...i.value, [t]: String(l) };
+    }
+    function z(t) {
+      return String(i.value[t] ?? "");
+    }
+    function T(t, l) {
+      i.value = { ...i.value, [t]: String(l) };
+    }
+    function _(t) {
+      const l = i.value[t];
+      return Array.isArray(l) ? l : l ? [l] : [];
+    }
+    function F(t, l) {
+      const e = _(t), a = e.includes(l) ? e.filter((k) => k !== l) : [...e, l];
+      i.value = { ...i.value, [t]: a };
+    }
+    function v(t) {
+      const l = i.value[t];
+      return Array.isArray(l) && l.length === 2 ? [l[0], l[1]] : ["", ""];
+    }
+    function g(t, l, e) {
+      const a = v(t);
+      a[l] = String(e), i.value = { ...i.value, [t]: [...a] };
+    }
+    function P() {
+      r.clearFilters();
+      for (const t of r.filterableColumns.value) {
+        const l = t.filterKey ?? t.key, e = i.value[l];
+        !e || Array.isArray(e) && e.length === 0 || e === "" || t.filterType === "date-range" && Array.isArray(e) && (!e[0] || !e[1]) || r.applyFilter({
+          key: l,
+          value: e,
+          type: t.filterType ?? "text"
+        });
+      }
+    }
+    function G() {
+      i.value = {}, r.clearFilters();
+    }
+    const I = O(() => Object.values(i.value).some((t) => Array.isArray(t) ? t.length > 0 && t.some(Boolean) : !!t));
+    return (t, l) => n(r).filterPanelOpen.value ? (u(), o("div", j, [
+      s("div", L, [
+        s("span", q, c(n(f).dataGrid.filters), 1),
+        s("div", H, [
+          d(p, {
+            variant: "ghost",
+            size: "xs",
+            style: N({ color: n(r).filterPanelPinned.value ? "var(--cui-primary)" : void 0 }),
+            onClick: l[0] || (l[0] = (e) => n(r).toggleFilterPanelPin())
+          }, {
+            default: y(() => [
+              d(b, {
+                name: "push-pin",
+                size: "0.875rem"
+              })
+            ]),
+            _: 1
+          }, 8, ["style"]),
+          d(p, {
+            variant: "ghost",
+            size: "xs",
+            onClick: l[1] || (l[1] = (e) => n(r).toggleFilterPanel())
+          }, {
+            default: y(() => [
+              d(b, {
+                name: "x",
+                size: "0.875rem"
+              })
+            ]),
+            _: 1
+          })
+        ])
+      ]),
+      s("div", J, [
+        (u(!0), o(h, null, x(n(r).filterableColumns.value, (e) => (u(), o("div", {
+          key: e.key,
+          class: "cui-data-grid-filter-panel__field"
+        }, [
+          s("label", Q, c(e.label), 1),
+          e.filterType === "text" || !e.filterType ? (u(), m($, {
+            key: 0,
+            "model-value": S(e.filterKey ?? e.key),
+            placeholder: n(f).dataGrid.filterColumn(e.label),
+            size: "sm",
+            "onUpdate:modelValue": (a) => K(e.filterKey ?? e.key, a)
+          }, null, 8, ["model-value", "placeholder", "onUpdate:modelValue"])) : e.filterType === "select" ? (u(), m(w, {
+            key: 1,
+            "model-value": z(e.filterKey ?? e.key),
+            options: [{ label: n(f).dataGrid.all, value: "" }, ...e.filterOptions ?? []],
+            size: "sm",
+            "onUpdate:modelValue": (a) => T(e.filterKey ?? e.key, String(a ?? ""))
+          }, null, 8, ["model-value", "options", "onUpdate:modelValue"])) : e.filterType === "multi-select" ? (u(), o("div", W, [
+            (u(!0), o(h, null, x(e.filterOptions ?? [], (a) => (u(), m(E, {
+              key: a.value,
+              "model-value": _(e.filterKey ?? e.key).includes(a.value),
+              label: a.label,
+              size: "sm",
+              "onUpdate:modelValue": (k) => F(e.filterKey ?? e.key, a.value)
+            }, null, 8, ["model-value", "label", "onUpdate:modelValue"]))), 128))
+          ])) : e.filterType === "date-range" ? (u(), o("div", X, [
+            s("input", {
+              type: "date",
+              class: "cui-data-grid-filter-panel__date-input",
+              value: v(e.filterKey ?? e.key)[0],
+              onInput: (a) => g(e.filterKey ?? e.key, 0, a.target.value)
+            }, null, 40, Y),
+            s("input", {
+              type: "date",
+              class: "cui-data-grid-filter-panel__date-input",
+              value: v(e.filterKey ?? e.key)[1],
+              onInput: (a) => g(e.filterKey ?? e.key, 1, a.target.value)
+            }, null, 40, Z)
+          ])) : V("", !0)
+        ]))), 128))
+      ]),
+      s("div", ee, [
+        d(p, {
+          size: "xs",
+          variant: "solid",
+          onClick: P
+        }, {
+          default: y(() => [
+            C(c(n(f).apply), 1)
+          ]),
+          _: 1
+        }),
+        d(p, {
+          size: "xs",
+          variant: "ghost",
+          disabled: !I.value,
+          onClick: G
+        }, {
+          default: y(() => [
+            C(c(n(f).clearAll), 1)
+          ]),
+          _: 1
+        }, 8, ["disabled"])
+      ])
+    ])) : V("", !0);
+  }
+});
+export {
+  de as default
+};

package/dist/components/CuiDataGridFilterPanel.vue3.js

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

package/dist/components/CuiDataGridPagination.vue.js

@@ -0,0 +1,28 @@
+import { defineComponent as p, openBlock as g, createBlock as u, unref as t } from "vue";
+import { useDataGridState as c } from "../composables/useDataGrid.js";
+import s from "./CuiPagination.vue.js";
+const d = /* @__PURE__ */ p({
+  __name: "CuiDataGridPagination",
+  emits: ["navigate"],
+  setup(l, { emit: o }) {
+    const a = c(), n = o;
+    function i(e) {
+      a.setPage(e), n("navigate");
+    }
+    function r(e) {
+      a.setPerPage(e), n("navigate");
+    }
+    return (e, m) => (g(), u(s, {
+      "current-page": t(a).paginationMeta.value.current_page,
+      "total-pages": t(a).paginationMeta.value.last_page,
+      "per-page": t(a).paginationMeta.value.per_page,
+      total: t(a).paginationMeta.value.total,
+      size: "sm",
+      "onUpdate:currentPage": i,
+      "onUpdate:perPage": r
+    }, null, 8, ["current-page", "total-pages", "per-page", "total"]));
+  }
+});
+export {
+  d as default
+};

package/dist/components/CuiDataGridPagination.vue2.js

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

package/dist/components/CuiDataGridSearch.vue.js

@@ -0,0 +1,69 @@
+import { defineComponent as m, ref as c, watch as d, openBlock as f, createElementBlock as p, createVNode as r, withKeys as h, unref as v, createSlots as _, withCtx as i } from "vue";
+import { useDataGridState as g } from "../composables/useDataGrid.js";
+import x from "./CuiInput.vue.js";
+import s from "./CuiIcon.vue.js";
+import y from "./CuiButton.vue.js";
+import { useMessages as C } from "../composables/useMessages.js";
+const w = { style: { position: "relative", "max-width": "20rem", flex: "1" } }, D = /* @__PURE__ */ m({
+  __name: "CuiDataGridSearch",
+  setup(S) {
+    const l = C();
+    let o = null;
+    const a = g(), e = c(a.searchQuery.value);
+    d(
+      () => a.searchQuery.value,
+      (t) => {
+        e.value = t;
+      }
+    );
+    function u(t) {
+      e.value = String(t), o && clearTimeout(o), o = setTimeout(() => {
+        a.search(e.value);
+      }, 300);
+    }
+    function n() {
+      e.value = "", a.clearSearch();
+    }
+    return (t, k) => (f(), p("div", w, [
+      r(x, {
+        "model-value": e.value,
+        placeholder: v(l).dataGrid.search,
+        size: "sm",
+        "onUpdate:modelValue": u,
+        onKeydown: h(n, ["escape"])
+      }, _({
+        prefix: i(() => [
+          r(s, {
+            name: "magnifying-glass",
+            size: "0.875rem"
+          })
+        ]),
+        _: 2
+      }, [
+        e.value ? {
+          name: "suffix",
+          fn: i(() => [
+            r(y, {
+              variant: "ghost",
+              size: "xs",
+              onClick: n,
+              style: { margin: "-0.25rem" }
+            }, {
+              default: i(() => [
+                r(s, {
+                  name: "x",
+                  size: "0.75rem"
+                })
+              ]),
+              _: 1
+            })
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1032, ["model-value", "placeholder"])
+    ]));
+  }
+});
+export {
+  D as default
+};

package/dist/components/CuiDataGridSearch.vue2.js

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