@anzusystems/common-admin 1.49.0 → 2.0.0-rc.10

package/dist/domains/remoteAutocomplete/components/AFormRemoteAutocompleteWithCached.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,193 @@
+import { usePagination as e } from "../../api/composables/pagination.js";
+import { cloneDeep as t, isArray as n, isNull as r, isUndefined as i } from "../../../shared/utils/common.js";
+import { SubjectScopeKey as a, SystemScopeKey as o } from "../../../shared/injectionKeys.js";
+import { stringSplitOnFirstOccurrence as s } from "../../../shared/utils/string.js";
+import { FilterInnerConfigKey as c, FilterInnerDataKey as l } from "../../filters/utils/filterInjectionKeys.js";
+import { useAlerts as u } from "../../system/composables/alerts.js";
+import { computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createSlots as h, createTextVNode as g, createVNode as _, defineComponent as v, getCurrentInstance as y, inject as b, mergeModels as x, mergeProps as S, openBlock as C, ref as w, renderSlot as T, toDisplayString as E, unref as D, useModel as O, watch as k, withCtx as A } from "vue";
+import { useI18n as ee } from "vue-i18n";
+import { VChip as te } from "vuetify/components/VChip";
+import { watchDebounced as ne } from "@vueuse/core";
+import { VListItem as re } from "vuetify/components/VList";
+import { VAutocomplete as j } from "vuetify/components/VAutocomplete";
+// src/domains/remoteAutocomplete/components/AFormRemoteAutocompleteWithCached.vue?vue&type=script&setup=true&lang.ts
+var M = {
+	key: 0,
+	class: "a-required-mark"
+}, N = /*@__PURE__*/ v({
+	__name: "AFormRemoteAutocompleteWithCached",
+	props: /*@__PURE__*/ x({
+		modelValue: {},
+		label: { default: void 0 },
+		required: {
+			type: Boolean,
+			default: void 0
+		},
+		multiple: {
+			type: Boolean,
+			default: !1
+		},
+		clearable: {
+			type: Boolean,
+			default: !1
+		},
+		v: { default: null },
+		errorMessage: { default: void 0 },
+		hideLabel: {
+			type: Boolean,
+			default: !1
+		},
+		fetchItemsMinimal: {},
+		filterByField: { default: "name" },
+		filterSortBy: { default: null },
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		useCached: {},
+		itemTitle: { default: "name" },
+		itemValue: { default: "id" },
+		minSearchChars: { default: 2 },
+		minSearchText: { default: void 0 }
+	}, {
+		search: {
+			default: "",
+			required: !1
+		},
+		searchModifiers: {},
+		loadingLocal: {
+			type: Boolean,
+			default: !1,
+			required: !1
+		},
+		loadingLocalModifiers: {},
+		fetchedItemsMinimal: { required: !0 },
+		fetchedItemsMinimalModifiers: {}
+	}),
+	emits: /*@__PURE__*/ x([
+		"update:modelValue",
+		"blur",
+		"focus",
+		"searchChange",
+		"searchChangeDebounced"
+	], [
+		"update:search",
+		"update:loadingLocal",
+		"update:fetchedItemsMinimal"
+	]),
+	setup(v, { emit: x }) {
+		let N = v, P = x, F = O(v, "search"), I = O(v, "loadingLocal"), L = O(v, "fetchedItemsMinimal"), R = b(c), z = b(l), B = y()?.type.__name;
+		if (i(R) || i(z)) throw Error(`[${B}] Incorrect provide/inject config.`);
+		if (i(R.fields[N.filterByField]) || i(z[N.filterByField])) throw Error(`[${B}] Incorrect filter inner config. FilterByField is '${N.filterByField}' and available options are ${Object.keys(z).join(", ")}.`);
+		let { fetch: V, add: H, addManualMinimal: U } = N.useCached(), W = d(() => {
+			if (I.value) return "$vuetify.loading";
+			if (L.value.size === 0 && F.value.length < N.minSearchChars) return i(N.minSearchText) ? K("common.filter.filterMinChars", { min: N.minSearchChars }) : N.minSearchText;
+		}), G = d({
+			get() {
+				return N.modelValue;
+			},
+			set(e) {
+				P("update:modelValue", t(e));
+			}
+		}), { t: K } = ee(), q = b(o, void 0), J = b(a, void 0), Y = w(!1), { pagination: ie } = e(r(N.filterSortBy) ? null : N.filterSortBy.key, N.filterSortBy?.order), ae = () => {
+			Y.value = !0, P("focus", G.value);
+		}, oe = () => {
+			Y.value = !1, N.v?.$touch(), P("blur", G.value);
+		}, se = d(() => i(N.errorMessage) ? N.v?.$errors?.length ? N.v.$errors.map((e) => D(e.$message)) : [] : [N.errorMessage]), ce = d(() => {
+			if (!i(N.label)) return N.label;
+			if (i(q) || i(J) || i(N.v?.$path)) return "";
+			let { end: e } = s(N.v?.$path, ".");
+			return K(q + "." + J + ".model." + e);
+		}), X = d(() => i(N.required) ? (N.v?.required)?.$params?.type === "required" : N.required), { showErrorsDefault: Z } = u(), Q = 0, $ = async (e) => {
+			let t = ++Q;
+			if (r(e) || e.length < N.minSearchChars) L.value.clear(), I.value = !1;
+			else {
+				I.value = !0, z[N.filterByField] = e, L.value.clear();
+				try {
+					let e = await N.fetchItemsMinimal(ie, z, R);
+					if (t !== Q) return;
+					e.forEach((e) => {
+						L.value.set(e[N.itemValue], e);
+					});
+				} catch (e) {
+					t === Q && Z(e);
+				} finally {
+					t === Q && (I.value = !1);
+				}
+			}
+		}, le = d(() => {
+			let e = /* @__PURE__ */ new Map(), r = /* @__PURE__ */ new Map();
+			return n(G.value) ? G.value.forEach((t) => {
+				e.set(t, "");
+			}) : G.value && e.set(G.value, ""), L.value.forEach((n) => {
+				e.set(n[N.itemValue], n[N.itemTitle]), r.set(n[N.itemValue], t(n));
+			}), Array.from(e, ([e, t]) => ({
+				value: e,
+				title: t,
+				raw: r.get(e)
+			}));
+		}), ue = (e) => new Promise((n) => (L.value.forEach((n, r) => {
+			e.has(r) && U(t(n));
+		}), n(!0))), de = () => {
+			F.value = "", $(""), N.multiple ? G.value = [] : G.value = null;
+		};
+		return ne(F, (e, t) => {
+			let n = e;
+			n !== t && ($(n), P("searchChangeDebounced", n));
+		}, { debounce: 300 }), k(F, (e, t) => {
+			e !== t && P("searchChange", e);
+		}), k(G, async (e) => {
+			if (r(e) || i(e) || n(e) && e.length === 0) return;
+			let t = n(e) ? e : [e], a = new Set(t);
+			await ue(a), a.size > 0 && (H(Array.from(a)), V());
+		}, { immediate: !0 }), (e, t) => (C(), f(j, {
+			modelValue: G.value,
+			"onUpdate:modelValue": t[0] ||= (e) => G.value = e,
+			search: F.value,
+			"onUpdate:search": t[1] ||= (e) => F.value = e,
+			chips: "",
+			items: le.value,
+			"no-filter": "",
+			multiple: v.multiple,
+			clearable: v.clearable,
+			"error-messages": se.value,
+			loading: I.value,
+			"no-data-text": W.value,
+			autocomplete: "off",
+			onBlur: oe,
+			onFocus: ae,
+			"onClick:clear": de
+		}, h({
+			label: A(() => [v.hideLabel ? p("", !0) : (C(), m("span", { key: X.value + "" }, [g(E(ce.value) + " ", 1), X.value ? (C(), m("span", M)) : p("", !0)]))]),
+			"append-item": A(() => [T(e.$slots, "append-item")]),
+			chip: A(({ props: t, internalItem: n }) => [T(e.$slots, "chip", {
+				props: t,
+				item: n
+			}, () => [_(te, S(t, {
+				"close-label": "common.button.remove",
+				text: n.title
+			}), null, 16, ["text"])])]),
+			item: A(({ props: t, internalItem: n }) => [T(e.$slots, "item", {
+				props: t,
+				item: n
+			}, () => [_(re, { props: t }, null, 8, ["props"])])]),
+			_: 2
+		}, [v.multiple ? void 0 : {
+			name: "selection",
+			fn: A(() => []),
+			key: "0"
+		}]), 1032, [
+			"modelValue",
+			"search",
+			"items",
+			"multiple",
+			"clearable",
+			"error-messages",
+			"loading",
+			"no-data-text"
+		]));
+	}
+});
+export { N as default };
+
+//# sourceMappingURL=AFormRemoteAutocompleteWithCached.vue_vue_type_script_setup_true_lang.js.map

