@webitel/ui-datalist 1.1.46 → 1.1.48

package/package.json

@@ -1,9 +1,10 @@
 {
 	"name": "@webitel/ui-datalist",
-	"version": "1.1.46",
+	"version": "1.1.48",
 	"description": "Toolkit for building data lists in webitel ui system",
 	"scripts": {
 		"build:types": "vue-tsc -p ./tsconfig.build.json",
+		"typecheck": "vue-tsc --noEmit -p ./tsconfig.typecheck.json",
 		"lint:fix": "npx biome check --write ./src",
 		"biome:ci:gh": "biome ci ./src --reporter=github",
 		"test:unit": "node -e \"process.exit(0)\"",

package/src/modules/_shared/createDatalistStore.ts

@@ -61,12 +61,16 @@ export const createDatalistStore = <
 	}
 
 	if (thisStoreType === DatalistStoreProvider.Pinia) {
+		// TODO(types): a Pinia StoreDefinition is a valid store factory (callable,
+		// returns a store exposing `$patch`), but its generic-extracted shape does
+		// not structurally match PatchableStoreFactory. Reconcile the two factory
+		// types instead of asserting here.
 		return definePiniaStore(namespace, () =>
 			storeBody({
 				...config,
 				storeType: thisStoreType,
 			}),
-		);
+		) as PatchableStoreFactory<StoreBody>;
 	}
 
 	throw new Error(`Unsupported store type: ${thisStoreType}`);

package/src/modules/card/composables/useCardComponent.ts

@@ -60,7 +60,6 @@ export const useCardComponent = <CardEntity>({
 	});
 
 	const { save } = useCardSaveAction<CardEntity>({
-		// @ts-expect-error
 		validate, // fixme: type
 		saveItem,
 	});

package/src/modules/card/composables/useCardValidation.ts

@@ -1,7 +1,7 @@
 import type { RegleSchema } from '@regle/schemas';
 import { computed, type Ref } from 'vue';
 
