@mittwald/flow-remote-vue-components 0.0.0-stage → 1.5.0-next.35

package/dist/js/remote-vue-components/src/list/List.mjs

@@ -0,0 +1,292 @@
+import { composition } from "../lib/composition.mjs";
+import { useComponentUsage } from "../composables/useComponentUsage.mjs";
+import { ActionGroup } from "../auto-generated/ActionGroup.mjs";
+import { Button } from "../auto-generated/Button.mjs";
+import { Div } from "../auto-generated/Div.mjs";
+import { ListEmptyViewContainer } from "../auto-generated/ListEmptyViewContainer.mjs";
+import { ListSummary } from "../auto-generated/ListSummary.mjs";
+import watchMobxValue from "../lib/mobxSelector.mjs";
+import { applyChildRules, flattenChildren, withContextProps, withSlotContent } from "../overlays/childProps.mjs";
+import { Action } from "../components/Action.mjs";
+import { provideListModel } from "./listContext.mjs";
+import { ListComposableBatchLoader } from "./ComposableLoader.mjs";
+import { className, listStyles } from "./styles.mjs";
+import { Footer } from "./Footer.mjs";
+import { LightBoxTrigger, ModalTrigger, PopoverTrigger } from "../overlays/triggers.mjs";
+import { Header } from "./Header.mjs";
+import { Items } from "./Items.mjs";
+import { ListTableView } from "./Table.mjs";
+import { ListModel } from "./model.mjs";
+import { useListSettings } from "./settings.mjs";
+import { ListFilter, ListItem, ListLoaderAsync, ListLoaderComposable, ListSearch, ListSorting, ListStaticData, ListTable, ListTableBody, ListTableCell, ListTableColumn, ListTableHeader, ListTableRow, findSetup, findSetups, isListSetupComponent } from "./setupComponents.mjs";
+import { computed, defineComponent, h, onBeforeUnmount, onMounted, watch } from "vue";
+//#region src/list/List.ts
+var passesContextOn = /* @__PURE__ */ new Set([
+	Action,
+	ModalTrigger,
+	PopoverTrigger,
+	LightBoxTrigger
+]);
+var headerActionRules = (child) => child.type === Button ? { props: { class: listStyles.headerAction } } : passesContextOn.has(child.type) ? { children: headerActionRules } : void 0;
+/**
+* Where the children that are not setup elements go — Flow's props context for
+* the `List`: an `ActionGroup` into the header, a `ListSummary` above the
+* items, anything else where it was written.
+*/
+var arrangeChildren = (children) => {
+	const actions = [];
+	const summary = [];
+	const rest = [];
+	for (const child of flattenChildren(children)) {
+		if (isListSetupComponent(child.type)) continue;
+		if (child.type === ActionGroup) actions.push(withSlotContent(withContextProps(child, {
+			preserveOrder: true,
+			class: listStyles.headerActions
+		}), (rendered) => applyChildRules(rendered, headerActionRules)));
+		else if (child.type === ListSummary) summary.push(child);
+		else rest.push(child);
+	}
+	return {
+		actions,
+		summary,
+		rest
+	};
+};
+/**
+* Reads the list's configuration off the elements inside it.
+*
+* The same shape Flow's React list takes, assembled the same way: the children
+* are the API, so `<ListFilter>` and `<ListSorting>` describe the list rather
+* than rendering anything.
+*/
+var readShape = (children, props) => {
+	const staticData = findSetup(children, ListStaticData);
+	const asyncLoader = findSetup(children, ListLoaderAsync);
+	const composableLoader = findSetup(children, ListLoaderComposable);
+	const dynamicLoader = asyncLoader ?? composableLoader;
+	const item = findSetup(children, ListItem);
+	const search = findSetup(children, ListSearch);
+	const columns = findSetups(children, ListTableColumn);
+	if (columns.length === 0 && findSetup(children, ListTable)) throw new Error("<ListTable> was given no columns. Write <ListTableColumn> and <ListTableCell> as direct children of <List>, not inside <ListTable> — the list reads its own children and does not walk into them.");
+	return {
+		staticData: staticData?.props.data,
+		asyncLoader: asyncLoader?.props.loader,
+		dependencies: asyncLoader?.props.dependencies,
+		composableLoader: composableLoader?.props.loader,
+		manualPagination: dynamicLoader?.props.manualPagination,
+		manualFiltering: dynamicLoader?.props.manualFiltering,
+		manualSorting: dynamicLoader?.props.manualSorting,
+		filters: findSetups(children, ListFilter).map((f) => f.props),
+		sorting: findSetups(children, ListSorting).map((s) => s.props),
+		search: search ? search.props : void 0,
+		itemView: item ? {
+			render: item.render ? (data) => item.render?.({ data }) : void 0,
+			textValue: item.props.textValue,
+			href: item.props.href,
+			target: item.props.target,
+			defaultExpanded: item.props.defaultExpanded,
+			showList: item.props.showList ?? true,
+			showTiles: item.props.showTiles,
+			tileMaxWidth: item.props.tileMaxWidth ?? 230
+		} : void 0,
+		settings: props.settings,
+		table: columns.length > 0 ? {
+			props: findSetup(children, ListTable)?.props ?? {},
+			headerProps: findSetup(children, ListTableHeader)?.props ?? {},
+			bodyProps: findSetup(children, ListTableBody)?.props ?? {},
+			rowProps: findSetup(children, ListTableRow)?.props ?? {},
+			columns: columns.map((column) => ({
+				props: column.props,
+				render: column.render ? () => column.render?.({}) : void 0
+			})),
+			cells: findSetups(children, ListTableCell).map((cell) => ({
+				props: cell.props,
+				render: cell.render ? (data) => cell.render?.({ data }) : void 0
+			}))
+		} : void 0,
+		componentProps: {
+			selectionMode: props.selectionMode,
+			selectionBehavior: props.selectionBehavior,
+			selectedKeys: props.selectedKeys,
+			defaultSelectedKeys: props.defaultSelectedKeys,
+			disabledKeys: props.disabledKeys,
+			disallowEmptySelection: props.disallowEmptySelection,
+			onSelectionChange: props.onSelectionChange
+		},
+		accordion: props.accordion,
+		batchSize: props.batchSize,
+		loadingItemsCount: props.loadingItemsCount,
+		getItemId: props.getItemId,
+		defaultViewMode: props.defaultViewMode,
+		onAction: props.onAction,
+		"aria-label": props["aria-label"],
+		"aria-labelledby": props["aria-labelledby"]
+	};
+};
+/**
+* Flow's `List`, rebuilt in Vue.
+*
+* `List` is a React composition rather than a remote element, so there is
+* nothing to generate — but everything it _decides_ now lives in
+* `@mittwald/flow-components-base` and is shared with React. What is written
+* here is the arrangement: which remote elements the host is asked for, and the
+* one job the shared model leaves open, which is fetching a batch.
+*/
+var List = defineComponent({
+	name: "List",
+	props: {
+		/**
+		* The key the list's view settings are persisted under. Needs a surrounding
+		* `<SettingsProvider>`; without a key nothing is persisted.
+		*/
+		settingStorageKey: {
+			type: String,
+			default: void 0
+		},
+		/**
+		* Whether items can be selected, and how many.
+		*
+		* The host's grid list and table own the selection — these are handed
+		* straight through, the way Flow's React list hands them through.
+		*/
+		selectionMode: {
+			type: String,
+			default: void 0
+		},
+		/** Whether selecting replaces the selection or adds to it. */
+		selectionBehavior: {
+			type: String,
+			default: void 0
+		},
+		selectedKeys: {
+			type: [Array, String],
+			default: void 0
+		},
+		defaultSelectedKeys: {
+			type: [Array, String],
+			default: void 0
+		},
+		disabledKeys: {
+			type: Array,
+			default: void 0
+		},
+		disallowEmptySelection: {
+			type: Boolean,
+			default: void 0
+		},
+		onSelectionChange: {
+			type: Function,
+			default: void 0
+		},
+		/**
+		* Makes the items expandable. The expanded content is the item's `<Content
+		* slot="bottom">`.
+		*/
+		accordion: {
+			type: Boolean,
+			default: false
+		},
+		/** How many items one batch holds. @default 20 */
+		batchSize: {
+			type: Number,
+			default: void 0
+		},
+		/** How many placeholders to show while the first batch loads. */
+		loadingItemsCount: {
+			type: Number,
+			default: void 0
+		},
+		/** A stable id per item, used to deduplicate across batches. */
+		getItemId: {
+			type: Function,
+			default: void 0
+		},
+		/** The layout to start in. @default "list" */
+		defaultViewMode: {
+			type: String,
+			default: void 0
+		},
+		/** Hides the pagination controls below the list. */
+		hidePagination: {
+			type: Boolean,
+			default: false
+		},
+		onAction: {
+			type: Function,
+			default: void 0
+		}
+	},
+	setup(props, { slots, attrs }) {
+		onMounted(useComponentUsage("List"));
+		const settings = useListSettings(props.settingStorageKey);
+		const list = new ListModel(readShape(slots.default?.(), {
+			...props,
+			...attrs,
+			settings
+		}));
+		provideListModel(list);
+		const loadState = watchMobxValue(() => {
+			list.listTable.revision;
+			return {
+				batchIndex: list.batches.getBatchIndex(),
+				knownBatches: list.loaderState.batchLoadingStates.length
+			};
+		});
+		onBeforeUnmount(() => list.discardPendingLoads());
+		watch(loadState, () => {
+			const loads = [];
+			for (let index = 0; index <= loadState.value.batchIndex; index++) {
+				const state = list.loaderState.batchLoadingStates[index];
+				if (state !== void 0 && state !== "void") continue;
+				list.loaderState.setBatchLoadingState(index, "loading");
+				if (!list.hasComposableLoader) loads.push(list.loadBatch(index));
+			}
+			return Promise.all(loads);
+		}, { immediate: true });
+		onMounted(() => list.filters.forEach((filter) => filter.deleteUnknownFilterValues()));
+		const data = watchMobxValue(() => list.loaderState.mergedData);
+		watch(data, (value) => list.setData(value), { immediate: true });
+		const isEmpty = watchMobxValue(() => list.isEmpty);
+		const emptyViewType = watchMobxValue(() => list.getEmptyViewType());
+		const hasItems = watchMobxValue(() => list.renderedItems.length > 0);
+		const isTable = watchMobxValue(() => list.viewMode.isTable);
+		const composableBatches = computed(() => list.hasComposableLoader ? Array.from({ length: loadState.value.batchIndex + 1 }, (ignored, index) => index) : []);
+		return () => {
+			const children = slots.default?.();
+			const shape = readShape(children, {
+				...props,
+				...attrs
+			});
+			const { actions, summary, rest } = arrangeChildren(children);
+			list.setRenderShape(shape);
+			list.updateSetup(shape);
+			if (shape.staticData) list.setStaticData(shape.staticData);
+			const emptyView = h(Div, {
+				"aria-hidden": !isEmpty.value,
+				class: isEmpty.value ? void 0 : listStyles.hideVisuallyEmptyView
+			}, () => h(ListEmptyViewContainer, { viewType: emptyViewType.value }, {
+				emptySearchResultView: slots.emptySearchResultView,
+				emptyView: slots.emptyView
+			}));
+			return h(Div, { class: className(listStyles.list, attrs.class) }, () => [
+				...composableBatches.value.map((index) => h(ListComposableBatchLoader, {
+					key: index,
+					batchIndex: index
+				})),
+				...rest,
+				h(Header, null, { actions: () => actions }),
+				h(Div, { class: listStyles.listWrapper }, () => [
+					emptyView,
+					...hasItems.value ? [...summary, slots.summary?.()] : [],
+					isTable.value ? h(ListTableView) : h(Items)
+				]),
+				props.hidePagination ? null : h(Footer)
+			]);
+		};
+	}
+});
+composition(List);
+//#endregion
+export { List, List as default };
+
+//# sourceMappingURL=List.mjs.map

