@vielzeug/refine 2.1.0 → 2.1.3

package/dist/datagrid.js

@@ -1,13 +1,12 @@
-import "./_dev.js";
 import { tableBaseMixin as e } from "./styles/mixins/table-base.css.js";
+import "./_dev.js";
 import { disablableBundle as t, loadableBundle as n } from "./shared/prop-bundles.js";
-import { COLUMN_OBSERVED_ATTRS as r, COLUMN_TAG as i, parseColumnChildren as a } from "./inputs/datagrid/datagrid-column.js";
-import { createDataGridModel as o } from "./inputs/datagrid/datagrid-model.js";
-import { createGridNav as s } from "./inputs/datagrid/datagrid-nav.js";
-import c from "./inputs/datagrid/datagrid.css.js";
+import r from "./inputs/datagrid/datagrid.css.js";
+import { COLUMN_OBSERVED_ATTRS as i, COLUMN_TAG as a, parseColumnChildren as o } from "./inputs/datagrid/datagrid-column.js";
+import { createDataGridModel as s } from "./inputs/datagrid/datagrid-model.js";
+import { createGridNav as c } from "./inputs/datagrid/datagrid-nav.js";
 import { define as l, getHost as u, html as d, onCleanup as f, onMounted as p, prop as m, unsafeHtml as h, useEmit as g, useSlots as ee } from "@vielzeug/ore";
