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

package/dist/js/remote-vue-components/src/lib/vModel.mjs

@@ -0,0 +1,85 @@
+import { hyphenate } from "./propKeys.mjs";
+import { camelize } from "vue";
+//#region src/lib/vModel.ts
+/** Tried in order for a bare `v-model`: the first the element has wins. */
+var defaultModelProperties = [
+	"value",
+	"isSelected",
+	"selectedKey",
+	"selectedKeys"
+];
+/**
+* Events a prop reports through besides `<base>Change`, by base name — the prop
+* without `is`, and without a trailing `Value`/`Key`/`Keys`.
+*/
+var modelEventAliases = {
+	"": ["change"],
+	selected: ["selectionChange", "change"],
+	focused: ["focusChange"]
+};
+var capitalize = (value) => value.charAt(0).toUpperCase() + value.slice(1);
+var uncapitalize = (value) => value.charAt(0).toLowerCase() + value.slice(1);
+var isControllable = (property, properties) => {
+	if (!properties.has(property)) return false;
+	const [, flag] = /^is([A-Z].*)$/.exec(property) ?? [];
+	return properties.has(`default${capitalize(property)}`) || flag !== void 0 && (properties.has(`default${flag}`) || properties.has(`isDefault${flag}`));
+};
+/**
+* The event that reports a prop: `isOpen` → `openChange`, `inputValue` →
+* `inputChange`, `expandedKeys` → `expandedChange`, `selectedKey` →
+* `selectionChange`, `focusedValue` → `focusChange`. `value` and `isSelected`
+* report through `change`.
+*/
+var eventCandidates = (property) => {
+	const base = uncapitalize(property.replace(/^is(?=[A-Z])/, "").replace(/(^value|Value|Keys|Key)$/, ""));
+	const aliases = Object.hasOwn(modelEventAliases, base) ? modelEventAliases[base] : [];
+	return [...base === "" ? [] : [`${base}Change`], ...aliases];
+};
+var createModelResolver = (properties, events) => {
+	const resolve = (property) => {
+		if (!isControllable(property, properties)) return;
+		const event = eventCandidates(property).find((name) => events.has(name));
+		return event === void 0 ? void 0 : {
+			property,
+			event
+		};
+	};
+	const defaultBinding = defaultModelProperties.map(resolve).find((binding) => binding !== void 0);
+	return { 
+	/**
+	* The binding for a `v-model` argument as the template wrote it —
+	* `modelValue` for a bare `v-model`, else the prop in either spelling.
+	*/
+resolve: (argument) => argument === "modelValue" ? defaultBinding : resolve(camelize(argument)) };
+};
+/** `onUpdate:isOpen` → `isOpen`. */
+var modelUpdateArgument = (key) => key.startsWith("onUpdate:") ? key.slice(9) : void 0;
+/**
+* The modifiers of a `v-model`, which Vue passes as a prop of their own:
+* `modelModifiers`, or `<arg>Modifiers` in whichever spelling the template used
+* — Vue's own `emit` looks up the same three.
+*/
+var modelModifierKeys = (argument) => argument === "modelValue" ? ["modelModifiers"] : [
+	`${argument}Modifiers`,
+	`${camelize(argument)}Modifiers`,
+	`${hyphenate(argument)}Modifiers`
+];
+var isModelModifierKey = (key) => key.endsWith("Modifiers");
+/**
+* `.trim` and `.number`, which Vue's `emit` applies for a component that emits
+* `update:*` itself. The element reports the value, not an emit, so they are
+* applied here.
+*/
+var applyModelModifiers = (value, modifiers) => {
+	let result = value;
+	if (modifiers?.trim && typeof result === "string") result = result.trim();
+	if (modifiers?.number && typeof result === "string") {
+		const number = Number.parseFloat(result);
+		result = Number.isNaN(number) ? result : number;
+	}
+	return result;
+};
+//#endregion
+export { applyModelModifiers, createModelResolver, defaultModelProperties, isModelModifierKey, modelEventAliases, modelModifierKeys, modelUpdateArgument };
+
+//# sourceMappingURL=vModel.mjs.map

