@chelone/vue 0.7.0 → 0.10.0

package/dist/components/admin/list/calendar-list.vue.d.ts

@@ -1,39 +1,17 @@
-/**
- * `<CalendarList>` — the records of the ambient `<List>` as events in a month
- * grid, or in a week of hour rows, or in an agenda. The Vue analog of `@chelone/react`'s `list/calendar-list.tsx`. It asks
- * the list for the visible range (and `perPage` records), so moving to another
- * month refetches; it removes that filter and restores `perPage` when it
- * unmounts. The filters the user set stay.
- *
- * Emits `select-event` with the record when an event is activated; with no
- * listener attached, the event navigates to the record's edit or show page.
- * Emits `select-slot` with `{ startISO, endISO, allDay }` when an empty part of
- * a day is clicked. With a `drop` listener attached, month-view events can be
- * dragged to another day; `drop` carries the record and its new `{ start, end? }`
- * as ISO strings and the list is not updated. A promise the listener returns is
- * the caller's to handle. The `#event` slot replaces an event and the `#header` slot
- * the title and navigation.
- *
- * @example
- * <List>
- *   <CalendarList start-source="starts_at" end-source="ends_at" title-source="name" />
- * </List>
- */
-import { type LooseRecord } from "@chelone/core";
 import { type VNode } from "vue";
 import { type CalendarEventSlotProps, type CalendarDrop, type CalendarSlot } from "./calendar-month-view.vue.js";
-import type { CalendarRange, CalendarView, CalendarWeekStart, SourceProp } from "@chelone/core";
+import type { CalendarRange, CalendarView, CalendarWeekStart, LooseRecord, ResourceRecord, SourceProp } from "@chelone/core";
 import type { CalendarNavigateDirection } from "./calendar-header.vue.js";
 /** Props for {@link CalendarList}. */
