@vielzeug/refine 1.1.3 → 1.3.0

package/dist/datagrid.js

@@ -5,65 +5,65 @@ import { warn as n } from "./_dev.js";
 import { disablableBundle as r, loadableBundle as i } from "./shared/prop-bundles.js";
 import { lifecycleSignal as a } from "./headless/ore.js";
 import { createDataGridControl as o } from "./headless/datagrid.js";
-import { COLUMN_OBSERVED_ATTRS as ee, COLUMN_TAG as s, parseColumnChildren as c } from "./inputs/datagrid/datagrid-column.js";
-import { createDataGridControls as te } from "./inputs/datagrid/datagrid-controls.js";
-import { createGridNav as l } from "./inputs/datagrid/datagrid-nav.js";
-import u from "./inputs/datagrid/datagrid.css?inline.js";
-import { define as d, html as f, prop as p } from "@vielzeug/ore";
-import { computed as m, signal as h, watch as g } from "@vielzeug/ripple";
-import { debounce as _ } from "@vielzeug/arsenal";
+import { COLUMN_OBSERVED_ATTRS as s, COLUMN_TAG as c, parseColumnChildren as l } from "./inputs/datagrid/datagrid-column.js";
+import { createDataGridControls as ee } from "./inputs/datagrid/datagrid-controls.js";
+import { createGridNav as te } from "./inputs/datagrid/datagrid-nav.js";
+import u from "./inputs/datagrid/datagrid.css.js";
+import { define as d, getHost as f, html as p, onCleanup as m, onMounted as h, prop as g, useEmit as ne, useSlots as re } from "@vielzeug/ore";
+import { computed as _, signal as v, watch as y } from "@vielzeug/ripple";
+import { debounce as ie } from "@vielzeug/arsenal";
 //#region src/inputs/datagrid/datagrid.ts
