@anzusystems/common-admin 2.0.0-rc.6 → 2.0.0-rc.8

package/README.md

@@ -49,6 +49,10 @@ A feature may be deprecated in any release when a better replacement exists. Dep
 
 To take only fixes automatically, use a range that locks the current minor (`~2.1.0`) and upgrade to a new minor by hand after reading its changelog. `^2.1.0` takes minor releases too.
 
+## Updating dependencies
+
+`yarn deps:upgrade` runs `upgrade-interactive`, then `dedupe`.
+
 ## Releasing
 
 Releases are made with [release-tools](https://github.com/anzusystems/release-tools) ([guide](https://github.com/anzusystems/release-tools/blob/main/docs/guide.md)); the rules and examples for this package are in [doc/RELEASING.md](doc/RELEASING.md):

package/dist/domains/filters/components/AFilterWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"AFilterWrapper.js","names":["_sfc_main","AFilterWrapper_vue_vue_type_script_setup_true_lang_default","AFilterWrapper_default"],"sources":["../../../../src/domains/filters/components/AFilterWrapper.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport AFilterAdvancedButton from '@/domains/filters/components/AFilterAdvancedButton.vue'\nimport AFilterSubmitButton from '@/domains/filters/components/AFilterSubmitButton.vue'\nimport AFilterResetButton from '@/domains/filters/components/AFilterResetButton.vue'\nimport { computed, inject, nextTick, provide, ref } from 'vue'\nimport {\n  FilterConfigKey,\n  FilterDataKey,\n  FilterSelectedKey,\n  FilterSubmitResetCounterKey,\n} from '@/domains/filters/utils/filterInjectionKeys'\nimport FiltersSelected from '@/domains/filters/components/FiltersSelected.vue'\nimport type { ValueObjectOption } from '@/shared/types/ValueObject'\nimport { isBoolean, isDefined, isUndefined } from '@/shared/utils/common'\nimport { type FilterStoreIdentifier, useFilterClearHelpers } from '@/domains/filters/composables/filterFactory'\nimport { datatableSlotName } from '@/domains/filters/datatable/utils/datatable'\nimport FilterDetailItem from '@/domains/filters/components/FilterDetailItem.vue'\nimport AFilterBookmarkButton from '@/domains/filters/bookmarks/components/AFilterBookmarkButton.vue'\nimport FilterBookmarks from '@/domains/filters/bookmarks/components/FilterBookmarks.vue'\nimport type { IntegerIdNullable } from '@/shared/types/common'\nimport { type AxiosInstance } from 'axios'\n\nconst props = withDefaults(\n  defineProps<{\n    enableTop?: boolean\n    hideButtons?: boolean\n    formName?: string\n    userId?: IntegerIdNullable | undefined\n    client?: (() => AxiosInstance) | undefined\n    store?: FilterStoreIdentifier | boolean // false to disable, FilterStoreIdentifier to custom store key\n    alwaysVisible?: boolean\n    hideMore?: boolean\n  }>(),\n  {\n    enableTop: false,\n    hideButtons: false,\n    formName: 'search',\n    userId: undefined,\n    client: undefined,\n    store: true,\n    alwaysVisible: false,\n    hideMore: false,\n  }\n)\nconst emit = defineEmits<{\n  (e: 'submit'): void\n  (e: 'reset'): void\n  (e: 'bookmarkLoadAfter'): void\n}>()\n\nconst datatableHiddenColumns = defineModel<string[] | undefined>('datatableHiddenColumns', {\n  default: undefined,\n  required: false,\n})\nconst showDetail = defineModel<boolean>('showDetail', { default: false, required: false })\n\nconst filterConfig = inject(FilterConfigKey)\nconst filterData = inject(FilterDataKey)\nif (isUndefined(filterConfig) || isUndefined(filterData)) {\n  throw new Error('Incorrect provide/inject config.')\n}\nconst identifier = ref<Partial<FilterStoreIdentifier>>({\n  system: filterConfig.general.system,\n  subject: filterConfig.general.subject,\n})\n// eslint-disable-next-line vue/no-setup-props-reactivity-loss\nif (!isBoolean(props.store)) {\n  identifier.value.system = props.store.system\n  identifier.value.subject = props.store.subject\n} else if (false === props.store) {\n  identifier.value.system = undefined\n  identifier.value.subject = undefined\n}\nconst submitResetCounter = ref(0)\nprovide(FilterSubmitResetCounterKey, submitResetCounter)\nconst filterSelected = ref<Map<string, ValueObjectOption<string | number>[]>>(new Map())\nprovide(FilterSelectedKey, filterSelected)\n\nconst submitFilter = () => {\n  submitResetCounter.value++\n  nextTick(() => {\n    emit('submit')\n  })\n}\n\nconst { clearAll, clearAllFilterSelected } = useFilterClearHelpers()\n\nconst submitFilterBookmark = () => {\n  nextTick(() => {\n    submitResetCounter.value++\n    emit('bookmarkLoadAfter')\n  })\n}\n\nconst resetFilter = () => {\n  clearAll(filterData, filterConfig)\n  clearAllFilterSelected(filterData, filterConfig, filterSelected)\n  nextTick(() => {\n    submitResetCounter.value++\n    emit('reset')\n  })\n}\n\nconst toggleFilterDetail = () => {\n  showDetail.value = !showDetail.value\n}\n\nconst touched = computed(() => {\n  return filterConfig.touched\n})\n\n// Names of `filterConfig.fields` itself, so the template's lookups by them always hit.\nconst renderedFieldNames = computed(() => {\n  return Object.entries(filterConfig.fields)\n    .filter(([, field]) => !field.render.skip)\n    .map(([fieldName]) => fieldName)\n})\n\nif (props.alwaysVisible) {\n  showDetail.value = true\n}\n\ndefineExpose({\n  submit: submitFilter,\n  reset: resetFilter,\n})\n</script>\n\n<template>\n  <VForm\n    :name=\"formName\"\n    @submit.prevent=\"submitFilter\"\n  >\n    <VRow\n      v-if=\"enableTop\"\n      density=\"compact\"\n    >\n      <VCol>\n        <slot name=\"top\" />\n      </VCol>\n    </VRow>\n    <VRow density=\"compact\">\n      <VCol v-if=\"store && userId && isDefined(client)\">\n        <slot name=\"bookmarks\">\n          <div class=\"d-flex flex-wrap align-center\">\n            <FilterBookmarks\n              v-if=\"identifier.system && identifier.subject && userId && isDefined(client)\"\n              v-model:datatable-hidden-columns=\"datatableHiddenColumns\"\n              :client=\"client\"\n              :system=\"identifier.system\"\n              :subject=\"identifier.subject\"\n              :user-id=\"userId\"\n              @submit=\"submitFilterBookmark\"\n            />\n          </div>\n        </slot>\n      </VCol>\n    </VRow>\n    <VRow\n      v-if=\"!alwaysVisible\"\n      density=\"compact\"\n    >\n      <VCol\n        v-if=\"!hideMore\"\n        cols=\"auto\"\n      >\n        <AFilterAdvancedButton\n          :button-active=\"showDetail\"\n          @advanced-filter=\"toggleFilterDetail\"\n        />\n      </VCol>\n      <VCol>\n        <div class=\"a-filter__container\">\n          <div class=\"a-filter__search\">\n            <slot name=\"search\" />\n          </div>\n          <FiltersSelected />\n        </div>\n      </VCol>\n      <VCol\n        v-if=\"!hideButtons\"\n        class=\"text-right\"\n        cols=\"auto\"\n      >\n        <slot name=\"buttons\">\n          <AFilterSubmitButton :touched=\"touched\" />\n          <AFilterResetButton @reset=\"resetFilter\" />\n          <AFilterBookmarkButton\n            v-if=\"identifier.system && identifier.subject && userId && isDefined(client)\"\n            :client=\"client\"\n            :user=\"userId\"\n            :system=\"identifier.system\"\n            :subject=\"identifier.subject\"\n            :datatable-hidden-columns=\"datatableHiddenColumns\"\n          />\n        </slot>\n      </VCol>\n    </VRow>\n    <div v-if=\"!hideMore\">\n      <component :is=\"alwaysVisible ? 'div' : 'VSlideYTransition'\">\n        <div\n          v-show=\"showDetail\"\n          :class=\"{ 'mt-6 pa-4 border': !alwaysVisible }\"\n        >\n          <slot name=\"detail\">\n            <VRow>\n              <VCol\n                v-for=\"fieldName in renderedFieldNames\"\n                :key=\"fieldName\"\n                :cols=\"filterConfig.fields[fieldName]!.render.xs || 12\"\n                :sm=\"filterConfig.fields[fieldName]!.render.sm || 6\"\n                :md=\"filterConfig.fields[fieldName]!.render.md || 4\"\n                :lg=\"filterConfig.fields[fieldName]!.render.lg || 3\"\n                :xl=\"filterConfig.fields[fieldName]!.render.xl || 2\"\n              >\n                <slot\n                  :name=\"datatableSlotName(fieldName)\"\n                  :item-config=\"filterConfig.fields[fieldName]!\"\n                >\n                  <FilterDetailItem :name=\"fieldName\" />\n                </slot>\n              </VCol>\n            </VRow>\n          </slot>\n        </div>\n      </component>\n    </div>\n  </VForm>\n</template>\n\n<style lang=\"scss\">\n@use 'vuetify/tools' as *;\n\n.a-filter {\n  &__container {\n    width: 100%;\n  }\n\n  &__search {\n    display: inline-flex;\n    vertical-align: middle;\n    min-width: 100%;\n    height: 34px;\n\n    @include media-breakpoint-up(sm) {\n      min-width: 50%;\n      margin-right: 8px;\n    }\n\n    @include media-breakpoint-up(md) {\n      min-width: 40%;\n    }\n\n    @include media-breakpoint-up(lg) {\n      min-width: 30%;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"AFilterWrapper.js","names":["_sfc_main","AFilterWrapper_vue_vue_type_script_setup_true_lang_default","AFilterWrapper_default"],"sources":["../../../../src/domains/filters/components/AFilterWrapper.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport AFilterAdvancedButton from '@/domains/filters/components/AFilterAdvancedButton.vue'\nimport AFilterSubmitButton from '@/domains/filters/components/AFilterSubmitButton.vue'\nimport AFilterResetButton from '@/domains/filters/components/AFilterResetButton.vue'\nimport { computed, inject, nextTick, provide, ref } from 'vue'\nimport {\n  FilterConfigKey,\n  FilterDataKey,\n  FilterSelectedKey,\n  FilterSubmitResetCounterKey,\n} from '@/domains/filters/utils/filterInjectionKeys'\nimport FiltersSelected from '@/domains/filters/components/FiltersSelected.vue'\nimport type { ValueObjectOption } from '@/shared/types/ValueObject'\nimport { isBoolean, isDefined, isUndefined } from '@/shared/utils/common'\nimport { type FilterStoreIdentifier, useFilterClearHelpers } from '@/domains/filters/composables/filterFactory'\nimport { datatableSlotName } from '@/domains/filters/datatable/utils/datatable'\nimport FilterDetailItem from '@/domains/filters/components/FilterDetailItem.vue'\nimport AFilterBookmarkButton from '@/domains/filters/bookmarks/components/AFilterBookmarkButton.vue'\nimport FilterBookmarks from '@/domains/filters/bookmarks/components/FilterBookmarks.vue'\nimport type { IntegerIdNullable } from '@/shared/types/common'\nimport { type AxiosInstance } from 'axios'\nimport { VSlideYTransition } from 'vuetify/components/transitions'\n\nconst props = withDefaults(\n  defineProps<{\n    enableTop?: boolean\n    hideButtons?: boolean\n    formName?: string\n    userId?: IntegerIdNullable | undefined\n    client?: (() => AxiosInstance) | undefined\n    store?: FilterStoreIdentifier | boolean // false to disable, FilterStoreIdentifier to custom store key\n    alwaysVisible?: boolean\n    hideMore?: boolean\n  }>(),\n  {\n    enableTop: false,\n    hideButtons: false,\n    formName: 'search',\n    userId: undefined,\n    client: undefined,\n    store: true,\n    alwaysVisible: false,\n    hideMore: false,\n  }\n)\nconst emit = defineEmits<{\n  (e: 'submit'): void\n  (e: 'reset'): void\n  (e: 'bookmarkLoadAfter'): void\n}>()\n\nconst datatableHiddenColumns = defineModel<string[] | undefined>('datatableHiddenColumns', {\n  default: undefined,\n  required: false,\n})\nconst showDetail = defineModel<boolean>('showDetail', { default: false, required: false })\n\nconst filterConfig = inject(FilterConfigKey)\nconst filterData = inject(FilterDataKey)\nif (isUndefined(filterConfig) || isUndefined(filterData)) {\n  throw new Error('Incorrect provide/inject config.')\n}\nconst identifier = ref<Partial<FilterStoreIdentifier>>({\n  system: filterConfig.general.system,\n  subject: filterConfig.general.subject,\n})\n// eslint-disable-next-line vue/no-setup-props-reactivity-loss\nif (!isBoolean(props.store)) {\n  identifier.value.system = props.store.system\n  identifier.value.subject = props.store.subject\n} else if (false === props.store) {\n  identifier.value.system = undefined\n  identifier.value.subject = undefined\n}\nconst submitResetCounter = ref(0)\nprovide(FilterSubmitResetCounterKey, submitResetCounter)\nconst filterSelected = ref<Map<string, ValueObjectOption<string | number>[]>>(new Map())\nprovide(FilterSelectedKey, filterSelected)\n\nconst submitFilter = () => {\n  submitResetCounter.value++\n  nextTick(() => {\n    emit('submit')\n  })\n}\n\nconst { clearAll, clearAllFilterSelected } = useFilterClearHelpers()\n\nconst submitFilterBookmark = () => {\n  nextTick(() => {\n    submitResetCounter.value++\n    emit('bookmarkLoadAfter')\n  })\n}\n\nconst resetFilter = () => {\n  clearAll(filterData, filterConfig)\n  clearAllFilterSelected(filterData, filterConfig, filterSelected)\n  nextTick(() => {\n    submitResetCounter.value++\n    emit('reset')\n  })\n}\n\nconst toggleFilterDetail = () => {\n  showDetail.value = !showDetail.value\n}\n\nconst touched = computed(() => {\n  return filterConfig.touched\n})\n\n// Names of `filterConfig.fields` itself, so the template's lookups by them always hit.\nconst renderedFieldNames = computed(() => {\n  return Object.entries(filterConfig.fields)\n    .filter(([, field]) => !field.render.skip)\n    .map(([fieldName]) => fieldName)\n})\n\nif (props.alwaysVisible) {\n  showDetail.value = true\n}\n\ndefineExpose({\n  submit: submitFilter,\n  reset: resetFilter,\n})\n</script>\n\n<template>\n  <VForm\n    :name=\"formName\"\n    @submit.prevent=\"submitFilter\"\n  >\n    <VRow\n      v-if=\"enableTop\"\n      density=\"compact\"\n    >\n      <VCol>\n        <slot name=\"top\" />\n      </VCol>\n    </VRow>\n    <VRow density=\"compact\">\n      <VCol v-if=\"store && userId && isDefined(client)\">\n        <slot name=\"bookmarks\">\n          <div class=\"d-flex flex-wrap align-center\">\n            <FilterBookmarks\n              v-if=\"identifier.system && identifier.subject && userId && isDefined(client)\"\n              v-model:datatable-hidden-columns=\"datatableHiddenColumns\"\n              :client=\"client\"\n              :system=\"identifier.system\"\n              :subject=\"identifier.subject\"\n              :user-id=\"userId\"\n              @submit=\"submitFilterBookmark\"\n            />\n          </div>\n        </slot>\n      </VCol>\n    </VRow>\n    <VRow\n      v-if=\"!alwaysVisible\"\n      density=\"compact\"\n    >\n      <VCol\n        v-if=\"!hideMore\"\n        cols=\"auto\"\n      >\n        <AFilterAdvancedButton\n          :button-active=\"showDetail\"\n          @advanced-filter=\"toggleFilterDetail\"\n        />\n      </VCol>\n      <VCol>\n        <div class=\"a-filter__container\">\n          <div class=\"a-filter__search\">\n            <slot name=\"search\" />\n          </div>\n          <FiltersSelected />\n        </div>\n      </VCol>\n      <VCol\n        v-if=\"!hideButtons\"\n        class=\"text-right\"\n        cols=\"auto\"\n      >\n        <slot name=\"buttons\">\n          <AFilterSubmitButton :touched=\"touched\" />\n          <AFilterResetButton @reset=\"resetFilter\" />\n          <AFilterBookmarkButton\n            v-if=\"identifier.system && identifier.subject && userId && isDefined(client)\"\n            :client=\"client\"\n            :user=\"userId\"\n            :system=\"identifier.system\"\n            :subject=\"identifier.subject\"\n            :datatable-hidden-columns=\"datatableHiddenColumns\"\n          />\n        </slot>\n      </VCol>\n    </VRow>\n    <div v-if=\"!hideMore\">\n      <component :is=\"alwaysVisible ? 'div' : VSlideYTransition\">\n        <div\n          v-show=\"showDetail\"\n          :class=\"{ 'mt-6 pa-4 border': !alwaysVisible }\"\n        >\n          <slot name=\"detail\">\n            <VRow>\n              <VCol\n                v-for=\"fieldName in renderedFieldNames\"\n                :key=\"fieldName\"\n                :cols=\"filterConfig.fields[fieldName]!.render.xs || 12\"\n                :sm=\"filterConfig.fields[fieldName]!.render.sm || 6\"\n                :md=\"filterConfig.fields[fieldName]!.render.md || 4\"\n                :lg=\"filterConfig.fields[fieldName]!.render.lg || 3\"\n                :xl=\"filterConfig.fields[fieldName]!.render.xl || 2\"\n              >\n                <slot\n                  :name=\"datatableSlotName(fieldName)\"\n                  :item-config=\"filterConfig.fields[fieldName]!\"\n                >\n                  <FilterDetailItem :name=\"fieldName\" />\n                </slot>\n              </VCol>\n            </VRow>\n          </slot>\n        </div>\n      </component>\n    </div>\n  </VForm>\n</template>\n\n<style lang=\"scss\">\n@use 'vuetify/tools' as *;\n\n.a-filter {\n  &__container {\n    width: 100%;\n  }\n\n  &__search {\n    display: inline-flex;\n    vertical-align: middle;\n    min-width: 100%;\n    height: 34px;\n\n    @include media-breakpoint-up(sm) {\n      min-width: 50%;\n      margin-right: 8px;\n    }\n\n    @include media-breakpoint-up(md) {\n      min-width: 40%;\n    }\n\n    @include media-breakpoint-up(lg) {\n      min-width: 30%;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/domains/filters/components/AFilterWrapper.vue_vue_type_script_setup_true_lang.js

@@ -7,16 +7,17 @@ import { datatableSlotName as l } from "../datatable/utils/datatable.js";
 import u from "./FilterDetailItem.js";
 import d from "../bookmarks/components/FilterBookmarks.js";
 import f from "../bookmarks/components/AFilterBookmarkButton.js";
-import p from "./AFilterAdvancedButton.js";
-import te from "./FiltersSelected.js";
-import { Fragment as ne, computed as m, createBlock as h, createCommentVNode as g, createElementBlock as _, createElementVNode as v, createVNode as y, defineComponent as b, inject as x, mergeModels as S, nextTick as C, normalizeClass as w, openBlock as T, provide as E, ref as D, renderList as re, renderSlot as O, resolveDynamicComponent as ie, unref as k, useModel as A, vShow as j, withCtx as M, withDirectives as N, withModifiers as P } from "vue";
-import { VCol as F, VRow as I } from "vuetify/components/VGrid";
+import te from "./AFilterAdvancedButton.js";
+import ne from "./FiltersSelected.js";
+import { Fragment as re, computed as p, createBlock as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, createVNode as v, defineComponent as y, inject as b, mergeModels as x, nextTick as S, normalizeClass as C, openBlock as w, provide as T, ref as E, renderList as ie, renderSlot as D, resolveDynamicComponent as ae, unref as O, useModel as k, vShow as A, withCtx as j, withDirectives as M, withModifiers as N } from "vue";
+import { VCol as P, VRow as F } from "vuetify/components/VGrid";
 import "axios";
+import { VSlideYTransition as I } from "vuetify/components/transitions";
 import { VForm as L } from "vuetify/components/VForm";
 // src/domains/filters/components/AFilterWrapper.vue?vue&type=script&setup=true&lang.ts
-var R = { class: "d-flex flex-wrap align-center" }, z = { class: "a-filter__container" }, B = { class: "a-filter__search" }, V = { key: 2 }, H = /*@__PURE__*/ b({
+var R = { class: "d-flex flex-wrap align-center" }, z = { class: "a-filter__container" }, B = { class: "a-filter__search" }, V = { key: 2 }, H = /*@__PURE__*/ y({
 	__name: "AFilterWrapper",
-	props: /*@__PURE__*/ S({
+	props: /*@__PURE__*/ x({
 		enableTop: {
 			type: Boolean,
 			default: !1
@@ -56,109 +57,109 @@ var R = { class: "d-flex flex-wrap align-center" }, z = { class: "a-filter__cont
 		},
 		showDetailModifiers: {}
 	}),
-	emits: /*@__PURE__*/ S([
+	emits: /*@__PURE__*/ x([
 		"submit",
 		"reset",
 		"bookmarkLoadAfter"
 	], ["update:datatableHiddenColumns", "update:showDetail"]),
-	setup(b, { expose: S, emit: H }) {
-		let U = b, W = H, G = A(b, "datatableHiddenColumns"), K = A(b, "showDetail"), q = x(ee), J = x(r);
+	setup(y, { expose: x, emit: H }) {
+		let U = y, W = H, G = k(y, "datatableHiddenColumns"), K = k(y, "showDetail"), q = b(ee), J = b(r);
 		if (n(q) || n(J)) throw Error("Incorrect provide/inject config.");
-		let Y = D({
+		let Y = E({
 			system: q.general.system,
 			subject: q.general.subject
 		});
 		e(U.store) ? !1 === U.store && (Y.value.system = void 0, Y.value.subject = void 0) : (Y.value.system = U.store.system, Y.value.subject = U.store.subject);
-		let X = D(0);
-		E(a, X);
-		let Z = D(/* @__PURE__ */ new Map());
-		E(i, Z);
+		let X = E(0);
+		T(a, X);
+		let Z = E(/* @__PURE__ */ new Map());
+		T(i, Z);
 		let Q = () => {
-			X.value++, C(() => {
+			X.value++, S(() => {
 				W("submit");
 			});
-		}, { clearAll: ae, clearAllFilterSelected: oe } = o(), se = () => {
-			C(() => {
+		}, { clearAll: oe, clearAllFilterSelected: se } = o(), ce = () => {
+			S(() => {
 				X.value++, W("bookmarkLoadAfter");
 			});
 		}, $ = () => {
-			ae(J, q), oe(J, q, Z), C(() => {
+			oe(J, q), se(J, q, Z), S(() => {
 				X.value++, W("reset");
 			});
-		}, ce = () => {
+		}, le = () => {
 			K.value = !K.value;
-		}, le = m(() => q.touched), ue = m(() => Object.entries(q.fields).filter(([, e]) => !e.render.skip).map(([e]) => e));
-		return U.alwaysVisible && (K.value = !0), S({
+		}, ue = p(() => q.touched), de = p(() => Object.entries(q.fields).filter(([, e]) => !e.render.skip).map(([e]) => e));
+		return U.alwaysVisible && (K.value = !0), x({
 			submit: Q,
 			reset: $
-		}), (e, n) => (T(), h(L, {
-			name: b.formName,
-			onSubmit: P(Q, ["prevent"])
+		}), (e, n) => (w(), m(L, {
+			name: y.formName,
+			onSubmit: N(Q, ["prevent"])
 		}, {
-			default: M(() => [
-				b.enableTop ? (T(), h(I, {
+			default: j(() => [
+				y.enableTop ? (w(), m(F, {
 					key: 0,
 					density: "compact"
 				}, {
-					default: M(() => [y(F, null, {
-						default: M(() => [O(e.$slots, "top")]),
+					default: j(() => [v(P, null, {
+						default: j(() => [D(e.$slots, "top")]),
 						_: 3
 					})]),
 					_: 3
-				})) : g("", !0),
-				y(I, { density: "compact" }, {
-					default: M(() => [b.store && b.userId && k(t)(b.client) ? (T(), h(F, { key: 0 }, {
-						default: M(() => [O(e.$slots, "bookmarks", {}, () => [v("div", R, [Y.value.system && Y.value.subject && b.userId && k(t)(b.client) ? (T(), h(d, {
+				})) : h("", !0),
+				v(F, { density: "compact" }, {
+					default: j(() => [y.store && y.userId && O(t)(y.client) ? (w(), m(P, { key: 0 }, {
+						default: j(() => [D(e.$slots, "bookmarks", {}, () => [_("div", R, [Y.value.system && Y.value.subject && y.userId && O(t)(y.client) ? (w(), m(d, {
 							key: 0,
 							"datatable-hidden-columns": G.value,
 							"onUpdate:datatableHiddenColumns": n[0] ||= (e) => G.value = e,
-							client: b.client,
+							client: y.client,
 							system: Y.value.system,
 							subject: Y.value.subject,
-							"user-id": b.userId,
-							onSubmit: se
+							"user-id": y.userId,
+							onSubmit: ce
 						}, null, 8, [
 							"datatable-hidden-columns",
 							"client",
 							"system",
 							"subject",
 							"user-id"
-						])) : g("", !0)])])]),
+						])) : h("", !0)])])]),
 						_: 3
-					})) : g("", !0)]),
+					})) : h("", !0)]),
 					_: 3
 				}),
-				b.alwaysVisible ? g("", !0) : (T(), h(I, {
+				y.alwaysVisible ? h("", !0) : (w(), m(F, {
 					key: 1,
 					density: "compact"
 				}, {
-					default: M(() => [
-						b.hideMore ? g("", !0) : (T(), h(F, {
+					default: j(() => [
+						y.hideMore ? h("", !0) : (w(), m(P, {
 							key: 0,
 							cols: "auto"
 						}, {
-							default: M(() => [y(p, {
+							default: j(() => [v(te, {
 								"button-active": K.value,
-								onAdvancedFilter: ce
+								onAdvancedFilter: le
 							}, null, 8, ["button-active"])]),
 							_: 1
 						})),
-						y(F, null, {
-							default: M(() => [v("div", z, [v("div", B, [O(e.$slots, "search")]), y(te)])]),
+						v(P, null, {
+							default: j(() => [_("div", z, [_("div", B, [D(e.$slots, "search")]), v(ne)])]),
 							_: 3
 						}),
-						b.hideButtons ? g("", !0) : (T(), h(F, {
+						y.hideButtons ? h("", !0) : (w(), m(P, {
 							key: 1,
 							class: "text-right",
 							cols: "auto"
 						}, {
-							default: M(() => [O(e.$slots, "buttons", {}, () => [
-								y(s, { touched: le.value }, null, 8, ["touched"]),
-								y(c, { onReset: $ }),
-								Y.value.system && Y.value.subject && b.userId && k(t)(b.client) ? (T(), h(f, {
+							default: j(() => [D(e.$slots, "buttons", {}, () => [
+								v(s, { touched: ue.value }, null, 8, ["touched"]),
+								v(c, { onReset: $ }),
+								Y.value.system && Y.value.subject && y.userId && O(t)(y.client) ? (w(), m(f, {
 									key: 0,
-									client: b.client,
-									user: b.userId,
+									client: y.client,
+									user: y.userId,
 									system: Y.value.system,
 									subject: Y.value.subject,
 									"datatable-hidden-columns": G.value
@@ -168,24 +169,24 @@ var R = { class: "d-flex flex-wrap align-center" }, z = { class: "a-filter__cont
 									"system",
 									"subject",
 									"datatable-hidden-columns"
-								])) : g("", !0)
+								])) : h("", !0)
 							])]),
 							_: 3
 						}))
 					]),
 					_: 3
 				})),
-				b.hideMore ? g("", !0) : (T(), _("div", V, [(T(), h(ie(b.alwaysVisible ? "div" : "VSlideYTransition"), null, {
-					default: M(() => [N(v("div", { class: w({ "mt-6 pa-4 border": !b.alwaysVisible }) }, [O(e.$slots, "detail", {}, () => [y(I, null, {
-						default: M(() => [(T(!0), _(ne, null, re(ue.value, (t) => (T(), h(F, {
+				y.hideMore ? h("", !0) : (w(), g("div", V, [(w(), m(ae(y.alwaysVisible ? "div" : O(I)), null, {
+					default: j(() => [M(_("div", { class: C({ "mt-6 pa-4 border": !y.alwaysVisible }) }, [D(e.$slots, "detail", {}, () => [v(F, null, {
+						default: j(() => [(w(!0), g(re, null, ie(de.value, (t) => (w(), m(P, {
 							key: t,
-							cols: k(q).fields[t].render.xs || 12,
-							sm: k(q).fields[t].render.sm || 6,
-							md: k(q).fields[t].render.md || 4,
-							lg: k(q).fields[t].render.lg || 3,
-							xl: k(q).fields[t].render.xl || 2
+							cols: O(q).fields[t].render.xs || 12,
+							sm: O(q).fields[t].render.sm || 6,
+							md: O(q).fields[t].render.md || 4,
+							lg: O(q).fields[t].render.lg || 3,
+							xl: O(q).fields[t].render.xl || 2
 						}, {
-							default: M(() => [O(e.$slots, k(l)(t), { itemConfig: k(q).fields[t] }, () => [y(u, { name: t }, null, 8, ["name"])])]),
+							default: j(() => [D(e.$slots, O(l)(t), { itemConfig: O(q).fields[t] }, () => [v(u, { name: t }, null, 8, ["name"])])]),
 							_: 2
 						}, 1032, [
 							"cols",
@@ -195,7 +196,7 @@ var R = { class: "d-flex flex-wrap align-center" }, z = { class: "a-filter__cont
 							"xl"
 						]))), 128))]),
 						_: 3
-					})])], 2), [[j, K.value]])]),
+					})])], 2), [[A, K.value]])]),
 					_: 3
 				}))]))
 			]),

package/dist/domains/filters/components/AFilterWrapper.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"AFilterWrapper.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","_component_VForm","_withModifiers","_withCtx","_component_VRow","_createVNode","_component_VCol","_renderSlot","_createCommentVNode","_unref","_createElementVNode","FilterBookmarks","AFilterAdvancedButton","FiltersSelected","AFilterSubmitButton","AFilterResetButton","AFilterBookmarkButton","_createElementBlock","_resolveDynamicComponent","_withDirectives","_normalizeClass","_Fragment","_renderList","FilterDetailItem","_vShow","AFilterSubmitButton_default","AFilterResetButton_default","FilterDetailItem_default","FilterBookmarks_default","AFilterBookmarkButton_default","AFilterAdvancedButton_default","FiltersSelected_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","AFilterWrapper_vue_vue_type_script_setup_true_lang_default","\"datatableHiddenColumns\"","\"datatableHiddenColumnsModifiers\"","\"showDetail\"","\"showDetailModifiers\"","__expose","__emit","props","__props","emit","datatableHiddenColumns","useModel","showDetail","filterConfig","inject","FilterConfigKey","filterData","FilterDataKey","isUndefined","identifier","ref","isBoolean","submitResetCounter","FilterSubmitResetCounterKey","filterSelected","FilterSelectedKey","submitFilter","nextTick","useFilterClearHelpers","submitFilterBookmark","resetFilter","clearAll","clearAllFilterSelected","toggleFilterDetail","touched","computed","renderedFieldNames","field","fieldName","openBlock","createBlock","VForm","withModifiers","withCtx","VRow","createVNode","VCol","renderSlot","_ctx","createCommentVNode","unref","isDefined","createElementVNode","_cache","$event","createElementBlock","resolveDynamicComponent","withDirectives","normalizeClass","Fragment","renderList","datatableSlotName","vShow"],"sources":["../../../../src/domains/filters/components/AFilterWrapper.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport AFilterAdvancedButton from '@/domains/filters/components/AFilterAdvancedButton.vue'\nimport AFilterSubmitButton from '@/domains/filters/components/AFilterSubmitButton.vue'\nimport AFilterResetButton from '@/domains/filters/components/AFilterResetButton.vue'\nimport { computed, inject, nextTick, provide, ref } from 'vue'\nimport {\n  FilterConfigKey,\n  FilterDataKey,\n  FilterSelectedKey,\n  FilterSubmitResetCounterKey,\n} from '@/domains/filters/utils/filterInjectionKeys'\nimport FiltersSelected from '@/domains/filters/components/FiltersSelected.vue'\nimport type { ValueObjectOption } from '@/shared/types/ValueObject'\nimport { isBoolean, isDefined, isUndefined } from '@/shared/utils/common'\nimport { type FilterStoreIdentifier, useFilterClearHelpers } from '@/domains/filters/composables/filterFactory'\nimport { datatableSlotName } from '@/domains/filters/datatable/utils/datatable'\nimport FilterDetailItem from '@/domains/filters/components/FilterDetailItem.vue'\nimport AFilterBookmarkButton from '@/domains/filters/bookmarks/components/AFilterBookmarkButton.vue'\nimport FilterBookmarks from '@/domains/filters/bookmarks/components/FilterBookmarks.vue'\nimport type { IntegerIdNullable } from '@/shared/types/common'\nimport { type AxiosInstance } from 'axios'\n\nconst props = withDefaults(\n  defineProps<{\n    enableTop?: boolean\n    hideButtons?: boolean\n    formName?: string\n    userId?: IntegerIdNullable | undefined\n    client?: (() => AxiosInstance) | undefined\n    store?: FilterStoreIdentifier | boolean // false to disable, FilterStoreIdentifier to custom store key\n    alwaysVisible?: boolean\n    hideMore?: boolean\n  }>(),\n  {\n    enableTop: false,\n    hideButtons: false,\n    formName: 'search',\n    userId: undefined,\n    client: undefined,\n    store: true,\n    alwaysVisible: false,\n    hideMore: false,\n  }\n)\nconst emit = defineEmits<{\n  (e: 'submit'): void\n  (e: 'reset'): void\n  (e: 'bookmarkLoadAfter'): void\n}>()\n\nconst datatableHiddenColumns = defineModel<string[] | undefined>('datatableHiddenColumns', {\n  default: undefined,\n  required: false,\n})\nconst showDetail = defineModel<boolean>('showDetail', { default: false, required: false })\n\nconst filterConfig = inject(FilterConfigKey)\nconst filterData = inject(FilterDataKey)\nif (isUndefined(filterConfig) || isUndefined(filterData)) {\n  throw new Error('Incorrect provide/inject config.')\n}\nconst identifier = ref<Partial<FilterStoreIdentifier>>({\n  system: filterConfig.general.system,\n  subject: filterConfig.general.subject,\n})\n// eslint-disable-next-line vue/no-setup-props-reactivity-loss\nif (!isBoolean(props.store)) {\n  identifier.value.system = props.store.system\n  identifier.value.subject = props.store.subject\n} else if (false === props.store) {\n  identifier.value.system = undefined\n  identifier.value.subject = undefined\n}\nconst submitResetCounter = ref(0)\nprovide(FilterSubmitResetCounterKey, submitResetCounter)\nconst filterSelected = ref<Map<string, ValueObjectOption<string | number>[]>>(new Map())\nprovide(FilterSelectedKey, filterSelected)\n\nconst submitFilter = () => {\n  submitResetCounter.value++\n  nextTick(() => {\n    emit('submit')\n  })\n}\n\nconst { clearAll, clearAllFilterSelected } = useFilterClearHelpers()\n\nconst submitFilterBookmark = () => {\n  nextTick(() => {\n    submitResetCounter.value++\n    emit('bookmarkLoadAfter')\n  })\n}\n\nconst resetFilter = () => {\n  clearAll(filterData, filterConfig)\n  clearAllFilterSelected(filterData, filterConfig, filterSelected)\n  nextTick(() => {\n    submitResetCounter.value++\n    emit('reset')\n  })\n}\n\nconst toggleFilterDetail = () => {\n  showDetail.value = !showDetail.value\n}\n\nconst touched = computed(() => {\n  return filterConfig.touched\n})\n\n// Names of `filterConfig.fields` itself, so the template's lookups by them always hit.\nconst renderedFieldNames = computed(() => {\n  return Object.entries(filterConfig.fields)\n    .filter(([, field]) => !field.render.skip)\n    .map(([fieldName]) => fieldName)\n})\n\nif (props.alwaysVisible) {\n  showDetail.value = true\n}\n\ndefineExpose({\n  submit: submitFilter,\n  reset: resetFilter,\n})\n</script>\n\n<template>\n  <VForm\n    :name=\"formName\"\n    @submit.prevent=\"submitFilter\"\n  >\n    <VRow\n      v-if=\"enableTop\"\n      density=\"compact\"\n    >\n      <VCol>\n        <slot name=\"top\" />\n      </VCol>\n    </VRow>\n    <VRow density=\"compact\">\n      <VCol v-if=\"store && userId && isDefined(client)\">\n        <slot name=\"bookmarks\">\n          <div class=\"d-flex flex-wrap align-center\">\n            <FilterBookmarks\n              v-if=\"identifier.system && identifier.subject && userId && isDefined(client)\"\n              v-model:datatable-hidden-columns=\"datatableHiddenColumns\"\n              :client=\"client\"\n              :system=\"identifier.system\"\n              :subject=\"identifier.subject\"\n              :user-id=\"userId\"\n              @submit=\"submitFilterBookmark\"\n            />\n          </div>\n        </slot>\n      </VCol>\n    </VRow>\n    <VRow\n      v-if=\"!alwaysVisible\"\n      density=\"compact\"\n    >\n      <VCol\n        v-if=\"!hideMore\"\n        cols=\"auto\"\n      >\n        <AFilterAdvancedButton\n          :button-active=\"showDetail\"\n          @advanced-filter=\"toggleFilterDetail\"\n        />\n      </VCol>\n      <VCol>\n        <div class=\"a-filter__container\">\n          <div class=\"a-filter__search\">\n            <slot name=\"search\" />\n          </div>\n          <FiltersSelected />\n        </div>\n      </VCol>\n      <VCol\n        v-if=\"!hideButtons\"\n        class=\"text-right\"\n        cols=\"auto\"\n      >\n        <slot name=\"buttons\">\n          <AFilterSubmitButton :touched=\"touched\" />\n          <AFilterResetButton @reset=\"resetFilter\" />\n          <AFilterBookmarkButton\n            v-if=\"identifier.system && identifier.subject && userId && isDefined(client)\"\n            :client=\"client\"\n            :user=\"userId\"\n            :system=\"identifier.system\"\n            :subject=\"identifier.subject\"\n            :datatable-hidden-columns=\"datatableHiddenColumns\"\n          />\n        </slot>\n      </VCol>\n    </VRow>\n    <div v-if=\"!hideMore\">\n      <component :is=\"alwaysVisible ? 'div' : 'VSlideYTransition'\">\n        <div\n          v-show=\"showDetail\"\n          :class=\"{ 'mt-6 pa-4 border': !alwaysVisible }\"\n        >\n          <slot name=\"detail\">\n            <VRow>\n              <VCol\n                v-for=\"fieldName in renderedFieldNames\"\n                :key=\"fieldName\"\n                :cols=\"filterConfig.fields[fieldName]!.render.xs || 12\"\n                :sm=\"filterConfig.fields[fieldName]!.render.sm || 6\"\n                :md=\"filterConfig.fields[fieldName]!.render.md || 4\"\n                :lg=\"filterConfig.fields[fieldName]!.render.lg || 3\"\n                :xl=\"filterConfig.fields[fieldName]!.render.xl || 2\"\n              >\n                <slot\n                  :name=\"datatableSlotName(fieldName)\"\n                  :item-config=\"filterConfig.fields[fieldName]!\"\n                >\n                  <FilterDetailItem :name=\"fieldName\" />\n                </slot>\n              </VCol>\n            </VRow>\n          </slot>\n        </div>\n      </component>\n    </div>\n  </VForm>\n</template>\n\n<style lang=\"scss\">\n@use 'vuetify/tools' as *;\n\n.a-filter {\n  &__container {\n    width: 100%;\n  }\n\n  &__search {\n    display: inline-flex;\n    vertical-align: middle;\n    min-width: 100%;\n    height: 34px;\n\n    @include media-breakpoint-up(sm) {\n      min-width: 50%;\n      margin-right: 8px;\n    }\n\n    @include media-breakpoint-up(md) {\n      min-width: 40%;\n    }\n\n    @include media-breakpoint-up(lg) {\n      min-width: 30%;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"AFilterWrapper.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","_component_VForm","_withModifiers","_withCtx","_component_VRow","_createVNode","_component_VCol","_renderSlot","_createCommentVNode","_unref","_createElementVNode","FilterBookmarks","AFilterAdvancedButton","FiltersSelected","AFilterSubmitButton","AFilterResetButton","AFilterBookmarkButton","_createElementBlock","_resolveDynamicComponent","_withDirectives","_normalizeClass","_Fragment","_renderList","FilterDetailItem","_vShow","AFilterSubmitButton_default","AFilterResetButton_default","FilterDetailItem_default","FilterBookmarks_default","AFilterBookmarkButton_default","AFilterAdvancedButton_default","FiltersSelected_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","AFilterWrapper_vue_vue_type_script_setup_true_lang_default","\"datatableHiddenColumns\"","\"datatableHiddenColumnsModifiers\"","\"showDetail\"","\"showDetailModifiers\"","__expose","__emit","props","__props","emit","datatableHiddenColumns","useModel","showDetail","filterConfig","inject","FilterConfigKey","filterData","FilterDataKey","isUndefined","identifier","ref","isBoolean","submitResetCounter","FilterSubmitResetCounterKey","filterSelected","FilterSelectedKey","submitFilter","nextTick","useFilterClearHelpers","submitFilterBookmark","resetFilter","clearAll","clearAllFilterSelected","toggleFilterDetail","touched","computed","renderedFieldNames","field","fieldName","openBlock","createBlock","VForm","withModifiers","withCtx","VRow","createVNode","VCol","renderSlot","_ctx","createCommentVNode","unref","isDefined","createElementVNode","_cache","$event","createElementBlock","resolveDynamicComponent","VSlideYTransition","withDirectives","normalizeClass","Fragment","renderList","datatableSlotName","vShow"],"sources":["../../../../src/domains/filters/components/AFilterWrapper.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport AFilterAdvancedButton from '@/domains/filters/components/AFilterAdvancedButton.vue'\nimport AFilterSubmitButton from '@/domains/filters/components/AFilterSubmitButton.vue'\nimport AFilterResetButton from '@/domains/filters/components/AFilterResetButton.vue'\nimport { computed, inject, nextTick, provide, ref } from 'vue'\nimport {\n  FilterConfigKey,\n  FilterDataKey,\n  FilterSelectedKey,\n  FilterSubmitResetCounterKey,\n} from '@/domains/filters/utils/filterInjectionKeys'\nimport FiltersSelected from '@/domains/filters/components/FiltersSelected.vue'\nimport type { ValueObjectOption } from '@/shared/types/ValueObject'\nimport { isBoolean, isDefined, isUndefined } from '@/shared/utils/common'\nimport { type FilterStoreIdentifier, useFilterClearHelpers } from '@/domains/filters/composables/filterFactory'\nimport { datatableSlotName } from '@/domains/filters/datatable/utils/datatable'\nimport FilterDetailItem from '@/domains/filters/components/FilterDetailItem.vue'\nimport AFilterBookmarkButton from '@/domains/filters/bookmarks/components/AFilterBookmarkButton.vue'\nimport FilterBookmarks from '@/domains/filters/bookmarks/components/FilterBookmarks.vue'\nimport type { IntegerIdNullable } from '@/shared/types/common'\nimport { type AxiosInstance } from 'axios'\nimport { VSlideYTransition } from 'vuetify/components/transitions'\n\nconst props = withDefaults(\n  defineProps<{\n    enableTop?: boolean\n    hideButtons?: boolean\n    formName?: string\n    userId?: IntegerIdNullable | undefined\n    client?: (() => AxiosInstance) | undefined\n    store?: FilterStoreIdentifier | boolean // false to disable, FilterStoreIdentifier to custom store key\n    alwaysVisible?: boolean\n    hideMore?: boolean\n  }>(),\n  {\n    enableTop: false,\n    hideButtons: false,\n    formName: 'search',\n    userId: undefined,\n    client: undefined,\n    store: true,\n    alwaysVisible: false,\n    hideMore: false,\n  }\n)\nconst emit = defineEmits<{\n  (e: 'submit'): void\n  (e: 'reset'): void\n  (e: 'bookmarkLoadAfter'): void\n}>()\n\nconst datatableHiddenColumns = defineModel<string[] | undefined>('datatableHiddenColumns', {\n  default: undefined,\n  required: false,\n})\nconst showDetail = defineModel<boolean>('showDetail', { default: false, required: false })\n\nconst filterConfig = inject(FilterConfigKey)\nconst filterData = inject(FilterDataKey)\nif (isUndefined(filterConfig) || isUndefined(filterData)) {\n  throw new Error('Incorrect provide/inject config.')\n}\nconst identifier = ref<Partial<FilterStoreIdentifier>>({\n  system: filterConfig.general.system,\n  subject: filterConfig.general.subject,\n})\n// eslint-disable-next-line vue/no-setup-props-reactivity-loss\nif (!isBoolean(props.store)) {\n  identifier.value.system = props.store.system\n  identifier.value.subject = props.store.subject\n} else if (false === props.store) {\n  identifier.value.system = undefined\n  identifier.value.subject = undefined\n}\nconst submitResetCounter = ref(0)\nprovide(FilterSubmitResetCounterKey, submitResetCounter)\nconst filterSelected = ref<Map<string, ValueObjectOption<string | number>[]>>(new Map())\nprovide(FilterSelectedKey, filterSelected)\n\nconst submitFilter = () => {\n  submitResetCounter.value++\n  nextTick(() => {\n    emit('submit')\n  })\n}\n\nconst { clearAll, clearAllFilterSelected } = useFilterClearHelpers()\n\nconst submitFilterBookmark = () => {\n  nextTick(() => {\n    submitResetCounter.value++\n    emit('bookmarkLoadAfter')\n  })\n}\n\nconst resetFilter = () => {\n  clearAll(filterData, filterConfig)\n  clearAllFilterSelected(filterData, filterConfig, filterSelected)\n  nextTick(() => {\n    submitResetCounter.value++\n    emit('reset')\n  })\n}\n\nconst toggleFilterDetail = () => {\n  showDetail.value = !showDetail.value\n}\n\nconst touched = computed(() => {\n  return filterConfig.touched\n})\n\n// Names of `filterConfig.fields` itself, so the template's lookups by them always hit.\nconst renderedFieldNames = computed(() => {\n  return Object.entries(filterConfig.fields)\n    .filter(([, field]) => !field.render.skip)\n    .map(([fieldName]) => fieldName)\n})\n\nif (props.alwaysVisible) {\n  showDetail.value = true\n}\n\ndefineExpose({\n  submit: submitFilter,\n  reset: resetFilter,\n})\n</script>\n\n<template>\n  <VForm\n    :name=\"formName\"\n    @submit.prevent=\"submitFilter\"\n  >\n    <VRow\n      v-if=\"enableTop\"\n      density=\"compact\"\n    >\n      <VCol>\n        <slot name=\"top\" />\n      </VCol>\n    </VRow>\n    <VRow density=\"compact\">\n      <VCol v-if=\"store && userId && isDefined(client)\">\n        <slot name=\"bookmarks\">\n          <div class=\"d-flex flex-wrap align-center\">\n            <FilterBookmarks\n              v-if=\"identifier.system && identifier.subject && userId && isDefined(client)\"\n              v-model:datatable-hidden-columns=\"datatableHiddenColumns\"\n              :client=\"client\"\n              :system=\"identifier.system\"\n              :subject=\"identifier.subject\"\n              :user-id=\"userId\"\n              @submit=\"submitFilterBookmark\"\n            />\n          </div>\n        </slot>\n      </VCol>\n    </VRow>\n    <VRow\n      v-if=\"!alwaysVisible\"\n      density=\"compact\"\n    >\n      <VCol\n        v-if=\"!hideMore\"\n        cols=\"auto\"\n      >\n        <AFilterAdvancedButton\n          :button-active=\"showDetail\"\n          @advanced-filter=\"toggleFilterDetail\"\n        />\n      </VCol>\n      <VCol>\n        <div class=\"a-filter__container\">\n          <div class=\"a-filter__search\">\n            <slot name=\"search\" />\n          </div>\n          <FiltersSelected />\n        </div>\n      </VCol>\n      <VCol\n        v-if=\"!hideButtons\"\n        class=\"text-right\"\n        cols=\"auto\"\n      >\n        <slot name=\"buttons\">\n          <AFilterSubmitButton :touched=\"touched\" />\n          <AFilterResetButton @reset=\"resetFilter\" />\n          <AFilterBookmarkButton\n            v-if=\"identifier.system && identifier.subject && userId && isDefined(client)\"\n            :client=\"client\"\n            :user=\"userId\"\n            :system=\"identifier.system\"\n            :subject=\"identifier.subject\"\n            :datatable-hidden-columns=\"datatableHiddenColumns\"\n          />\n        </slot>\n      </VCol>\n    </VRow>\n    <div v-if=\"!hideMore\">\n      <component :is=\"alwaysVisible ? 'div' : VSlideYTransition\">\n        <div\n          v-show=\"showDetail\"\n          :class=\"{ 'mt-6 pa-4 border': !alwaysVisible }\"\n        >\n          <slot name=\"detail\">\n            <VRow>\n              <VCol\n                v-for=\"fieldName in renderedFieldNames\"\n                :key=\"fieldName\"\n                :cols=\"filterConfig.fields[fieldName]!.render.xs || 12\"\n                :sm=\"filterConfig.fields[fieldName]!.render.sm || 6\"\n                :md=\"filterConfig.fields[fieldName]!.render.md || 4\"\n                :lg=\"filterConfig.fields[fieldName]!.render.lg || 3\"\n                :xl=\"filterConfig.fields[fieldName]!.render.xl || 2\"\n              >\n                <slot\n                  :name=\"datatableSlotName(fieldName)\"\n                  :item-config=\"filterConfig.fields[fieldName]!\"\n                >\n                  <FilterDetailItem :name=\"fieldName\" />\n                </slot>\n              </VCol>\n            </VRow>\n          </slot>\n        </div>\n      </component>\n    </div>\n  </VForm>\n</template>\n\n<style lang=\"scss\">\n@use 'vuetify/tools' as *;\n\n.a-filter {\n  &__container {\n    width: 100%;\n  }\n\n  &__search {\n    display: inline-flex;\n    vertical-align: middle;\n    min-width: 100%;\n    height: 34px;\n\n    @include media-breakpoint-up(sm) {\n      min-width: 50%;\n      margin-right: 8px;\n    }\n\n    @include media-breakpoint-up(md) {\n      min-width: 40%;\n    }\n\n    @include media-breakpoint-up(lg) {\n      min-width: 30%;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}

package/package.json

@@ -3,6 +3,7 @@
   "packageManager": "yarn@4.18.1",
   "files": [
     "dist",
+    "src/e2e/**",
     "src/eslint/**",
     "src/vite/**"
   ],
@@ -20,6 +21,10 @@
       "types": "./dist/common-admin.css.d.ts",
       "default": "./dist/common-admin.css"
     },
+    "./e2e": {
+      "types": "./src/e2e/index.d.mts",
+      "default": "./src/e2e/index.mjs"
+    },
     "./eslint": {
       "types": "./src/eslint/plugin.d.mts",
       "default": "./src/eslint/plugin.mjs"
@@ -35,7 +40,7 @@
     },
     "./package.json": "./package.json"
   },
-  "version": "2.0.0-rc.6",
+  "version": "2.0.0-rc.8",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -69,12 +74,13 @@
     "test:eslint": "vitest run --config vitest.config.node.mts",
     "test:run": "run-s --print-name test:browser test:eslint",
     "test:ui": "vitest --ui",
+    "deps:upgrade": "yarn upgrade-interactive && yarn dedupe",
     "release:start": "npx -y --allow-git=all github:anzusystems/release-tools#main start",
     "release:publish": "npx -y --allow-git=all github:anzusystems/release-tools#main publish",
     "release:cleanup": "npx -y --allow-git=all github:anzusystems/release-tools#main cleanup"
   },
   "devDependencies": {
-    "@anzusystems/common-admin": "2.0.0-rc.6",
+    "@anzusystems/common-admin": "2.0.0-rc.8",
     "@intlify/unplugin-vue-i18n": "^11.2.8",
     "@mdi/font": "^7.4.47",
     "@sentry/vite-plugin": "11.10.0",
@@ -108,7 +114,7 @@
     "eslint-plugin-vue": "10.12.0",
     "eslint-plugin-vuetify": "^2.7.3",
     "npm-run-all2": "^9.0.4",
-    "oxfmt": "^0.75.0",
+    "oxfmt": "^0.76.0",
     "oxlint": "1.90.0",
     "pinia": "4.1.0",
     "playwright": "^1.64.1",
@@ -132,10 +138,10 @@
     "vitest": "^5.1.0",
     "vue": "3.5.44",
     "vue-eslint-parser": "^10.4.1",
-    "vue-i18n": "11.4.17",
+    "vue-i18n": "11.4.18",
     "vue-router": "5.4.0",
     "vue-tsc": "3.3.14",
-    "vuetify": "4.3.1"
+    "vuetify": "4.3.2"
   },
   "peerDependencies": {
     "@mdi/font": "^7.4.47",
@@ -156,6 +162,7 @@
     "eslint-plugin-vuetify": "^2.7.3",
     "oxlint": "^1.90.0",
     "pinia": "^4.1.0",
+    "playwright": "^1.64.1",
     "socket.io-client": "^4.8.4",
     "sortablejs": "^1.15.7",
     "vite": "^8.3.5",
@@ -193,6 +200,9 @@
     "oxlint": {
       "optional": true
     },
+    "playwright": {
+      "optional": true
+    },
     "socket.io-client": {
       "optional": true
     },

package/src/e2e/conventions.d.mts

@@ -0,0 +1,4 @@
+export declare const CARD_LOADER_SELECTOR: string
+export declare const NOT_FOUND_SELECTOR: string
+export declare const ROW_SELECTOR: string
+export declare const NO_DATA_SELECTOR: string

package/src/e2e/conventions.mjs

@@ -0,0 +1,15 @@
+// What the route walk knows of common-admin's views. Apart from the walk, which is node code, so that a browser
+// test can hold them against the components (src/test/routeWalkConventions.test.ts).
+
+/** `ACard`'s loader, shown while the card loads. */
+export const CARD_LOADER_SELECTOR = '.a-card-loader'
+
+/** The back button of `ANotFoundView`. */
+export const NOT_FOUND_SELECTOR = '[data-cy="not-found-back"]'
+
+/** The rows of a listing: Vuetify's data table, without its "no data" and loading rows. */
+export const ROW_SELECTOR =
+  'main .v-data-table tbody tr:not(.v-data-table-rows-no-data):not(.v-data-table-rows-loading)'
+
+/** The row a listing without records shows. */
+export const NO_DATA_SELECTOR = 'main .v-data-table-rows-no-data'

package/src/e2e/index.d.mts

@@ -0,0 +1,8 @@
+export type {
+  RouteWalkIgnore,
+  RouteWalkOptions,
+  RouteWalkPlaywright,
+  RouteWalkProblem,
+  RouteWalkTimings,
+} from './types.mjs'
+export { DEFAULT_TIMINGS, defineRouteWalk, defineRouteWalkBoot, readDeclaredRoutes } from './routeWalk.mjs'

package/src/e2e/index.mjs

@@ -0,0 +1 @@
+export { DEFAULT_TIMINGS, defineRouteWalk, defineRouteWalkBoot, readDeclaredRoutes } from './routeWalk.mjs'

package/src/e2e/routeWalk.d.mts

@@ -0,0 +1,44 @@
+import type {
+  DefineRouteWalk,
+  FirstRecordOf,
+  ReadDeclaredRoutes,
+  RouteWalkTimings,
+  VisitRoute,
+  WatchPage,
+} from './types.mjs'
+
+export type * from './types.mjs'
+
+export declare const DEFAULT_TIMINGS: Readonly<RouteWalkTimings>
+
+/** The declared paths, constraints unescaped. The catch-all is left out. */
+export declare const readDeclaredRoutes: ReadDeclaredRoutes
+
+/**
+ * Registers the boot check the walk depends on (a Playwright project dependency): the app logs in, starts and
+ * shows a page of its own. Without it, an app that never boots would hold every route for the full app timeout.
+ * It also empties the record cache of an earlier run.
+ */
+export declare const defineRouteWalkBoot: DefineRouteWalk
+
+/** Registers the walk: a guard that the declaration was read, then one test per route. */
+export declare const defineRouteWalk: DefineRouteWalk
+
+// What the walk is made of, for its tests.
+
+/** Watches a page for what it does wrong, for the whole session of a worker. */
+export declare const watchPage: WatchPage
+
+/**
+ * Opens the target on a fresh document, waits until it has loaded, and collects what it did wrong: problems the
+ * watcher saw, landing elsewhere than the target (or than `redirect` allows), the 404 view, an empty page and
+ * unresolved components. Throws when the app does not render or a card loader never finishes.
+ */
+export declare const visitRoute: VisitRoute
+
+/**
+ * The first record a listing shows: from a link to it, else by clicking the first row and reading where the
+ * app went. An answer the listing gives every time (a record, no record, not a page) is kept in a file in
+ * `outputDir`, so a record's detail and edit share one visit of the listing; one a failed or empty load gave is not.
+ */
+export declare const firstRecordOf: FirstRecordOf

package/src/e2e/routeWalk.mjs

@@ -0,0 +1,617 @@
+// @ts-check
+import fs from 'node:fs'
+import path from 'node:path'
+import { CARD_LOADER_SELECTOR, NO_DATA_SELECTOR, NOT_FOUND_SELECTOR, ROW_SELECTOR } from './conventions.mjs'
+
+/**
+ * The route walk: one test per route of an admin, run against the real API and its data. Each test opens the
+ * page, waits until it has loaded, and fails on what it shows or logs wrong.
+ *
+ * It knows the conventions of common-admin (the generated route declaration, the record views, the card
+ * loader; see `conventions.mjs`), not an admin's code: whatever is particular to an admin comes through
+ * `RouteWalkOptions`. Node code, shipped as it is like `src/vite`: an admin's e2e project loads it without
+ * a build.
+ *
+ * @typedef {import('playwright/test').Page} Page
+ * @typedef {import('playwright/test').Request} Request
+ * @typedef {import('./types.mjs').PageWatcher} PageWatcher
+ * @typedef {import('./types.mjs').RecordLookup} RecordLookup
+ * @typedef {import('./types.mjs').RouteVisit} RouteVisit
+ * @typedef {import('./types.mjs').RouteWalkOptions} RouteWalkOptions
+ * @typedef {import('./types.mjs').RouteWalkPlaywright} RouteWalkPlaywright
+ * @typedef {import('./types.mjs').RouteWalkProblem} RouteWalkProblem
+ * @typedef {import('./types.mjs').RouteWalkTimings} RouteWalkTimings
+ */
+
+/** @type {Readonly<RouteWalkTimings>} */
+export const DEFAULT_TIMINGS = Object.freeze({
+  app: 30_000,
+  loader: 30_000,
+  quiet: 700,
+  settleLimit: 20_000,
+  slowRequest: 10_000,
+})
+
+// Generous on purpose: a parameter route visits its listing first, and each visit may wait out the navigation,
+// the app, the settle limit, the loaders and one reload. Only a page that hangs reaches it.
+const ROUTE_TIMEOUT = 240_000
+// A notification stream stays open for the whole session, so it is neither waited for nor checked.
+const OPEN_REQUESTS = /\/notifications\/stream\//
+const PROBLEM_PAGES = ['/unauthorized', '/error', '/login']
+
+const PARAM = /:([a-zA-Z]+)(\([^)]*\))?/g
+const OPTIONAL_PARAM = /\/:[a-zA-Z]+(\([^)]*\))?\?/g
+
+/** @param {Partial<RouteWalkTimings> | undefined} timings */
+const withDefaults = (timings) => ({ ...DEFAULT_TIMINGS, ...timings })
+
+/** @type {import('./types.mjs').ReadDeclaredRoutes} */
+export function readDeclaredRoutes(declarationFile) {
+  const declaration = fs.readFileSync(declarationFile, 'utf8')
+  return (
+    [...declaration.matchAll(/'[^']+':\s*RouteRecordInfo<\s*'[^']*',\s*'([^']+)'/g)]
+      // The declaration is TypeScript source: a `\d` constraint is written there with an escaped backslash.
+      .map(([, routePath]) => (routePath ?? '').replace(/\\\\/g, '\\'))
+      .filter((routePath) => !routePath.includes('pathMatch'))
+  )
+}
+
+/**
+ * @param {string} dir
+ * @returns {number}
+ */
+const countPageFiles = (dir) =>
+  fs
+    .readdirSync(dir, { withFileTypes: true })
+    .reduce(
+      (count, entry) =>
+        count +
+        (entry.isDirectory() ? countPageFiles(path.join(dir, entry.name)) : entry.name.endsWith('.vue') ? 1 : 0),
+      0
+    )
+
+/**
+ * Fills the parameters known by name, then drops the optional ones still unknown. What is left is opened with
+ * the first record of its listing: the address up to that parameter (`/keywords/:id(\d+)/edit` -> `/keywords`).
+ *
+ * @param {string} routePath
+ * @param {Record<string, string>} known
+ */
+const fillKnown = (routePath, known) => {
+  /** @type {{ name: string; pattern: RegExp }[]} */
+  const unresolved = []
+  const filled = routePath
+    .replace(OPTIONAL_PARAM, (match) => {
+      const name = (match.slice(2).split('(')[0] ?? '').replace(/\?$/, '')
+      return known[name] !== undefined ? `/${known[name]}` : ''
+    })
+    .replace(PARAM, (match, /** @type {string} */ name, /** @type {string | undefined} */ constraint) => {
+      const value = known[name]
+      if (value !== undefined) return value
+      unresolved.push({ name, pattern: constraint ? new RegExp(`^${constraint.slice(1, -1)}$`) : /^[^/]+$/ })
+      return match
+    })
+  return { filled, unresolved }
+}
+
+/**
+ * A pathname without a trailing slash, so that `/x/` and `/x` compare equal.
+ *
+ * @param {string} pathname
+ */
+const normalizePath = (pathname) => (pathname.length > 1 ? pathname.replace(/\/+$/, '') : pathname)
+
+/** @type {import('./types.mjs').WatchPage} */
+export function watchPage(page, { openRequests = OPEN_REQUESTS, timings } = {}) {
+  const ownSlowRequest = withDefaults(timings).slowRequest
+  let slowRequest = ownSlowRequest
+  /** @type {RouteWalkProblem[]} */
+  let problems = []
+  /** Chromium's "Failed to load resource" lines, by the url they name: reported only when nothing else said so. */
+  /** @type {{ line: RouteWalkProblem; url: string }[]} */
+  let loadFailures = []
+  /** Every url that answered 4xx/5xx or failed, whatever its type and whether reported or not. */
+  /** @type {Set<string>} */
+  const failedUrls = new Set()
+  let apiAnswered = 0
+  /** @type {Map<Request, number>} */
+  const inFlight = new Map()
+  // When a request last started or ended: one that does both between two looks at `inFlight` still counts.
+  let lastActivity = 0
+
+  /** @param {Request} request */
+  const isApi = (request) => ['xhr', 'fetch'].includes(request.resourceType()) && !openRequests.test(request.url())
+  /**
+   * What the page itself needs to show: its document, and the scripts, styles and images of its own origin. Not
+   * another origin's (an embed in a record, an image from DAM): they depend on the data and the environment. Not
+   * fonts: the app loads them for all pages alike, and they have never broken.
+   *
+   * @param {Request} request
+   */
+  const isAsset = (request) => {
+    const type = request.resourceType()
+    if (type === 'document') return request.frame() === page.mainFrame()
+    if (!['script', 'stylesheet', 'image'].includes(type)) return false
+    return new URL(request.url()).origin === new URL(page.url()).origin
+  }
+  /** @param {Request} request */
+  const ended = (request) => {
+    const startedAt = inFlight.get(request)
+    if (startedAt === undefined) return undefined
+    inFlight.delete(request)
+    lastActivity = Date.now()
+    return lastActivity - startedAt
+  }
+
+  page.on('pageerror', (error) => problems.push(`pageerror: ${error.message}`))
+  page.on('console', (message) => {
+    if (message.type() !== 'error') return
+    const at = message.location().url
+    const line = `console.error: ${message.text()}${at ? ` (${at})` : ''}`
+    if (message.text().startsWith('Failed to load resource:')) loadFailures.push({ line, url: at })
+    else problems.push(line)
+  })
+  page.on('request', (request) => {
+    // A page's own scripts count too: until its chunk has loaded, it has neither mounted nor asked for data.
+    if (isApi(request) || ['script', 'stylesheet'].includes(request.resourceType())) {
+      lastActivity = Date.now()
+      inFlight.set(request, lastActivity)
+    }
+  })
+  page.on('requestfinished', (request) => {
+    const tookMs = ended(request)
+    // Answered, but past the clients' patience: the page waited that long.
+    if (tookMs !== undefined && tookMs >= slowRequest && isApi(request)) {
+      problems.push(`answered after ${Math.round(tookMs / 1000)} s: ${request.method()} ${request.url()}`)
+    }
+  })
+  page.on('requestfailed', (request) => {
+    const ranFor = ended(request) ?? 0
+    const failure = request.failure()?.errorText ?? ''
+    if (failure === 'net::ERR_ABORTED') {
+      // Cancelled by the page itself, which is no failure, unless it ran long enough to be its client's timeout:
+      // that failure reaches no console, the page only shows an alert. A previous page's requests that its
+      // navigation away cancelled count neither: `reset` clears what they reported.
+      if (ranFor >= slowRequest) {
+        problems.push(`no answer, cancelled after ${Math.round(ranFor / 1000)} s: ${request.method()} ${request.url()}`)
+      }
+      return
+    }
+    failedUrls.add(request.url())
+    if (isApi(request) || isAsset(request)) {
+      problems.push(`request failed: ${failure} ${request.method()} ${request.url()}`)
+    }
+  })
+  page.on('response', (response) => {
+    const request = response.request()
+    if (response.status() >= 400) failedUrls.add(response.url())
+    if (!isApi(request) && !isAsset(request)) return
+    if (response.status() >= 400) {
+      problems.push(`${request.resourceType()} ${response.status()}: ${request.method()} ${response.url()}`)
+    } else if (isApi(request)) {
+      apiAnswered++
+    }
+  })
+
+  return {
+    reset({ slowRequest: forPage } = {}) {
+      slowRequest = forPage ?? ownSlowRequest
+      problems = []
+      loadFailures = []
+      failedUrls.clear()
+      apiAnswered = 0
+      inFlight.clear()
+      lastActivity = 0
+    },
+    push(problem) {
+      problems.push(problem)
+    },
+    problems() {
+      const failed = [...failedUrls]
+      // Same origin and path; a url named without its query stands for any query of that path. A url that does
+      // not parse accounts for nothing, so its line is reported.
+      /** @param {string} failedUrl @param {string} url */
+      const sameResource = (failedUrl, url) => {
+        try {
+          const failedAt = new URL(failedUrl)
+          const at = new URL(url)
+          if (failedAt.origin !== at.origin || failedAt.pathname !== at.pathname) return false
+          return !at.search || failedAt.search === at.search
+        } catch {
+          return false
+        }
+      }
+      /** @param {string} url */
+      const accountedFor = (url) => failed.some((failedUrl) => sameResource(failedUrl, url))
+      const unaccounted = loadFailures.filter(({ url }) => !url || !accountedFor(url)).map(({ line }) => line)
+      // An `Api error` can also come from a 200 whose handling threw: that one is kept.
+      return [...problems, ...unaccounted].filter((problem) => {
+        const apiErrorUrl = /^console\.error: Api error: (\S+)/.exec(problem)?.[1]
+        return !apiErrorUrl || !accountedFor(apiErrorUrl)
+      })
+    },
+    get apiAnswered() {
+      return apiAnswered
+    },
+    get lastActivity() {
+      return lastActivity
+    },
+    inFlight,
+  }
+}
+
+/**
+ * Whether the card loaders are gone, and whether `main` says anything: the app's start-up loader is a `main`
+ * without text. Undefined while the page cannot answer (a navigation interrupted the evaluation).
+ *
+ * @param {Page} page
+ * @returns {Promise<{ loadersFinished: boolean; hasText: boolean } | undefined>}
+ */
+const pageState = (page) =>
+  page
+    .evaluate(
+      (selector) => ({
+        loadersFinished: Array.from(document.querySelectorAll(selector)).every(
+          (loader) => getComputedStyle(loader).display === 'none' || !(/** @type {HTMLElement} */ (loader).offsetParent)
+        ),
+        hasText: !!document.querySelector('main')?.textContent?.trim(),
+      }),
+      CARD_LOADER_SELECTOR
+    )
+    .catch(() => undefined)
+
+/**
+ * After `settleLimit`, the requests then running are watched until they end or have run `slowRequest`: one still
+ * without an answer then is a problem, however late it started. A page that keeps requesting (autorefresh) ends
+ * its requests soon and is not reported.
+ *
+ * @param {Page} page
+ * @param {PageWatcher} watcher
+ * @param {RouteWalkTimings} timings
+ */
+const reportUnanswered = async (page, watcher, timings) => {
+  const running = [...watcher.inFlight]
+  const until = Math.max(0, ...running.map(([, startedAt]) => startedAt + timings.slowRequest))
+  while (Date.now() < until && running.some(([request]) => watcher.inFlight.has(request))) {
+    await page.waitForTimeout(100)
+  }
+  for (const [request, startedAt] of running) {
+    if (!watcher.inFlight.has(request)) continue
+    const runningFor = Date.now() - startedAt
+    watcher.push(`no answer after ${Math.round(runningFor / 1000)} s: ${request.method()} ${request.url()}`)
+  }
+}
+
+/**
+ * The page has loaded: for a whole `quiet` interval no API request, script or style has run, no card loader has
+ * shown, and `main` has said something. All three at once, since each can start the next: a page's chunk mounts
+ * a loader, a loader that ends can be followed by a request. A page that keeps requesting (autorefresh) is not
+ * waited for past `settleLimit`, so this returns whether it settled. The hard waits throw: a blank page, or a
+ * loader still showing `loader` ms after that, is a failure.
+ *
+ * @param {Page} page
+ * @param {PageWatcher} watcher
+ * @param {RouteWalkTimings} timings
+ * @returns {Promise<boolean>}
+ */
+const settle = async (page, watcher, timings) => {
+  await page
+    .locator('main')
+    .first()
+    .waitFor({ state: 'visible', timeout: timings.app })
+    .catch((error) => {
+      throw new Error('the app did not render', { cause: error })
+    })
+  const deadline = Date.now() + timings.settleLimit
+  let busyAt = Date.now()
+  let settled = false
+  while (Date.now() < deadline) {
+    const state = await pageState(page)
+    const now = Date.now()
+    if (watcher.inFlight.size > 0 || !state?.loadersFinished || !state.hasText) busyAt = now
+    else if (now - Math.max(busyAt, watcher.lastActivity) >= timings.quiet) {
+      settled = true
+      break
+    }
+    await page.waitForTimeout(100)
+  }
+  if (!settled) await reportUnanswered(page, watcher, timings)
+  const loaderDeadline = Date.now() + timings.loader
+  while (!(await pageState(page))?.loadersFinished) {
+    if (Date.now() >= loaderDeadline) throw new Error('a card loader never finished')
+    await page.waitForTimeout(100)
+  }
+  return settled
+}
+
+/**
+ * Elements no component stands behind: a component the template names but nothing registers or imports.
+ * A production build renders it as an empty element of that name and warns nowhere.
+ *
+ * @param {Page} page
+ * @returns {Promise<string[]>}
+ */
+const unresolvedComponents = (page) =>
+  page.evaluate(() => [
+    ...new Set(
+      Array.from(document.body.querySelectorAll('*'))
+        .filter(
+          (element) =>
+            element instanceof HTMLUnknownElement ||
+            (element instanceof HTMLElement &&
+              element.localName.includes('-') &&
+              !customElements.get(element.localName))
+        )
+        .map((element) => element.localName)
+    ),
+  ])
+
+/**
+ * Opens the route on a fresh document. `about:blank` first, so that what the previous page still logs or
+ * requests while it unloads is not blamed on this one. An app that comes up blank, without a `main` or with
+ * only the start-up loader's empty one, is reloaded once: a cold boot can hit a transient failure that the next
+ * one does not. A page that stays empty after that is reported as one.
+ *
+ * @param {Page} page
+ * @param {PageWatcher} watcher
+ * @param {string} target
+ * @param {RouteWalkTimings} timings
+ */
+const openRoute = async (page, watcher, target, timings) => {
+  await page.goto('about:blank')
+  watcher.reset(timings)
+  await page.goto(target)
+  const first = await settle(page, watcher, timings).catch((/** @type {Error} */ error) => error)
+  if (typeof first === 'boolean' && (await pageState(page))?.hasText) return first
+  // A loader that never ends on a page that rendered is the page's failure, not the boot's.
+  if (first instanceof Error && (await page.locator('main').count()) > 0) throw first
+  watcher.reset(timings)
+  await page.reload()
+  return settle(page, watcher, timings)
+}
+
+/** @type {import('./types.mjs').VisitRoute} */
+export async function visitRoute(page, watcher, target, { redirect, timings } = {}) {
+  const settled = await openRoute(page, watcher, target, withDefaults(timings))
+  const landedOn = normalizePath(new URL(page.url()).pathname)
+  const expected = normalizePath(new URL(target, page.url()).pathname)
+  if (landedOn !== expected && !redirect?.test(landedOn)) watcher.push(`redirected to ${landedOn}`)
+  if ((await page.locator(NOT_FOUND_SELECTOR).count()) > 0) watcher.push('the 404 view')
+  if (!(await page.locator('main').first().innerText()).trim()) watcher.push('an empty page')
+  for (const tag of await unresolvedComponents(page)) watcher.push(`an unresolved component <${tag}>`)
+  return { settled, landedOn, problems: watcher.problems(), apiAnswered: watcher.apiAnswered }
+}
+
+/**
+ * Where a listing's first record is kept for the rest of the run: a file in the run's output folder, which the
+ * boot check empties (Playwright does too when a run starts, but not in `--ui` mode). Shared by the workers, so
+ * all of them open the same record, and kept when a failed test restarts its worker.
+ *
+ * @param {string} outputDir
+ */
+const recordDir = (outputDir) => path.join(outputDir, 'route-walk-records')
+/** @param {string} outputDir @param {string} listing @param {RegExp} pattern */
+const recordFile = (outputDir, listing, pattern) =>
+  path.join(recordDir(outputDir), `${Buffer.from(`${listing} ${pattern.source}`).toString('base64url')}.json`)
+
+/** @type {import('./types.mjs').FirstRecordOf} */
+export async function firstRecordOf(
+  page,
+  watcher,
+  listing,
+  pattern,
+  { outputDir, rowSelector = ROW_SELECTOR, timings }
+) {
+  const file = recordFile(outputDir, listing, pattern)
+  if (fs.existsSync(file)) return JSON.parse(fs.readFileSync(file, 'utf8'))
+
+  // `keep`: an answer the listing gives every time. One that a failed load or a page still loading gave is not kept,
+  // so the routes after it look again instead of all failing on what went wrong once.
+  /** @type {{ lookup: RecordLookup; keep: boolean }} */
+  const { lookup, keep } = await (async () => {
+    const opened = await openRoute(page, watcher, listing, withDefaults(timings)).then(
+      () => undefined,
+      (/** @type {Error} */ error) => error
+    )
+    if (opened) return { lookup: { missing: `${listing} did not load: ${opened.message}` }, keep: false }
+    if ((await page.locator(NOT_FOUND_SELECTOR).count()) > 0) {
+      return { lookup: { missing: `${listing} is not a page` }, keep: true }
+    }
+    if (!(await pageState(page))?.hasText) return { lookup: { missing: `${listing} came up empty` }, keep: false }
+
+    const fromLink = await page.evaluate(
+      ({ prefix, source }) => {
+        const matches = new RegExp(source)
+        return Array.from(document.querySelectorAll(`main a[href^="${prefix}/"]`))
+          .map((link) => (link.getAttribute('href') ?? '').slice(prefix.length + 1).split(/[/?#]/)[0] ?? '')
+          .find((candidate) => matches.test(candidate))
+      },
+      { prefix: listing, source: pattern.source }
+    )
+    if (fromLink !== undefined) return { lookup: { id: fromLink }, keep: true }
+
+    const firstRow = page.locator(rowSelector).first()
+    if ((await firstRow.count()) === 0) {
+      // Empty only when the table says so: a row selector that matches nothing must not pass for no data.
+      if (await page.locator(NO_DATA_SELECTOR).first().isVisible()) {
+        return { lookup: { missing: `${listing} shows no record`, empty: /** @type {const} */ (true) }, keep: true }
+      }
+      return { lookup: { missing: `nothing in ${listing} matches the row selector` }, keep: false }
+    }
+    // The corner of the first cell, inside its padding: a cell can hold a link to another record
+    // (a site group, a super author), and a click on it would open that one instead.
+    await firstRow
+      .locator('td')
+      .first()
+      .click({ position: { x: 3, y: 3 } })
+    await page.waitForURL((url) => url.pathname.startsWith(`${listing}/`), { timeout: 10_000 }).catch(() => {})
+    const candidate = new URL(page.url()).pathname.slice(listing.length + 1).split('/')[0] ?? ''
+    if (!pattern.test(candidate)) {
+      return { lookup: { missing: `clicking the first row of ${listing} opened ${page.url()}` }, keep: false }
+    }
+
+    return { lookup: { id: candidate }, keep: true }
+  })()
+  if (keep) {
+    // Written aside and renamed: another worker reading meanwhile sees the whole file or none.
+    fs.mkdirSync(path.dirname(file), { recursive: true })
+    const written = `${file}.${process.pid}.tmp`
+    fs.writeFileSync(written, JSON.stringify(lookup))
+    fs.renameSync(written, file)
+  }
+
+  return lookup
+}
+
+/** @type {import('./types.mjs').DefineRouteWalk} */
+export function defineRouteWalkBoot({ test, expect }, options) {
+  const timings = withDefaults(options.timings)
+  test(`${options.title} - the app boots`, async ({ browser }, testInfo) => {
+    fs.rmSync(recordDir(testInfo.project.outputDir), { recursive: true, force: true })
+    const { baseURL, viewport, ignoreHTTPSErrors } = testInfo.project.use
+    const context = await browser.newContext({ baseURL, viewport, ignoreHTTPSErrors })
+    const page = await context.newPage()
+    /** @type {string[]} */
+    const errors = []
+    page.on('pageerror', (error) => errors.push(error.message))
+    await options.login(page)
+    await page.goto('/')
+    // The start-up loader is a `main` too, without text: wait for a page that says something.
+    await expect
+      .poll(
+        async () =>
+          (
+            await page
+              .locator('main')
+              .first()
+              .innerText()
+              .catch(() => '')
+          ).trim().length,
+        { message: 'the app did not render a page', timeout: timings.app }
+      )
+      .toBeGreaterThan(0)
+    const landedOn = normalizePath(new URL(page.url()).pathname)
+    expect(options.problemPages ?? PROBLEM_PAGES, `the app started on ${landedOn}`).not.toContain(landedOn)
+    expect(errors, 'uncaught errors while booting').toEqual([])
+    await context.close()
+  })
+}
+
+/** @type {import('./types.mjs').DefineRouteWalk} */
+export function defineRouteWalk({ test: base, expect }, options) {
+  const routes = readDeclaredRoutes(options.declarationFile)
+  const skip = options.skip ?? {}
+  const noRecord = options.noRecord ?? {}
+  const resolve = options.resolve ?? {}
+  const ignore = options.ignore ?? []
+  const timings = withDefaults(options.timings)
+
+  // One logged-in page per worker: logging in for each of hundreds of routes would double the run.
+  const test = base.extend(
+    /**
+     * @type {import('playwright/test').Fixtures<
+     *   {},
+     *   { walker: { page: Page; watcher: PageWatcher } },
+     *   import('playwright/test').PlaywrightTestArgs & import('playwright/test').PlaywrightTestOptions,
+     *   import('playwright/test').PlaywrightWorkerArgs & import('playwright/test').PlaywrightWorkerOptions
+     * >}
+     */ ({
+      walker: [
+        async ({ browser }, use, workerInfo) => {
+          const { baseURL, viewport, ignoreHTTPSErrors, navigationTimeout } = workerInfo.project.use
+          const context = await browser.newContext({ baseURL, viewport, ignoreHTTPSErrors })
+          if (navigationTimeout) context.setDefaultNavigationTimeout(navigationTimeout)
+          const page = await context.newPage()
+          const watcher = watchPage(page, { openRequests: options.openRequests, timings })
+          await options.login(page)
+          await use({ page, watcher })
+          await context.close()
+        },
+        { scope: 'worker' },
+      ],
+    })
+  )
+
+  test.describe(options.title, () => {
+    test.describe.configure({ mode: 'parallel' })
+
+    test.afterEach(async ({ walker }, testInfo) => {
+      if (testInfo.status === testInfo.expectedStatus) return
+      await testInfo.attach('screenshot', { body: await walker.page.screenshot(), contentType: 'image/png' })
+    })
+
+    test('reads every route', () => {
+      // A declaration the regex no longer matches would otherwise walk nothing and pass.
+      expect(routes.length, `routes in ${options.declarationFile}`).toBe(countPageFiles(options.pagesDir) - 1)
+      const configured = [skip, noRecord, resolve, options.redirects ?? {}, options.routeTimings ?? {}].flatMap(
+        (byRoute) => Object.keys(byRoute)
+      )
+      const unknown = configured.filter((routePath) => !routes.includes(routePath))
+      expect(unknown, 'configured routes the app no longer has').toEqual([])
+    })
+
+    for (const routePath of routes) {
+      test(`opens ${routePath}`, async ({ walker: { page, watcher } }, testInfo) => {
+        test.setTimeout(ROUTE_TIMEOUT)
+        test.skip(routePath in skip, skip[routePath])
+        const own = options.routeTimings?.[routePath]
+        const routeTimings = own ? { ...timings, ...own.timings } : timings
+        if (own)
+          testInfo.annotations.push({ type: 'timings', description: `${JSON.stringify(own.timings)}: ${own.reason}` })
+        for (const rule of options.skipIf ?? []) {
+          if (rule.routes.test(routePath)) test.skip(await rule.when(page), rule.reason)
+        }
+
+        let target
+        const resolver = resolve[routePath]
+        if (resolver) {
+          const resolved = await resolver(page)
+          test.skip(resolved === undefined, 'no record to open')
+          target = /** @type {string} */ (resolved)
+        } else {
+          const { filled, unresolved } = fillKnown(routePath, options.params ?? {})
+          expect(unresolved.length, 'parameters only `params` or `resolve` can give').toBeLessThanOrEqual(1)
+          target = filled
+          const [parameter] = unresolved
+          if (parameter) {
+            const listing = filled.slice(0, filled.indexOf(`/:${parameter.name}`))
+            const record = await firstRecordOf(page, watcher, listing, parameter.pattern, {
+              outputDir: testInfo.project.outputDir,
+              rowSelector: options.rowSelector,
+              timings,
+            })
+            if ('missing' in record) {
+              test.skip(record.empty === true, record.missing)
+              test.skip(routePath in noRecord, noRecord[routePath])
+              throw new Error(
+                `no record to open: ${record.missing}. List the route in \`noRecord\` if that is expected.`
+              )
+            }
+            expect(routePath in noRecord, 'listed in `noRecord`, but a record was found').toBe(false)
+            target = filled.replace(PARAM, record.id)
+          }
+        }
+
+        const visit = await visitRoute(page, watcher, target, {
+          redirect: options.redirects?.[routePath],
+          timings: routeTimings,
+        })
+        if (!visit.settled) {
+          testInfo.annotations.push({ type: 'kept requesting', description: `after ${routeTimings.settleLimit} ms` })
+        }
+        if (visit.apiAnswered === 0) {
+          testInfo.annotations.push({ type: 'no data', description: 'the page made no successful API request' })
+        }
+
+        const problems = visit.problems.filter((problem) => {
+          const accepted = ignore.find(
+            (rule) => rule.problem.test(problem) && (!rule.routes || rule.routes.test(routePath))
+          )
+          if (accepted) testInfo.annotations.push({ type: 'ignored', description: `${problem} — ${accepted.reason}` })
+          return !accepted
+        })
+        expect(problems, target).toEqual([])
+      })
+    }
+  })
+}

package/src/e2e/types.d.mts

@@ -0,0 +1,161 @@
+import type {
+  Expect,
+  Page,
+  PlaywrightTestArgs,
+  PlaywrightTestOptions,
+  PlaywrightWorkerArgs,
+  PlaywrightWorkerOptions,
+  Request,
+  TestType,
+} from 'playwright/test'
+
+/** Something a page did wrong, matched by `RouteWalkIgnore.problem` as text. */
+export type RouteWalkProblem = string
+
+export interface RouteWalkIgnore {
+  /** Matched against the problem's text, e.g. `/^console\.error: .*ResizeObserver/`. */
+  problem: RegExp
+  /** Only on these routes (their declared path); everywhere when left out. */
+  routes?: RegExp
+  /** Why it is not a failure. Required, so that an exception never goes unexplained. */
+  reason: string
+}
+
+/** How long the walk waits, in milliseconds. */
+export interface RouteWalkTimings {
+  /** For the app to render its `main`. */
+  app: number
+  /** For the card loaders to finish, once the page has settled. */
+  loader: number
+  /** How long no API request, script or style may be running before the page counts as loaded. */
+  quiet: number
+  /** How long a page that keeps requesting (autorefresh) is waited for. */
+  settleLimit: number
+  /**
+   * An API request that takes this long, answered or not, is a problem: it hung, or its client gave up on it (the
+   * clients time out at 15–30 s).
+   */
+  slowRequest: number
+}
+
+/**
+ * The admin's own `test` and `expect` from `@playwright/test`. The walk does not import Playwright Test: an admin
+ * keeps it in its e2e project, out of reach of this package, and a second copy in one run fails.
+ */
+export interface RouteWalkPlaywright {
+  test: TestType<PlaywrightTestArgs & PlaywrightTestOptions, PlaywrightWorkerArgs & PlaywrightWorkerOptions>
+  expect: Expect
+}
+
+export interface RouteWalkOptions {
+  /** Title of the describe block, e.g. `ADMIN-CMS (LOCAL) - Routes`. */
+  title: string
+  /** The app's `src/typed-router.d.ts`. */
+  declarationFile: string
+  /** The app's `src/pages`. The declaration must hold one route per page file but the catch-all. */
+  pagesDir: string
+  /** Logs the worker's page in. The page has the project's `baseURL`. */
+  login: (page: Page) => Promise<void>
+  /** Routes not opened at all, by declared path, with the reason. */
+  skip?: Record<string, string>
+  /**
+   * Routes not opened while a condition holds, e.g. a system the app's `config.json` disables: its routes
+   * send the visitor to `/unauthorized` by design.
+   */
+  skipIf?: { routes: RegExp; reason: string; when: (page: Page) => Promise<boolean> }[]
+  /** Values of parameters by name, used wherever the parameter appears (e.g. `{ system: 'cms' }`). */
+  params?: Record<string, string>
+  /**
+   * Routes whose address cannot come from a listing, by declared path: returns the path to open, or
+   * `undefined` when there is no record to open (the route is skipped, as for an empty listing).
+   */
+  resolve?: Record<string, (page: Page) => Promise<string | undefined>>
+  /**
+   * Routes whose listing cannot give a record, by declared path, with the reason: the address before the
+   * parameter is not a page, or its rows open something else. Any other such route fails. An empty listing
+   * only skips its routes, since what a listing holds depends on the environment's data.
+   */
+  noRecord?: Record<string, string>
+  /**
+   * Routes that forward by design, by declared path: where they may land (a pathname pattern). Landing
+   * anywhere but the address opened fails any other route, so a page that gives up and goes back is seen.
+   */
+  redirects?: Record<string, RegExp>
+  /** Problems that do not fail a route. */
+  ignore?: RouteWalkIgnore[]
+  /** The rows of a listing, clicked to find a record when no link to one is found. Default: Vuetify's data table. */
+  rowSelector?: string
+  /**
+   * Requests that stay open for the whole session, e.g. a server-sent event stream: neither waited for nor
+   * checked. Default: a notification stream (`/notifications/stream/`).
+   */
+  openRequests?: RegExp
+  /**
+   * Where the app sends a visitor it cannot serve. The boot check must not end on one of them.
+   * Default: `/unauthorized`, `/error` and `/login`.
+   */
+  problemPages?: string[]
+  /** Overrides of `DEFAULT_TIMINGS`. */
+  timings?: Partial<RouteWalkTimings>
+  /**
+   * Timings of single routes, by declared path, over `timings`, with the reason: a page known to be slow gets
+   * more time without every route getting it.
+   */
+  routeTimings?: Record<string, { timings: Partial<RouteWalkTimings>; reason: string }>
+}
+
+/** What a page did while the walk watched it. */
+export interface PageWatcher {
+  /** Forgets everything seen so far, before the next page; `slowRequest` for that page, else the watcher's own. */
+  reset(options?: { slowRequest?: number }): void
+  push(problem: RouteWalkProblem): void
+  /**
+   * The problems, once each: common-admin's `Api error: <url> …` and Chromium's "Failed to load resource" repeat a
+   * failed response the walk reports itself, so they are kept only for a url no response accounts for.
+   */
+  problems(): RouteWalkProblem[]
+  /** API requests answered with a success. */
+  readonly apiAnswered: number
+  /** When an API request, script or style last started or ended (ms since the epoch); 0 after `reset`. */
+  readonly lastActivity: number
+  /** The API requests, scripts and styles still running, with when they started. */
+  readonly inFlight: ReadonlyMap<Request, number>
+}
+
+export interface RouteVisit {
+  /** Whether no request was running at the end; a page that keeps requesting does not settle. */
+  settled: boolean
+  /** The pathname the page ended on. */
+  landedOn: string
+  problems: RouteWalkProblem[]
+  apiAnswered: number
+}
+
+export type RecordLookup = { id: string } | { missing: string; empty?: true }
+
+// The walk's functions, declared once: `routeWalk.d.mts` exports them by these types, and `routeWalk.mjs` gives
+// each its type, so that the type check holds the code to its declaration.
+
+export type ReadDeclaredRoutes = (declarationFile: string) => string[]
+
+export type DefineRouteWalk = (playwright: RouteWalkPlaywright, options: RouteWalkOptions) => void
+
+export type WatchPage = (
+  page: Page,
+  options?: { openRequests?: RegExp; timings?: Partial<RouteWalkTimings> }
+) => PageWatcher
+
+export type VisitRoute = (
+  page: Page,
+  watcher: PageWatcher,
+  target: string,
+  options?: { redirect?: RegExp; timings?: Partial<RouteWalkTimings> }
+) => Promise<RouteVisit>
+
+export type FirstRecordOf = (
+  page: Page,
+  watcher: PageWatcher,
+  listing: string,
+  pattern: RegExp,
+  options: { outputDir: string; rowSelector?: string; timings?: Partial<RouteWalkTimings> }
+) => Promise<RecordLookup>