bitboss-ui 3.0.0-beta.2 → 3.0.0-beta.21

package/dist/components/BbTable/BbTableDataRow.d.ts

@@ -0,0 +1,162 @@
+import { MappedItem } from './types';
+import { PropType, Slots, VNode } from 'vue';
+/**
+ * Everything a body row needs from the table that is NOT about the row itself.
+ * It is assembled ONCE, in a computed, so its identity survives a render of the
+ * table — which is the whole point of this component (see below).
+ *
+ * Shared with `BbTableExpandRow`, which needs the same identity for the same
+ * reason. It keeps the data row's name because that is where the shape and the
+ * reasoning live; the expand row uses the four fields it needs and ignores the
+ * rest.
+ */
+export type DataRowContext = {
+    /** The table's own slot bag, forwarded by reference. See the note below. */
+    slots: Slots;
+    selectable: boolean | ((item: any) => boolean) | undefined;
+    multiple: boolean;
+    readonly: boolean;
+    actions: boolean;
+    keyboardNavigation: boolean;
+    contentInert: boolean;
+    /** `aria-rowindex` is only meaningful once the pager facts are known. */
+    hasRowIndex: boolean;
+    /** Tracks a full-width row spans — the expand row's `aria-colspan`. */
+    columnSpan: number;
+    /** Shared `name` for the radio group. */
+    inputName: string;
+    /** Passed through verbatim — a `ColumnClasses` may legitimately be a function. */
+    tdClass: unknown;
+    /**
+     * The width-driven state classes of each column's data cells, already
+     * joined — the table works out `--resized` / `--nowrap` / `--clip` once per
+     * column so the row does one `Map` lookup per cell instead of three
+     * membership tests.
+     */
+    cellClasses: Map<string, string>;
+    sortOrders: Map<string, 'asc' | 'desc'>;
+    /** The virtualizer's measurer, or a no-op on a plain table. */
+    measureRow: (el: unknown) => void;
+    onInputChange: (item: MappedItem) => void;
+    onRowFocus: (index: number) => void;
+    onRowKeydown: (event: KeyboardEvent, index: number) => void;
+};
+/**
+ * One data row — the same markup the table used to render inline, moved behind
+ * a component boundary so that a row which has not changed does NO WORK when
+ * the table re-renders.
+ *
+ * WHY THIS EXISTS. A `virtual` table re-renders its body on every window move,
+ * and the body's `v-for` re-renders EVERY mounted row, not just the one or two
+ * that arrived: a notch scroll moves the window by ~2 rows and used to rebuild
+ * all 30, sixteen cells and a consumer slot call each, ~300 child-component
+ * prop updates in all. The window moving is not even the only trigger — a
+ * table's parent re-renders for reasons of its own, and any prop of the table
+ * whose identity changed (an array or object literal in the parent's template)
+ * forces the same full-body render with nothing at all to show for it.
+ *
+ * With the row as a component, that render costs one small vnode per row and a
+ * handful of `!==` comparisons: every prop here is either the row's own
+ * projection (`item`, stable until the item's state changes) or the shared
+ * `context` (one computed, stable until a table-level setting changes), so
+ * Vue's `shouldUpdateComponent` bails and the subtree is never touched. The
+ * rows that DID change — the ones that arrived, the one focus moved to, the
+ * one that was selected — re-render exactly as before.
+ *
+ * WHY NOT `v-memo`, which is the usual answer to "skip an unchanged row": its
+ * cache is indexed by POSITION in the `v-for`, and a window that moves shifts
+ * every row's position, so every entry misses. And it would be wrong here even
+ * if it hit: the cells call the CONSUMER's slots, whose reactive dependencies
+ * we cannot enumerate into a memo key — a slot reading a ref of its own would
+ * freeze. A component boundary has no such problem, because the slot runs
+ * inside THIS component's render effect and that effect subscribes to whatever
+ * the slot happens to read.
+ *
+ * WHY THE SLOTS COME IN AS A PROP rather than as this component's own slots:
+ * forwarding them (`<template v-for="(_, name) in $slots" #[name]>`) compiles
+ * to dynamic slots, and a vnode with dynamic slots is FORCED to update — it
+ * would defeat the only thing this component is for. `renderSlot` does not
+ * care whose bag it is handed.
+ */
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    context: {
+        type: PropType<DataRowContext>;
+        required: true;
+    };
+    item: {
+        type: PropType<MappedItem>;
+        required: true;
+    };
+    /** Index into the item list — what the keyboard grammar counts in. */
+    index: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /** Index into the flat row list — `data-index`, what the virtualizer reads. */
+    virtualIndex: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /** This row is the body's single tab stop. */
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Selection resolved by the table (`selectAll` and the unselected set
+     * included), passed as a value so the row does not re-derive it per cell.
+     */
+    selected: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** `isSelectToggleBlocked`, likewise resolved once by the table. */
+    selectBlocked: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    context: {
+        type: PropType<DataRowContext>;
+        required: true;
+    };
+    item: {
+        type: PropType<MappedItem>;
+        required: true;
+    };
+    /** Index into the item list — what the keyboard grammar counts in. */
+    index: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /** Index into the flat row list — `data-index`, what the virtualizer reads. */
+    virtualIndex: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /** This row is the body's single tab stop. */
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Selection resolved by the table (`selectAll` and the unselected set
+     * included), passed as a value so the row does not re-derive it per cell.
+     */
+    selected: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** `isSelectToggleBlocked`, likewise resolved once by the table. */
+    selectBlocked: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    selected: boolean;
+    active: boolean;
+    selectBlocked: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/BbTable/BbTableDataRow.js

