@chelone/vue 0.6.0 → 0.9.0

package/dist/components/admin/list/record-timeline.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,104 @@
+import { useLocale } from "../../../i18n/use-locale.js";
+import { useTranslate } from "../../../i18n/use-translate.js";
+import { cn } from "../../../lib/utils.js";
+import { useListContext } from "../../../list/list-context.js";
+import { ClockIcon } from "./list-icons.js";
+import simple_list_loading_default from "./simple-list-loading.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref } from "vue";
+import { formatRelativeTime, toTimelineEntries } from "@chelone/core";
+// src/components/admin/list/record-timeline.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-entry-id"];
+var _hoisted_2 = {
+	"aria-hidden": "true",
+	class: "mt-0.5 shrink-0"
+};
+var _hoisted_3 = { class: "flex min-w-0 flex-1 flex-col gap-0.5" };
+var _hoisted_4 = { class: "text-sm" };
+var _hoisted_5 = { class: "flex flex-wrap gap-x-2 text-xs text-muted-foreground" };
+var _hoisted_6 = {
+	key: 0,
+	"data-slot": "record-timeline-user"
+};
+var _hoisted_7 = ["datetime", "title"];
+var record_timeline_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "record-timeline",
+	props: {
+		messageSource: {},
+		timestampSource: {},
+		userSource: {},
+		iconSource: {},
+		icons: {},
+		class: {}
+	},
+	setup(__props) {
+		/**
+		* `<RecordTimeline>` — the records of the ambient list as a dated activity
+		* list, one entry per record in list order. The Vue analog of
+		* `@chelone/react`'s `list/record-timeline.tsx`. It fetches nothing: put it in
+		* a `<ReferenceManyField>` or a `<List>`, whose `sort` sets the order. The
+		* relative time is computed at render and does not tick while the page stays
+		* open. The `loading` and `empty` slots replace `SimpleListLoading` and the
+		* translated "No activity yet".
+		*
+		* @example
+		* <ReferenceManyField
+		*   reference="events"
+		*   target="post_id"
+		*   :sort="{ field: 'at', order: 'DESC' }"
+		* >
+		*   <RecordTimeline message-source="message" timestamp-source="at" user-source="by" />
+		* </ReferenceManyField>
+		*/
+		const props = __props;
+		const translate = useTranslate();
+		const locale = useLocale();
+		const list = useListContext();
+		const timeline = computed(() => {
+			const now = /* @__PURE__ */ new Date();
+			return toTimelineEntries(list.data ?? [], {
+				messageSource: props.messageSource,
+				timestampSource: props.timestampSource,
+				userSource: props.userSource,
+				iconSource: props.iconSource
+			}).map((entry) => ({
+				...entry,
+				icon: iconFor(entry.icon),
+				time: entry.date === void 0 ? void 0 : {
+					iso: entry.date.toISOString(),
+					full: entry.date.toLocaleString(locale.value),
+					relative: formatRelativeTime(entry.date, now, locale.value)
+				}
+			}));
+		});
+		function iconFor(key) {
+			const { icons } = props;
+			return key !== void 0 && icons !== void 0 && Object.hasOwn(icons, key) && icons[key] || ClockIcon;
+		}
+		return (_ctx, _cache) => {
+			return unref(list).isPending ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [_ctx.$slots.loading ? renderSlot(_ctx.$slots, "loading", {}, void 0, void 0, 0) : (openBlock(), createBlock(simple_list_loading_default, {
+				key: 1,
+				class: normalizeClass(props.class)
+			}, null, 8, ["class"]))], 64)) : timeline.value.length === 0 ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [_ctx.$slots.empty ? renderSlot(_ctx.$slots, "empty", {}, void 0, void 0, 0) : (openBlock(), createElementBlock("p", {
+				key: 1,
+				"data-slot": "record-timeline-empty",
+				class: normalizeClass(unref(cn)("text-sm text-muted-foreground", props.class))
+			}, toDisplayString(unref(translate)("chelone.record_timeline.empty", { _: "No activity yet" })), 3))], 64)) : (openBlock(), createElementBlock("ol", {
+				key: 2,
+				"data-slot": "record-timeline",
+				class: normalizeClass(unref(cn)("flex flex-col", props.class))
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(timeline.value, (entry) => {
+				return openBlock(), createElementBlock("li", {
+					key: entry.id,
+					"data-slot": "record-timeline-entry",
+					"data-entry-id": entry.id,
+					class: "flex gap-3 py-2"
+				}, [createElementVNode("span", _hoisted_2, [(openBlock(), createBlock(resolveDynamicComponent(entry.icon), { class: "size-4 text-muted-foreground" }))]), createElementVNode("div", _hoisted_3, [createElementVNode("span", _hoisted_4, toDisplayString(entry.message), 1), createElementVNode("span", _hoisted_5, [entry.user !== void 0 ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(entry.user), 1)) : createCommentVNode("", true), entry.time ? (openBlock(), createElementBlock("time", {
+					key: 1,
+					datetime: entry.time.iso,
+					title: entry.time.full
+				}, toDisplayString(entry.time.relative), 9, _hoisted_7)) : createCommentVNode("", true)])])], 8, _hoisted_1);
+			}), 128))], 2));
+		};
+	}
+});
+export { record_timeline_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/admin/list/saved-queries-list.js

@@ -0,0 +1,4 @@
+import saved_queries_list_vue_vue_type_script_setup_true_lang_default from "./saved-queries-list.vue_vue_type_script_setup_true_lang.js";
+// src/components/admin/list/saved-queries-list.vue
+var saved_queries_list_default = saved_queries_list_vue_vue_type_script_setup_true_lang_default;
+export { saved_queries_list_default as default };

package/dist/components/admin/list/saved-queries-list.vue.d.ts

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

package/dist/components/admin/list/saved-queries-list.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,145 @@
+import { useTranslate } from "../../../i18n/use-translate.js";
+import { cn } from "../../../lib/utils.js";
+import { useListContext } from "../../../list/list-context.js";
+import { useRequiredResource } from "../../../resource-context.js";
+import { useSavedQueries } from "../../../store/use-saved-queries.js";
+import button_default from "../../ui/button.js";
+import input_default from "../../ui/input.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, renderList, toDisplayString, toRaw, unref, watch, withCtx, withModifiers } from "vue";
+import { isSavedQueryActive } from "@chelone/core";
+// src/components/admin/list/saved-queries-list.vue?vue&type=script&setup=true&lang.ts
+var saved_queries_list_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "saved-queries-list",
+	props: {
+		resource: {},
+		storeKey: {},
+		class: {}
+	},
+	setup(__props) {
+		/**
+		* `<SavedQueriesList>` — named filter/sort sets of the ambient `<List>`, the Vue
+		* analog of `@chelone/react`'s `list/saved-queries-list.tsx`. Apply one with a
+		* click, save the current one under a name, remove one. Place it among the list
+		* children.
+		*
+		* Chelone divergences from ra-core: no dialogs (the Vue package has no dialog
+		* primitive), the name is typed into an inline form; only a list with a filter
+		* set can be saved, so a sort-only query cannot.
+		*/
+		const props = __props;
+		const resource = useRequiredResource("SavedQueriesList", { resource: props.resource });
+		const list = useListContext();
+		const translate = useTranslate();
+		const { queries, save, remove } = useSavedQueries(resource, { storeKey: props.storeKey });
+		const naming = ref(false);
+		const name = ref("");
+		const t = (key, fallback, params = {}) => {
+			const out = translate(key, params);
+			return out === key ? fallback : out;
+		};
+		const removeLabel = (label) => t("ra.saved_queries.remove_label_with_name", `Remove saved query "${label}"`, { name: label });
+		const current = computed(() => ({
+			filter: toRaw(list.filter),
+			displayedFilters: toRaw(list.displayedFilters),
+			sort: toRaw(list.sort),
+			perPage: list.perPage
+		}));
+		const entries = computed(() => queries.value.map((query) => ({
+			...query,
+			active: isSavedQueryActive(query.value, current.value)
+		})));
+		const canSave = computed(() => Object.keys(list.filter).length > 0 && !entries.value.some((entry) => entry.active));
+		function apply(value, active) {
+			if (active) {
+				list.setParams({ filter: {} });
+				return;
+			}
+			list.setParams({
+				filter: value.filter,
+				displayedFilters: value.displayedFilters,
+				sort: value.sort,
+				perPage: value.perPage
+			});
+		}
+		function closeForm() {
+			naming.value = false;
+			name.value = "";
+		}
+		watch(canSave, (saveable) => {
+			if (!saveable) closeForm();
+		});
+		function submit() {
+			if (!canSave.value || !name.value.trim()) return;
+			save(name.value, current.value);
+			closeForm();
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				"data-slot": "saved-queries-list",
+				class: normalizeClass(unref(cn)("flex flex-wrap items-center gap-2", props.class))
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(entries.value, (query) => {
+				return openBlock(), createElementBlock("span", {
+					key: query.label,
+					class: "inline-flex items-center"
+				}, [createVNode(button_default, {
+					size: "sm",
+					variant: query.active ? "default" : "outline",
+					"aria-pressed": query.active,
+					onClick: ($event) => apply(query.value, query.active)
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(query.label), 1)]),
+					_: 2
+				}, 1032, [
+					"variant",
+					"aria-pressed",
+					"onClick"
+				]), createVNode(button_default, {
+					size: "icon",
+					variant: "ghost",
+					"aria-label": removeLabel(query.label),
+					onClick: ($event) => unref(remove)(query.label)
+				}, {
+					default: withCtx(() => [..._cache[2] || (_cache[2] = [createElementVNode("span", { "aria-hidden": "true" }, "×", -1)])]),
+					_: 1
+				}, 8, ["aria-label", "onClick"])]);
+			}), 128)), naming.value && canSave.value ? (openBlock(), createElementBlock("form", {
+				key: 0,
+				class: "flex items-center gap-2",
+				onSubmit: withModifiers(submit, ["prevent"])
+			}, [
+				createVNode(input_default, {
+					modelValue: name.value,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => name.value = $event),
+					type: "text",
+					class: "h-8 w-48",
+					"aria-label": t("ra.saved_queries.query_name", "Query name")
+				}, null, 8, ["modelValue", "aria-label"]),
+				createVNode(button_default, {
+					type: "submit",
+					size: "sm",
+					disabled: !name.value.trim()
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(t("ra.action.save", "Save")), 1)]),
+					_: 1
+				}, 8, ["disabled"]),
+				createVNode(button_default, {
+					variant: "ghost",
+					size: "sm",
+					onClick: closeForm
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(t("ra.action.cancel", "Cancel")), 1)]),
+					_: 1
+				})
+			], 32)) : canSave.value ? (openBlock(), createBlock(button_default, {
+				key: 1,
+				variant: "outline",
+				size: "sm",
+				onClick: _cache[1] || (_cache[1] = ($event) => naming.value = true)
+			}, {
+				default: withCtx(() => [createTextVNode(toDisplayString(t("ra.saved_queries.new_label", "Save current query")), 1)]),
+				_: 1
+			})) : createCommentVNode("", true)], 2);
+		};
+	}
+});
+export { saved_queries_list_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/admin/list/simple-list-item.js

@@ -0,0 +1,4 @@
+import simple_list_item_vue_vue_type_script_setup_true_lang_default from "./simple-list-item.vue_vue_type_script_setup_true_lang.js";
+// src/components/admin/list/simple-list-item.vue
+var simple_list_item_default = simple_list_item_vue_vue_type_script_setup_true_lang_default;
+export { simple_list_item_default as default };

package/dist/components/admin/list/simple-list-item.vue.d.ts

@@ -1,13 +1,7 @@
-/**
- * `<SimpleListItem>` — one `<li>` of a `<SimpleList>`: the row content, linked
- * to the record's edit or show page. The Vue analog of `@chelone/react`'s
- * `list/simple-list-item.tsx`. Provides the record to its content (so slotted
- * fields resolve it via `RecordContext`) and renders nothing without one.
- */
-import type { LooseRecord } from "@chelone/core";
+import type { LooseRecord, ResourceRecord } from "@chelone/core";
 /** Props for {@link SimpleListItem}. */
-export interface SimpleListItemProps {
-    record?: LooseRecord;
+export interface SimpleListItemProps<TRecord extends ResourceRecord = LooseRecord> {
+    record?: TRecord;
     /** Override the ambient `<Resource>`. Without one the row is not linked. */
     resource?: string;
     /**
@@ -18,16 +12,25 @@ export interface SimpleListItemProps {
     rowIndex?: number;
     class?: string;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SimpleListItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SimpleListItemProps> & Readonly<{}>, {
-    linkType: "edit" | "show" | false;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    default?: (props: {}) => any;
-} & {
-    default?: (props: {}) => any;
-}>;
+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<SimpleListItemProps<TRecord>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {}) => any;
+    } & {
+        default?: (props: {}) => any;
     };
+    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/simple-list-item.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,56 @@
+import { useResourceDefinition } from "../../../admin/resource-registry.js";
+import { cn } from "../../../lib/utils.js";
+import { provideRecordContext } from "../../../record/record-context.js";
+import { useResourceContext } from "../../../resource-context.js";
+import { useCreatePath } from "../../../router/nav-composables.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, defineComponent, normalizeClass, openBlock, renderSlot, toRef, unref, withCtx } from "vue";
+import { RouterLink } from "vue-router";
+// src/components/admin/list/simple-list-item.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-row-index"];
+var simple_list_item_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "simple-list-item",
+	props: {
+		record: {},
+		resource: {},
+		linkType: {
+			type: [String, Boolean],
+			default: void 0
+		},
+		rowIndex: {},
+		class: {}
+	},
+	setup(__props) {
+		/**
+		* `<SimpleListItem>` — one `<li>` of a `<SimpleList>`: the row content, linked
+		* to the record's edit or show page. The Vue analog of `@chelone/react`'s
+		* `list/simple-list-item.tsx`. Provides the record to its content (so slotted
+		* fields resolve it via `RecordContext`) and renders nothing without one.
+		*/
+		const props = __props;
+		provideRecordContext(toRef(props, "record"));
+		const resource = useResourceContext(props);
+		const createPath = useCreatePath();
+		const definition = useResourceDefinition(() => ({ resource }));
+		const type = computed(() => props.linkType ?? (definition.value.hasEdit ? "edit" : definition.value.hasShow ? "show" : false));
+		const to = computed(() => props.record && resource && type.value ? createPath({
+			resource,
+			id: props.record.id,
+			type: type.value
+		}) : void 0);
+		return (_ctx, _cache) => {
+			return __props.record ? (openBlock(), createElementBlock("li", {
+				key: 0,
+				"data-row-index": __props.rowIndex,
+				class: normalizeClass(to.value ? void 0 : props.class)
+			}, [to.value ? (openBlock(), createBlock(unref(RouterLink), {
+				key: 0,
+				to: to.value,
+				class: normalizeClass(unref(cn)("block", props.class))
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, ["to", "class"])) : renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 1)], 10, _hoisted_1)) : createCommentVNode("", true);
+		};
+	}
+});
+export { simple_list_item_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/admin/list/simple-list-loading.js

@@ -0,0 +1,4 @@
+import simple_list_loading_vue_vue_type_script_setup_true_lang_default from "./simple-list-loading.vue_vue_type_script_setup_true_lang.js";
+// src/components/admin/list/simple-list-loading.vue
+var simple_list_loading_default = simple_list_loading_vue_vue_type_script_setup_true_lang_default;
+export { simple_list_loading_default as default };

package/dist/components/admin/list/simple-list-loading.vue.d.ts

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

package/dist/components/admin/list/simple-list-loading.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,58 @@
+import { cn } from "../../../lib/utils.js";
+import skeleton_default from "../../ui/skeleton.js";
+import { useTimeout } from "../feedback/use-timeout.js";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, renderList, unref } from "vue";
+// src/components/admin/list/simple-list-loading.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex flex-1 flex-col gap-2" };
+var simple_list_loading_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "simple-list-loading",
+	props: {
+		class: {},
+		nbFakeLines: { default: 5 },
+		hasLeftAvatarOrIcon: { type: Boolean },
+		hasRightAvatarOrIcon: { type: Boolean },
+		hasSecondaryText: { type: Boolean },
+		hasTertiaryText: { type: Boolean }
+	},
+	setup(__props) {
+		/**
+		* `<SimpleListLoading>` — placeholder rows for a pending `<SimpleList>`, the
+		* Vue analog of `@chelone/react`'s `list/simple-list-loading.tsx`. Renders
+		* nothing for the first second so a fast response never flashes a skeleton.
+		*/
+		const props = __props;
+		const ready = useTimeout(1e3);
+		return (_ctx, _cache) => {
+			return unref(ready) ? (openBlock(), createElementBlock("ul", {
+				key: 0,
+				class: normalizeClass(unref(cn)("flex flex-col", props.class))
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(props.nbFakeLines, (index) => {
+				return openBlock(), createElementBlock("li", {
+					key: index,
+					class: "flex items-center gap-3 px-4 py-3"
+				}, [
+					__props.hasLeftAvatarOrIcon ? (openBlock(), createBlock(skeleton_default, {
+						key: 0,
+						class: "size-10 shrink-0 rounded-full"
+					})) : createCommentVNode("", true),
+					createElementVNode("div", _hoisted_1, [
+						createVNode(skeleton_default, { class: "h-4 w-2/3" }),
+						__props.hasSecondaryText ? (openBlock(), createBlock(skeleton_default, {
+							key: 0,
+							class: "h-3 w-1/2"
+						})) : createCommentVNode("", true),
+						__props.hasTertiaryText ? (openBlock(), createBlock(skeleton_default, {
+							key: 1,
+							class: "h-3 w-1/3"
+						})) : createCommentVNode("", true)
+					]),
+					__props.hasRightAvatarOrIcon ? (openBlock(), createBlock(skeleton_default, {
+						key: 1,
+						class: "size-6 shrink-0 rounded-full"
+					})) : createCommentVNode("", true)
+				]);
+			}), 128))], 2)) : createCommentVNode("", true);
+		};
+	}
+});
+export { simple_list_loading_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/admin/list/simple-list.js

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

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

@@ -1,4 +1,5 @@
-import type { Identifier, LooseRecord } from "@chelone/core";
+import type { VNode } from "vue";
+import type { Identifier, LooseRecord, ResourceRecord } from "@chelone/core";
 /** Props for {@link SimpleList}. */
 export interface SimpleListProps {
     /** Where each row links to; see `SimpleListItem`. */
@@ -6,27 +7,36 @@ export interface SimpleListProps {
     class?: string;
 }
 /** What each row slot of a `<SimpleList>` is given. */
-export interface SimpleListSlotProps {
-    record: LooseRecord;
+export interface SimpleListSlotProps<TRecord extends ResourceRecord = LooseRecord> {
+    record: TRecord;
     id: Identifier;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SimpleListProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SimpleListProps> & Readonly<{}>, {
-    linkType: "edit" | "show" | false;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    "primary-text"?(props: SimpleListSlotProps): unknown;
-    "secondary-text"?(props: SimpleListSlotProps): unknown;
-    "tertiary-text"?(props: SimpleListSlotProps): unknown;
-    "left-avatar"?(props: SimpleListSlotProps): unknown;
-    "left-icon"?(props: SimpleListSlotProps): unknown;
-    "right-icon"?(props: SimpleListSlotProps): unknown;
-    /** Rendered while the list is pending, in place of `SimpleListLoading`. */
-    loading?(): unknown;
-    /** Rendered with no records, in place of `ListNoResults`. */
-    empty?(): 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<SimpleListProps> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        "primary-text"?(props: SimpleListSlotProps<TRecord>): VNode[];
+        "secondary-text"?(props: SimpleListSlotProps<TRecord>): VNode[];
+        "tertiary-text"?(props: SimpleListSlotProps<TRecord>): VNode[];
+        "left-avatar"?(props: SimpleListSlotProps<TRecord>): VNode[];
+        "left-icon"?(props: SimpleListSlotProps<TRecord>): VNode[];
+        "right-icon"?(props: SimpleListSlotProps<TRecord>): VNode[];
+        /** Rendered while the list is pending, in place of `SimpleListLoading`. */
+        loading?(): VNode[];
+        /** Rendered with no records, in place of `ListNoResults`. */
+        empty?(): 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/simple-list.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,124 @@
+import { useListContext } from "../../../list/list-context.js";
+import { cn } from "../../../lib/utils.js";
+import { useResourceContext } from "../../../resource-context.js";
+import list_no_results_default from "./list-no-results.js";
+import simple_list_item_default from "./simple-list-item.js";
+import simple_list_loading_default from "./simple-list-loading.js";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderList, renderSlot, unref, withCtx } from "vue";
+// src/components/admin/list/simple-list.vue?vue&type=script&setup=true&lang.ts
+/**
+* `<SimpleList>` — the records of the ambient `<List>` as tappable rows, for
+* lists too narrow for a `<DataTable>`. The Vue analog of `@chelone/react`'s
+* `list/simple-list.tsx`. Where React takes render-prop functions, each part of
+* a row is a scoped slot given `{ record, id }`: `primary-text`,
+* `secondary-text`, `tertiary-text`, `left-avatar`, `left-icon` and
+* `right-icon`. The `loading` and `empty` slots replace `SimpleListLoading` and
+* `ListNoResults`.
+*
+* @example
+* <List>
+*   <SimpleList>
+*     <template #primary-text="{ record }">{{ record.title }}</template>
+*     <template #secondary-text="{ record }">{{ record.author }}</template>
+*   </SimpleList>
+* </List>
+*/
+var _hoisted_1 = {
+	key: 0,
+	class: "shrink-0"
+};
+var _hoisted_2 = { class: "flex min-w-0 flex-1 flex-col" };
+var _hoisted_3 = {
+	key: 0,
+	class: "truncate text-sm font-medium"
+};
+var _hoisted_4 = {
+	key: 1,
+	class: "truncate text-sm text-muted-foreground"
+};
+var _hoisted_5 = {
+	key: 2,
+	class: "truncate text-xs text-muted-foreground"
+};
+var _hoisted_6 = {
+	key: 1,
+	class: "shrink-0"
+};
+var simple_list_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "simple-list",
+	props: {
+		linkType: {
+			type: [String, Boolean],
+			default: void 0
+		},
+		class: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const list = useListContext();
+		const resource = useResourceContext();
+		return (_ctx, _cache) => {
+			return unref(list).isPending ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [_ctx.$slots.loading ? renderSlot(_ctx.$slots, "loading", {}, void 0, void 0, 0) : (openBlock(), createBlock(simple_list_loading_default, {
+				key: 1,
+				class: normalizeClass(props.class),
+				"has-left-avatar-or-icon": !!_ctx.$slots["left-icon"] || !!_ctx.$slots["left-avatar"],
+				"has-right-avatar-or-icon": !!_ctx.$slots["right-icon"],
+				"has-secondary-text": !!_ctx.$slots["secondary-text"],
+				"has-tertiary-text": !!_ctx.$slots["tertiary-text"]
+			}, null, 8, [
+				"class",
+				"has-left-avatar-or-icon",
+				"has-right-avatar-or-icon",
+				"has-secondary-text",
+				"has-tertiary-text"
+			]))], 64)) : !unref(list).data || unref(list).data.length === 0 ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [_ctx.$slots.empty ? renderSlot(_ctx.$slots, "empty", {}, void 0, void 0, 0) : (openBlock(), createBlock(list_no_results_default, { key: 1 }))], 64)) : (openBlock(), createElementBlock("ul", {
+				key: 2,
+				class: normalizeClass(unref(cn)("flex flex-col", props.class))
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(list).data, (record, rowIndex) => {
+				return openBlock(), createBlock(simple_list_item_default, {
+					key: record.id,
+					record,
+					resource: unref(resource),
+					"link-type": __props.linkType,
+					"row-index": rowIndex,
+					class: "flex items-center gap-3 px-4 py-3"
+				}, {
+					default: withCtx(() => [
+						_ctx.$slots["left-icon"] || _ctx.$slots["left-avatar"] ? (openBlock(), createElementBlock("div", _hoisted_1, [renderSlot(_ctx.$slots, "left-icon", {
+							record,
+							id: record.id
+						}), renderSlot(_ctx.$slots, "left-avatar", {
+							record,
+							id: record.id
+						})])) : createCommentVNode("", true),
+						createElementVNode("div", _hoisted_2, [
+							_ctx.$slots["primary-text"] ? (openBlock(), createElementBlock("span", _hoisted_3, [renderSlot(_ctx.$slots, "primary-text", {
+								record,
+								id: record.id
+							})])) : createCommentVNode("", true),
+							_ctx.$slots["secondary-text"] ? (openBlock(), createElementBlock("span", _hoisted_4, [renderSlot(_ctx.$slots, "secondary-text", {
+								record,
+								id: record.id
+							})])) : createCommentVNode("", true),
+							_ctx.$slots["tertiary-text"] ? (openBlock(), createElementBlock("span", _hoisted_5, [renderSlot(_ctx.$slots, "tertiary-text", {
+								record,
+								id: record.id
+							})])) : createCommentVNode("", true)
+						]),
+						_ctx.$slots["right-icon"] ? (openBlock(), createElementBlock("div", _hoisted_6, [renderSlot(_ctx.$slots, "right-icon", {
+							record,
+							id: record.id
+						})])) : createCommentVNode("", true)
+					]),
+					_: 2
+				}, 1032, [
+					"record",
+					"resource",
+					"link-type",
+					"row-index"
+				]);
+			}), 128))], 2));
+		};
+	}
+});
+export { simple_list_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/admin/list/single-field-list-record.js

@@ -0,0 +1,4 @@
+import single_field_list_record_vue_vue_type_script_setup_true_lang_default from "./single-field-list-record.vue_vue_type_script_setup_true_lang.js";
+// src/components/admin/list/single-field-list-record.vue
+var single_field_list_record_default = single_field_list_record_vue_vue_type_script_setup_true_lang_default;
+export { single_field_list_record_default as default };