@chelone/vue 0.6.0 → 0.9.0

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

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

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

@@ -12,20 +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 var __VLS_44: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_44) => any;
-};
-declare const __VLS_component: 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 _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
-export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
+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>>;
 };
+declare const _default: typeof __VLS_export;
+export default _default;
+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

@@ -0,0 +1,120 @@
+import { useListContext } from "../../../list/list-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, useDataTableRows } from "./data-table-context.js";
+import { ChevronDownIcon } from "../buttons/icons.js";
+import { ChevronRightIcon } from "./list-icons.js";
+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",
+	props: {
+		record: {},
+		hasBulkActions: { type: Boolean }
+	},
+	setup(__props) {
+		/**
+		* `<DataTableRow>` — one body row of a `<DataTable>`, the Vue analog of
+		* `@chelone/react`'s `DataTableRow`. It provides the row's record (so slotted
+		* field/`<DataTableCol>` children resolve it via `RecordContext`) and stamps the
+		* `"data"` render pass, then renders the columns inside a `<TableRow>`.
+		*
+		* Row-click navigation to the record's edit page is wired when a router adapter
+		* is present (mirrors the React twin's `rowClick="edit"` default); without one
+		* the row is inert (unit tests, no router).
+		*
+		* Selection (V3-b): when `hasBulkActions` is set the row renders a leading
+		* checkbox bound to the ambient list selection (`selectedIds` / `toggleItem`);
+		* toggling it stops propagation so it never triggers the row-click navigation.
+		*/
+		const props = __props;
+		provideRecordContext(computed(() => props.record));
+		provide(DataTablePassKey, "data");
+		const list = useListContext();
+		const recordId = computed(() => props.record.id);
+		const isSelected = computed(() => list.selectedIds?.includes(recordId.value) ?? false);
+		function onToggleSelect() {
+			if (recordId.value == null) return;
+			list.toggleItem(recordId.value);
+		}
+		const adapter = useRouterAdapterOptional();
+		const resource = useResourceContext();
+		const navigate = adapter?.useNavigate();
+		const createPath = adapter ? useCreatePath() : void 0;
+		const rows = useDataTableRows();
+		const link = computed(() => {
+			const rowClick = rows?.rowClick.value ?? "edit";
+			return typeof rowClick === "function" ? rowClick(props.record, recordId.value) : rowClick;
+		});
+		const expandable = computed(() => !!rows?.expandEnabled.value && rows.canExpand(props.record));
+		const isExpanded = computed(() => rows?.expandedIds.value.includes(recordId.value) ?? false);
+		const clickable = computed(() => {
+			if (link.value === false) return false;
+			if (link.value === "expand") return expandable.value;
+			if (link.value === "toggleSelection") return true;
+			return !!adapter;
+		});
+		function onRowClick() {
+			if (!clickable.value || recordId.value == null) return;
+			if (link.value === "expand") return rows?.toggleExpand(recordId.value);
+			if (link.value === "toggleSelection") return onToggleSelect();
+			if (!navigate || !createPath || !resource || !link.value) return;
+			navigate(createPath({
+				type: link.value,
+				resource,
+				id: recordId.value
+			}));
+		}
+		function onToggleExpand() {
+			if (recordId.value != null) rows?.toggleExpand(recordId.value);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(TableRow), {
+				class: normalizeClass(clickable.value ? "cursor-pointer" : ""),
+				"data-slot": "data-table-row",
+				onClick: onRowClick
+			}, {
+				default: withCtx(() => [
+					__props.hasBulkActions ? (openBlock(), createBlock(unref(TableCell), {
+						key: 0,
+						class: "w-8",
+						onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
+					}, {
+						default: withCtx(() => [createVNode(checkbox_default, {
+							"model-value": isSelected.value,
+							"aria-label": "Select row",
+							"onUpdate:modelValue": onToggleSelect
+						}, null, 8, ["model-value"])]),
+						_: 1
+					})) : createCommentVNode("", true),
+					unref(rows)?.expandEnabled.value ? (openBlock(), createBlock(unref(TableCell), {
+						key: 1,
+						class: "w-8 p-0"
+					}, {
+						default: withCtx(() => [expandable.value ? (openBlock(), createBlock(button_default, {
+							key: 0,
+							variant: "ghost",
+							size: "icon",
+							class: "size-7",
+							"aria-label": isExpanded.value ? "Collapse row" : "Expand row",
+							"aria-expanded": isExpanded.value,
+							onClick: withModifiers(onToggleExpand, ["stop"])
+						}, {
+							default: withCtx(() => [isExpanded.value ? (openBlock(), createBlock(unref(ChevronDownIcon), { key: 0 })) : (openBlock(), createBlock(unref(ChevronRightIcon), { key: 1 }))]),
+							_: 1
+						}, 8, ["aria-label", "aria-expanded"])) : createCommentVNode("", true)]),
+						_: 1
+					})) : createCommentVNode("", true),
+					renderSlot(_ctx.$slots, "default")
+				]),
+				_: 3
+			}, 8, ["class"]);
+		};
+	}
+});
+export { data_table_row_vue_vue_type_script_setup_true_lang_default as default };

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

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

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
@@ -28,23 +34,30 @@ export interface DataTableProps {
     /** Column ids hidden until a choice is stored. */
     defaultHiddenColumns?: string[];
 }
