@itguy614/clean-ui 0.9.0 → 1.0.0

package/dist/components/CuiContextMenu.vue2.js

@@ -0,0 +1,136 @@
+import { defineComponent as W, ref as f, onMounted as q, onUnmounted as z, provide as K, withDirectives as O, openBlock as y, createElementBlock as $, renderSlot as D, createBlock as I, Teleport as U, normalizeStyle as j, normalizeClass as N, createCommentVNode as P, vShow as V, nextTick as X } from "vue";
+import { DropdownContextKey as Y } from "./dropdown-context.js";
+const J = /* @__PURE__ */ W({
+  __name: "CuiContextMenu",
+  props: {
+    minWidth: { default: "12rem" },
+    hidden: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 }
+  },
+  setup(p, { expose: E }) {
+    const b = p, n = f(!1), s = f(!1), x = f(null), m = f(null), h = f({});
+    let i = null;
+    const k = `cui-ctx-${Math.random().toString(36).slice(2, 8)}`;
+    function v() {
+      b.disabled || (i && (clearTimeout(i), i = null), s.value = !1, n.value = !0);
+    }
+    function c() {
+      n.value && (s.value = !0, i = setTimeout(() => {
+        n.value = !1, s.value = !1;
+      }, 150));
+    }
+    function T() {
+      c();
+    }
+    function A(e, t) {
+      const o = window.innerWidth, u = window.innerHeight, l = 16, r = {
+        position: "fixed",
+        zIndex: "9990"
+      };
+      r.left = `${e}px`, r.top = `${t}px`, r.maxHeight = `${Math.min(u - t - l, 400)}px`, h.value = r, X(() => {
+        var M;
+        if (!m.value) return;
+        const d = m.value.getBoundingClientRect(), a = { ...r };
+        if (d.right > o - l && (a.left = `${Math.max(l, e - d.width)}px`), d.bottom > u - l) {
+          const L = Math.max(l, t - d.height);
+          a.top = `${L}px`, a.maxHeight = `${Math.min(t - l, 400)}px`;
+        }
+        h.value = a;
+        const w = (M = m.value) == null ? void 0 : M.querySelector(
+          '[role="menuitem"]:not([aria-disabled="true"])'
+        );
+        w == null || w.focus();
+      });
+    }
+    function B(e) {
+      b.disabled || (e.preventDefault(), n.value && (n.value = !1, s.value = !1, i && (clearTimeout(i), i = null)), A(e.clientX, e.clientY), v());
+    }
+    function _(e) {
+      var u, l, r, d;
+      if (!m.value) return;
+      if (e.key === "Escape") {
+        e.preventDefault(), e.stopPropagation(), c();
+        return;
+      }
+      const t = Array.from(m.value.querySelectorAll(
+        '[role="menuitem"]:not([aria-disabled="true"]), [role="menuitemcheckbox"]:not([aria-disabled="true"]), [role="menuitemradio"]:not([aria-disabled="true"])'
+      )), o = t.indexOf(document.activeElement);
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        const a = o < t.length - 1 ? o + 1 : 0;
+        (u = t[a]) == null || u.focus();
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        const a = o > 0 ? o - 1 : t.length - 1;
+        (l = t[a]) == null || l.focus();
+      } else e.key === "Home" ? (e.preventDefault(), (r = t[0]) == null || r.focus()) : e.key === "End" && (e.preventDefault(), (d = t[t.length - 1]) == null || d.focus());
+    }
+    function C(e) {
+      var u;
+      if (!n.value) return;
+      const t = e.target;
+      if ((u = x.value) != null && u.contains(t)) return;
+      const o = document.querySelector(`[data-cui-context-menu-id="${k}"]`);
+      o != null && o.contains(t) || c();
+    }
+    function S() {
+      n.value && c();
+    }
+    q(() => {
+      document.addEventListener("mousedown", C), window.addEventListener("scroll", S, !0);
+    }), z(() => {
+      document.removeEventListener("mousedown", C), window.removeEventListener("scroll", S, !0), i && clearTimeout(i);
+    });
+    const g = /* @__PURE__ */ new Set();
+    function R(e) {
+      return g.add(e), () => g.delete(e);
+    }
+    function H(e) {
+      for (const t of g)
+        t !== e && t();
+    }
+    return K(Y, {
+      isOpen: n,
+      isClosing: s,
+      trigger: f("click"),
+      triggerEl: x,
+      placement: f("bottom"),
+      open: v,
+      close: c,
+      toggle: () => {
+        n.value ? c() : v();
+      },
+      closeAll: T,
+      registerSubMenu: R,
+      closeSiblingSubMenus: H,
+      reposition: () => {
+      }
+    }), E({ open: v, close: c, isOpen: n }), (e, t) => O((y(), $("div", {
+      ref_key: "wrapperRef",
+      ref: x,
+      class: "cui-context-menu",
+      onContextmenu: B
+    }, [
+      D(e.$slots, "default", {}, void 0, !0),
+      (y(), I(U, { to: "body" }, [
+        n.value || s.value ? (y(), $("div", {
+          key: 0,
+          ref_key: "menuRef",
+          ref: m,
+          class: N(["cui-context-menu__panel", { "cui-context-menu__panel--closing": s.value }]),
+          "data-cui-context-menu-id": k,
+          style: j({ ...h.value, minWidth: p.minWidth }),
+          role: "menu",
+          onKeydown: _
+        }, [
+          D(e.$slots, "menu", {}, void 0, !0)
+        ], 38)) : P("", !0)
+      ]))
+    ], 544)), [
+      [V, !p.hidden]
+    ]);
+  }
+});
+export {
+  J as default
+};