package/dist/domains/remoteAutocomplete/components/AFormRemoteAutocompleteWithCached.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AFormRemoteAutocompleteWithCached.vue_vue_type_script_setup_true_lang.js","names":["_useModel","oldValue","_openBlock","_createBlock","_component_VAutocomplete","_createSlots","_withCtx","_createElementBlock","_createTextVNode","_toDisplayString","_createCommentVNode","_renderSlot","_createVNode","_component_VChip","_mergeProps","_component_VListItem","_hoisted_1","AFormRemoteAutocompleteWithCached_vue_vue_type_script_setup_true_lang_default","\"search\"","\"searchModifiers\"","\"loadingLocal\"","\"loadingLocalModifiers\"","\"fetchedItemsMinimal\"","\"fetchedItemsMinimalModifiers\"","__emit","props","__props","emit","search","useModel","loadingLocal","fetchedItemsMinimal","filterInnerConfig","inject","FilterInnerConfigKey","filterInnerData","FilterInnerDataKey","componentName","getCurrentInstance","isUndefined","noDataText","computed","t","modelValue","cloneDeep","newValue","useI18n","system","SystemScopeKey","subject","SubjectScopeKey","isFocused","ref","usePagination","isNull","onFocus","onBlur","errorMessageComputed","unref","item","labelComputed","path","stringSplitOnFirstOccurrence","requiredComputed","useAlerts","searchCounter","apiSearch","requestId","query","res","pagination","showErrorsDefault","allItems","final","finalRaw","isArray","value","key","tryToAddFromFetchedItems","ids","addManualMinimal","resolve","onClickClear","watchDebounced","newValueBug","oldValueBug","watch","oldValue","values","idsToFetch","add","fetch","openBlock","createBlock","VAutocomplete","_cache","$event","createSlots","withCtx","createCommentVNode","createElementBlock","createTextVNode","toDisplayString","renderSlot","_ctx","chipProps","chipItem","createVNode","VChip","mergeProps","itemProps","itemItem","VListItem"],"sources":["../../../../src/domains/remoteAutocomplete/components/AFormRemoteAutocompleteWithCached.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { AFormFieldValidation } from '@/shared/types/Validation'\nimport { watchDebounced } from '@vueuse/core'\nimport { computed, getCurrentInstance, inject, type Ref, ref, watch, unref } from 'vue'\nimport { useI18n } from 'vue-i18n'\nimport type { Pagination } from '@/domains/api/composables/pagination'\nimport { usePagination } from '@/domains/api/composables/pagination'\nimport type { DocId, IntegerId } from '@/shared/types/common'\nimport { cloneDeep, isArray, isNull, isUndefined } from '@/shared/utils/common'\nimport { SubjectScopeKey, SystemScopeKey } from '@/shared/injectionKeys'\nimport { stringSplitOnFirstOccurrence } from '@/shared/utils/string'\nimport type { ValueObjectOption } from '@/shared/types/ValueObject'\nimport type { FilterConfig, FilterData } from '@/domains/filters/composables/filterFactory'\nimport { FilterInnerConfigKey, FilterInnerDataKey } from '@/domains/filters/utils/filterInjectionKeys'\nimport type { DatatableSortBy } from '@/domains/filters/datatable/utils/datatableColumns'\nimport { useAlerts } from '@/domains/system/composables/alerts'\n\ntype FetchItemsMinimalType = (\n  pagination: Ref<Pagination>,\n  filterData: FilterData,\n  filterConfig: FilterConfig\n) => Promise<any[]>\n\ntype UseCachedType = () => {\n  fetch: any\n  add: any\n  addManualMinimal: any\n}\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: any\n    label?: string | undefined\n    required?: boolean\n    multiple?: boolean\n    clearable?: boolean\n    v?: AFormFieldValidation | null\n    errorMessage?: string\n    hideLabel?: boolean\n    fetchItemsMinimal: FetchItemsMinimalType\n    filterByField?: string\n    filterSortBy?: DatatableSortBy\n    loading?: boolean\n    useCached: UseCachedType\n    itemTitle?: string\n    itemValue?: string\n    minSearchChars?: number\n    minSearchText?: string | undefined\n  }>(),\n  {\n    label: undefined,\n    required: undefined,\n    multiple: false,\n    clearable: false,\n    v: null,\n    errorMessage: undefined,\n    hideLabel: false,\n    filterByField: 'name',\n    filterSortBy: null,\n    loading: false,\n    itemTitle: 'name',\n    itemValue: 'id',\n    minSearchChars: 2,\n    minSearchText: undefined,\n  }\n)\nconst emit = defineEmits<{\n  (e: 'update:modelValue', data: DocId | IntegerId | DocId[] | IntegerId[] | null | undefined): void\n  (e: 'blur', data: DocId | IntegerId | DocId[] | IntegerId[] | null | undefined): void\n  (e: 'focus', data: DocId | IntegerId | DocId[] | IntegerId[] | null | undefined): void\n  (e: 'searchChange', data: string): void\n  (e: 'searchChangeDebounced', data: string): void\n}>()\n\nconst search = defineModel<string>('search', { default: '', required: false })\nconst loadingLocal = defineModel<boolean>('loadingLocal', { default: false, required: false })\nconst fetchedItemsMinimal = defineModel<Map<IntegerId | DocId, any>>('fetchedItemsMinimal', {\n  required: true,\n})\n\nconst filterInnerConfig = inject(FilterInnerConfigKey)\nconst filterInnerData = inject(FilterInnerDataKey)\n\nconst componentName = getCurrentInstance()?.type.__name\n\nif (isUndefined(filterInnerConfig) || isUndefined(filterInnerData)) {\n  throw new Error(`[${componentName}] Incorrect provide/inject config.`)\n}\n\nif (\n  // eslint-disable-next-line vue/no-setup-props-reactivity-loss\n  isUndefined(filterInnerConfig.fields[props.filterByField]) ||\n  // eslint-disable-next-line vue/no-setup-props-reactivity-loss\n  isUndefined(filterInnerData[props.filterByField])\n) {\n  throw new Error(\n    `[${componentName}] Incorrect filter inner config. ` +\n      `FilterByField is '${props.filterByField}' and available options are ${Object.keys(filterInnerData).join(', ')}.`\n  )\n}\n\n// eslint-disable-next-line vue/no-setup-props-reactivity-loss\nconst { fetch, add, addManualMinimal } = props.useCached()\n\nconst noDataText = computed(() => {\n  if (loadingLocal.value) {\n    return '$vuetify.loading'\n  }\n  if (fetchedItemsMinimal.value.size === 0 && search.value.length < props.minSearchChars) {\n    return isUndefined(props.minSearchText)\n      ? t('common.filter.filterMinChars', { min: props.minSearchChars })\n      : props.minSearchText\n  }\n  return undefined\n})\n\nconst modelValue = computed({\n  get() {\n    return props.modelValue\n  },\n  set(newValue: DocId | IntegerId | DocId[] | IntegerId[] | null | undefined) {\n    emit('update:modelValue', cloneDeep<DocId | IntegerId | DocId[] | IntegerId[] | null | undefined>(newValue))\n  },\n})\n\nconst { t } = useI18n()\nconst system = inject<string | undefined>(SystemScopeKey, undefined)\nconst subject = inject<string | undefined>(SubjectScopeKey, undefined)\n\nconst isFocused = ref(false)\n// eslint-disable-next-line vue/no-setup-props-reactivity-loss\nconst { pagination } = usePagination(\n  // eslint-disable-next-line vue/no-setup-props-reactivity-loss\n  isNull(props.filterSortBy) ? null : props.filterSortBy.key,\n  props.filterSortBy?.order\n)\n\nconst onFocus = () => {\n  isFocused.value = true\n  emit('focus', modelValue.value)\n}\n\nconst onBlur = () => {\n  isFocused.value = false\n  props.v?.$touch()\n  emit('blur', modelValue.value)\n}\n\nconst errorMessageComputed = computed(() => {\n  if (!isUndefined(props.errorMessage)) return [props.errorMessage]\n  if (props.v?.$errors?.length) return props.v.$errors.map((item) => unref(item.$message))\n  return []\n})\n\nconst labelComputed = computed(() => {\n  if (!isUndefined(props.label)) return props.label\n  if (isUndefined(system) || isUndefined(subject) || isUndefined(props.v?.$path)) return ''\n  const { end: path } = stringSplitOnFirstOccurrence(props.v?.$path, '.')\n  return t(system + '.' + subject + '.model.' + path)\n})\n\nconst requiredComputed = computed(() => {\n  if (!isUndefined(props.required)) return props.required\n  return (props.v?.required as { $params?: { type?: string } } | undefined)?.$params?.type === 'required'\n})\n\nconst { showErrorsDefault } = useAlerts()\n\nlet searchCounter = 0\nconst apiSearch = async (query: string | null) => {\n  const requestId = ++searchCounter\n  if (isNull(query) || query.length < props.minSearchChars) {\n    fetchedItemsMinimal.value.clear()\n    // The request in flight, if any, is stale now and leaves the loader alone.\n    loadingLocal.value = false\n    return\n  }\n  loadingLocal.value = true\n  filterInnerData[props.filterByField] = query\n  fetchedItemsMinimal.value.clear()\n  try {\n    const res = await props.fetchItemsMinimal(pagination, filterInnerData, filterInnerConfig)\n    if (requestId !== searchCounter) return\n    res.forEach((item: any) => {\n      fetchedItemsMinimal.value.set(item[props.itemValue], item)\n    })\n  } catch (e) {\n    if (requestId === searchCounter) showErrorsDefault(e)\n  } finally {\n    if (requestId === searchCounter) loadingLocal.value = false\n  }\n}\n\nconst allItems = computed<ValueObjectOption<DocId | IntegerId>[]>(() => {\n  const final: Map<IntegerId | DocId, string> = new Map()\n  const finalRaw: Map<IntegerId | DocId, any> = new Map()\n  if (isArray(modelValue.value)) {\n    modelValue.value.forEach((value: any) => {\n      final.set(value, '')\n    })\n  } else if (modelValue.value) {\n    final.set(modelValue.value, '')\n  }\n  fetchedItemsMinimal.value.forEach((value) => {\n    final.set(value[props.itemValue], value[props.itemTitle])\n    finalRaw.set(value[props.itemValue], cloneDeep(value))\n  })\n  return Array.from(final, ([key, value]) => {\n    return { value: key, title: value, raw: finalRaw.get(key) }\n  })\n})\n\nconst tryToAddFromFetchedItems = (ids: Set<DocId | IntegerId>) => {\n  return new Promise<boolean>((resolve) => {\n    fetchedItemsMinimal.value.forEach((value, key) => {\n      if (ids.has(key)) {\n        addManualMinimal(cloneDeep(value))\n      }\n    })\n    return resolve(true)\n  })\n}\n\nconst onClickClear = () => {\n  search.value = ''\n  apiSearch('')\n  if (props.multiple) {\n    modelValue.value = []\n    return\n  }\n  modelValue.value = null\n}\n\nwatchDebounced(\n  search,\n  (newValueBug, oldValueBug) => {\n    // todo rollback fix when fixed on vuetify/vue use side\n    const newValue = newValueBug as unknown as string\n    const oldValue = oldValueBug as unknown as string | undefined\n    if (newValue !== oldValue) {\n      apiSearch(newValue)\n      emit('searchChangeDebounced', newValue)\n    }\n  },\n  { debounce: 300 }\n)\n\nwatch(search, (newValue, oldValue) => {\n  if (newValue !== oldValue) {\n    emit('searchChange', newValue)\n  }\n})\n\nwatch(\n  modelValue,\n  async (newValue) => {\n    if (isNull(newValue) || isUndefined(newValue) || (isArray(newValue) && newValue.length === 0)) {\n      return\n    }\n    const values = isArray(newValue) ? newValue : [newValue]\n    const idsToFetch = new Set(values)\n    await tryToAddFromFetchedItems(idsToFetch)\n\n    if (idsToFetch.size > 0) {\n      add(Array.from(idsToFetch) as Array<DocId & IntegerId>)\n      fetch()\n    }\n  },\n  { immediate: true }\n)\n</script>\n\n<template>\n  <VAutocomplete\n    v-model=\"modelValue\"\n    v-model:search=\"search\"\n    chips\n    :items=\"allItems\"\n    no-filter\n    :multiple=\"multiple\"\n    :clearable=\"clearable\"\n    :error-messages=\"errorMessageComputed\"\n    :loading=\"loadingLocal\"\n    :no-data-text=\"noDataText\"\n    autocomplete=\"off\"\n    @blur=\"onBlur\"\n    @focus=\"onFocus\"\n    @click:clear=\"onClickClear\"\n  >\n    <template #label>\n      <span\n        v-if=\"!hideLabel\"\n        :key=\"requiredComputed + ''\"\n      >\n        {{ labelComputed }}\n        <span\n          v-if=\"requiredComputed\"\n          class=\"a-required-mark\"\n        />\n      </span>\n    </template>\n    <template #append-item>\n      <slot name=\"append-item\" />\n    </template>\n    <template\n      v-if=\"!multiple\"\n      #selection\n    />\n    <!-- @vue-skip -->\n    <template #chip=\"{ props: chipProps, internalItem: chipItem }\">\n      <slot\n        name=\"chip\"\n        :props=\"chipProps\"\n        :item=\"chipItem\"\n      >\n        <VChip\n          v-bind=\"chipProps\"\n          close-label=\"common.button.remove\"\n          :text=\"chipItem.title\"\n        />\n      </slot>\n    </template>\n    <!-- @vue-skip -->\n    <template #item=\"{ props: itemProps, internalItem: itemItem }\">\n      <slot\n        name=\"item\"\n        :props=\"itemProps\"\n        :item=\"itemItem\"\n      >\n        <VListItem :props=\"itemProps\" />\n      </slot>\n    </template>\n  </VAutocomplete>\n</template>\n"],"mappings":"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"}