-export interface CalendarListProps {
+export interface CalendarListProps<TRecord extends ResourceRecord = LooseRecord> {
     /** The field holding the start of an event; a dotted path reads a nested value. */
-    startSource: SourceProp;
+    startSource: SourceProp<TRecord>;
     /** The field holding the end. An event with none, or one before its start, covers its start day only. */
-    endSource?: SourceProp;
+    endSource?: SourceProp<TRecord>;
     /** The string field shown as the event title; the record representation otherwise. */
-    titleSource?: SourceProp;
+    titleSource?: SourceProp<TRecord>;
     /** The field whose value picks a color from `colorMap`. */
-    colorSource?: SourceProp;
+    colorSource?: SourceProp<TRecord>;
     colorMap?: Record<string, string>;
     /** The view shown first. Default `month`. */
     defaultView?: CalendarView;
@@ -74,33 +52,28 @@ export interface CalendarHeaderSlotProps {
 }
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<CalendarListProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    drop: (record: LooseRecord, range: CalendarDrop) => any;
-    selectEvent: (record: LooseRecord) => any;
-    selectSlot: (slot: CalendarSlot) => any;
-}, string, import("vue").PublicProps, Readonly<CalendarListProps> & Readonly<{
-    onDrop?: ((record: LooseRecord, range: CalendarDrop) => any) | undefined;
-    onSelectEvent?: ((record: LooseRecord) => any) | undefined;
-    onSelectSlot?: ((slot: CalendarSlot) => any) | undefined;
-}>, {
-    perPage: number;
-    linkType: false | "edit" | "show";
-    titleSource: string;
-    views: CalendarView[];
-    endSource: string;
-    colorSource: string;
-    colorMap: Record<string, string>;
-    defaultView: CalendarView;
-    weekStartsOn: CalendarWeekStart;
-    rangeFilter: (range: CalendarRange) => Record<string, unknown>;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    /** Replaces an event in its day cell. */
-    event?(props: CalendarEventSlotProps): VNode[];
-    /** Replaces the title and the navigation. */
-    header?(props: CalendarHeaderSlotProps): VNode[];
-}>;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
+declare const __VLS_export: <TRecord extends ResourceRecord = LooseRecord>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<CalendarListProps<TRecord> & {
+        onDrop?: ((record: TRecord, range: CalendarDrop) => any) | undefined;
+        onSelectEvent?: ((record: TRecord) => any) | undefined;
+        onSelectSlot?: ((slot: CalendarSlot) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        /** Replaces an event in its day cell. */
+        event?(props: CalendarEventSlotProps<TRecord>): VNode[];
+        /** Replaces the title and the navigation. */
+        header?(props: CalendarHeaderSlotProps): VNode[];
     };
+    emit: ((evt: "drop", record: TRecord, range: CalendarDrop) => void) & ((evt: "selectEvent", record: TRecord) => void) & ((evt: "selectSlot", slot: CalendarSlot) => void);
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/admin/list/calendar-list.vue_vue_type_script_setup_true_lang.js

@@ -10,7 +10,7 @@ import calendar_header_default from "./calendar-header.js";
 import calendar_month_view_default from "./calendar-month-view.js";
 import calendar_week_view_default from "./calendar-week-view.js";
 import { computed, createBlock, createElementBlock, createSlots, defineComponent, getCurrentInstance, guardReactiveProps, normalizeClass, normalizeProps, onBeforeUnmount, openBlock, ref, renderSlot, unref, watch, withCtx } from "vue";
-import { calendarDays, calendarLabels, calendarRange, calendarRangeFilter, shiftCalendarAnchor, staleCalendarRangeKeys, toCalendarEvents } from "@chelone/core";
+import { DEFAULT_PER_PAGE, calendarDays, calendarLabels, calendarRange, calendarRangeFilter, shiftCalendarAnchor, staleCalendarRangeKeys, toCalendarEvents } from "@chelone/core";
 // src/components/admin/list/calendar-list.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["aria-busy"];
 var calendar_list_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
@@ -109,18 +109,22 @@ var calendar_list_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 		const labels = computed(() => calendarLabels(locale.value));
 		const title = computed(() => labels.value.title(view.value, anchor.value, range.value));
 		const weekdays = computed(() => days.value.slice(0, 7).map((day) => labels.value.weekday(day)));
+		const pathOf = (source) => {
+			return source;
+		};
+		const pathOfOptional = (source) => source === void 0 ? void 0 : pathOf(source);
 		const events = computed(() => toCalendarEvents(list.data ?? [], {
-			startSource: props.startSource,
-			endSource: props.endSource,
-			titleSource: props.titleSource,
-			colorSource: props.colorSource,
+			startSource: pathOf(props.startSource),
+			endSource: pathOfOptional(props.endSource),
+			titleSource: pathOfOptional(props.titleSource),
+			colorSource: pathOfOptional(props.colorSource),
 			colorMap: props.colorMap,
 			getTitle: getRepresentation
 		}));
 		const rangeValue = computed(() => props.rangeFilter ? props.rangeFilter(range.value) : calendarRangeFilter(props.startSource, range.value, props.endSource));
 		const rangeStartISO = computed(() => range.value.start.toISOString());
 		const rangeEndISO = computed(() => range.value.end.toISOString());
-		const originalPerPage = list.perPage === props.perPage ? list.defaultPerPage ?? 10 : list.perPage;
+		const originalPerPage = list.perPage === props.perPage ? list.defaultPerPage ?? DEFAULT_PER_PAGE : list.perPage;
 		let appliedKeys = [];
 		const without = (filter, keys) => Object.fromEntries(Object.entries(filter).filter(([key]) => !keys.includes(key)));
 		const staleKeys = computed(() => props.rangeFilter ? [] : staleCalendarRangeKeys(props.startSource, props.endSource));
@@ -151,11 +155,11 @@ var calendar_list_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 			});
 		});
 		const type = computed(() => props.linkType ?? (definition.value.hasEdit ? "edit" : definition.value.hasShow ? "show" : false));
