@chelone/vue 0.6.0 → 0.9.0

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

@@ -1,30 +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: __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): unknown;
-}>;
+declare const _default: typeof __VLS_export;
 export default _default;
-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/calendar-week-view.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,119 @@
+import calendar_event_default from "./calendar-event.js";
+import { Fragment, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, onBeforeUnmount, openBlock, ref, renderList, renderSlot, toDisplayString, unref, withModifiers } from "vue";
+import { calendarDayKey, calendarEventsInHour } from "@chelone/core";
+// src/components/admin/list/calendar-week-view.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+var _hoisted_2 = {
+	role: "row",
+	class: "grid grid-cols-[4rem_repeat(7,minmax(0,1fr))]"
+};
+var _hoisted_3 = [
+	"data-date",
+	"data-today",
+	"aria-current"
+];
+var _hoisted_4 = {
+	role: "rowheader",
+	class: "px-2 py-1 text-right text-xs tabular-nums text-muted-foreground"
+};
+var _hoisted_5 = [
+	"data-date",
+	"data-hour",
+	"data-today",
+	"onClick"
+];
+var _hoisted_6 = { class: "flex flex-col gap-1" };
+var calendar_week_view_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "calendar-week-view",
+	props: {
+		days: {},
+		labels: {},
+		label: {},
+		events: {},
+		hrefFor: { type: Function },
+		isSelectable: { type: Function }
+	},
+	emits: ["selectEvent", "selectSlot"],
+	setup(__props, { emit: __emit }) {
+		/**
+		* `<CalendarWeekView>` — seven day columns by 24 hour rows. An event shows in
+		* the cell of its start hour only. Emits `select-event` with the record and
+		* `select-slot` with that hour when an empty cell is clicked; a click on an
+		* event never reaches the cell.
+		*/
+		const props = __props;
+		const emit = __emit;
+		const HOURS = Array.from({ length: 24 }, (_, hour) => hour);
+		const todayKey = ref(calendarDayKey(/* @__PURE__ */ new Date()));
+		let midnightTimer;
+		function scheduleMidnight() {
+			const now = /* @__PURE__ */ new Date();
+			const midnight = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
+			midnightTimer = setTimeout(() => {
+				todayKey.value = calendarDayKey(/* @__PURE__ */ new Date());
+				scheduleMidnight();
+			}, midnight.getTime() - now.getTime());
+		}
+		scheduleMidnight();
+		onBeforeUnmount(() => clearTimeout(midnightTimer));
+		const eventsIn = (day, hour) => calendarEventsInHour(props.events, day, hour);
+		function selectSlot(day, hour) {
+			const at = (h) => new Date(day.getFullYear(), day.getMonth(), day.getDate(), h).toISOString();
+			emit("selectSlot", {
+				startISO: at(hour),
+				endISO: at(hour + 1),
+				allDay: false
+			});
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				role: "grid",
+				"aria-label": __props.label,
+				"data-slot": "calendar-week"
+			}, [createElementVNode("div", _hoisted_2, [_cache[2] || (_cache[2] = createElementVNode("div", { "aria-hidden": "true" }, null, -1)), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.days, (day) => {
+				return openBlock(), createElementBlock("div", {
+					key: unref(calendarDayKey)(day),
+					role: "columnheader",
+					"data-date": unref(calendarDayKey)(day),
+					"data-today": unref(calendarDayKey)(day) === todayKey.value ? "" : void 0,
+					"aria-current": unref(calendarDayKey)(day) === todayKey.value ? "date" : void 0,
+					class: "px-2 py-1 text-center text-xs font-medium text-muted-foreground"
+				}, toDisplayString(__props.labels.weekday(day)) + " " + toDisplayString(__props.labels.dayNumber(day)), 9, _hoisted_3);
+			}), 128))]), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(HOURS), (hour) => {
+				return openBlock(), createElementBlock("div", {
+					key: hour,
+					role: "row",
+					class: "grid grid-cols-[4rem_repeat(7,minmax(0,1fr))]"
+				}, [createElementVNode("div", _hoisted_4, toDisplayString(__props.labels.hour(hour)), 1), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.days, (day) => {
+					return openBlock(), createElementBlock("div", {
+						key: unref(calendarDayKey)(day),
+						role: "gridcell",
+						"data-date": unref(calendarDayKey)(day),
+						"data-hour": hour,
+						"data-today": unref(calendarDayKey)(day) === todayKey.value ? "" : void 0,
+						class: "min-h-12 border-t border-l p-1 text-sm",
+						onClick: ($event) => selectSlot(day, hour)
+					}, [createElementVNode("ul", _hoisted_6, [(openBlock(true), createElementBlock(Fragment, null, renderList(eventsIn(day, hour), (event, index) => {
+						return openBlock(), createElementBlock("li", {
+							key: index,
+							onClick: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop"]))
+						}, [renderSlot(_ctx.$slots, "event", mergeProps({ ref_for: true }, {
+							...event,
+							day
+						}), () => [createVNode(calendar_event_default, {
+							event,
+							href: __props.hrefFor(event.record),
+							selectable: __props.isSelectable(event.record),
+							onSelect: _cache[0] || (_cache[0] = ($event) => emit("selectEvent", $event))
+						}, null, 8, [
+							"event",
+							"href",
+							"selectable"
+						])])]);
+					}), 128))])], 8, _hoisted_5);
+				}), 128))]);
+			}), 128))], 8, _hoisted_1);
+		};
+	}
+});
+export { calendar_week_view_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/admin/list/count-spinner.js

@@ -0,0 +1,4 @@
+import count_spinner_vue_vue_type_script_setup_true_lang_default from "./count-spinner.vue_vue_type_script_setup_true_lang.js";
+// src/components/admin/list/count-spinner.vue
+var count_spinner_default = count_spinner_vue_vue_type_script_setup_true_lang_default;
+export { count_spinner_default as default };

package/dist/components/admin/list/count-spinner.vue.d.ts

@@ -4,5 +4,6 @@ export interface CountSpinnerProps {
     timeout: number;
     class?: string;
 }
-declare const _default: import("vue").DefineComponent<CountSpinnerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CountSpinnerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: import("vue").DefineComponent<CountSpinnerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CountSpinnerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/admin/list/count-spinner.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,27 @@
+import spinner_default from "../../ui/spinner.js";
+import { useTimeout } from "../feedback/use-timeout.js";
+import { createBlock, createCommentVNode, defineComponent, normalizeClass, openBlock, unref } from "vue";
+// src/components/admin/list/count-spinner.vue?vue&type=script&setup=true&lang.ts
+var count_spinner_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "count-spinner",
+	props: {
+		timeout: {},
+		class: {}
+	},
+	setup(__props) {
+		/**
+		* The pending state of a `<Count>`: nothing until `timeout` ms after it mounts,
+		* then a spinner. `<Count>` mounts it per pending period, so every uncached load
+		* restarts the wait.
+		*/
+		const props = __props;
+		const timedOut = useTimeout(props.timeout);
+		return (_ctx, _cache) => {
+			return unref(timedOut) ? (openBlock(), createBlock(spinner_default, {
+				key: 0,
+				class: normalizeClass(props.class)
+			}, null, 8, ["class"])) : createCommentVNode("", true);
+		};
+	}
+});
+export { count_spinner_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/admin/list/count.js

@@ -0,0 +1,4 @@
+import count_vue_vue_type_script_setup_true_lang_default from "./count.vue_vue_type_script_setup_true_lang.js";
+// src/components/admin/list/count.vue
+var count_default = count_vue_vue_type_script_setup_true_lang_default;
+export { count_default as default };

package/dist/components/admin/list/count.vue.d.ts

@@ -11,7 +11,8 @@ export interface CountProps {
     timeout?: number;
     class?: string;
 }
-declare const _default: import("vue").DefineComponent<CountProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CountProps> & Readonly<{}>, {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<CountProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CountProps> & Readonly<{}>, {
     timeout: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/components/admin/list/count.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,76 @@
+import { useGetList } from "../../../data/queries.js";
+import { useTranslate } from "../../../i18n/use-translate.js";
+import { cn } from "../../../lib/utils.js";
+import { useResourceContext } from "../../../resource-context.js";
+import { useCreatePath } from "../../../router/nav-composables.js";
+import { CircleXIcon } from "../buttons/icons.js";
+import count_spinner_default from "./count-spinner.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, toDisplayString, unref, withCtx, withModifiers } from "vue";
+import { serializeListParams } from "@chelone/core";
+import { RouterLink } from "vue-router";
+// src/components/admin/list/count.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+var count_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "count",
+	props: {
+		resource: {},
+		filter: {},
+		sort: {},
+		link: { type: Boolean },
+		timeout: { default: 1e3 },
+		class: {}
+	},
+	setup(__props) {
+		/**
+		* `<Count>` — how many records of a resource match `filter`, read from the
+		* `total` of a one-row `getList` page. The Vue twin of `@chelone/react`'s
+		* `list/count.tsx`. Renders nothing when the provider returns no `total`; a `0`
+		* total renders as `0`. Throws when no resource is in scope.
+		*
+		* @example
+		* <Count resource="posts" :filter="{ status: 'draft' }" link />
+		*/
+		const props = __props;
+		const ambientResource = useResourceContext();
+		if (!props.resource && !ambientResource) throw new Error("<Count> components should be used inside a <Resource> component or provided the resource prop.");
+		const translate = useTranslate();
+		const createPath = useCreatePath();
+		const resource = computed(() => props.resource ?? ambientResource ?? "");
+		const { data, isPending, error } = useGetList(resource, computed(() => ({
+			filter: props.filter,
+			sort: props.sort,
+			pagination: {
+				page: 1,
+				perPage: 1
+			}
+		})));
+		const to = computed(() => `${createPath({
+			type: "list",
+			resource: resource.value
+		})}${serializeListParams({ filter: props.filter })}`);
+		return (_ctx, _cache) => {
+			return unref(isPending) ? (openBlock(), createBlock(count_spinner_default, {
+				key: 0,
+				timeout: __props.timeout,
+				class: normalizeClass(props.class)
+			}, null, 8, ["timeout", "class"])) : unref(error) ? (openBlock(), createElementBlock("span", {
+				key: 1,
+				role: "img",
+				"aria-label": unref(translate)("ra.notification.http_error", { _: "Error" }),
+				class: normalizeClass(unref(cn)("inline-flex text-destructive", props.class))
+			}, [createVNode(unref(CircleXIcon))], 10, _hoisted_1)) : unref(data)?.total != null ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [__props.link ? (openBlock(), createBlock(unref(RouterLink), {
+				key: 0,
+				to: to.value,
+				class: normalizeClass(unref(cn)("underline-offset-4 hover:underline", props.class)),
+				onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
+			}, {
+				default: withCtx(() => [createTextVNode(toDisplayString(unref(data).total), 1)]),
+				_: 1
+			}, 8, ["to", "class"])) : (openBlock(), createElementBlock("span", {
+				key: 1,
+				class: normalizeClass(props.class)
+			}, toDisplayString(unref(data).total), 3))], 64)) : createCommentVNode("", true);
+		};
+	}
+});
+export { count_vue_vue_type_script_setup_true_lang_default as default };

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