package/dist/components/CuiCopyButton.vue.js

@@ -0,0 +1,63 @@
+import { defineComponent as u, computed as p, withDirectives as f, openBlock as l, createBlock as y, unref as o, withCtx as i, createVNode as n, createElementBlock as C, toDisplayString as h, createCommentVNode as z, normalizeStyle as v, vShow as S } from "vue";
+import { clampSize as x } from "../utils/sizing.js";
+import B from "./CuiButton.vue.js";
+import k from "./CuiIcon.vue.js";
+import w from "./CuiTooltip.vue.js";
+import { useCopyToClipboard as D } from "../composables/useCopyToClipboard.js";
+const T = { key: 0 }, O = /* @__PURE__ */ u({
+  __name: "CuiCopyButton",
+  props: {
+    value: {},
+    variant: { default: "ghost" },
+    tooltip: { default: "Copy" },
+    copiedTooltip: { default: "Copied!" },
+    resetDelay: { default: 2e3 },
+    showLabel: { type: Boolean, default: !1 },
+    hidden: { type: Boolean, default: !1 },
+    color: { default: "primary" },
+    size: { default: "sm" }
+  },
+  setup(e) {
+    const r = ["xs", "sm", "md"], a = e, { copied: t, copy: c } = D(a.resetDelay);
+    function s() {
+      c(a.value);
+    }
+    const m = {
+      xs: "0.75rem",
+      sm: "0.875rem",
+      md: "1rem"
+    }, d = p(() => x(a.size, r));
+    return (b, E) => f((l(), y(w, {
+      text: o(t) ? e.copiedTooltip : e.tooltip,
+      placement: "top",
+      "show-delay": 300
+    }, {
+      default: i(() => [
+        n(B, {
+          size: e.size,
+          variant: e.variant,
+          color: o(t) ? "success" : e.color,
+          onClick: s
+        }, {
+          prefix: i(() => [
+            n(k, {
+              name: o(t) ? "check" : "copy",
+              size: m[d.value],
+              style: v({ transition: "transform 0.15s ease", transform: o(t) ? "scale(1.1)" : "scale(1)" })
+            }, null, 8, ["name", "size", "style"])
+          ]),
+          default: i(() => [
+            e.showLabel ? (l(), C("span", T, h(o(t) ? "Copied" : "Copy"), 1)) : z("", !0)
+          ]),
+          _: 1
+        }, 8, ["size", "variant", "color"])
+      ]),
+      _: 1
+    }, 8, ["text"])), [
+      [S, !e.hidden]
+    ]);
+  }
+});
+export {
+  O as default
+};

package/dist/components/CuiCopyButton.vue2.js

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

package/dist/components/CuiDataGrid.vue.js