package/dist/domains/remoteAutocomplete/composables/createRemoteAutocomplete.d.ts

@@ -0,0 +1,119 @@
+import { ComponentObjectPropsOptions, DefineSetupFnComponent, ExtractPropTypes, ExtractPublicPropTypes, Ref } from 'vue';
+import { FilterConfig, FilterData } from '../../filters/composables/filterFactory';
+import { Pagination } from '../../api/composables/pagination';
+import { CollabComponentConfig } from '../../collab/types/Collab';
+import { DatatableSortBy } from '../../filters/datatable/utils/datatableColumns';
+import { DocId, IntegerId } from '../../../shared/types/common';
+import { AFormFieldValidation } from '../../../shared/types/Validation';
+import { ValueObjectOption } from '../../../shared/types/ValueObject';
+export interface RemoteSelectActions<T extends IntegerId | DocId> {
+    fetchItems: (pagination: Ref<Pagination>, filterData: FilterData, filterConfig: FilterConfig) => Promise<ValueObjectOption<T>[]>;
+    fetchItemsByIds: (ids: T[]) => Promise<ValueObjectOption<T>[]>;
+}
+export interface RemoteInnerFilter {
+    filterConfig: FilterConfig;
+    filterData: FilterData;
+}
+/**
+ * What the list of a scoped autocomplete depends on (a site group, an ext system): the autocomplete keeps
+ * its fetched list across a model reset and prefetches once, so a changed scope has to remount it.
+ */
+export interface RemoteAutocompleteScope<P> {
+    /** The scope, `undefined` while unset. Also the key of the inner autocomplete: a change remounts it. */
+    of: (props: P) => unknown;
+    /** The field is disabled while the scope is unset, when this says the scope is required. */
+    requiredWhen?: (props: P) => boolean;
+    /**
+     * The form autocomplete clears its model (`[]` when `multiple`, else
+     * `null`) when the scope changes from a set value. Default `true`.
+     * A filter never does: its value outlives a sibling filter's change.
+     */
+    reset?: boolean;
+}
+export interface CreateRemoteAutocompleteOptions<T extends IntegerId | DocId, PO extends ComponentObjectPropsOptions = Record<never, never>> {
+    /** The component's name, for devtools and warnings. */
+    name: string;
+    /**
+     * The component's own props, read by the options below and not passed to the autocomplete. Declared,
+     * so they are reactive and booleans are cast.
+     */
+    props?: PO;
+    /** Called in the component's setup, with the component's props when it has `props`. */
+    useSelectActions: (props: ExtractPropTypes<PO>) => RemoteSelectActions<T>;
+    /** Called in the component's setup; provided as the inner filter of the autocomplete. */
+    useInnerFilter: () => RemoteInnerFilter;
+    /**
+     * Inner filter fields that follow the props. Written in setup, before the first fetch, and on every change.
+     * Every key is written each time: return `null` for an unset one.
+     */
+    filterFromProps?: (props: ExtractPropTypes<PO>) => Record<string, unknown>;
+    scope?: RemoteAutocompleteScope<ExtractPropTypes<PO>>;
+    filterByField: string;
+    filterSortBy?: DatatableSortBy;
+    prefetch?: 'hover' | 'focus' | 'mounted' | false;
+    /** Props of the autocomplete this one sets unless its caller does, e.g. `{ clearable: true }`. */
+    defaults?: Record<string, unknown>;
+    /** A model value of `0` reaches the autocomplete as `null`: nothing selected. */
+    zeroIsEmpty?: boolean;
+}
+/** What a caller can set on a form remote autocomplete; anything else falls through to it as well. */
+export interface RemoteAutocompleteProps<M> {
+    modelValue: M;
+    label?: string | undefined;
+    required?: boolean | undefined;
+    multiple?: boolean;
+    clearable?: boolean;
+    v?: AFormFieldValidation | null;
+    errorMessage?: string;
+    hideDetails?: boolean;
+    hideLabel?: boolean;
+    filterSortBy?: DatatableSortBy;
+    loading?: boolean;
+    collab?: CollabComponentConfig;
+    disabled?: boolean | undefined;
+    readonly?: boolean;
+    chips?: boolean;
+    closableChips?: boolean;
+    disableAutoSingleSelect?: boolean;
+    prefetch?: 'hover' | 'focus' | 'mounted' | false;
+    minSearchChars?: number;
+    minSearchText?: string | undefined;
+}
+/** What a caller can set on a filter remote autocomplete; anything else falls through to it as well. */
+export interface FilterRemoteAutocompleteProps {
+    name: string;
+    filterSortBy?: DatatableSortBy;
+    prefetch?: 'hover' | 'focus' | 'mounted' | false;
+    minSearchChars?: number;
+    minSearchText?: string | undefined;
+    placeholder?: string | undefined;
+}
+export type RemoteAutocompleteComponent<M, P = unknown> = DefineSetupFnComponent<RemoteAutocompleteProps<M> & P, {
+    'update:modelValue': (value: M) => true;
+    blur: (value: M) => true;
+    focus: (value: M) => true;
+    searchChange: (text: string) => true;
+    searchChangeDebounced: (text: string) => true;
+}>;
+export type FilterRemoteAutocompleteComponent<P = unknown> = DefineSetupFnComponent<FilterRemoteAutocompleteProps & P>;
+/**
+ * A remote autocomplete for one entity: its select actions, inner filter, search field and default props.
+ * The caller's props, listeners and slots reach `AFormRemoteAutocomplete` and win over `defaults`.
+ * `M` is the model type: one id, several, or `null`. A caller binding
+ * a possibly `undefined` value needs `T | T[] | null | undefined`.
+ * @example
+ * In an SFC's plain `<script lang="ts">`:
+ * ```ts
+ * export default createRemoteAutocomplete({
+ *   name: 'DeskRemoteAutocomplete',
+ *   useSelectActions: useDeskSelectActions,
+ *   useInnerFilter: useDeskInnerFilter,
+ *   filterByField: 'name',
+ *   prefetch: 'hover',
+ *   defaults: { clearable: true },
+ * })
+ * ```
+ */
+export declare function createRemoteAutocomplete<T extends IntegerId | DocId = IntegerId, M extends T | T[] | null | undefined = T | T[] | null, PO extends ComponentObjectPropsOptions = Record<never, never>>(options: CreateRemoteAutocompleteOptions<T, PO>): RemoteAutocompleteComponent<M, ExtractPublicPropTypes<PO>>;
+/** `createRemoteAutocomplete` for a filter: the caller's `name` picks the filter field. */
+export declare function createFilterRemoteAutocomplete<T extends IntegerId | DocId = IntegerId, PO extends ComponentObjectPropsOptions = Record<never, never>>(options: CreateRemoteAutocompleteOptions<T, PO>): FilterRemoteAutocompleteComponent<ExtractPublicPropTypes<PO>>;

