@atscript/vue-table 0.1.132 → 0.1.134

package/dist/{as-window-table-jD_y9yet.cjs → as-window-table-Bl_q72WL.cjs}

@@ -1,9 +1,9 @@
-const require_use_table_state = require("./use-table-state-Oi2ds4_a.cjs");
-const require_use_table_selection = require("./use-table-selection-Cmiu1h4S.cjs");
-const require_use_has_emit_listener = require("./use-has-emit-listener-hhOH8CBI.cjs");
-const require_get_cell_value = require("./get-cell-value-4rHKP-TG.cjs");
-const require_as_table_status = require("./as-table-status-Du4WLF4k.cjs");
-const require_use_table_column_handlers = require("./use-table-column-handlers-ehreEzcx.cjs");
+const require_use_table_state = require("./use-table-state-mhm-YWnu.cjs");
+const require_get_cell_value = require("./get-cell-value-CJT4fk4y.cjs");
+const require_use_table_selection = require("./use-table-selection-DtCV3rhu.cjs");
+const require_use_has_emit_listener = require("./use-has-emit-listener-BaGFZDyM.cjs");
+const require_as_table_status = require("./as-table-status-B2HPerJT.cjs");
+const require_use_table_column_handlers = require("./use-table-column-handlers-BMrP0WY2.cjs");
 let vue = require("vue");
 let _atscript_ui_table = require("@atscript/ui-table");
 let _vueuse_core = require("@vueuse/core");
@@ -175,6 +175,7 @@ const _hoisted_2 = ["aria-rowcount", "aria-multiselectable"];
 const _hoisted_3 = ["aria-activedescendant"];
 const _hoisted_4 = [
 	"id",
+	"data-selectable",
 	"aria-rowindex",
 	"aria-selected",
 	"onClick",
@@ -185,7 +186,14 @@ const _hoisted_5 = {
 	class: "as-td-select",
 	role: "gridcell"
 };
-const _hoisted_6 = ["aria-checked"];
+const _hoisted_6 = [
+	"tabindex",
+	"aria-label",
+	"title",
+	"aria-checked",
+	"aria-disabled",
+	"onKeydown"
+];
 const _hoisted_7 = {
 	key: 0,
 	class: "as-table-checkbox-tick",
@@ -241,6 +249,14 @@ var as_window_table_base_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Boolean,
 			required: false,
 			default: false
+		},
+		rowClass: {
+			type: Function,
+			required: false
+		},
+		rowAttrs: {
+			type: Function,
+			required: false
 		}
 	},
 	emits: [
@@ -255,6 +271,10 @@ var as_window_table_base_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const { state } = require_use_table_state.useTableContext();
 		const { resolve: cellResolver, hasAnyCellBindings } = require_as_table_status.useCellResolver(() => state.tableDef.value);
 		const cellComponents = require_as_table_status.useCellComponents(() => state.columns.value);
+		const headerColumns = (0, vue.computed)(() => state.columns.value.map((c) => c.local && c.sortable ? {
+			...c,
+			sortable: false
+		} : c));
 		const hasValue = (0, vue.computed)(() => props.select !== "none");
 		const hasActiveFilters = (0, vue.computed)(() => (0, _atscript_ui_table.filledFilterCount)(state.filters.value) > 0);
 		const selectAllState = (0, vue.computed)(() => {
@@ -267,6 +287,13 @@ var as_window_table_base_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			return out;
 		});
 		const rowStyle = (0, vue.computed)(() => ({ height: `${props.rowHeight}px` }));
+		/** Shared "selectable" verdict — frozen, so a hookless pool allocates nothing. */
+		const SELECTABLE = Object.freeze({ ok: true });
+		/** Accessible name for a row's selection control, carrying the disabled reason. */
+		function selectLabel(verdict) {
+			if (verdict.ok) return "Select row";
+			return verdict.reason ? `Select row, ${verdict.reason}` : "Select row, not selectable";
+		}
 		const visibleSlots = (0, vue.computed)(() => {
 			const viewport = state.viewportRowCount.value;
 			if (viewport <= 0) return [];
@@ -276,19 +303,38 @@ var as_window_table_base_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			const rowValueFn = state.rowValueFn;
 			const hasSelection = props.select !== "none";
 			const selectedSet = hasSelection ? new Set(state.selectedRows.value) : null;
+			const gated = !!state.rowSelectable.value;
+			const hasHooks = gated || !!props.rowClass || !!props.rowAttrs;
 			const out = [];
 			for (let s = 0; s < count; s++) {
 				const abs = top + s;
 				const row = state.dataAt(abs);
 				const pk = row === void 0 ? void 0 : rowValueFn(row);
 				const selected = selectedSet !== null && row !== void 0 && selectedSet.has(pk);
+				let selectable = SELECTABLE;
+				let cls;
+				let attrs;
+				if (hasHooks && row !== void 0) {
+					const hookCtx = {
+						index: abs,
+						get selected() {
+							return selected;
+						}
+					};
+					if (gated) selectable = state.isRowSelectable(row, abs);
+					cls = props.rowClass?.(row, hookCtx);
+					attrs = props.rowAttrs?.(row, hookCtx);
+				}
 				out.push({
 					s,
 					row,
 					pk,
 					errored: row === void 0 && state.errorAt(abs) !== null,
 					selected,
-					ariaSelected: hasSelection ? selected ? "true" : "false" : void 0
+					ariaSelected: hasSelection ? selected ? "true" : "false" : void 0,
+					selectable,
+					cls,
+					attrs
 				});
 			}
 			return out;
@@ -324,6 +370,9 @@ var as_window_table_base_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				mode: props.select
 			});
 		}