-export const useCardValidation = <TState, TSchema>({
+export const useCardValidation = <TState, TSchema = {}>({
 	validationSchema,
 }: {
 	validationSchema: Ref<RegleSchema<TState, TSchema>>;

package/src/modules/card/stores/createCardStore.ts

@@ -19,7 +19,13 @@ const defaultRegleValidationOptions: RegleSchemaBehaviourOptions &
 	},
 };
 
-export const createCardStore = <Entity = object>({
+export const createCardStore = <
+	Entity extends {
+		id?: string | number;
+	} = {
+		id?: string | number;
+	},
+>({
 	namespace,
 	apiModule,
 	standardValidationSchema,

package/src/modules/filter-presets/api/PresetQuery.ts

@@ -29,7 +29,7 @@ type GetPresetListRequestConfig = {
 	};
 };
 
-const getPresetList = async (params, config: GetPresetListRequestConfig) => {
+const getPresetList = async (params, config?: GetPresetListRequestConfig) => {
 	const useStarToSearch = config?.transformers?.useStarToSearch ?? true;
 
 	const { page, size, search, sort, fields, presetNamespace, id } =

package/src/modules/filter-presets/components/_shared/input-fields/preset-name-field.vue

@@ -8,7 +8,6 @@
 </template>
 
 <script setup lang="ts">
-import { Validation } from '@vuelidate/core';
 import { useI18n } from 'vue-i18n';
 
 type ModelValue = string;
@@ -16,7 +15,7 @@ type ModelValue = string;
 const model = defineModel<ModelValue>();
 
 type Props = {
-	v: Validation;
+	v: Record<string, unknown>;
 };
 
 const props = defineProps<Props>();

package/src/modules/filter-presets/components/apply-preset/apply-preset-action.vue

@@ -78,15 +78,16 @@ import {
 	WtPopup,
 	WtSearchBar,
 } from '@webitel/ui-sdk/components';
+import { useEventBus } from '@webitel/ui-sdk/composables';
 import { IconAction } from '@webitel/ui-sdk/enums';
 import { useTableEmpty } from '@webitel/ui-sdk/modules/TableComponentModule/composables/useTableEmpty';
-import { type Store, storeToRefs } from 'pinia';
-import { computed, inject, onMounted, ref, watch } from 'vue';
+import { type StoreGeneric, storeToRefs } from 'pinia';
+import { computed, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { EnginePresetQuery } from 'webitel-sdk';
 
 import { AnyFilterConfig } from '../../../filters/modules/filterConfig/classes/FilterConfig';
-import PresetQueryAPI from '../../api/PresetQuery.ts';
+import PresetQueryAPI from '../../api/PresetQuery';
 import PresetPreview from './preset-preview.vue';
 
 const props = defineProps<{
@@ -94,7 +95,7 @@ const props = defineProps<{
 	 * presets "section" namespace
 	 */
 	namespace: string;
-	presetsStore: () => Store;
+	presetsStore: StoreGeneric;
 	filterConfigs: AnyFilterConfig[];
 }>();
 
@@ -104,7 +105,7 @@ const emit = defineEmits<{
 	];
 }>();
 
-const eventBus = inject('$eventBus');
+const eventBus = useEventBus();
 
 const { t } = useI18n();
 
@@ -214,7 +215,7 @@ const updatePreset = async ({ preset, onSuccess, onFailure }) => {
 			id: preset.id,
 			namespace: preset.preset?.namespace,
 		});
-		eventBus.$emit('notification', {
+		eventBus?.$emit('notification', {
 			type: 'success',
 			text: t('systemNotifications.success.update', {
 				entity: t('webitelUI.filters.presets.preset'),

package/src/modules/filter-presets/components/save-preset/save-preset-action.vue

@@ -32,8 +32,9 @@
 
 <script lang="ts" setup>
 import { WtIconAction } from '@webitel/ui-sdk/components';
+import { useEventBus } from '@webitel/ui-sdk/composables';
 import { IconAction } from '@webitel/ui-sdk/enums';
-import { computed, inject, type Ref, reactive, ref, watch } from 'vue';
+import { computed, type Ref, reactive, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { EnginePresetQuery } from 'webitel-sdk';
 
@@ -66,7 +67,7 @@ const props = defineProps<{
 	filterConfigs: AnyFilterConfig[];
 }>();
 
-const eventBus = inject('$eventBus');
+const eventBus = useEventBus();
 
 const localFiltersManager = reactive(createFiltersManager());
 
@@ -114,7 +115,7 @@ const handlePresetSubmit = async (
 			namespace: props.namespace,
 		});
 
-		eventBus.$emit('notification', {
+		eventBus?.$emit('notification', {
 			type: 'success',
 			text: t('systemNotifications.success.create', {
 				entity: t('webitelUI.filters.presets.preset'),
@@ -156,7 +157,7 @@ const handlePresetOverwriteConfirmation = async ({
 			namespace: props.namespace,
 		});
 
-		eventBus.$emit('notification', {
+		eventBus?.$emit('notification', {
 			type: 'success',
 			text: t('systemNotifications.success.update', {
 				entity: t('webitelUI.filters.presets.preset'),

package/src/modules/filter-presets/components/save-preset/save-preset-popup.vue

@@ -111,10 +111,6 @@ const v$ = useVuelidate(
 );
 v$.value.$touch();
 
-const appliedFilters = computed(() => {
-	return props.filtersManager.getFiltersList();
-});
-
 const save = () => {
 	isSaving.value = true;
 

package/src/modules/filter-presets/stores/createFilterPresetsStore.ts

@@ -41,7 +41,13 @@ export const filterPresetsStoreBody = (namespace = 'presets') => {
 	};
 
 	const tableStore = tableStoreBody<EnginePresetQuery>(presetsNamespace, {
-		apiModule: PresetQueryAPI,
+		/* PresetQueryAPI's add/update take preset-specific params, so only the
+		   ApiModule-conforming methods the table store actually calls go in */
+		apiModule: {
+			getList: PresetQueryAPI.getList,
+			get: PresetQueryAPI.get,
+			delete: PresetQueryAPI.delete,
+		},
 		headers,
 		disablePersistence: true,
 	});

package/src/modules/filter-presets/stores/headers/headers.ts

@@ -1,6 +1,6 @@
-import type { WtTableHeader } from 'src/components/wt-table/types/WtTable.d.ts';
+import type { DatalistTableHeader } from '../../../types/tableStore.types';
 
-export const headers: WtTableHeader[] = [
+export const headers: DatalistTableHeader[] = [
 	{
 		value: 'id',
 		field: 'id',

package/src/modules/filters/classes/FiltersManager.ts

@@ -34,12 +34,15 @@ export interface IFiltersManager {
 		value?: FilterValue;
 		label?: FilterLabel;
 	}) => IFilter;
-	deleteFilter: (name: FilterName) => IFilter;
+	deleteFilter: ({ name }: { name: FilterName }) => IFilter;
 
 	/**
 	 * Converts filters data to String, that can be stored
 	 */
-	toString: () => string;
+	toString: (options?: {
+		include?: FilterName[];
+		exclude?: FilterName[];
+	}) => string;
 
 	/**
 	 * Restores filters from string

package/src/modules/filters/components/config/dynamic-view/dynamic-filter-config-form.vue

@@ -9,6 +9,8 @@
       :model-value="filterName"
       data-key="name"
       option-value="name"
+      required
+      :v="v$.filterName"
       @update:model-value="onFilterNameUpdate($event)"
     />
 
@@ -41,7 +43,7 @@
 
     <footer class="dynamic-filter-config-form-footer">
       <wt-button
-        :disabled="invalid"
+        :disabled="invalid || v$.$invalid"
         wide
         @click="submit"
       >
@@ -60,6 +62,8 @@
 </template>
 
 <script lang="ts" setup>
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
 import { WtButton, WtSingleSelect } from '@webitel/ui-sdk/components';
 import deepcopy from 'deep-copy';
 import { computed, ref, watch } from 'vue';
@@ -103,6 +107,21 @@ const filterValue = ref();
 
 const editMode = !!props.filter;
 
+const v$ = useVuelidate(
+	computed(() => ({
+		filterName: {
+			required,
+		},
+	})),
+	{
+		filterName,
+	},
+	{
+		$autoDirty: true,
+	},
+);
+v$.value.$touch();
+
 const invalid = ref(false);
 
 const filterConfigOptions = computed(() => {

package/src/modules/filters/components/config/dynamic-view/dynamic-filter-config-view.vue

@@ -24,7 +24,7 @@
  * and their styling
  */
 import { WtPopover } from '@webitel/ui-sdk/components';
-import { defineExpose, ref } from 'vue';
+import { ref } from 'vue';
 
 interface Props {
 	disabled?: boolean;

package/src/modules/filters/components/dynamic-filter-add-action.vue

@@ -61,7 +61,9 @@ const submit = (payload: FilterInitParams, { hide }) => {
 };
 
 const popoverContentRef = ref<HTMLElement | null>(null);
-const dynamicFilterAddAction = ref<null>(null);
+const dynamicFilterAddAction = ref<{
+	hidePopover: () => void;
+} | null>(null);
 
 /**
  * @author @Oleksandr Palonnyi
@@ -75,7 +77,7 @@ const dynamicFilterAddAction = ref<null>(null);
  * */
 onClickOutside(
 	popoverContentRef,
-	() => dynamicFilterAddAction.value?.hidePopover(),
+	() => dynamicFilterAddAction?.value?.hidePopover(),
 	{
 		capture: true, // Fix for PrimeVue stopPropagation bug
 		ignore: [

package/src/modules/filters/components/preview/dynamic-filter-preview.vue

@@ -75,7 +75,8 @@ import {
 } from '@webitel/ui-sdk/components';
 import { computed, ref, watch } from 'vue';
 
-import { IFilter } from '../../classes/Filter';
+import { FilterInitParams } from '../../classes/Filter';
+import type { FilterConfigSearchMethodParams } from '../../modules/filterConfig/classes/FilterConfig';
 import { FilterOptionToPreviewApiSearchMethodMap } from '../../modules/filterConfig/components';
 import DynamicFilterConfigForm from '../config/dynamic-view/dynamic-filter-config-form.vue';
 import DynamicFilterConfigView from '../config/dynamic-view/dynamic-filter-config-view.vue';
@@ -107,12 +108,14 @@ const fillLocalValue = async (filter = props.filter) => {
 	const filterName = props.filter.name;
 	const filterValue = filter.value;
 
-	const valueSearchMethod = props.filterConfig.searchRecords
-		? (...params) => {
-				/* arrow fn here preserves filterConfig class "this" */
-				return props.filterConfig.searchRecords(...params);
-			}
-		: FilterOptionToPreviewApiSearchMethodMap[filterName];
+	const { filterConfig } = props;
+	const valueSearchMethod =
+		'searchRecords' in filterConfig
+			? (...params: FilterConfigSearchMethodParams) => {
+					/* arrow fn here preserves filterConfig class "this" */
+					return filterConfig.searchRecords(...params);
+				}
+			: FilterOptionToPreviewApiSearchMethodMap[filterName];
 
 	if (valueSearchMethod) {
 		const { items } = await valueSearchMethod(
@@ -149,7 +152,7 @@ const isRenderPreview = computed(
 	() => localValue.value === false || localValue.value,
 );
 
-const submit = (filter: IFilter, { hide }) => {
+const submit = (filter: FilterInitParams, { hide }) => {
 	emit('update:filter', filter);
 	hide();
 };

package/src/modules/filters/components/search-bar/dynamic-filter-search.vue

@@ -68,7 +68,9 @@ const deleteFilter = ({ name }: { name: FilterName }) => {
 };
 
 const restoreLocalSearchValue = (searchMode: string) => {
-	localSearchValue.value = props.filtersManager.filters.get(searchMode)?.value;
+	const restoredValue = props.filtersManager.filters.get(searchMode)?.value;
+	localSearchValue.value =
+		typeof restoredValue === 'string' ? restoredValue : '';
 	return localSearchValue.value;
 };
 

package/src/modules/filters/components/table-filters-panel.vue

@@ -68,7 +68,7 @@
 
 <script lang="ts" setup>
 import { WtIconAction } from '@webitel/ui-sdk/components';
-import { Store } from 'pinia';
+import { StoreGeneric } from 'pinia';
 import { computed } from 'vue';
 import { WebitelProtoDataField } from 'webitel-sdk';
 
@@ -124,7 +124,7 @@ type Props = {
 	 *
 	 * TODO: https://github.com/webitel/webitel-ui-sdk/pull/551
 	 */
-	usePresetsStore?: Store;
+	usePresetsStore?: () => StoreGeneric;
 
 	/**
 	 * @author @Lera24

package/src/modules/filters/composables/useFilterConfigsToolkit.ts

@@ -32,12 +32,18 @@ export type FilterConfigToolkit = {
 			filter: IFilter;
 		}>
 	>;
+	staticViewFilterToFilterConfigMappings: ComputedRef<
+		Array<{
+			filterConfig: BaseFilterConfig;
+			filter: IFilter;
+		}>
+	>;
 };
 
 export type FilterConfigToolkitParams = {
 	filterOptions: (FilterOption | BaseFilterConfig)[];
 	filtersManager: IFiltersManager;
-	filterableExtensionFields: WebitelProtoDataField[];
+	filterableExtensionFields?: WebitelProtoDataField[];
 	staticMode?: boolean;
 };
 
@@ -45,7 +51,6 @@ export const useFilterConfigsToolkit = ({
 	filterOptions,
 	filtersManager,
 	filterableExtensionFields = [],
-	staticMode = false,
 }: FilterConfigToolkitParams): FilterConfigToolkit => {
 	const { t } = useI18n();
 

package/src/modules/filters/createTableFiltersStore.ts

@@ -3,6 +3,7 @@ import { computed, reactive, ref } from 'vue';
 import { createDatalistStore } from '../_shared/createDatalistStore';
 import { PersistedStorageType } from '../persist/PersistedStorage.types';
 import { usePersistedStorage } from '../persist/usePersistedStorage';
+import type { Identifiable } from '../types/createDatalistStore.types';
 import type { useTableStoreConfig } from '../types/tableStore.types';
 import {
 	createFiltersManager,
@@ -12,7 +13,7 @@ import {
 export const tableFiltersStoreBody = (
 	namespace,
 	config?: {
-		filtersManagerConfig: FiltersManagerConfig;
+		filtersManagerConfig?: FiltersManagerConfig;
 	},
 ) => {
 	const filtersManager = reactive(
@@ -118,7 +119,7 @@ export const tableFiltersStoreBody = (
 	};
 };
 
-export const createTableFiltersStore = <Entity>(
+export const createTableFiltersStore = <Entity extends Identifiable>(
 	namespace: string,
 	config: useTableStoreConfig<Entity> & {
 		filtersManagerConfig?: FiltersManagerConfig;

package/src/modules/filters/modules/filterConfig/classes/FilterConfig.ts

@@ -16,11 +16,12 @@ export type FilterConfigBaseParams = {
 	valueInputComponent?: Component;
 	valuePreviewComponent?: Component;
 	notDeletable?: boolean;
-	showFilterName: boolean;
+	showFilterName?: boolean;
+	staticView?: boolean;
 };
 
 export interface IWtSysTypeFilterConfig extends BaseFilterConfig {
-	searchRecords: (params: FilterConfigSearchMethodParams) => Promise<{
+	searchRecords: (...params: FilterConfigSearchMethodParams) => Promise<{
 		items: unknown[];
 		next?: boolean;
 	}>;
@@ -37,14 +38,41 @@ export type FilterConfigSearchMethodParams = [
 	 * filter-related data
 	 */
 	{
-		filterName: FilterName;
-		filterValue: FilterValue;
-		filterConfig: BaseFilterConfig;
-	},
+		filterName?: FilterName;
+		filterValue?: FilterValue;
+		filterConfig?: BaseFilterConfig;
+	}?,
 ];
 
 export type AnyFilterConfig = IWtSysTypeFilterConfig | BaseFilterConfig;
 
+/**
+ * Loose shapes forwarded into filter-config lookup calls by
+ * dynamic-filter-preview.vue and wt-select options loading. The callers pass
+ * heterogeneous request params, so these stay permissive on purpose.
+ */
+// TODO(types): model per-filter search params and filter values precisely
+export type FilterConfigSearchRequestParams = {
+	/** arrives as a scalar id, a list of ids, or a `{ list }` wrapper */
+	id?: any;
+	size?: number;
+} & Record<string, any>;
+
+export type FilterConfigListFilterValue = {
+	list?: Array<
+		{
+			id?: string | number;
+		} & Record<string, any>
+	>;
+	unassigned?: boolean;
+};
+
+export type FilterConfigSearchFilterContext = {
+	filterName?: FilterName;
+	filterValue?: FilterConfigListFilterValue;
+	filterConfig?: BaseFilterConfig;
+};
+
 export class FilterConfig implements BaseFilterConfig {
 	name: FilterName;
 	valueInputComponent: Component;
@@ -83,6 +111,9 @@ export abstract class WtSysTypeFilterConfig
 	extends FilterConfig
 	implements IWtSysTypeFilterConfig
 {
-	abstract name;
-	abstract searchRecords;
+	abstract name: FilterName;
+	abstract searchRecords(...args: unknown[]): Promise<{
+		items: unknown[];
+		next?: boolean;
+	}>;
 }

package/src/modules/filters/modules/filterConfig/classes/createFilterConfig.ts

@@ -11,7 +11,7 @@ import {
 
 export const createFilterConfig = (
 	params: FilterConfigBaseParams &
-		Required<BaseFilterConfig, 'name'> &
+		Required<Pick<BaseFilterConfig, 'name'>> &
 		Record<string, unknown>,
 ): BaseFilterConfig => {
 	const { name } = params;

package/src/modules/filters/modules/filterConfig/components/_custom/filterConfig.ts

@@ -2,19 +2,18 @@ import { sysTypes } from '@webitel/ui-sdk/api/clients/index';
 import { WtTypeExtensionFieldKind } from '@webitel/ui-sdk/enums';
 import { get } from 'lodash';
 import type { WebitelProtoDataField } from 'webitel-sdk';
-
-import { FilterConfig } from '../../classes/FilterConfig';
-import type { CustomFilterOption } from '../../enums/FilterOption';
 import type {
 	BaseFilterConfig,
 	FilterConfigBaseParams,
 	IWtSysTypeFilterConfig,
-} from '../../types/FilterConfig';
+} from '../../classes/FilterConfig';
+import { FilterConfig } from '../../classes/FilterConfig';
 import TypeExtensionFilterValueField from './type-extension-filter-value-field.vue';
 import TypeExtensionFilterValuePreview from './type-extension-filter-value-preview.vue';
 
 export interface ITypeExtensionFilterConfig extends BaseFilterConfig {
 	readonly field: WebitelProtoDataField;
+	searchRecords?: IWtSysTypeFilterConfig['searchRecords'];
 }
 
 class TypeExtensionFilterConfig
@@ -92,7 +91,7 @@ export type {
 };
 
 export const createTypeExtensionFilterConfig = (
-	name: CustomFilterOption,
+	params: FilterConfigBaseParams,
 	{
 		field,
 	}: {
@@ -101,15 +100,15 @@ export const createTypeExtensionFilterConfig = (
 ) => {
 	switch (field.kind) {
 		case WtTypeExtensionFieldKind.Select:
-			return new TypeExtensionWtSysTypeFieldFilterConfig(name, {
+			return new TypeExtensionWtSysTypeFieldFilterConfig(params, {
 				field,
 			});
 		case WtTypeExtensionFieldKind.Multiselect:
-			return new TypeExtensionWtSysTypeFieldFilterConfig(name, {
+			return new TypeExtensionWtSysTypeFieldFilterConfig(params, {
 				field,
 			});
 		default:
-			return new TypeExtensionFilterConfig(name, {
+			return new TypeExtensionFilterConfig(params, {
 				field,
 			});
 	}

package/src/modules/filters/modules/filterConfig/components/_custom/type-extension-filter-value-field.vue

@@ -17,9 +17,7 @@
           model ??
           [] /* so that component won't break when model is nullish at init */
         "
-        :search-method="
-          (...params) => props.filterConfig.searchRecords(...params)
-        "
+        :search-method="searchRecords"
         :required="false /* https://github.com/webitel/webitel-ui-sdk/pull/1359#discussion_r3180877255 */"
         option-value="id"
         @update:model-value="model = $event"
@@ -33,9 +31,7 @@
           model ??
           [] /* so that component won't break when model is nullish at init */
         "
-        :search-method="
-          (...params) => props.filterConfig.searchRecords(...params)
-        "
+        :search-method="searchRecords"
 
         :required="false /* https://github.com/webitel/webitel-ui-sdk/pull/1359#discussion_r3180877255 */""
         option-value="id"
@@ -43,7 +39,7 @@
       />
     </template>
     <template #[WtTypeExtensionFieldKind.Calendar]>
-      <date-time-options-filter-value-field v-model:model-value="model" />
+      <date-time-options-filter-value-field v-model:model-value="dateTimeModel" />
     </template>
   </wt-type-extension-value-input>
 </template>
@@ -55,10 +51,13 @@ import {
 	WtSingleSelect,
 	WtTypeExtensionValueInput,
 } from '@webitel/ui-sdk/components';
-import { WtTypeExtensionFieldKind } from '@webitel/ui-sdk/enums'; // DO NOT REMOVE THIS IMPORT!! : Webstorm lies you, import is used for dynamic slot computation
-import { computed, onMounted, useAttrs, watch } from 'vue';
-import { WebitelProtoDataTypeKind } from 'webitel-sdk';
+import {
+	type RelativeDatetimeValue,
+	WtTypeExtensionFieldKind,
+} from '@webitel/ui-sdk/enums'; // DO NOT REMOVE THIS IMPORT!! : Webstorm lies you, import is used for dynamic slot computation
+import { computed, useAttrs, watch } from 'vue';
 
+import type { FilterConfigSearchMethodParams } from '../../classes/FilterConfig';
 import DateTimeOptionsFilterValueField from '../_shared/date-time-filter/date-time-options/date-time-options-filter-value-field.vue';
 import HasOptionFilterValueField from '../_shared/has-options/has-option-filter-value-field.vue';
 import { ITypeExtensionFilterConfig } from './index';
@@ -77,6 +76,24 @@ const emit = defineEmits<{
 
 const attrs = useAttrs();
 
+const searchRecords = (...params: FilterConfigSearchMethodParams) =>
+	props.filterConfig.searchRecords?.(...params);
+
+/* the filter value is dynamically shaped by field kind;
+   the Calendar branch always stores a datetime value */
+const dateTimeModel = computed({
+	get: () =>
+		model.value as
+			| RelativeDatetimeValue
+			| {
+					from: number;
+					to: number;
+			  },
+	set: (value) => {
+		model.value = value;
+	},
+});
+
 const v$ = useVuelidate(
 	computed(() => ({
 		model: {