@@ -0,0 +1,4 @@
+import data_table_col_vue_vue_type_script_setup_true_lang_default from "./data-table-col.vue_vue_type_script_setup_true_lang.js";
+// src/components/admin/list/data-table-col.vue
+var data_table_col_default = data_table_col_vue_vue_type_script_setup_true_lang_default;
+export { data_table_col_default as default };

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

@@ -16,12 +16,13 @@ export interface DataTableColProps {
     /** Extra class for a body `<td>`, computed from its row record. */
     conditionalClass?: (record: LooseRecord) => string | false | undefined;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<DataTableColProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DataTableColProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DataTableColProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DataTableColProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {
         record: import("../../../index.js").RecordValue<LooseRecord>;
     }) => any;
 }>;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -0,0 +1,101 @@
+import { cn } from "../../../lib/utils.js";
+import { useListContext } from "../../../list/list-context.js";
+import { RecordContextKey } from "../../../record/record-context.js";
+import { useFieldValue } from "../../../record/use-field-value.js";
+import button_default from "../../ui/button.js";
+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, 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: {
+		source: {},
+		label: {},
+		class: {},
+		disableSort: { type: Boolean },
+		sortByOrder: {},
+		headerClass: {},
+		cellClass: {},
+		conditionalClass: { type: Function }
+	},
+	setup(__props) {
+		/**
+		* `<DataTableCol>` — one column of a `<DataTable>`, the Vue analog of
+		* `@chelone/react`'s `DataTable.Col`. It dispatches on the ambient render pass
+		* (see `data-table-context.ts`): in the HEADER pass it renders a `<th>` whose
+		* label is a sort button (unless the column has no `source` or sets
+		* `disableSort`); in the DATA pass it renders a `<td>` whose content is the
+		* default slot (called with `{ record }`, the Vue form of React's `render` prop)
+		* or — with no slot — the raw value at `source` off the record.
+		*/
+		const props = __props;
+		const pass = useDataTablePass();
+		const value = useFieldValue({ source: props.source ?? "" });
+		const recordRef = inject(RecordContextKey, null);
+		const record = computed(() => recordRef?.value);
+		const list = pass === "header" ? useListContext() : null;
+		const primarySort = computed(() => list?.sort[0]);
+		const isSorted = computed(() => !!props.source && primarySort.value?.field === props.source);
+		const isSortable = computed(() => !props.disableSort && !!props.source);
+		const ariaSort = computed(() => {
+			if (!isSorted.value) return void 0;
+			return primarySort.value?.order === "ASC" ? "ascending" : "descending";
+		});
+		function onSort() {
+			if (!list || !props.source) return;
+			const order = isSorted.value && primarySort.value ? primarySort.value.order === "ASC" ? "DESC" : "ASC" : props.sortByOrder ?? "ASC";
+			list.setSort({
+				field: props.source,
+				order
+			});
+		}
+		const cellText = computed(() => {
+			const raw = value.value;
+			return raw == null ? "" : typeof raw === "string" ? raw : String(raw);
+		});
+		const cellClasses = computed(() => cn(props.class, props.cellClass, record.value && props.conditionalClass?.(record.value)));
+		return (_ctx, _cache) => {
+			return unref(pass) === "header" ? (openBlock(), createBlock(unref(TableHead), {
+				key: 0,
+				class: normalizeClass(unref(cn)(props.class, __props.headerClass)),
+				"aria-sort": ariaSort.value
+			}, {
+				default: withCtx(() => [isSortable.value ? (openBlock(), createBlock(button_default, {
+					key: 0,
+					variant: "ghost",
+					size: "sm",
+					class: "-mx-2 h-8",
+					"data-field": __props.source,
+					onClick: onSort
+				}, {
+					default: withCtx(() => [createVNode(field_label_text_default, {
+						label: __props.label,
+						source: __props.source
+					}, null, 8, ["label", "source"]), isSorted.value ? (openBlock(), createBlock(unref(ChevronDownIcon), {
+						key: 0,
+						class: normalizeClass(primarySort.value?.order === "ASC" ? "rotate-180" : "")
+					}, null, 8, ["class"])) : createCommentVNode("", true)]),
+					_: 1
+				}, 8, ["data-field"])) : (openBlock(), createElementBlock("span", _hoisted_1, [createVNode(field_label_text_default, {
+					label: __props.label,
+					source: __props.source
+				}, null, 8, ["label", "source"])]))]),
+				_: 1
+			}, 8, ["class", "aria-sort"])) : (openBlock(), createBlock(unref(TableCell), {
+				key: 1,
+				class: normalizeClass(cellClasses.value)
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", { record: record.value }, () => [createTextVNode(toDisplayString(cellText.value), 1)])]),
+				_: 3
+			}, 8, ["class"]));
+		};
+	}
+});
+export { data_table_col_vue_vue_type_script_setup_true_lang_default as default };

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