package/dist/js/remote-vue-components/src/list/List.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.mjs","names":[],"sources":["../../../../../src/list/List.ts"],"sourcesContent":["import {\n  ActionGroup,\n  Button,\n  Div,\n  ListEmptyViewContainer,\n  ListSummary,\n} from \"@/auto-generated\";\nimport { watchMobxValue } from \"@/lib/mobxSelector\";\nimport type { AnyRecord } from \"@/lib/types\";\nimport {\n  computed,\n  defineComponent,\n  h,\n  onBeforeUnmount,\n  onMounted,\n  watch,\n  type PropType,\n  type VNode,\n  type VNodeChild,\n} from \"vue\";\nimport { ListComposableBatchLoader } from \"./ComposableLoader\";\nimport { Footer } from \"./Footer\";\nimport { Header } from \"./Header\";\nimport { Items } from \"./Items\";\nimport { ListTableView } from \"./Table\";\nimport { provideListModel } from \"./listContext\";\nimport { ListModel } from \"./model\";\nimport { useListSettings } from \"./settings\";\nimport {\n  findSetup,\n  findSetups,\n  isListSetupComponent,\n  ListFilter,\n  ListItem,\n  ListLoaderAsync,\n  ListLoaderComposable,\n  ListSearch,\n  ListSorting,\n  ListStaticData,\n  ListTable,\n  ListTableBody,\n  ListTableCell,\n  ListTableColumn,\n  ListTableHeader,\n  ListTableRow,\n} from \"./setupComponents\";\nimport { className, listStyles } from \"./styles\";\nimport type { VueListShape } from \"./types\";\nimport { composition } from \"@/lib/composition\";\nimport { useComponentUsage } from \"@/composables/useComponentUsage\";\nimport {\n  applyChildRules,\n  flattenChildren,\n  withContextProps,\n  withSlotContent,\n  type ChildRules,\n} from \"@/overlays/childProps\";\nimport { Action } from \"@/components/Action\";\nimport {\n  LightBoxTrigger,\n  ModalTrigger,\n  PopoverTrigger,\n} from \"@/overlays/triggers\";\n\n/*\n * Flow's `ActionGroup: { Button: … }` entry. It reaches a button through what\n * passes a props context on — the overlay triggers and `Action` — but not into\n * the `Modal` or `Popover` a trigger opens, which clear it.\n */\nconst passesContextOn = new Set<unknown>([\n  Action,\n  ModalTrigger,\n  PopoverTrigger,\n  LightBoxTrigger,\n]);\n\nconst headerActionRules: ChildRules = (child) =>\n  child.type === Button\n    ? { props: { class: listStyles.headerAction } }\n    : passesContextOn.has(child.type)\n      ? { children: headerActionRules }\n      : undefined;\n\n/**\n * Where the children that are not setup elements go — Flow's props context for\n * the `List`: an `ActionGroup` into the header, a `ListSummary` above the\n * items, anything else where it was written.\n */\nconst arrangeChildren = (children: unknown) => {\n  const actions: VNode[] = [];\n  const summary: VNode[] = [];\n  const rest: VNode[] = [];\n\n  for (const child of flattenChildren(children)) {\n    if (isListSetupComponent(child.type)) {\n      continue;\n    }\n    if (child.type === ActionGroup) {\n      actions.push(\n        withSlotContent(\n          withContextProps(child, {\n            preserveOrder: true,\n            class: listStyles.headerActions,\n          }),\n          (rendered) => applyChildRules(rendered, headerActionRules),\n        ),\n      );\n    } else if (child.type === ListSummary) {\n      summary.push(child);\n    } else {\n      rest.push(child);\n    }\n  }\n\n  return { actions, summary, rest };\n};\n\n/**\n * Reads the list's configuration off the elements inside it.\n *\n * The same shape Flow's React list takes, assembled the same way: the children\n * are the API, so `<ListFilter>` and `<ListSorting>` describe the list rather\n * than rendering anything.\n */\nconst readShape = (\n  children: unknown,\n  props: AnyRecord,\n): VueListShape<never> => {\n  const staticData = findSetup(children, ListStaticData);\n  const asyncLoader = findSetup(children, ListLoaderAsync);\n  const composableLoader = findSetup(children, ListLoaderComposable);\n  /* The flags belong to whichever dynamic source is there; a list has one. */\n  const dynamicLoader = asyncLoader ?? composableLoader;\n  const item = findSetup(children, ListItem);\n  const search = findSetup(children, ListSearch);\n  const columns = findSetups(children, ListTableColumn);\n\n  /*\n   * React nests its table elements and finds them with a deep walk; the walk\n   * here stops at a component on purpose, so the columns and cells are direct\n   * children of the `List`. Nesting them the React way is otherwise silent —\n   * a table view with no columns, which renders as no table view at all.\n   */\n  if (columns.length === 0 && findSetup(children, ListTable)) {\n    throw new Error(\n      \"<ListTable> was given no columns. Write <ListTableColumn> and \" +\n        \"<ListTableCell> as direct children of <List>, not inside \" +\n        \"<ListTable> — the list reads its own children and does not walk \" +\n        \"into them.\",\n    );\n  }\n\n  return {\n    staticData: staticData?.props.data as never[] | undefined,\n    /*\n     * A prop, not a scoped slot: Vue normalizes a slot's return into vnodes, so\n     * a loader written as a slot would hand back a rendered nothing instead of\n     * its promise.\n     */\n    asyncLoader: asyncLoader?.props.loader as never,\n    dependencies: asyncLoader?.props.dependencies as unknown[] | undefined,\n    /*\n     * Also a prop, and for a second reason: a composable has to run in the\n     * `setup()` of the component that renders it, and a slot's function is\n     * called during render.\n     */\n    composableLoader: composableLoader?.props.loader as never,\n    manualPagination: dynamicLoader?.props.manualPagination as\n      boolean | undefined,\n    manualFiltering: dynamicLoader?.props.manualFiltering as\n      boolean | undefined,\n    manualSorting: dynamicLoader?.props.manualSorting as boolean | undefined,\n\n    filters: findSetups(children, ListFilter).map((f) => f.props) as never,\n    sorting: findSetups(children, ListSorting).map((s) => s.props) as never,\n    search: search ? (search.props as never) : undefined,\n\n    itemView: item\n      ? {\n          render: item.render\n            ? (data: never) => item.render?.({ data }) as VNodeChild\n            : undefined,\n          textValue: item.props.textValue as\n            ((data: never) => string) | undefined,\n          href: item.props.href as ((data: never) => string) | undefined,\n          target: item.props.target as string | undefined,\n          defaultExpanded: item.props.defaultExpanded as\n            ((data: never) => boolean) | undefined,\n          showList: (item.props.showList as boolean | undefined) ?? true,\n          showTiles: item.props.showTiles as boolean | undefined,\n          /* Flow's default, and it reaches the host as a grid template. */\n          tileMaxWidth: (item.props.tileMaxWidth as number | undefined) ?? 230,\n        }\n      : undefined,\n\n    settings: props.settings as never,\n    table:\n      columns.length > 0\n        ? {\n            props: findSetup(children, ListTable)?.props ?? {},\n            headerProps: findSetup(children, ListTableHeader)?.props ?? {},\n            bodyProps: findSetup(children, ListTableBody)?.props ?? {},\n            rowProps: findSetup(children, ListTableRow)?.props ?? {},\n            columns: columns.map((column) => ({\n              props: column.props,\n              render: column.render\n                ? () => column.render?.({}) as VNodeChild\n                : undefined,\n            })),\n            cells: findSetups(children, ListTableCell).map((cell) => ({\n              props: cell.props,\n              render: cell.render\n                ? (data: never) => cell.render?.({ data }) as VNodeChild\n                : undefined,\n            })),\n          }\n        : undefined,\n\n    componentProps: {\n      selectionMode: props.selectionMode as never,\n      selectionBehavior: props.selectionBehavior as never,\n      selectedKeys: props.selectedKeys as never,\n      defaultSelectedKeys: props.defaultSelectedKeys as never,\n      disabledKeys: props.disabledKeys as never,\n      disallowEmptySelection: props.disallowEmptySelection as never,\n      onSelectionChange: props.onSelectionChange as never,\n    },\n\n    accordion: props.accordion as boolean | undefined,\n    batchSize: props.batchSize as number | undefined,\n    loadingItemsCount: props.loadingItemsCount as number | undefined,\n    getItemId: props.getItemId as ((data: never) => string) | undefined,\n    defaultViewMode: props.defaultViewMode as never,\n    onAction: props.onAction as ((data: never) => void) | undefined,\n    \"aria-label\": props[\"aria-label\"] as string | undefined,\n    \"aria-labelledby\": props[\"aria-labelledby\"] as string | undefined,\n  };\n};\n\n/**\n * Flow's `List`, rebuilt in Vue.\n *\n * `List` is a React composition rather than a remote element, so there is\n * nothing to generate — but everything it _decides_ now lives in\n * `@mittwald/flow-components-base` and is shared with React. What is written\n * here is the arrangement: which remote elements the host is asked for, and the\n * one job the shared model leaves open, which is fetching a batch.\n */\nexport const List = defineComponent({\n  name: \"List\",\n\n  props: {\n    /**\n     * The key the list's view settings are persisted under. Needs a surrounding\n     * `<SettingsProvider>`; without a key nothing is persisted.\n     */\n    settingStorageKey: { type: String, default: undefined },\n    /**\n     * Whether items can be selected, and how many.\n     *\n     * The host's grid list and table own the selection — these are handed\n     * straight through, the way Flow's React list hands them through.\n     */\n    selectionMode: {\n      type: String as PropType<\"none\" | \"single\" | \"multiple\">,\n      default: undefined,\n    },\n    /** Whether selecting replaces the selection or adds to it. */\n    selectionBehavior: {\n      type: String as PropType<\"toggle\" | \"replace\">,\n      default: undefined,\n    },\n    selectedKeys: {\n      type: [Array, String] as PropType<\"all\" | readonly (string | number)[]>,\n      default: undefined,\n    },\n    defaultSelectedKeys: {\n      type: [Array, String] as PropType<\"all\" | readonly (string | number)[]>,\n      default: undefined,\n    },\n    disabledKeys: {\n      type: Array as PropType<readonly (string | number)[]>,\n      default: undefined,\n    },\n    disallowEmptySelection: { type: Boolean, default: undefined },\n    onSelectionChange: {\n      type: Function as PropType<(keys: unknown) => void>,\n      default: undefined,\n    },\n\n    /**\n     * Makes the items expandable. The expanded content is the item's `<Content\n     * slot=\"bottom\">`.\n     */\n    accordion: { type: Boolean, default: false },\n    /** How many items one batch holds. @default 20 */\n    batchSize: { type: Number, default: undefined },\n    /** How many placeholders to show while the first batch loads. */\n    loadingItemsCount: { type: Number, default: undefined },\n    /** A stable id per item, used to deduplicate across batches. */\n    getItemId: {\n      type: Function as PropType<(data: never) => string>,\n      default: undefined,\n    },\n    /** The layout to start in. @default \"list\" */\n    defaultViewMode: {\n      type: String as PropType<\"list\" | \"table\" | \"tiles\">,\n      default: undefined,\n    },\n    /** Hides the pagination controls below the list. */\n    hidePagination: { type: Boolean, default: false },\n    onAction: {\n      type: Function as PropType<(data: never) => void>,\n      default: undefined,\n    },\n  },\n\n  setup(props, { slots, attrs }) {\n    /* Flow's React `List` is a `flowComponent` and reports itself. */\n    onMounted(useComponentUsage(\"List\"));\n\n    const settings = useListSettings(props.settingStorageKey);\n    const list = new ListModel<never>(\n      readShape(slots.default?.(), { ...props, ...attrs, settings }),\n    );\n    provideListModel(list);\n\n    /*\n     * The loader, which is the half `components-base` deliberately does not\n     * have. Everything it reacts to is MobX — how far the list has paged, and\n     * which batches are still unaccounted for — so one watcher covers paging,\n     * a changed filter and a changed search alike.\n     */\n    const loadState = watchMobxValue(() => {\n      void list.listTable.revision;\n      return {\n        batchIndex: list.batches.getBatchIndex(),\n        knownBatches: list.loaderState.batchLoadingStates.length,\n      };\n    });\n\n    /*\n     * Returns the loads, so a failed one reaches Vue's error handling: a watch\n     * callback's rejected promise goes to `onErrorCaptured` and the app's\n     * `errorHandler`, and `RemoteRoot` reports it to the host. Unmounted, the\n     * list discards them, or a late failure would still reach its former\n     * parents.\n     */\n    onBeforeUnmount(() => list.discardPendingLoads());\n    watch(\n      loadState,\n      () => {\n        const loads: Promise<void>[] = [];\n\n        for (let index = 0; index <= loadState.value.batchIndex; index++) {\n          /*\n           * `\"void\"` is a batch nobody has asked for yet — the state a fresh\n           * loader starts in — and a missing entry is a batch a reset dropped.\n           * Both need loading; only `\"loading\"` means someone already is.\n           */\n          const state = list.loaderState.batchLoadingStates[index];\n          if (state !== undefined && state !== \"void\") {\n            continue;\n          }\n          list.loaderState.setBatchLoadingState(index, \"loading\");\n\n          /*\n           * A composable loader reports from its own component instead — the\n           * state above is what makes the list render a skeleton until it\n           * does.\n           */\n          if (!list.hasComposableLoader) {\n            loads.push(list.loadBatch(index));\n          }\n        }\n\n        return Promise.all(loads);\n      },\n      { immediate: true },\n    );\n\n    /*\n     * A stored selection can name a value the data no longer has. Dropping it\n     * is not cosmetic: kept, it filters everything away and leaves no control\n     * to take it back.\n     */\n    onMounted(() =>\n      list.filters.forEach((filter) => filter.deleteUnknownFilterValues()),\n    );\n\n    const data = watchMobxValue(() => list.loaderState.mergedData);\n    watch(data, (value) => list.setData(value), { immediate: true });\n\n    const isEmpty = watchMobxValue(() => list.isEmpty);\n    const emptyViewType = watchMobxValue(() => list.getEmptyViewType());\n    const hasItems = watchMobxValue(() => list.renderedItems.length > 0);\n    const isTable = watchMobxValue(() => list.viewMode.isTable);\n\n    /* One component per batch the list has asked for. Empty for every other source. */\n    const composableBatches = computed(() =>\n      list.hasComposableLoader\n        ? Array.from(\n            { length: loadState.value.batchIndex + 1 },\n            (ignored, index) => index,\n          )\n        : [],\n    );\n\n    return () => {\n      const children = slots.default?.();\n      const shape = readShape(children, { ...props, ...attrs });\n      const { actions, summary, rest } = arrangeChildren(children);\n\n      /* The children are the API, so a changed child has to reach the model. */\n      list.setRenderShape(shape);\n      list.updateSetup(shape);\n      /*\n       * Compared item by item, which also makes this render depend on every\n       * index of a reactive array — so one changed in place re-renders the\n       * list and arrives here.\n       */\n      if (shape.staticData) {\n        list.setStaticData(shape.staticData);\n      }\n\n      /*\n       * Always rendered, even when there are items: taking it out of the tree\n       * and putting it back loses whatever state its content holds — the same\n       * reason Flow's React list hides it rather than dropping it.\n       */\n      const emptyView = h(\n        Div,\n        {\n          \"aria-hidden\": !isEmpty.value,\n          class: isEmpty.value ? undefined : listStyles.hideVisuallyEmptyView,\n        },\n        () =>\n          h(\n            ListEmptyViewContainer,\n            { viewType: emptyViewType.value },\n            {\n              emptySearchResultView: slots.emptySearchResultView,\n              emptyView: slots.emptyView,\n            },\n          ),\n      );\n\n      return h(\n        Div,\n        {\n          class: className(listStyles.list, attrs.class as string | undefined),\n        },\n        () => [\n          ...composableBatches.value.map((index) =>\n            h(ListComposableBatchLoader, { key: index, batchIndex: index }),\n          ),\n          ...rest,\n          h(Header, null, { actions: () => actions }),\n          h(Div, { class: listStyles.listWrapper }, () => [\n            emptyView,\n            ...(hasItems.value ? [...summary, slots.summary?.()] : []),\n            isTable.value ? h(ListTableView) : h(Items),\n          ]),\n          props.hidePagination ? null : h(Footer),\n        ],\n      );\n    };\n  },\n});\n\ncomposition(List);\n\nexport default List;\n"],"mappings":"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"}

