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

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

@@ -0,0 +1,207 @@
+import { composition } from "../lib/composition.mjs";
+import { Button } from "../auto-generated/Button.mjs";
+import { ContextMenu } from "../auto-generated/ContextMenu.mjs";
+import { ContextMenuTrigger } from "../auto-generated/ContextMenuTrigger.mjs";
+import { Div } from "../auto-generated/Div.mjs";
+import { MenuItem } from "../auto-generated/MenuItem.mjs";
+import { RangeCalendar } from "../auto-generated/RangeCalendar.mjs";
+import { SearchField } from "../auto-generated/SearchField.mjs";
+import { Text } from "../auto-generated/Text.mjs";
+import { IconAscending } from "../icons/components/IconAscending.mjs";
+import { IconDescending } from "../icons/components/IconDescending.mjs";
+import { IconFilter } from "../icons/components/IconFilter.mjs";
+import { IconSorting } from "../icons/components/IconSorting.mjs";
+import { IconView } from "../icons/components/IconView.mjs";
+import watchMobxValue from "../lib/mobxSelector.mjs";
+import { createOverlayController } from "../overlays/overlayController.mjs";
+import { injectListModel } from "./listContext.mjs";
+import { useListTexts } from "./locales.mjs";
+import { listStyles } from "./styles.mjs";
+import { Popover } from "../overlays/Popover.mjs";
+import { PopoverTrigger } from "../overlays/triggers.mjs";
+import { isDateRangeFilter } from "./dateRangeFilter.mjs";
+import { ActiveFilters } from "./ActiveFilters.mjs";
+import { AllFiltersModal } from "./AllFiltersModal.mjs";
+import { defineComponent, h, onBeforeUnmount, ref, watch } from "vue";
+//#region src/list/Header.ts
+var autoSubmitTimeout = 500;
+var dateRangeCalendarClass = "flow--list--header--filter-context-menu--calendar";
+var availableViewModes = (shape) => {
+	const modes = [];
+	if (shape.itemView?.showList) modes.push("list");
+	if (shape.table) modes.push("table");
+	if (shape.itemView?.showTiles) modes.push("tiles");
+	return modes;
+};
+var outlineButton = (isDisabled) => ({
+	variant: "outline",
+	color: "secondary",
+	class: listStyles.hideOnMobile,
+	isDisabled
+});
+var renderViewModeMenu = (list, modes, texts, isDisabled, selected) => {
+	if (modes.length <= 1) return null;
+	return h(ContextMenuTrigger, null, () => [h(Button, {
+		...outlineButton(isDisabled),
+		"aria-label": texts("settings")
+	}, () => [h(Text, null, () => texts(`settings.viewMode.${selected}`)), h(IconView)]), h(ContextMenu, {
+		selectionMode: "single",
+		selectedKeys: [selected]
+	}, () => modes.map((mode) => h(MenuItem, {
+		key: mode,
+		id: mode,
+		onAction: () => list.viewMode.set(mode)
+	}, () => texts(`settings.viewMode.${mode}`))))]);
+};
+var renderSortingMenu = (list, texts, isDisabled) => {
+	const sortings = list.visibleSorting;
+	if (sortings.length === 0) return null;
+	const active = sortings.find((s) => s.isSorted());
+	return h(ContextMenuTrigger, null, () => [h(Button, outlineButton(isDisabled), () => [h(Text, null, () => active ? active.name ?? String(active.property) : texts("sorting")), h(active ? active.direction === "asc" ? IconAscending : IconDescending : IconSorting)]), h(ContextMenu, {
+		selectionMode: "single",
+		selectedKeys: active ? [active.id] : []
+	}, () => sortings.map((sorting) => h(MenuItem, {
+		key: sorting.id,
+		id: sorting.id,
+		onAction: () => sorting.enable()
+	}, () => `${sorting.name ?? String(sorting.property)} ${sorting.directionName ?? ""}`.trim())))]);
+};
+/**
+* A date-range filter is a calendar in a popover, not a menu of values.
+*
+* The same shape Flow's React list gives it — the calendar closes the popover
+* when a range is picked, because a range is complete the moment its second end
+* is.
+*/
+var renderDateRangeFilter = (filter, isDisabled, calendarLabel, controller) => h(PopoverTrigger, {
+	key: filter.storageKey,
+	controller
+}, () => [h(Button, outlineButton(isDisabled), () => [h(Text, null, () => filter.name ?? String(filter.property)), h(IconFilter)]), h(Popover, {
+	placement: "bottom end",
+	isDialogContent: true,
+	"aria-label": calendarLabel
+}, () => h(RangeCalendar, {
+	...filter.dateRangeOptions,
+	class: dateRangeCalendarClass,
+	value: filter.getValue(),
+	onChange: (range) => {
+		filter.setValue(range);
+		controller.close();
+	}
+}))]);
+var renderFilterMenu = (filter, isDisabled) => {
+	const selectionMode = filter.mode === "one" ? "single" : "multiple";
+	const values = filter.values;
+	return h(ContextMenuTrigger, { key: filter.storageKey }, () => [h(Button, outlineButton(isDisabled), () => [h(Text, null, () => filter.name ?? String(filter.property)), h(IconFilter)]), h(ContextMenu, {
+		selectionMode,
+		selectedKeys: values.filter((v) => v.isActive).map((v) => v.id),
+		onSelectionChange: selectionMode === "multiple" ? (keys) => keys === "all" ? filter.selectAll() : filter.setActiveValueIds(keys) : void 0,
+		showSelectAll: filter.isSelectAllAvailable
+	}, () => values.map((value) => h(MenuItem, {
+		key: value.id,
+		id: value.id,
+		onAction: () => {
+			if (selectionMode === "single" && !value.isActive) value.toggle();
+		}
+	}, () => value.render())))]);
+};
+/**
+* The list's controls: layout, sorting, filters, search — plus the app's own
+* `ActionGroup`, which the `List` hands over as the `actions` slot.
+*
+* Each one is a remote element the host materialises — a context menu trigger
+* with a button and a menu — and what they act on is the shared model, so a
+* filter behaves here exactly as it does in React.
+*/
+var Header = defineComponent({
+	name: "ListHeader",
+	setup(_props, { slots }) {
+		const list = injectListModel();
+		const texts = useListTexts();
+		const isEmpty = watchMobxValue(() => list.isEmpty);
+		const isInitiallyLoading = watchMobxValue(() => list.loaderState.isInitiallyLoading);
+		const emptyViewType = watchMobxValue(() => list.getEmptyViewType());
+		const viewMode = watchMobxValue(() => list.viewMode.value);
+		const tableRevision = watchMobxValue(() => list.listTable.revision);
+		const renderShape = watchMobxValue(() => list.renderShape);
+		const dateControllers = /* @__PURE__ */ new Map();
+		const dateController = (key) => {
+			const existing = dateControllers.get(key);
+			if (existing) return existing;
+			const created = createOverlayController();
+			dateControllers.set(key, created);
+			return created;
+		};
+		const searchShape = list.shape.search;
+		const autoSubmit = searchShape?.autoSubmit !== false;
+		const searchInput = ref(list.search?.value ?? "");
+		let previousSearch = "";
+		let submitTimeout;
+		const submitSearch = () => {
+			if (searchInput.value.trim() === "") list.search?.setValue(void 0);
+			else if (previousSearch !== searchInput.value) {
+				previousSearch = searchInput.value;
+				list.search?.setValue(searchInput.value);
+			}
+		};
+		const clearSearch = () => {
+			clearTimeout(submitTimeout);
+			list.search?.setValue(void 0);
+			searchInput.value = "";
+		};
+		watch(searchInput, () => {
+			clearTimeout(submitTimeout);
+			if (autoSubmit) submitTimeout = setTimeout(submitSearch, autoSubmitTimeout);
+		});
+		const searchValue = watchMobxValue(() => {
+			list.listTable.revision;
+			return list.search?.value;
+		});
+		watch(searchValue, (value) => {
+			searchInput.value = value ?? "";
+		});
+		const onSearchKeyUp = (event) => {
+			if (event?.key === "Enter" && !autoSubmit) submitSearch();
+			else if (event?.key === "Escape") clearSearch();
+		};
+		onBeforeUnmount(() => clearTimeout(submitTimeout));
+		return () => {
+			tableRevision.value;
+			const noItemsAvailable = isEmpty.value && emptyViewType.value === "list";
+			const isDisabled = isInitiallyLoading.value || noItemsAvailable;
+			const modes = availableViewModes(renderShape.value);
+			const actions = slots.actions?.();
+			const hasOptions = list.filters.length > 0 || list.visibleSorting.length > 0 || !!list.search || modes.length > 1;
+			if (noItemsAvailable) return h(Div, {
+				class: listStyles.hideVisuallyActions,
+				"aria-hidden": true
+			}, () => h(Div, { class: listStyles.headerContent }, () => [actions, null]));
+			const options = [
+				renderViewModeMenu(list, modes, texts.value, isDisabled, viewMode.value),
+				renderSortingMenu(list, texts.value, isDisabled),
+				...list.filters.filter((filter) => filter.priority === "primary").map((filter) => isDateRangeFilter(filter) ? renderDateRangeFilter(filter, isDisabled, texts.value("dateRange"), dateController(filter.storageKey)) : renderFilterMenu(filter, isDisabled)),
+				h(AllFiltersModal, {
+					isDisabled,
+					viewModes: modes
+				}),
+				list.search ? h(SearchField, {
+					class: listStyles.searchField,
+					isDisabled,
+					autoFocus: searchShape?.autoFocus,
+					value: searchInput.value,
+					onChange: (value) => {
+						searchInput.value = value;
+					},
+					onKeyUp: onSearchKeyUp,
+					onClear: clearSearch
+				}) : null
+			];
+			return h(Div, { class: [listStyles.header, list.search ? listStyles.headerWithSearch : void 0].filter(Boolean).join(" ") }, () => [h(Div, { class: listStyles.headerContent }, () => [actions, hasOptions ? h(Div, { class: listStyles.headerOptions }, () => options) : null]), h(ActiveFilters, { isDisabled })]);
+		};
+	}
+});
+composition(Header);
+//#endregion
+export { Header, Header as default };
+
+//# sourceMappingURL=Header.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Header.mjs","names":[],"sources":["../../../../../src/list/Header.ts"],"sourcesContent":["import {\n  Button,\n  ContextMenu,\n  ContextMenuTrigger,\n  Div,\n  MenuItem,\n  RangeCalendar,\n  SearchField,\n  Text,\n} from \"@/auto-generated\";\nimport { Popover } from \"@/overlays/Popover\";\nimport { PopoverTrigger } from \"@/overlays/triggers\";\nimport {\n  IconAscending,\n  IconDescending,\n  IconFilter,\n  IconSorting,\n  IconView,\n} from \"@/icons\";\nimport { watchMobxValue } from \"@/lib/mobxSelector\";\nimport {\n  createOverlayController,\n  type OverlayController,\n} from \"@/overlays/overlayController\";\nimport {\n  defineComponent,\n  h,\n  onBeforeUnmount,\n  ref,\n  watch,\n  type VNodeChild,\n} from \"vue\";\nimport { ActiveFilters } from \"./ActiveFilters\";\nimport { AllFiltersModal } from \"./AllFiltersModal\";\nimport { isDateRangeFilter } from \"./dateRangeFilter\";\nimport { injectListModel, type AnyListModel } from \"./listContext\";\nimport { useListTexts, type ListTextFormatter } from \"./locales\";\nimport type { ListRenderShape } from \"./model\";\nimport { listStyles } from \"./styles\";\nimport type { ListRendered } from \"./types\";\nimport { composition } from \"@/lib/composition\";\n\nconst autoSubmitTimeout = 500;\n\n/* `FilterContextMenus.module.scss`'s `.calendar`. */\nconst dateRangeCalendarClass =\n  \"flow--list--header--filter-context-menu--calendar\";\n\n/*\n * What the header needs of a sorting and of a filter, and nothing more.\n *\n * Not the classes themselves: a list of concrete filters is not assignable to\n * a list of generic ones, because a row model sits in a contravariant position\n * deep inside `Column`, so `Table<any>` and `Table<never>` never meet. Reading\n * only the members it renders keeps the header out of that entirely.\n */\ninterface HeaderSorting {\n  readonly id: string;\n  readonly name?: string;\n  readonly property: unknown;\n  readonly direction: \"asc\" | \"desc\";\n  readonly directionName?: string;\n  isSorted(): boolean;\n  enable(): void;\n}\n\ninterface HeaderFilterValue {\n  readonly id: string;\n  readonly isActive: boolean;\n  toggle(): void;\n  render(): ListRendered;\n}\n\ninterface HeaderDateRangeFilter {\n  readonly storageKey: string;\n  readonly name?: string;\n  readonly property: unknown;\n  readonly dateRangeOptions?: Record<string, unknown>;\n  getValue(): unknown;\n  setValue(range: unknown): void;\n}\n\ninterface HeaderFilter {\n  readonly storageKey: string;\n  readonly mode: string;\n  readonly priority: \"primary\" | \"secondary\";\n  readonly name?: string;\n  readonly property: unknown;\n  readonly values: HeaderFilterValue[];\n  readonly isSelectAllAvailable: boolean;\n  selectAll(): void;\n  setActiveValueIds(ids: Iterable<unknown>): void;\n}\n\n/** Which layouts this list can actually show. */\ntype ViewMode = \"list\" | \"table\" | \"tiles\";\n\nconst availableViewModes = (shape: ListRenderShape<never>): ViewMode[] => {\n  const modes: ViewMode[] = [];\n  if (shape.itemView?.showList) {\n    modes.push(\"list\");\n  }\n  if (shape.table) {\n    modes.push(\"table\");\n  }\n  if (shape.itemView?.showTiles) {\n    modes.push(\"tiles\");\n  }\n  return modes;\n};\n\nconst outlineButton = (isDisabled: boolean) => ({\n  variant: \"outline\" as const,\n  color: \"secondary\" as const,\n  class: listStyles.hideOnMobile,\n  isDisabled,\n});\n\nconst renderViewModeMenu = (\n  list: AnyListModel,\n  modes: ViewMode[],\n  texts: ListTextFormatter,\n  isDisabled: boolean,\n  selected: ViewMode,\n): VNodeChild => {\n  if (modes.length <= 1) {\n    return null;\n  }\n\n  return h(ContextMenuTrigger, null, () => [\n    h(\n      Button,\n      { ...outlineButton(isDisabled), \"aria-label\": texts(\"settings\") },\n      () => [\n        h(Text, null, () => texts(`settings.viewMode.${selected}`)),\n        h(IconView),\n      ],\n    ),\n    h(ContextMenu, { selectionMode: \"single\", selectedKeys: [selected] }, () =>\n      modes.map((mode) =>\n        h(\n          MenuItem,\n          { key: mode, id: mode, onAction: () => list.viewMode.set(mode) },\n          () => texts(`settings.viewMode.${mode}`),\n        ),\n      ),\n    ),\n  ]);\n};\n\nconst renderSortingMenu = (\n  list: AnyListModel,\n  texts: ListTextFormatter,\n  isDisabled: boolean,\n): VNodeChild => {\n  const sortings = list.visibleSorting as HeaderSorting[];\n\n  if (sortings.length === 0) {\n    return null;\n  }\n\n  const active = sortings.find((s) => s.isSorted());\n\n  return h(ContextMenuTrigger, null, () => [\n    h(Button, outlineButton(isDisabled), () => [\n      h(Text, null, () =>\n        active ? (active.name ?? String(active.property)) : texts(\"sorting\"),\n      ),\n      h(\n        active\n          ? active.direction === \"asc\"\n            ? IconAscending\n            : IconDescending\n          : IconSorting,\n      ),\n    ]),\n    h(\n      ContextMenu,\n      {\n        selectionMode: \"single\",\n        selectedKeys: active ? [active.id] : [],\n      },\n      () =>\n        sortings.map((sorting) =>\n          h(\n            MenuItem,\n            {\n              key: sorting.id,\n              id: sorting.id,\n              onAction: () => sorting.enable(),\n            },\n            () =>\n              `${sorting.name ?? String(sorting.property)} ${sorting.directionName ?? \"\"}`.trim(),\n          ),\n        ),\n    ),\n  ]);\n};\n\n/**\n * A date-range filter is a calendar in a popover, not a menu of values.\n *\n * The same shape Flow's React list gives it — the calendar closes the popover\n * when a range is picked, because a range is complete the moment its second end\n * is.\n */\nconst renderDateRangeFilter = (\n  filter: HeaderDateRangeFilter,\n  isDisabled: boolean,\n  calendarLabel: string,\n  controller: OverlayController,\n): VNodeChild =>\n  h(PopoverTrigger, { key: filter.storageKey, controller }, () => [\n    h(Button, outlineButton(isDisabled), () => [\n      h(Text, null, () => filter.name ?? String(filter.property)),\n      h(IconFilter),\n    ]),\n    h(\n      Popover,\n      {\n        placement: \"bottom end\",\n        isDialogContent: true,\n        \"aria-label\": calendarLabel,\n      },\n      () =>\n        /*\n         * Cast at the call, because the options are whatever the consumer\n         * handed the filter: an open record does not match a typed component's\n         * props, and TypeScript then resolves `h` to its instance overload.\n         */\n        h(RangeCalendar, {\n          ...filter.dateRangeOptions,\n          class: dateRangeCalendarClass,\n          value: filter.getValue(),\n          onChange: (range: unknown) => {\n            filter.setValue(range);\n            controller.close();\n          },\n        } as never),\n    ),\n  ]);\n\nconst renderFilterMenu = (\n  filter: HeaderFilter,\n  isDisabled: boolean,\n): VNodeChild => {\n  const selectionMode = filter.mode === \"one\" ? \"single\" : \"multiple\";\n  const values = filter.values;\n\n  return h(ContextMenuTrigger, { key: filter.storageKey }, () => [\n    h(Button, outlineButton(isDisabled), () => [\n      h(Text, null, () => filter.name ?? String(filter.property)),\n      h(IconFilter),\n    ]),\n    h(\n      ContextMenu,\n      {\n        selectionMode,\n        selectedKeys: values.filter((v) => v.isActive).map((v) => v.id),\n        /*\n         * Flow's: a multiple-choice menu reports its whole selection, and the\n         * \"Select all\" entry the host adds reports it as `\"all\"`.\n         */\n        onSelectionChange:\n          selectionMode === \"multiple\"\n            ? (keys: unknown) =>\n                keys === \"all\"\n                  ? filter.selectAll()\n                  : filter.setActiveValueIds(keys as Iterable<unknown>)\n            : undefined,\n        showSelectAll: filter.isSelectAllAvailable,\n      },\n      () =>\n        values.map((value) =>\n          h(\n            MenuItem,\n            {\n              key: value.id,\n              id: value.id,\n              /* A multiple choice goes through `onSelectionChange`. */\n              onAction: () => {\n                if (selectionMode === \"single\" && !value.isActive) {\n                  value.toggle();\n                }\n              },\n            },\n            () => value.render(),\n          ),\n        ),\n    ),\n  ]);\n};\n\n/**\n * The list's controls: layout, sorting, filters, search — plus the app's own\n * `ActionGroup`, which the `List` hands over as the `actions` slot.\n *\n * Each one is a remote element the host materialises — a context menu trigger\n * with a button and a menu — and what they act on is the shared model, so a\n * filter behaves here exactly as it does in React.\n */\nexport const Header = defineComponent({\n  name: \"ListHeader\",\n\n  setup(_props, { slots }) {\n    const list = injectListModel();\n    const texts = useListTexts();\n\n    const isEmpty = watchMobxValue(() => list.isEmpty);\n    const isInitiallyLoading = watchMobxValue(\n      () => list.loaderState.isInitiallyLoading,\n    );\n    const emptyViewType = watchMobxValue(() => list.getEmptyViewType());\n    const viewMode = watchMobxValue(() => list.viewMode.value);\n    /* Filters and sortings read the table, so they follow its revision. */\n    const tableRevision = watchMobxValue(() => list.listTable.revision);\n    const renderShape = watchMobxValue(() => list.renderShape);\n\n    /*\n     * One controller per date filter, kept for as long as the header is.\n     * Created in the render it would be a new one every time — and a range\n     * takes two clicks, so the popover would forget the first between them.\n     */\n    const dateControllers = new Map<string, OverlayController>();\n    const dateController = (key: string): OverlayController => {\n      const existing = dateControllers.get(key);\n      if (existing) {\n        return existing;\n      }\n      const created = createOverlayController();\n      dateControllers.set(key, created);\n      return created;\n    };\n\n    /*\n     * Flow's `DefaultSearchFieldRender`: the field holds what is typed, and a\n     * search is submitted after a pause — or, with `autoSubmit={false}`, on\n     * Enter. Escape and the clear button clear at once.\n     */\n    const searchShape = list.shape.search;\n    const autoSubmit = searchShape?.autoSubmit !== false;\n    const searchInput = ref(list.search?.value ?? \"\");\n    let previousSearch = \"\";\n    let submitTimeout: ReturnType<typeof setTimeout> | undefined;\n\n    const submitSearch = () => {\n      if (searchInput.value.trim() === \"\") {\n        list.search?.setValue(undefined);\n      } else if (previousSearch !== searchInput.value) {\n        previousSearch = searchInput.value;\n        list.search?.setValue(searchInput.value);\n      }\n    };\n\n    const clearSearch = () => {\n      clearTimeout(submitTimeout);\n      list.search?.setValue(undefined);\n      searchInput.value = \"\";\n    };\n\n    watch(searchInput, () => {\n      clearTimeout(submitTimeout);\n      if (autoSubmit) {\n        submitTimeout = setTimeout(submitSearch, autoSubmitTimeout);\n      }\n    });\n\n    /* A search set from outside the field — a reset — shows in it. */\n    const searchValue = watchMobxValue(() => {\n      void list.listTable.revision;\n      return list.search?.value;\n    });\n    watch(searchValue, (value) => {\n      searchInput.value = value ?? \"\";\n    });\n\n    const onSearchKeyUp = (event: { key?: string } | undefined) => {\n      if (event?.key === \"Enter\" && !autoSubmit) {\n        submitSearch();\n      } else if (event?.key === \"Escape\") {\n        clearSearch();\n      }\n    };\n\n    onBeforeUnmount(() => clearTimeout(submitTimeout));\n\n    return () => {\n      void tableRevision.value;\n\n      const noItemsAvailable = isEmpty.value && emptyViewType.value === \"list\";\n      const isDisabled = isInitiallyLoading.value || noItemsAvailable;\n      const modes = availableViewModes(renderShape.value);\n\n      const actions = slots.actions?.();\n\n      /*\n       * The header is rendered even with nothing in it, because Flow's is: it\n       * holds the app's own `ActionGroup`, and a list that gained one would\n       * otherwise change the DOM around it.\n       *\n       * Asked of the model rather than of what the options rendered — the\n       * all-filters modal decides for itself whether it has anything to show.\n       */\n      const hasOptions =\n        list.filters.length > 0 ||\n        list.visibleSorting.length > 0 ||\n        !!list.search ||\n        modes.length > 1;\n\n      /*\n       * Nothing to show yet and nothing to configure it with: Flow hides the\n       * header rather than dropping it, so what an app put in it keeps its\n       * state across the switch to and from the empty view.\n       */\n      if (noItemsAvailable) {\n        return h(\n          Div,\n          { class: listStyles.hideVisuallyActions, \"aria-hidden\": true },\n          /*\n           * Same nesting and same classes as the branch below, which is what\n           * Flow's comment on this branch asks for — the tunnel's content has\n           * to survive the switch. React arrives at the inner class by reusing\n           * the element rather than by setting it: a `className` that goes from\n           * set to undefined never reaches the host, so the previous one stays.\n           *\n           * `[actions, null]`, not `actions`: Vue wraps a nested array in a\n           * fragment, so only the same array shape keeps the actions at the\n           * same position in the same fragment — anything else remounts them,\n           * and a modal open from the header closes.\n           */\n          () =>\n            h(Div, { class: listStyles.headerContent }, () => [actions, null]),\n        );\n      }\n\n      const options: VNodeChild[] = [\n        renderViewModeMenu(\n          list,\n          modes,\n          texts.value,\n          isDisabled,\n          viewMode.value,\n        ),\n        renderSortingMenu(list, texts.value, isDisabled),\n        /*\n         * Primary only. A secondary filter is reachable through the\n         * all-filters modal, which is the whole reason that modal shows on\n         * desktop at all.\n         */\n        ...(list.filters as HeaderFilter[])\n          .filter((filter) => filter.priority === \"primary\")\n          .map((filter) =>\n            isDateRangeFilter(filter)\n              ? renderDateRangeFilter(\n                  filter as unknown as HeaderDateRangeFilter,\n                  isDisabled,\n                  texts.value(\"dateRange\"),\n                  dateController(filter.storageKey),\n                )\n              : renderFilterMenu(filter, isDisabled),\n          ),\n        h(AllFiltersModal, { isDisabled, viewModes: modes }),\n        list.search\n          ? h(SearchField, {\n              class: listStyles.searchField,\n              isDisabled,\n              autoFocus: searchShape?.autoFocus,\n              value: searchInput.value,\n              onChange: (value: string) => {\n                searchInput.value = value;\n              },\n              onKeyUp: onSearchKeyUp,\n              onClear: clearSearch,\n            })\n          : null,\n      ];\n\n      return h(\n        Div,\n        {\n          class: [\n            listStyles.header,\n            list.search ? listStyles.headerWithSearch : undefined,\n          ]\n            .filter(Boolean)\n            .join(\" \"),\n        },\n        () => [\n          h(Div, { class: listStyles.headerContent }, () => [\n            actions,\n            hasOptions\n              ? h(Div, { class: listStyles.headerOptions }, () => options)\n              : null,\n          ]),\n          h(ActiveFilters, { isDisabled }),\n        ],\n      );\n    };\n  },\n});\n\ncomposition(Header);\n\nexport default Header;\n"],"mappings":"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"}

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