-declare const _default: __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;
-}>;
+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<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

@@ -0,0 +1,237 @@
+import { flattenVNodes, keyByColumnId } from "../../../lib/vnode-children.js";
+import { useListContext } from "../../../list/list-context.js";
+import { useDataTableColumns } from "../../../list/use-data-table-columns.js";
+import { useResourceContext } from "../../../resource-context.js";
+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, 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, 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({
+	__name: "data-table",
+	props: {
+		class: {},
+		bulkActions: {
+			type: Boolean,
+			default: false
+		},
+		pagination: {
+			type: Boolean,
+			default: true
+		},
+		rowClick: {
+			type: [
+				String,
+				Boolean,
+				Function
+			],
+			default: "edit"
+		},
+		expandSingle: {
+			type: Boolean,
+			default: false
+		},
+		isRowExpandable: {},
+		rowClass: {},
+		storeKey: {},
+		defaultHiddenColumns: {}
+	},
+	setup(__props) {
+		/**
+		* `<DataTable>` — a table over the ambient list surface, the Vue analog of
+		* `@chelone/react`'s `list/data-table.tsx`. Reads `useListContext` (published by
+		* `<List>`), renders a header row from the `<DataTableCol>` children (in the
+		* `"header"` pass) and one `<DataTableRow>` per record (each providing the row
+		* record + the `"data"` pass).
+		*
+		* Selection + pagination (V3-b): when bulk actions are enabled — the
+		* `:bulk-actions` prop is set OR a `#bulkActions` slot is passed — a leading
+		* select-all/select-row checkbox column is added and a `<BulkActionsToolbar>`
+		* (carrying the `#bulkActions` slot) is rendered below the table; it surfaces on
+		* selection. `<ListPagination>` renders below the table by default (opt out with
+		* `:pagination="false"`). Both read the SAME ambient `useListContext`.
+		*
+		* Column API (mirrors React's `DataTable.Col`): pass `<DataTableCol>` children.
+		* The named export `DataTableCol` is the Vue equivalent of `DataTable.Col`.
+		*/
+		const props = __props;
+		const slots = useSlots();
+		const list = useListContext();
+		const hasBulkActions = computed(() => props.bulkActions || slots.bulkActions != null);
+		const resource = useResourceContext();
+		const expandEnabled = computed(() => slots.expand != null);
+		const expandedIds = ref([]);
+		const canExpand = (record) => props.isRowExpandable?.(record) ?? true;
+		function toggleExpand(id) {
+			if (expandedIds.value.includes(id)) expandedIds.value = expandedIds.value.filter((x) => x !== id);
+			else expandedIds.value = props.expandSingle ? [id] : [...expandedIds.value, id];
+		}
+		provideDataTableRows({
+			rowClick: computed(() => props.rowClick),
+			expandEnabled,
+			expandedIds,
+			toggleExpand,
+			canExpand
+		});
+		const rows = computed(() => list.data ?? []);
+		const isEmpty = computed(() => !list.isPending && rows.value.length === 0);
+		const rowId = (record) => record.id;
+		const rowKey = (record) => String(record.id);
+		const selectableIds = computed(() => rows.value.map((r) => r.id));
+		const allSelected = computed(() => {
+			const selected = list.selectedIds ?? [];
+			return selected.length > 0 && selectableIds.value.length > 0 && selectableIds.value.every((id) => selected.includes(id));
+		});
+		const anyExpanded = computed(() => rows.value.some((r) => expandedIds.value.includes(rowId(r))));
+		function handleToggleExpandAll() {
+			expandedIds.value = anyExpanded.value ? [] : rows.value.filter(canExpand).map(rowId);
+		}
+		const columnProps = (node) => node.props ?? {};
+		const { hidden, order, publish } = useDataTableColumns({
+			storeKey: () => props.storeKey ?? defaultDataTableStoreKey(resource ?? ""),
+			defaultHiddenColumns: () => props.defaultHiddenColumns
+		});
+		const declare = (nodes, ids) => {
+			const defaults = props.defaultHiddenColumns ?? [];
+			const seen = /* @__PURE__ */ new Set();
+			const declared = [];
+			nodes.forEach((node, index) => {
+				const id = ids[index];
+				if (id === void 0 || seen.has(id)) return;
+				seen.add(id);
+				const { source, label } = columnProps(node);
+				declared.push({
+					id,
+					...typeof source === "string" && { source },
+					...typeof label === "string" && { label },
+					defaultHidden: defaults.includes(id)
+				});
+			});
+			return declared;
+		};
+		let declaredColumns = [];
+		function arrangedColumns() {
+			const nodes = flattenVNodes(slots.default?.() ?? []);
+			const ids = nodes.map((node) => getDataTableColumnId(columnProps(node)));
+			declaredColumns = declare(nodes, ids);
+			const shown = arrangeColumns(ids, {
+				hidden: hidden.value,
+				order: order.value
+			});
+			return keyByColumnId(nodes, ids, shown);
+		}
+		const reportColumns = () => publish(declaredColumns);
+		const columnCount = () => arrangedColumns().length + (hasBulkActions.value ? 1 : 0) + (expandEnabled.value ? 1 : 0);
+		function handleToggleSelectAll(checked) {
+			const selected = list.selectedIds ?? [];
+			if (checked) list.select(selected.concat(selectableIds.value.filter((id) => !selected.includes(id))));
+			else list.select(selected.filter((id) => !selectableIds.value.includes(id)));
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(props.class),
+				"data-slot": "data-table"
+			}, [
+				createVNode(unref(Table), null, {
+					default: withCtx(() => [createVNode(unref(TableHeader), null, {
+						default: withCtx(() => [createVNode(unref(TableRow), null, {
+							default: withCtx(() => [
+								hasBulkActions.value ? (openBlock(), createBlock(unref(TableHead), {
+									key: 0,
+									class: "w-8"
+								}, {
+									default: withCtx(() => [createVNode(checkbox_default, {
+										"model-value": allSelected.value,
+										"aria-label": "Select all rows on this page",
+										"onUpdate:modelValue": handleToggleSelectAll
+									}, null, 8, ["model-value"])]),
+									_: 1
+								})) : createCommentVNode("", true),
+								expandEnabled.value ? (openBlock(), createBlock(unref(TableHead), {
+									key: 1,
+									class: "w-8"
+								}, {
+									default: withCtx(() => [!__props.expandSingle ? (openBlock(), createBlock(button_default, {
+										key: 0,
+										variant: "ghost",
+										size: "icon",
+										class: "size-7",
+										"aria-label": anyExpanded.value ? "Collapse all rows" : "Expand all rows",
+										onClick: withModifiers(handleToggleExpandAll, ["stop"])
+									}, {
+										default: withCtx(() => [createVNode(unref(ChevronsUpDownIcon))]),
+										_: 1
+									}, 8, ["aria-label"])) : createCommentVNode("", true)]),
+									_: 1
+								})) : createCommentVNode("", true),
+								createVNode(unref(PassProvider), { pass: "header" }, {
+									default: withCtx(() => [createVNode(unref(ColumnsOutlet), {
+										render: () => arrangedColumns(),
+										report: reportColumns
+									}, null, 8, ["render"])]),
+									_: 1
+								})
+							]),
+							_: 1
+						})]),
+						_: 1
+					}), createVNode(unref(TableBody), null, {
+						default: withCtx(() => [unref(list).isPending ? (openBlock(), createBlock(unref(TableRow), { key: 0 }, {
+							default: withCtx(() => [createVNode(unref(TableCell), { "data-slot": "data-table-loading" }, {
+								default: withCtx(() => [..._cache[0] || (_cache[0] = [createTextVNode("Loading…", -1)])]),
+								_: 1
+							})]),
+							_: 1
+						})) : isEmpty.value ? (openBlock(), createBlock(unref(TableRow), { key: 1 }, {
+							default: withCtx(() => [createVNode(unref(TableCell), { "data-slot": "data-table-empty" }, {
+								default: withCtx(() => [..._cache[1] || (_cache[1] = [createTextVNode("No results found.", -1)])]),
+								_: 1
+							})]),
+							_: 1
+						})) : (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList(rows.value, (record, index) => {
+							return openBlock(), createElementBlock(Fragment, { key: rowKey(record) }, [createVNode(data_table_row_default, {
+								record,
+								"has-bulk-actions": hasBulkActions.value,
+								class: normalizeClass(__props.rowClass?.(record, index) || void 0)
+							}, {
+								default: withCtx(() => [createVNode(unref(ColumnsOutlet), { render: () => arrangedColumns() }, null, 8, ["render"])]),
+								_: 1
+							}, 8, [
+								"record",
+								"has-bulk-actions",
+								"class"
+							]), expandEnabled.value && canExpand(record) && expandedIds.value.includes(rowId(record)) ? (openBlock(), createBlock(unref(TableRow), {
+								key: 0,
+								"data-slot": "data-table-expand-panel"
+							}, {
+								default: withCtx(() => [createVNode(unref(TableCell), { colspan: columnCount() }, {
+									default: withCtx(() => [renderSlot(_ctx.$slots, "expand", {
+										id: rowId(record),
+										record,
+										resource: unref(resource) ?? ""
+									})]),
+									_: 2
+								}, 1032, ["colspan"])]),
+								_: 2
+							}, 1024)) : createCommentVNode("", true)], 64);
+						}), 128))]),
+						_: 3
+					})]),
+					_: 3
+				}),
+				__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
+				})) : createCommentVNode("", true)
+			], 2);
+		};
+	}
+});
+export { data_table_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/admin/list/filter-form.js

@@ -0,0 +1,4 @@
+import filter_form_vue_vue_type_script_setup_true_lang_default from "./filter-form.vue_vue_type_script_setup_true_lang.js";
+// src/components/admin/list/filter-form.vue
+var filter_form_default = filter_form_vue_vue_type_script_setup_true_lang_default;
+export { filter_form_default as default };

package/dist/components/admin/list/filter-form.vue.d.ts

@@ -18,10 +18,11 @@ export interface FilterFormProps {
      */
     filters?: FilterFormEntry[];
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<FilterFormProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FilterFormProps> & 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<FilterFormProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FilterFormProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/components/admin/list/filter-form.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,108 @@
+import { useTranslate } from "../../../i18n/use-translate.js";
+import { useForm } from "../../../form/use-form.js";
+import { useListContext } from "../../../list/list-context.js";
+import { useResourceContext } from "../../../resource-context.js";
+import { MinusCircleIcon } from "./list-icons.js";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, mergeProps, openBlock, renderList, renderSlot, resolveDynamicComponent, unref, watch, withModifiers } from "vue";
+import { filterFormReflectShape, getAtPath, getFilterFormValues, mergeFilterValues } from "@chelone/core";
+// src/components/admin/list/filter-form.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-source"];
+var _hoisted_2 = ["title", "onClick"];
+var filter_form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "filter-form",
+	props: {
+		resource: {},
+		filters: {}
+	},
+	setup(__props) {
+		/**
+		* `<FilterForm>` — an inline, live-updating filter form, the Vue analog of
+		* `@chelone/react`'s `list/filter-form.tsx` FUSED with its `FilterLiveForm`
+		* substrate. React threads filter inputs through `cloneElement` + a shown-filter
+		* selector; Vue has no `cloneElement`, so this collapses to the essential
+		* FilterLiveForm contract: it owns a local `useForm` seeded from the current
+		* list filter, `provide`s that form so slotted filter inputs (`<TextInput>` …)
+		* bind to it via `useInput`, and pushes every value change into the ambient list
+		* surface through `setFilters(values, undefined, true)` — core owns the
+		* debounce, so keystrokes coalesce into one refetch.
+		*
+		* Divergences from the React twin (deliberate): entries are declared as
+		* `{ source, component, props }` in the `filters` prop rather than cloned
+		* elements, and inputs the author slots in always render after them. A `resource` prop sources the form's default schema
+		* (else the ambient `<Resource>`); validation never gates anything (the form is
+		* never submitted — its values are read live).
+		*/
+		const props = __props;
+		const list = useListContext();
+		const resource = props.resource ?? useResourceContext();
+		const translate = useTranslate();
+		function assertNoAlwaysOnDefault() {
+			for (const entry of props.filters ?? []) if (entry.alwaysOn && entry.defaultValue) throw new Error("Cannot use alwaysOn and defaultValue on a filter input. Please use useListController({ filterDefaultValues }) instead.");
+		}
+		assertNoAlwaysOnDefault();
+		watch(() => props.filters, assertNoAlwaysOnDefault);
+		function isEmptyValue(value) {
+			if (value === "" || value == null) return true;
+			if (typeof value === "object") return Object.values(value).every(isEmptyValue);
+			return false;
+		}
+		function isShown(entry) {
+			return !!entry.alwaysOn || !!list.displayedFilters?.[entry.source] || !isEmptyValue(getAtPath(list.filter, entry.source));
+		}
+		const { form, values, reset } = useForm({
+			resource,
+			recordForm: false,
+			record: { ...list.filter ?? {} },
+			onSubmit: () => void 0
+		});
+		let isReflecting = false;
+		let pendingPush = null;
+		watch(() => values.value, (next) => {
+			if (isReflecting) return;
+			const merged = mergeFilterValues(list.filter ?? {}, next);
+			const json = JSON.stringify(merged);
+			if (json === (pendingPush ?? JSON.stringify(list.filter ?? {}))) return;
+			pendingPush = json;
+			list.setFilters(merged, void 0, true);
+		}, {
+			deep: true,
+			flush: "sync"
+		});
+		watch(() => list.filter, () => {
+			pendingPush = null;
+			const incoming = list.filter ?? {};
+			const current = form.store.state.values;
+			const next = getFilterFormValues(filterFormReflectShape(current, form.store.state.fieldMeta, incoming), incoming);
+			if (JSON.stringify(next) === JSON.stringify(current)) return;
+			isReflecting = true;
+			try {
+				reset(next);
+			} finally {
+				isReflecting = false;
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("form", {
+				"data-slot": "filter-form",
+				class: "flex flex-col sm:flex-row justify-start items-end gap-x-2 gap-y-3 flex-wrap",
+				onSubmit: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"]))
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.filters, (entry) => {
+				return openBlock(), createElementBlock(Fragment, { key: entry.source }, [isShown(entry) ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: "filter-field flex flex-row gap-2 relative w-full sm:w-auto",
+					"data-source": entry.source
+				}, [(openBlock(), createBlock(resolveDynamicComponent(entry.component), mergeProps({
+					source: entry.source,
+					label: entry.label
+				}, { ref_for: true }, entry.props), null, 16, ["source", "label"])), !entry.alwaysOn ? (openBlock(), createElementBlock("button", {
+					key: 0,
+					type: "button",
+					class: "hide-filter inline-flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-md mt-auto hover:bg-accent hover:text-accent-foreground",
+					title: unref(translate)("ra.action.remove_filter", { _: "Remove filter" }),
+					onClick: ($event) => unref(list).hideFilter(entry.source)
+				}, [createVNode(unref(MinusCircleIcon))], 8, _hoisted_2)) : createCommentVNode("", true)], 8, _hoisted_1)) : createCommentVNode("", true)], 64);
+			}), 128)), renderSlot(_ctx.$slots, "default")], 32);
+		};
+	}
+});
+export { filter_form_vue_vue_type_script_setup_true_lang_default as default };

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

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

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

@@ -14,12 +14,13 @@ export interface FilterListItemProps {
     toggleFilter?: (value: FilterPayload, filters: FilterPayload) => FilterPayload;
     class?: string;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<FilterListItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FilterListItemProps> & 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<FilterListItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FilterListItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     icon?: (props: {}) => any;
 } & {
     label?: (props: {}) => any;
 }>;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;