@@ -1,39 +1,60 @@
-import { defineComponent, provide, onMounted, onUpdated, inject } from "vue";
-const DataTablePassKey = /* @__PURE__ */ Symbol(
-  "chelone-data-table-pass"
-);
+import { defineComponent, inject, onMounted, onUpdated, provide } from "vue";
+// src/components/admin/list/data-table-context.ts
+/** The provide/inject key for the current render pass (default `"data"`). */
+var DataTablePassKey = Symbol("chelone-data-table-pass");
+/** Read the ambient render pass (`"data"` when no provider is above). */
 function useDataTablePass() {
-  return inject(DataTablePassKey, "data");
+	return inject(DataTablePassKey, "data");
 }
-const PassProvider = defineComponent({
-  name: "DataTablePassProvider",
-  props: {
-    pass: { type: String, required: true }
-  },
-  setup(props, { slots }) {
-    provide(DataTablePassKey, props.pass);
-    return () => slots.default?.();
-  }
+/**
+* A renderless provider that stamps a render pass onto its slot content. Used by
+* `<DataTable>` to wrap the header render of the columns in `pass="header"`.
+*/
+var PassProvider = defineComponent({
+	name: "DataTablePassProvider",
+	props: { pass: {
+		type: String,
+		required: true
+	} },
+	setup(props, { slots }) {
+		provide(DataTablePassKey, props.pass);
+		return () => slots.default?.();
+	}
 });
-const ColumnsOutlet = defineComponent({
-  name: "DataTableColumnsOutlet",
-  props: {
-    render: { type: Function, required: true },
-    report: { type: Function, default: void 0 }
-  },
-  setup(props) {
-    onMounted(() => props.report?.());
-    onUpdated(() => props.report?.());
-    return () => props.render();
-  }
+/**
+* Renders the columns `<DataTable>` chose to show. A slot is called inside the
+* component that renders it, so the filter and reorder run in `render` here,
+* and a column added or a store write re-renders only this outlet.
+*
+* `report` runs after the outlet mounts and after each update, never during
+* render, so the header outlet can publish the declared columns without a
+* write in the render path.
+*/
+var ColumnsOutlet = defineComponent({
+	name: "DataTableColumnsOutlet",
+	props: {
+		render: {
+			type: Function,
+			required: true
+		},
+		report: {
+			type: Function,
+			default: void 0
+		}
+	},
+	setup(props) {
+		onMounted(() => props.report?.());
+		onUpdated(() => props.report?.());
+		return () => props.render();
+	}
 });
-const DataTableRowsKey = /* @__PURE__ */ Symbol(
-  "chelone-data-table-rows"
-);
-export {
-  ColumnsOutlet,
-  DataTablePassKey,
-  DataTableRowsKey,
-  PassProvider,
-  useDataTablePass
-};
+var DataTableRowsKey = Symbol("chelone-data-table-rows");
+/** 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-number-col.js

@@ -0,0 +1,4 @@
+import data_table_number_col_vue_vue_type_script_setup_true_lang_default from "./data-table-number-col.vue_vue_type_script_setup_true_lang.js";
+// src/components/admin/list/data-table-number-col.vue
+var data_table_number_col_default = data_table_number_col_vue_vue_type_script_setup_true_lang_default;
+export { data_table_number_col_default as default };

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

@@ -8,5 +8,6 @@ export interface DataTableNumberColProps extends Omit<DataTableColProps, "source
     /** `Intl.NumberFormatOptions` (currency, percent, fraction digits…). */
     options?: Intl.NumberFormatOptions;
 }
-declare const _default: import("vue").DefineComponent<DataTableNumberColProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DataTableNumberColProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: import("vue").DefineComponent<DataTableNumberColProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DataTableNumberColProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -0,0 +1,61 @@
+import { cn } from "../../../lib/utils.js";
+import number_field_default from "../fields/number-field.js";
+import data_table_col_default from "./data-table-col.js";
+import { createBlock, createVNode, defineComponent, normalizeClass, openBlock, unref, withCtx } from "vue";
+// src/components/admin/list/data-table-number-col.vue?vue&type=script&setup=true&lang.ts
+var data_table_number_col_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "data-table-number-col",
+	props: {
+		source: {},
+		locales: {},
+		options: {},
+		label: {},
+		class: {},
+		disableSort: { type: Boolean },
+		sortByOrder: {},
+		headerClass: {},
+		cellClass: {},
+		conditionalClass: { type: Function }
+	},
+	setup(__props) {
+		/**
+		* `<DataTableNumberCol>` — a right-aligned, number-formatted column, the Vue
+		* analog of `@chelone/react`'s `DataTable.NumberCol`: a `<DataTableCol>` whose
+		* cell is a `<NumberField>`.
+		*/
+		const props = __props;
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(data_table_col_default, {
+				source: __props.source,
+				label: __props.label,
+				class: normalizeClass(props.class),
+				"disable-sort": __props.disableSort,
+				"sort-by-order": __props.sortByOrder,
+				"header-class": unref(cn)("text-right", __props.headerClass),
+				"cell-class": unref(cn)("text-right", __props.cellClass),
+				"conditional-class": __props.conditionalClass
+			}, {
+				default: withCtx(() => [createVNode(number_field_default, {
+					source: __props.source,
+					locales: __props.locales,
+					options: __props.options
+				}, null, 8, [
+					"source",
+					"locales",
+					"options"
+				])]),
+				_: 1
+			}, 8, [
+				"source",
+				"label",
+				"class",
+				"disable-sort",
+				"sort-by-order",
+				"header-class",
+				"cell-class",
+				"conditional-class"
+			]);
+		};
+	}
+});
+export { data_table_number_col_vue_vue_type_script_setup_true_lang_default as default };