package/dist/js/remote-vue-components/src/list/ListItemView.mjs

@@ -0,0 +1,140 @@
+import { composition } from "../lib/composition.mjs";
+import { ActionGroup } from "../auto-generated/ActionGroup.mjs";
+import { Avatar } from "../auto-generated/Avatar.mjs";
+import { Button } from "../auto-generated/Button.mjs";
+import { Checkbox } from "../auto-generated/Checkbox.mjs";
+import { Content } from "../auto-generated/Content.mjs";
+import { ContextMenu } from "../auto-generated/ContextMenu.mjs";
+import { ContextMenuTrigger } from "../auto-generated/ContextMenuTrigger.mjs";
+import { ContextualHelpTrigger } from "../auto-generated/ContextualHelpTrigger.mjs";
+import { DialogTrigger } from "../auto-generated/DialogTrigger.mjs";
+import { Heading } from "../auto-generated/Heading.mjs";
+import { ListItemViewContent } from "../auto-generated/ListItemViewContent.mjs";
+import { Text } from "../auto-generated/Text.mjs";
+import { IconChevronDown } from "../icons/components/IconChevronDown.mjs";
+import { IconChevronUp } from "../icons/components/IconChevronUp.mjs";
+import { IconContextMenu } from "../icons/components/IconContextMenu.mjs";
+import watchMobxValue from "../lib/mobxSelector.mjs";
+import { dynamic, withContextProps } from "../overlays/childProps.mjs";
+import { injectListModel } from "./listContext.mjs";
+import { useListTexts } from "./locales.mjs";
+import { itemViewStyles, listStyles } from "./styles.mjs";
+import { ModalTrigger, PopoverTrigger } from "../overlays/triggers.mjs";
+import { injectItemAccordion } from "./itemContext.mjs";
+import { Fragment, cloneVNode, defineComponent, h } from "vue";
+//#region src/list/ListItemView.ts
+var overlayTriggers = /* @__PURE__ */ new Set([
+	ContextMenuTrigger,
+	ContextualHelpTrigger,
+	DialogTrigger,
+	ModalTrigger,
+	PopoverTrigger
+]);
+/**
+* Where a child of `<ListItemView>` belongs.
+*
+* Flow's React version routes these with tunnels and a props context: a
+* `Heading` inside a list item ends up in the item's title slot without the
+* author saying so. A Vue app writes the same markup, and this is the routing —
+* one level deep, the way `mapChildren` reaches one level.
+*/
+var slotOfChild = (child) => {
+	const type = child.type;
+	if (type === Heading) return "title";
+	if (type === Text) return "subTitle";
+	if (type === Avatar) return "avatar";
+	if (type === Checkbox) return "checkbox";
+	if (type === Button || type === ContextMenu || type === ActionGroup || overlayTriggers.has(type)) return "button";
+	if (type === Content && child.props?.slot === "bottom") return "bottom";
+};
+var isVNode$1 = (value) => typeof value === "object" && value !== null && "type" in value;
+var ListItemView = defineComponent({
+	name: "ListItemView",
+	setup(_props, { slots }) {
+		const list = injectListModel();
+		const viewMode = watchMobxValue(() => list.viewMode.value);
+		const accordion = injectItemAccordion();
+		const texts = useListTexts();
+		const configureButton = (node) => {
+			if (node.type === Button) return withContextProps(node, { size: dynamic(viewMode.value === "tiles" ? "s" : "m") });
+			if (node.type === ActionGroup) return withContextProps(node, {
+				preserveOrder: true,
+				class: listStyles.headerActions
+			});
+			if (node.type === ContextMenu) return h(ContextMenuTrigger, null, () => [h(Button, {
+				class: itemViewStyles.action,
+				variant: "plain",
+				color: "dark",
+				"aria-label": texts.value("options")
+			}, () => h(IconContextMenu)), withContextProps(node, { placement: "bottom right" })]);
+			return node;
+		};
+		const renderToggle = (current) => h(Button, {
+			class: itemViewStyles.action,
+			variant: "plain",
+			color: "secondary",
+			"aria-label": texts.value(current.isExpanded.value ? "toggleExpandButton.collapse" : "toggleExpandButton.expand"),
+			"aria-controls": current.contentId,
+			"aria-expanded": current.isExpanded.value,
+			onPress: current.toggle
+		}, () => h(current.isExpanded.value ? IconChevronUp : IconChevronDown));
+		return () => {
+			const routed = {};
+			const rest = [];
+			const route = (node) => {
+				if (Array.isArray(node)) {
+					node.forEach(route);
+					return;
+				}
+				if (!isVNode$1(node)) {
+					if (node !== null && node !== void 0 && node !== "") rest.push(node);
+					return;
+				}
+				if (node.type === Fragment) {
+					route(node.children);
+					return;
+				}
+				const slot = slotOfChild(node);
+				if (slot === "button") (routed.button ??= []).push(configureButton(node));
+				else if (slot) (routed[slot] ??= []).push(node);
+				else rest.push(node);
+			};
+			route(slots.default?.());
+			for (const name of [
+				"title",
+				"subTitle",
+				"avatar",
+				"button",
+				"checkbox",
+				"bottom"
+			]) {
+				const slot = slots[name];
+				if (slot) routed[name] = [slot()];
+			}
+			const toggle = accordion?.isActive.value && routed.bottom ? accordion : void 0;
+			if (toggle) {
+				(routed.button ??= []).push(renderToggle(toggle));
+				if (toggle.isExpanded.value) routed.bottom = (routed.bottom ?? []).map((node) => isVNode$1(node) ? cloneVNode(node, { id: toggle.contentId }) : node);
+				else delete routed.bottom;
+			}
+			const slotFor = (name) => {
+				const nodes = routed[name];
+				return nodes ? () => nodes : void 0;
+			};
+			return h(ListItemViewContent, { viewMode: viewMode.value }, {
+				default: () => rest,
+				title: slotFor("title"),
+				subTitle: slotFor("subTitle"),
+				avatar: slotFor("avatar"),
+				button: slotFor("button"),
+				checkbox: slotFor("checkbox"),
+				bottom: slotFor("bottom")
+			});
+		};
+	}
+});
+composition(ListItemView);
+//#endregion
+export { ListItemView, ListItemView as default };
+
+//# sourceMappingURL=ListItemView.mjs.map