package/dist/domains/remoteAutocomplete/composables/createRemoteAutocomplete.js

@@ -0,0 +1,72 @@
+import e from "../components/AFormRemoteAutocomplete.js";
+import t from "../components/AFilterRemoteAutocomplete.js";
+import { FilterInnerConfigKey as n, FilterInnerDataKey as r } from "../../filters/utils/filterInjectionKeys.js";
+import { defineComponent as i, h as a, provide as o, watch as s } from "vue";
+// src/domains/remoteAutocomplete/composables/createRemoteAutocomplete.ts
+var c = (e) => Object.fromEntries(Object.entries(e).filter(([, e]) => e !== void 0)), l = (e, t) => {
+	let { fetchItems: i, fetchItemsByIds: a } = e.props ? e.useSelectActions(t) : e.useSelectActions(), { filterConfig: c, filterData: l } = e.useInnerFilter(), { filterFromProps: u } = e;
+	u && s(() => u(t), (e) => Object.assign(l, e), { immediate: !0 }), o(n, c), o(r, l);
+	let { scope: d } = e, f = () => {
+		let e = d?.of(t);
+		return e === void 0 ? void 0 : JSON.stringify(e);
+	}, p = () => d ? {
+		key: f(),
+		...d.requiredWhen?.(t) && f() === void 0 ? { disabled: !0 } : {}
+	} : {};
+	return {
+		bound: {
+			...e.defaults,
+			fetchItems: i,
+			fetchItemsByIds: a,
+			filterByField: e.filterByField,
+			...e.filterSortBy === void 0 ? {} : { filterSortBy: e.filterSortBy },
+			...e.prefetch === void 0 ? {} : { prefetch: e.prefetch }
+		},
+		scopeKey: f,
+		scoped: p
+	};
+};
+function u(t) {
+	return i({
+		name: t.name,
+		inheritAttrs: !1,
+		props: {
+			...t.props,
+			modelValue: {
+				type: null,
+				required: !0
+			}
+		},
+		emits: ["update:modelValue"],
+		setup(n, { attrs: r, slots: i, emit: o }) {
+			let { bound: u, scopeKey: d, scoped: f } = l(t, n);
+			return t.scope && t.scope.reset !== !1 && s(d, (e, t) => {
+				t !== void 0 && e !== t && o("update:modelValue", r.multiple === "" || r.multiple === !0 ? [] : null);
+			}), () => a(e, {
+				...u,
+				...c(r),
+				...f(),
+				modelValue: t.zeroIsEmpty && n.modelValue === 0 ? null : n.modelValue,
+				"onUpdate:modelValue": (e) => o("update:modelValue", e)
+			}, i);
+		}
+	});
+}
+function d(e) {
+	return i({
+		name: e.name,
+		inheritAttrs: !1,
+		props: { ...e.props },
+		setup(n, { attrs: r, slots: i }) {
+			let { bound: o, scoped: s } = l(e, n);
+			return () => a(t, {
+				...o,
+				...c(r),
+				...s()
+			}, i);
+		}
+	});
+}
+export { d as createFilterRemoteAutocomplete, u as createRemoteAutocomplete };
+
+//# sourceMappingURL=createRemoteAutocomplete.js.map