@@ -0,0 +1,176 @@
+import { defineComponent as p, useSlots as z, toRef as A, watch as b, withDirectives as D, openBlock as i, createElementBlock as c, createBlock as s, withCtx as f, renderSlot as u, createCommentVNode as h, createVNode as m, unref as n, normalizeStyle as R, createElementVNode as V, normalizeProps as S, guardReactiveProps as B, createSlots as x, renderList as H, createTextVNode as T, toDisplayString as G, vShow as K } from "vue";
+import { useDataGrid as N, provideDataGrid as M } from "../composables/useDataGrid.js";
+import Q from "./CuiDataGridToolbar.vue.js";
+/* empty css                        */
+import E from "./CuiDataGridTable.vue.js";
+import F from "./CuiDataGridCardView.vue.js";
+import U from "./CuiDataGridPagination.vue.js";
+import I from "./CuiDataGridBulkBar.vue.js";
+/* empty css                        */
+import O from "./CuiDataGridFilterPanel.vue.js";
+/* empty css                            */
+import L from "./CuiDataGridActiveFilters.vue.js";
+/* empty css                              */
+import j from "./CuiEmptyState.vue.js";
+import q from "./CuiSkeleton.vue.js";
+import { useMessages as J } from "../composables/useMessages.js";
+const W = { class: "cui-data-grid" }, X = {
+  key: 1,
+  style: { padding: "calc(1rem * var(--cui-density-scale, 1))" }
+}, Y = { key: 2 }, Z = { style: { flex: "1", "min-width": "0" } }, ge = /* @__PURE__ */ p({
+  __name: "CuiDataGrid",
+  props: {
+    columns: {},
+    data: {},
+    serverSide: { type: Boolean, default: !1 },
+    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" },
+    loading: { type: Boolean, default: !1 },
+    perPageOptions: { default: () => [15, 25, 50, 100] },
+    hideToolbar: { type: Boolean, default: !1 },
+    hidePagination: { type: Boolean, default: !1 },
+    hideSearch: { type: Boolean, default: !1 },
+    hideColumnManager: { type: Boolean, default: !1 },
+    hideFilterPanel: { type: Boolean, default: !1 },
+    filterPanelSide: { default: "right" },
+    gridId: {},
+    viewAdapter: {},
+    initialView: {},
+    hydrateUrl: { type: Boolean, default: !1 },
+    virtualize: { type: Boolean, default: !1 },
+    virtualRowHeight: {},
+    hidden: { type: Boolean, default: !1 }
+  },
+  emits: ["navigate", "row-click", "row-action", "bulk-action", "selection-change"],
+  setup(e, { expose: C, emit: P }) {
+    var w;
+    const l = e, d = P, $ = z(), t = N({
+      columns: l.columns,
+      data: A(l, "data"),
+      serverSide: l.serverSide,
+      rowKey: l.rowKey,
+      defaultPerPage: ((w = l.perPageOptions) == null ? void 0 : w[0]) ?? 15,
+      initialView: l.initialView,
+      hydrateFromUrl: l.hydrateUrl
+    });
+    M(t), b(
+      () => t.selectedRows.value,
+      (o) => {
+        d("selection-change", [...o]);
+      }
+    );
+    function g() {
+      l.serverSide && d("navigate", t.getQueryParams());
+    }
+    b(
+      [() => t.sort.value, () => t.filters.value, () => t.searchQuery.value, () => t.page.value, () => t.perPage.value],
+      () => {
+        g();
+      }
+    );
+    const y = !!$.card;
+    C({
+      clearSelection: t.clearSelection,
+      getQueryParams: t.getQueryParams,
+      getConfig: t.getConfig,
+      loadConfig: t.loadConfig,
+      resetToDefaults: t.resetToDefaults
+    });
+    const v = J();
+    return (o, r) => D((i(), c("div", W, [
+      e.hideToolbar ? h("", !0) : (i(), s(Q, {
+        key: 0,
+        "hide-search": e.hideSearch,
+        "hide-column-manager": e.hideColumnManager,
+        "hide-filter-toggle": e.hideFilterPanel,
+        "has-card-slot": y,
+        "grid-id": e.gridId,
+        "view-adapter": e.viewAdapter
+      }, {
+        "toolbar-start": f(() => [
+          u(o.$slots, "toolbar-start")
+        ]),
+        "toolbar-end": f(() => [
+          u(o.$slots, "toolbar-end")
+        ]),
+        _: 3
+      }, 8, ["hide-search", "hide-column-manager", "hide-filter-toggle", "grid-id", "view-adapter"])),
+      m(L),
+      e.loading ? (i(), c("div", X, [
+        m(q, { lines: 8 })
+      ])) : n(t).displayData.value.length === 0 ? (i(), c("div", Y, [
+        u(o.$slots, "empty", {}, () => [
+          m(j, {
+            icon: "magnifying-glass",
+            title: n(v).dataGrid.noResultsTitle,
+            description: n(v).dataGrid.noResultsDescription,
+            size: "md",
+            color: "secondary"
+          }, null, 8, ["title", "description"])
+        ])
+      ])) : (i(), c("div", {
+        key: 3,
+        class: "cui-data-grid__content",
+        style: R({ flexDirection: e.filterPanelSide === "left" ? "row-reverse" : "row" })
+      }, [
+        V("div", Z, [
+          n(t).viewMode.value === "card" && y ? (i(), s(F, {
+            key: 0,
+            "row-key": e.rowKey
+          }, {
+            card: f((a) => [
+              u(o.$slots, "card", S(B(a)))
+            ]),
+            _: 3
+          }, 8, ["row-key"])) : (i(), s(E, {
+            key: 1,
+            "row-key": e.rowKey,
+            "bulk-actions": e.bulkActions,
+            "show-select-all": e.showSelectAll,
+            "sticky-header": e.stickyHeader,
+            "max-height": e.maxHeight,
+            striped: e.striped,
+            hoverable: e.hoverable,
+            bordered: e.bordered,
+            size: e.size,
+            virtualize: e.virtualize,
+            "virtual-row-height": e.virtualRowHeight,
+            onRowClick: r[0] || (r[0] = (a) => d("row-click", a)),
+            onRowAction: r[1] || (r[1] = (a) => d("row-action", a))
+          }, x({ _: 2 }, [
+            H(n(t).visibleColumns.value, (a) => ({
+              name: `cell-${a.key}`,
+              fn: f((k) => [
+                u(o.$slots, `cell-${a.key}`, S(B(k)), () => [
+                  T(G(k.value), 1)
+                ])
+              ])
+            }))
+          ]), 1032, ["row-key", "bulk-actions", "show-select-all", "sticky-header", "max-height", "striped", "hoverable", "bordered", "size", "virtualize", "virtual-row-height"]))
+        ]),
+        m(O)
+      ], 4)),
+      !e.hidePagination && !e.loading && n(t).displayData.value.length > 0 ? (i(), s(U, {
+        key: 4,
+        onNavigate: g
+      })) : h("", !0),
+      e.bulkActions && e.bulkActions.length > 0 ? (i(), s(I, {
+        key: 5,
+        actions: e.bulkActions,
+        onBulkAction: r[2] || (r[2] = (a) => d("bulk-action", a))
+      }, null, 8, ["actions"])) : h("", !0)
+    ], 512)), [
+      [K, !e.hidden]
+    ]);
+  }
+});
+export {
+  ge as default
+};