package/dist/js/remote-vue-components/src/list/ListItemView.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemView.mjs","names":["isVNode"],"sources":["../../../../../src/list/ListItemView.ts"],"sourcesContent":["import {\n  ActionGroup,\n  Avatar,\n  Button,\n  Checkbox,\n  Content,\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextualHelpTrigger,\n  DialogTrigger,\n  Heading,\n  ListItemViewContent,\n  Text,\n} from \"@/auto-generated\";\nimport { IconChevronDown, IconChevronUp, IconContextMenu } from \"@/icons\";\nimport { watchMobxValue } from \"@/lib/mobxSelector\";\nimport { dynamic, withContextProps } from \"@/overlays/childProps\";\nimport { ModalTrigger, PopoverTrigger } from \"@/overlays/triggers\";\nimport {\n  cloneVNode,\n  defineComponent,\n  Fragment,\n  h,\n  type Component,\n  type VNode,\n  type VNodeChild,\n} from \"vue\";\nimport { injectItemAccordion, type ListItemAccordion } from \"./itemContext\";\nimport { injectListModel } from \"./listContext\";\nimport { useListTexts } from \"./locales\";\nimport { itemViewStyles, listStyles } from \"./styles\";\nimport { composition } from \"@/lib/composition\";\n\n/* Flow's `overlayTriggersTunneledTo`: every trigger goes where the buttons go. */\nconst overlayTriggers = new Set<unknown>([\n  ContextMenuTrigger,\n  ContextualHelpTrigger,\n  DialogTrigger,\n  ModalTrigger,\n  PopoverTrigger,\n]);\n\n/**\n * Where a child of `<ListItemView>` belongs.\n *\n * Flow's React version routes these with tunnels and a props context: a\n * `Heading` inside a list item ends up in the item's title slot without the\n * author saying so. A Vue app writes the same markup, and this is the routing —\n * one level deep, the way `mapChildren` reaches one level.\n */\nconst slotOfChild = (child: VNode): string | undefined => {\n  const type = child.type as Component;\n\n  if (type === Heading) {\n    return \"title\";\n  }\n  if (type === Text) {\n    return \"subTitle\";\n  }\n  if (type === Avatar) {\n    return \"avatar\";\n  }\n  if (type === Checkbox) {\n    return \"checkbox\";\n  }\n  if (\n    type === Button ||\n    type === ContextMenu ||\n    type === ActionGroup ||\n    overlayTriggers.has(type)\n  ) {\n    return \"button\";\n  }\n  if (type === Content && child.props?.slot === \"bottom\") {\n    return \"bottom\";\n  }\n\n  return undefined;\n};\n\nconst isVNode = (value: unknown): value is VNode =>\n  typeof value === \"object\" && value !== null && \"type\" in value;\n\nexport const ListItemView = defineComponent({\n  name: \"ListItemView\",\n\n  setup(_props, { slots }) {\n    const list = injectListModel();\n    const viewMode = watchMobxValue(() => list.viewMode.value);\n    const accordion = injectItemAccordion();\n    const texts = useListTexts();\n\n    /*\n     * Flow's props context for the item's buttons. A bare `ContextMenu` needs\n     * the button that opens it (`wrapWith: <OptionsButton/>`, plus `placement=\n     * \"bottom right\"`) — without it the host renders a menu nobody can open,\n     * which looks like nothing at all. A `Button` is `size=\"s\"` in a tile and\n     * `m` otherwise. An `ActionGroup` also gets what the `List`'s context sets\n     * for every `ActionGroup` inside it.\n     */\n    const configureButton = (node: VNode): VNode => {\n      if (node.type === Button) {\n        return withContextProps(node, {\n          size: dynamic(viewMode.value === \"tiles\" ? \"s\" : \"m\"),\n        });\n      }\n      if (node.type === ActionGroup) {\n        return withContextProps(node, {\n          preserveOrder: true,\n          class: listStyles.headerActions,\n        });\n      }\n      if (node.type === ContextMenu) {\n        return h(ContextMenuTrigger, null, () => [\n          h(\n            Button,\n            {\n              class: itemViewStyles.action,\n              variant: \"plain\",\n              color: \"dark\",\n              \"aria-label\": texts.value(\"options\"),\n            },\n            () => h(IconContextMenu),\n          ),\n          withContextProps(node, { placement: \"bottom right\" }),\n        ]);\n      }\n      return node;\n    };\n\n    /*\n     * The toggle, and the rule that the expanded content is only in the tree\n     * while it is open. Flow wraps the item's `Content slot=\"bottom\"` with both\n     * through a props context; here the item provides them and this injects\n     * them.\n     */\n    const renderToggle = (current: ListItemAccordion): VNode =>\n      h(\n        Button,\n        {\n          class: itemViewStyles.action,\n          variant: \"plain\",\n          color: \"secondary\",\n          \"aria-label\": texts.value(\n            current.isExpanded.value\n              ? \"toggleExpandButton.collapse\"\n              : \"toggleExpandButton.expand\",\n          ),\n          \"aria-controls\": current.contentId,\n          \"aria-expanded\": current.isExpanded.value,\n          onPress: current.toggle,\n        },\n        () => h(current.isExpanded.value ? IconChevronUp : IconChevronDown),\n      );\n\n    return () => {\n      const routed: Record<string, VNodeChild[]> = {};\n      const rest: VNodeChild[] = [];\n\n      const route = (node: unknown): void => {\n        if (Array.isArray(node)) {\n          node.forEach(route);\n          return;\n        }\n        if (!isVNode(node)) {\n          if (node !== null && node !== undefined && node !== \"\") {\n            rest.push(node as VNodeChild);\n          }\n          return;\n        }\n        if (node.type === Fragment) {\n          route(node.children);\n          return;\n        }\n\n        const slot = slotOfChild(node);\n        if (slot === \"button\") {\n          (routed.button ??= []).push(configureButton(node));\n        } else if (slot) {\n          (routed[slot] ??= []).push(node);\n        } else {\n          rest.push(node);\n        }\n      };\n\n      route(slots.default?.());\n\n      /* An explicit named slot wins — it says where the content goes. */\n      for (const name of [\n        \"title\",\n        \"subTitle\",\n        \"avatar\",\n        \"button\",\n        \"checkbox\",\n        \"bottom\",\n      ]) {\n        const slot = slots[name];\n        if (slot) {\n          routed[name] = [slot()];\n        }\n      }\n\n      /*\n       * After the item's own buttons, wherever its content was written. An\n       * item with nothing to expand gets no toggle.\n       */\n      const toggle =\n        accordion?.isActive.value && routed.bottom ? accordion : undefined;\n      if (toggle) {\n        (routed.button ??= []).push(renderToggle(toggle));\n\n        if (toggle.isExpanded.value) {\n          /* What the toggle's `aria-controls` points at. */\n          routed.bottom = (routed.bottom ?? []).map((node) =>\n            isVNode(node) ? cloneVNode(node, { id: toggle.contentId }) : node,\n          );\n        } else {\n          delete routed.bottom;\n        }\n      }\n\n      const slotFor = (name: string) => {\n        const nodes = routed[name];\n        return nodes ? () => nodes : undefined;\n      };\n\n      return h(\n        ListItemViewContent,\n        /* Vue passes `class` and the rest through to this single root itself. */\n        { viewMode: viewMode.value },\n        {\n          default: () => rest,\n          title: slotFor(\"title\"),\n          subTitle: slotFor(\"subTitle\"),\n          avatar: slotFor(\"avatar\"),\n          button: slotFor(\"button\"),\n          checkbox: slotFor(\"checkbox\"),\n          bottom: slotFor(\"bottom\"),\n        },\n      );\n    };\n  },\n});\n\ncomposition(ListItemView);\n\nexport default ListItemView;\n"],"mappings":"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"}