package/dist/domains/remoteAutocomplete/composables/createRemoteAutocomplete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createRemoteAutocomplete.js","names":["AFormRemoteAutocomplete","AFilterRemoteAutocomplete","AFormRemoteAutocomplete_default","AFilterRemoteAutocomplete_default","defined","attrs","value","base","options","props","filterFromProps","watch","filterData","fields","provide","FilterInnerConfigKey","filterConfig","FilterInnerDataKey","scopeKey","scope","scoped","createRemoteAutocomplete","defineComponent","before","now","emit","h","bound","slots","createFilterRemoteAutocomplete"],"sources":["../../../../src/domains/remoteAutocomplete/composables/createRemoteAutocomplete.ts"],"sourcesContent":["import {\n  type Component,\n  type ComponentObjectPropsOptions,\n  defineComponent,\n  type DefineSetupFnComponent,\n  type ExtractPropTypes,\n  type ExtractPublicPropTypes,\n  h,\n  type PropType,\n  provide,\n  type Ref,\n  watch,\n} from 'vue'\nimport AFormRemoteAutocomplete from '@/domains/remoteAutocomplete/components/AFormRemoteAutocomplete.vue'\nimport AFilterRemoteAutocomplete from '@/domains/remoteAutocomplete/components/AFilterRemoteAutocomplete.vue'\nimport { FilterInnerConfigKey, FilterInnerDataKey } from '@/domains/filters/utils/filterInjectionKeys'\nimport type { FilterConfig, FilterData } from '@/domains/filters/composables/filterFactory'\nimport type { Pagination } from '@/domains/api/composables/pagination'\nimport type { CollabComponentConfig } from '@/domains/collab/types/Collab'\nimport type { DatatableSortBy } from '@/domains/filters/datatable/utils/datatableColumns'\nimport type { DocId, IntegerId } from '@/shared/types/common'\nimport type { AFormFieldValidation } from '@/shared/types/Validation'\nimport type { ValueObjectOption } from '@/shared/types/ValueObject'\n\nexport interface RemoteSelectActions<T extends IntegerId | DocId> {\n  fetchItems: (\n    pagination: Ref<Pagination>,\n    filterData: FilterData,\n    filterConfig: FilterConfig\n  ) => Promise<ValueObjectOption<T>[]>\n  fetchItemsByIds: (ids: T[]) => Promise<ValueObjectOption<T>[]>\n}\n\nexport interface RemoteInnerFilter {\n  filterConfig: FilterConfig\n  filterData: FilterData\n}\n\n/**\n * What the list of a scoped autocomplete depends on (a site group, an ext system): the autocomplete keeps\n * its fetched list across a model reset and prefetches once, so a changed scope has to remount it.\n */\nexport interface RemoteAutocompleteScope<P> {\n  /** The scope, `undefined` while unset. Also the key of the inner autocomplete: a change remounts it. */\n  of: (props: P) => unknown\n  /** The field is disabled while the scope is unset, when this says the scope is required. */\n  requiredWhen?: (props: P) => boolean\n  /**\n   * The form autocomplete clears its model (`[]` when `multiple`, else\n   * `null`) when the scope changes from a set value. Default `true`.\n   * A filter never does: its value outlives a sibling filter's change.\n   */\n  reset?: boolean\n}\n\nexport interface CreateRemoteAutocompleteOptions<\n  T extends IntegerId | DocId,\n  PO extends ComponentObjectPropsOptions = Record<never, never>,\n> {\n  /** The component's name, for devtools and warnings. */\n  name: string\n  /**\n   * The component's own props, read by the options below and not passed to the autocomplete. Declared,\n   * so they are reactive and booleans are cast.\n   */\n  props?: PO\n  /** Called in the component's setup, with the component's props when it has `props`. */\n  useSelectActions: (props: ExtractPropTypes<PO>) => RemoteSelectActions<T>\n  /** Called in the component's setup; provided as the inner filter of the autocomplete. */\n  useInnerFilter: () => RemoteInnerFilter\n  /**\n   * Inner filter fields that follow the props. Written in setup, before the first fetch, and on every change.\n   * Every key is written each time: return `null` for an unset one.\n   */\n  filterFromProps?: (props: ExtractPropTypes<PO>) => Record<string, unknown>\n  scope?: RemoteAutocompleteScope<ExtractPropTypes<PO>>\n  filterByField: string\n  filterSortBy?: DatatableSortBy\n  prefetch?: 'hover' | 'focus' | 'mounted' | false\n  /** Props of the autocomplete this one sets unless its caller does, e.g. `{ clearable: true }`. */\n  defaults?: Record<string, unknown>\n  /** A model value of `0` reaches the autocomplete as `null`: nothing selected. */\n  zeroIsEmpty?: boolean\n}\n\n/** What a caller can set on a form remote autocomplete; anything else falls through to it as well. */\nexport interface RemoteAutocompleteProps<M> {\n  modelValue: M\n  label?: string | undefined\n  required?: boolean | undefined\n  multiple?: boolean\n  clearable?: boolean\n  v?: AFormFieldValidation | null\n  errorMessage?: string\n  hideDetails?: boolean\n  hideLabel?: boolean\n  filterSortBy?: DatatableSortBy\n  loading?: boolean\n  collab?: CollabComponentConfig\n  disabled?: boolean | undefined\n  readonly?: boolean\n  chips?: boolean\n  closableChips?: boolean\n  disableAutoSingleSelect?: boolean\n  prefetch?: 'hover' | 'focus' | 'mounted' | false\n  minSearchChars?: number\n  minSearchText?: string | undefined\n}\n\n/** What a caller can set on a filter remote autocomplete; anything else falls through to it as well. */\nexport interface FilterRemoteAutocompleteProps {\n  name: string\n  filterSortBy?: DatatableSortBy\n  prefetch?: 'hover' | 'focus' | 'mounted' | false\n  minSearchChars?: number\n  minSearchText?: string | undefined\n  placeholder?: string | undefined\n}\n\n// Only `update:modelValue` is the component's own; the autocomplete's other events reach it as listeners in the\n// attributes, and these types say so.\nexport type RemoteAutocompleteComponent<M, P = unknown> = DefineSetupFnComponent<\n  RemoteAutocompleteProps<M> & P,\n  {\n    'update:modelValue': (value: M) => true\n    blur: (value: M) => true\n    focus: (value: M) => true\n    searchChange: (text: string) => true\n    searchChangeDebounced: (text: string) => true\n  }\n>\n\nexport type FilterRemoteAutocompleteComponent<P = unknown> = DefineSetupFnComponent<FilterRemoteAutocompleteProps & P>\n\n// A value the caller leaves `undefined` falls back to the default instead of overriding it.\nconst defined = (attrs: Record<string, unknown>) =>\n  Object.fromEntries(Object.entries(attrs).filter(([, value]) => value !== undefined))\n\nconst base = <T extends IntegerId | DocId, PO extends ComponentObjectPropsOptions>(\n  options: CreateRemoteAutocompleteOptions<T, PO>,\n  props: ExtractPropTypes<PO>\n) => {\n  const { fetchItems, fetchItemsByIds } = options.props\n    ? options.useSelectActions(props)\n    : (options.useSelectActions as () => RemoteSelectActions<T>)()\n  const { filterConfig, filterData } = options.useInnerFilter()\n  const { filterFromProps } = options\n  if (filterFromProps) {\n    watch(\n      () => filterFromProps(props),\n      (fields) => Object.assign(filterData, fields),\n      { immediate: true }\n    )\n  }\n  provide(FilterInnerConfigKey, filterConfig)\n  provide(FilterInnerDataKey, filterData)\n  const { scope } = options\n  const scopeKey = () => {\n    const value = scope?.of(props)\n    return value === undefined ? undefined : JSON.stringify(value)\n  }\n  const scoped = () => {\n    if (!scope) return {}\n    // Applied after the caller's attrs: an unset required scope always disables the field.\n    // Otherwise left out, so the caller's `disabled`, or its absence (the collab lock), goes through.\n    return { key: scopeKey(), ...(scope.requiredWhen?.(props) && scopeKey() === undefined ? { disabled: true } : {}) }\n  }\n  return {\n    bound: {\n      ...options.defaults,\n      fetchItems,\n      fetchItemsByIds,\n      filterByField: options.filterByField,\n      ...(options.filterSortBy === undefined ? {} : { filterSortBy: options.filterSortBy }),\n      ...(options.prefetch === undefined ? {} : { prefetch: options.prefetch }),\n    },\n    scopeKey,\n    scoped,\n  }\n}\n\n/**\n * A remote autocomplete for one entity: its select actions, inner filter, search field and default props.\n * The caller's props, listeners and slots reach `AFormRemoteAutocomplete` and win over `defaults`.\n * `M` is the model type: one id, several, or `null`. A caller binding\n * a possibly `undefined` value needs `T | T[] | null | undefined`.\n * @example\n * In an SFC's plain `<script lang=\"ts\">`:\n * ```ts\n * export default createRemoteAutocomplete({\n *   name: 'DeskRemoteAutocomplete',\n *   useSelectActions: useDeskSelectActions,\n *   useInnerFilter: useDeskInnerFilter,\n *   filterByField: 'name',\n *   prefetch: 'hover',\n *   defaults: { clearable: true },\n * })\n * ```\n */\nexport function createRemoteAutocomplete<\n  T extends IntegerId | DocId = IntegerId,\n  M extends T | T[] | null | undefined = T | T[] | null,\n  PO extends ComponentObjectPropsOptions = Record<never, never>,\n>(options: CreateRemoteAutocompleteOptions<T, PO>): RemoteAutocompleteComponent<M, ExtractPublicPropTypes<PO>> {\n  return defineComponent({\n    name: options.name,\n    inheritAttrs: false,\n    props: {\n      ...options.props,\n      modelValue: { type: null as unknown as PropType<M>, required: true },\n    },\n    emits: ['update:modelValue'],\n    setup(props, { attrs, slots, emit }) {\n      const { bound, scopeKey, scoped } = base(options, props as ExtractPropTypes<PO>)\n      if (options.scope && options.scope.reset !== false) {\n        watch(scopeKey, (now, before) => {\n          if (before === undefined || now === before) return\n          // `multiple` is the caller's attribute, a bare one arriving as ''.\n          emit('update:modelValue', (attrs.multiple === '' || attrs.multiple === true ? [] : null) as M)\n        })\n      }\n      return () =>\n        h(\n          AFormRemoteAutocomplete as Component,\n          {\n            ...bound,\n            ...defined(attrs),\n            ...scoped(),\n            modelValue: options.zeroIsEmpty && props.modelValue === 0 ? null : props.modelValue,\n            'onUpdate:modelValue': (value: M) => emit('update:modelValue', value),\n          },\n          slots\n        )\n    },\n  }) as unknown as RemoteAutocompleteComponent<M, ExtractPublicPropTypes<PO>>\n}\n\n/** `createRemoteAutocomplete` for a filter: the caller's `name` picks the filter field. */\nexport function createFilterRemoteAutocomplete<\n  T extends IntegerId | DocId = IntegerId,\n  PO extends ComponentObjectPropsOptions = Record<never, never>,\n>(options: CreateRemoteAutocompleteOptions<T, PO>): FilterRemoteAutocompleteComponent<ExtractPublicPropTypes<PO>> {\n  return defineComponent({\n    name: options.name,\n    inheritAttrs: false,\n    props: { ...options.props },\n    setup(props, { attrs, slots }) {\n      const { bound, scoped } = base(options, props as ExtractPropTypes<PO>)\n      return () => h(AFilterRemoteAutocomplete as Component, { ...bound, ...defined(attrs), ...scoped() }, slots)\n    },\n  }) as unknown as FilterRemoteAutocompleteComponent<ExtractPublicPropTypes<PO>>\n}\n"],"mappings":";;;;;AAuIA,IAAMI,KAAW,MACf,OAAO,YAAY,OAAO,QAAQC,CAAK,CAAC,CAAC,QAAQ,GAAGC,OAAWA,MAAU,KAAA,CAAS,CAAC,GAE/EC,KACJ,GACA,MACG;CACH,IAAM,EAAE,eAAY,uBAAoBC,EAAQ,QAC5CA,EAAQ,iBAAiBC,CAAK,IAC7BD,EAAQ,iBAAkD,GACzD,EAAE,iBAAc,kBAAeA,EAAQ,eAAe,GACtD,EAAE,uBAAoBA;CAS5B,AARIE,KACFC,QACQD,EAAgBD,CAAK,IAC1B,MAAW,OAAO,OAAOG,GAAYC,CAAM,GAC5C,EAAE,WAAW,GAAK,CACpB,GAEFC,EAAQC,GAAsBC,CAAY,GAC1CF,EAAQG,GAAoBL,CAAU;CACtC,IAAM,EAAE,aAAUJ,GACZU,UAAiB;EACrB,IAAMZ,IAAQa,GAAO,GAAGV,CAAK;EAC7B,OAAOH,MAAU,KAAA,IAAY,KAAA,IAAY,KAAK,UAAUA,CAAK;CAC/D,GACMc,UACCD,IAGE;EAAE,KAAKD,EAAS;EAAG,GAAIC,EAAM,eAAeV,CAAK,KAAKS,EAAS,MAAM,KAAA,IAAY,EAAE,UAAU,GAAK,IAAI,CAAC;CAAG,IAH9F,CAAC;CAKtB,OAAO;EACL,OAAO;GACL,GAAGV,EAAQ;GACX;GACA;GACA,eAAeA,EAAQ;GACvB,GAAIA,EAAQ,iBAAiB,KAAA,IAAY,CAAC,IAAI,EAAE,cAAcA,EAAQ,aAAa;GACnF,GAAIA,EAAQ,aAAa,KAAA,IAAY,CAAC,IAAI,EAAE,UAAUA,EAAQ,SAAS;EACzE;EACA;EACA;CACF;AACF;AAoBA,SAAgBa,EAId,GAA6G;CAC7G,OAAOC,EAAgB;EACrB,MAAMd,EAAQ;EACd,cAAc;EACd,OAAO;GACL,GAAGA,EAAQ;GACX,YAAY;IAAE,MAAM;IAAgC,UAAU;GAAK;EACrE;EACA,OAAO,CAAC,mBAAmB;EAC3B,MAAM,GAAO,EAAE,UAAO,UAAO,WAAQ;GACnC,IAAM,EAAE,UAAO,aAAU,cAAWD,EAAKC,GAASC,CAA6B;GAQ/E,OAPID,EAAQ,SAASA,EAAQ,MAAM,UAAU,MAC3CG,EAAMO,IAAW,GAAK,MAAW;IAC/B,AAAIK,MAAW,KAAA,KAAaC,MAAQD,KAEpCE,EAAK,qBAAsBpB,EAAM,aAAa,MAAMA,EAAM,aAAa,KAAO,CAAC,IAAI,IAAU;GAC/F,CAAC,SAGDqB,EACE1B,GACA;IACE,GAAG2B;IACH,GAAGvB,EAAQC,CAAK;IAChB,GAAGe,EAAO;IACV,YAAYZ,EAAQ,eAAeC,EAAM,eAAe,IAAI,OAAOA,EAAM;IACzE,wBAAwB,MAAagB,EAAK,qBAAqBnB,CAAK;GACtE,GACAsB,CACF;EACJ;CACF,CAAC;AACH;AAGA,SAAgBC,EAGd,GAAgH;CAChH,OAAOP,EAAgB;EACrB,MAAMd,EAAQ;EACd,cAAc;EACd,OAAO,EAAE,GAAGA,EAAQ,MAAM;EAC1B,MAAM,GAAO,EAAE,UAAO,YAAS;GAC7B,IAAM,EAAE,UAAO,cAAWD,EAAKC,GAASC,CAA6B;GACrE,aAAaiB,EAAEzB,GAAwC;IAAE,GAAG0B;IAAO,GAAGvB,EAAQC,CAAK;IAAG,GAAGe,EAAO;GAAE,GAAGQ,CAAK;EAC5G;CACF,CAAC;AACH"}