package/dist/js/remote-vue-components/src/lib/vModel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"vModel.mjs","names":[],"sources":["../../../../../src/lib/vModel.ts"],"sourcesContent":["import { camelize } from \"vue\";\nimport { hyphenate } from \"@/lib/propKeys\";\n\n/**\n * `v-model` on a remote component.\n *\n * Vue compiles `v-model=\"x\"` on a component to `modelValue` plus\n * `onUpdate:modelValue`, and `v-model:is-open=\"x\"` to `is-open` plus\n * `onUpdate:isOpen`. Neither is a key the element knows: the Flow component\n * takes a prop and reports its change as an event of its own. So this maps both\n * halves onto the pair the element has — `value` and `change`, `isOpen` and\n * `openChange`, `selectedKey` and `selectionChange`.\n *\n * A prop can be bound when it is controllable, which Flow — like react-aria —\n * spells as a `default*` sibling (`defaultValue`, `defaultOpen` or\n * `isDefaultOpen` for `isOpen`), and when the element has the event that\n * reports it. `ModelKey` in `src/lib/types.ts` is the same rule over the props\n * type.\n */\nexport interface ModelBinding {\n  property: string;\n  event: string;\n}\n\n/** Tried in order for a bare `v-model`: the first the element has wins. */\nexport const defaultModelProperties = [\n  \"value\",\n  \"isSelected\",\n  \"selectedKey\",\n  \"selectedKeys\",\n] as const;\n\n/**\n * Events a prop reports through besides `<base>Change`, by base name — the prop\n * without `is`, and without a trailing `Value`/`Key`/`Keys`.\n */\nexport const modelEventAliases = {\n  \"\": [\"change\"],\n  selected: [\"selectionChange\", \"change\"],\n  focused: [\"focusChange\"],\n} as const satisfies Record<string, readonly string[]>;\n\nconst capitalize = (value: string): string =>\n  value.charAt(0).toUpperCase() + value.slice(1);\n\nconst uncapitalize = (value: string): string =>\n  value.charAt(0).toLowerCase() + value.slice(1);\n\nconst isControllable = (\n  property: string,\n  properties: ReadonlyMap<string, unknown>,\n): boolean => {\n  if (!properties.has(property)) {\n    return false;\n  }\n  const [, flag] = /^is([A-Z].*)$/.exec(property) ?? [];\n  return (\n    properties.has(`default${capitalize(property)}`) ||\n    (flag !== undefined &&\n      (properties.has(`default${flag}`) || properties.has(`isDefault${flag}`)))\n  );\n};\n\n/**\n * The event that reports a prop: `isOpen` → `openChange`, `inputValue` →\n * `inputChange`, `expandedKeys` → `expandedChange`, `selectedKey` →\n * `selectionChange`, `focusedValue` → `focusChange`. `value` and `isSelected`\n * report through `change`.\n */\nconst eventCandidates = (property: string): string[] => {\n  const base = uncapitalize(\n    property\n      .replace(/^is(?=[A-Z])/, \"\")\n      .replace(/(^value|Value|Keys|Key)$/, \"\"),\n  );\n  const aliases: readonly string[] = Object.hasOwn(modelEventAliases, base)\n    ? modelEventAliases[base as keyof typeof modelEventAliases]\n    : [];\n\n  return [...(base === \"\" ? [] : [`${base}Change`]), ...aliases];\n};\n\nexport const createModelResolver = (\n  properties: ReadonlyMap<string, unknown>,\n  events: ReadonlyMap<string, unknown>,\n) => {\n  const resolve = (property: string): ModelBinding | undefined => {\n    if (!isControllable(property, properties)) {\n      return undefined;\n    }\n    const event = eventCandidates(property).find((name) => events.has(name));\n    return event === undefined ? undefined : { property, event };\n  };\n\n  const defaultBinding = defaultModelProperties\n    .map(resolve)\n    .find((binding) => binding !== undefined);\n\n  return {\n    /**\n     * The binding for a `v-model` argument as the template wrote it —\n     * `modelValue` for a bare `v-model`, else the prop in either spelling.\n     */\n    resolve: (argument: string): ModelBinding | undefined =>\n      argument === \"modelValue\" ? defaultBinding : resolve(camelize(argument)),\n  };\n};\n\n/** `onUpdate:isOpen` → `isOpen`. */\nexport const modelUpdateArgument = (key: string): string | undefined =>\n  key.startsWith(\"onUpdate:\") ? key.slice(\"onUpdate:\".length) : undefined;\n\n/**\n * The modifiers of a `v-model`, which Vue passes as a prop of their own:\n * `modelModifiers`, or `<arg>Modifiers` in whichever spelling the template used\n * — Vue's own `emit` looks up the same three.\n */\nexport const modelModifierKeys = (argument: string): string[] =>\n  argument === \"modelValue\"\n    ? [\"modelModifiers\"]\n    : [\n        `${argument}Modifiers`,\n        `${camelize(argument)}Modifiers`,\n        `${hyphenate(argument)}Modifiers`,\n      ];\n\nexport const isModelModifierKey = (key: string): boolean =>\n  key.endsWith(\"Modifiers\");\n\n/**\n * `.trim` and `.number`, which Vue's `emit` applies for a component that emits\n * `update:*` itself. The element reports the value, not an emit, so they are\n * applied here.\n */\nexport const applyModelModifiers = (\n  value: unknown,\n  modifiers: Record<string, unknown> | undefined,\n): unknown => {\n  let result = value;\n  if (modifiers?.trim && typeof result === \"string\") {\n    result = result.trim();\n  }\n  if (modifiers?.number && typeof result === \"string\") {\n    const number = Number.parseFloat(result);\n    result = Number.isNaN(number) ? result : number;\n  }\n  return result;\n};\n"],"mappings":";;;;AAyBA,IAAa,yBAAyB;CACpC;CACA;CACA;CACA;AACF;;;;;AAMA,IAAa,oBAAoB;CAC/B,IAAI,CAAC,QAAQ;CACb,UAAU,CAAC,mBAAmB,QAAQ;CACtC,SAAS,CAAC,aAAa;AACzB;AAEA,IAAM,cAAc,UAClB,MAAM,OAAO,CAAC,CAAC,CAAC,YAAY,IAAI,MAAM,MAAM,CAAC;AAE/C,IAAM,gBAAgB,UACpB,MAAM,OAAO,CAAC,CAAC,CAAC,YAAY,IAAI,MAAM,MAAM,CAAC;AAE/C,IAAM,kBACJ,UACA,eACY;CACZ,IAAI,CAAC,WAAW,IAAI,QAAQ,GAC1B,OAAO;CAET,MAAM,GAAG,QAAQ,gBAAgB,KAAK,QAAQ,KAAK,CAAC;CACpD,OACE,WAAW,IAAI,UAAU,WAAW,QAAQ,GAAG,KAC9C,SAAS,KAAA,MACP,WAAW,IAAI,UAAU,MAAM,KAAK,WAAW,IAAI,YAAY,MAAM;AAE5E;;;;;;;AAQA,IAAM,mBAAmB,aAA+B;CACtD,MAAM,OAAO,aACX,SACG,QAAQ,gBAAgB,EAAE,CAAC,CAC3B,QAAQ,4BAA4B,EAAE,CAC3C;CACA,MAAM,UAA6B,OAAO,OAAO,mBAAmB,IAAI,IACpE,kBAAkB,QAClB,CAAC;CAEL,OAAO,CAAC,GAAI,SAAS,KAAK,CAAC,IAAI,CAAC,GAAG,KAAK,OAAO,GAAI,GAAG,OAAO;AAC/D;AAEA,IAAa,uBACX,YACA,WACG;CACH,MAAM,WAAW,aAA+C;EAC9D,IAAI,CAAC,eAAe,UAAU,UAAU,GACtC;EAEF,MAAM,QAAQ,gBAAgB,QAAQ,CAAC,CAAC,MAAM,SAAS,OAAO,IAAI,IAAI,CAAC;EACvE,OAAO,UAAU,KAAA,IAAY,KAAA,IAAY;GAAE;GAAU;EAAM;CAC7D;CAEA,MAAM,iBAAiB,uBACpB,IAAI,OAAO,CAAC,CACZ,MAAM,YAAY,YAAY,KAAA,CAAS;CAE1C,OAAO;;;;;AAKL,UAAU,aACR,aAAa,eAAe,iBAAiB,QAAQ,SAAS,QAAQ,CAAC,EAC3E;AACF;;AAGA,IAAa,uBAAuB,QAClC,IAAI,WAAW,WAAW,IAAI,IAAI,MAAM,CAAkB,IAAI,KAAA;;;;;;AAOhE,IAAa,qBAAqB,aAChC,aAAa,eACT,CAAC,gBAAgB,IACjB;CACE,GAAG,SAAS;CACZ,GAAG,SAAS,QAAQ,EAAE;CACtB,GAAG,UAAU,QAAQ,EAAE;AACzB;AAEN,IAAa,sBAAsB,QACjC,IAAI,SAAS,WAAW;;;;;;AAO1B,IAAa,uBACX,OACA,cACY;CACZ,IAAI,SAAS;CACb,IAAI,WAAW,QAAQ,OAAO,WAAW,UACvC,SAAS,OAAO,KAAK;CAEvB,IAAI,WAAW,UAAU,OAAO,WAAW,UAAU;EACnD,MAAM,SAAS,OAAO,WAAW,MAAM;EACvC,SAAS,OAAO,MAAM,MAAM,IAAI,SAAS;CAC3C;CACA,OAAO;AACT"}

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