-		const linkTo = (record) => resource && type.value ? createPath({
+		const linkTo = (record) => !resource || type.value === false ? void 0 : createPath({
 			resource,
 			id: record.id,
 			type: type.value
-		}) : void 0;
+		});
 		const hrefFor = (record) => hasListener() ? void 0 : linkTo(record);
 		const isSelectable = (record) => hasListener() || linkTo(record) !== void 0;
 		function onSelectEvent(record) {

package/dist/components/admin/list/calendar-month-view.vue.d.ts

@@ -1,7 +1,7 @@
 import { type VNode } from "vue";
-import type { CalendarEvent, LooseRecord } from "@chelone/core";
+import type { CalendarEvent, LooseRecord, ResourceRecord } from "@chelone/core";
 /** What the `#event` slot of a `<CalendarList>` receives: the event and the day cell it renders in. */
-export interface CalendarEventSlotProps extends CalendarEvent<LooseRecord> {
+export interface CalendarEventSlotProps<TRecord extends ResourceRecord = LooseRecord> extends CalendarEvent<TRecord> {
     day: Date;
 }
 /** The time span `select-slot` reports. */
@@ -16,7 +16,7 @@ export interface CalendarDrop {
     end?: string;
 }
 /** Props for {@link CalendarMonthView}. */
-export interface CalendarMonthViewProps {
+export interface CalendarMonthViewProps<TRecord extends ResourceRecord = LooseRecord> {
     /** Every day of the grid, whole weeks, in order. */
     days: Date[];
     /** Its month decides which days are outside the month. */
@@ -25,29 +25,35 @@ export interface CalendarMonthViewProps {
     weekdays: string[];
     /** The label of the grid. */
     label: string;
-    events: CalendarEvent<LooseRecord>[];
+    events: CalendarEvent<TRecord>[];
     /** The link an event is, when it navigates. */
-    hrefFor: (record: LooseRecord) => string | undefined;
+    hrefFor: (record: TRecord) => string | undefined;
     /** Whether activating the event does anything: it is inert otherwise. */
-    isSelectable: (record: LooseRecord) => boolean;
+    isSelectable: (record: TRecord) => boolean;
     /** Whether events can be dragged to another day. */
     draggable?: boolean;
 }
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<CalendarMonthViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    drop: (record: LooseRecord, range: CalendarDrop) => any;
-    selectEvent: (record: LooseRecord) => any;
-    selectSlot: (slot: CalendarSlot) => any;
-}, string, import("vue").PublicProps, Readonly<CalendarMonthViewProps> & Readonly<{
-    onDrop?: ((record: LooseRecord, range: CalendarDrop) => any) | undefined;
-    onSelectEvent?: ((record: LooseRecord) => any) | undefined;
-    onSelectSlot?: ((slot: CalendarSlot) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    event?(props: CalendarEventSlotProps): VNode[];
-}>;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
+declare const __VLS_export: <TRecord extends ResourceRecord = LooseRecord>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<CalendarMonthViewProps<TRecord> & {
+        onDrop?: ((record: TRecord, range: CalendarDrop) => any) | undefined;
+        onSelectEvent?: ((record: TRecord) => any) | undefined;
+        onSelectSlot?: ((slot: CalendarSlot) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        event?(props: CalendarEventSlotProps<TRecord>): VNode[];
     };
+    emit: ((evt: "drop", record: TRecord, range: CalendarDrop) => void) & ((evt: "selectEvent", record: TRecord) => void) & ((evt: "selectSlot", slot: CalendarSlot) => void);
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/admin/list/calendar-month-view.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,6 @@
 import { cn } from "../../../lib/utils.js";
 import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createTextVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, unref, withCtx, withModifiers } from "vue";
-import { calendarDayKey, calendarEventsOnDay, moveCalendarEvent } from "@chelone/core";
+import { calendarDayKey, calendarDaySlot, calendarEventsOnDay, moveCalendarEvent } from "@chelone/core";
 // src/components/admin/list/calendar-month-view.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["aria-label"];
 var _hoisted_2 = {
@@ -67,11 +67,7 @@ var calendar_month_view_vue_vue_type_script_setup_true_lang_default = /*@__PURE_
 		onBeforeUnmount(() => clearTimeout(midnightTimer));
 		const eventsOn = (day) => calendarEventsOnDay(props.events, day);
 		function selectSlot(day) {
-			emit("selectSlot", {
-				startISO: new Date(day.getFullYear(), day.getMonth(), day.getDate()).toISOString(),
-				endISO: new Date(day.getFullYear(), day.getMonth(), day.getDate(), 23, 59, 59, 999).toISOString(),
-				allDay: true
-			});
+			emit("selectSlot", calendarDaySlot(day));
 		}
 		function onEventClick(event, record) {
 			if (!props.isSelectable(record)) return;

package/dist/components/admin/list/calendar-week-view.vue.d.ts

@@ -1,32 +1,39 @@
 import { type VNode } from "vue";
 import type { CalendarEventSlotProps, CalendarSlot } from "./calendar-month-view.vue.js";
-import type { CalendarEvent, CalendarLabels, LooseRecord } from "@chelone/core";
+import type { CalendarEvent, CalendarLabels, LooseRecord, ResourceRecord } from "@chelone/core";
 /** Props for {@link CalendarWeekView}. */
-export interface CalendarWeekViewProps {
+export interface CalendarWeekViewProps<TRecord extends ResourceRecord = LooseRecord> {
     /** The seven days of the week, in order. */
     days: Date[];
     labels: CalendarLabels;
     /** The label of the grid. */
     label: string;
-    events: CalendarEvent<LooseRecord>[];
+    events: CalendarEvent<TRecord>[];
     /** The link an event is, when it navigates. */
-    hrefFor: (record: LooseRecord) => string | undefined;
+    hrefFor: (record: TRecord) => string | undefined;
     /** Whether activating the event does anything: it is inert otherwise. */
-    isSelectable: (record: LooseRecord) => boolean;
+    isSelectable: (record: TRecord) => boolean;
 }
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<CalendarWeekViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    selectEvent: (record: LooseRecord) => any;
-    selectSlot: (slot: CalendarSlot) => any;
-}, string, import("vue").PublicProps, Readonly<CalendarWeekViewProps> & Readonly<{
-    onSelectEvent?: ((record: LooseRecord) => any) | undefined;
-    onSelectSlot?: ((slot: CalendarSlot) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    event?(props: CalendarEventSlotProps): VNode[];
-}>;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
+declare const __VLS_export: <TRecord extends ResourceRecord = LooseRecord>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<CalendarWeekViewProps<TRecord> & {
+        onSelectEvent?: ((record: TRecord) => any) | undefined;
+        onSelectSlot?: ((slot: CalendarSlot) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        event?(props: CalendarEventSlotProps<TRecord>): VNode[];
     };
+    emit: ((evt: "selectEvent", record: TRecord) => void) & ((evt: "selectSlot", slot: CalendarSlot) => void);
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/admin/list/data-table-col.vue_vue_type_script_setup_true_lang.js

@@ -7,8 +7,12 @@ import { TableCell, TableHead } from "../../ui/table.js";
 import { ChevronDownIcon } from "../buttons/icons.js";
 import field_label_text_default from "../common/field-label-text.js";
 import { useDataTablePass } from "./data-table-context.js";
-import { computed, createBlock, createCommentVNode, createTextVNode, createVNode, defineComponent, inject, normalizeClass, openBlock, renderSlot, toDisplayString, unref, withCtx } from "vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, inject, normalizeClass, openBlock, renderSlot, toDisplayString, unref, withCtx } from "vue";
 // src/components/admin/list/data-table-col.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 1,
+	class: "text-xs"
+};
 var data_table_col_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "data-table-col",
 	props: {
@@ -67,7 +71,7 @@ var data_table_col_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 					key: 0,
 					variant: "ghost",
 					size: "sm",
-					class: "-mx-3 h-8",
+					class: "-mx-2 h-8",
 					"data-field": __props.source,
 					onClick: onSort
 				}, {
@@ -79,11 +83,10 @@ var data_table_col_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 						class: normalizeClass(primarySort.value?.order === "ASC" ? "rotate-180" : "")
 					}, null, 8, ["class"])) : createCommentVNode("", true)]),
 					_: 1
-				}, 8, ["data-field"])) : (openBlock(), createBlock(field_label_text_default, {
-					key: 1,
+				}, 8, ["data-field"])) : (openBlock(), createElementBlock("span", _hoisted_1, [createVNode(field_label_text_default, {
 					label: __props.label,
 					source: __props.source
-				}, null, 8, ["label", "source"]))]),
+				}, null, 8, ["label", "source"])]))]),
 				_: 1
 			}, 8, ["class", "aria-sort"])) : (openBlock(), createBlock(unref(TableCell), {
 				key: 1,

package/dist/components/admin/list/data-table-context.d.ts

@@ -12,7 +12,7 @@
  * against its own outlet's provider — the standard "renderless provider wrapping
  * slot content" pattern.
  */
-import type { CreatePathType, Identifier, LooseRecord } from "@chelone/core";
+import type { CreatePathType, Identifier, LooseRecord, ResourceRecord } from "@chelone/core";
 import { type InjectionKey, type PropType, type Ref, type VNode } from "vue";
 /** Which pass a `<DataTableCol>` is rendering in. */
 export type DataTablePass = "header" | "data";
@@ -70,19 +70,22 @@ export declare const ColumnsOutlet: import("vue").DefineComponent<import("vue").
     report: () => void;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 /** What a row click does: a link type, `"expand"`, `"toggleSelection"` or nothing. */
-export type DataTableRowClick = "edit" | "show" | "expand" | "toggleSelection" | false | ((record: LooseRecord, id: Identifier) => CreatePathType | "expand" | "toggleSelection" | false);
+export type DataTableRowClick<TRecord extends ResourceRecord = LooseRecord> = "edit" | "show" | "expand" | "toggleSelection" | false | ((record: TRecord, id: Identifier) => CreatePathType | "expand" | "toggleSelection" | false);
 /**
  * Row behaviour `<DataTable>` shares with its `<DataTableRow>`s. The expanded
  * ids live in `<DataTable>` so the header's expand-all button and every row's
  * toggle act on the same state.
  */
-export interface DataTableRowsContext {
-    rowClick: Ref<DataTableRowClick>;
+export interface DataTableRowsContext<TRecord extends ResourceRecord = LooseRecord> {
+    rowClick: Ref<DataTableRowClick<TRecord>>;
     /** True when the `#expand` slot is passed. */
     expandEnabled: Ref<boolean>;
     expandedIds: Ref<Identifier[]>;
     toggleExpand: (id: Identifier) => void;
     /** Whether the record can expand (true when no `isRowExpandable` is set). */
-    canExpand: (record: LooseRecord) => boolean;
+    canExpand: (record: TRecord) => boolean;
 }
-export declare const DataTableRowsKey: InjectionKey<DataTableRowsContext>;
+/** Publish the table's row behaviour to its rows, typed at the table's record. */
+export declare function provideDataTableRows<TRecord extends ResourceRecord>(context: DataTableRowsContext<TRecord>): void;
+/** The ambient table's row behaviour, or `null` outside a `<DataTable>`. */
+export declare function useDataTableRows<TRecord extends ResourceRecord = LooseRecord>(): DataTableRowsContext<TRecord> | null;

package/dist/components/admin/list/data-table-context.js

@@ -49,4 +49,12 @@ var ColumnsOutlet = defineComponent({
 	}
 });
 var DataTableRowsKey = Symbol("chelone-data-table-rows");
-export { ColumnsOutlet, DataTablePassKey, DataTableRowsKey, PassProvider, useDataTablePass };
+/** Publish the table's row behaviour to its rows, typed at the table's record. */
+function provideDataTableRows(context) {
+	provide(DataTableRowsKey, context);
+}
+/** The ambient table's row behaviour, or `null` outside a `<DataTable>`. */
+function useDataTableRows() {
+	return inject(DataTableRowsKey, null);
+}
+export { ColumnsOutlet, DataTablePassKey, PassProvider, provideDataTableRows, useDataTablePass, useDataTableRows };

package/dist/components/admin/list/data-table-row.vue.d.ts

@@ -12,23 +12,27 @@
  * checkbox bound to the ambient list selection (`selectedIds` / `toggleItem`);
  * toggling it stops propagation so it never triggers the row-click navigation.
  */
-import type { LooseRecord } from "@chelone/core";
-type __VLS_Props = {
-    record: LooseRecord;
-    hasBulkActions?: boolean;
-};
-declare const __VLS_template: () => {
-    __VLS_Slots: {
+import type { LooseRecord, ResourceRecord } from "@chelone/core";
+declare const __VLS_export: <TRecord extends ResourceRecord = LooseRecord>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<{
+        record: TRecord;
+        hasBulkActions?: boolean;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
         default?: (props: {}) => any;
     };
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
-type __VLS_Slots = ReturnType<typeof __VLS_template>['__VLS_Slots'];
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/admin/list/data-table-row.vue_vue_type_script_setup_true_lang.js

@@ -1,15 +1,15 @@
 import { useListContext } from "../../../list/list-context.js";
-import { RecordContextKey } from "../../../record/record-context.js";
+import { provideRecordContext } from "../../../record/record-context.js";
 import { useResourceContext } from "../../../resource-context.js";
 import { useRouterAdapterOptional } from "../../../router/adapter.js";
 import { useCreatePath } from "../../../router/nav-composables.js";
 import button_default from "../../ui/button.js";
 import checkbox_default from "../../ui/checkbox.js";
 import { TableCell, TableRow } from "../../ui/table.js";
-import { DataTablePassKey, DataTableRowsKey } from "./data-table-context.js";
+import { DataTablePassKey, useDataTableRows } from "./data-table-context.js";
 import { ChevronDownIcon } from "../buttons/icons.js";
 import { ChevronRightIcon } from "./list-icons.js";
-import { computed, createBlock, createCommentVNode, createVNode, defineComponent, inject, normalizeClass, openBlock, provide, ref, renderSlot, unref, watch, withCtx, withModifiers } from "vue";
+import { computed, createBlock, createCommentVNode, createVNode, defineComponent, normalizeClass, openBlock, provide, renderSlot, unref, withCtx, withModifiers } from "vue";
 // src/components/admin/list/data-table-row.vue?vue&type=script&setup=true&lang.ts
 var data_table_row_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "data-table-row",
@@ -33,11 +33,7 @@ var data_table_row_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 		* toggling it stops propagation so it never triggers the row-click navigation.
 		*/
 		const props = __props;
-		const recordRef = ref(props.record);
-		watch(() => props.record, (next) => {
-			recordRef.value = next;
-		});
-		provide(RecordContextKey, recordRef);
+		provideRecordContext(computed(() => props.record));
 		provide(DataTablePassKey, "data");
 		const list = useListContext();
 		const recordId = computed(() => props.record.id);
@@ -50,7 +46,7 @@ var data_table_row_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 		const resource = useResourceContext();
 		const navigate = adapter?.useNavigate();
 		const createPath = adapter ? useCreatePath() : void 0;
-		const rows = inject(DataTableRowsKey, null);
+		const rows = useDataTableRows();
 		const link = computed(() => {
 			const rowClick = rows?.rowClick.value ?? "edit";
 			return typeof rowClick === "function" ? rowClick(props.record, recordId.value) : rowClick;

package/dist/components/admin/list/data-table.vue.d.ts

@@ -1,7 +1,13 @@
-import type { Identifier, LooseRecord } from "@chelone/core";
+import { type VNode } from "vue";
+import type { Identifier, LooseRecord, ResourceRecord } from "@chelone/core";
 import type { DataTableRowClick } from "./data-table-context.js";
-/** Props for {@link DataTable}. */
-export interface DataTableProps {
+/**
+ * Props for {@link DataTable}. A caller of `h()` with loosely typed callbacks
+ * writes `h(DataTable<LooseRecord>, ...)`: `h()` resolves a generic component
+ * to its constraint, `ResourceRecord`, which refuses a `(record: LooseRecord)`
+ * callback.
+ */
+export interface DataTableProps<TRecord extends ResourceRecord = LooseRecord> {
     class?: string;
     /** Enable row selection + the bulk-actions toolbar (also on if a `#bulkActions` slot is passed). */
     bulkActions?: boolean;
@@ -12,13 +18,13 @@ export interface DataTableProps {
      * `"toggleSelection"`, `false` (inert), or a function of `(record, id)`
      * returning one of those or any other link type (`false` = do nothing).
      */
-    rowClick?: DataTableRowClick;
+    rowClick?: DataTableRowClick<TRecord>;
     /** Allow only one expanded row at a time (also hides the expand-all button). */
     expandSingle?: boolean;
     /** Which records can expand; a rejected row gets no toggle. All can by default. */
-    isRowExpandable?: (record: LooseRecord) => boolean;
+    isRowExpandable?: (record: TRecord) => boolean;
     /** A class for a body row, computed from its record and index. */
-    rowClass?: (record: LooseRecord, rowIndex: number) => string | false | undefined;
+    rowClass?: (record: TRecord, rowIndex: number) => string | false | undefined;
     /**
      * The store key of the hidden column ids; the order and the published
      * columns are kept under keys derived from it. Defaults to
@@ -30,22 +36,28 @@ export interface DataTableProps {
 }
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DataTableProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DataTableProps> & Readonly<{}>, {
-    pagination: boolean;
-    bulkActions: boolean;
-    rowClick: DataTableRowClick;
-    expandSingle: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    expand?: (props: {
-        id: Identifier;
-        record: LooseRecord;
-        resource: string;
-    }) => any;
-} & {
-    bulkActions?: (props: {}) => any;
-}>;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
+declare const __VLS_export: <TRecord extends ResourceRecord = LooseRecord>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<DataTableProps<TRecord>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: () => VNode[];
+        /** Under an expanded row, given the row's record. */
+        expand?: (props: {
+            id: Identifier;
+            record: TRecord;
+            resource: string;
+        }) => VNode[];
+        bulkActions?: () => VNode[];
     };
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/admin/list/data-table.vue_vue_type_script_setup_true_lang.js

@@ -6,11 +6,11 @@ import checkbox_default from "../../ui/checkbox.js";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../ui/table.js";
 import bulk_actions_toolbar_default from "./bulk-actions-toolbar.js";
 import button_default from "../../ui/button.js";
-import { ColumnsOutlet, DataTableRowsKey, PassProvider } from "./data-table-context.js";
+import { ColumnsOutlet, PassProvider, provideDataTableRows } from "./data-table-context.js";
 import data_table_row_default from "./data-table-row.js";
 import { ChevronsUpDownIcon } from "./list-icons.js";
 import list_pagination_default from "./list-pagination.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, provide, ref, renderList, renderSlot, unref, useSlots, withCtx, withModifiers } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, renderList, renderSlot, unref, useSlots, withCtx, withModifiers } from "vue";
 import { arrangeColumns, defaultDataTableStoreKey, getDataTableColumnId } from "@chelone/core";
 // src/components/admin/list/data-table.vue?vue&type=script&setup=true&lang.ts
 var data_table_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
@@ -72,7 +72,7 @@ var data_table_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 			if (expandedIds.value.includes(id)) expandedIds.value = expandedIds.value.filter((x) => x !== id);
 			else expandedIds.value = props.expandSingle ? [id] : [...expandedIds.value, id];
 		}
-		provide(DataTableRowsKey, {
+		provideDataTableRows({
 			rowClick: computed(() => props.rowClick),
 			expandEnabled,
 			expandedIds,
@@ -225,10 +225,7 @@ var data_table_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					})]),
 					_: 3
 				}),
-				__props.pagination ? (openBlock(), createBlock(list_pagination_default, {
-					key: 0,
-					class: "mt-2"
-				})) : createCommentVNode("", true),
+				__props.pagination ? (openBlock(), createBlock(list_pagination_default, { key: 0 })) : createCommentVNode("", true),
 				hasBulkActions.value ? (openBlock(), createBlock(bulk_actions_toolbar_default, { key: 1 }, {
 					default: withCtx(() => [renderSlot(_ctx.$slots, "bulkActions")]),
 					_: 3

package/dist/components/admin/list/list-pagination.vue_vue_type_script_setup_true_lang.js

@@ -7,7 +7,7 @@ import { ChevronLeftIcon, ChevronRightIcon } from "./list-icons.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, renderList, toDisplayString, unref, watch, withCtx } from "vue";
 // src/components/admin/list/list-pagination.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "hidden md:flex items-center gap-x-2" };
-var _hoisted_2 = { class: "text-sm font-medium" };
+var _hoisted_2 = { class: "text-sm font-medium whitespace-nowrap" };
 var _hoisted_3 = {
 	class: "text-sm text-muted-foreground",
 	"data-slot": "page-range"
@@ -125,7 +125,7 @@ var list_pagination_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		return (_ctx, _cache) => {
 			return !hidden.value ? (openBlock(), createElementBlock("div", {
 				key: 0,
-				class: normalizeClass(unref(cn)("flex items-center justify-end gap-x-2 gap-4", props.class)),
+				class: normalizeClass(unref(cn)("mt-2 flex items-center justify-end gap-x-2 gap-4", props.class)),
 				"data-slot": "list-pagination"
 			}, [
 				createElementVNode("div", _hoisted_1, [createElementVNode("p", _hoisted_2, toDisplayString(rowsPerPageLabel.value), 1), createVNode(native_select_default, {