@vielzeug/refine 1.1.1

package/dist/datagrid.js

@@ -0,0 +1,764 @@
+import { raw as e } from "./ore/dist/directives/raw.js";
+import "./ore/dist/directives.js";
+import { tableBaseMixin as t } from "./styles/mixins/table-base.css.js";
+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";
+//#region src/inputs/datagrid/datagrid.ts
+function v(e, t) {
+	return e.key !== t || e.direction === "none" ? "chevrons-up-down" : e.direction === "asc" ? "chevron-up" : "chevron-down";
+}
+function y(e, t) {
+	return e.key !== t || e.direction === "none" ? "none" : e.direction === "asc" ? "ascending" : "descending";
+}
+var b = "ore-datagrid";
+d(b, {
+	props: {
+		activeView: p.string(),
+		density: p.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()
+	},
+	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) => {
+			e != null && (w.value = e);
+		});
+		let T = h([]);
+		u(() => {
+			T.value = c(r);
+			let e = new MutationObserver(() => {
+				T.value = c(r);
+			});
+			return e.observe(r, {
+				attributeFilter: ee,
+				attributes: !0,
+				childList: !0,
+				subtree: !0
+			}), () => e.disconnect();
+		});
+		let E = m(() => {
+			let e = t.columns.value;
+			return e === void 0 ? T.value : e;
+		}), D = (e) => {
+			let r = t.getRowKey.value;
+			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({
+			columns: E,
+			filterOptions: t.filterOptions,
+			rows: m(() => t.rows.value ?? [])
+		}), ne = _((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({
+			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 = {
+					error: null,
+					isLoading: !1,
+					pageCount: 1,
+					pageNumber: 1,
+					pageSize: w.value,
+					totalItems: 0
+				};
+				return;
+			}
+			let t = () => {
+				A.value = e.current, j.value = e.meta;
+			};
+			t(), M = e.subscribe(t);
+		}, { immediate: !0 });
+		let N = o({
+			columns: () => E.value,
+			getRowKey: D,
+			items: m(() => k.value ? A.value : O.filteredRows.value),
+			onSelectionChange: (e) => {
+				i("selection-change", {
+					keys: [...e],
+					rows: N.selectedRows.value
+				});
+			},
+			onSortChange: (e) => {
+				i("sort-change", e);
+			},
+			pageSize: () => k.value ? 0 : w.value,
+			selectionMode: () => b.value,
+			signal: a(s)
+		});
+		g(t.selectedKeys, (e) => {
+			Array.isArray(e) && N.setSelection(new Set(e));
+		}, { immediate: !0 });
+		let P = h({}), F = (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,
+					[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) => {
+			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) {
+			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,
+				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"}`;
+				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"}`;
+			if (e === 0) return "0 to 0 of 0";
+			let t = N.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 = [
+			"compact",
+			"cozy",
+			"comfortable"
+		], J = {
+			comfortable: "rows-2",
+			compact: "rows-4",
+			cozy: "rows-3"
+		}, Y = {
+			comfortable: "Density: Comfortable",
+			compact: "Density: Compact",
+			cozy: "Density: Cozy"
+		}, X = h(t.density.value ?? "cozy");
+		g(t.density, (e) => {
+			e && (X.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", {
+				expanded: n,
+				key: e
+			});
+		}, $ = {
+			activeCell: h({
+				col: 0,
+				row: 0
+			}),
+			focusCell: () => {}
+		};
+		u(() => {
+			let e = r.shadowRoot, t = e.querySelector(".dg-table");
+			if (!t) return;
+			let { cleanup: n, handle: i } = l(t, e);
+			return $ = i, n;
+		}), r.focusCell = (e) => $.focusCell(e);
+		let ie = () => {
+			let e = t.views.value ?? [], n = t.activeView.value;
+			return f`<div
+        class="dg-tabs"
+        role="tablist"
+        aria-label="Views"
+        aria-controls="dg-tabpanel"
+        @keydown="${(e) => {
+				if (![
+					"ArrowLeft",
+					"ArrowRight",
+					"Home",
+					"End"
+				].includes(e.key)) return;
+				let t = Array.from(e.currentTarget.querySelectorAll(".dg-tab")), n = t.findIndex((e) => e.classList.contains("dg-tab--active")), r = n;
+				if (e.key === "ArrowLeft" ? r = Math.max(0, n - 1) : e.key === "ArrowRight" ? r = Math.min(t.length - 1, n + 1) : e.key === "Home" ? r = 0 : e.key === "End" && (r = t.length - 1), r !== n) {
+					e.preventDefault();
+					let n = t[r];
+					n.focus(), n.click();
+				}
+			}}">
+        ${e.map((e) => f`<ore-button
+              class="${() => `dg-tab${n === e.id ? " dg-tab--active" : ""}`}"
+              role="tab"
+              variant="ghost"
+              rounded="full"
+              size="sm"
+              :tabindex="${() => n === e.id ? "0" : "-1"}"
+              :aria-selected="${() => String(n === e.id)}"
+              aria-controls="dg-tabpanel"
+              @click="${() => {
+				i("view-change", {
+					id: e.id,
+					label: e.label
+				});
+			}}">
+              ${e.label}
+            </ore-button>`)}
+      </div>`;
+		}, ae = () => f`<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>
+        <div slot="content" class="dg-pop-sort">
+          <div class="dg-pop-header">
+            <span class="dg-pop-title">Sort by</span>
+            <ore-button
+              class="dg-icon-btn"
+              variant="ghost"
+              size="sm"
+              icon-only
+              label="Clear sort"
+              :disabled="${() => N.sortState.value.direction === "none" || void 0}"
+              @click="${() => N.sortTo("", "none")}">
+              <ore-icon name="trash-2" size="14" stroke-width="1.75" aria-hidden="true"></ore-icon>
+            </ore-button>
+          </div>
+          <div class="dg-pop-sort-row">
+            <ore-select
+              class="dg-pop-select"
+              variant="flat"
+              size="sm"
+              rounded="lg"
+              placeholder="Property"
+              fullwidth
+              :value="${() => N.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);
+		}}"></ore-select>
+            <ore-select
+              class="dg-pop-dir-select"
+              variant="flat"
+              size="sm"
+              rounded="lg"
+              fullwidth
+              :disabled="${() => !N.sortState.value.key || void 0}"
+              :value="${() => N.sortState.value.direction === "none" ? "asc" : N.sortState.value.direction}"
+              :options="${() => [{
+			label: "A → Z",
+			value: "asc"
+		}, {
+			label: "Z → A",
+			value: "desc"
+		}]}"
+              @change="${(e) => {
+			N.sortState.value.key && N.sortTo(N.sortState.value.key, e.detail.values[0] ?? "asc");
+		}}"></ore-select>
+          </div>
+        </div>
+      </ore-popover>`, oe = () => f`<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
+                anchor="top-end"
+                color="primary"
+                size="xs"
+                :count="${() => Z.value ? O.filterDefs.value.length : void 0}"
+                :dot="${() => !Z.value || void 0}"
+                :label="${() => `${O.filterDefs.value.length} active filter${O.filterDefs.value.length > 1 ? "s" : ""}`}"
+                aria-hidden="true"
+                @mouseenter="${() => Z.value = !0}"
+                @mouseleave="${() => Z.value = !1}"
+                @focusin="${() => Z.value = !0}"
+                @focusout="${() => Z.value = !1}">
+                <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-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
+                    class="dg-icon-btn"
+                    variant="ghost"
+                    size="sm"
+                    icon-only
+                    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``}
+          </div>
+
+          <!-- Always-visible field picker: select columns to add filter rules -->
+          <div class="dg-pop-filter-fields">
+            <ore-combobox
+              placeholder="Add filter…"
+              multiple
+              fullwidth
+              autoclose
+              :options="${() => E.value.map((e) => ({
+			label: e.label,
+			value: e.key
+		}))}"
+              :value="${() => O.filterDefs.value.map((e) => e.key)}"
+              @change="${(e) => {
+			O.setActiveFilterKeys(e.detail.values);
+		}}">
+            </ore-combobox>
+          </div>
+
+          <!-- 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`
+                  <div class="dg-pop-filter-rule">
+                    <div class="dg-pop-filter-rule-header">
+                      <span class="dg-pop-filter-field">${e.label}</span>
+                      <ore-select
+                        class="dg-pop-filter-op-select"
+                        variant="ghost"
+                        size="sm"
+                        fullwidth
+                        :value="${() => O.filterValues.value.get(e.key)?.operator ?? "contains"}"
+                        :options="${() => e.operators ?? []}"
+                        @change="${(t) => {
+			O.setFilterOperator(e.key, t.detail.values[0]);
+		}}"></ore-select>
+                      <ore-button
+                        class="dg-icon-btn"
+                        variant="ghost"
+                        size="sm"
+                        icon-only
+                        label="Remove filter"
+                        @click="${() => O.removeFilter(e.key)}">
+                        <ore-icon name="trash-2" size="13" stroke-width="1.75" aria-hidden="true"></ore-icon>
+                      </ore-button>
+                    </div>
+                    <ore-combobox
+                      class="dg-filter"
+                      :placeholder="${() => e.label}"
+                      :options="${() => e.options}"
+                      :value="${() => [...O.filterValues.value.get(e.key)?.values ?? []]}"
+                      :disabled="${() => p.value || void 0}"
+                      multiple
+                      fullwidth
+                      autoclose
+                      @change="${(t) => {
+			O.setFilter(e.key, t.detail.values);
+		}}"></ore-combobox>
+                  </div>
+                `)}
+          </div>
+        </div>
+      </ore-popover>`, se = () => f`<ore-popover
+        class="dg-action-popover"
+        placement="bottom-end"
+        label="Column options"
+        style="--popover-min-width:18rem">
+        <ore-button class="dg-icon-btn" variant="ghost" size="sm" icon-only label="Column options">
+          <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
+                  class="dg-pop-col-item"
+                  role="menuitemcheckbox"
+                  variant="ghost"
+                  size="sm"
+                  :aria-checked="${() => String(!O.hiddenColumns.value.has(e.key))}"
+                  @click="${() => O.toggleColumnVisibility(e.key)}">
+                  <ore-icon
+                    slot="prefix"
+                    :name="${() => O.hiddenColumns.value.has(e.key) ? "eye-off" : "eye"}"
+                    size="13"
+                    stroke-width="2"
+                    aria-hidden="true"></ore-icon>
+                  ${e.label}
+                </ore-button>`)}
+        </div>
+      </ore-popover>`;
+		return f`
+      <!-- ── Controls Bar ────────────────────────────────────────────────── -->
+      <div class="dg-controls" part="controls">
+        <!-- Left: view tabs -->
+        ${() => ie()}
+
+        <!-- Right: Action bar -->
+        <div class="dg-actions">
+          ${() => ae()} ${() => oe()} ${() => se()}
+
+          <!-- Density toggle -->
+          <ore-button
+            class="dg-icon-btn"
+            variant="ghost"
+            size="sm"
+            icon-only
+            :label="${() => Y[X.value]}"
+            @click="${re}">
+            <ore-icon
+              :name="${() => J[X.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>
+
+          <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
+                    class="dg-search-input"
+                    type="search"
+                    variant="flat"
+                    size="sm"
+                    rounded="full"
+                    :placeholder="${() => t.searchPlaceholder.value ?? "Search…"}"
+                    :disabled="${() => p.value || void 0}"
+                    ref="${(e) => {
+			e && requestAnimationFrame(() => e.focus());
+		}}"
+                    @input="${(e) => {
+			ne(e.detail.value);
+		}}"
+                    @keydown="${(e) => {
+			if (e.key === "Escape") {
+				let e = t.source.value;
+				e?.search && e.search(""), O.toggleSearch();
+			}
+		}}">
+                    <ore-icon slot="prefix" name="search" size="13" stroke-width="1.75" aria-hidden="true"></ore-icon>
+                  </ore-input>` : f``}
+            <ore-button
+              variant="ghost"
+              size="sm"
+              icon-only
+              :label="${() => {
+			let [e, n] = t.searchLabel.value ?? ["Search", "Close search"];
+			return O.searchActive.value ? n : e;
+		}}"
+              @click="${() => {
+			let e = t.source.value;
+			e?.search && O.searchActive.value && e.search(""), O.toggleSearch();
+		}}">
+              <ore-icon
+                :name="${() => O.searchActive.value ? "x" : "search"}"
+                size="15"
+                stroke-width="1.75"
+                aria-hidden="true"></ore-icon>
+            </ore-button>
+          </div>
+        </div>
+      </div>
+
+      <div id="dg-tabpanel" class="dg-scroll" role="tabpanel" aria-label="Data">
+        <div class="dg-loading-overlay">
+          <ore-icon name="loader-2" size="24" class="dg-spin" aria-hidden="true"></ore-icon>
+        </div>
+        <table
+          class="dg-table"
+          part="table"
+          role="grid"
+          :aria-label="${() => t.label.value ?? void 0}"
+          :aria-busy="${() => U.value ? "true" : null}"
+          :aria-disabled="${() => p.value ? "true" : null}">
+          <!-- Head -->
+          <thead class="dg-head" part="thead">
+            <tr role="row">
+              ${() => b.value === "multi" ? f`<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}"
+                        aria-label="Select all rows on this page"
+                        @change="${() => {
+			p.value || N.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" : ""}`}"
+                    role="columnheader"
+                    scope="col"
+                    :tabindex="${() => {
+			let e = $.activeCell.value;
+			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-label="${e.sortable ? void 0 : e.headerLabel ?? e.label}"
+                    :style="${() => {
+			let t = P.value[e.key];
+			return t ? `width:${t}px` : e.width ? `width:${e.width}` : "";
+		}}">
+                    <div class="dg-th-inner">
+                      ${() => e.sortable ? f`<ore-button
+                              class="dg-sort-btn"
+                              variant="text"
+                              size="sm"
+                              fullwidth
+                              :label="${e.headerLabel ?? e.label}"
+                              :disabled="${() => p.value || void 0}"
+                              @click="${() => {
+			p.value || N.sortBy(e.key);
+		}}">
+                              ${e.label}
+                              <ore-icon
+                                slot="suffix"
+                                class="dg-sort-icon"
+                                :name="${() => v(N.sortState.value, e.key)}"
+                                size="14"
+                                stroke-width="2"></ore-icon>
+                            </ore-button>` : e.label}
+                      ${e.resizable ? f`<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``}
+                    </div>
+                  </th>`)}
+              ${() => S.value ? f`<th
+                      class="dg-th dg-th-expand"
+                      role="columnheader"
+                      scope="col"
+                      aria-label="Row details"
+                      tabindex="-1"></th>` : f``}
+            </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)}">
+                      <div class="dg-empty-content">
+                        ${() => t.emptyText.value ?? "No data"}
+                        ${() => O.searchQuery.value || O.filterValues.value.size ? f`<div class="dg-empty-actions">
+                                <ore-button
+                                  variant="text"
+                                  size="sm"
+                                  @click="${() => {
+			O.resetSearch(), O.resetFilters();
+		}}">
+                                  Clear all filters & search
+                                </ore-button>
+                              </div>` : f``}
+                      </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
+                        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}"
+                        ?data-selectable="${i}"
+                        ?data-disabled="${p}"
+                        @click="${() => {
+				i && b.value === "single" && N.toggleRow(r);
+			}}"
+                        @keydown="${(e) => {
+				(e.key === "Enter" || e.key === " ") && i && b.value === "single" && (e.preventDefault(), N.toggleRow(r));
+			}}">
+                        ${() => b.value === "multi" ? f`<td
+                                class="dg-td dg-td-check"
+                                role="gridcell"
+                                :tabindex="${() => {
+				let e = $.activeCell.value;
+				return e.row === a && e.col === 0 ? "0" : "-1";
+			}}"
+                                @keydown="${(e) => {
+				(e.key === "Enter" || e.key === " ") && (e.preventDefault(), p.value || N.toggleRow(r));
+			}}">
+                                <ore-checkbox
+                                  class="dg-check"
+                                  :checked="${() => N.selectedKeys.value.has(r)}"
+                                  ?disabled="${p}"
+                                  aria-label="Select row"
+                                  tabindex="-1"
+                                  @click="${(e) => e.stopPropagation()}"
+                                  @change="${() => {
+				p.value || N.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" : ""}`}"
+                            part="cell"
+                            role="gridcell"
+                            data-align="${e.align ?? "left"}"
+                            :tabindex="${() => {
+					let e = $.activeCell.value;
+					return e.row === a && e.col === n + C.value ? "0" : "-1";
+				}}"
+                            :title="${r}">
+                            ${r}
+                          </td>`;
+			})}
+                        ${() => S.value ? f`<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";
+			}}"
+                                @keydown="${(e) => {
+				(e.key === "Enter" || e.key === " ") && (e.preventDefault(), p.value || Q(r));
+			}}">
+                                <ore-button
+                                  class="dg-expand-btn"
+                                  variant="ghost"
+                                  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}"
+                                  @click="${(e) => {
+				e.stopPropagation(), p.value || Q(r);
+			}}">
+                                  <ore-icon
+                                    :name="${() => x.value.has(r) ? "chevron-up" : "chevron-down"}"
+                                    size="14"
+                                    stroke-width="2"
+                                    aria-hidden="true"></ore-icon>
+                                </ore-button>
+                              </td>` : f``}
+                      </tr>
+                      ${() => S.value && x.value.has(r) ? f`<tr class="dg-tr-expanded" role="row">
+                              <td
+                                class="dg-td-expanded"
+                                role="gridcell"
+                                :colspan="${() => String(B.value)}">
+                                ${e(() => E.value.find((e) => typeof e.renderExpanded == "function")?.renderExpanded?.(t) ?? "")}
+                              </td>
+                            </tr>` : f``} `;
+		})}
+          </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
+                    >`}
+              <div class="dg-footer-end">
+                ${() => {
+			let e = t.pageSizeOptions.value ?? [];
+			return e.length ? f`<div class="dg-page-size-wrap">
+                        <ore-select
+                          class="dg-page-size-select"
+                          fullwidth
+                          aria-label="Rows per page"
+                          :value="${() => String(w.value)}"
+                          :options="${() => e.map((e) => ({
+				label: String(e),
+				value: String(e)
+			}))}"
+                          :disabled="${() => p.value || void 0}"
+                          @change="${(e) => {
+				let t = parseInt(e.detail.values[0], 10);
+				isNaN(t) || (w.value = t, N.goToPage(0), i("page-change", {
+					pageIndex: 0,
+					pageSize: t
+				}));
+			}}"></ore-select>
+                      </div>` : f``;
+		}}
+                <div class="dg-pagination" role="group" aria-label="Page navigation">
+                  <ore-button
+                    class="dg-page-btn"
+                    variant="ghost"
+                    size="sm"
+                    icon-only
+                    label="Previous page"
+                    :disabled="${() => !W.value || p.value}"
+                    @click="${() => R("prev")}">
+                    <ore-icon name="chevron-left" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
+                  </ore-button>
+                  <span
+                    class="dg-page-label"
+                    dir="ltr"
+                    aria-current="page"
+                    role="status"
+                    aria-live="polite"
+                    aria-atomic="true">
+                    ${() => K.value}
+                  </span>
+                  <ore-button
+                    class="dg-page-btn"
+                    variant="ghost"
+                    size="sm"
+                    icon-only
+                    label="Next page"
+                    :disabled="${() => !G.value || p.value}"
+                    @click="${() => R("next")}">
+                    <ore-icon name="chevron-right" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
+                  </ore-button>
+                </div>
+              </div>
+            </div>` : f``}
+    `;
+	},
+	shadow: { delegatesFocus: !0 },
+	styles: [t("datagrid"), u]
+});
+//#endregion
+export { s as COLUMN_TAG, b as DATAGRID_TAG, y as ariaSortValue, v as sortIconName };
+
+//# sourceMappingURL=datagrid.js.map