package/dist/js/remote-vue-components/src/list/Table.mjs

@@ -0,0 +1,78 @@
+import { composition } from "../lib/composition.mjs";
+import { SkeletonText } from "../auto-generated/SkeletonText.mjs";
+import { Table } from "../auto-generated/Table.mjs";
+import { TableBody } from "../auto-generated/TableBody.mjs";
+import { TableCell } from "../auto-generated/TableCell.mjs";
+import { TableColumn } from "../auto-generated/TableColumn.mjs";
+import { TableHeader } from "../auto-generated/TableHeader.mjs";
+import { TableRow } from "../auto-generated/TableRow.mjs";
+import watchMobxValue from "../lib/mobxSelector.mjs";
+import { injectListModel } from "./listContext.mjs";
+import { className } from "./styles.mjs";
+import { defineComponent, h } from "vue";
+//#region src/list/Table.ts
+var tableStyles = {
+	table: "flow--list--table",
+	isLoading: "flow--list--table--is-loading",
+	row: "flow--list--table--row",
+	hasAction: "flow--list--table--has-action"
+};
+/**
+* The list as a table.
+*
+* The columns, the cells and their render functions come from the `ListTable*`
+* elements inside the list — the same arrangement Flow's React list reads out
+* of its children, over the same remote elements.
+*/
+var ListTableView = defineComponent({
+	name: "ListTableView",
+	setup() {
+		const list = injectListModel();
+		const items = watchMobxValue(() => list.renderedItems);
+		const isEmpty = watchMobxValue(() => list.isEmpty);
+		const isLoading = watchMobxValue(() => list.loaderState.isLoading);
+		const isInitiallyLoading = watchMobxValue(() => list.loaderState.isInitiallyLoading);
+		const renderShape = watchMobxValue(() => list.renderShape);
+		return () => {
+			const shape = renderShape.value;
+			const table = shape.table;
+			if (!table || isEmpty.value) return null;
+			const onAction = shape.onAction;
+			const renderCells = (data) => table.cells.map((cell, index) => h(TableCell, {
+				key: index,
+				...cell.props
+			}, () => cell.render?.(data)));
+			const rows = items.value.map((item) => h(TableRow, {
+				key: item.id,
+				id: item.id,
+				...table.rowProps,
+				class: className(tableStyles.row, onAction && tableStyles.hasAction, table.rowProps.class),
+				onAction: onAction ? () => onAction(item.data) : void 0
+			}, () => renderCells(item.data)));
+			const skeletonRows = Array.from({ length: list.loadingItemsCount }, (_unused, index) => h(TableRow, {
+				key: `skeleton-${index}`,
+				...table.rowProps
+			}, () => table.cells.map((cell, cellIndex) => h(TableCell, {
+				key: cellIndex,
+				...cell.props
+			}, () => h(SkeletonText, { width: "10em" })))));
+			return h(Table, {
+				"aria-label": shape["aria-label"],
+				"aria-labelledby": shape["aria-labelledby"],
+				...shape.componentProps,
+				...table.props,
+				class: className(tableStyles.table, isLoading.value && tableStyles.isLoading, table.props.class),
+				"aria-hidden": isInitiallyLoading.value,
+				"aria-busy": isLoading.value
+			}, () => [h(TableHeader, table.headerProps, () => table.columns.map((column, index) => h(TableColumn, {
+				key: index,
+				...column.props
+			}, () => column.render?.()))), h(TableBody, table.bodyProps, () => isInitiallyLoading.value ? skeletonRows : rows)]);
+		};
+	}
+});
+composition(ListTableView);
+//#endregion
+export { ListTableView, ListTableView as default };
+
+//# sourceMappingURL=Table.mjs.map

