@synopackageland/ui 0.25.21 → 0.25.22

package/dist/modules/components/composite/data-grid/DataGrid.vue.js

@@ -0,0 +1,1327 @@
+import { defineComponent as Ja, useSlots as Qa, getCurrentInstance as el, computed as i, ref as b, watch as De, useTemplateRef as Je, onBeforeUnmount as tl, provide as al, openBlock as o, createElementBlock as s, unref as f, normalizeClass as h, createVNode as g, Fragment as k, createElementVNode as c, toDisplayString as y, withCtx as w, createCommentVNode as v, normalizeStyle as R, renderSlot as _, createTextVNode as K, renderList as A, createBlock as m, withModifiers as S, mergeProps as de, withKeys as Vt } from "vue";
+import { useInsertedKeys as ll } from "../../../lib/motion.js";
+import { useUiText as rl } from "../../../i18n/text.js";
+import { FORM_FIELD_KEY as ol } from "../form/context.js";
+import { SlidersHorizontal as nl, ChevronDown as Qe, ChevronRight as ce, RefreshCw as et, ArrowUp as sl, ArrowDown as il, ChevronUp as ul, Columns3 as dl, GripVertical as Ft, ChevronLeft as cl } from "@lucide/vue";
+import { onLongPress as vl } from "../../../vendor/@vueuse/core/dist/index.js";
+import Gt from "../../primitives/button/Button.vue.js";
+import pl from "../../primitives/sheet/BottomSheet.vue.js";
+import fl from "../../primitives/pagination/Pagination.vue.js";
+import { usePhonePresentation as gl, PHONE_MIN_CAP as hl } from "../../primitives/sheet/phone.js";
+import tt from "../../primitives/checkbox/Checkbox.vue.js";
+import yl from "../../primitives/select/Select.vue.js";
+import wl from "../scroll-edges/ScrollEdges.vue.js";
+import P from "../../primitives/button/IconButton.vue.js";
+import bl from "../../primitives/dropdown-menu/DropdownMenu.vue.js";
+import jt from "../../primitives/loading/LoadingMask.vue.js";
+import xl from "../../primitives/tooltip/OverflowTooltip.vue.js";
+import Xt from "./DataGridSelectBox.vue.js";
+import { provideOverflowTooltipRegion as kl } from "../../../lib/truncation.js";
+import { localizedDataGridLabels as _l } from "./labels.js";
+import { useElementWidth as ml } from "../../../composables/elementWidth.js";
+import { orderColumns as Cl, moveKey as Yt } from "./columnState.js";
+import { normalizeFilter as Sl, rowMatches as Kl } from "./rowFilter.js";
+import { loadGridState as zl, saveGridState as Dl } from "./viewState.js";
+import { columnHasTabularDigits as Zt, columnAlignClass as El, ACTIONS_CELL_CLASS as Rl } from "./columnType.js";
+import { listLayout as $l } from "./listLayout.js";
+import { columnsHiddenByWidth as Tl, distributeColumnWidths as Ol, FLEX_MIN_COLUMN_WIDTH as Al, DEFAULT_MIN_COLUMN_WIDTH as Ll, toPixels as qt, KEYBOARD_RESIZE_STEP as Jt, clampWidth as Qt } from "./columnWidths.js";
+const Il = ["data-fill", "data-ui-natural-height", "data-ui-data-view"], Hl = { class: "min-w-0 flex-1 truncate text-[length:var(--ui-font-size-sm)] text-[var(--ui-text-secondary)]" }, Ml = {
+  key: 0,
+  class: "px-[var(--ui-inset-x)] py-8 text-center text-[var(--ui-text-secondary)]"
+}, Wl = ["data-group-row"], Pl = ["aria-expanded", "onClick"], Bl = ["data-expand-row"], Ul = ["data-row-key", "data-ui-row-new", "data-selected", "tabindex", "onClick", "onKeydown"], Nl = { class: "min-w-0 flex-1" }, Vl = ["data-column"], Fl = {
+  key: 1,
+  "data-grid-list-subtitle": "",
+  class: "flex min-w-0 items-center gap-1 text-[length:var(--ui-font-size-sm)] text-[var(--ui-text-secondary)]"
+}, Gl = ["data-column"], jl = ["data-column", "onClick"], Xl = {
+  class: "min-w-0 flex-1 truncate",
+  "aria-live": "polite"
+}, Yl = {
+  key: 0,
+  class: "min-w-0"
+}, Zl = {
+  key: 2,
+  class: "flex min-h-[var(--ui-control-md)] items-center gap-2"
+}, ql = { class: "min-w-0 flex-1 truncate text-[length:var(--ui-font-size-sm)] text-[var(--ui-text-secondary)]" }, Jl = { class: "flex flex-col gap-4" }, Ql = ["aria-label"], er = {
+  "aria-hidden": "true",
+  class: "m-0 pb-1 text-[length:var(--ui-font-size-sm)] text-[var(--ui-text-secondary)]"
+}, tr = ["data-sort-option", "aria-pressed", "onClick"], ar = { class: "min-w-0 flex-1 truncate" }, lr = { class: "text-[length:var(--ui-font-size-sm)] text-[var(--ui-text-secondary)]" }, rr = ["aria-label"], or = {
+  "aria-hidden": "true",
+  class: "m-0 pb-1 text-[length:var(--ui-font-size-sm)] text-[var(--ui-text-secondary)]"
+}, nr = ["data-column-option"], sr = { class: "min-w-0 flex-1 truncate" }, ir = {
+  key: 0,
+  "aria-hidden": "true",
+  class: "h-[var(--ui-grid-header-height)] border-b border-[var(--ui-border-subtle)] p-0"
+}, ur = {
+  key: 1,
+  "data-ui-grid-select-all": "",
+  class: "h-[var(--ui-grid-header-height)] border-b border-[var(--ui-border-subtle)] px-2 text-center font-normal"
+}, dr = { class: "flex items-center justify-center" }, cr = ["data-column", "data-column-type", "aria-sort", "tabindex", "draggable", "aria-keyshortcuts", "onClick", "onKeydown", "onDragstart", "onDragover", "onDrop"], vr = {
+  "data-ui-grid-header-label": "",
+  class: "min-w-0 truncate"
+}, pr = ["aria-label", "onPointerdown", "onKeydown"], fr = {
+  key: 2,
+  "aria-hidden": "true",
+  class: "h-[var(--ui-grid-header-height)] border-b border-[var(--ui-border-subtle)] p-0"
+}, gr = {
+  key: 3,
+  class: "sticky right-0 h-[var(--ui-grid-header-height)] border-b border-[var(--ui-border-subtle)] bg-[var(--ui-surface)] p-0 text-center font-normal"
+}, hr = { key: 0 }, yr = ["colspan"], wr = ["data-group-row"], br = ["colspan"], xr = ["aria-expanded", "onClick"], kr = { class: "min-w-0 truncate" }, _r = ["data-expand-row"], mr = ["colspan"], Cr = { class: "min-w-0 [overflow-wrap:anywhere]" }, Sr = ["data-row-key", "data-ui-row-new", "draggable", "tabindex", "aria-selected", "onClick", "onKeydown", "onDblclick", "onDragstart", "onDragover", "onDrop"], Kr = {
+  key: 0,
+  class: "h-[calc(var(--ui-grid-row-height)+1px)] px-1 text-center"
+}, zr = ["aria-expanded", "aria-label", "onClick"], Dr = { class: "flex items-center justify-center" }, Er = ["data-column", "data-column-type"], Rr = ["aria-label", "onKeydown"], $r = {
+  key: 2,
+  class: "h-[calc(var(--ui-grid-row-height)+1px)] px-1 text-center"
+}, Tr = ["aria-label", "onKeydown"], Or = {
+  key: 3,
+  "aria-hidden": "true",
+  class: "p-0"
+}, Ar = { class: "min-w-0 flex-1" }, Lr = { class: "flex items-center gap-1" }, Ir = {
+  key: 1,
+  "data-page-size": "",
+  class: "block w-[72px] shrink-0"
+}, Hr = { class: "sr-only" }, Mr = {
+  key: 2,
+  class: "h-4 border-l border-[var(--ui-border)]",
+  "aria-hidden": "true"
+}, at = 40, lt = 32, ea = 32, rt = 32, ta = "__reset__", Wr = 20, Pr = 8, aa = 16, go = /* @__PURE__ */ Ja({
+  __name: "DataGrid",
+  props: {
+    columns: {},
+    rows: {},
+    rowKey: { default: "id" },
+    sort: { default: void 0 },
+    defaultSort: { default: null },
+    selectedKeys: { default: () => [] },
+    selectable: { type: Boolean, default: !1 },
+    selectOnRowClick: { type: Boolean, default: !1 },
+    rowSelectable: { type: Function, default: void 0 },
+    rowSelectDisabledReason: { type: Function, default: void 0 },
+    selectAllScope: { default: "page" },
+    singleSelect: { type: Boolean, default: !1 },
+    page: { default: void 0 },
+    pageSize: { default: void 0 },
+    pageSizes: {},
+    totalRows: {},
+    filter: { default: "" },
+    filterRow: {},
+    localFilter: { type: Boolean, default: !0 },
+    localSort: { type: Boolean, default: !0 },
+    localPagination: { type: Boolean, default: !0 },
+    loading: { type: Boolean, default: !1 },
+    loadingText: { default: "" },
+    loadingRows: { default: 5 },
+    stickyHeader: { type: Boolean, default: !0 },
+    resizable: { type: Boolean, default: !0 },
+    columnWidths: {},
+    columnOrder: { default: void 0 },
+    hiddenColumns: { default: void 0 },
+    stateKey: {},
+    columnChooser: { type: Boolean, default: !1 },
+    columnReorder: { type: Boolean, default: !1 },
+    footer: { type: Boolean, default: void 0 },
+    refreshable: { type: Boolean, default: !1 },
+    refreshing: { type: Boolean, default: !1 },
+    maxHeight: {},
+    fill: { type: Boolean, default: !0 },
+    labels: {},
+    emptyText: {},
+    group: { default: null },
+    expandable: { default: null },
+    expandedKeys: { default: void 0 },
+    defaultExpandedKeys: { default: () => [] },
+    draggable: { type: [Boolean, Object], default: !1 },
+    mobileView: { default: "auto" }
+  },
+  emits: ["update:sort", "update:selectedKeys", "update:page", "update:pageSize", "update:columnWidths", "update:columnOrder", "update:hiddenColumns", "update:rows", "update:expandedKeys", "columnResize", "refresh", "rowClick", "rowDblclick", "rowActivate", "rowExpand", "rowCollapse", "groupToggle", "reorder", "cellEditStart", "cellEditEnd", "cellUpdate"],
+  setup(la, { expose: ra, emit: oa }) {
+    const na = rl(), l = la, p = oa, sa = Qa(), ia = el(), ot = i(() => l.singleSelect || l.selectable && l.selectOnRowClick || typeof ia?.vnode.props?.onRowClick == "function"), d = i(() => ({
+      ..._l(na),
+      ...l.emptyText ? { empty: l.emptyText } : {},
+      ...l.labels
+    }));
+    function u(e, a = 0) {
+      return String(e[l.rowKey] ?? a);
+    }
+    const Ee = b(null);
+    De(() => l.rows, () => {
+      Ee.value = null;
+    });
+    const x = i(() => Ee.value ?? l.rows);
+    function Re(e) {
+      Ee.value = e, p("update:rows", e);
+    }
+    const Y = l.stateKey ? zl(l.stateKey) : {}, ve = b(Y.sort !== void 0 ? Y.sort : l.defaultSort), z = i(() => l.sort !== void 0 ? l.sort : ve.value);
+    function ua(e, a) {
+      return e == null && a == null ? 0 : e == null ? -1 : a == null ? 1 : typeof e == "number" && typeof a == "number" ? e - a : e instanceof Date && a instanceof Date ? e.getTime() - a.getTime() : String(e).localeCompare(String(a), void 0, { numeric: !0, sensitivity: "base" });
+    }
+    const nt = i(() => l.localFilter ? Sl(l.filter) : ""), $e = i(() => {
+      const e = nt.value;
+      return e ? x.value.filter((a) => l.filterRow ? l.filterRow(a, e) : Kl(a, G.value, e)) : x.value;
+    }), te = i(() => {
+      const e = z.value;
+      if (!l.localSort || !e) return $e.value;
+      const a = l.columns.find((n) => n.key === e.key);
+      if (!a) return $e.value;
+      const t = e.direction === "asc" ? 1 : -1, r = a.compare ?? ua;
+      return [...$e.value].sort((n, E) => r(n[a.key], E[a.key], n, E) * t);
+    });
+    function da(e) {
+      if (e.sortable)
+        return z.value?.key !== e.key ? "none" : z.value.direction === "asc" ? "ascending" : "descending";
+    }
+    function ca(e) {
+      const a = z.value;
+      return !a || a.key !== e.key ? { key: e.key, direction: "asc" } : a.direction === "asc" ? { key: e.key, direction: "desc" } : null;
+    }
+    function pe(e) {
+      if (!e.sortable) return;
+      const a = ca(e);
+      ve.value = a, p("update:sort", a);
+    }
+    const st = b(1), ae = b(Y.pageSize ?? null), B = i(() => l.pageSize ?? ae.value ?? l.pageSizes?.[0] ?? Wr), L = i(() => l.localPagination ? te.value.length : l.totalRows ?? l.rows.length), fe = i(() => nt.value !== ""), O = i(() => Math.max(1, Math.ceil(L.value / B.value))), $ = i(() => Math.min(Math.max(1, l.page ?? st.value), O.value)), le = i(() => {
+      if (!l.localPagination) return te.value;
+      const e = ($.value - 1) * B.value;
+      return te.value.slice(e, e + B.value);
+    }), Te = i(() => new Map(le.value.map((e, a) => [e, a])));
+    function it(e) {
+      st.value = e, p("update:page", e);
+    }
+    function Oe(e) {
+      it(Math.min(O.value, Math.max(1, e)));
+    }
+    De([() => l.filter, z, B], () => {
+      $.value !== 1 && it(1);
+    });
+    const Z = i(() => (l.pageSizes ?? []).map((e) => ({ label: String(e), value: String(e) })));
+    function ut(e) {
+      const a = Number(e);
+      !Number.isFinite(a) || a <= 0 || a === B.value || (ae.value = a, p("update:pageSize", a));
+    }
+    const dt = i(() => l.footer ?? (O.value > 1 || !!sa.footer || Z.value.length > 0 && x.value.length > Math.min(...l.pageSizes))), Ae = i(() => le.value.map((e, a) => u(e, a)));
+    function q(e) {
+      return l.rowSelectable ? l.rowSelectable(e) : !0;
+    }
+    function va(e) {
+      return q(e) ? void 0 : l.rowSelectDisabledReason?.(e) || void 0;
+    }
+    const J = i(() => (l.selectAllScope === "all" ? te.value : le.value).flatMap((a, t) => q(a) ? [u(a, t)] : [])), I = i(() => new Set(l.selectedKeys)), ct = i(() => J.value.filter((e) => I.value.has(e)).length), ge = i(() => J.value.length > 0 && ct.value === J.value.length), vt = i(() => ct.value > 0 && !ge.value);
+    function re(e, a) {
+      const t = new Set(l.selectedKeys);
+      a ? t.add(e) : t.delete(e), p("update:selectedKeys", [...t]);
+    }
+    function pt(e) {
+      const a = new Set(l.selectedKeys), t = e && !ge.value;
+      for (const r of J.value)
+        t ? a.add(r) : a.delete(r);
+      p("update:selectedKeys", [...a]);
+    }
+    function pa(e, a, t) {
+      if (p("rowClick", a), l.singleSelect) {
+        p("update:selectedKeys", [t]);
+        return;
+      }
+      !l.selectable || !l.selectOnRowClick || (e.ctrlKey || e.metaKey ? re(t, !l.selectedKeys.includes(t)) : p("update:selectedKeys", [t]));
+    }
+    const he = i(() => {
+      const e = l.group;
+      if (!e) return null;
+      const a = /* @__PURE__ */ new Map();
+      for (const r of le.value) {
+        const n = r[e.field], E = String(n), T = a.get(E);
+        T ? T.rows.push(r) : a.set(E, { key: n, rows: [r] });
+      }
+      const t = [...a.entries()].map(([r, n]) => ({
+        id: r,
+        key: n.key,
+        rows: n.rows,
+        label: e.label?.(n.key, n.rows) ?? (n.key == null ? "" : String(n.key))
+      }));
+      return e.compare && t.sort((r, n) => e.compare(r.key, n.key)), t;
+    }), Le = b({});
+    function ft(e) {
+      return Le.value[e] ?? l.group?.defaultExpanded ?? !0;
+    }
+    function Ie(e, a) {
+      Le.value = { ...Le.value, [e]: a }, p("groupToggle", e, a);
+    }
+    function ye(e) {
+      Ie(e, !ft(e));
+    }
+    const gt = (e) => ({ keys: e.map((a, t) => u(a, t)) }), ht = i(() => !!l.expandable), U = i(() => ht.value && l.expandable?.type !== "cell"), yt = i(() => l.expandable?.slot ?? "expand"), oe = b([...l.defaultExpandedKeys]), H = i(() => l.expandedKeys ?? oe.value);
+    function He(e, a) {
+      const t = a ? [.../* @__PURE__ */ new Set([...H.value, e])] : H.value.filter((r) => r !== e);
+      t.length !== H.value.length && (oe.value = t, p("update:expandedKeys", t), p(a ? "rowExpand" : "rowCollapse", e));
+    }
+    const wt = i(() => (U.value ? lt : 0) + (l.selectable ? at : 0) + Pr), fa = (e) => He(e, !0), ga = (e) => He(e, !1), ha = () => {
+      const e = [.../* @__PURE__ */ new Set([...H.value, ...Ae.value])];
+      oe.value = e, p("update:expandedKeys", e);
+    }, ya = () => {
+      const e = new Set(Ae.value), a = H.value.filter((t) => !e.has(t));
+      oe.value = a, p("update:expandedKeys", a);
+    }, wa = (e) => {
+      oe.value = [...e], p("update:expandedKeys", [...e]);
+    }, ba = () => {
+      for (const e of he.value ?? []) Ie(e.id, !0);
+    }, xa = () => {
+      for (const e of he.value ?? []) Ie(e.id, !1);
+    };
+    function we(e) {
+      He(e, !H.value.includes(e));
+    }
+    const be = i(() => l.draggable ? typeof l.draggable == "object" ? l.draggable : {} : null), bt = i(() => !!be.value), ne = i(() => bt.value && !be.value?.pivotColumn ? "__drag__" : null), N = b(null), xe = b(null);
+    function xt(e, a) {
+      const t = [...x.value];
+      if (e === a || e < 0 || a < 0 || e >= t.length || a >= t.length) return;
+      const [r] = t.splice(e, 1);
+      t.splice(a, 0, r), Re(t), p("reorder", { rows: t, key: u(r), from: e, to: a });
+    }
+    const kt = (e) => {
+      const a = x.value.indexOf(e);
+      a > 0 && xt(a, a - 1);
+    }, _t = (e) => {
+      const a = x.value.indexOf(e);
+      a >= 0 && a < x.value.length - 1 && xt(a, a + 1);
+    };
+    function ka(e, a) {
+      N.value = u(a), e.dataTransfer?.setData("text/plain", N.value), e.dataTransfer && (e.dataTransfer.effectAllowed = "move");
+    }
+    function mt(e) {
+      const a = x.value.find((t) => u(t) === N.value);
+      return !a || a === e ? !1 : be.value?.withinGroup && l.group ? a[l.group.field] === e[l.group.field] : !0;
+    }
+    function _a(e, a, t) {
+      mt(a) && (xe.value = t, e.dataTransfer && (e.dataTransfer.dropEffect = "move"));
+    }
+    function ma(e, a) {
+      if (xe.value = null, !mt(a)) return;
+      const t = x.value.find((X) => u(X) === N.value);
+      if (N.value = null, !t) return;
+      const r = [...x.value], n = r.indexOf(t), E = r.indexOf(a);
+      r.splice(n, 1);
+      const T = r.indexOf(a);
+      r.splice(n < E ? T + 1 : T, 0, t), Re(r), p("reorder", { rows: r, key: u(t), from: n, to: r.indexOf(t) });
+    }
+    function Ca() {
+      N.value = null, xe.value = null;
+    }
+    function Ct(e, a) {
+      e.key === "ArrowUp" ? (e.preventDefault(), kt(a)) : e.key === "ArrowDown" && (e.preventDefault(), _t(a));
+    }
+    const ke = b(null);
+    function St(e, a) {
+      return ke.value?.key === u(e) && ke.value?.column === a.key;
+    }
+    function Sa(e, a) {
+      ke.value = { key: u(e), column: a.key }, p("cellEditStart", { row: e, column: a, key: u(e) });
+    }
+    function Ka(e, a) {
+      St(e, a) && (ke.value = null, p("cellEditEnd", { row: e, column: a, key: u(e) }));
+    }
+    function za(e, a, t) {
+      const r = e[a.key];
+      Re(x.value.map((n) => n === e ? { ...n, [a.key]: t } : n)), p("cellUpdate", { row: e, column: a, key: u(e), value: t, previous: r });
+    }
+    const Me = b(Y.columnOrder ?? null), We = b(Y.hiddenColumns ?? null), V = i(() => Cl(l.columns, l.columnOrder ?? Me.value ?? [])), Kt = i(() => l.columns.filter((e) => e.defaultHidden).map((e) => e.key)), F = i(() => l.hiddenColumns ?? We.value ?? Kt.value), G = i(() => V.value.filter((e) => e.hideable === !1 || !F.value.includes(e.key)));
+    function Pe(e) {
+      Me.value = e, p("update:columnOrder", e);
+    }
+    function Be(e) {
+      We.value = e, p("update:hiddenColumns", e);
+    }
+    function Da(e, a) {
+      const t = C.value[C.value.indexOf(e) + a];
+      if (!t) return;
+      const r = V.value.map((n) => n.key);
+      Pe(Yt(r, e.key, r.indexOf(t.key)));
+    }
+    function Ea(e, a) {
+      const t = e.key === "ArrowLeft" ? -1 : e.key === "ArrowRight" ? 1 : 0;
+      !l.columnReorder || !e.altKey || t === 0 || (e.preventDefault(), Da(a, t));
+    }
+    const Q = b(null), Ue = b(null);
+    function Ra(e, a) {
+      if (ee) {
+        e.preventDefault();
+        return;
+      }
+      Q.value = a.key, e.dataTransfer?.setData("text/plain", a.key), e.dataTransfer && (e.dataTransfer.effectAllowed = "move");
+    }
+    function $a(e, a) {
+      !Q.value || Q.value === a.key || (e.preventDefault(), Ue.value = a.key, e.dataTransfer && (e.dataTransfer.dropEffect = "move"));
+    }
+    function Ta(e) {
+      const a = Q.value;
+      if (zt(), !a || a === e.key) return;
+      const t = V.value.map((r) => r.key);
+      Pe(Yt(t, a, t.indexOf(e.key)));
+    }
+    function zt() {
+      Q.value = null, Ue.value = null;
+    }
+    const Oa = i(() => [
+      ...V.value.map((e) => ({
+        type: "checkbox",
+        key: e.key,
+        label: e.label,
+        hint: Et.value.includes(e.key) ? d.value.hiddenByWidth : void 0,
+        // The last shown column stays, so the grid never loses all its columns.
+        disabled: e.hideable === !1 || C.value.length === 1 && C.value[0] === e
+      })),
+      { type: "separator", key: "__separator__" },
+      { key: ta, label: d.value.resetColumns }
+    ]);
+    function Aa(e, a) {
+      ie.value = a ? [...ie.value, e] : ie.value.filter((t) => t !== e), !(a && !F.value.includes(e)) && Be(a ? F.value.filter((t) => t !== e) : [...F.value, e]);
+    }
+    function Ne() {
+      Pe(l.columns.map((e) => e.key)), Be([...Kt.value]), ie.value = [], j.value = {}, p("update:columnWidths", {});
+    }
+    function La(e) {
+      e === ta && Ne();
+    }
+    const Dt = Je("scroller"), Ve = ml(i(() => Dt.value?.viewport)), j = b(Y.columnWidths ?? {});
+    De(() => l.columnWidths, () => {
+      j.value = {};
+    });
+    const Ia = (e) => Fe(e) === void 0 && !/%\s*$/.test(String(e.width ?? ""));
+    function se(e) {
+      return qt(e.minWidth) ?? (Ia(e) ? Al : Ll);
+    }
+    function Fe(e) {
+      return j.value[e.key] ?? l.columnWidths?.[e.key] ?? qt(e.width);
+    }
+    const Ge = i(() => (l.selectable ? at : 0) + (U.value ? lt : 0) + (ne.value ? ea : 0) + (l.columnChooser ? rt : 0)), ie = b([]), Et = i(() => Tl(G.value.map((e) => ({
+      key: e.key,
+      minWidth: Fe(e) ?? se(e),
+      // A fixed (`hideable: false`) column only drops when the author gave it a priority.
+      priority: e.hideable === !1 && e.priority === void 0 || ie.value.includes(e.key) ? void 0 : e.priority
+    })), Ve.value - Ge.value)), C = i(() => G.value.filter((e) => !Et.value.includes(e.key))), je = i(() => {
+      const e = Math.max(0, Ve.value - Ge.value);
+      return Ol(C.value.map((a) => {
+        const t = /^\s*(\d+(\.\d+)?)%\s*$/.exec(String(a.width ?? "")), r = Fe(a) ?? (t ? Math.max(se(a), Math.floor(e * Number(t[1]) / 100)) : void 0);
+        return { key: a.key, width: r, minWidth: se(a), flex: a.flex ?? 1 };
+      }), e);
+    }), Rt = () => ({ ...je.value }), Ha = i(() => (l.selectable ? 1 : 0) + (U.value ? 1 : 0) + (ne.value ? 1 : 0) + (l.columnChooser ? 1 : 0)), Ma = i(() => Object.values(je.value).reduce((e, a) => e + a, 0) + Ge.value), $t = (e) => e.resizable ?? l.resizable, Tt = (e) => !!e.label || $t(e), Wa = (e, a) => {
+      const t = C.value[a + 1];
+      return !!t && Tt(e) && Tt(t);
+    };
+    function Ot(e, a) {
+      j.value = a, p("update:columnWidths", a), p("columnResize", { key: e.key, width: a[e.key] });
+    }
+    let ee;
+    function Pa(e, a) {
+      const t = Rt(), r = e.clientX, n = (X) => ({ ...t, [a.key]: Qt(t[a.key] + X - r, se(a)) }), E = (X) => {
+        j.value = n(X.clientX);
+      }, T = (X) => {
+        ee?.(), Ot(a, n(X.clientX));
+      };
+      ee = () => {
+        document.removeEventListener("pointermove", E), document.removeEventListener("pointerup", T), document.removeEventListener("pointercancel", T), ee = void 0;
+      }, document.addEventListener("pointermove", E), document.addEventListener("pointerup", T), document.addEventListener("pointercancel", T);
+    }
+    function Ba(e, a) {
+      const t = e.key === "ArrowRight" ? Jt : e.key === "ArrowLeft" ? -Jt : 0;
+      if (t === 0) return;
+      e.preventDefault();
+      const r = Rt();
+      Ot(a, { ...r, [a.key]: Qt(r[a.key] + t, se(a)) });
+    }
+    tl(() => ee?.()), kl();
+    const At = Je("gridRoot");
+    function Ua({ scope: e }) {
+      const a = C.value.find((n) => n.key === e.dataset.column);
+      if (!a) return;
+      if (e.tagName === "TH") return a.headerTooltip === !1 ? !1 : a.label;
+      if (a.tooltip === !1) return !1;
+      if (typeof a.tooltip != "function") return;
+      const t = e.closest("tr[data-row-key]")?.dataset.rowKey, r = M.value.find((n) => n.kind === "row" && u(n.row, n.index) === t);
+      return r && r.kind === "row" ? a.tooltip(r.row) : void 0;
+    }
+    if (l.stateKey) {
+      const e = l.stateKey;
+      De([Me, We, j, ve, ae], () => {
+        ee || Dl(e, {
+          columnOrder: V.value.map((a) => a.key),
+          hiddenColumns: [...F.value],
+          columnWidths: { ...j.value },
+          sort: ve.value,
+          ...ae.value ? { pageSize: ae.value } : {}
+        });
+      });
+    }
+    const Lt = El;
+    function ue(e, a) {
+      return {
+        row: e.row,
+        value: e.row[a.key],
+        column: a,
+        index: e.index,
+        expanded: e.expanded,
+        editing: St(e.row, a),
+        startEdit: () => Sa(e.row, a),
+        stopEdit: () => Ka(e.row, a),
+        toggleExpand: () => we(u(e.row, e.index)),
+        update: (t) => za(e.row, a, t)
+      };
+    }
+    const M = i(() => {
+      const e = [], a = (t) => {
+        const r = u(t, Te.value.get(t) ?? 0), n = ht.value && H.value.includes(r);
+        e.push({ kind: "row", id: `row-${r}`, row: t, index: Te.value.get(t) ?? 0, expanded: n }), n && e.push({ kind: "detail", id: `detail-${r}`, row: t, index: Te.value.get(t) ?? 0 });
+      };
+      if (he.value) {
+        for (const t of he.value) {
+          const r = ft(t.id);
+          e.push({ kind: "group", id: `group-${t.id}`, groupId: t.id, label: t.label, rows: t.rows, expanded: r }), r && t.rows.forEach(a);
+        }
+        return e;
+      }
+      return le.value.forEach(a), e;
+    }), _e = i(() => M.value.flatMap((e) => e.kind === "row" ? [u(e.row, e.index)] : [])), It = ll(() => M.value.flatMap((e) => e.kind === "row" && e.row[l.rowKey] != null ? [String(e.row[l.rowKey])] : []), { busy: () => l.loading || l.refreshing }), Ht = i(() => l.singleSelect ? _e.value.find((e) => l.selectedKeys.includes(e)) ?? _e.value[0] ?? null : null), Na = { ArrowUp: -1, ArrowDown: 1 };
+    function Va(e, a, t) {
+      if (!l.singleSelect || e.target !== e.currentTarget) return;
+      if (e.key === "Enter") {
+        e.preventDefault(), p("rowActivate", a);
+        return;
+      }
+      const r = Na[e.key];
+      if (!r) return;
+      e.preventDefault();
+      const n = _e.value[_e.value.indexOf(t) + r];
+      if (n === void 0) return;
+      p("update:selectedKeys", [n]), e.currentTarget.parentElement?.querySelector(`[data-row-key="${CSS.escape(n)}"]`)?.focus();
+    }
+    const me = gl(), Ce = i(() => l.mobileView === "list" || l.mobileView === "auto" && me.value), D = i(() => l.fill && !me.value), Xe = i(() => l.maxHeight && me.value ? `max(${l.maxHeight}, ${hl})` : l.maxHeight), W = i(() => $l(G.value)), Se = i(() => l.selectable && !l.singleSelect), Ke = i(() => Ce.value && Se.value && l.selectedKeys.length > 0), Mt = i(() => ot.value || Ke.value), Wt = Je("listEl"), Ye = b(!1), Ze = i(() => V.value.filter((e) => e.sortable)), Pt = i(() => Ze.value.length > 0 || l.columnChooser), Fa = i(() => {
+      const e = z.value, a = e && l.columns.find((t) => t.key === e.key);
+      return a ? `${a.label}, ${e.direction === "asc" ? d.value.ascending : d.value.descending}` : "";
+    }), Bt = i(() => fe.value && l.localPagination ? d.value.filtered(L.value, x.value.length) : d.value.items(L.value)), Ga = i(() => te.value.filter((e, a) => I.value.has(u(e, a))));
+    function Ut() {
+      p("update:selectedKeys", []);
+    }
+    function ja(e) {
+      const a = M.value.find((t) => t.kind === "row" && u(t.row, t.index) === e);
+      return a && a.kind === "row" ? a.row : void 0;
+    }
+    let ze = !1;
+    vl(Wt, (e) => {
+      if (!Se.value) return;
+      const a = e.target?.closest("[data-row-key]")?.dataset.rowKey, t = a === void 0 ? void 0 : ja(a);
+      !t || !q(t) || a === void 0 || (ze = !0, I.value.has(a) || re(a, !0));
+    }, { delay: 500, distanceThreshold: 10 });
+    function Xa() {
+      ze = !1;
+    }
+    function Nt(e, a) {
+      if (ze) {
+        ze = !1;
+        return;
+      }
+      if (Ke.value) {
+        q(e) && re(a, !I.value.has(a));
+        return;
+      }
+      p("rowClick", e), l.singleSelect && p("update:selectedKeys", [a]);
+    }
+    function Ya(e, a, t) {
+      e.target !== e.currentTarget || e.key !== "Enter" && e.key !== " " || (e.preventDefault(), Nt(a, t));
+    }
+    function Za(e) {
+      return e.hideable === !1 || G.value.length === 1 && G.value[0] === e;
+    }
+    function qa(e, a) {
+      Be(a ? F.value.filter((t) => t !== e) : [.../* @__PURE__ */ new Set([...F.value, e])]);
+    }
+    const qe = i(() => C.value.length + Ha.value + 1);
+    return ra({
+      expandRow: fa,
+      collapseRow: ga,
+      expandAllRows: ha,
+      collapseAllRows: ya,
+      /** Keys of the rows shown now (this page, after filtering and sorting). */
+      visibleRowKeys: Ae,
+      /** Keys of the expanded rows. */
+      expandedRowKeys: H,
+      setExpandedKeys: wa,
+      expandAllGroups: ba,
+      collapseAllGroups: xa,
+      moveRowUp: kt,
+      moveRowDown: _t,
+      resetColumns: Ne
+    }), al(ol, null), (e, a) => (o(), s("div", {
+      ref_key: "gridRoot",
+      ref: At,
+      class: h(["flex min-w-0 flex-col text-[length:var(--ui-font-size)]", D.value && "min-h-0 flex-1"]),
+      "data-fill": D.value || void 0,
+      "data-ui-natural-height": f(me) ? "" : void 0,
+      "data-ui-data-view": Ce.value ? "list" : "table",
+      "data-ui-data-grid": "",
+      "data-syno-pkg-land-ui": ""
+    }, [
+      g(xl, {
+        target: At.value,
+        resolve: Ua
+      }, null, 8, ["target"]),
+      Ce.value ? (o(), s(k, { key: 0 }, [
+        Pt.value ? (o(), s("div", {
+          key: 0,
+          "data-grid-list-bar": "",
+          class: h([!D.value && "ui-grid-list-bar-sticky", "flex min-h-[var(--ui-list-row-height)] shrink-0 items-center gap-2 border-b border-[var(--ui-border-subtle)] pl-3 pr-1"])
+        }, [
+          c("span", Hl, y(Fa.value), 1),
+          g(P, {
+            "data-grid-view-options": "",
+            label: d.value.viewOptions,
+            "aria-haspopup": "dialog",
+            onClick: a[0] || (a[0] = (t) => Ye.value = !0)
+          }, {
+            default: w(() => [
+              g(f(nl), { class: "size-4" })
+            ]),
+            _: 1
+          }, 8, ["label"])
+        ], 2)) : v("", !0),
+        g(jt, {
+          class: h(D.value && "min-h-0 flex-1"),
+          loading: l.loading,
+          text: l.loadingText
+        }, {
+          default: w(() => [
+            c("div", {
+              class: h(D.value ? "h-full overflow-y-auto overscroll-contain" : Xe.value ? "overflow-y-auto overscroll-contain" : "overflow-x-clip"),
+              style: R({ maxHeight: Xe.value })
+            }, [
+              M.value.length === 0 ? (o(), s("div", Ml, [
+                l.loading ? v("", !0) : _(e.$slots, "empty", {}, () => [
+                  K(y(fe.value && x.value.length ? d.value.noMatch : d.value.empty), 1)
+                ], void 0, 0)
+              ])) : (o(), s("ul", {
+                key: 1,
+                ref_key: "listEl",
+                ref: Wt,
+                "data-grid-list": "",
+                role: "list",
+                class: "m-0 list-none p-0"
+              }, [
+                (o(!0), s(k, null, A(M.value, (t) => (o(), s(k, {
+                  key: t.id
+                }, [
+                  t.kind === "group" ? (o(), s("li", {
+                    key: 0,
+                    "data-group-row": t.groupId,
+                    class: "border-b border-[var(--ui-border-subtle)] bg-[var(--ui-surface-subtle)]"
+                  }, [
+                    c("button", {
+                      type: "button",
+                      "data-group-toggle": "",
+                      "aria-expanded": t.expanded,
+                      class: "flex min-h-[var(--ui-list-row-height)] w-full items-center gap-2 border-0 bg-transparent px-[var(--ui-inset-x)] text-left text-[length:var(--ui-font-size-sm)] font-semibold text-[var(--ui-text-secondary)] outline-none focus-visible:shadow-[var(--ui-shadow-focus-inset)]",
+                      onClick: (r) => ye(t.groupId)
+                    }, [
+                      t.expanded ? (o(), m(f(Qe), {
+                        key: 0,
+                        class: "size-4 shrink-0",
+                        "aria-hidden": "true"
+                      })) : (o(), m(f(ce), {
+                        key: 1,
+                        class: "size-4 shrink-0",
+                        "aria-hidden": "true"
+                      })),
+                      c("span", {
+                        class: h(e.$slots["group-title"] ? "min-w-0 flex-1 whitespace-normal py-1 [overflow-wrap:anywhere]" : "min-w-0 truncate"),
+                        "data-group-title": ""
+                      }, [
+                        _(e.$slots, "group-title", {
+                          group: t.groupId,
+                          label: t.label,
+                          rows: t.rows,
+                          category: { key: t.groupId, keys: gt(t.rows).keys },
+                          expanded: t.expanded,
+                          toggle: () => ye(t.groupId)
+                        }, () => [
+                          K(y(t.label), 1)
+                        ])
+                      ], 2)
+                    ], 8, Pl)
+                  ], 8, Wl)) : t.kind === "detail" ? (o(), s("li", {
+                    key: 1,
+                    "data-expand-row": u(t.row, t.index),
+                    class: "min-w-0 border-b border-[var(--ui-border-subtle)] [overflow-wrap:anywhere]",
+                    style: R({ "--ui-grid-detail-indent": `${aa}px` })
+                  }, [
+                    _(e.$slots, yt.value, {
+                      row: t.row,
+                      index: t.index,
+                      indent: aa
+                    })
+                  ], 12, Bl)) : (o(), s("li", {
+                    key: 2,
+                    "data-row-key": u(t.row, t.index),
+                    "data-ui-row-new": f(It).has(u(t.row, t.index)) ? "" : void 0,
+                    "data-selected": I.value.has(u(t.row, t.index)) || void 0,
+                    tabindex: Mt.value ? 0 : void 0,
+                    class: h([
+                      "flex min-h-[var(--ui-list-row-height)] min-w-0 items-center gap-3 border-b border-[var(--ui-border-subtle)] px-[var(--ui-inset-x)] py-2 outline-none focus-visible:shadow-[var(--ui-shadow-focus-inset)]",
+                      Se.value && "select-none [-webkit-touch-callout:none]",
+                      Mt.value && "cursor-pointer active:bg-[var(--ui-pressed)]",
+                      I.value.has(u(t.row, t.index)) && "bg-[var(--ui-surface-selected)]"
+                    ]),
+                    onPointerdown: Xa,
+                    onClick: (r) => Nt(t.row, u(t.row, t.index)),
+                    onKeydown: (r) => Ya(r, t.row, u(t.row, t.index)),
+                    onContextmenu: a[2] || (a[2] = (r) => Se.value && r.preventDefault())
+                  }, [
+                    U.value ? (o(), m(P, {
+                      key: 0,
+                      "data-expand-toggle": "",
+                      class: "-ml-2",
+                      "aria-expanded": t.expanded,
+                      label: t.expanded ? d.value.collapseRow(u(t.row, t.index)) : d.value.expandRow(u(t.row, t.index)),
+                      onClick: S((r) => we(u(t.row, t.index)), ["stop"])
+                    }, {
+                      default: w(() => [
+                        g(f(ce), {
+                          class: h(["size-4 transition-transform", t.expanded && "rotate-90"]),
+                          "aria-hidden": "true"
+                        }, null, 8, ["class"])
+                      ]),
+                      _: 2
+                    }, 1032, ["aria-expanded", "label", "onClick"])) : v("", !0),
+                    Ke.value ? (o(), s("span", {
+                      key: 1,
+                      "data-grid-list-check": "",
+                      class: "-my-2 -ml-[var(--ui-inset-x)] -mr-1 flex w-[max(var(--ui-hit-min),36px)] shrink-0 items-center justify-center self-stretch",
+                      onClick: a[1] || (a[1] = S(() => {
+                      }, ["stop"]))
+                    }, [
+                      g(Xt, {
+                        "row-key": u(t.row, t.index),
+                        checked: I.value.has(u(t.row, t.index)),
+                        disabled: !q(t.row),
+                        label: d.value.selectRow(u(t.row, t.index), t.row),
+                        onToggle: re
+                      }, null, 8, ["row-key", "checked", "disabled", "label"])
+                    ])) : v("", !0),
+                    c("div", Nl, [
+                      W.value.title ? (o(), s("div", {
+                        key: 0,
+                        "data-grid-list-title": "",
+                        "data-column": W.value.title.key,
+                        class: "min-w-0 truncate text-[length:var(--ui-font-size)] text-[var(--ui-text)]"
+                      }, [
+                        _(e.$slots, `cell-${W.value.title.key}`, de({ ref_for: !0 }, ue(t, W.value.title)), () => [
+                          K(y(t.row[W.value.title.key]), 1)
+                        ])
+                      ], 8, Vl)) : v("", !0),
+                      W.value.subtitle.length ? (o(), s("div", Fl, [
+                        (o(!0), s(k, null, A(W.value.subtitle, (r, n) => (o(), s("span", {
+                          key: r.key,
+                          "data-column": r.key,
+                          class: h(["min-w-0 truncate", f(Zt)(r) && "tabular-nums", n === 0 ? "shrink" : "shrink-[2]"])
+                        }, [
+                          _(e.$slots, `cell-${r.key}`, de({ ref_for: !0 }, ue(t, r)), () => [
+                            K(y(t.row[r.key]), 1)
+                          ])
+                        ], 10, Gl))), 128))
+                      ])) : v("", !0)
+                    ]),
+                    (o(!0), s(k, null, A(W.value.trailing, (r) => (o(), s("div", {
+                      key: r.key,
+                      "data-grid-list-trailing": "",
+                      "data-column": r.key,
+                      class: h(["flex min-w-0 max-w-[45%] shrink-0 items-center justify-end gap-[max(4px,var(--ui-tap-gap,0px))]", r.type === "actions" && "-mr-2"]),
+                      onClick: (n) => r.type === "actions" && n.stopPropagation()
+                    }, [
+                      _(e.$slots, `cell-${r.key}`, de({ ref_for: !0 }, ue(t, r)), () => [
+                        K(y(t.row[r.key]), 1)
+                      ])
+                    ], 10, jl))), 128))
+                  ], 42, Ul))
+                ], 64))), 128))
+              ], 512))
+            ], 6)
+          ]),
+          _: 3
+        }, 8, ["class", "loading", "text"]),
+        Ke.value ? (o(), s("div", {
+          key: 1,
+          "data-grid-selection-bar": "",
+          class: h([!D.value && "ui-grid-selection-bar-sticky", "flex min-h-[var(--ui-chrome-height)] shrink-0 items-center gap-2 border-t border-[var(--ui-border)] bg-[var(--ui-surface)] pl-4 pr-1"])
+        }, [
+          g(tt, {
+            "model-value": ge.value,
+            indeterminate: vt.value,
+            disabled: !J.value.length,
+            "aria-label": d.value.selectAll,
+            "onUpdate:modelValue": pt
+          }, null, 8, ["model-value", "indeterminate", "disabled", "aria-label"]),
+          c("span", Xl, y(d.value.selected(l.selectedKeys.length)), 1),
+          _(e.$slots, "selection-actions", {
+            keys: l.selectedKeys,
+            rows: Ga.value,
+            clear: Ut
+          }),
+          g(Gt, {
+            variant: "ghost",
+            "data-grid-selection-cancel": "",
+            onClick: Ut
+          }, {
+            default: w(() => [
+              K(y(d.value.cancelSelection), 1)
+            ]),
+            _: 1
+          })
+        ], 2)) : dt.value ? (o(), s("div", {
+          key: 2,
+          "data-grid-footer": "",
+          class: h([D.value && "ui-grid-footer-pinned", "flex shrink-0 flex-col gap-1 border-t border-[var(--ui-border-subtle)] px-3 py-1 text-[var(--ui-text)]"])
+        }, [
+          e.$slots.footer ? (o(), s("div", Yl, [
+            _(e.$slots, "footer", {
+              total: L.value,
+              page: $.value,
+              pageCount: O.value
+            })
+          ])) : v("", !0),
+          O.value > 1 || Z.value.length ? (o(), m(fl, {
+            key: 1,
+            "model-value": $.value,
+            total: L.value,
+            "page-size": B.value,
+            "items-per-page": Z.value.length ? Z.value.map((t) => ({ label: t.label, value: Number(t.value) })) : !1,
+            "page-shift-unit": 1,
+            mode: "phone",
+            refresh: !1,
+            "onUpdate:modelValue": Oe,
+            "onUpdate:pageSize": a[4] || (a[4] = (t) => ut(String(t)))
+          }, {
+            total: w(() => [
+              K(y(Bt.value), 1)
+            ]),
+            "right-wrapper": w(() => [
+              l.refreshable ? (o(), m(P, {
+                key: 0,
+                "data-refresh": "",
+                label: d.value.refresh,
+                disabled: l.refreshing,
+                onClick: a[3] || (a[3] = (t) => p("refresh"))
+              }, {
+                default: w(() => [
+                  g(f(et), {
+                    class: h(["size-4", l.refreshing && "animate-spin"])
+                  }, null, 8, ["class"])
+                ]),
+                _: 1
+              }, 8, ["label", "disabled"])) : v("", !0)
+            ]),
+            _: 1
+          }, 8, ["model-value", "total", "page-size", "items-per-page"])) : (o(), s("div", Zl, [
+            c("span", ql, y(Bt.value), 1),
+            l.refreshable ? (o(), m(P, {
+              key: 0,
+              "data-refresh": "",
+              label: d.value.refresh,
+              disabled: l.refreshing,
+              onClick: a[5] || (a[5] = (t) => p("refresh"))
+            }, {
+              default: w(() => [
+                g(f(et), {
+                  class: h(["size-4", l.refreshing && "animate-spin"])
+                }, null, 8, ["class"])
+              ]),
+              _: 1
+            }, 8, ["label", "disabled"])) : v("", !0)
+          ]))
+        ], 2)) : v("", !0),
+        Pt.value ? (o(), m(pl, {
+          key: 3,
+          open: Ye.value,
+          "onUpdate:open": a[6] || (a[6] = (t) => Ye.value = t),
+          title: d.value.viewOptions
+        }, {
+          default: w(() => [
+            c("div", Jl, [
+              Ze.value.length ? (o(), s("div", {
+                key: 0,
+                role: "group",
+                "aria-label": d.value.sortBy,
+                "data-grid-sort-options": ""
+              }, [
+                c("p", er, y(d.value.sortBy), 1),
+                (o(!0), s(k, null, A(Ze.value, (t) => (o(), s("button", {
+                  key: t.key,
+                  type: "button",
+                  "data-sort-option": t.key,
+                  "aria-pressed": z.value?.key === t.key,
+                  class: "flex min-h-[max(var(--ui-menu-row-height),var(--ui-hit-min))] w-full items-center gap-2 rounded-[var(--ui-radius-inner)] border-0 bg-transparent px-2 text-left text-[length:var(--ui-font-size)] text-[var(--ui-text)] outline-none focus-visible:shadow-[var(--ui-shadow-focus)]",
+                  onClick: (r) => pe(t)
+                }, [
+                  c("span", ar, y(t.label), 1),
+                  z.value?.key === t.key ? (o(), s(k, { key: 0 }, [
+                    c("span", lr, y(z.value.direction === "asc" ? d.value.ascending : d.value.descending), 1),
+                    z.value.direction === "asc" ? (o(), m(f(sl), {
+                      key: 0,
+                      class: "size-4 shrink-0 text-[var(--ui-primary)]",
+                      "aria-hidden": "true"
+                    })) : (o(), m(f(il), {
+                      key: 1,
+                      class: "size-4 shrink-0 text-[var(--ui-primary)]",
+                      "aria-hidden": "true"
+                    }))
+                  ], 64)) : v("", !0)
+                ], 8, tr))), 128))
+              ], 8, Ql)) : v("", !0),
+              l.columnChooser ? (o(), s("div", {
+                key: 1,
+                role: "group",
+                "aria-label": d.value.columns,
+                "data-grid-column-options": ""
+              }, [
+                c("p", or, y(d.value.columns), 1),
+                (o(!0), s(k, null, A(V.value, (t) => (o(), s("label", {
+                  key: t.key,
+                  "data-column-option": t.key,
+                  class: "flex min-h-[max(var(--ui-menu-row-height),calc(var(--ui-hit-min)+4px))] items-center gap-3 px-2 text-[length:var(--ui-font-size)] text-[var(--ui-text)]"
+                }, [
+                  g(tt, {
+                    "model-value": G.value.includes(t),
+                    disabled: Za(t),
+                    "onUpdate:modelValue": (r) => qa(t.key, r)
+                  }, null, 8, ["model-value", "disabled", "onUpdate:modelValue"]),
+                  c("span", sr, y(t.label), 1)
+                ], 8, nr))), 128)),
+                g(Gt, {
+                  variant: "ghost",
+                  class: "mt-1",
+                  onClick: Ne
+                }, {
+                  default: w(() => [
+                    K(y(d.value.resetColumns), 1)
+                  ]),
+                  _: 1
+                })
+              ], 8, rr)) : v("", !0)
+            ])
+          ]),
+          _: 1
+        }, 8, ["open", "title"])) : v("", !0)
+      ], 64)) : (o(), m(jt, {
+        key: 1,
+        class: h(D.value && "min-h-0 flex-1"),
+        loading: l.loading,
+        text: l.loadingText
+      }, {
+        default: w(() => [
+          g(wl, {
+            ref_key: "scroller",
+            ref: Dt,
+            class: h(D.value && "h-full"),
+            "viewport-class": D.value ? "h-full overflow-auto" : "overflow-auto",
+            "viewport-style": { maxHeight: Xe.value }
+          }, {
+            default: w(() => [
+              c("table", {
+                class: "border-separate border-spacing-0",
+                style: R({ tableLayout: "fixed", width: `${Ma.value}px`, minWidth: "100%" })
+              }, [
+                c("colgroup", null, [
+                  U.value ? (o(), s("col", {
+                    key: 0,
+                    style: R({ width: `${lt}px` })
+                  }, null, 4)) : v("", !0),
+                  l.selectable ? (o(), s("col", {
+                    key: 1,
+                    style: R({ width: `${at}px` })
+                  }, null, 4)) : v("", !0),
+                  (o(!0), s(k, null, A(C.value, (t) => (o(), s("col", {
+                    key: t.key,
+                    style: R({ width: `${je.value[t.key]}px` })
+                  }, null, 4))), 128)),
+                  ne.value ? (o(), s("col", {
+                    key: 2,
+                    style: R({ width: `${ea}px` })
+                  }, null, 4)) : v("", !0),
+                  a[14] || (a[14] = c("col", { "data-grid-filler": "" }, null, -1)),
+                  l.columnChooser ? (o(), s("col", {
+                    key: 3,
+                    style: R({ width: `${rt}px` })
+                  }, null, 4)) : v("", !0)
+                ]),
+                c("thead", {
+                  class: h(["bg-[var(--ui-surface)] text-[var(--ui-text-secondary)]", l.stickyHeader && "sticky top-0 z-10"])
+                }, [
+                  c("tr", null, [
+                    U.value ? (o(), s("th", ir)) : v("", !0),
+                    l.selectable ? (o(), s("th", ur, [
+                      c("div", dr, [
+                        g(tt, {
+                          "model-value": ge.value,
+                          indeterminate: vt.value,
+                          disabled: !J.value.length,
+                          "aria-label": d.value.selectAll,
+                          "onUpdate:modelValue": pt
+                        }, null, 8, ["model-value", "indeterminate", "disabled", "aria-label"])
+                      ])
+                    ])) : v("", !0),
+                    (o(!0), s(k, null, A(C.value, (t, r) => (o(), s("th", {
+                      key: t.key,
+                      "data-column": t.key,
+                      "data-column-type": t.type ?? "text",
+                      "aria-sort": da(t),
+                      tabindex: t.sortable || l.columnReorder ? 0 : void 0,
+                      draggable: l.columnReorder || void 0,
+                      "aria-keyshortcuts": l.columnReorder ? "Alt+ArrowLeft Alt+ArrowRight" : void 0,
+                      style: R(l.columnChooser && t === C.value[C.value.length - 1] ? { paddingInlineEnd: `${rt}px` } : void 0),
+                      class: h(["relative h-[var(--ui-grid-header-height)] select-none overflow-hidden border-b border-[var(--ui-border-subtle)] px-2 font-normal text-ellipsis whitespace-nowrap outline-none focus-visible:shadow-[var(--ui-shadow-focus-inset)]", [
+                        f(Lt)(t),
+                        Wa(t, r) && "border-r",
+                        t.sortable && "cursor-pointer hover:bg-[var(--ui-surface-hover)]",
+                        Q.value === t.key && "opacity-40",
+                        Ue.value === t.key && "shadow-[inset_2px_0_0_0_var(--ui-primary)]"
+                      ]]),
+                      onClick: (n) => pe(t),
+                      onKeydown: [
+                        Vt(S((n) => pe(t), ["prevent"]), ["enter"]),
+                        Vt(S((n) => pe(t), ["prevent"]), ["space"]),
+                        (n) => Ea(n, t)
+                      ],
+                      onDragstart: (n) => Ra(n, t),
+                      onDragover: (n) => $a(n, t),
+                      onDrop: S((n) => Ta(t), ["prevent"]),
+                      onDragend: zt
+                    }, [
+                      c("div", {
+                        class: h(["inline-flex max-w-full items-center gap-1", t.align === "right" && "flex-row-reverse"])
+                      }, [
+                        c("span", vr, [
+                          _(e.$slots, `header-${t.key}`, { column: t }, () => [
+                            K(y(t.label), 1)
+                          ])
+                        ]),
+                        t.sortable && z.value?.key === t.key ? (o(), s(k, { key: 0 }, [
+                          z.value.direction === "asc" ? (o(), m(f(ul), {
+                            key: 0,
+                            class: "size-3 shrink-0 text-[var(--ui-text)]",
+                            "aria-hidden": "true"
+                          })) : (o(), m(f(Qe), {
+                            key: 1,
+                            class: "size-3 shrink-0 text-[var(--ui-text)]",
+                            "aria-hidden": "true"
+                          }))
+                        ], 64)) : v("", !0)
+                      ], 2),
+                      $t(t) ? (o(), s("span", {
+                        key: 0,
+                        "data-resize-handle": "",
+                        role: "separator",
+                        "aria-orientation": "vertical",
+                        tabindex: "0",
+                        "aria-label": d.value.resizeColumn(t.label),
+                        class: "absolute top-0 right-0 z-10 h-full w-2 cursor-col-resize touch-none outline-none hover:bg-[var(--ui-primary-soft)] focus-visible:bg-[var(--ui-primary-soft)]",
+                        onPointerdown: S((n) => Pa(n, t), ["stop", "prevent"]),
+                        onClick: a[7] || (a[7] = S(() => {
+                        }, ["stop"])),
+                        onKeydown: S((n) => Ba(n, t), ["stop"])
+                      }, null, 40, pr)) : v("", !0)
+                    ], 46, cr))), 128)),
+                    ne.value ? (o(), s("th", fr)) : v("", !0),
+                    a[15] || (a[15] = c("th", {
+                      "data-grid-filler": "",
+                      "aria-hidden": "true",
+                      class: "h-[var(--ui-grid-header-height)] border-b border-[var(--ui-border-subtle)] p-0"
+                    }, null, -1)),
+                    l.columnChooser ? (o(), s("th", gr, [
+                      g(bl, {
+                        items: Oa.value,
+                        align: "end",
+                        "checked-keys": C.value.map((t) => t.key),
+                        onToggle: Aa,
+                        onSelect: La
+                      }, {
+                        trigger: w(() => [
+                          g(P, {
+                            "data-column-chooser": "",
+                            label: d.value.columns,
+                            size: "sm"
+                          }, {
+                            default: w(() => [
+                              g(f(dl), { class: "size-3.5" })
+                            ]),
+                            _: 1
+                          }, 8, ["label"])
+                        ]),
+                        _: 1
+                      }, 8, ["items", "checked-keys"])
+                    ])) : v("", !0)
+                  ])
+                ], 2),
+                c("tbody", null, [
+                  M.value.length === 0 ? (o(), s("tr", hr, [
+                    c("td", {
+                      colspan: qe.value,
+                      class: "h-28 p-0 text-center text-[var(--ui-text-secondary)]"
+                    }, [
+                      c("div", {
+                        class: "sticky left-0 box-border px-2",
+                        style: R({ width: `${f(Ve)}px` })
+                      }, [
+                        l.loading ? v("", !0) : _(e.$slots, "empty", {}, () => [
+                          K(y(fe.value && x.value.length ? d.value.noMatch : d.value.empty), 1)
+                        ], void 0, 0)
+                      ], 4)
+                    ], 8, yr)
+                  ])) : v("", !0),
+                  (o(!0), s(k, null, A(M.value, (t) => (o(), s(k, {
+                    key: t.id
+                  }, [
+                    t.kind === "group" ? (o(), s("tr", {
+                      key: 0,
+                      "data-group-row": t.groupId,
+                      class: "border-b border-[var(--ui-border-subtle)] bg-[var(--ui-surface-subtle)]"
+                    }, [
+                      c("td", {
+                        colspan: qe.value,
+                        class: "h-[var(--ui-grid-header-height)] px-2"
+                      }, [
+                        c("button", {
+                          type: "button",
+                          "data-group-toggle": "",
+                          "aria-expanded": t.expanded,
+                          class: "inline-flex max-w-full items-center gap-1 rounded-[var(--ui-radius-inner)] border-0 bg-transparent px-1 text-left text-[length:var(--ui-font-size-sm)] font-semibold text-[var(--ui-text-secondary)] outline-none hover:text-[var(--ui-text)] focus-visible:shadow-[var(--ui-shadow-focus-inset)]",
+                          onClick: (r) => ye(t.groupId)
+                        }, [
+                          t.expanded ? (o(), m(f(Qe), {
+                            key: 0,
+                            class: "size-3.5 shrink-0",
+                            "aria-hidden": "true"
+                          })) : (o(), m(f(ce), {
+                            key: 1,
+                            class: "size-3.5 shrink-0",
+                            "aria-hidden": "true"
+                          })),
+                          c("span", kr, [
+                            _(e.$slots, "group-title", {
+                              group: t.groupId,
+                              label: t.label,
+                              rows: t.rows,
+                              category: { key: t.groupId, keys: gt(t.rows).keys },
+                              expanded: t.expanded,
+                              toggle: () => ye(t.groupId)
+                            }, () => [
+                              K(y(t.label), 1)
+                            ])
+                          ])
+                        ], 8, xr)
+                      ], 8, br)
+                    ], 8, wr)) : t.kind === "detail" ? (o(), s("tr", {
+                      key: 1,
+                      "data-expand-row": u(t.row, t.index),
+                      class: "border-b border-[var(--ui-border-subtle)]"
+                    }, [
+                      c("td", {
+                        colspan: qe.value,
+                        class: "p-0",
+                        style: R({ "--ui-grid-detail-indent": `${wt.value}px` })
+                      }, [
+                        c("div", Cr, [
+                          _(e.$slots, yt.value, {
+                            row: t.row,
+                            index: t.index,
+                            indent: wt.value
+                          })
+                        ])
+                      ], 12, mr)
+                    ], 8, _r)) : (o(), s("tr", {
+                      key: 2,
+                      "data-row-key": u(t.row, t.index),
+                      "data-ui-row-new": f(It).has(u(t.row, t.index)) ? "" : void 0,
+                      draggable: bt.value || void 0,
+                      tabindex: Ht.value === null ? void 0 : Ht.value === u(t.row, t.index) ? 0 : -1,
+                      "aria-selected": l.selectable || l.singleSelect ? l.selectedKeys.includes(u(t.row, t.index)) : void 0,
+                      class: h([
+                        "border-b border-[var(--ui-border-subtle)] hover:bg-[var(--ui-surface-hover)]",
+                        l.selectedKeys.includes(u(t.row, t.index)) && "bg-[var(--ui-surface-selected)] hover:bg-[var(--ui-surface-selected)]",
+                        ot.value && "cursor-pointer",
+                        l.singleSelect && "outline-none focus-visible:shadow-[var(--ui-shadow-focus-inset)]",
+                        N.value === u(t.row, t.index) && "opacity-40",
+                        xe.value === t.index && "shadow-[inset_0_2px_0_0_var(--ui-primary)]"
+                      ]),
+                      onClick: (r) => pa(r, t.row, u(t.row, t.index)),
+                      onKeydown: (r) => Va(r, t.row, u(t.row, t.index)),
+                      onDblclick: (r) => {
+                        p("rowDblclick", t.row), l.expandable?.type !== "cell" && we(u(t.row, t.index));
+                      },
+                      onDragstart: (r) => ka(r, t.row),
+                      onDragover: S((r) => _a(r, t.row, t.index), ["prevent"]),
+                      onDrop: S((r) => ma(r, t.row), ["prevent"]),
+                      onDragend: Ca
+                    }, [
+                      U.value ? (o(), s("td", Kr, [
+                        c("button", {
+                          type: "button",
+                          "data-expand-toggle": "",
+                          "aria-expanded": t.expanded,
+                          "aria-label": t.expanded ? d.value.collapseRow(u(t.row, t.index)) : d.value.expandRow(u(t.row, t.index)),
+                          class: "inline-flex size-5 items-center justify-center rounded-[var(--ui-radius-inner)] border-0 bg-transparent text-[var(--ui-text-secondary)] outline-none hover:bg-[var(--ui-surface-hover)] hover:text-[var(--ui-text)] focus-visible:shadow-[var(--ui-shadow-focus)]",
+                          onClick: S((r) => we(u(t.row, t.index)), ["stop"])
+                        }, [
+                          g(f(ce), {
+                            class: h(["size-3.5 transition-transform", t.expanded && "rotate-90"]),
+                            "aria-hidden": "true"
+                          }, null, 8, ["class"])
+                        ], 8, zr)
+                      ])) : v("", !0),
+                      l.selectable ? (o(), s("td", {
+                        key: 1,
+                        class: "h-[calc(var(--ui-grid-row-height)+1px)] px-2 text-center",
+                        onClick: a[8] || (a[8] = S(() => {
+                        }, ["stop"]))
+                      }, [
+                        c("div", Dr, [
+                          g(Xt, {
+                            "row-key": u(t.row, t.index),
+                            checked: I.value.has(u(t.row, t.index)),
+                            disabled: !q(t.row),
+                            reason: va(t.row),
+                            label: d.value.selectRow(u(t.row, t.index), t.row),
+                            onToggle: re
+                          }, null, 8, ["row-key", "checked", "disabled", "reason", "label"])
+                        ])
+                      ])) : v("", !0),
+                      (o(!0), s(k, null, A(C.value, (r) => (o(), s("td", {
+                        key: r.key,
+                        "data-column": r.key,
+                        "data-column-type": r.type ?? "text",
+                        class: h(["h-[calc(var(--ui-grid-row-height)+1px)] px-2 text-[var(--ui-text)]", [f(Lt)(r), f(Zt)(r) && "tabular-nums", r.type === "actions" ? "" : r.wrap ? "py-1 [overflow-wrap:anywhere]" : "truncate"]])
+                      }, [
+                        be.value?.pivotColumn === r.key ? (o(), s("span", {
+                          key: 0,
+                          "data-drag-handle": "",
+                          role: "button",
+                          tabindex: "0",
+                          "aria-label": d.value.reorderRow(u(t.row, t.index)),
+                          class: "mr-1 inline-flex size-5 shrink-0 cursor-grab items-center justify-center rounded-[var(--ui-radius-inner)] align-middle text-[var(--ui-text-secondary)] outline-none hover:bg-[var(--ui-surface-hover)] hover:text-[var(--ui-text)] focus-visible:shadow-[var(--ui-shadow-focus)]",
+                          onClick: a[9] || (a[9] = S(() => {
+                          }, ["stop"])),
+                          onKeydown: (n) => Ct(n, t.row)
+                        }, [
+                          g(f(Ft), {
+                            class: "size-3.5",
+                            "aria-hidden": "true"
+                          })
+                        ], 40, Rr)) : v("", !0),
+                        r.type === "actions" ? (o(), s("div", {
+                          key: 1,
+                          "data-grid-actions": "",
+                          class: h(f(Rl))
+                        }, [
+                          _(e.$slots, `cell-${r.key}`, de({ ref_for: !0 }, ue(t, r)), () => [
+                            K(y(t.row[r.key]), 1)
+                          ])
+                        ], 2)) : _(e.$slots, `cell-${r.key}`, de({ ref_for: !0 }, ue(t, r)), () => [
+                          K(y(t.row[r.key]), 1)
+                        ], void 0, 2)
+                      ], 10, Er))), 128)),
+                      ne.value ? (o(), s("td", $r, [
+                        c("span", {
+                          "data-drag-handle": "",
+                          role: "button",
+                          tabindex: "0",
+                          "aria-label": d.value.reorderRow(u(t.row, t.index)),
+                          class: "inline-flex size-5 cursor-grab items-center justify-center rounded-[var(--ui-radius-inner)] text-[var(--ui-text-secondary)] outline-none hover:bg-[var(--ui-surface-hover)] hover:text-[var(--ui-text)] focus-visible:shadow-[var(--ui-shadow-focus)]",
+                          onClick: a[10] || (a[10] = S(() => {
+                          }, ["stop"])),
+                          onKeydown: (r) => Ct(r, t.row)
+                        }, [
+                          g(f(Ft), {
+                            class: "size-3.5",
+                            "aria-hidden": "true"
+                          })
+                        ], 40, Tr)
+                      ])) : v("", !0),
+                      a[16] || (a[16] = c("td", {
+                        "data-grid-filler": "",
+                        "aria-hidden": "true",
+                        class: "p-0"
+                      }, null, -1)),
+                      l.columnChooser ? (o(), s("td", Or)) : v("", !0)
+                    ], 42, Sr))
+                  ], 64))), 128))
+                ])
+              ], 4)
+            ]),
+            _: 3
+          }, 8, ["class", "viewport-class", "viewport-style"])
+        ]),
+        _: 3
+      }, 8, ["class", "loading", "text"])),
+      !Ce.value && dt.value ? (o(), s("div", {
+        key: 2,
+        "data-grid-footer": "",
+        class: h([D.value && "ui-grid-footer-pinned", "flex h-[var(--ui-grid-footer-height)] shrink-0 items-center gap-3 border-y border-[var(--ui-border-subtle)] border-b-[color:var(--ui-border)] px-2 text-[var(--ui-text)]"])
+      }, [
+        c("div", Ar, [
+          _(e.$slots, "footer", {
+            total: L.value,
+            page: $.value,
+            pageCount: O.value
+          })
+        ]),
+        O.value > 1 ? (o(), s(k, { key: 0 }, [
+          c("span", null, y(d.value.page($.value, O.value)), 1),
+          c("div", Lr, [
+            g(P, {
+              label: d.value.previous,
+              size: "sm",
+              disabled: $.value <= 1,
+              onClick: a[11] || (a[11] = (t) => Oe($.value - 1))
+            }, {
+              default: w(() => [
+                g(f(cl), { class: "size-3.5" })
+              ]),
+              _: 1
+            }, 8, ["label", "disabled"]),
+            g(P, {
+              label: d.value.next,
+              size: "sm",
+              disabled: $.value >= O.value,
+              onClick: a[12] || (a[12] = (t) => Oe($.value + 1))
+            }, {
+              default: w(() => [
+                g(f(ce), { class: "size-3.5" })
+              ]),
+              _: 1
+            }, 8, ["label", "disabled"])
+          ])
+        ], 64)) : v("", !0),
+        Z.value.length ? (o(), s("label", Ir, [
+          c("span", Hr, y(d.value.pageSize), 1),
+          g(yl, {
+            "model-value": String(B.value),
+            options: Z.value,
+            "onUpdate:modelValue": ut
+          }, null, 8, ["model-value", "options"])
+        ])) : v("", !0),
+        c("span", null, y(fe.value && l.localPagination ? d.value.filtered(L.value, x.value.length) : d.value.items(L.value)), 1),
+        l.refreshable ? (o(), s("span", Mr)) : v("", !0),
+        l.refreshable ? (o(), m(P, {
+          key: 3,
+          "data-refresh": "",
+          label: d.value.refresh,
+          size: "sm",
+          disabled: l.refreshing,
+          onClick: a[13] || (a[13] = (t) => p("refresh"))
+        }, {
+          default: w(() => [
+            g(f(et), {
+              class: h(["size-3.5", l.refreshing && "animate-spin"])
+            }, null, 8, ["class"])
+          ]),
+          _: 1
+        }, 8, ["label", "disabled"])) : v("", !0)
+      ], 2)) : v("", !0)
+    ], 10, Il));
+  }
+});
+export {
+  go as default
+};