@@ -0,0 +1,83 @@
+import { composition } from "../lib/composition.mjs";
+import { Badge } from "../auto-generated/Badge.mjs";
+import { Button } from "../auto-generated/Button.mjs";
+import { Div } from "../auto-generated/Div.mjs";
+import { Text } from "../auto-generated/Text.mjs";
+import { Tooltip } from "../auto-generated/Tooltip.mjs";
+import { TooltipTrigger } from "../auto-generated/TooltipTrigger.mjs";
+import { IconClose } from "../icons/components/IconClose.mjs";
+import { IconSave } from "../icons/components/IconSave.mjs";
+import { IconUndo } from "../icons/components/IconUndo.mjs";
+import watchMobxValue from "../lib/mobxSelector.mjs";
+import { ListFilter } from "../../../components-base/src/list/filter/ListFilter.mjs";
+import "../../../components-base/src/index.mjs";
+import { injectListModel } from "./listContext.mjs";
+import { useListTexts } from "./locales.mjs";
+import { listStyles } from "./styles.mjs";
+import { formatDateRange, isDateRangeFilter } from "./dateRangeFilter.mjs";
+import { defineComponent, h } from "vue";
+//#region src/list/ActiveFilters.ts
+/**
+* The selected filter values, and what can be done with the set of them.
+*
+* Shown beside the filter menus rather than inside them, so a selection made in
+* one menu stays visible while another is open — and can be taken back one
+* value at a time.
+*/
+var ActiveFilters = defineComponent({
+	name: "ListActiveFilters",
+	props: { isDisabled: {
+		type: Boolean,
+		default: false
+	} },
+	setup(props) {
+		const list = injectListModel();
+		const texts = useListTexts();
+		const tableRevision = watchMobxValue(() => list.listTable.revision);
+		const iconButton = (label, icon, onPress, { labelled = true } = {}) => h(TooltipTrigger, { isDisabled: props.isDisabled }, () => [h(Tooltip, null, () => texts.value(label)), h(Button, {
+			size: "s",
+			variant: "plain",
+			color: "secondary",
+			"aria-label": labelled ? texts.value(label) : void 0,
+			onPress
+		}, () => h(icon))]);
+		return () => {
+			tableRevision.value;
+			const filters = list.filters;
+			const chips = filters.flatMap((filter) => {
+				if (isDateRangeFilter(filter)) {
+					const range = filter.getValue();
+					return range ? [h(Badge, {
+						key: filter.storageKey,
+						isDisabled: props.isDisabled,
+						onClose: () => filter.clear()
+					}, () => h(Text, null, () => formatDateRange(range)))] : [];
+				}
+				return filter.values.filter((value) => value.isActive).map((value) => h(Badge, {
+					key: value.id,
+					isDisabled: props.isDisabled,
+					onClose: () => value.deactivate()
+				}, () => h(Text, null, () => value.render())));
+			});
+			const hasChanges = filters.some((filter) => filter.hasChanges());
+			const storeButton = filters.some((filter) => filter.isStoringAvailable()) && hasChanges ? iconButton("filters.store", IconSave, () => ListFilter.storeFilters(list, filters, {
+				autosave: false,
+				manualSave: true
+			})) : void 0;
+			const resetButton = hasChanges ? iconButton("filters.reset", IconUndo, () => list.resetFilters()) : void 0;
+			const clearButton = chips.length > 1 ? iconButton("filters.clear", IconClose, () => list.filters.forEach((filter) => filter.clear()), { labelled: false }) : void 0;
+			if (chips.length === 0 && !storeButton && !resetButton) return null;
+			return h(Div, { class: listStyles.activeFilters }, () => [
+				...chips,
+				storeButton,
+				resetButton,
+				clearButton
+			]);
+		};
+	}
+});
+composition(ActiveFilters);
+//#endregion
+export { ActiveFilters, ActiveFilters as default };
+
+//# sourceMappingURL=ActiveFilters.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ActiveFilters.mjs","names":[],"sources":["../../../../../src/list/ActiveFilters.ts"],"sourcesContent":["import {\n  Badge,\n  Button,\n  Div,\n  Text,\n  Tooltip,\n  TooltipTrigger,\n} from \"@/auto-generated\";\nimport { IconClose, IconSave, IconUndo } from \"@/icons\";\nimport { watchMobxValue } from \"@/lib/mobxSelector\";\nimport { ListFilter } from \"@mittwald/flow-components-base\";\nimport type { ListDateRange } from \"@mittwald/flow-components-base\";\nimport { defineComponent, h, type VNodeChild } from \"vue\";\nimport { formatDateRange, isDateRangeFilter } from \"./dateRangeFilter\";\nimport { injectListModel } from \"./listContext\";\nimport { useListTexts, type ListTextKey } from \"./locales\";\nimport { listStyles } from \"./styles\";\nimport type { ListRendered } from \"./types\";\nimport { composition } from \"@/lib/composition\";\n\n/** What the chips need of a filter and its values, and nothing more. */\ninterface ChipDateRangeFilter {\n  readonly name?: string;\n  getValue(): ListDateRange | null;\n  clear(): void;\n}\n\ninterface ChipFilter {\n  readonly storageKey: string;\n  readonly mode: string;\n  readonly values: {\n    readonly id: string;\n    readonly isActive: boolean;\n    deactivate(): void;\n    render(): ListRendered;\n  }[];\n  getArrayValue(): { id: string }[];\n  isStoringAvailable(): boolean;\n  hasChanges(): boolean;\n}\n\n/**\n * The selected filter values, and what can be done with the set of them.\n *\n * Shown beside the filter menus rather than inside them, so a selection made in\n * one menu stays visible while another is open — and can be taken back one\n * value at a time.\n */\nexport const ActiveFilters = defineComponent({\n  name: \"ListActiveFilters\",\n\n  props: {\n    isDisabled: { type: Boolean, default: false },\n  },\n\n  setup(props) {\n    const list = injectListModel();\n    const texts = useListTexts();\n\n    /* Every read here is of the table's filter state. */\n    const tableRevision = watchMobxValue(() => list.listTable.revision);\n\n    const iconButton = (\n      label: ListTextKey,\n      icon: unknown,\n      onPress: () => void,\n      { labelled = true }: { labelled?: boolean } = {},\n    ): VNodeChild =>\n      h(TooltipTrigger, { isDisabled: props.isDisabled }, () => [\n        h(Tooltip, null, () => texts.value(label)),\n        h(\n          Button,\n          {\n            size: \"s\",\n            variant: \"plain\",\n            color: \"secondary\",\n            \"aria-label\": labelled ? texts.value(label) : undefined,\n            onPress,\n          },\n          () => h(icon as never),\n        ),\n      ]);\n\n    return () => {\n      void tableRevision.value;\n\n      const filters = list.filters as unknown as ChipFilter[];\n\n      const chips = filters.flatMap((filter) => {\n        /* One chip for the whole range, and closing it clears the range. */\n        if (isDateRangeFilter(filter)) {\n          const range = (filter as unknown as ChipDateRangeFilter).getValue();\n\n          return range\n            ? [\n                h(\n                  Badge,\n                  {\n                    key: filter.storageKey,\n                    isDisabled: props.isDisabled,\n                    onClose: () =>\n                      (filter as unknown as ChipDateRangeFilter).clear(),\n                  },\n                  () => h(Text, null, () => formatDateRange(range)),\n                ),\n              ]\n            : [];\n        }\n\n        return filter.values\n          .filter((value) => value.isActive)\n          .map((value) =>\n            h(\n              Badge,\n              {\n                key: value.id,\n                isDisabled: props.isDisabled,\n                onClose: () => value.deactivate(),\n              },\n              () => h(Text, null, () => value.render()),\n            ),\n          );\n      });\n\n      const hasChanges = filters.some((filter) => filter.hasChanges());\n      const storingAvailable = filters.some((filter) =>\n        filter.isStoringAvailable(),\n      );\n\n      const storeButton =\n        storingAvailable && hasChanges\n          ? iconButton(\"filters.store\", IconSave, () =>\n              ListFilter.storeFilters(list, filters, {\n                autosave: false,\n                manualSave: true,\n              }),\n            )\n          : undefined;\n\n      const resetButton = hasChanges\n        ? iconButton(\"filters.reset\", IconUndo, () => list.resetFilters())\n        : undefined;\n\n      const clearButton =\n        chips.length > 1\n          ? iconButton(\n              \"filters.clear\",\n              IconClose,\n              () => list.filters.forEach((filter) => filter.clear()),\n              /*\n               * Flow's `ActiveFilters` gives this one no `aria-label`, unlike\n               * its two siblings — the tooltip is all it has. Kept, so the\n               * host builds the same button; the label belongs in Flow first.\n               */\n              { labelled: false },\n            )\n          : undefined;\n\n      if (chips.length === 0 && !storeButton && !resetButton) {\n        return null;\n      }\n\n      return h(Div, { class: listStyles.activeFilters }, () => [\n        ...chips,\n        storeButton,\n        resetButton,\n        clearButton,\n      ]);\n    };\n  },\n});\n\ncomposition(ActiveFilters);\n\nexport default ActiveFilters;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAgDA,IAAa,gBAAgB,gBAAgB;CAC3C,MAAM;CAEN,OAAO,EACL,YAAY;EAAE,MAAM;EAAS,SAAS;CAAM,EAC9C;CAEA,MAAM,OAAO;EACX,MAAM,OAAO,gBAAgB;EAC7B,MAAM,QAAQ,aAAa;EAG3B,MAAM,gBAAgB,qBAAqB,KAAK,UAAU,QAAQ;EAElE,MAAM,cACJ,OACA,MACA,SACA,EAAE,WAAW,SAAiC,CAAC,MAE/C,EAAE,gBAAgB,EAAE,YAAY,MAAM,WAAW,SAAS,CACxD,EAAE,SAAS,YAAY,MAAM,MAAM,KAAK,CAAC,GACzC,EACE,QACA;GACE,MAAM;GACN,SAAS;GACT,OAAO;GACP,cAAc,WAAW,MAAM,MAAM,KAAK,IAAI,KAAA;GAC9C;EACF,SACM,EAAE,IAAa,CACvB,CACF,CAAC;EAEH,aAAa;GACX,cAAmB;GAEnB,MAAM,UAAU,KAAK;GAErB,MAAM,QAAQ,QAAQ,SAAS,WAAW;IAExC,IAAI,kBAAkB,MAAM,GAAG;KAC7B,MAAM,QAAS,OAA0C,SAAS;KAElE,OAAO,QACH,CACE,EACE,OACA;MACE,KAAK,OAAO;MACZ,YAAY,MAAM;MAClB,eACG,OAA0C,MAAM;KACrD,SACM,EAAE,MAAM,YAAY,gBAAgB,KAAK,CAAC,CAClD,CACF,IACA,CAAC;IACP;IAEA,OAAO,OAAO,OACX,QAAQ,UAAU,MAAM,QAAQ,CAAC,CACjC,KAAK,UACJ,EACE,OACA;KACE,KAAK,MAAM;KACX,YAAY,MAAM;KAClB,eAAe,MAAM,WAAW;IAClC,SACM,EAAE,MAAM,YAAY,MAAM,OAAO,CAAC,CAC1C,CACF;GACJ,CAAC;GAED,MAAM,aAAa,QAAQ,MAAM,WAAW,OAAO,WAAW,CAAC;GAK/D,MAAM,cAJmB,QAAQ,MAAM,WACrC,OAAO,mBAAmB,CAI1B,KAAoB,aAChB,WAAW,iBAAiB,gBAC1B,WAAW,aAAa,MAAM,SAAS;IACrC,UAAU;IACV,YAAY;GACd,CAAC,CACH,IACA,KAAA;GAEN,MAAM,cAAc,aAChB,WAAW,iBAAiB,gBAAgB,KAAK,aAAa,CAAC,IAC/D,KAAA;GAEJ,MAAM,cACJ,MAAM,SAAS,IACX,WACE,iBACA,iBACM,KAAK,QAAQ,SAAS,WAAW,OAAO,MAAM,CAAC,GAMrD,EAAE,UAAU,MAAM,CACpB,IACA,KAAA;GAEN,IAAI,MAAM,WAAW,KAAK,CAAC,eAAe,CAAC,aACzC,OAAO;GAGT,OAAO,EAAE,KAAK,EAAE,OAAO,WAAW,cAAc,SAAS;IACvD,GAAG;IACH;IACA;IACA;GACF,CAAC;EACH;CACF;AACF,CAAC;AAED,YAAY,aAAa"}

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