package/dist/js/remote-vue-components/src/list/Table.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.mjs","names":[],"sources":["../../../../../src/list/Table.ts"],"sourcesContent":["import {\n  SkeletonText,\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@/auto-generated\";\nimport { watchMobxValue } from \"@/lib/mobxSelector\";\nimport { defineComponent, h, type VNodeChild } from \"vue\";\nimport { injectListModel } from \"./listContext\";\nimport { className } from \"./styles\";\nimport { composition } from \"@/lib/composition\";\n\nconst tableStyles = {\n  table: \"flow--list--table\",\n  isLoading: \"flow--list--table--is-loading\",\n  row: \"flow--list--table--row\",\n  hasAction: \"flow--list--table--has-action\",\n} as const;\n\n/**\n * The list as a table.\n *\n * The columns, the cells and their render functions come from the `ListTable*`\n * elements inside the list — the same arrangement Flow's React list reads out\n * of its children, over the same remote elements.\n */\nexport const ListTableView = defineComponent({\n  name: \"ListTableView\",\n\n  setup() {\n    const list = injectListModel();\n\n    const items = watchMobxValue(() => list.renderedItems);\n    const isEmpty = watchMobxValue(() => list.isEmpty);\n    const isLoading = watchMobxValue(() => list.loaderState.isLoading);\n    const isInitiallyLoading = watchMobxValue(\n      () => list.loaderState.isInitiallyLoading,\n    );\n    const renderShape = watchMobxValue(() => list.renderShape);\n\n    return () => {\n      const shape = renderShape.value;\n      const table = shape.table;\n\n      if (!table || isEmpty.value) {\n        return null;\n      }\n\n      const onAction = shape.onAction;\n\n      const renderCells = (data: never): VNodeChild[] =>\n        table.cells.map((cell, index) =>\n          h(TableCell, { key: index, ...cell.props }, () =>\n            cell.render?.(data),\n          ),\n        );\n\n      const rows = items.value.map((item) =>\n        h(\n          TableRow,\n          {\n            key: item.id,\n            id: item.id,\n            ...table.rowProps,\n            class: className(\n              tableStyles.row,\n              onAction && tableStyles.hasAction,\n              table.rowProps.class as string | undefined,\n            ),\n            onAction: onAction ? () => onAction(item.data) : undefined,\n          },\n          () => renderCells(item.data),\n        ),\n      );\n\n      /* Placeholder rows in the table's own shape, one cell per column. */\n      const skeletonRows = Array.from(\n        { length: list.loadingItemsCount },\n        (_unused, index) =>\n          h(TableRow, { key: `skeleton-${index}`, ...table.rowProps }, () =>\n            table.cells.map((cell, cellIndex) =>\n              h(TableCell, { key: cellIndex, ...cell.props }, () =>\n                h(SkeletonText, { width: \"10em\" }),\n              ),\n            ),\n          ),\n      );\n\n      return h(\n        Table,\n        {\n          \"aria-label\": shape[\"aria-label\"],\n          \"aria-labelledby\": shape[\"aria-labelledby\"],\n          ...shape.componentProps,\n          ...table.props,\n          class: className(\n            tableStyles.table,\n            isLoading.value && tableStyles.isLoading,\n            table.props.class as string | undefined,\n          ),\n          \"aria-hidden\": isInitiallyLoading.value,\n          \"aria-busy\": isLoading.value,\n        },\n        () => [\n          h(TableHeader, table.headerProps, () =>\n            table.columns.map((column, index) =>\n              h(TableColumn, { key: index, ...column.props }, () =>\n                column.render?.(),\n              ),\n            ),\n          ),\n          h(TableBody, table.bodyProps, () =>\n            isInitiallyLoading.value ? skeletonRows : rows,\n          ),\n        ],\n      );\n    };\n  },\n});\n\ncomposition(ListTableView);\n\nexport default ListTableView;\n"],"mappings":";;;;;;;;;;;;;AAeA,IAAM,cAAc;CAClB,OAAO;CACP,WAAW;CACX,KAAK;CACL,WAAW;AACb;;;;;;;;AASA,IAAa,gBAAgB,gBAAgB;CAC3C,MAAM;CAEN,QAAQ;EACN,MAAM,OAAO,gBAAgB;EAE7B,MAAM,QAAQ,qBAAqB,KAAK,aAAa;EACrD,MAAM,UAAU,qBAAqB,KAAK,OAAO;EACjD,MAAM,YAAY,qBAAqB,KAAK,YAAY,SAAS;EACjE,MAAM,qBAAqB,qBACnB,KAAK,YAAY,kBACzB;EACA,MAAM,cAAc,qBAAqB,KAAK,WAAW;EAEzD,aAAa;GACX,MAAM,QAAQ,YAAY;GAC1B,MAAM,QAAQ,MAAM;GAEpB,IAAI,CAAC,SAAS,QAAQ,OACpB,OAAO;GAGT,MAAM,WAAW,MAAM;GAEvB,MAAM,eAAe,SACnB,MAAM,MAAM,KAAK,MAAM,UACrB,EAAE,WAAW;IAAE,KAAK;IAAO,GAAG,KAAK;GAAM,SACvC,KAAK,SAAS,IAAI,CACpB,CACF;GAEF,MAAM,OAAO,MAAM,MAAM,KAAK,SAC5B,EACE,UACA;IACE,KAAK,KAAK;IACV,IAAI,KAAK;IACT,GAAG,MAAM;IACT,OAAO,UACL,YAAY,KACZ,YAAY,YAAY,WACxB,MAAM,SAAS,KACjB;IACA,UAAU,iBAAiB,SAAS,KAAK,IAAI,IAAI,KAAA;GACnD,SACM,YAAY,KAAK,IAAI,CAC7B,CACF;GAGA,MAAM,eAAe,MAAM,KACzB,EAAE,QAAQ,KAAK,kBAAkB,IAChC,SAAS,UACR,EAAE,UAAU;IAAE,KAAK,YAAY;IAAS,GAAG,MAAM;GAAS,SACxD,MAAM,MAAM,KAAK,MAAM,cACrB,EAAE,WAAW;IAAE,KAAK;IAAW,GAAG,KAAK;GAAM,SAC3C,EAAE,cAAc,EAAE,OAAO,OAAO,CAAC,CACnC,CACF,CACF,CACJ;GAEA,OAAO,EACL,OACA;IACE,cAAc,MAAM;IACpB,mBAAmB,MAAM;IACzB,GAAG,MAAM;IACT,GAAG,MAAM;IACT,OAAO,UACL,YAAY,OACZ,UAAU,SAAS,YAAY,WAC/B,MAAM,MAAM,KACd;IACA,eAAe,mBAAmB;IAClC,aAAa,UAAU;GACzB,SACM,CACJ,EAAE,aAAa,MAAM,mBACnB,MAAM,QAAQ,KAAK,QAAQ,UACzB,EAAE,aAAa;IAAE,KAAK;IAAO,GAAG,OAAO;GAAM,SAC3C,OAAO,SAAS,CAClB,CACF,CACF,GACA,EAAE,WAAW,MAAM,iBACjB,mBAAmB,QAAQ,eAAe,IAC5C,CACF,CACF;EACF;CACF;AACF,CAAC;AAED,YAAY,aAAa"}

