@gspa/ui 0.1.3 → 0.1.4

package/dist/components/DataTable.js

@@ -0,0 +1,863 @@
+import { useSlots as Ee, ref as w, computed as u, watch as E, resolveComponent as He, createElementBlock as s, openBlock as r, normalizeClass as g, createBlock as p, createCommentVNode as y, createElementVNode as d, createVNode as N, withCtx as b, renderSlot as S, createTextVNode as Je, toDisplayString as $, Fragment as V, renderList as P, createSlots as Ge, withModifiers as ne, mergeProps as Qe } from "vue";
+import { cva as O } from "class-variance-authority";
+import { cn as k } from "../utils/cn.js";
+import Xe from "./Checkbox.js";
+import Ye from "./DataTableHeader.js";
+import Ze from "./DataTableRow.js";
+import We from "./DataTableToolBar.js";
+import _e from "./DataTablePagination.js";
+import et from "./FilterDrawer.js";
+import re from "./Icon.js";
+import H from "./Loader.js";
+import tt from "./Button.js";
+import at from "./Tooltip.js";
+import lt from "./Modal.js";
+import { _ as nt } from "../_plugin-vue_export-helper-CHgC5LLL.js";
+const rt = {
+  key: 0,
+  class: "inline-flex items-center justify-center min-w-5 h-5 rounded-full text-xs ui-primary-bg text-white px-1"
+}, ot = { class: "relative" }, it = { class: "flex items-center justify-center" }, st = ["onClick"], dt = { class: "flex items-center gap-2" }, ut = {
+  key: 1,
+  class: "flex flex-col"
+}, ct = ["onClick"], ft = { key: 1 }, gt = {
+  key: 1,
+  class: "flex items-center gap-1 justify-center"
+}, yt = {
+  key: 1,
+  class: "text-xs"
+}, mt = { key: 2 }, vt = ["colspan"], pt = { class: "flex flex-col items-center justify-center py-12" }, bt = { class: "ui-text mb-4 flex justify-center" }, ht = { class: "ui-text text-lg font-medium mb-2" }, wt = { class: "ui-text text-sm" }, kt = { class: "p-6" }, xt = { class: "text-xl font-bold ui-text whitespace-pre-wrap wrap-break-word" }, Ct = {
+  __name: "DataTable",
+  props: {
+    data: {
+      type: Array,
+      required: !0
+    },
+    columns: {
+      type: Array,
+      required: !0
+    },
+    title: {
+      type: String,
+      default: null
+    },
+    description: {
+      type: String,
+      default: null
+    },
+    selectable: {
+      type: Boolean,
+      default: !1
+    },
+    selectedItems: {
+      type: Array,
+      default: () => []
+    },
+    sortBy: {
+      type: String,
+      default: null
+    },
+    sortOrder: {
+      type: String,
+      default: "asc",
+      validator: (a) => ["asc", "desc"].includes(a)
+    },
+    pageSize: {
+      type: Number,
+      default: 10
+    },
+    showPagination: {
+      type: Boolean,
+      default: !0
+    },
+    striped: {
+      type: Boolean,
+      default: !0
+    },
+    hoverable: {
+      type: Boolean,
+      default: !0
+    },
+    clickableRows: {
+      type: Boolean,
+      default: !1
+    },
+    highlightUnreadRows: {
+      type: Boolean,
+      default: !0
+    },
+    unreadCreatedAtField: {
+      type: String,
+      default: ""
+    },
+    unreadMode: {
+      type: String,
+      default: "all",
+      validator: (a) => ["all", "new-only"].includes(a)
+    },
+    unreadPersistKey: {
+      type: String,
+      default: ""
+    },
+    emptyText: {
+      type: String,
+      default: "No data available"
+    },
+    emptySubtitle: {
+      type: String,
+      default: "Try adjusting your search or filter criteria"
+    },
+    rowKey: {
+      type: String,
+      default: "id"
+    },
+    variant: {
+      type: String,
+      default: "default",
+      validator: (a) => ["default", "bordered", "minimal"].includes(a)
+    },
+    density: {
+      type: String,
+      default: "compact",
+      validator: (a) => ["compact", "normal", "comfortable"].includes(a)
+    },
+    headerVariant: {
+      type: String,
+      default: "default"
+    },
+    headerPadding: {
+      type: String,
+      default: "normal"
+    },
+    paginationVariant: {
+      type: String,
+      default: "default"
+    },
+    paginationPadding: {
+      type: String,
+      default: "normal"
+    },
+    // Actions configuration
+    actions: {
+      type: Array,
+      default: () => []
+      // Expected format:
+      // [
+      //   {
+      //     key: 'edit',
+      //     label: 'Edit',
+      //     icon: 'pen',
+      //     variant: 'primary', // primary, secondary, danger, success, warning
+      //     permission: (item) => true, // Function to check permission
+      //     visible: (item) => true, // Function to check visibility
+      //     disabled: (item) => false, // Function to check if disabled
+      //     tooltip: 'Edit item',
+      //     onClick: (item) => {} // Optional handler
+      //   }
+      // ]
+    },
+    showActionsColumn: {
+      type: Boolean,
+      default: !0
+    },
+    addButton: {
+      type: Object,
+      default: () => ({})
+    },
+    // Loading Props
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    dataLoading: {
+      type: Boolean,
+      default: !1
+    },
+    sortLoading: {
+      type: Boolean,
+      default: !1
+    },
+    paginationLoading: {
+      type: Boolean,
+      default: !1
+    },
+    bulkLoading: {
+      type: Boolean,
+      default: !1
+    },
+    rowLoading: {
+      type: Object,
+      default: () => ({})
+    },
+    loadingType: {
+      type: String,
+      default: "dots",
+      validator: (a) => ["spin", "pulse", "bounce", "ripple", "bars", "dots", "ring"].includes(a)
+    },
+    loadingSize: {
+      type: String,
+      default: "medium",
+      validator: (a) => ["small", "medium", "large", "xl"].includes(a)
+    },
+    loadingColor: {
+      type: String,
+      default: "#3b82f6"
+    },
+    loadingText: {
+      type: String,
+      default: "Loading..."
+    },
+    loadingTextPosition: {
+      type: String,
+      default: "bottom",
+      validator: (a) => ["top", "bottom"].includes(a)
+    },
+    loadingBackground: {
+      type: String,
+      default: "rgba(255, 255, 255, 0.95)"
+    },
+    showSkeleton: {
+      type: Boolean,
+      default: !0
+    },
+    skeletonRows: {
+      type: Number,
+      default: 10
+    },
+    // Toolbar
+    showToolbar: {
+      type: Boolean,
+      default: !1
+    },
+    showDensityToggle: {
+      type: Boolean,
+      default: !0
+    },
+    showColumnToggle: {
+      type: Boolean,
+      default: !0
+    },
+    showRefresh: {
+      type: Boolean,
+      default: !0
+    },
+    showFilterDrawer: {
+      type: Boolean,
+      default: !1
+    },
+    filterFields: {
+      type: Array,
+      default: () => []
+    },
+    filterRules: {
+      type: Object,
+      default: () => ({ logic: "all", rules: [] })
+    },
+    defaultFilterRules: {
+      type: Object,
+      default: () => ({ logic: "all", rules: [] })
+    },
+    themeScope: {
+      type: String,
+      default: "default",
+      validator: (a) => ["default", "module"].includes(a)
+    }
+  },
+  emits: [
+    "selection-change",
+    "sort-change",
+    "row-click",
+    "page-change",
+    "page-size-change",
+    "refresh",
+    "action",
+    "update:density",
+    "toggle-column",
+    "add",
+    "add-button-click",
+    "update:filterRules"
+  ],
+  setup(a, { expose: oe, emit: ie }) {
+    const l = a, m = ie, se = Ee(), T = w(1), B = w(l.pageSize), R = w(l.columns.map((e) => e.key)), x = w(l.sortBy), C = w(l.sortOrder), D = w(!1), L = w(""), K = w(!1), z = w(/* @__PURE__ */ new Set()), J = w(Date.now()), de = (e, t) => {
+      if (!(!e || !t))
+        return String(t).split(".").reduce((o, n) => o?.[n], e);
+    }, U = u(() => Array.isArray(l.filterRules?.rules) ? l.filterRules.rules.length : 0), ue = (e) => {
+      if (e && typeof e == "object") {
+        const t = e.from || "", o = e.to || "";
+        return t && o ? `${t} to ${o}` : t || o || "";
+      }
+      return String(e ?? "");
+    }, ce = () => m("update:filterRules", { logic: "all", rules: [] }), fe = u(
+      () => (l.filterRules?.rules || []).map((e) => ({
+        id: e.id,
+        label: e.label,
+        value: ue(e.value)
+      }))
+    ), ge = O("border ui-border-strong rounded-2xl relative overflow-hidden flex flex-col gap-y-2 px-2 pb-2", {
+      variants: {
+        variant: {
+          default: "shadow-sm ui-border-strong",
+          bordered: "border-2 ui-border-strong",
+          minimal: "border-none ui-border-strong shadow-none bg-transparent"
+        }
+      },
+      defaultVariants: {
+        variant: "default"
+      }
+    }), ye = O("min-w-full", {
+      variants: {
+        variant: {
+          default: "divide-y divide-(--ui-border-strong)",
+          bordered: "border-collapse [&_td]:border [&_th]:border [&_td]:border-(--ui-border-strong) [&_th]:border-(--ui-border-strong)",
+          minimal: "divide-y divide-(--ui-border-strong)"
+        }
+      },
+      defaultVariants: {
+        variant: "default"
+      }
+    }), me = O("", {
+      variants: {
+        variant: {
+          default: " border-b border-(--ui-border-strong)",
+          bordered: " border-b-2 border-(--ui-border-strong)",
+          minimal: "bg-transparent border-b border-(--ui-border-strong)"
+        }
+      },
+      defaultVariants: {
+        variant: "default"
+      }
+    }), ve = O("divide-y", {
+      variants: {
+        variant: {
+          default: " divide-(--ui-border-strong)",
+          bordered: " divide-(--ui-border-strong)",
+          minimal: "bg-transparent divide-(--ui-border-strong)"
+        }
+      },
+      defaultVariants: {
+        variant: "default"
+      }
+    }), h = u(() => {
+      let e = [...l.data];
+      if (x.value) {
+        const t = l.columns.find((o) => o.key === x.value);
+        t && e.sort((o, n) => {
+          const v = I(o, t), c = I(n, t);
+          return v < c ? C.value === "asc" ? -1 : 1 : v > c ? C.value === "asc" ? 1 : -1 : 0;
+        });
+      }
+      return e;
+    }), G = u(() => Math.ceil(h.value.length / B.value)), Q = u(() => {
+      if (!l.showPagination) return h.value;
+      const e = (T.value - 1) * B.value, t = e + B.value;
+      return h.value.slice(e, t);
+    }), F = u(
+      () => l.columns.filter((e) => R.value.includes(e.key))
+    ), pe = u(
+      () => l.columns.filter((e) => e.toggleable !== !1)
+    ), be = (e, t) => {
+      t ? R.value.includes(e) || R.value.push(e) : R.value = R.value.filter((o) => o !== e), m("toggle-column", { key: e, visible: t });
+    }, M = u(() => l.showActionsColumn ? se.actions ? !0 : !l.actions || l.actions.length === 0 ? !1 : l.actions.some((t) => t.permission === void 0 ? !0 : typeof t.permission == "boolean" ? t.permission === !0 : typeof t.permission == "function") : !1), he = u(() => {
+      let e = l.columns.length;
+      return l.selectable && e++, M.value && e++, e;
+    }), we = (e) => l.actions.filter((t) => {
+      if (t.permission !== void 0) {
+        if (typeof t.permission == "function") {
+          if (!t.permission(e))
+            return !1;
+        } else if (!t.permission)
+          return !1;
+      }
+      return t.visible && typeof t.visible == "function" ? t.visible(e) : !0;
+    }), X = (e, t) => e.permission && typeof e.permission == "function" ? e.permission(t) : !0, Y = (e, t) => e.disabled && typeof e.disabled == "function" ? e.disabled(t) : !1, ke = (e, t) => {
+      Y(e, t) || !X(e, t) || (m("action", { action: e.key, item: t, actionConfig: e }), e.onClick && typeof e.onClick == "function" && e.onClick(t));
+    }, xe = (e) => ({
+      default: "default",
+      primary: "gradient",
+      secondary: "secondary",
+      danger: "danger",
+      success: "success",
+      warning: "warning",
+      info: "info",
+      subtle: "subtle",
+      dark: "dark",
+      light: "light",
+      primaryOutline: "primaryOutline",
+      dangerOutline: "dangerOutline",
+      successOutline: "successOutline",
+      outline: "outline",
+      link: "link",
+      ghost: "ghost"
+    })[e] || "ghost", Z = u(() => h.value.length > 0 && h.value.every((e) => q(e))), Ce = u(() => {
+      const e = h.value.filter((t) => q(t)).length;
+      return e > 0 && e < h.value.length;
+    }), I = (e, t) => t.accessor ? t.accessor(e) : t.key.split(".").reduce((o, n) => o?.[n], e), A = (e, t) => e[l.rowKey] || t, q = (e) => l.selectedItems.some(
+      (t) => A(t) === A(e)
+    ), Se = (e) => {
+      const t = [...l.selectedItems], o = t.findIndex(
+        (n) => A(n) === A(e)
+      );
+      o > -1 ? t.splice(o, 1) : t.push(e), m("selection-change", t);
+    }, W = () => {
+      if (l.loading || l.dataLoading) return;
+      const e = Z.value ? [] : [...h.value];
+      m("selection-change", e);
+    }, $e = async (e) => {
+      !e.sortable || l.loading || l.sortLoading || (x.value === e.key ? C.value = C.value === "asc" ? "desc" : "asc" : (x.value = e.key, C.value = "asc"), m("sort-change", { column: e.key, direction: C.value }));
+    }, Re = (e) => {
+      if (!l.loading) {
+        if (l.highlightUnreadRows) {
+          const t = A(e.item, e.index);
+          z.value.add(String(t)), Te();
+        }
+        m("row-click", e);
+      }
+    }, Ae = (e, t) => {
+      if (!l.highlightUnreadRows) return !1;
+      const o = String(A(e, t));
+      if (z.value.has(o)) return !1;
+      if (l.unreadMode === "all") return !0;
+      const n = l.unreadCreatedAtField;
+      if (!n) return !1;
+      const v = n.includes(".") ? de(e, n) : e?.[n];
+      if (!v) return !1;
+      const c = String(v).trim();
+      let f = new Date(c).getTime();
+      if (Number.isNaN(f)) {
+        const i = c.match(/^(\d{2})[-/](\d{2})[-/](\d{4})$/);
+        if (i) {
+          const [, le, Ie, qe] = i;
+          f = (/* @__PURE__ */ new Date(`${qe}-${Ie}-${le}T00:00:00`)).getTime();
+        }
+      }
+      if (Number.isNaN(f)) return !1;
+      if (/^\d{4}-\d{2}-\d{2}$/.test(c)) {
+        const i = new Date(J.value);
+        return i.setHours(0, 0, 0, 0), f >= i.getTime();
+      }
+      return f >= J.value;
+    }, Be = (e, t) => l.highlightUnreadRows ? Ae(e, t) ? "font-bold !bg-[color:color-mix(in_oklab,var(--module-soft,var(--ui-primary-soft))_62%,var(--ui-surface)_38%)]" : "font-normal !bg-[color:color-mix(in_oklab,var(--module-soft-alt,var(--ui-surface-soft))_42%,var(--ui-surface)_58%)]" : "", Pe = () => {
+      if (!(!l.unreadPersistKey || typeof window > "u"))
+        try {
+          const e = window.localStorage.getItem(l.unreadPersistKey);
+          if (!e) return;
+          const t = JSON.parse(e);
+          Array.isArray(t) && (z.value = new Set(t.map(String)));
+        } catch {
+        }
+    }, Te = () => {
+      if (!(!l.unreadPersistKey || typeof window > "u"))
+        try {
+          window.localStorage.setItem(l.unreadPersistKey, JSON.stringify(Array.from(z.value)));
+        } catch {
+        }
+    }, _ = async (e) => {
+      l.paginationLoading || l.loading || (T.value = e, m("page-change", e));
+    }, Ve = async (e) => {
+      l.paginationLoading || l.loading || (B.value = e, T.value = 1, m("page-size-change", e));
+    }, De = u(
+      () => k(
+        ge({ variant: l.variant }),
+        l.themeScope === "module" && "kv-module-themed-table"
+      )
+    ), Le = u(
+      () => k(ye({ variant: l.variant }))
+    ), ze = u(
+      () => k(me({ variant: l.variant }))
+    ), Fe = u(
+      () => k(ve({ variant: l.variant }))
+    ), je = (e) => k(
+      {
+        compact: "px-3.5 py-1.5",
+        normal: "px-6 py-3",
+        comfortable: "px-8 py-4"
+      }[l.density],
+      "text-left text-sm font-extrabold ui-text uppercase tracking-wider",
+      {
+        "cursor-pointer hover:bg-(--ui-surface) transition-colors": e.sortable && !l.loading && !l.sortLoading,
+        "cursor-not-allowed opacity-50": l.loading || l.sortLoading && x.value === e.key
+      }
+    ), Ne = () => k(
+      {
+        compact: "px-3.5 py-1.5",
+        normal: "px-6 py-4",
+        comfortable: "px-8 py-6"
+      }[l.density],
+      "whitespace-nowrap text-sm ui-text"
+    ), j = (e, t) => {
+      const o = I(e, t);
+      return typeof t == "object" && t.formatter ? t.formatter(o, e) : o == null ? "" : o instanceof Date ? o.toLocaleDateString() : Array.isArray(o) ? o.join(", ") : o;
+    }, Oe = (e, t = 10) => {
+      if (!e) return e;
+      const o = e.toString().split(" ");
+      return o.length <= t ? e : o.slice(0, t).join(" ") + "...";
+    }, Ke = (e) => {
+      L.value || (L.value = e, D.value = !0);
+    }, Ue = () => {
+      D.value = !1, L.value = "";
+    }, ee = u(() => k(
+      {
+        compact: "px-3.5 py-1.5",
+        normal: "px-6 py-4",
+        comfortable: "px-8 py-6"
+      }[l.density],
+      "whitespace-nowrap text-sm ui-text w-12"
+    )), te = u(() => k(
+      {
+        compact: "px-3.5 py-1.5",
+        normal: "px-6 py-4",
+        comfortable: "px-8 py-6"
+      }[l.density],
+      "whitespace-nowrap text-md font-extrabold text-center"
+    )), Me = u(() => k(
+      {
+        compact: "px-4 py-4",
+        normal: "px-6 py-6",
+        comfortable: "px-8 py-8"
+      }[l.density],
+      "text-center"
+    )), ae = (e, t) => k(
+      {
+        "ui-primary": x.value === e.key && C.value === t,
+        "ui-text": x.value !== e.key || C.value !== t
+      }
+    );
+    return E(() => l.selectedItems, () => {
+    }, { deep: !0 }), E(() => l.pageSize, (e) => {
+      B.value = e;
+    }), E(() => l.columns, (e) => {
+      R.value = e.map((t) => t.key);
+    }, { deep: !0 }), oe({
+      refresh: () => {
+        m("refresh");
+      },
+      goToPage: (e) => {
+        _(e);
+      },
+      selectAll: () => {
+        W();
+      },
+      clearSelection: () => {
+        m("selection-change", []);
+      },
+      getCurrentPage: () => T.value,
+      getTotalPages: () => G.value,
+      getSelectedItems: () => l.selectedItems
+    }), Pe(), (e, t) => {
+      const o = He("font-awesome-icon");
+      return r(), s("div", {
+        class: g(De.value)
+      }, [
+        a.title || a.description || e.$slots.header ? (r(), p(Ye, {
+          key: 0,
+          title: a.title,
+          description: a.description,
+          variant: a.headerVariant,
+          padding: a.headerPadding
+        }, {
+          header: b(() => [
+            S(e.$slots, "header", {}, void 0, !0)
+          ]),
+          filters: b(() => [
+            S(e.$slots, "filters", {}, void 0, !0)
+          ]),
+          _: 3
+        }, 8, ["title", "description", "variant", "padding"])) : y("", !0),
+        a.showToolbar ? (r(), p(We, {
+          key: 1,
+          "selected-items": a.selectedItems,
+          "total-items": h.value.length,
+          "show-density-toggle": a.showDensityToggle,
+          "show-column-toggle": a.showColumnToggle,
+          "show-refresh": a.showRefresh,
+          "active-filters": a.showFilterDrawer ? fe.value : [],
+          "default-filter-rules": a.defaultFilterRules,
+          "add-button": a.addButton,
+          density: a.density,
+          "toggleable-columns": pe.value,
+          "visible-columns": R.value,
+          "onUpdate:density": t[1] || (t[1] = (n) => m("update:density", n)),
+          onToggleColumn: be,
+          onRefresh: t[2] || (t[2] = (n) => e.$emit("refresh")),
+          onAdd: t[3] || (t[3] = (n) => m("add")),
+          onAddButtonClick: t[4] || (t[4] = (n) => m("add-button-click", n))
+        }, {
+          actions: b(() => [
+            S(e.$slots, "toolbar-actions", {}, void 0, !0)
+          ]),
+          "actions-after-add": b(() => [
+            a.showFilterDrawer ? (r(), s("button", {
+              key: 0,
+              class: "px-3 py-2 text-sm border ui-border-strong rounded-md hover:bg-(--ui-surface) flex items-center gap-2",
+              onClick: t[0] || (t[0] = (n) => K.value = !0)
+            }, [
+              N(o, { icon: "filter" }),
+              t[8] || (t[8] = Je(" Filter ", -1)),
+              U.value > 0 ? (r(), s("span", rt, $(U.value), 1)) : y("", !0)
+            ])) : y("", !0),
+            S(e.$slots, "toolbar-actions-after-add", {}, void 0, !0)
+          ]),
+          "active-filter-actions": b(() => [
+            a.showFilterDrawer && U.value > 0 ? (r(), s("button", {
+              key: 0,
+              class: "ml-1 px-2 py-1 text-sm border border-(--ui-primary) rounded-md ui-primary hover:bg-(--ui-primary-soft)",
+              onClick: ce
+            }, " Clear filter ")) : y("", !0)
+          ]),
+          _: 3
+        }, 8, ["selected-items", "total-items", "show-density-toggle", "show-column-toggle", "show-refresh", "active-filters", "default-filter-rules", "add-button", "density", "toggleable-columns", "visible-columns"])) : y("", !0),
+        a.showFilterDrawer ? (r(), p(et, {
+          key: 2,
+          open: K.value,
+          fields: a.filterFields,
+          "model-value": a.filterRules,
+          "onUpdate:modelValue": t[5] || (t[5] = (n) => e.$emit("update:filterRules", n)),
+          onClose: t[6] || (t[6] = (n) => K.value = !1)
+        }, null, 8, ["open", "fields", "model-value"])) : y("", !0),
+        d("div", ot, [
+          a.loading ? (r(), p(H, {
+            key: 0,
+            loading: !0,
+            type: a.loadingType,
+            size: a.loadingSize,
+            color: a.loadingColor,
+            overlay: !0,
+            text: a.loadingText,
+            "text-position": a.loadingTextPosition,
+            "background-color": a.loadingBackground,
+            class: "table-loading-overlay"
+          }, null, 8, ["type", "size", "color", "text", "text-position", "background-color"])) : y("", !0),
+          d("div", {
+            class: g(["overflow-x-auto", { "opacity-50": a.loading }])
+          }, [
+            d("table", {
+              class: g(Le.value)
+            }, [
+              d("thead", {
+                class: g(ze.value)
+              }, [
+                d("tr", null, [
+                  a.selectable ? (r(), s("th", {
+                    key: 0,
+                    class: g(ee.value)
+                  }, [
+                    d("div", it, [
+                      a.bulkLoading ? (r(), p(H, {
+                        key: 0,
+                        loading: !0,
+                        type: "spin",
+                        size: "small",
+                        color: a.loadingColor
+                      }, null, 8, ["color"])) : (r(), p(Xe, {
+                        key: 1,
+                        "model-value": Z.value,
+                        indeterminate: Ce.value,
+                        disabled: a.loading || a.dataLoading,
+                        "onUpdate:modelValue": W
+                      }, null, 8, ["model-value", "indeterminate", "disabled"]))
+                    ])
+                  ], 2)) : y("", !0),
+                  (r(!0), s(V, null, P(F.value, (n) => (r(), s("th", {
+                    key: n.key,
+                    class: g(je(n)),
+                    onClick: (v) => $e(n)
+                  }, [
+                    d("div", dt, [
+                      d("span", null, $(n.label), 1),
+                      a.sortLoading && x.value === n.key ? (r(), p(H, {
+                        key: 0,
+                        loading: !0,
+                        type: "spin",
+                        size: "small",
+                        color: a.loadingColor
+                      }, null, 8, ["color"])) : n.sortable ? (r(), s("div", ut, [
+                        (r(), s("svg", {
+                          class: g([ae(n, "asc"), "w-3 h-3 transition-colors"]),
+                          fill: "none",
+                          viewBox: "0 0 24 24",
+                          "stroke-width": "1.5",
+                          stroke: "currentColor"
+                        }, [...t[9] || (t[9] = [
+                          d("path", {
+                            "stroke-linecap": "round",
+                            "stroke-linejoin": "round",
+                            d: "m4.5 15.75 7.5-7.5 7.5 7.5"
+                          }, null, -1)
+                        ])], 2)),
+                        (r(), s("svg", {
+                          class: g([ae(n, "desc"), "w-3 h-3 transition-colors"]),
+                          fill: "none",
+                          viewBox: "0 0 24 24",
+                          "stroke-width": "1.5",
+                          stroke: "currentColor"
+                        }, [...t[10] || (t[10] = [
+                          d("path", {
+                            "stroke-linecap": "round",
+                            "stroke-linejoin": "round",
+                            d: "m19.5 8.25-7.5 7.5-7.5-7.5"
+                          }, null, -1)
+                        ])], 2))
+                      ])) : y("", !0)
+                    ])
+                  ], 10, st))), 128)),
+                  M.value ? (r(), s("th", {
+                    key: 1,
+                    class: g(te.value)
+                  }, " Actions ", 2)) : y("", !0)
+                ])
+              ], 2),
+              d("tbody", {
+                class: g(Fe.value)
+              }, [
+                a.showSkeleton && (a.loading || a.dataLoading) ? (r(!0), s(V, { key: 0 }, P(a.skeletonRows, (n) => (r(), s("tr", {
+                  key: `skeleton-${n}`,
+                  class: "animate-pulse"
+                }, [
+                  a.selectable ? (r(), s("td", {
+                    key: 0,
+                    class: g(ee.value)
+                  }, [...t[11] || (t[11] = [
+                    d("div", { class: "w-4 h-4 ui-bg rounded" }, null, -1)
+                  ])], 2)) : y("", !0),
+                  (r(!0), s(V, null, P(F.value, (v) => (r(), s("td", {
+                    key: v.key,
+                    class: g(Ne())
+                  }, [...t[12] || (t[12] = [
+                    d("div", { class: "h-4 ui-bg rounded w-3/4" }, null, -1)
+                  ])], 2))), 128)),
+                  M.value ? (r(), s("td", {
+                    key: 1,
+                    class: g(te.value)
+                  }, [...t[13] || (t[13] = [
+                    d("div", { class: "flex gap-2 justify-center" }, [
+                      d("div", { class: "w-6 h-6 ui-surface rounded" }),
+                      d("div", { class: "w-6 h-6 ui-surface rounded" })
+                    ], -1)
+                  ])], 2)) : y("", !0)
+                ]))), 128)) : Q.value.length > 0 ? (r(!0), s(V, { key: 1 }, P(Q.value, (n, v) => (r(), p(Ze, {
+                  key: A(n, v),
+                  item: n,
+                  columns: F.value,
+                  index: v,
+                  selectable: a.selectable,
+                  "is-selected": q(n),
+                  striped: a.striped,
+                  hoverable: a.hoverable,
+                  "clickable-rows": a.clickableRows,
+                  "row-class": Be(n, v),
+                  density: a.density,
+                  variant: a.variant,
+                  onToggleSelection: Se,
+                  onRowClick: Re
+                }, Ge({
+                  actions: b(({ item: c, index: f }) => [
+                    e.$slots.actions ? S(e.$slots, "actions", {
+                      key: 0,
+                      item: c,
+                      index: f
+                    }, void 0, !0) : a.actions.length > 0 ? (r(), s("div", gt, [
+                      (r(!0), s(V, null, P(we(c), (i) => (r(), p(at, {
+                        key: i.key,
+                        content: typeof i.tooltip == "function" ? i.tooltip(c) : i.tooltip || i.label || i.key,
+                        placement: "top"
+                      }, {
+                        default: b(() => [
+                          N(tt, {
+                            variant: xe(i.variant),
+                            size: "xs",
+                            disabled: Y(i, c) || !X(i, c),
+                            class: g(["h-8 w-8", typeof i.class == "function" ? i.class(c) : i.class]),
+                            onClick: ne((le) => ke(i, c), ["stop"])
+                          }, {
+                            default: b(() => [
+                              i.icon ? (r(), p(re, {
+                                key: 0,
+                                icon: i.icon,
+                                class: "w-4 h-4"
+                              }, null, 8, ["icon"])) : i.label ? (r(), s("span", yt, $(i.label), 1)) : y("", !0)
+                            ]),
+                            _: 2
+                          }, 1032, ["variant", "disabled", "class", "onClick"])
+                        ]),
+                        _: 2
+                      }, 1032, ["content"]))), 128))
+                    ])) : y("", !0)
+                  ]),
+                  _: 2
+                }, [
+                  P(F.value, (c) => ({
+                    name: `cell-${c.key}`,
+                    fn: b((f) => [
+                      S(e.$slots, `cell-${c.key}`, Qe({ ref_for: !0 }, f), () => [
+                        j(f.item, f.column).toString().split(" ").length > 10 ? (r(), s("span", {
+                          key: 0,
+                          class: "cursor-pointer ui-primary hover:text-(--ui-primary)",
+                          onClick: ne((i) => Ke(j(f.item, f.column)), ["stop"])
+                        }, $(Oe(j(f.item, f.column))), 9, ct)) : (r(), s("span", ft, $(j(f.item, f.column)), 1))
+                      ], !0)
+                    ])
+                  }))
+                ]), 1032, ["item", "columns", "index", "selectable", "is-selected", "striped", "hoverable", "clickable-rows", "row-class", "density", "variant"]))), 128)) : (r(), s("tr", mt, [
+                  d("td", {
+                    colspan: he.value,
+                    class: g(Me.value)
+                  }, [
+                    S(e.$slots, "empty", {}, () => [
+                      d("div", pt, [
+                        d("div", bt, [
+                          N(re, {
+                            icon: "search",
+                            class: "w-16 h-16"
+                          })
+                        ]),
+                        d("p", ht, $(a.emptyText), 1),
+                        d("p", wt, $(a.emptySubtitle), 1)
+                      ])
+                    ], !0)
+                  ], 10, vt)
+                ]))
+              ], 2)
+            ], 2)
+          ], 2)
+        ]),
+        a.showPagination || e.$slots.footer ? (r(), p(_e, {
+          key: 3,
+          "current-page": T.value,
+          "total-pages": G.value,
+          total: h.value.length,
+          "page-size": B.value,
+          "show-pagination": a.showPagination,
+          selectable: a.selectable,
+          "selected-count": a.selectedItems.length,
+          variant: a.paginationVariant,
+          padding: a.paginationPadding,
+          loading: a.paginationLoading,
+          disabled: a.loading || a.dataLoading,
+          "onUpdate:currentPage": _,
+          "onUpdate:pageSize": Ve
+        }, {
+          footer: b(() => [
+            S(e.$slots, "footer", {}, void 0, !0)
+          ]),
+          _: 3
+        }, 8, ["current-page", "total-pages", "total", "page-size", "show-pagination", "selectable", "selected-count", "variant", "padding", "loading", "disabled"])) : y("", !0),
+        N(lt, {
+          modelValue: D.value,
+          "onUpdate:modelValue": t[7] || (t[7] = (n) => D.value = n),
+          size: "lg",
+          onClose: Ue
+        }, {
+          default: b(() => [
+            d("div", kt, [
+              t[14] || (t[14] = d("h3", { class: "text-md font-semibold mb-4" }, " Full Text ", -1)),
+              d("div", xt, $(L.value), 1)
+            ])
+          ]),
+          _: 1
+        }, 8, ["modelValue"])
+      ], 2);
+    };
+  }
+}, Kt = /* @__PURE__ */ nt(Ct, [["__scopeId", "data-v-dc691687"]]);
+export {
+  Kt as default
+};