package/dist/domains/subjectSelect/components/AFilterWrapperSubjectSelect.js

@@ -0,0 +1,7 @@
+import e from "./AFilterWrapperSubjectSelect.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                            */
+// src/domains/subjectSelect/components/AFilterWrapperSubjectSelect.vue
+var t = e;
+export { t as default };
+
+//# sourceMappingURL=AFilterWrapperSubjectSelect.js.map

package/dist/domains/subjectSelect/components/AFilterWrapperSubjectSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AFilterWrapperSubjectSelect.js","names":["_sfc_main","AFilterWrapperSubjectSelect_vue_vue_type_script_setup_true_lang_default","AFilterWrapperSubjectSelect_default"],"sources":["../../../../src/domains/subjectSelect/components/AFilterWrapperSubjectSelect.vue"],"sourcesContent":["<script lang=\"ts\" setup>\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  SubjectSelectCloseSidebarKey,\n} from '@/domains/filters/utils/filterInjectionKeys'\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 FilterBookmarks from '@/domains/filters/bookmarks/components/FilterBookmarks.vue'\nimport type { IntegerIdNullable } from '@/shared/types/common'\nimport type { AxiosInstance } from 'axios'\nimport AFilterBookmarkButton from '@/domains/filters/bookmarks/components/AFilterBookmarkButton.vue'\n\nconst props = withDefaults(\n  defineProps<{\n    hideButtons?: boolean\n    formName?: string\n    disableFilterUrlSync?: boolean\n    userId?: IntegerIdNullable | undefined\n    client?: (() => AxiosInstance) | undefined\n    store?: FilterStoreIdentifier | boolean // false to disable, FilterStoreIdentifier to custom store key\n  }>(),\n  {\n    hideButtons: false,\n    formName: 'search',\n    disableFilterUrlSync: false,\n    userId: undefined,\n    client: undefined,\n    store: true,\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})\n\nconst closeSidebarOnMobile = inject(SubjectSelectCloseSidebarKey, () => {})\n\nconst filterConfig = inject(FilterConfigKey)\nconst filterData = inject(FilterDataKey)\nif (isUndefined(filterConfig) || isUndefined(filterData)) {\n  throw new Error('Incorrect provide/inject config.')\n}\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}\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    closeSidebarOnMobile()\n  })\n}\n\nconst { clearAll, clearAllFilterSelected } = useFilterClearHelpers()\n\nconst submitFilterBookmark = () => {\n  nextTick(() => {\n    submitResetCounter.value++\n    emit('bookmarkLoadAfter')\n    closeSidebarOnMobile()\n  })\n}\n\nconst resetFilter = () => {\n  clearAll(filterData, filterConfig)\n  clearAllFilterSelected(filterData, filterConfig, filterSelected)\n  nextTick(() => {\n    submitResetCounter.value++\n    emit('reset')\n    closeSidebarOnMobile()\n  })\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\ndefineExpose({\n  submit: submitFilter,\n  reset: resetFilter,\n})\n</script>\n\n<template>\n  <VForm\n    :name=\"formName\"\n    @submit.prevent=\"submitFilter\"\n  >\n    <div class=\"subject-select-filter__content px-2 py-4\">\n      <slot name=\"bookmarks\">\n        <VRow density=\"compact\">\n          <VCol v-if=\"store && userId && isDefined(client)\">\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          </VCol>\n        </VRow>\n      </slot>\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 || 12\"\n            :md=\"filterConfig.fields[fieldName]!.render.md || 12\"\n            :lg=\"filterConfig.fields[fieldName]!.render.lg || 12\"\n            :xl=\"filterConfig.fields[fieldName]!.render.xl || 12\"\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    <div\n      v-if=\"!hideButtons\"\n      class=\"subject-select-filter__actions\"\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    </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</style>\n"],"mappings":""}

