@anzusystems/common-admin 1.47.0-beta.dev-1790143991 → 2.0.0-rc.1

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

@@ -0,0 +1,194 @@
+import { cloneDeep as e, isArray as t, isNull as n, isUndefined as r } from "../../../shared/utils/common.js";
+import { stringSplitOnFirstOccurrence as i } from "../../../shared/utils/string.js";
+import { SubjectScopeKey as a, SystemScopeKey as o } from "../../../shared/injectionKeys.js";
+import { useAlerts as s } from "../../system/composables/alerts.js";
+import { FilterInnerConfigKey as c, FilterInnerDataKey as l } from "../../filters/utils/filterInjectionKeys.js";
+import { usePagination as u } from "../../api/composables/pagination.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";
+//#region 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 (r(R) || r(z)) throw Error(`[${B}] Incorrect provide/inject config.`);
+		if (r(R.fields[N.filterByField]) || r(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 r(N.minSearchText) ? K("common.filter.filterMinChars", { min: N.minSearchChars }) : N.minSearchText;
+		}), G = d({
+			get() {
+				return N.modelValue;
+			},
+			set(t) {
+				P("update:modelValue", e(t));
+			}
+		}), { t: K } = ee(), q = b(o, void 0), J = b(a, void 0), Y = w(!1), { pagination: ie } = u(n(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(() => r(N.errorMessage) ? N.v?.$errors?.length ? N.v.$errors.map((e) => D(e.$message)) : [] : [N.errorMessage]), ce = d(() => {
+			if (!r(N.label)) return N.label;
+			if (r(q) || r(J) || r(N.v?.$path)) return "";
+			let { end: e } = i(N.v?.$path, ".");
+			return K(q + "." + J + ".model." + e);
+		}), X = d(() => r(N.required) ? (N.v?.required)?.$params?.type === "required" : N.required), { showErrorsDefault: Z } = s(), Q = 0, $ = async (e) => {
+			let t = ++Q;
+			if (n(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 n = /* @__PURE__ */ new Map(), r = /* @__PURE__ */ new Map();
+			return t(G.value) ? G.value.forEach((e) => {
+				n.set(e, "");
+			}) : G.value && n.set(G.value, ""), L.value.forEach((t) => {
+				n.set(t[N.itemValue], t[N.itemTitle]), r.set(t[N.itemValue], e(t));
+			}), Array.from(n, ([e, t]) => ({
+				value: e,
+				title: t,
+				raw: r.get(e)
+			}));
+		}), ue = (t) => new Promise((n) => (L.value.forEach((n, r) => {
+			t.has(r) && U(e(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 (n(e) || r(e) || t(e) && e.length === 0) return;
+			let i = t(e) ? e : [e], a = new Set(i);
+			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"
+		]));
+	}
+});
+//#endregion
+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,121 @@
+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, as the scoped wrappers did (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, as the wrappers did; 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 autocomplete's first fetch
+     * -- and again 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>;
+/**
+ * `M` is the model's type: by default one id, several, or `null`; a caller that binds a value which
+ * may be `undefined` needs `T | T[] | null | undefined`.
+ *
+ * A remote autocomplete of one entity, which an admin wrote as a component of its own for each: the
+ * entity's select actions and inner filter, the field it searches by, and the props it sets. The
+ * caller's props, listeners and slots all reach `AFormRemoteAutocomplete`, and win over `defaults`.
+ *
+ * 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,73 @@
+import { FilterInnerConfigKey as e, FilterInnerDataKey as t } from "../../filters/utils/filterInjectionKeys.js";
+import n from "../components/AFilterRemoteAutocomplete.js";
+import r from "../components/AFormRemoteAutocomplete.js";
+import { defineComponent as i, h as a, provide as o, watch as s } from "vue";
+//#region src/domains/remoteAutocomplete/composables/createRemoteAutocomplete.ts
+var c = (e) => Object.fromEntries(Object.entries(e).filter(([, e]) => e !== void 0)), l = (n, r) => {
+	let { fetchItems: i, fetchItemsByIds: a } = n.props ? n.useSelectActions(r) : n.useSelectActions(), { filterConfig: c, filterData: l } = n.useInnerFilter(), { filterFromProps: u } = n;
+	u && s(() => u(r), (e) => Object.assign(l, e), { immediate: !0 }), o(e, c), o(t, l);
+	let { scope: d } = n, f = () => {
+		let e = d?.of(r);
+		return e === void 0 ? void 0 : JSON.stringify(e);
+	}, p = () => d ? {
+		key: f(),
+		...d.requiredWhen?.(r) && f() === void 0 ? { disabled: !0 } : {}
+	} : {};
+	return {
+		bound: {
+			...n.defaults,
+			fetchItems: i,
+			fetchItemsByIds: a,
+			filterByField: n.filterByField,
+			...n.filterSortBy === void 0 ? {} : { filterSortBy: n.filterSortBy },
+			...n.prefetch === void 0 ? {} : { prefetch: n.prefetch }
+		},
+		scopeKey: f,
+		scoped: p
+	};
+};
+function u(e) {
+	return i({
+		name: e.name,
+		inheritAttrs: !1,
+		props: {
+			...e.props,
+			modelValue: {
+				type: null,
+				required: !0
+			}
+		},
+		emits: ["update:modelValue"],
+		setup(t, { attrs: n, slots: i, emit: o }) {
+			let { bound: u, scopeKey: d, scoped: f } = l(e, t);
+			return e.scope && e.scope.reset !== !1 && s(d, (e, t) => {
+				t !== void 0 && e !== t && o("update:modelValue", n.multiple === "" || n.multiple === !0 ? [] : null);
+			}), () => a(r, {
+				...u,
+				...c(n),
+				...f(),
+				modelValue: e.zeroIsEmpty && t.modelValue === 0 ? null : t.modelValue,
+				"onUpdate:modelValue": (e) => o("update:modelValue", e)
+			}, i);
+		}
+	});
+}
+function d(e) {
+	return i({
+		name: e.name,
+		inheritAttrs: !1,
+		props: { ...e.props },
+		setup(t, { attrs: r, slots: i }) {
+			let { bound: o, scoped: s } = l(e, t);
+			return () => a(n, {
+				...o,
+				...c(r),
+				...s()
+			}, i);
+		}
+	});
+}
+//#endregion
+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","AFilterRemoteAutocomplete_default","AFormRemoteAutocomplete_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 `null`) when the scope changes from\n   * a set value, as the scoped wrappers did (default `true`). A filter never does: its value outlives a\n   * 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, as the wrappers did; 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 autocomplete's first fetch\n   * -- and again on every change. 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, as a prop default of the wrappers\n// this replaces did, 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    // Past the caller's attrs: an unset required scope disables the field whatever the caller says. Left\n    // out otherwise, 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 * `M` is the model's type: by default one id, several, or `null`; a caller that binds a value which\n * may be `undefined` needs `T | T[] | null | undefined`.\n *\n * A remote autocomplete of one entity, which an admin wrote as a component of its own for each: the\n * entity's select actions and inner filter, the field it searches by, and the props it sets. The\n * caller's props, listeners and slots all reach `AFormRemoteAutocomplete`, and win over `defaults`.\n *\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":";;;;;AAwIA,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;AAsBA,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,8 @@
+import e from "./AFilterWrapperSubjectSelect.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                            */
+//#region src/domains/subjectSelect/components/AFilterWrapperSubjectSelect.vue
+var t = e;
+//#endregion
+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,57 @@
+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 var __VLS_9: {}, __VLS_30: {}, __VLS_46: string, __VLS_47: {
+    itemConfig: import('../../filters/composables/filterFactory').FilterField;
+}, __VLS_54: {};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_46>]?: (props: typeof __VLS_47) => any;
+} & {
+    bookmarks?: (props: typeof __VLS_9) => any;
+} & {
+    detail?: (props: typeof __VLS_30) => any;
+} & {
+    buttons?: (props: typeof __VLS_54) => any;
+};
+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;
+    };
+};