@@ -0,0 +1,136 @@
+import e from "../BbBaseCheckbox/BbBaseCheckbox.vue.js";
+import t from "../BbBaseRadio/BbBaseRadio.vue.js";
+import { createTextVNode as n, defineComponent as r, h as i, renderSlot as a, toDisplayString as o } from "vue";
+//#region src/components/BbTable/BbTableDataRow.ts
+var s = r({
+	name: "BbTableDataRow",
+	props: {
+		context: {
+			type: Object,
+			required: !0
+		},
+		item: {
+			type: Object,
+			required: !0
+		},
+		index: {
+			type: Number,
+			required: !0
+		},
+		virtualIndex: {
+			type: Number,
+			required: !0
+		},
+		active: {
+			type: Boolean,
+			default: !1
+		},
+		selected: {
+			type: Boolean,
+			default: !1
+		},
+		selectBlocked: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(r) {
+		let s = () => r.context.onRowFocus(r.index), c = (e) => r.context.onRowKeydown(e, r.index), l = () => r.context.onInputChange(r.item), u = () => {
+			let { context: n, item: o } = r;
+			return i("div", {
+				class: ["bb-table-data__cell bb-table-data__cell--select", n.tdClass],
+				role: "cell"
+			}, a(n.slots, "select", {
+				checked: r.selected,
+				disabled: r.selectBlocked,
+				inputName: n.inputName,
+				item: o.item,
+				readonly: !!n.readonly,
+				toggleSelected: o.toggleSelected,
+				value: o.value
+			}, () => [n.multiple ? i("label", { class: ["bb-table-check__label", { "bb-table-check__label--disabled": o.disabled }] }, [i(e, {
+				checked: r.selected,
+				class: "bb-table-check",
+				disabled: o.disabled,
+				readonly: n.readonly,
+				onChange: l
+			}), i("span", { class: "bb-table-check__label-text sr-only" }, o.accessibleLabel)]) : i("label", { class: ["bb-table-radio__label", { "bb-table-radio__label--disabled": o.disabled }] }, [i(t, {
+				checked: o.selected,
+				class: "bb-table-radio",
+				disabled: o.disabled,
+				name: n.inputName,
+				readonly: n.readonly,
+				value: o.value,
+				onChange: l
+			}), i("span", { class: "bb-table-radio__label-text sr-only" }, o.accessibleLabel)])]));
+		}, d = () => {
+			let { context: e, item: t } = r, s = t.cols.length - 1;
+			return t.cols.map((c, l) => i("div", {
+				key: c.key,
+				class: [
+					"bb-table-data__cell",
+					c.classes,
+					e.cellClasses.get(c.key),
+					{
+						"bb-table-data__cell--edge-start": l === 0,
+						"bb-table-data__cell--edge-end": l === s
+					}
+				],
+				role: "cell"
+			}, a(e.slots, c.slotName, {
+				classes: c.classes,
+				content: c.content,
+				expandProps: t.expandProps,
+				expanded: t.expanded,
+				highlighted: t.highlighted,
+				item: t.item,
+				selected: r.selected,
+				sortOrder: e.sortOrders.get(c.key) ?? null,
+				toggleExpanded: t.toggleExpanded,
+				toggleHighlighted: t.toggleHighlighted,
+				toggleSelected: t.toggleSelected,
+				value: t.value
+			}, () => [n(o(c.content))])));
+		}, f = () => {
+			let { context: e, item: t } = r;
+			return i("div", {
+				class: ["bb-table__cell bb-table__cell--actions", e.tdClass],
+				role: "cell"
+			}, a(e.slots, "actions", {
+				expandProps: t.expandProps,
+				expanded: t.expanded,
+				highlighted: t.highlighted,
+				item: t.item,
+				selected: r.selected,
+				toggleExpanded: t.toggleExpanded,
+				toggleHighlighted: t.toggleHighlighted,
+				toggleSelected: t.toggleSelected,
+				value: t.value
+			}));
+		};
+		return () => {
+			let { context: e, item: t } = r, n = [];
+			return e.selectable && n.push(u()), n.push(...d()), e.actions && n.push(f()), i("div", {
+				ref: e.measureRow,
+				"aria-current": t.highlighted ? "true" : void 0,
+				"aria-rowindex": e.hasRowIndex && t.rowIndex ? t.rowIndex : void 0,
+				class: [
+					"bb-table-data__row",
+					t.rowClasses,
+					{ "bb-table-data__row--highlighted": t.highlighted }
+				],
+				"data-index": r.virtualIndex,
+				inert: e.contentInert,
+				role: "row",
+				tabindex: e.keyboardNavigation ? r.active ? 0 : -1 : void 0,
+				onClick: t.onRowClick,
+				onContextmenu: t.onRowContextMenu,
+				onDblclick: t.onRowDblClick,
+				onFocus: s,
+				onKeydown: c
+			}, n);
+		};
+	}
+});
+//#endregion
+export { s as default };

package/dist/components/BbTable/BbTableExpandRow.d.ts

@@ -0,0 +1,73 @@
+import { DataRowContext } from './BbTableDataRow';
+import { MappedItem } from './types';
+import { PropType, VNode } from 'vue';
+/**
+ * One expand row — the row an open item drops below itself, holding the
+ * consumer's `#expand` slot.
+ *
+ * WHY THIS EXISTS: the same reason `BbTableDataRow` does, for the row kind that
+ * did not get the treatment. Data rows moved behind a component boundary so
+ * that a table render costs an unchanged row nothing; the expand row stayed in
+ * the table's own render function, so every one of those renders re-invoked the
+ * CONSUMER's `#expand` slot for every open row on screen — and what that slot
+ * usually contains is a whole nested table. Measured on the playground with
+ * three rows open, dragging: 57 invocations across 20 scroll steps, i.e. all
+ * three nested tables rebuilt their vnode trees on essentially every step,
+ * having changed in no way whatsoever. (A `virtual` table re-renders its body
+ * on every window move, and there are one and a half to two of those per step.)
+ *
+ * Its props are the same shape and the same identities as the data row's, so
+ * `shouldUpdateComponent` bails for exactly the same reason: `context` is one
+ * computed, `item` comes from `mappedItemAt`'s memo, and the rest are scalars.
+ *
+ * The slot bag arrives inside `context` rather than as this component's own
+ * slots — forwarding would compile to dynamic slots, and a vnode with those is
+ * forced to update, which would defeat the whole point. See the long note at
+ * the top of `BbTableDataRow`.
+ *
+ * The markup is the table's, not the consumer's: a full-width row whose single
+ * cell spans every column, carrying the `id` that the expand controller's
+ * `aria-controls` points at.
+ */
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    context: {
+        type: PropType<DataRowContext>;
+        required: true;
+    };
+    item: {
+        type: PropType<MappedItem>;
+        required: true;
+    };
+    /** Index into the flat row list — `data-index`, what the virtualizer reads. */
+    virtualIndex: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /** Selection resolved by the table, as on the data row. */
+    selected: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => VNode, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    context: {
+        type: PropType<DataRowContext>;
+        required: true;
+    };
+    item: {
+        type: PropType<MappedItem>;
+        required: true;
+    };
+    /** Index into the flat row list — `data-index`, what the virtualizer reads. */
+    virtualIndex: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /** Selection resolved by the table, as on the data row. */
+    selected: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    selected: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/BbTable/BbTableExpandRow.js

@@ -0,0 +1,52 @@
+import { defineComponent as e, h as t, renderSlot as n } from "vue";
+//#region src/components/BbTable/BbTableExpandRow.ts
+var r = e({
+	name: "BbTableExpandRow",
+	props: {
+		context: {
+			type: Object,
+			required: !0
+		},
+		item: {
+			type: Object,
+			required: !0
+		},
+		virtualIndex: {
+			type: Number,
+			required: !0
+		},
+		selected: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(e) {
+		return () => {
+			let { context: r, item: i } = e;
+			return t("div", {
+				"aria-rowindex": r.hasRowIndex && i.rowIndex ? i.rowIndex + 1 : void 0,
+				class: ["bb-table-expand__row", { "bb-table-expand__row--highlighted": i.highlighted }],
+				"data-index": e.virtualIndex,
+				id: `expanded_${i.valueHash}`,
+				ref: r.measureRow,
+				role: "row"
+			}, [t("div", {
+				"aria-colspan": r.columnSpan,
+				class: "bb-table-expand__cell",
+				role: "cell"
+			}, n(r.slots, "expand", {
+				expandProps: i.expandProps,
+				expanded: i.expanded,
+				highlighted: i.highlighted,
+				item: i.item,
+				selected: e.selected,
+				toggleExpanded: i.toggleExpanded,
+				toggleHighlighted: i.toggleHighlighted,
+				toggleSelected: i.toggleSelected,
+				value: i.value
+			}))]);
+		};
+	}
+});
+//#endregion
+export { r as default };