-function v(e, t) {
+function b(e, t) {
 	return e.key !== t || e.direction === "none" ? "chevrons-up-down" : e.direction === "asc" ? "chevron-up" : "chevron-down";
 }
-function y(e, t) {
+function x(e, t) {
 	return e.key !== t || e.direction === "none" ? "none" : e.direction === "asc" ? "ascending" : "descending";
 }
-var b = "ore-datagrid";
-d(b, {
+var S = "ore-datagrid";
+d(S, {
 	props: {
-		activeView: p.string(),
-		density: p.string(),
+		activeView: g.string(),
+		density: g.string(),
 		...r,
 		...i,
-		columns: p.data(),
-		emptyText: p.string("No data"),
-		expandable: p.bool(!1),
-		filterOptions: p.data(),
-		fullwidth: p.bool(!1),
-		getRowKey: p.data(),
-		label: p.string(),
-		pageSize: p.number(10),
-		pageSizeOptions: p.data(),
-		rows: p.data(),
-		searchLabel: p.data(),
-		searchPlaceholder: p.string("Search…"),
-		selectedKeys: p.data(),
-		selectionMode: p.string("none"),
-		sortMode: p.string("client"),
-		source: p.data(),
-		striped: p.bool(!1),
-		views: p.data()
+		columns: g.data(),
+		emptyText: g.string("No data"),
+		expandable: g.bool(!1),
+		filterOptions: g.data(),
+		fullwidth: g.bool(!1),
+		getRowKey: g.data(),
+		label: g.string(),
+		pageSize: g.number(10),
+		pageSizeOptions: g.data(),
+		rows: g.data(),
+		searchLabel: g.data(),
+		searchPlaceholder: g.string("Search…"),
+		selectedKeys: g.data(),
+		selectionMode: g.string("none"),
+		sortMode: g.string("client"),
+		source: g.data(),
+		striped: g.bool(!1),
+		views: g.data()
 	},
-	setup(t, { el: r, emit: i, onCleanup: s, onMounted: u, slots: d }) {
-		let p = m(() => t.disabled.value === !0), b = m(() => t.selectionMode.value ?? "none"), x = h(/* @__PURE__ */ new Set()), S = m(() => t.expandable.value === !0 && E.value.some((e) => typeof e.renderExpanded == "function")), C = m(() => +(b.value === "multi")), w = h(t.pageSize.value ?? 10);
-		g(t.pageSize, (e) => {
+	setup(t) {
+		let r = f(), i = ne(), c = re(), u = _(() => t.disabled.value === !0), d = _(() => t.selectionMode.value ?? "none"), g = v(/* @__PURE__ */ new Set()), S = _(() => t.expandable.value === !0 && E.value.some((e) => typeof e.renderExpanded == "function")), C = _(() => +(d.value === "multi")), w = v(t.pageSize.value ?? 10);
+		y(t.pageSize, (e) => {
 			e != null && (w.value = e);
 		});
-		let T = h([]);
-		u(() => {
-			T.value = c(r);
+		let T = v([]);
+		h(() => {
+			T.value = l(r);
 			let e = new MutationObserver(() => {
-				T.value = c(r);
+				T.value = l(r);
 			});
 			return e.observe(r, {
-				attributeFilter: ee,
+				attributeFilter: s,
 				attributes: !0,
 				childList: !0,
 				subtree: !0
 			}), () => e.disconnect();
 		});
-		let E = m(() => {
+		let E = _(() => {
 			let e = t.columns.value;
 			return e === void 0 ? T.value : e;
 		}), D = (e) => {
@@ -71,26 +71,26 @@ d(b, {
 			if (r) return r(e);
 			let i = e.id;
 			return i == null ? (n("ore-datagrid: row missing `id` — keys will collide. Provide `getRowKey` or add a unique `id` field."), `__missing_${Math.random().toString(36).slice(2)}`) : String(i);
-		}, O = te({
+		}, O = ee({
 			columns: E,
 			filterOptions: t.filterOptions,
-			rows: m(() => t.rows.value ?? [])
-		}), ne = _((e) => {
+			rows: _(() => t.rows.value ?? [])
+		}), k = ie((e) => {
 			let n = e, r = t.source.value;
 			r?.search ? r.search(n) : O.setSearchQuery(n);
-		}, 250), k = m(() => t.source.value != null), A = h([]), j = h({
+		}, 250), A = _(() => t.source.value != null), j = v([]), M = v({
 			error: null,
 			isLoading: !1,
 			pageCount: 1,
 			pageNumber: 1,
 			pageSize: w.value,
 			totalItems: 0
-		}), M = null;
-		s(() => {
-			M?.(), M = null;
-		}), g(t.source, (e) => {
-			if (M?.(), M = null, !e) {
-				A.value = [], j.value = {
+		}), N = null;
+		m(() => {
+			N?.(), N = null;
+		}), y(t.source, (e) => {
+			if (N?.(), N = null, !e) {
+				j.value = [], M.value = {
 					error: null,
 					isLoading: !1,
 					pageCount: 1,
@@ -101,113 +101,113 @@ d(b, {
 				return;
 			}
 			let t = () => {
-				A.value = e.current, j.value = e.meta;
+				j.value = e.current, M.value = e.meta;
 			};
-			t(), M = e.subscribe(t);
+			t(), N = e.subscribe(t);
 		}, { immediate: !0 });
-		let N = o({
+		let P = o({
 			columns: () => E.value,
 			getRowKey: D,
-			items: m(() => k.value ? A.value : O.filteredRows.value),
+			items: _(() => A.value ? j.value : O.filteredRows.value),
 			onSelectionChange: (e) => {
 				i("selection-change", {
 					keys: [...e],
-					rows: N.selectedRows.value
+					rows: P.selectedRows.value
 				});
 			},
 			onSortChange: (e) => {
 				i("sort-change", e);
 			},
-			pageSize: () => k.value ? 0 : w.value,
-			selectionMode: () => b.value,
-			signal: a(s)
+			pageSize: () => A.value ? 0 : w.value,
+			selectionMode: () => d.value,
+			signal: a(m)
 		});
-		g(t.selectedKeys, (e) => {
-			Array.isArray(e) && N.setSelection(new Set(e));
+		y(t.selectedKeys, (e) => {
+			Array.isArray(e) && P.setSelection(new Set(e));
 		}, { immediate: !0 });
-		let P = h({}), F = (e, t) => (n) => {
+		let F = v({}), I = (e, t) => (n) => {
 			n.preventDefault();
 			let r = n.clientX, i = t.getBoundingClientRect().width, a = new AbortController(), { signal: o } = a;
 			window.addEventListener("pointermove", (t) => {
-				P.value = {
-					...P.value,
+				F.value = {
+					...F.value,
 					[e]: Math.max(40, i + t.clientX - r)
 				};
 			}, { signal: o }), window.addEventListener("pointerup", () => a.abort(), { signal: o });
-		}, I = m(() => E.value.filter((e) => !O.hiddenColumns.value.has(e.key))), L = (e, t) => {
+		}, L = _(() => E.value.filter((e) => !O.hiddenColumns.value.has(e.key))), R = (e, t) => {
 			if (e.cell) return e.cell(t);
 			let n = t[e.key];
 			return n == null ? "" : String(n);
 		};
-		g(O.filteredRows, () => N.goToPage(0), { immediate: !1 });
-		function R(e) {
+		y(O.filteredRows, () => P.goToPage(0), { immediate: !1 });
+		function z(e) {
 			let n = t.source.value;
 			if (n) {
 				e === "prev" ? n.prev?.() : n.next?.();
 				return;
 			}
-			e === "prev" ? N.prevPage() : N.nextPage(), i("page-change", {
-				pageIndex: N.pageIndex.value,
+			e === "prev" ? P.prevPage() : P.nextPage(), i("page-change", {
+				pageIndex: P.pageIndex.value,
 				pageSize: w.value
 			});
 		}
-		let z = m(() => {
-			let e = N.currentPageItems.value;
-			return !e.length || N.isAllSelected() ? !1 : e.some((e) => N.selectedKeys.value.has(D(e)));
-		}), B = m(() => I.value.length + +(b.value === "multi") + +!!S.value), V = m(() => k.value ? j.value.pageCount > 1 : w.value > 0), H = m(() => {
-			if (k.value) {
-				let { pageNumber: e, pageSize: t, totalItems: n } = j.value, r = Math.max(1, t);
-				if (!V.value) return `${n} row${n === 1 ? "" : "s"}`;
+		let B = _(() => {
+			let e = P.currentPageItems.value;
+			return !e.length || P.isAllSelected() ? !1 : e.some((e) => P.selectedKeys.value.has(D(e)));
+		}), V = _(() => L.value.length + +(d.value === "multi") + +!!S.value), H = _(() => A.value ? M.value.pageCount > 1 : w.value > 0), U = _(() => {
+			if (A.value) {
+				let { pageNumber: e, pageSize: t, totalItems: n } = M.value, r = Math.max(1, t);
+				if (!H.value) return `${n} row${n === 1 ? "" : "s"}`;
 				if (n === 0) return "0 to 0 of 0";
 				let i = (e - 1) * r + 1;
 				return `${i} to ${Math.min(i + r - 1, n)} of ${n}`;
 			}
-			let e = N.totalItems.value;
-			if (!V.value) return `${e} row${e === 1 ? "" : "s"}`;
+			let e = P.totalItems.value;
+			if (!H.value) return `${e} row${e === 1 ? "" : "s"}`;
 			if (e === 0) return "0 to 0 of 0";
-			let t = N.pageIndex.value * w.value + 1;
+			let t = P.pageIndex.value * w.value + 1;
 			return `${t} to ${Math.min(t + w.value - 1, e)} of ${e}`;
-		}), U = m(() => t.loading.value === !0 || k.value && j.value.isLoading), W = m(() => k.value ? j.value.pageNumber > 1 : N.hasPrevPage.value), G = m(() => k.value ? j.value.pageNumber < j.value.pageCount : N.hasNextPage.value), K = m(() => k.value ? j.value.totalItems === 0 ? "0 / 0" : `${j.value.pageNumber} / ${j.value.pageCount}` : `${N.pageIndex.value + 1} / ${N.pageCount.value}`), q = [
+		}), W = _(() => t.loading.value === !0 || A.value && M.value.isLoading), G = _(() => A.value ? M.value.pageNumber > 1 : P.hasPrevPage.value), K = _(() => A.value ? M.value.pageNumber < M.value.pageCount : P.hasNextPage.value), q = _(() => A.value ? M.value.totalItems === 0 ? "0 / 0" : `${M.value.pageNumber} / ${M.value.pageCount}` : `${P.pageIndex.value + 1} / ${P.pageCount.value}`), J = [
 			"compact",
 			"cozy",
 			"comfortable"
-		], J = {
+		], ae = {
 			comfortable: "rows-2",
 			compact: "rows-4",
 			cozy: "rows-3"
-		}, Y = {
+		}, oe = {
 			comfortable: "Density: Comfortable",
 			compact: "Density: Compact",
 			cozy: "Density: Cozy"
-		}, X = h(t.density.value ?? "cozy");
-		g(t.density, (e) => {
-			e && (X.value = e);
+		}, Y = v(t.density.value ?? "cozy");
+		y(t.density, (e) => {
+			e && (Y.value = e);
 		});
-		let re = () => {
-			let e = q.indexOf(X.value), t = q[(e + 1) % q.length];
-			X.value = t, r.setAttribute("density", t), i("density-change", { density: t });
-		}, Z = h(!1), Q = (e) => {
-			let t = new Set(x.value), n = !t.has(e);
-			n ? t.add(e) : t.delete(e), x.value = t, i("row-expand", {
+		let X = () => {
+			let e = J.indexOf(Y.value), t = J[(e + 1) % J.length];
+			Y.value = t, r.setAttribute("density", t), i("density-change", { density: t });
+		}, Z = v(!1), Q = (e) => {
+			let t = new Set(g.value), n = !t.has(e);
+			n ? t.add(e) : t.delete(e), g.value = t, i("row-expand", {
 				expanded: n,
 				key: e
 			});
 		}, $ = {
-			activeCell: h({
+			activeCell: v({
 				col: 0,
 				row: 0
 			}),
 			focusCell: () => {}
 		};
-		u(() => {
+		h(() => {
 			let e = r.shadowRoot, t = e.querySelector(".dg-table");
 			if (!t) return;
-			let { cleanup: n, handle: i } = l(t, e);
+			let { cleanup: n, handle: i } = te(t, e);
 			return $ = i, n;
 		}), r.focusCell = (e) => $.focusCell(e);
-		let ie = () => {
+		let se = () => {
 			let e = t.views.value ?? [], n = t.activeView.value;
-			return f`<div
+			return p`<div
         class="dg-tabs"
         role="tablist"
         aria-label="Views"
@@ -226,7 +226,7 @@ d(b, {
 					n.focus(), n.click();
 				}
 			}}">
-        ${e.map((e) => f`<ore-button
+        ${e.map((e) => p`<ore-button
               class="${() => `dg-tab${n === e.id ? " dg-tab--active" : ""}`}"
               role="tab"
               variant="ghost"
@@ -244,7 +244,7 @@ d(b, {
               ${e.label}
             </ore-button>`)}
       </div>`;
-		}, ae = () => f`<ore-popover class="dg-action-popover" placement="bottom-end" label="Sort" style="--popover-min-width:18rem">
+		}, ce = () => p`<ore-popover class="dg-action-popover" placement="bottom-end" label="Sort" style="--popover-min-width:18rem">
         <ore-button variant="ghost" size="sm" icon-only label="Sort">
           <ore-icon name="arrow-up-down" size="15" stroke-width="1.75" aria-hidden="true"></ore-icon>
         </ore-button>
@@ -257,8 +257,8 @@ d(b, {
               size="sm"
               icon-only
               label="Clear sort"
-              :disabled="${() => N.sortState.value.direction === "none" || void 0}"
-              @click="${() => N.sortTo("", "none")}">
+              :disabled="${() => P.sortState.value.direction === "none" || void 0}"
+              @click="${() => P.sortTo("", "none")}">
               <ore-icon name="trash-2" size="14" stroke-width="1.75" aria-hidden="true"></ore-icon>
             </ore-button>
           </div>
@@ -270,14 +270,14 @@ d(b, {
               rounded="lg"
               placeholder="Property"
               fullwidth
-              :value="${() => N.sortState.value.key}"
+              :value="${() => P.sortState.value.key}"
               :options="${() => E.value.map((e) => ({
 			label: e.label,
 			value: e.key
 		}))}"
               @change="${(e) => {
-			let t = e.detail.values[0] ?? "", n = N.sortState.value.direction === "none" ? "asc" : N.sortState.value.direction;
-			N.sortTo(t, n);
+			let t = e.detail.values[0] ?? "", n = P.sortState.value.direction === "none" ? "asc" : P.sortState.value.direction;
+			P.sortTo(t, n);
 		}}"></ore-select>
             <ore-select
               class="dg-pop-dir-select"
@@ -285,8 +285,8 @@ d(b, {
               size="sm"
               rounded="lg"
               fullwidth
-              :disabled="${() => !N.sortState.value.key || void 0}"
-              :value="${() => N.sortState.value.direction === "none" ? "asc" : N.sortState.value.direction}"
+              :disabled="${() => !P.sortState.value.key || void 0}"
+              :value="${() => P.sortState.value.direction === "none" ? "asc" : P.sortState.value.direction}"
               :options="${() => [{
 			label: "A → Z",
 			value: "asc"
@@ -295,16 +295,16 @@ d(b, {
 			value: "desc"
 		}]}"
               @change="${(e) => {
-			N.sortState.value.key && N.sortTo(N.sortState.value.key, e.detail.values[0] ?? "asc");
+			P.sortState.value.key && P.sortTo(P.sortState.value.key, e.detail.values[0] ?? "asc");
 		}}"></ore-select>
           </div>
         </div>
-      </ore-popover>`, oe = () => f`<ore-popover
+      </ore-popover>`, le = () => p`<ore-popover
         class="dg-action-popover"
         placement="bottom-end"
         label="Filter"
         style="--popover-min-width:16rem;--popover-max-height:min(90vh,48rem)">
-        ${() => O.filterDefs.value.length ? f`<ore-badge
+        ${() => O.filterDefs.value.length ? p`<ore-badge
                 anchor="top-end"
                 color="primary"
                 size="xs"
@@ -319,13 +319,13 @@ d(b, {
                 <ore-button slot="target" variant="ghost" size="sm" icon-only label="Filter">
                   <ore-icon name="filter" size="15" stroke-width="1.75" aria-hidden="true"></ore-icon>
                 </ore-button>
-              </ore-badge>` : f`<ore-button class="dg-icon-btn" variant="ghost" size="sm" icon-only label="Filter">
+              </ore-badge>` : p`<ore-button class="dg-icon-btn" variant="ghost" size="sm" icon-only label="Filter">
                 <ore-icon name="filter" size="15" stroke-width="1.75" aria-hidden="true"></ore-icon>
               </ore-button>`}
         <div slot="content" class="dg-pop-filter">
           <div class="dg-pop-header">
             <span class="dg-pop-title">Filter by</span>
-            ${() => O.filterDefs.value.length ? f`<ore-button
+            ${() => O.filterDefs.value.length ? p`<ore-button
                     class="dg-icon-btn"
                     variant="ghost"
                     size="sm"
@@ -333,7 +333,7 @@ d(b, {
                     label="Clear all filters"
                     @click="${() => O.clearAllFilters()}">
                     <ore-icon name="trash-2" size="14" stroke-width="1.75" aria-hidden="true"></ore-icon>
-                  </ore-button>` : f``}
+                  </ore-button>` : p``}
           </div>
 
           <!-- Always-visible field picker: select columns to add filter rules -->
@@ -356,7 +356,7 @@ d(b, {
 
           <!-- Active filter rules (appear below the field picker as rules are added) -->
           <div class="dg-pop-filter-rules" ?hidden="${() => !O.filterDefs.value.length}">
-            ${() => O.filterDefs.value.map((e) => f`
+            ${() => O.filterDefs.value.map((e) => p`
                   <div class="dg-pop-filter-rule">
                     <div class="dg-pop-filter-rule-header">
                       <span class="dg-pop-filter-field">${e.label}</span>
@@ -385,7 +385,7 @@ d(b, {
                       :placeholder="${() => e.label}"
                       :options="${() => e.options}"
                       :value="${() => [...O.filterValues.value.get(e.key)?.values ?? []]}"
-                      :disabled="${() => p.value || void 0}"
+                      :disabled="${() => u.value || void 0}"
                       multiple
                       fullwidth
                       autoclose
@@ -396,7 +396,7 @@ d(b, {
                 `)}
           </div>
         </div>
-      </ore-popover>`, se = () => f`<ore-popover
+      </ore-popover>`, ue = () => p`<ore-popover
         class="dg-action-popover"
         placement="bottom-end"
         label="Column options"
@@ -405,7 +405,7 @@ d(b, {
           <ore-icon name="columns-2" size="15" stroke-width="1.75" aria-hidden="true"></ore-icon>
         </ore-button>
         <div slot="content" class="dg-pop-col-list" role="menu" aria-label="Column visibility">
-          ${() => E.value.map((e) => f`<ore-button
+          ${() => E.value.map((e) => p`<ore-button
                   class="dg-pop-col-item"
                   role="menuitemcheckbox"
                   variant="ghost"
@@ -422,15 +422,15 @@ d(b, {
                 </ore-button>`)}
         </div>
       </ore-popover>`;
-		return f`
+		return p`
       <!-- ── Controls Bar ────────────────────────────────────────────────── -->
       <div class="dg-controls" part="controls">
         <!-- Left: view tabs -->
-        ${() => ie()}
+        ${() => se()}
 
         <!-- Right: Action bar -->
         <div class="dg-actions">
-          ${() => ae()} ${() => oe()} ${() => se()}
+          ${() => ce()} ${() => le()} ${() => ue()}
 
           <!-- Density toggle -->
           <ore-button
@@ -438,34 +438,34 @@ d(b, {
             variant="ghost"
             size="sm"
             icon-only
-            :label="${() => Y[X.value]}"
-            @click="${re}">
+            :label="${() => oe[Y.value]}"
+            @click="${X}">
             <ore-icon
-              :name="${() => J[X.value]}"
+              :name="${() => ae[Y.value]}"
               size="15"
               stroke-width="1.75"
               aria-hidden="true"></ore-icon>
           </ore-button>
 
-          <span class="dg-action-divider" aria-hidden="true" ?hidden="${() => !d.has("actions").value}"></span>
+          <span class="dg-action-divider" aria-hidden="true" ?hidden="${() => !c.has("actions").value}"></span>
 
           <slot name="actions"></slot>
 
           <!-- Search toggle: rightmost, expands in-place -->
           <div class="${() => `dg-search${O.searchActive.value ? " dg-search--open" : ""}`}">
-            ${() => O.searchActive.value ? f`<ore-input
+            ${() => O.searchActive.value ? p`<ore-input
                     class="dg-search-input"
                     type="search"
                     variant="flat"
                     size="sm"
                     rounded="full"
                     :placeholder="${() => t.searchPlaceholder.value ?? "Search…"}"
-                    :disabled="${() => p.value || void 0}"
+                    :disabled="${() => u.value || void 0}"
                     ref="${(e) => {
 			e && requestAnimationFrame(() => e.focus());
 		}}"
                     @input="${(e) => {
-			ne(e.detail.value);
+			k(e.detail.value);
 		}}"
                     @keydown="${(e) => {
 			if (e.key === "Escape") {
@@ -474,7 +474,7 @@ d(b, {
 			}
 		}}">
                     <ore-icon slot="prefix" name="search" size="13" stroke-width="1.75" aria-hidden="true"></ore-icon>
-                  </ore-input>` : f``}
+                  </ore-input>` : p``}
             <ore-button
               variant="ghost"
               size="sm"
@@ -506,28 +506,28 @@ d(b, {
           part="table"
           role="grid"
           :aria-label="${() => t.label.value ?? void 0}"
-          :aria-busy="${() => U.value ? "true" : null}"
-          :aria-disabled="${() => p.value ? "true" : null}">
+          :aria-busy="${() => W.value ? "true" : null}"
+          :aria-disabled="${() => u.value ? "true" : null}">
           <!-- Head -->
           <thead class="dg-head" part="thead">
             <tr role="row">
-              ${() => b.value === "multi" ? f`<th
+              ${() => d.value === "multi" ? p`<th
                       class="dg-th dg-th-check"
                       role="columnheader"
                       scope="col"
                       :tabindex="${() => $.activeCell.value.row === 0 && $.activeCell.value.col === 0 && C.value >= 1 ? "0" : "-1"}">
                       <ore-checkbox
                         class="dg-check"
-                        :checked="${() => N.isAllSelected()}"
-                        :indeterminate="${z}"
-                        ?disabled="${p}"
+                        :checked="${() => P.isAllSelected()}"
+                        :indeterminate="${B}"
+                        ?disabled="${u}"
                         aria-label="Select all rows on this page"
                         @change="${() => {
-			p.value || N.selectAll();
+			u.value || P.selectAll();
 		}}"></ore-checkbox>
-                    </th>` : f``}
-              ${() => I.value.map((e, t) => f`<th
-                    class="${`dg-th${t === I.value.length - 1 && S.value ? " dg-th-last" : ""}`}"
+                    </th>` : p``}
+              ${() => L.value.map((e, t) => p`<th
+                    class="${`dg-th${t === L.value.length - 1 && S.value ? " dg-th-last" : ""}`}"
                     role="columnheader"
                     scope="col"
                     :tabindex="${() => {
@@ -535,57 +535,57 @@ d(b, {
 			return e.row === 0 && e.col === t + C.value ? "0" : "-1";
 		}}"
                     data-align="${e.align ?? "left"}"
-                    :aria-sort="${() => e.sortable ? y(N.sortState.value, e.key) : void 0}"
+                    :aria-sort="${() => e.sortable ? x(P.sortState.value, e.key) : void 0}"
                     :aria-label="${e.sortable ? void 0 : e.headerLabel ?? e.label}"
                     :style="${() => {
-			let t = P.value[e.key];
+			let t = F.value[e.key];
 			return t ? `width:${t}px` : e.width ? `width:${e.width}` : "";
 		}}">
                     <div class="dg-th-inner">
-                      ${() => e.sortable ? f`<ore-button
+                      ${() => e.sortable ? p`<ore-button
                               class="dg-sort-btn"
                               variant="text"
                               size="sm"
                               fullwidth
                               :label="${e.headerLabel ?? e.label}"
-                              :disabled="${() => p.value || void 0}"
+                              :disabled="${() => u.value || void 0}"
                               @click="${() => {
-			p.value || N.sortBy(e.key);
+			u.value || P.sortBy(e.key);
 		}}">
                               ${e.label}
                               <ore-icon
                                 slot="suffix"
                                 class="dg-sort-icon"
-                                :name="${() => v(N.sortState.value, e.key)}"
+                                :name="${() => b(P.sortState.value, e.key)}"
                                 size="14"
                                 stroke-width="2"></ore-icon>
                             </ore-button>` : e.label}
-                      ${e.resizable ? f`<span
+                      ${e.resizable ? p`<span
                               class="dg-col-resize"
                               aria-hidden="true"
                               ref="${(t) => {
 			if (!t) return;
 			let n = t.closest("th");
-			n && t.addEventListener("pointerdown", F(e.key, n));
-		}}"></span>` : f``}
+			n && t.addEventListener("pointerdown", I(e.key, n));
+		}}"></span>` : p``}
                     </div>
                   </th>`)}
-              ${() => S.value ? f`<th
+              ${() => S.value ? p`<th
                       class="dg-th dg-th-expand"
                       role="columnheader"
                       scope="col"
                       aria-label="Row details"
-                      tabindex="-1"></th>` : f``}
+                      tabindex="-1"></th>` : p``}
             </tr>
           </thead>
 
           <!-- Body -->
           <tbody class="dg-body" part="tbody">
-            ${() => N.currentPageItems.value.length === 0 ? f`<tr role="row">
-                    <td class="dg-empty" role="gridcell" :colspan="${() => String(B.value)}">
+            ${() => P.currentPageItems.value.length === 0 ? p`<tr role="row">
+                    <td class="dg-empty" role="gridcell" :colspan="${() => String(V.value)}">
                       <div class="dg-empty-content">
                         ${() => t.emptyText.value ?? "No data"}
-                        ${() => O.searchQuery.value || O.filterValues.value.size ? f`<div class="dg-empty-actions">
+                        ${() => O.searchQuery.value || O.filterValues.value.size ? p`<div class="dg-empty-actions">
                                 <ore-button
                                   variant="text"
                                   size="sm"
@@ -594,26 +594,26 @@ d(b, {
 		}}">
                                   Clear all filters & search
                                 </ore-button>
-                              </div>` : f``}
+                              </div>` : p``}
                       </div>
                     </td>
-                  </tr>` : N.currentPageItems.value.map((t, n) => {
-			let r = D(t), i = b.value !== "none" && !p.value, a = n + 1;
-			return f`<tr
+                  </tr>` : P.currentPageItems.value.map((t, n) => {
+			let r = D(t), i = d.value !== "none" && !u.value, a = n + 1;
+			return p`<tr
                         class="dg-tr"
                         part="row"
                         role="row"
-                        :aria-selected="${() => b.value === "none" ? null : String(N.selectedKeys.value.has(r))}"
-                        :aria-expanded="${() => S.value ? String(x.value.has(r)) : null}"
+                        :aria-selected="${() => d.value === "none" ? null : String(P.selectedKeys.value.has(r))}"
+                        :aria-expanded="${() => S.value ? String(g.value.has(r)) : null}"
                         ?data-selectable="${i}"
-                        ?data-disabled="${p}"
+                        ?data-disabled="${u}"
                         @click="${() => {
-				i && b.value === "single" && N.toggleRow(r);
+				i && d.value === "single" && P.toggleRow(r);
 			}}"
                         @keydown="${(e) => {
-				(e.key === "Enter" || e.key === " ") && i && b.value === "single" && (e.preventDefault(), N.toggleRow(r));
+				(e.key === "Enter" || e.key === " ") && i && d.value === "single" && (e.preventDefault(), P.toggleRow(r));
 			}}">
-                        ${() => b.value === "multi" ? f`<td
+                        ${() => d.value === "multi" ? p`<td
                                 class="dg-td dg-td-check"
                                 role="gridcell"
                                 :tabindex="${() => {
@@ -621,23 +621,23 @@ d(b, {
 				return e.row === a && e.col === 0 ? "0" : "-1";
 			}}"
                                 @keydown="${(e) => {
-				(e.key === "Enter" || e.key === " ") && (e.preventDefault(), p.value || N.toggleRow(r));
+				(e.key === "Enter" || e.key === " ") && (e.preventDefault(), u.value || P.toggleRow(r));
 			}}">
                                 <ore-checkbox
                                   class="dg-check"
-                                  :checked="${() => N.selectedKeys.value.has(r)}"
-                                  ?disabled="${p}"
+                                  :checked="${() => P.selectedKeys.value.has(r)}"
+                                  ?disabled="${u}"
                                   aria-label="Select row"
                                   tabindex="-1"
                                   @click="${(e) => e.stopPropagation()}"
                                   @change="${() => {
-				p.value || N.toggleRow(r);
+				u.value || P.toggleRow(r);
 			}}"></ore-checkbox>
-                              </td>` : f``}
-                        ${I.value.map((e, n) => {
-				let r = L(e, t);
-				return f`<td
-                            class="${`dg-td${n === I.value.length - 1 && S.value ? " dg-td-last" : ""}`}"
+                              </td>` : p``}
+                        ${L.value.map((e, n) => {
+				let r = R(e, t);
+				return p`<td
+                            class="${`dg-td${n === L.value.length - 1 && S.value ? " dg-td-last" : ""}`}"
                             part="cell"
                             role="gridcell"
                             data-align="${e.align ?? "left"}"
@@ -649,15 +649,15 @@ d(b, {
                             ${r}
                           </td>`;
 			})}
-                        ${() => S.value ? f`<td
+                        ${() => S.value ? p`<td
                                 class="dg-td dg-td-expand"
                                 role="gridcell"
                                 :tabindex="${() => {
 				let e = $.activeCell.value;
-				return e.row === a && e.col === B.value - 1 ? "0" : "-1";
+				return e.row === a && e.col === V.value - 1 ? "0" : "-1";
 			}}"
                                 @keydown="${(e) => {
-				(e.key === "Enter" || e.key === " ") && (e.preventDefault(), p.value || Q(r));
+				(e.key === "Enter" || e.key === " ") && (e.preventDefault(), u.value || Q(r));
 			}}">
                                 <ore-button
                                   class="dg-expand-btn"
@@ -665,42 +665,42 @@ d(b, {
                                   size="sm"
                                   icon-only
                                   tabindex="-1"
-                                  :label="${() => x.value.has(r) ? "Collapse row" : "Expand row"}"
-                                  :aria-expanded="${() => String(x.value.has(r))}"
-                                  :disabled="${() => p.value || void 0}"
+                                  :label="${() => g.value.has(r) ? "Collapse row" : "Expand row"}"
+                                  :aria-expanded="${() => String(g.value.has(r))}"
+                                  :disabled="${() => u.value || void 0}"
                                   @click="${(e) => {
-				e.stopPropagation(), p.value || Q(r);
+				e.stopPropagation(), u.value || Q(r);
 			}}">
                                   <ore-icon
-                                    :name="${() => x.value.has(r) ? "chevron-up" : "chevron-down"}"
+                                    :name="${() => g.value.has(r) ? "chevron-up" : "chevron-down"}"
                                     size="14"
                                     stroke-width="2"
                                     aria-hidden="true"></ore-icon>
                                 </ore-button>
-                              </td>` : f``}
+                              </td>` : p``}
                       </tr>
-                      ${() => S.value && x.value.has(r) ? f`<tr class="dg-tr-expanded" role="row">
+                      ${() => S.value && g.value.has(r) ? p`<tr class="dg-tr-expanded" role="row">
                               <td
                                 class="dg-td-expanded"
                                 role="gridcell"
-                                :colspan="${() => String(B.value)}">
+                                :colspan="${() => String(V.value)}">
                                 ${e(() => E.value.find((e) => typeof e.renderExpanded == "function")?.renderExpanded?.(t) ?? "")}
                               </td>
-                            </tr>` : f``} `;
+                            </tr>` : p``} `;
 		})}
           </tbody>
         </table>
       </div>
 
       <!-- Footer / Pagination -->
-      ${() => V.value ? f`<div class="dg-footer" part="footer" role="navigation" aria-label="Pagination">
-              ${() => (t.pageSizeOptions.value ?? []).length ? f`` : f`<span class="dg-footer-info" dir="ltr" aria-live="polite" aria-atomic="true"
-                      >${H}</span
+      ${() => H.value ? p`<div class="dg-footer" part="footer" role="navigation" aria-label="Pagination">
+              ${() => (t.pageSizeOptions.value ?? []).length ? p`` : p`<span class="dg-footer-info" dir="ltr" aria-live="polite" aria-atomic="true"
+                      >${U}</span
                     >`}
               <div class="dg-footer-end">
                 ${() => {
 			let e = t.pageSizeOptions.value ?? [];
-			return e.length ? f`<div class="dg-page-size-wrap">
+			return e.length ? p`<div class="dg-page-size-wrap">
                         <ore-select
                           class="dg-page-size-select"
                           fullwidth
@@ -710,15 +710,15 @@ d(b, {
 				label: String(e),
 				value: String(e)
 			}))}"
-                          :disabled="${() => p.value || void 0}"
+                          :disabled="${() => u.value || void 0}"
                           @change="${(e) => {
 				let t = parseInt(e.detail.values[0], 10);
-				isNaN(t) || (w.value = t, N.goToPage(0), i("page-change", {
+				isNaN(t) || (w.value = t, P.goToPage(0), i("page-change", {
 					pageIndex: 0,
 					pageSize: t
 				}));
 			}}"></ore-select>
-                      </div>` : f``;
+                      </div>` : p``;
 		}}
                 <div class="dg-pagination" role="group" aria-label="Page navigation">
                   <ore-button
@@ -727,8 +727,8 @@ d(b, {
                     size="sm"
                     icon-only
                     label="Previous page"
-                    :disabled="${() => !W.value || p.value}"
-                    @click="${() => R("prev")}">
+                    :disabled="${() => !G.value || u.value}"
+                    @click="${() => z("prev")}">
                     <ore-icon name="chevron-left" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
                   </ore-button>
                   <span
@@ -738,7 +738,7 @@ d(b, {
                     role="status"
                     aria-live="polite"
                     aria-atomic="true">
-                    ${() => K.value}
+                    ${() => q.value}
                   </span>
                   <ore-button
                     class="dg-page-btn"
@@ -746,19 +746,19 @@ d(b, {
                     size="sm"
                     icon-only
                     label="Next page"
-                    :disabled="${() => !G.value || p.value}"
-                    @click="${() => R("next")}">
+                    :disabled="${() => !K.value || u.value}"
+                    @click="${() => z("next")}">
                     <ore-icon name="chevron-right" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
                   </ore-button>
                 </div>
               </div>
-            </div>` : f``}
+            </div>` : p``}
     `;
 	},
 	shadow: { delegatesFocus: !0 },
 	styles: [t("datagrid"), u]
 });
 //#endregion
-export { s as COLUMN_TAG, b as DATAGRID_TAG, y as ariaSortValue, v as sortIconName };
+export { c as COLUMN_TAG, S as DATAGRID_TAG, x as ariaSortValue, b as sortIconName };
 
 //# sourceMappingURL=datagrid.js.map