@@ -0,0 +1,64 @@
+import { composition } from "../lib/composition.mjs";
+import { ItemsGridListItem } from "../auto-generated/ItemsGridListItem.mjs";
+import watchMobxValue from "../lib/mobxSelector.mjs";
+import { injectListModel } from "./listContext.mjs";
+import { provideItemAccordion } from "./itemContext.mjs";
+import { computed, defineComponent, h, ref, useId } from "vue";
+//#region src/list/Item.ts
+/**
+* One item of the list.
+*
+* A component rather than a few lines in `Items`, because an expandable item
+* holds state: each one is open or closed on its own, and a render function has
+* nowhere to keep that.
+*/
+var ListItemRow = defineComponent({
+	name: "ListItemRow",
+	props: {
+		itemId: {
+			type: String,
+			required: true
+		},
+		data: {
+			type: null,
+			required: true
+		},
+		isTile: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(props) {
+		const list = injectListModel();
+		const contentId = useId();
+		const renderShape = watchMobxValue(() => list.renderShape);
+		const isExpanded = ref(renderShape.value.itemView?.defaultExpanded?.(props.data) ?? false);
+		const toggle = () => {
+			isExpanded.value = !isExpanded.value;
+			renderShape.value.onAction?.(props.data);
+		};
+		provideItemAccordion({
+			isActive: computed(() => !!renderShape.value.accordion),
+			isExpanded,
+			contentId,
+			toggle
+		});
+		return () => {
+			const { itemView, onAction, accordion } = renderShape.value;
+			return h(ItemsGridListItem, {
+				id: props.itemId,
+				textValue: itemView?.textValue?.(props.data),
+				href: itemView?.href?.(props.data),
+				target: itemView?.target,
+				hasAction: !!accordion || !!onAction || !!itemView?.href,
+				isTile: props.isTile,
+				onAction: accordion ? toggle : onAction ? () => onAction(props.data) : void 0
+			}, () => itemView?.render?.(props.data));
+		};
+	}
+});
+composition(ListItemRow);
+//#endregion
+export { ListItemRow, ListItemRow as default };
+
+//# sourceMappingURL=Item.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Item.mjs","names":[],"sources":["../../../../../src/list/Item.ts"],"sourcesContent":["import { ItemsGridListItem } from \"@/auto-generated\";\nimport { watchMobxValue } from \"@/lib/mobxSelector\";\nimport { computed, defineComponent, h, ref, useId, type PropType } from \"vue\";\nimport { provideItemAccordion } from \"./itemContext\";\nimport { injectListModel } from \"./listContext\";\nimport { composition } from \"@/lib/composition\";\n\n/**\n * One item of the list.\n *\n * A component rather than a few lines in `Items`, because an expandable item\n * holds state: each one is open or closed on its own, and a render function has\n * nowhere to keep that.\n */\nexport const ListItemRow = defineComponent({\n  name: \"ListItemRow\",\n\n  props: {\n    itemId: { type: String, required: true },\n    data: { type: null as unknown as PropType<never>, required: true },\n    isTile: { type: Boolean, default: false },\n  },\n\n  setup(props) {\n    const list = injectListModel();\n    const contentId = useId();\n    const renderShape = watchMobxValue(() => list.renderShape);\n\n    const isExpanded = ref(\n      renderShape.value.itemView?.defaultExpanded?.(props.data) ?? false,\n    );\n\n    const toggle = () => {\n      isExpanded.value = !isExpanded.value;\n      renderShape.value.onAction?.(props.data);\n    };\n\n    provideItemAccordion({\n      isActive: computed(() => !!renderShape.value.accordion),\n      isExpanded,\n      contentId,\n      toggle,\n    });\n\n    return () => {\n      const { itemView, onAction, accordion } = renderShape.value;\n\n      return h(\n        ItemsGridListItem,\n        {\n          id: props.itemId,\n          textValue: itemView?.textValue?.(props.data),\n          href: itemView?.href?.(props.data),\n          target: itemView?.target,\n          /* In accordion mode every item acts — the action is the toggle. */\n          hasAction: !!accordion || !!onAction || !!itemView?.href,\n          isTile: props.isTile,\n          /* In accordion mode the item's action is the toggle, as in Flow. */\n          onAction: accordion\n            ? toggle\n            : onAction\n              ? () => onAction(props.data)\n              : undefined,\n        },\n        () => itemView?.render?.(props.data),\n      );\n    };\n  },\n});\n\ncomposition(ListItemRow);\n\nexport default ListItemRow;\n"],"mappings":";;;;;;;;;;;;;;AAcA,IAAa,cAAc,gBAAgB;CACzC,MAAM;CAEN,OAAO;EACL,QAAQ;GAAE,MAAM;GAAQ,UAAU;EAAK;EACvC,MAAM;GAAE,MAAM;GAAoC,UAAU;EAAK;EACjE,QAAQ;GAAE,MAAM;GAAS,SAAS;EAAM;CAC1C;CAEA,MAAM,OAAO;EACX,MAAM,OAAO,gBAAgB;EAC7B,MAAM,YAAY,MAAM;EACxB,MAAM,cAAc,qBAAqB,KAAK,WAAW;EAEzD,MAAM,aAAa,IACjB,YAAY,MAAM,UAAU,kBAAkB,MAAM,IAAI,KAAK,KAC/D;EAEA,MAAM,eAAe;GACnB,WAAW,QAAQ,CAAC,WAAW;GAC/B,YAAY,MAAM,WAAW,MAAM,IAAI;EACzC;EAEA,qBAAqB;GACnB,UAAU,eAAe,CAAC,CAAC,YAAY,MAAM,SAAS;GACtD;GACA;GACA;EACF,CAAC;EAED,aAAa;GACX,MAAM,EAAE,UAAU,UAAU,cAAc,YAAY;GAEtD,OAAO,EACL,mBACA;IACE,IAAI,MAAM;IACV,WAAW,UAAU,YAAY,MAAM,IAAI;IAC3C,MAAM,UAAU,OAAO,MAAM,IAAI;IACjC,QAAQ,UAAU;IAElB,WAAW,CAAC,CAAC,aAAa,CAAC,CAAC,YAAY,CAAC,CAAC,UAAU;IACpD,QAAQ,MAAM;IAEd,UAAU,YACN,SACA,iBACQ,SAAS,MAAM,IAAI,IACzB,KAAA;GACR,SACM,UAAU,SAAS,MAAM,IAAI,CACrC;EACF;CACF;AACF,CAAC;AAED,YAAY,WAAW"}

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

@@ -0,0 +1,71 @@
+import { composition } from "../lib/composition.mjs";
+import { Avatar } from "../auto-generated/Avatar.mjs";
+import { Div } from "../auto-generated/Div.mjs";
+import { Heading } from "../auto-generated/Heading.mjs";
+import { ItemsGridList } from "../auto-generated/ItemsGridList.mjs";
+import { ItemsGridListItem } from "../auto-generated/ItemsGridListItem.mjs";
+import { ListItemViewContent } from "../auto-generated/ListItemViewContent.mjs";
+import { Skeleton } from "../auto-generated/Skeleton.mjs";
+import { SkeletonText } from "../auto-generated/SkeletonText.mjs";
+import { Text } from "../auto-generated/Text.mjs";
+import watchMobxValue from "../lib/mobxSelector.mjs";
+import { injectListModel } from "./listContext.mjs";
+import { className, listStyles } from "./styles.mjs";
+import { ListItemRow } from "./Item.mjs";
+import { defineComponent, h } from "vue";
+//#region src/list/Items.ts
+/**
+* The list's items, as a grid list.
+*
+* The same element Flow's React list renders (`flr-items-grid-list`), so the
+* host materialises the same component — layout, selection and keyboard
+* behaviour included. What is rebuilt here is only which items go into it.
+*/
+var Items = defineComponent({
+	name: "ListItems",
+	setup() {
+		const list = injectListModel();
+		const items = watchMobxValue(() => list.renderedItems);
+		const isLoading = watchMobxValue(() => list.loaderState.isLoading);
+		const isInitiallyLoading = watchMobxValue(() => list.loaderState.isInitiallyLoading);
+		const isTiles = watchMobxValue(() => list.viewMode.isTiles);
+		const viewMode = watchMobxValue(() => list.viewMode.value);
+		const renderShape = watchMobxValue(() => list.renderShape);
+		const renderSkeletons = () => Array.from({ length: list.loadingItemsCount }, (_unused, index) => h(ItemsGridListItem, {
+			key: `skeleton-${index}`,
+			textValue: "-",
+			isTile: isTiles.value
+		}, () => h(ListItemViewContent, { viewMode: viewMode.value }, {
+			title: () => h(Heading, null, () => h(SkeletonText, { width: "200px" })),
+			...isTiles.value ? { avatar: () => h(Avatar, null, () => h(Skeleton)) } : {},
+			subTitle: () => h(Text, null, () => h(SkeletonText, { width: "300px" }))
+		})));
+		const renderItems = () => items.value.map((item) => h(ListItemRow, {
+			key: item.id,
+			itemId: item.id,
+			data: item.data,
+			isTile: isTiles.value
+		}));
+		return () => {
+			const shape = renderShape.value;
+			const itemView = shape.itemView;
+			if (!itemView) return null;
+			return h(Div, {
+				"aria-hidden": isInitiallyLoading.value,
+				"aria-busy": isLoading.value
+			}, () => h(ItemsGridList, {
+				...shape.componentProps,
+				class: className(listStyles.items, isLoading.value && listStyles.itemsLoading, isTiles.value && listStyles.itemsTiles),
+				"aria-label": shape["aria-label"],
+				"aria-labelledby": shape["aria-label"] ? void 0 : shape["aria-labelledby"],
+				layout: isTiles.value ? "grid" : "stack",
+				tileMaxWidth: itemView.tileMaxWidth
+			}, () => items.value.length === 0 && isInitiallyLoading.value ? renderSkeletons() : renderItems()));
+		};
+	}
+});
+composition(Items);
+//#endregion
+export { Items, Items as default };
+
+//# sourceMappingURL=Items.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Items.mjs","names":[],"sources":["../../../../../src/list/Items.ts"],"sourcesContent":["import {\n  Avatar,\n  Div,\n  Heading,\n  ItemsGridList,\n  ItemsGridListItem,\n  ListItemViewContent,\n  Skeleton,\n  SkeletonText,\n  Text,\n} from \"@/auto-generated\";\nimport { watchMobxValue } from \"@/lib/mobxSelector\";\nimport { defineComponent, h, type VNodeChild } from \"vue\";\nimport { ListItemRow } from \"./Item\";\nimport { injectListModel } from \"./listContext\";\nimport { className, listStyles } from \"./styles\";\nimport { composition } from \"@/lib/composition\";\n\n/**\n * The list's items, as a grid list.\n *\n * The same element Flow's React list renders (`flr-items-grid-list`), so the\n * host materialises the same component — layout, selection and keyboard\n * behaviour included. What is rebuilt here is only which items go into it.\n */\nexport const Items = defineComponent({\n  name: \"ListItems\",\n\n  setup() {\n    const list = injectListModel();\n\n    const items = watchMobxValue(() => list.renderedItems);\n    const isLoading = watchMobxValue(() => list.loaderState.isLoading);\n    const isInitiallyLoading = watchMobxValue(\n      () => list.loaderState.isInitiallyLoading,\n    );\n    const isTiles = watchMobxValue(() => list.viewMode.isTiles);\n    const viewMode = watchMobxValue(() => list.viewMode.value);\n    const renderShape = watchMobxValue(() => list.renderShape);\n\n    /*\n     * Placeholders in the item's shape while the first batch is on its way —\n     * the same shape Flow's `ListItemSkeletonView` builds: a title and a\n     * subtitle, plus the avatar the tile view has room for. A single bar\n     * instead is a different loading state, which is what the demo shows\n     * side by side.\n     */\n    const renderSkeletons = (): VNodeChild[] =>\n      Array.from({ length: list.loadingItemsCount }, (_unused, index) =>\n        h(\n          ItemsGridListItem,\n          {\n            key: `skeleton-${index}`,\n            textValue: \"-\",\n            isTile: isTiles.value,\n          },\n          () =>\n            h(\n              ListItemViewContent,\n              { viewMode: viewMode.value },\n              {\n                title: () =>\n                  h(Heading, null, () => h(SkeletonText, { width: \"200px\" })),\n                /*\n                 * No aspect ratio: Flow's `ListItemSkeletonView` sets it as a\n                 * `style`, which the host drops for a remote list.\n                 */\n                ...(isTiles.value\n                  ? { avatar: () => h(Avatar, null, () => h(Skeleton)) }\n                  : {}),\n                subTitle: () =>\n                  h(Text, null, () => h(SkeletonText, { width: \"300px\" })),\n              },\n            ),\n        ),\n      );\n\n    const renderItems = (): VNodeChild[] =>\n      items.value.map((item) =>\n        h(ListItemRow, {\n          key: item.id,\n          itemId: item.id,\n          data: item.data,\n          isTile: isTiles.value,\n        }),\n      );\n\n    return () => {\n      const shape = renderShape.value;\n      const itemView = shape.itemView;\n      if (!itemView) {\n        return null;\n      }\n\n      return h(\n        Div,\n        {\n          \"aria-hidden\": isInitiallyLoading.value,\n          \"aria-busy\": isLoading.value,\n        },\n        () =>\n          h(\n            ItemsGridList,\n            {\n              ...shape.componentProps,\n              class: className(\n                listStyles.items,\n                isLoading.value && listStyles.itemsLoading,\n                isTiles.value && listStyles.itemsTiles,\n              ),\n              \"aria-label\": shape[\"aria-label\"],\n              \"aria-labelledby\": shape[\"aria-label\"]\n                ? undefined\n                : shape[\"aria-labelledby\"],\n              layout: isTiles.value ? \"grid\" : \"stack\",\n              tileMaxWidth: itemView.tileMaxWidth,\n            },\n            () =>\n              items.value.length === 0 && isInitiallyLoading.value\n                ? renderSkeletons()\n                : renderItems(),\n          ),\n      );\n    };\n  },\n});\n\ncomposition(Items);\n\nexport default Items;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAyBA,IAAa,QAAQ,gBAAgB;CACnC,MAAM;CAEN,QAAQ;EACN,MAAM,OAAO,gBAAgB;EAE7B,MAAM,QAAQ,qBAAqB,KAAK,aAAa;EACrD,MAAM,YAAY,qBAAqB,KAAK,YAAY,SAAS;EACjE,MAAM,qBAAqB,qBACnB,KAAK,YAAY,kBACzB;EACA,MAAM,UAAU,qBAAqB,KAAK,SAAS,OAAO;EAC1D,MAAM,WAAW,qBAAqB,KAAK,SAAS,KAAK;EACzD,MAAM,cAAc,qBAAqB,KAAK,WAAW;EASzD,MAAM,wBACJ,MAAM,KAAK,EAAE,QAAQ,KAAK,kBAAkB,IAAI,SAAS,UACvD,EACE,mBACA;GACE,KAAK,YAAY;GACjB,WAAW;GACX,QAAQ,QAAQ;EAClB,SAEE,EACE,qBACA,EAAE,UAAU,SAAS,MAAM,GAC3B;GACE,aACE,EAAE,SAAS,YAAY,EAAE,cAAc,EAAE,OAAO,QAAQ,CAAC,CAAC;GAK5D,GAAI,QAAQ,QACR,EAAE,cAAc,EAAE,QAAQ,YAAY,EAAE,QAAQ,CAAC,EAAE,IACnD,CAAC;GACL,gBACE,EAAE,MAAM,YAAY,EAAE,cAAc,EAAE,OAAO,QAAQ,CAAC,CAAC;EAC3D,CACF,CACJ,CACF;EAEF,MAAM,oBACJ,MAAM,MAAM,KAAK,SACf,EAAE,aAAa;GACb,KAAK,KAAK;GACV,QAAQ,KAAK;GACb,MAAM,KAAK;GACX,QAAQ,QAAQ;EAClB,CAAC,CACH;EAEF,aAAa;GACX,MAAM,QAAQ,YAAY;GAC1B,MAAM,WAAW,MAAM;GACvB,IAAI,CAAC,UACH,OAAO;GAGT,OAAO,EACL,KACA;IACE,eAAe,mBAAmB;IAClC,aAAa,UAAU;GACzB,SAEE,EACE,eACA;IACE,GAAG,MAAM;IACT,OAAO,UACL,WAAW,OACX,UAAU,SAAS,WAAW,cAC9B,QAAQ,SAAS,WAAW,UAC9B;IACA,cAAc,MAAM;IACpB,mBAAmB,MAAM,gBACrB,KAAA,IACA,MAAM;IACV,QAAQ,QAAQ,QAAQ,SAAS;IACjC,cAAc,SAAS;GACzB,SAEE,MAAM,MAAM,WAAW,KAAK,mBAAmB,QAC3C,gBAAgB,IAChB,YAAY,CACpB,CACJ;EACF;CACF;AACF,CAAC;AAED,YAAY,KAAK"}