@@ -0,0 +1,195 @@
+import { composition } from "../lib/composition.mjs";
+import { Accordion } from "../auto-generated/Accordion.mjs";
+import { AccordionGroup } from "../auto-generated/AccordionGroup.mjs";
+import { ActionGroup } from "../auto-generated/ActionGroup.mjs";
+import { Button } from "../auto-generated/Button.mjs";
+import { Checkbox } from "../auto-generated/Checkbox.mjs";
+import { CheckboxGroup } from "../auto-generated/CheckboxGroup.mjs";
+import { Content } from "../auto-generated/Content.mjs";
+import { Flex } from "../auto-generated/Flex.mjs";
+import { Heading } from "../auto-generated/Heading.mjs";
+import { Radio } from "../auto-generated/Radio.mjs";
+import { RadioGroup } from "../auto-generated/RadioGroup.mjs";
+import { RangeCalendar } from "../auto-generated/RangeCalendar.mjs";
+import { Section } from "../auto-generated/Section.mjs";
+import { SkeletonText } from "../auto-generated/SkeletonText.mjs";
+import { Text } from "../auto-generated/Text.mjs";
+import { IconFilter } from "../icons/components/IconFilter.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 { ModalTrigger } from "../overlays/triggers.mjs";
+import { isDateRangeFilter } from "./dateRangeFilter.mjs";
+import { Modal } from "../overlays/Modal.mjs";
+import { defineComponent, h } from "vue";
+//#region src/list/AllFiltersModal.ts
+var accordion = (key, heading, expanded, content) => h(Accordion, {
+	key,
+	defaultExpanded: expanded
+}, () => [h(Heading, null, () => heading), h(Content, null, content)]);
+var renderDateRangeAccordion = (filter, expanded, texts) => {
+	const name = filter.name ?? String(filter.property);
+	const value = filter.getValue();
+	return accordion(`filter-${name}`, name, expanded, () => h(Flex, {
+		direction: "column",
+		gap: "m"
+	}, () => [h(RangeCalendar, {
+		...filter.dateRangeOptions,
+		value,
+		onChange: (range) => filter.setValue(range)
+	}), value ? h(Button, {
+		size: "s",
+		color: "secondary",
+		variant: "soft",
+		onPress: () => filter.clear()
+	}, () => texts("filters.clearSelection")) : null]));
+};
+var renderSelectAllCheckbox = (filter, texts) => {
+	const isEveryValueActive = filter.isEveryValueActive();
+	return h(Checkbox, {
+		key: "select-all",
+		class: listStyles.selectAllCheckbox,
+		isSelected: isEveryValueActive,
+		isIndeterminate: filter.isActive() && !isEveryValueActive,
+		onChange: () => isEveryValueActive ? filter.deselectAll() : filter.selectAll()
+	}, () => texts(isEveryValueActive ? "filters.deselectAll" : "filters.selectAll"));
+};
+var renderFilterAccordion = (filter, expanded, texts) => {
+	const name = filter.name ?? String(filter.property);
+	const activeIds = filter.values.filter((v) => v.isActive).map((v) => v.id);
+	const content = () => filter.mode === "one" ? h(Flex, {
+		direction: "column",
+		gap: "m"
+	}, () => [h(RadioGroup, {
+		key: activeIds[0],
+		value: activeIds[0],
+		m: [1, 1],
+		"aria-label": name
+	}, () => filter.values.map((value) => h(Radio, {
+		key: value.id,
+		value: value.id,
+		onPress: () => {
+			if (!value.isActive) value.toggle();
+		}
+	}, () => value.render()))), activeIds.length > 0 ? h(Button, {
+		size: "s",
+		color: "secondary",
+		variant: "soft",
+		onPress: () => filter.clear()
+	}, () => texts("filters.clearSelection")) : null]) : [filter.isSelectAllAvailable ? renderSelectAllCheckbox(filter, texts) : null, h(CheckboxGroup, {
+		value: activeIds,
+		m: [1, 1],
+		"aria-label": name
+	}, () => filter.values.map((value) => h(Checkbox, {
+		key: value.id,
+		value: value.id,
+		onPress: () => value.toggle()
+	}, () => value.render())))];
+	return accordion(`filter-${name}`, name, expanded, content);
+};
+var renderSortingAccordion = (sortings, expanded, texts) => {
+	const active = sortings.find((s) => s.isSorted());
+	return accordion("sorting", texts("sorting"), expanded, () => h(RadioGroup, {
+		value: active?.id,
+		m: [1, 1]
+	}, () => sortings.map((sorting) => h(Radio, {
+		key: sorting.id,
+		value: sorting.id,
+		onPress: () => sorting.enable()
+	}, () => `${sorting.name ?? String(sorting.property)} ${sorting.directionName ?? ""}`.trim()))));
+};
+var renderViewModeAccordion = (list, modes, selected, expanded, texts) => accordion("viewMode", texts("settings.viewMode"), expanded, () => h(RadioGroup, {
+	value: selected,
+	m: [1, 1]
+}, () => modes.map((mode) => h(Radio, {
+	key: mode,
+	value: mode,
+	onPress: () => list.viewMode.set(mode)
+}, () => texts(`settings.viewMode.${mode}`)))));
+/**
+* Every filter, sorting and view mode in one off-canvas modal.
+*
+* The mobile path to what the header shows as separate menus on desktop — and
+* on desktop too, where a list has secondary filters that the header leaves
+* out. It drives the same model objects, so a value ticked here is the same
+* event as one ticked in a menu.
+*/
+var AllFiltersModal = defineComponent({
+	name: "ListAllFiltersModal",
+	props: {
+		isDisabled: {
+			type: Boolean,
+			default: false
+		},
+		/** The layouts this list can show, from the header. */
+		viewModes: {
+			type: Array,
+			default: () => []
+		}
+	},
+	setup(props) {
+		const list = injectListModel();
+		const texts = useListTexts();
+		const controller = createOverlayController();
+		const isInitiallyLoading = watchMobxValue(() => list.loaderState.isInitiallyLoading);
+		const viewMode = watchMobxValue(() => list.viewMode.value);
+		const totalItemCount = watchMobxValue(() => {
+			list.listTable.revision;
+			return list.batches.getTotalItemsCount();
+		});
+		const tableRevision = watchMobxValue(() => list.listTable.revision);
+		return () => {
+			tableRevision.value;
+			const format = texts.value;
+			const filters = list.filters;
+			const sortings = list.visibleSorting;
+			const modes = props.viewModes;
+			const accordionCount = (modes.length > 1 ? 1 : 0) + (sortings.length > 0 ? 1 : 0) + filters.length;
+			if (accordionCount === 0) return null;
+			const expanded = accordionCount <= 2;
+			const accordions = [
+				modes.length > 1 ? renderViewModeAccordion(list, modes, viewMode.value, expanded, format) : null,
+				sortings.length > 0 ? renderSortingAccordion(sortings, expanded, format) : null,
+				...filters.map((filter) => isDateRangeFilter(filter) ? renderDateRangeAccordion(filter, expanded, format) : renderFilterAccordion(filter, expanded, format))
+			];
+			const hasSecondaryFilters = filters.some((filter) => filter.priority === "secondary");
+			const showCount = format(totalItemCount.value === 1 ? "results.show.one" : "results.show.other", { totalItemCount: totalItemCount.value });
+			return h(ModalTrigger, { controller }, () => [
+				h(Button, {
+					class: [listStyles.hideOnMobile, hasSecondaryFilters ? void 0 : listStyles.hideOnDesktop].filter(Boolean).join(" "),
+					variant: "outline",
+					color: "secondary",
+					isDisabled: props.isDisabled
+				}, () => [h(Text, null, () => format("filters.all")), h(IconFilter)]),
+				h(Button, {
+					class: listStyles.hideOnDesktop,
+					variant: "outline",
+					color: "secondary",
+					"aria-label": format("filters.all")
+				}, () => h(IconFilter)),
+				h(Modal, {
+					offCanvas: true,
+					controller
+				}, () => [
+					h(Heading, null, () => format("filters.all")),
+					h(Content, null, () => h(Section, null, () => h(AccordionGroup, null, () => accordions))),
+					h(ActionGroup, null, () => [h(Button, { onPress: () => controller.close() }, () => h(Text, null, () => isInitiallyLoading.value ? h(SkeletonText, { width: "16ch" }) : showCount)), h(Button, {
+						color: "secondary",
+						variant: "soft",
+						onPress: () => {
+							list.resetFilters();
+							controller.close();
+						}
+					}, () => format("reset"))])
+				])
+			]);
+		};
+	}
+});
+composition(AllFiltersModal);
+//#endregion
+export { AllFiltersModal, AllFiltersModal as default };
+
+//# sourceMappingURL=AllFiltersModal.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AllFiltersModal.mjs","names":[],"sources":["../../../../../src/list/AllFiltersModal.ts"],"sourcesContent":["import {\n  Accordion,\n  AccordionGroup,\n  ActionGroup,\n  Button,\n  Checkbox,\n  CheckboxGroup,\n  Content,\n  Flex,\n  Heading,\n  Radio,\n  RadioGroup,\n  RangeCalendar,\n  Section,\n  SkeletonText,\n  Text,\n} from \"@/auto-generated\";\nimport { IconFilter } from \"@/icons\";\nimport { watchMobxValue } from \"@/lib/mobxSelector\";\nimport { Modal } from \"@/overlays/Modal\";\nimport { createOverlayController } from \"@/overlays/overlayController\";\nimport { ModalTrigger } from \"@/overlays/triggers\";\nimport { defineComponent, h, type VNodeChild } from \"vue\";\nimport { isDateRangeFilter } from \"./dateRangeFilter\";\nimport { injectListModel, type AnyListModel } from \"./listContext\";\nimport { useListTexts, type ListTextFormatter } from \"./locales\";\nimport { listStyles } from \"./styles\";\nimport type { ListRendered } from \"./types\";\nimport { composition } from \"@/lib/composition\";\n\n/*\n * What this modal needs of a filter and a sorting. Not the classes: a list of\n * concrete filters is not assignable to a list of generic ones — a row model\n * sits in a contravariant position deep inside `Column`.\n */\ninterface ModalFilterValue {\n  readonly id: string;\n  readonly isActive: boolean;\n  toggle(): void;\n  render(): ListRendered;\n}\n\ninterface ModalFilter {\n  readonly name?: string;\n  readonly property: unknown;\n  readonly mode: string;\n  readonly priority: \"primary\" | \"secondary\";\n  readonly values: ModalFilterValue[];\n  readonly isSelectAllAvailable: boolean;\n  isActive(): boolean;\n  isEveryValueActive(): boolean;\n  selectAll(): void;\n  deselectAll(): void;\n  clear(): void;\n}\n\ninterface ModalSorting {\n  readonly id: string;\n  readonly name?: string;\n  readonly property: unknown;\n  readonly directionName?: string;\n  isSorted(): boolean;\n  enable(): void;\n}\n\nconst accordion = (\n  key: string,\n  heading: string,\n  expanded: boolean,\n  content: () => VNodeChild,\n): VNodeChild =>\n  h(Accordion, { key, defaultExpanded: expanded }, () => [\n    h(Heading, null, () => heading),\n    h(Content, null, content),\n  ]);\n\ninterface ModalDateRangeFilter {\n  readonly name?: string;\n  readonly property: unknown;\n  readonly dateRangeOptions?: Record<string, unknown>;\n  getValue(): unknown;\n  setValue(range: unknown): void;\n  clear(): void;\n}\n\nconst renderDateRangeAccordion = (\n  filter: ModalDateRangeFilter,\n  expanded: boolean,\n  texts: ListTextFormatter,\n): VNodeChild => {\n  const name = filter.name ?? String(filter.property);\n  const value = filter.getValue();\n\n  return accordion(`filter-${name}`, name, expanded, () =>\n    h(Flex, { direction: \"column\", gap: \"m\" }, () => [\n      h(RangeCalendar, {\n        ...filter.dateRangeOptions,\n        value,\n        onChange: (range: unknown) => filter.setValue(range),\n      } as never),\n      value\n        ? h(\n            Button,\n            {\n              size: \"s\",\n              color: \"secondary\",\n              variant: \"soft\",\n              onPress: () => filter.clear(),\n            },\n            () => texts(\"filters.clearSelection\"),\n          )\n        : null,\n    ]),\n  );\n};\n\n/*\n * Flow's `FilterAccordionCheckboxGroup`: outside the checkbox group, so it is\n * not one of the values, and indeterminate while only some of them are on.\n */\nconst renderSelectAllCheckbox = (\n  filter: ModalFilter,\n  texts: ListTextFormatter,\n): VNodeChild => {\n  const isEveryValueActive = filter.isEveryValueActive();\n\n  return h(\n    Checkbox,\n    {\n      key: \"select-all\",\n      class: listStyles.selectAllCheckbox,\n      isSelected: isEveryValueActive,\n      isIndeterminate: filter.isActive() && !isEveryValueActive,\n      onChange: () =>\n        isEveryValueActive ? filter.deselectAll() : filter.selectAll(),\n    },\n    () =>\n      texts(isEveryValueActive ? \"filters.deselectAll\" : \"filters.selectAll\"),\n  );\n};\n\nconst renderFilterAccordion = (\n  filter: ModalFilter,\n  expanded: boolean,\n  texts: ListTextFormatter,\n): VNodeChild => {\n  const name = filter.name ?? String(filter.property);\n  const activeIds = filter.values.filter((v) => v.isActive).map((v) => v.id);\n\n  const content = (): VNodeChild =>\n    filter.mode === \"one\"\n      ? h(Flex, { direction: \"column\", gap: \"m\" }, () => [\n          h(\n            RadioGroup,\n            {\n              /*\n               * Keyed on the selection, like Flow's: the group is controlled\n               * and only remounting makes it pick up a value that changed from\n               * outside — a chip removed, a reset.\n               */\n              key: activeIds[0],\n              value: activeIds[0],\n              m: [1, 1],\n              \"aria-label\": name,\n            },\n            () =>\n              filter.values.map((value) =>\n                h(\n                  Radio,\n                  {\n                    key: value.id,\n                    value: value.id,\n                    onPress: () => {\n                      if (!value.isActive) {\n                        value.toggle();\n                      }\n                    },\n                  },\n                  () => value.render(),\n                ),\n              ),\n          ),\n          activeIds.length > 0\n            ? h(\n                Button,\n                {\n                  size: \"s\",\n                  color: \"secondary\",\n                  variant: \"soft\",\n                  onPress: () => filter.clear(),\n                },\n                () => texts(\"filters.clearSelection\"),\n              )\n            : null,\n        ])\n      : [\n          filter.isSelectAllAvailable\n            ? renderSelectAllCheckbox(filter, texts)\n            : null,\n          h(\n            CheckboxGroup,\n            { value: activeIds, m: [1, 1], \"aria-label\": name },\n            () =>\n              filter.values.map((value) =>\n                h(\n                  Checkbox,\n                  {\n                    key: value.id,\n                    value: value.id,\n                    onPress: () => value.toggle(),\n                  },\n                  () => value.render(),\n                ),\n              ),\n          ),\n        ];\n\n  return accordion(`filter-${name}`, name, expanded, content);\n};\n\nconst renderSortingAccordion = (\n  sortings: ModalSorting[],\n  expanded: boolean,\n  texts: ListTextFormatter,\n): VNodeChild => {\n  const active = sortings.find((s) => s.isSorted());\n\n  return accordion(\"sorting\", texts(\"sorting\"), expanded, () =>\n    h(RadioGroup, { value: active?.id, m: [1, 1] }, () =>\n      sortings.map((sorting) =>\n        h(\n          Radio,\n          {\n            key: sorting.id,\n            value: sorting.id,\n            onPress: () => sorting.enable(),\n          },\n          () =>\n            `${sorting.name ?? String(sorting.property)} ${sorting.directionName ?? \"\"}`.trim(),\n        ),\n      ),\n    ),\n  );\n};\n\nconst renderViewModeAccordion = (\n  list: AnyListModel,\n  modes: (\"list\" | \"table\" | \"tiles\")[],\n  selected: \"list\" | \"table\" | \"tiles\",\n  expanded: boolean,\n  texts: ListTextFormatter,\n): VNodeChild =>\n  accordion(\"viewMode\", texts(\"settings.viewMode\"), expanded, () =>\n    h(RadioGroup, { value: selected, m: [1, 1] }, () =>\n      modes.map((mode) =>\n        h(\n          Radio,\n          { key: mode, value: mode, onPress: () => list.viewMode.set(mode) },\n          () => texts(`settings.viewMode.${mode}`),\n        ),\n      ),\n    ),\n  );\n\n/**\n * Every filter, sorting and view mode in one off-canvas modal.\n *\n * The mobile path to what the header shows as separate menus on desktop — and\n * on desktop too, where a list has secondary filters that the header leaves\n * out. It drives the same model objects, so a value ticked here is the same\n * event as one ticked in a menu.\n */\nexport const AllFiltersModal = defineComponent({\n  name: \"ListAllFiltersModal\",\n\n  props: {\n    isDisabled: { type: Boolean, default: false },\n    /** The layouts this list can show, from the header. */\n    viewModes: {\n      type: Array as () => (\"list\" | \"table\" | \"tiles\")[],\n      default: () => [],\n    },\n  },\n\n  setup(props) {\n    const list = injectListModel();\n    const texts = useListTexts();\n    const controller = createOverlayController();\n\n    const isInitiallyLoading = watchMobxValue(\n      () => list.loaderState.isInitiallyLoading,\n    );\n    const viewMode = watchMobxValue(() => list.viewMode.value);\n    const totalItemCount = watchMobxValue(() => {\n      void list.listTable.revision;\n      return list.batches.getTotalItemsCount();\n    });\n    /* Every value below is read off the table's filter and sorting state. */\n    const tableRevision = watchMobxValue(() => list.listTable.revision);\n\n    return () => {\n      void tableRevision.value;\n\n      const format = texts.value;\n      const filters = list.filters as unknown as ModalFilter[];\n      const sortings = list.visibleSorting as unknown as ModalSorting[];\n      const modes = props.viewModes;\n\n      const accordionCount =\n        (modes.length > 1 ? 1 : 0) +\n        (sortings.length > 0 ? 1 : 0) +\n        filters.length;\n\n      if (accordionCount === 0) {\n        return null;\n      }\n\n      /* Two or fewer open by default — more than that is a wall of controls. */\n      const expanded = accordionCount <= 2;\n\n      const accordions: VNodeChild[] = [\n        modes.length > 1\n          ? renderViewModeAccordion(\n              list,\n              modes,\n              viewMode.value,\n              expanded,\n              format,\n            )\n          : null,\n        sortings.length > 0\n          ? renderSortingAccordion(sortings, expanded, format)\n          : null,\n        ...filters.map((filter) =>\n          isDateRangeFilter(filter)\n            ? renderDateRangeAccordion(\n                filter as unknown as ModalDateRangeFilter,\n                expanded,\n                format,\n              )\n            : renderFilterAccordion(filter, expanded, format),\n        ),\n      ];\n\n      const hasSecondaryFilters = filters.some(\n        (filter) => filter.priority === \"secondary\",\n      );\n\n      const showCount = format(\n        totalItemCount.value === 1 ? \"results.show.one\" : \"results.show.other\",\n        { totalItemCount: totalItemCount.value },\n      );\n\n      return h(ModalTrigger, { controller }, () => [\n        h(\n          Button,\n          {\n            class: [\n              listStyles.hideOnMobile,\n              hasSecondaryFilters ? undefined : listStyles.hideOnDesktop,\n            ]\n              .filter(Boolean)\n              .join(\" \"),\n            variant: \"outline\",\n            color: \"secondary\",\n            isDisabled: props.isDisabled,\n          },\n          () => [h(Text, null, () => format(\"filters.all\")), h(IconFilter)],\n        ),\n\n        h(\n          Button,\n          {\n            class: listStyles.hideOnDesktop,\n            variant: \"outline\",\n            color: \"secondary\",\n            \"aria-label\": format(\"filters.all\"),\n          },\n          () => h(IconFilter),\n        ),\n\n        h(Modal, { offCanvas: true, controller }, () => [\n          h(Heading, null, () => format(\"filters.all\")),\n          h(Content, null, () =>\n            h(Section, null, () => h(AccordionGroup, null, () => accordions)),\n          ),\n          h(ActionGroup, null, () => [\n            h(Button, { onPress: () => controller.close() }, () =>\n              h(Text, null, () =>\n                isInitiallyLoading.value\n                  ? h(SkeletonText, { width: \"16ch\" })\n                  : showCount,\n              ),\n            ),\n            h(\n              Button,\n              {\n                color: \"secondary\",\n                variant: \"soft\",\n                onPress: () => {\n                  list.resetFilters();\n                  controller.close();\n                },\n              },\n              () => format(\"reset\"),\n            ),\n          ]),\n        ]),\n      ]);\n    };\n  },\n});\n\ncomposition(AllFiltersModal);\n\nexport default AllFiltersModal;\n"],"mappings":"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"}

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