package/dist/components/CuiDataGrid.vue3.js

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

package/dist/components/CuiDataGridActiveFilters.vue.js

@@ -0,0 +1,47 @@
+import { defineComponent as p, computed as k, openBlock as l, createElementBlock as s, Fragment as g, renderList as C, createBlock as u, unref as m, withCtx as d, createTextVNode as v, toDisplayString as c, createCommentVNode as y } from "vue";
+import { useDataGridState as _ } from "../composables/useDataGrid.js";
+import f from "./CuiBadge.vue.js";
+import b from "./CuiButton.vue.js";
+const x = {
+  key: 0,
+  class: "cui-data-grid-active-filters"
+}, h = /* @__PURE__ */ p({
+  __name: "CuiDataGridActiveFilters",
+  setup(B) {
+    const a = _(), o = k(
+      () => a.filters.value.map((t) => {
+        const e = a.columns.find((n) => (n.filterKey ?? n.key) === t.key), r = (e == null ? void 0 : e.label) ?? t.key, i = Array.isArray(t.value) ? t.value.join(", ") : t.value;
+        return { key: t.key, label: r, displayValue: i };
+      })
+    );
+    return (t, e) => o.value.length > 0 ? (l(), s("div", x, [
+      (l(!0), s(g, null, C(o.value, (r) => (l(), u(f, {
+        key: r.key,
+        variant: "subtle",
+        color: "primary",
+        size: "sm",
+        removable: "",
+        onRemove: (i) => m(a).removeFilter(r.key)
+      }, {
+        default: d(() => [
+          v(c(r.label) + ": " + c(r.displayValue), 1)
+        ]),
+        _: 2
+      }, 1032, ["onRemove"]))), 128)),
+      o.value.length > 1 ? (l(), u(b, {
+        key: 0,
+        variant: "ghost",
+        size: "xs",
+        onClick: e[0] || (e[0] = (r) => m(a).clearFilters())
+      }, {
+        default: d(() => [...e[1] || (e[1] = [
+          v(" Clear all ", -1)
+        ])]),
+        _: 1
+      })) : y("", !0)
+    ])) : y("", !0);
+  }
+});
+export {
+  h as default
+};

package/dist/components/CuiDataGridActiveFilters.vue3.js

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

package/dist/components/CuiDataGridBulkBar.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CuiDataGridBulkBar.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiDataGridBulkBar.vue"],"names":[],"mappings":"AAqHA,OAAO,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAO1E,KAAK,WAAW,GAAG;IACjB,OAAO,EAAE,kBAAkB,EAAE,CAAC;CAC/B,CAAC;;;gBAImC,kBAAkB;cAAQ,WAAW,EAAE;;;;gBAAvC,kBAAkB;cAAQ,WAAW,EAAE;;;AAyJ5E,wBAOG"}
+{"version":3,"file":"CuiDataGridBulkBar.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiDataGridBulkBar.vue"],"names":[],"mappings":"AAuHA,OAAO,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAO1E,KAAK,WAAW,GAAG;IACjB,OAAO,EAAE,kBAAkB,EAAE,CAAC;CAC/B,CAAC;;;gBAImC,kBAAkB;cAAQ,WAAW,EAAE;;;;gBAAvC,kBAAkB;cAAQ,WAAW,EAAE;;;AAyJ5E,wBAOG"}

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