+		function onSelectCellKeydown(event, absIdx) {
+			require_use_table_state.onSelectControlKeydown(event, absIdx, props.select, state);
+		}
 		(0, vue.watch)([() => state.activeIndex.value, () => state.viewportRowCount.value], ([idx, viewport]) => {
 			if (idx < 0) return;
 			if (viewport <= 0) return;
@@ -362,11 +411,12 @@ var as_window_table_base_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			state.requestMainAction(event);
 		}
 		function onSelectAllToggle(headerState) {
-			if (headerState === "none") {
-				const pks = [];
-				for (const row of state.windowCache.value.values()) pks.push(state.rowValueFn(row));
-				state.selectedRows.value = pks;
-			} else state.selectedRows.value = [];
+			if (headerState !== "none") {
+				state.selectedRows.value = [];
+				return;
+			}
+			const entries = [...state.windowCache.value.entries()].toSorted((a, b) => a[0] - b[0]);
+			state.selectAll(entries.map((e) => e[1]), (i) => entries[i][0]);
 		}
 		const { onSort, onHide, onFilter, onFiltersOff, onResetWidth, onReorder, onClearFilters } = require_use_table_column_handlers.useTableColumnHandlers(state);
 		const wrapperRef = (0, vue.ref)(null);
@@ -431,7 +481,7 @@ var as_window_table_base_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					]),
 					!__props.headless ? ((0, vue.openBlock)(), (0, vue.createBlock)(require_as_table_status.as_table_header_default, {
 						key: 0,
-						columns: (0, vue.unref)(state).columns.value,
+						columns: headerColumns.value,
 						sorters: (0, vue.unref)(state).sorters.value,
 						filters: (0, vue.unref)(state).filters.value,
 						"column-menu": __props.columnMenu,
@@ -488,23 +538,37 @@ var as_window_table_base_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						onTouchmove: (0, vue.withModifiers)(onTouchMove, ["prevent"]),
 						onTouchend: onTouchEnd
 					}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(visibleSlots.value, (slot) => {
-						return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: `slot-${slot.s}` }, [slot.row !== void 0 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("tr", {
+						return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: `slot-${slot.s}` }, [(0, vue.createCommentVNode)("\n              `v-bind=\"slot.attrs\"` comes FIRST so every framework binding\n              after it wins — consumer attrs decorate a row, never rewrite its\n              id / role / aria / data contract.\n            "), slot.row !== void 0 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("tr", (0, vue.mergeProps)({
 							key: 0,
+							ref_for: true
+						}, slot.attrs, {
 							id: (0, vue.unref)(state).rowId((0, vue.unref)(state).topIndex.value + slot.s),
-							class: (0, vue.normalizeClass)(["as-window-data-row", { "as-table-row-active": (0, vue.unref)(state).activeIndex.value === (0, vue.unref)(state).topIndex.value + slot.s }]),
+							class: [
+								"as-window-data-row",
+								{ "as-table-row-active": (0, vue.unref)(state).activeIndex.value === (0, vue.unref)(state).topIndex.value + slot.s },
+								slot.cls
+							],
+							"data-selectable": slot.selectable.ok ? void 0 : "false",
 							role: "row",
 							"aria-rowindex": (0, vue.unref)(state).topIndex.value + slot.s + 2,
 							"aria-selected": slot.ariaSelected,
-							style: (0, vue.normalizeStyle)(rowStyle.value),
+							style: rowStyle.value,
 							onClick: ($event) => onRowClick(slot.row, $event, (0, vue.unref)(state).topIndex.value + slot.s),
 							onDblclick: ($event) => onRowDblClick(slot.row, $event, (0, vue.unref)(state).topIndex.value + slot.s)
-						}, [
+						}), [
 							hasValue.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("td", _hoisted_5, [(0, vue.createElementVNode)("span", {
-								class: (0, vue.normalizeClass)(["as-table-checkbox", { "as-table-checkbox-checked": slot.selected }]),
+								class: (0, vue.normalizeClass)(["as-table-checkbox", {
+									"as-table-checkbox-checked": slot.selected,
+									"as-table-checkbox-disabled": !slot.selectable.ok
+								}]),
 								role: "checkbox",
-								tabindex: "0",
-								"aria-checked": slot.selected ? "true" : "false"
-							}, [slot.selected ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_7)) : (0, vue.createCommentVNode)("v-if", true)], 10, _hoisted_6)])) : (0, vue.createCommentVNode)("v-if", true),
+								tabindex: slot.selectable.ok ? 0 : void 0,
+								"aria-label": selectLabel(slot.selectable),
+								title: slot.selectable.reason,
+								"aria-checked": slot.selected ? "true" : "false",
+								"aria-disabled": slot.selectable.ok ? void 0 : "true",
+								onKeydown: ($event) => onSelectCellKeydown($event, (0, vue.unref)(state).topIndex.value + slot.s)
+							}, [slot.selected ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_7)) : (0, vue.createCommentVNode)("v-if", true)], 42, _hoisted_6)])) : (0, vue.createCommentVNode)("v-if", true),
 							(0, vue.unref)(hasAnyCellBindings) ? ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, (0, vue.renderList)((0, vue.unref)(state).columns.value, (col) => {
 								return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: col.path }, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)([(0, vue.unref)(cellResolver)(col, slot.row, (0, vue.unref)(state).topIndex.value + slot.s)], (bindings) => {
 									return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [cellSlotFlags.value[col.path] ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("td", (0, vue.mergeProps)({
@@ -537,7 +601,7 @@ var as_window_table_base_default = /* @__PURE__ */ (0, vue.defineComponent)({
 								class: "as-td-filler",
 								role: "gridcell"
 							}, null, -1))
-						], 46, _hoisted_4)) : ((0, vue.openBlock)(), (0, vue.createBlock)(as_window_skeleton_row_default, {
+						], 16, _hoisted_4)) : ((0, vue.openBlock)(), (0, vue.createBlock)(as_window_skeleton_row_default, {
 							key: 1,
 							columns: (0, vue.unref)(state).columns.value,
 							"row-height": __props.rowHeight,
@@ -658,6 +722,18 @@ var as_window_table_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Boolean,
 			required: false,
 			default: false
+		},
+		rowSelectable: {
+			type: Function,
+			required: false
+		},
+		rowClass: {
+			type: Function,
+			required: false
+		},
+		rowAttrs: {
+			type: Function,
+			required: false
 		}
 	},
 	emits: [
@@ -673,6 +749,9 @@ var as_window_table_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		(0, vue.watch)(() => props.rowDelete, (val) => {
 			state.rowDelete.value = val;
 		}, { immediate: true });
+		(0, vue.watch)(() => props.rowSelectable, (val) => {
+			state.rowSelectable.value = val;
+		}, { immediate: true });
 		require_use_table_selection.useSelectModeReset(state, () => props.select);
 		require_use_table_state.useRegisterMainActionListener(state, (req) => emit("main-action", req.row, req.absIndex, req.event), require_use_has_emit_listener.useHasEmitListener("onMainAction"));
 		const containerRef = (0, vue.ref)(null);
@@ -709,6 +788,8 @@ var as_window_table_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				select: __props.select,
 				headless: __props.headless,
 				"enter-action": __props.enterAction,
+				"row-class": __props.rowClass,
+				"row-attrs": __props.rowAttrs,
 				onRowClick: _cache[0] || (_cache[0] = (row, ev) => emit("row-click", row, ev)),
 				onRowDblclick: _cache[1] || (_cache[1] = (row, ev) => emit("row-dblclick", row, ev)),
 				onViewportMetricsChange: onMetrics
@@ -726,7 +807,9 @@ var as_window_table_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"column-min-width",
 				"select",
 				"headless",
-				"enter-action"
+				"enter-action",
+				"row-class",
+				"row-attrs"
 			]), (0, vue.unref)(state).querying.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1, [(0, vue.renderSlot)(_ctx.$slots, "query-loading", {}, () => [_cache[2] || (_cache[2] = (0, vue.createElementVNode)("span", {
 				class: "as-table-query-overlay-icon",
 				"aria-hidden": "true"

package/dist/as-window-table.cjs

@@ -1,2 +1,2 @@
-const require_as_window_table = require("./as-window-table-jD_y9yet.cjs");
+const require_as_window_table = require("./as-window-table-Bl_q72WL.cjs");
 module.exports = require_as_window_table.as_window_table_default;

package/dist/as-window-table.d.cts

@@ -1,2 +1,2 @@
-import { t as _default } from "./as-window-table.vue-Bhf9BK8E.cjs";
+import { t as _default } from "./as-window-table.vue-Be2IA0Eb.cjs";
 export = _default;

package/dist/as-window-table.d.mts

@@ -1,2 +1,2 @@
-import { t as _default } from "./as-window-table.vue-DfZF1Mux.mjs";
+import { t as _default } from "./as-window-table.vue-CLqFM2ff.mjs";
 export { _default as default };

package/dist/as-window-table.mjs

@@ -1,2 +1,2 @@
-import { t as as_window_table_default } from "./as-window-table-DWujiUQy.mjs";
+import { t as as_window_table_default } from "./as-window-table-BH0tDDnr.mjs";
 export { as_window_table_default as default };

package/dist/{as-window-table.vue-DfZF1Mux.d.mts → as-window-table.vue-Be2IA0Eb.d.cts}

@@ -1,4 +1,4 @@
-import { a as EnterAction, f as RowDeleteOpt, n as ColumnMenuConfig, u as QueryErrorKind } from "./types-ByU4O0Yf.mjs";
+import { a as EnterAction, d as QueryErrorKind, g as RowDeleteOpt, h as RowClassHook, m as RowAttrsHook, n as ColumnMenuConfig, v as RowSelectableHook } from "./types--ex8BJIO.cjs";
 import * as vue from "vue";
 import { SelectionMode } from "@atscript/ui-table";
 
@@ -58,26 +58,49 @@ type __VLS_Props = {
    * (sort/filter/reorder/resize) are unavailable in headless mode.
    */
   headless?: boolean;
+  /**
+   * Per-row selectability. Return `false` — or a string, surfaced as the
+   * disabled reason on the row's selection control — to make a row not
+   * selectable. Enforced on every path: row click, Space/Enter toggle, and
+   * the header select-all. Since 0.1.133.
+   *
+   * @example
+   * `:row-selectable="(row) => row.locked ? 'Locked by another user' : true"`
+   */
+  rowSelectable?: RowSelectableHook;
+  /**
+   * Extra classes for the row element — string, array, or
+   * `{ class: boolean }` map, merged with the framework's own row classes.
+   * Since 0.1.133.
+   */
+  rowClass?: RowClassHook;
+  /**
+   * Extra attributes for the row element. The framework's own `id`, `role`,
+   * `aria-*`, `data-*`, `class` and `style` always win, so a hook can
+   * decorate a row but never rewrite its accessibility contract.
+   * Since 0.1.133.
+   */
+  rowAttrs?: RowAttrsHook;
 };
 declare var __VLS_13: string, __VLS_14: any, __VLS_16: {};
 type __VLS_Slots = {} & { [K in NonNullable<typeof __VLS_13>]?: (props: typeof __VLS_14) => any } & {
   'query-loading'?: (props: typeof __VLS_16) => any;
 };
 declare const __VLS_base: vue.DefineComponent<__VLS_Props, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {} & {
-  "main-action": (row: Row, absIndex: number, event: KeyboardEvent | MouseEvent) => any;
   "row-click": (row: Row, event: MouseEvent) => any;
   "row-dblclick": (row: Row, event: MouseEvent) => any;
+  "main-action": (row: Row, absIndex: number, event: MouseEvent | KeyboardEvent) => any;
   error: (error: Error, kind: QueryErrorKind) => any;
 }, string, vue.PublicProps, Readonly<__VLS_Props> & Readonly<{
-  "onMain-action"?: ((row: Row, absIndex: number, event: KeyboardEvent | MouseEvent) => any) | undefined;
   "onRow-click"?: ((row: Row, event: MouseEvent) => any) | undefined;
   "onRow-dblclick"?: ((row: Row, event: MouseEvent) => any) | undefined;
+  "onMain-action"?: ((row: Row, absIndex: number, event: MouseEvent | KeyboardEvent) => any) | undefined;
   onError?: ((error: Error, kind: QueryErrorKind) => any) | undefined;
 }>, {
-  select: SelectionMode;
   reorderable: boolean;
   resizable: boolean;
   columnMinWidth: number;
+  select: SelectionMode;
   rowDelete: boolean | RowDeleteOpt;
   headless: boolean;
   rowHeight: number;

package/dist/{as-window-table.vue-Bhf9BK8E.d.cts → as-window-table.vue-CLqFM2ff.d.mts}

@@ -1,4 +1,4 @@
-import { a as EnterAction, f as RowDeleteOpt, n as ColumnMenuConfig, u as QueryErrorKind } from "./types-CTMxE_zA.cjs";
+import { a as EnterAction, d as QueryErrorKind, g as RowDeleteOpt, h as RowClassHook, m as RowAttrsHook, n as ColumnMenuConfig, v as RowSelectableHook } from "./types-CBGaTR2Z.mjs";
 import * as vue from "vue";
 import { SelectionMode } from "@atscript/ui-table";
 
@@ -58,26 +58,49 @@ type __VLS_Props = {
    * (sort/filter/reorder/resize) are unavailable in headless mode.
    */
   headless?: boolean;
+  /**
+   * Per-row selectability. Return `false` — or a string, surfaced as the
+   * disabled reason on the row's selection control — to make a row not
+   * selectable. Enforced on every path: row click, Space/Enter toggle, and
+   * the header select-all. Since 0.1.133.
+   *
+   * @example
+   * `:row-selectable="(row) => row.locked ? 'Locked by another user' : true"`
+   */
+  rowSelectable?: RowSelectableHook;
+  /**
+   * Extra classes for the row element — string, array, or
+   * `{ class: boolean }` map, merged with the framework's own row classes.
+   * Since 0.1.133.
+   */
+  rowClass?: RowClassHook;
+  /**
+   * Extra attributes for the row element. The framework's own `id`, `role`,
+   * `aria-*`, `data-*`, `class` and `style` always win, so a hook can
+   * decorate a row but never rewrite its accessibility contract.
+   * Since 0.1.133.
+   */
+  rowAttrs?: RowAttrsHook;
 };
 declare var __VLS_13: string, __VLS_14: any, __VLS_16: {};
 type __VLS_Slots = {} & { [K in NonNullable<typeof __VLS_13>]?: (props: typeof __VLS_14) => any } & {
   'query-loading'?: (props: typeof __VLS_16) => any;
 };
 declare const __VLS_base: vue.DefineComponent<__VLS_Props, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {} & {
-  "main-action": (row: Row, absIndex: number, event: KeyboardEvent | MouseEvent) => any;
   "row-click": (row: Row, event: MouseEvent) => any;
   "row-dblclick": (row: Row, event: MouseEvent) => any;
+  "main-action": (row: Row, absIndex: number, event: MouseEvent | KeyboardEvent) => any;
   error: (error: Error, kind: QueryErrorKind) => any;
 }, string, vue.PublicProps, Readonly<__VLS_Props> & Readonly<{
-  "onMain-action"?: ((row: Row, absIndex: number, event: KeyboardEvent | MouseEvent) => any) | undefined;
   "onRow-click"?: ((row: Row, event: MouseEvent) => any) | undefined;
   "onRow-dblclick"?: ((row: Row, event: MouseEvent) => any) | undefined;
+  "onMain-action"?: ((row: Row, absIndex: number, event: MouseEvent | KeyboardEvent) => any) | undefined;
   onError?: ((error: Error, kind: QueryErrorKind) => any) | undefined;
 }>, {
-  select: SelectionMode;
   reorderable: boolean;
   resizable: boolean;
   columnMinWidth: number;
+  select: SelectionMode;
   rowDelete: boolean | RowDeleteOpt;
   headless: boolean;
   rowHeight: number;

package/dist/error-message-CfKpn_5w.cjs

@@ -0,0 +1,18 @@
+//#region src/utils/error-message.ts
+/**
+* Turn an unknown thrown value into copy a user can read. Anything that
+* isn't an `Error` with a non-empty message falls back to `fallback` —
+* `"[object Object]"` and empty bubbles never reach the surface.
+*
+* @since 0.1.133
+*/
+function errorMessage(err, fallback) {
+	return err instanceof Error && err.message ? err.message : fallback;
+}
+//#endregion
+Object.defineProperty(exports, "errorMessage", {
+	enumerable: true,
+	get: function() {
+		return errorMessage;
+	}
+});

package/dist/error-message-gNEXnnbb.mjs

@@ -0,0 +1,13 @@
+//#region src/utils/error-message.ts
+/**
+* Turn an unknown thrown value into copy a user can read. Anything that
+* isn't an `Error` with a non-empty message falls back to `fallback` —
+* `"[object Object]"` and empty bubbles never reach the surface.
+*
+* @since 0.1.133
+*/
+function errorMessage(err, fallback) {
+	return err instanceof Error && err.message ? err.message : fallback;
+}
+//#endregion
+export { errorMessage as t };