@@ -0,0 +1,55 @@
+import { composition } from "../lib/composition.mjs";
+import watchMobxValue from "../lib/mobxSelector.mjs";
+import { injectListModel } from "./listContext.mjs";
+import { defineComponent, shallowRef, toValue, watch, watchEffect } from "vue";
+import { isDeepEqual } from "remeda";
+//#region src/list/ComposableLoader.ts
+/**
+* One batch of a composable loader.
+*
+* A composable runs in `setup()` and nowhere else, so the list cannot call one
+* from the watcher that drives its async loader. It renders one of these per
+* batch instead — which is what React's `DataLoader` does with its hooks
+* loader, one component per batch, each calling the consumer's hook.
+*
+* It renders nothing. What it contributes is a `setup()` for the consumer's
+* composable and an effect that reports what the composable produced.
+*/
+var ListComposableBatchLoader = defineComponent({
+	name: "ListComposableBatchLoader",
+	props: { batchIndex: {
+		type: Number,
+		required: true
+	} },
+	setup(props) {
+		const list = injectListModel();
+		const loader = list.shape.composableLoader;
+		const batchIndex = props.batchIndex;
+		if (!loader) return () => null;
+		const query = watchMobxValue(() => {
+			list.listTable.revision;
+			return list.getDataLoaderOptions(batchIndex);
+		});
+		const options = shallowRef(query.value);
+		watch(query, (next) => {
+			if (!isDeepEqual(next, options.value)) options.value = next;
+		});
+		const result = loader(() => options.value);
+		const isUnreported = watchMobxValue(() => list.loaderState.batchLoadingStates[batchIndex] !== "loaded");
+		let reported;
+		watchEffect(() => {
+			const value = toValue(result);
+			const unreported = isUnreported.value;
+			if (value && (unreported || value !== reported)) {
+				reported = value;
+				list.reportBatch(batchIndex, value);
+			}
+		});
+		return () => null;
+	}
+});
+composition(ListComposableBatchLoader);
+//#endregion
+export { ListComposableBatchLoader, ListComposableBatchLoader as default };
+
+//# sourceMappingURL=ComposableLoader.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComposableLoader.mjs","names":[],"sources":["../../../../../src/list/ComposableLoader.ts"],"sourcesContent":["import { watchMobxValue } from \"@/lib/mobxSelector\";\nimport { isDeepEqual } from \"remeda\";\nimport { defineComponent, shallowRef, toValue, watch, watchEffect } from \"vue\";\nimport { injectListModel } from \"./listContext\";\nimport { composition } from \"@/lib/composition\";\n\n/**\n * One batch of a composable loader.\n *\n * A composable runs in `setup()` and nowhere else, so the list cannot call one\n * from the watcher that drives its async loader. It renders one of these per\n * batch instead — which is what React's `DataLoader` does with its hooks\n * loader, one component per batch, each calling the consumer's hook.\n *\n * It renders nothing. What it contributes is a `setup()` for the consumer's\n * composable and an effect that reports what the composable produced.\n */\nexport const ListComposableBatchLoader = defineComponent({\n  name: \"ListComposableBatchLoader\",\n\n  props: {\n    batchIndex: { type: Number, required: true },\n  },\n\n  setup(props) {\n    const list = injectListModel();\n    const loader = list.shape.composableLoader;\n\n    /*\n     * Captured once: the component is keyed by its batch, so the index never\n     * changes for an instance — and nothing below would notice if it did,\n     * because a MobX `autorun` does not track a Vue prop.\n     */\n    const batchIndex = props.batchIndex;\n\n    if (!loader) {\n      return () => null;\n    }\n\n    /*\n     * The query as a getter. The list rebuilds it whenever a filter, the\n     * sorting or the search changes, and the consumer decides what that means:\n     * a query key reading it refetches, a composable ignoring it does not.\n     */\n    const query = watchMobxValue(() => {\n      /*\n       * The search term is table state, and the table's state is only\n       * observable through the revision — `getState()` hands back plain data.\n       * Without this read a manually filtering source would never see a\n       * changed search.\n       */\n      void list.listTable.revision;\n      return list.getDataLoaderOptions(batchIndex);\n    });\n\n    /*\n     * A new object only when the query changed. The revision also moves when a\n     * reported batch reaches the table, and a composable that recomputed on\n     * that would hand back a new result, which is reported, which moves the\n     * revision again.\n     */\n    const options = shallowRef(query.value);\n    watch(query, (next) => {\n      if (!isDeepEqual(next, options.value)) {\n        options.value = next;\n      }\n    });\n\n    const result = loader(() => options.value);\n\n    /*\n     * Reported whenever the value changes, like React's `useEffect(…,\n     * [loaderResult])`. And again when a reset clears `\"loaded\"` — a changed\n     * filter drops every batch — so a composable that has nothing new to hand\n     * back does not leave the list in a skeleton. Its fresh answer, landing\n     * after that, is a new value and reported too.\n     */\n    const isUnreported = watchMobxValue(\n      () => list.loaderState.batchLoadingStates[batchIndex] !== \"loaded\",\n    );\n    let reported: unknown;\n\n    watchEffect(() => {\n      const value = toValue(result);\n      const unreported = isUnreported.value;\n\n      if (value && (unreported || value !== reported)) {\n        reported = value;\n        list.reportBatch(batchIndex, value);\n      }\n    });\n\n    return () => null;\n  },\n});\n\ncomposition(ListComposableBatchLoader);\n\nexport default ListComposableBatchLoader;\n"],"mappings":";;;;;;;;;;;;;;;;;AAiBA,IAAa,4BAA4B,gBAAgB;CACvD,MAAM;CAEN,OAAO,EACL,YAAY;EAAE,MAAM;EAAQ,UAAU;CAAK,EAC7C;CAEA,MAAM,OAAO;EACX,MAAM,OAAO,gBAAgB;EAC7B,MAAM,SAAS,KAAK,MAAM;EAO1B,MAAM,aAAa,MAAM;EAEzB,IAAI,CAAC,QACH,aAAa;EAQf,MAAM,QAAQ,qBAAqB;GAOjC,KAAU,UAAU;GACpB,OAAO,KAAK,qBAAqB,UAAU;EAC7C,CAAC;EAQD,MAAM,UAAU,WAAW,MAAM,KAAK;EACtC,MAAM,QAAQ,SAAS;GACrB,IAAI,CAAC,YAAY,MAAM,QAAQ,KAAK,GAClC,QAAQ,QAAQ;EAEpB,CAAC;EAED,MAAM,SAAS,aAAa,QAAQ,KAAK;EASzC,MAAM,eAAe,qBACb,KAAK,YAAY,mBAAmB,gBAAgB,QAC5D;EACA,IAAI;EAEJ,kBAAkB;GAChB,MAAM,QAAQ,QAAQ,MAAM;GAC5B,MAAM,aAAa,aAAa;GAEhC,IAAI,UAAU,cAAc,UAAU,WAAW;IAC/C,WAAW;IACX,KAAK,YAAY,YAAY,KAAK;GACpC;EACF,CAAC;EAED,aAAa;CACf;AACF,CAAC;AAED,YAAY,yBAAyB"}

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