-import { computed as _, signal as v } from "@vielzeug/ripple";
-import { watch as y } from "@vielzeug/ripple/watch";
+import { computed as _, signal as v, watch as y } from "@vielzeug/ripple";
 import { debounce as te } from "@vielzeug/arsenal/function";
 //#region src/inputs/datagrid/datagrid.ts
 function b(e, t) {
@@ -43,18 +42,18 @@ l(S, {
 		views: m.data()
 	},
 	setup(e) {
-		let t = u(), n = g(), i = ee(), c = _(() => e.disabled.value === !0), l = _(() => e.selectionMode.value ?? "none"), m = v(/* @__PURE__ */ new Set()), S = _(() => e.expandable.value === !0 && E.value.some((e) => typeof e.renderExpanded == "function")), C = _(() => +(l.value === "multi")), w = v(e.pageSize.value ?? 10);
+		let t = u(), n = g(), r = ee(), a = _(() => e.disabled.value === !0), l = _(() => e.selectionMode.value ?? "none"), m = v(/* @__PURE__ */ new Set()), S = _(() => e.expandable.value === !0 && E.value.some((e) => typeof e.renderExpanded == "function")), C = _(() => +(l.value === "multi")), w = v(e.pageSize.value ?? 10);
 		y(e.pageSize, (e) => {
 			e != null && (w.value = e);
 		});
 		let T = v([]);
 		p(() => {
-			T.value = a(t);
+			T.value = o(t);
 			let e = new MutationObserver(() => {
-				T.value = a(t);
+				T.value = o(t);
 			});
 			return e.observe(t, {
-				attributeFilter: r,
+				attributeFilter: i,
 				attributes: !0,
 				childList: !0,
 				subtree: !0
@@ -102,7 +101,7 @@ l(S, {
 			};
 			t(), j = e.subscribe(t);
 		}, { immediate: !0 });
-		let M = o({
+		let M = s({
 			clientSide: _(() => !O.value),
 			columns: E,
 			filterOptions: e.filterOptions,
@@ -127,7 +126,7 @@ l(S, {
 		y(e.selectedKeys, (e) => {
 			Array.isArray(e) && M.setSelection(new Set(e));
 		}, { immediate: !0 });
-		let P = v({}), F = (e, t) => (n) => {
+		let P = v({}), ne = (e, t) => (n) => {
 			n.preventDefault();
 			let r = n.clientX, i = t.getBoundingClientRect().width, a = new AbortController(), { signal: o } = a;
 			window.addEventListener("pointermove", (t) => {
@@ -136,7 +135,7 @@ l(S, {
 					[e]: Math.max(40, i + t.clientX - r)
 				};
 			}, { signal: o }), window.addEventListener("pointerup", () => a.abort(), { signal: o });
-		}, I = M.visibleColumns, ne = (e, t) => {
+		}, F = M.visibleColumns, I = (e, t) => {
 			if (e.cell) return e.cell(t);
 			let n = t[e.key];
 			return n == null ? "" : String(n);
@@ -155,7 +154,7 @@ l(S, {
 		let R = _(() => {
 			let e = M.currentPageItems.value;
 			return !e.length || M.isAllSelected() ? !1 : e.some((e) => M.selectedKeys.value.has(D(e)));
-		}), z = _(() => I.value.length + +(l.value === "multi") + +!!S.value), B = _(() => O.value ? A.value.pageCount > 1 : w.value > 0), V = _(() => {
+		}), z = _(() => F.value.length + +(l.value === "multi") + +!!S.value), B = _(() => O.value ? A.value.pageCount > 1 : w.value > 0), V = _(() => {
 			if (O.value) {
 				let { pageNumber: e, pageSize: t, totalItems: n } = A.value, r = Math.max(1, t);
 				if (!B.value) return `${n} row${n === 1 ? "" : "s"}`;
@@ -203,7 +202,7 @@ l(S, {
 		p(() => {
 			let e = t.shadowRoot, n = e.querySelector(".dg-table");
 			if (!n) return;
-			let { cleanup: r, handle: i } = s(n, e);
+			let { cleanup: r, handle: i } = c(n, e);
 			return $ = i, r;
 		}), t.focusCell = (e) => $.focusCell(e);
 		let re = () => {
@@ -398,7 +397,7 @@ l(S, {
                       placeholder="${() => e.label}"
                       options="${() => e.options}"
                       value="${() => [...M.filterValues.value.get(e.key)?.values ?? []]}"
-                      disabled="${() => c.value || void 0}"
+                      disabled="${() => a.value || void 0}"
                       multiple
                       fullwidth
                       autoclose
@@ -465,7 +464,7 @@ l(S, {
               aria-hidden="true"></ore-icon>
           </ore-button>
 
-          <span class="dg-action-divider" aria-hidden="true" ?hidden="${() => !i.has("actions").value}"></span>
+          <span class="dg-action-divider" aria-hidden="true" ?hidden="${() => !r.has("actions").value}"></span>
 
           <slot name="actions"></slot>
 
@@ -479,7 +478,7 @@ l(S, {
                       size="sm"
                       rounded="full"
                       placeholder="${() => e.searchPlaceholder.value ?? "Search…"}"
-                      disabled="${() => c.value || void 0}"
+                      disabled="${() => a.value || void 0}"
                       ref="${(e) => {
 			e && requestAnimationFrame(() => e.focus());
 		}}"
@@ -527,7 +526,7 @@ l(S, {
           role="grid"
           aria-label="${() => e.label.value ?? void 0}"
           aria-busy="${() => H.value ? "true" : null}"
-          aria-disabled="${() => c.value ? "true" : null}">
+          aria-disabled="${() => a.value ? "true" : null}">
           <!-- Head -->
           <thead class="dg-head" part="thead">
             <tr role="row">
@@ -541,15 +540,15 @@ l(S, {
                           class="dg-check"
                           checked="${() => M.isAllSelected()}"
                           indeterminate="${R}"
-                          ?disabled="${c}"
+                          ?disabled="${a}"
                           aria-label="Select all rows on this page"
                           @change="${() => {
-			c.value || M.selectAll();
+			a.value || M.selectAll();
 		}}"></ore-checkbox>
                       </th>
                     ` : d``}
-              ${() => I.value.map((e, t) => {
-			let n = t === I.value.length - 1;
+              ${() => F.value.map((e, t) => {
+			let n = t === F.value.length - 1;
 			return d`
                     <th
                       class="${`dg-th${n && S.value ? " dg-th-last" : ""}`}"
@@ -574,9 +573,9 @@ l(S, {
                                   size="sm"
                                   fullwidth
                                   label="${e.headerLabel ?? e.label}"
-                                  disabled="${() => c.value || void 0}"
+                                  disabled="${() => a.value || void 0}"
                                   @click="${() => {
-				c.value || M.sortBy(e.key);
+				a.value || M.sortBy(e.key);
 			}}">
                                   ${e.label}
                                   <ore-icon
@@ -594,7 +593,7 @@ l(S, {
                                   ref="${(t) => {
 				if (!t) return;
 				let n = t.closest("th");
-				n && t.addEventListener("pointerdown", F(e.key, n));
+				n && t.addEventListener("pointerdown", ne(e.key, n));
 			}}"></span>
                               ` : d``}
                       </div>
@@ -635,7 +634,7 @@ l(S, {
                       </td>
                     </tr>
                   ` : M.currentPageItems.value.map((e, t) => {
-			let n = D(e), r = l.value !== "none" && !c.value, i = t + 1;
+			let n = D(e), r = l.value !== "none" && !a.value, i = t + 1;
 			return d`
                       <tr
                         class="dg-tr"
@@ -644,7 +643,7 @@ l(S, {
                         aria-selected="${() => l.value === "none" ? null : String(M.selectedKeys.value.has(n))}"
                         aria-expanded="${() => S.value ? String(m.value.has(n)) : null}"
                         ?data-selectable="${r}"
-                        ?data-disabled="${c}"
+                        ?data-disabled="${a}"
                         @click="${() => {
 				r && l.value === "single" && M.toggleRow(n);
 			}}"
@@ -660,22 +659,22 @@ l(S, {
 				return e.row === i && e.col === 0 ? "0" : "-1";
 			}}"
                                   @keydown="${(e) => {
-				(e.key === "Enter" || e.key === " ") && (e.preventDefault(), c.value || M.toggleRow(n));
+				(e.key === "Enter" || e.key === " ") && (e.preventDefault(), a.value || M.toggleRow(n));
 			}}">
                                   <ore-checkbox
                                     class="dg-check"
                                     checked="${() => M.selectedKeys.value.has(n)}"
-                                    ?disabled="${c}"
+                                    ?disabled="${a}"
                                     aria-label="Select row"
                                     tabindex="-1"
                                     @click="${(e) => e.stopPropagation()}"
                                     @change="${() => {
-				c.value || M.toggleRow(n);
+				a.value || M.toggleRow(n);
 			}}"></ore-checkbox>
                                 </td>
                               ` : d``}
-                        ${I.value.map((t, n) => {
-				let r = ne(t, e), a = n === I.value.length - 1;
+                        ${F.value.map((t, n) => {
+				let r = I(t, e), a = n === F.value.length - 1;
 				return d`
                             <td
                               class="${`dg-td${a && S.value ? " dg-td-last" : ""}`}"
@@ -700,7 +699,7 @@ l(S, {
 				return e.row === i && e.col === z.value - 1 ? "0" : "-1";
 			}}"
                                   @keydown="${(e) => {
-				(e.key === "Enter" || e.key === " ") && (e.preventDefault(), c.value || Q(n));
+				(e.key === "Enter" || e.key === " ") && (e.preventDefault(), a.value || Q(n));
 			}}">
                                   <ore-button
                                     class="dg-expand-btn"
@@ -710,9 +709,9 @@ l(S, {
                                     tabindex="-1"
                                     label="${() => m.value.has(n) ? "Collapse row" : "Expand row"}"
                                     aria-expanded="${() => String(m.value.has(n))}"
-                                    disabled="${() => c.value || void 0}"
+                                    disabled="${() => a.value || void 0}"
                                     @click="${(e) => {
-				e.stopPropagation(), c.value || Q(n);
+				e.stopPropagation(), a.value || Q(n);
 			}}">
                                     <ore-icon
                                       name="${() => m.value.has(n) ? "chevron-up" : "chevron-down"}"
@@ -761,10 +760,10 @@ l(S, {
 				label: String(e),
 				value: String(e)
 			}))}"
-                              disabled="${() => c.value || void 0}"
+                              disabled="${() => a.value || void 0}"
                               @change="${(e) => {
 				let t = parseInt(e.detail.values[0], 10);
-				isNaN(t) || (w.value = t, M.goToPage(0), n("page-change", {
+				Number.isNaN(t) || (w.value = t, M.goToPage(0), n("page-change", {
 					pageIndex: 0,
 					pageSize: t
 				}));
@@ -779,7 +778,7 @@ l(S, {
                       size="sm"
                       icon-only
                       label="Previous page"
-                      disabled="${() => !U.value || c.value}"
+                      disabled="${() => !U.value || a.value}"
                       @click="${() => L("prev")}">
                       <ore-icon name="chevron-left" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
                     </ore-button>
@@ -798,7 +797,7 @@ l(S, {
                       size="sm"
                       icon-only
                       label="Next page"
-                      disabled="${() => !W.value || c.value}"
+                      disabled="${() => !W.value || a.value}"
                       @click="${() => L("next")}">
                       <ore-icon name="chevron-right" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
                     </ore-button>
@@ -809,9 +808,9 @@ l(S, {
     `;
 	},
 	shadow: { delegatesFocus: !0 },
-	styles: [e("datagrid"), c]
+	styles: [e("datagrid"), r]
 });
 //#endregion
-export { i as COLUMN_TAG, S as DATAGRID_TAG, x as ariaSortValue, b as sortIconName };
+export { a as COLUMN_TAG, S as DATAGRID_TAG, x as ariaSortValue, b as sortIconName };
 
 //# sourceMappingURL=datagrid.js.map