package/dist/domains/subjectSelect/components/AFilterWrapperSubjectSelect.vue.d.ts

@@ -0,0 +1,59 @@
+import { FilterStoreIdentifier } from '../../filters/composables/filterFactory';
+import { IntegerIdNullable } from '../../../shared/types/common';
+import { AxiosInstance } from 'axios';
+type __VLS_Props = {
+    hideButtons?: boolean;
+    formName?: string;
+    disableFilterUrlSync?: boolean;
+    userId?: IntegerIdNullable | undefined;
+    client?: (() => AxiosInstance) | undefined;
+    store?: FilterStoreIdentifier | boolean;
+};
+type __VLS_ModelProps = {
+    'datatableHiddenColumns'?: string[] | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_template: () => {
+    __VLS_Slots: {
+        [x: string]: ((props: {
+            itemConfig: import('../../filters/composables/filterFactory').FilterField;
+        }) => any) | undefined;
+    } & {
+        bookmarks?: (props: {}) => any;
+    } & {
+        detail?: (props: {}) => any;
+    } & {
+        buttons?: (props: {}) => any;
+    };
+};
+type __VLS_Slots = ReturnType<typeof __VLS_template>['__VLS_Slots'];
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
+    submit: () => void;
+    reset: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:datatableHiddenColumns": (value: string[] | undefined) => any;
+} & {
+    submit: () => any;
+    reset: () => any;
+    bookmarkLoadAfter: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSubmit?: (() => any) | undefined;
+    onReset?: (() => any) | undefined;
+    "onUpdate:datatableHiddenColumns"?: ((value: string[] | undefined) => any) | undefined;
+    onBookmarkLoadAfter?: (() => any) | undefined;
+}>, {
+    userId: IntegerIdNullable;
+    client: () => AxiosInstance;
+    store: boolean | FilterStoreIdentifier;
+    hideButtons: boolean;
+    formName: string;
+    disableFilterUrlSync: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};