package/dist/js/remote-vue-components/src/list/dateRangeFilter.mjs

@@ -0,0 +1,27 @@
+import { ListDateRangeFilter } from "../../../components-base/src/list/filter/ListDateRangeFilter.mjs";
+import "../../../components-base/src/index.mjs";
+//#region src/list/dateRangeFilter.ts
+/**
+* A date-range filter, with the options its calendar takes.
+*
+* The column, the comparison and the stored value are the shared
+* `ListDateRangeFilter`, so a Vue list and a React list filter the same dates
+* the same way. What a binding adds is only what its calendar accepts.
+*/
+var DateRangeFilter = class extends ListDateRangeFilter {
+	/** Handed to the `RangeCalendar` — a minimum date, unavailable days, … */
+	dateRangeOptions;
+	constructor(context, shape) {
+		super(context, shape);
+		this.dateRangeOptions = shape.dateRangeOptions;
+	}
+};
+/** Whether a filter is one of these, without reaching for the class. */
+var isDateRangeFilter = (filter) => filter.mode === "dateRange";
+/** `01/03/2024`, the way `Intl` writes it for the host's locale. */
+var formatDate = (date) => new Date(date.year, date.month - 1, date.day).toLocaleDateString();
+var formatDateRange = (range) => [range.start, range.end].map((date) => date ? formatDate(date) : "").join(" - ");
+//#endregion
+export { DateRangeFilter, formatDate, formatDateRange, isDateRangeFilter };
+
+//# sourceMappingURL=dateRangeFilter.mjs.map