@@ -0,0 +1,53 @@
+import { composition } from "../lib/composition.mjs";
+import { Button } from "../auto-generated/Button.mjs";
+import { Div } from "../auto-generated/Div.mjs";
+import { Skeleton } from "../auto-generated/Skeleton.mjs";
+import { Text } from "../auto-generated/Text.mjs";
+import watchMobxValue from "../lib/mobxSelector.mjs";
+import { injectListModel } from "./listContext.mjs";
+import { useListTexts } from "./locales.mjs";
+import { listStyles } from "./styles.mjs";
+import { defineComponent, h } from "vue";
+//#region src/list/Footer.ts
+/** How many items are shown, and the way to ask for more. */
+var Footer = defineComponent({
+	name: "ListFooter",
+	setup() {
+		const list = injectListModel();
+		const texts = useListTexts();
+		const isLoading = watchMobxValue(() => list.loaderState.isLoading);
+		const isInitiallyLoading = watchMobxValue(() => list.loaderState.isInitiallyLoading);
+		const isEmpty = watchMobxValue(() => list.isEmpty);
+		const counts = watchMobxValue(() => {
+			list.listTable.revision;
+			return {
+				total: list.batches.getTotalItemsCount(),
+				visible: list.batches.getVisibleItemsCount(),
+				hasNextBatch: list.batches.hasNextBatch()
+			};
+		});
+		const renderPaginationInfo = () => {
+			if (isEmpty.value) return null;
+			return h(Text, null, () => isLoading.value ? h(Skeleton, { width: "200px" }) : texts.value("paginationInfo", {
+				visibleItemsCount: counts.value.visible,
+				totalItemsCount: counts.value.total
+			}));
+		};
+		const renderShowNextBatch = () => {
+			if (!counts.value.hasNextBatch && !isLoading.value) return null;
+			return h(Button, {
+				isPending: isLoading.value && !isInitiallyLoading.value,
+				isDisabled: isInitiallyLoading.value,
+				variant: "plain",
+				size: "s",
+				onPress: () => list.batches.nextBatch()
+			}, () => texts.value("showMore"));
+		};
+		return () => h(Div, { class: listStyles.footer }, () => [renderPaginationInfo(), renderShowNextBatch()]);
+	}
+});
+composition(Footer);
+//#endregion
+export { Footer, Footer as default };
+
+//# sourceMappingURL=Footer.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.mjs","names":[],"sources":["../../../../../src/list/Footer.ts"],"sourcesContent":["import { Button, Div, Skeleton, Text } from \"@/auto-generated\";\nimport { watchMobxValue } from \"@/lib/mobxSelector\";\nimport { defineComponent, h, type VNodeChild } from \"vue\";\nimport { injectListModel } from \"./listContext\";\nimport { useListTexts } from \"./locales\";\nimport { listStyles } from \"./styles\";\nimport { composition } from \"@/lib/composition\";\n\n/** How many items are shown, and the way to ask for more. */\nexport const Footer = defineComponent({\n  name: \"ListFooter\",\n\n  setup() {\n    const list = injectListModel();\n    const texts = useListTexts();\n\n    const isLoading = watchMobxValue(() => list.loaderState.isLoading);\n    const isInitiallyLoading = watchMobxValue(\n      () => list.loaderState.isInitiallyLoading,\n    );\n    const isEmpty = watchMobxValue(() => list.isEmpty);\n    const counts = watchMobxValue(() => {\n      void list.listTable.revision;\n      return {\n        total: list.batches.getTotalItemsCount(),\n        visible: list.batches.getVisibleItemsCount(),\n        hasNextBatch: list.batches.hasNextBatch(),\n      };\n    });\n\n    const renderPaginationInfo = (): VNodeChild => {\n      if (isEmpty.value) {\n        return null;\n      }\n\n      return h(Text, null, () =>\n        isLoading.value\n          ? h(Skeleton, { width: \"200px\" })\n          : texts.value(\"paginationInfo\", {\n              visibleItemsCount: counts.value.visible,\n              totalItemsCount: counts.value.total,\n            }),\n      );\n    };\n\n    const renderShowNextBatch = (): VNodeChild => {\n      if (!counts.value.hasNextBatch && !isLoading.value) {\n        return null;\n      }\n\n      return h(\n        Button,\n        {\n          isPending: isLoading.value && !isInitiallyLoading.value,\n          isDisabled: isInitiallyLoading.value,\n          variant: \"plain\",\n          size: \"s\",\n          onPress: () => list.batches.nextBatch(),\n        },\n        () => texts.value(\"showMore\"),\n      );\n    };\n\n    return () =>\n      h(Div, { class: listStyles.footer }, () => [\n        renderPaginationInfo(),\n        renderShowNextBatch(),\n      ]);\n  },\n});\n\ncomposition(Footer);\n\nexport default Footer;\n"],"mappings":";;;;;;;;;;;;AASA,IAAa,SAAS,gBAAgB;CACpC,MAAM;CAEN,QAAQ;EACN,MAAM,OAAO,gBAAgB;EAC7B,MAAM,QAAQ,aAAa;EAE3B,MAAM,YAAY,qBAAqB,KAAK,YAAY,SAAS;EACjE,MAAM,qBAAqB,qBACnB,KAAK,YAAY,kBACzB;EACA,MAAM,UAAU,qBAAqB,KAAK,OAAO;EACjD,MAAM,SAAS,qBAAqB;GAClC,KAAU,UAAU;GACpB,OAAO;IACL,OAAO,KAAK,QAAQ,mBAAmB;IACvC,SAAS,KAAK,QAAQ,qBAAqB;IAC3C,cAAc,KAAK,QAAQ,aAAa;GAC1C;EACF,CAAC;EAED,MAAM,6BAAyC;GAC7C,IAAI,QAAQ,OACV,OAAO;GAGT,OAAO,EAAE,MAAM,YACb,UAAU,QACN,EAAE,UAAU,EAAE,OAAO,QAAQ,CAAC,IAC9B,MAAM,MAAM,kBAAkB;IAC5B,mBAAmB,OAAO,MAAM;IAChC,iBAAiB,OAAO,MAAM;GAChC,CAAC,CACP;EACF;EAEA,MAAM,4BAAwC;GAC5C,IAAI,CAAC,OAAO,MAAM,gBAAgB,CAAC,UAAU,OAC3C,OAAO;GAGT,OAAO,EACL,QACA;IACE,WAAW,UAAU,SAAS,CAAC,mBAAmB;IAClD,YAAY,mBAAmB;IAC/B,SAAS;IACT,MAAM;IACN,eAAe,KAAK,QAAQ,UAAU;GACxC,SACM,MAAM,MAAM,UAAU,CAC9B;EACF;EAEA,aACE,EAAE,KAAK,EAAE,OAAO,WAAW,OAAO,SAAS,CACzC,qBAAqB,GACrB,oBAAoB,CACtB,CAAC;CACL;AACF,CAAC;AAED,YAAY,MAAM"}