package/dist/js/remote-vue-components/src/list/dateRangeFilter.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dateRangeFilter.mjs","names":[],"sources":["../../../../../src/list/dateRangeFilter.ts"],"sourcesContent":["import { ListDateRangeFilter } from \"@mittwald/flow-components-base\";\nimport type {\n  ListDateParts,\n  ListDateRange,\n  ListModelContext,\n} from \"@mittwald/flow-components-base\";\nimport type { ListRendered, VueListFilterShape } from \"./types\";\n\n/**\n * A date-range filter, with the options its calendar takes.\n *\n * The column, the comparison and the stored value are the shared\n * `ListDateRangeFilter`, so a Vue list and a React list filter the same dates\n * the same way. What a binding adds is only what its calendar accepts.\n */\nexport class DateRangeFilter<T = never> extends ListDateRangeFilter<\n  T,\n  never,\n  ListRendered\n> {\n  /** Handed to the `RangeCalendar` — a minimum date, unavailable days, … */\n  public readonly dateRangeOptions?: Record<string, unknown>;\n\n  public constructor(\n    context: ListModelContext<T>,\n    shape: VueListFilterShape<T>,\n  ) {\n    super(context, shape as never);\n    this.dateRangeOptions = (\n      shape as { dateRangeOptions?: Record<string, unknown> }\n    ).dateRangeOptions;\n  }\n}\n\n/** Whether a filter is one of these, without reaching for the class. */\nexport const isDateRangeFilter = (filter: {\n  readonly mode: string;\n}): filter is DateRangeFilter<never> => filter.mode === \"dateRange\";\n\n/** `01/03/2024`, the way `Intl` writes it for the host's locale. */\nexport const formatDate = (date: ListDateParts): string =>\n  new Date(date.year, date.month - 1, date.day).toLocaleDateString();\n\nexport const formatDateRange = (range: ListDateRange): string =>\n  [range.start, range.end]\n    .map((date) => (date ? formatDate(date) : \"\"))\n    .join(\" - \");\n"],"mappings":";;;;;;;;;;AAeA,IAAa,kBAAb,cAAgD,oBAI9C;;CAEA;CAEA,YACE,SACA,OACA;EACA,MAAM,SAAS,KAAc;EAC7B,KAAK,mBACH,MACA;CACJ;AACF;;AAGA,IAAa,qBAAqB,WAEM,OAAO,SAAS;;AAGxD,IAAa,cAAc,SACzB,IAAI,KAAK,KAAK,MAAM,KAAK,QAAQ,GAAG,KAAK,GAAG,CAAC,CAAC,mBAAmB;AAEnE,IAAa,mBAAmB,UAC9B,CAAC,MAAM,OAAO,MAAM,GAAG,CAAC,CACrB,KAAK,SAAU,OAAO,WAAW,IAAI,IAAI,EAAG,CAAC,CAC7C,KAAK,KAAK"}

package/dist/js/remote-vue-components/src/list/itemContext.mjs

@@ -0,0 +1,10 @@
+import { inject, provide } from "vue";
+//#region src/list/itemContext.ts
+var key = Symbol("flowListItemAccordion");
+var provideItemAccordion = (accordion) => provide(key, accordion);
+/** `undefined` outside a list item. */
+var injectItemAccordion = () => inject(key, void 0);
+//#endregion
+export { injectItemAccordion, provideItemAccordion };
+
+//# sourceMappingURL=itemContext.mjs.map

package/dist/js/remote-vue-components/src/list/itemContext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"itemContext.mjs","names":[],"sources":["../../../../../src/list/itemContext.ts"],"sourcesContent":["import { inject, provide, type InjectionKey, type Ref } from \"vue\";\n\n/**\n * What an expandable item tells the view inside it.\n *\n * Flow's React list writes the same three things into a props context for the\n * `Content slot=\"bottom\"` of that one item — an id, whether it is open, and how\n * to toggle it. There is no such context here, so the item provides it and\n * `ListItemView` injects it.\n */\nexport interface ListItemAccordion {\n  /** Whether the list is in accordion mode, which can change at runtime. */\n  readonly isActive: Readonly<Ref<boolean>>;\n  readonly isExpanded: Ref<boolean>;\n  readonly contentId: string;\n  toggle: () => void;\n}\n\nconst key: InjectionKey<ListItemAccordion> = Symbol(\"flowListItemAccordion\");\n\nexport const provideItemAccordion = (accordion: ListItemAccordion): void =>\n  provide(key, accordion);\n\n/** `undefined` outside a list item. */\nexport const injectItemAccordion = (): ListItemAccordion | undefined =>\n  inject(key, undefined);\n"],"mappings":";;AAkBA,IAAM,MAAuC,OAAO,uBAAuB;AAE3E,IAAa,wBAAwB,cACnC,QAAQ,KAAK,SAAS;;AAGxB,IAAa,4BACX,OAAO,KAAK,KAAA,CAAS"}