@webitel/ui-datalist 1.1.62 → 1.1.64

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-datalist",
-	"version": "1.1.62",
+	"version": "1.1.64",
 	"description": "Toolkit for building data lists in webitel ui system",
 	"scripts": {
 		"build:types": "vue-tsc -b tsconfig.build.json",

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

@@ -24,7 +24,7 @@
       />
     </template>
     <template #[WtTypeExtensionFieldKind.Multiselect]="{ defaultProps }">
-      <wt-single-select
+      <wt-multi-select
         v-bind="defaultProps"
         :v="v$.model"
         :model-value="

package/src/modules/filters/modules/filterConfig/components/case-assignee/case-assignee-filter-value-field.vue

@@ -3,15 +3,16 @@
     :label="t('webitelUI.filters.filterValue')"
     :search-method="props.filterConfig.searchRecords"
     :v="vList"
-    v-model:model-value="model.list"
+    :model-value="value.list"
     data-key="id"
     option-value="id"
+    @update:model-value="handleInput('list', $event)"
   />
   <wt-checkbox
     :label="t('reusable.showUnassigned')"
-    :selected="model?.unassigned"
+    :selected="value.unassigned"
     :v="vUnassigned"
-    @update:selected="model.unassigned = !!$event"
+    @update:selected="handleInput('unassigned', !!$event)"
   />
 </template>
 
@@ -36,6 +37,24 @@ const model = defineModel<ModelValue>({
 	}),
 });
 
+const value = computed<ModelValue>(
+	() =>
+		model.value ?? {
+			list: [],
+			unassigned: false,
+		},
+);
+
+const handleInput = <K extends keyof ModelValue>(
+	key: K,
+	newFieldValue: ModelValue[K],
+) => {
+	model.value = {
+		...value.value,
+		[key]: newFieldValue,
+	};
+};
+
 const props = defineProps<{
 	filterConfig: CaseAssigneeFilterConfig;
 }>();
@@ -54,10 +73,10 @@ const v$ = useVuelidate<{
 	computed(() => ({
 		model: {
 			list: {
-				required: requiredIf(() => !model.value.unassigned),
+				required: requiredIf(() => !value.value.unassigned),
 			},
 			unassigned: {
-				required: requiredIf(() => !model.value.list.length),
+				required: requiredIf(() => !value.value.list.length),
 			},
 		},
 	})),

package/src/modules/filters/modules/filterConfig/components/case-close-reason-groups/case-close-reason-groups-filter-value-field.vue

@@ -5,23 +5,24 @@
       :label="t('cases.reason')"
       :search-method="caseCloseReasonsGroupsSearchMethod"
       :v="vSelection"
-      :model-value="model?.selection"
+      :model-value="value.selection"
       data-key="id"
       option-value="id"
       @update:model-value="updateSelected"
     />
 
     <wt-multi-select
-      v-if="model?.selection"
-      :key="model.selection"
+      v-if="value.selection"
+      :key="value.selection"
 
-      :disabled="!model.selection"
+      :disabled="!value.selection"
       :label="t('webitelUI.filters.filterValue')"
       :search-method="getConditionList"
       :v="vConditions"
-      v-model:model-value="model.conditions"
+      :model-value="value.conditions"
       data-key="id"
       option-value="id"
+      @update:model-value="handleInput('conditions', $event)"
     />
   </div>
 </template>
@@ -50,14 +51,34 @@ const model = defineModel<ModelValue>({
 });
 const { t } = useI18n();
 
-const updateSelected = (value: string) => {
-	model.value.selection = value;
-	model.value.conditions = '';
+const value = computed<ModelValue>(
+	() =>
+		model.value ?? {
+			selection: '',
+			conditions: '',
+		},
+);
+
+const handleInput = <K extends keyof ModelValue>(
+	key: K,
+	newFieldValue: ModelValue[K],
+) => {
+	model.value = {
+		...value.value,
+		[key]: newFieldValue,
+	};
+};
+
+const updateSelected = (selection: string) => {
+	model.value = {
+		selection,
+		conditions: '',
+	};
 };
 
 const getConditionList = (params: Record<string, unknown>) => {
 	return caseCloseReasonsSearchMethod({
-		parentId: model.value.selection,
+		parentId: value.value.selection,
 		...params,
 	});
 };

package/src/modules/filters/modules/filterConfig/components/case-sla-condition/case-sla-condition-filter-value-field.vue

@@ -5,23 +5,23 @@
       :label="t('cases.appliedSLA')"
       :search-method="slasSearchMethod"
       :v="vSelection"
-      :model-value="model?.selection"
+      :model-value="value.selection"
       data-key="id"
       option-value="id"
       @update:model-value="updateSelected"
     />
 
     <wt-multi-select
-      v-if="model?.selection"
-      :key="model.selection"
-      :disabled="!model.selection"
+      v-if="value.selection"
+      :key="value.selection"
+      :disabled="!value.selection"
       :label="t('webitelUI.filters.filterValue')"
       :search-method="getConditionList"
       :v="vConditions"
-      :model-value="model?.conditions"
+      :model-value="value.conditions"
       data-key="id"
       option-value="id"
-      @update:model-value="model.conditions = $event"
+      @update:model-value="handleInput('conditions', $event)"
     />
   </div>
 </template>
@@ -47,14 +47,34 @@ const model = defineModel<ModelValue>({
 });
 const { t } = useI18n();
 
-const updateSelected = (value: string) => {
-	model.value.selection = value;
-	model.value.conditions = '';
+const value = computed<ModelValue>(
+	() =>
+		model.value ?? {
+			selection: '',
+			conditions: '',
+		},
+);
+
+const handleInput = <K extends keyof ModelValue>(
+	key: K,
+	newFieldValue: ModelValue[K],
+) => {
+	model.value = {
+		...value.value,
+		[key]: newFieldValue,
+	};
+};
+
+const updateSelected = (selection: string) => {
+	model.value = {
+		selection,
+		conditions: '',
+	};
 };
 
 const getConditionList = async (params: Record<string, unknown>) => {
 	return await slasConditionsSearchMethod({
-		parentId: model.value.selection,
+		parentId: value.value.selection,
 		...params,
 	});
 };

package/src/modules/filters/modules/filterConfig/components/case-status/case-status-filter-value-field.vue

@@ -5,22 +5,23 @@
       :label="t('cases.status')"
       :search-method="caseStatusesSearchMethod"
       :v="vSelection"
-      :model-value="model?.selection"
+      :model-value="value.selection"
       data-key="id"
       option-value="id"
       @update:model-value="updateSelected"
     />
 
     <wt-multi-select
-      v-if="model?.selection"
-      :key="model.selection"
-      :disabled="!model.selection"
+      v-if="value.selection"
+      :key="value.selection"
+      :disabled="!value.selection"
       :label="t('webitelUI.filters.filterValue')"
       :search-method="getConditionList"
       :v="vConditions"
-      v-model:model-value="model.conditions"
+      :model-value="value.conditions"
       data-key="id"
       option-value="id"
+      @update:model-value="handleInput('conditions', $event)"
     />
   </div>
 </template>
@@ -49,14 +50,34 @@ const model = defineModel<ModelValue>({
 });
 const { t } = useI18n();
 
-const updateSelected = (value: string) => {
-	model.value.selection = value;
-	model.value.conditions = '';
+const value = computed<ModelValue>(
+	() =>
+		model.value ?? {
+			selection: '',
+			conditions: '',
+		},
+);
+
+const handleInput = <K extends keyof ModelValue>(
+	key: K,
+	newFieldValue: ModelValue[K],
+) => {
+	model.value = {
+		...value.value,
+		[key]: newFieldValue,
+	};
+};
+
+const updateSelected = (selection: string) => {
+	model.value = {
+		selection,
+		conditions: '',
+	};
 };
 
 const getConditionList = (params: Record<string, unknown>) => {
 	return caseStatusConditionsSearchMethod({
-		parentId: model.value.selection,
+		parentId: value.value.selection,
 		...params,
 	});
 };

package/src/modules/filters/modules/filterConfig/components/rating/rating-from-to-filter-value-field.vue

@@ -1,21 +1,19 @@
 <template>
   <div class="rating-from-to-filter-value-field">
     <wt-input-number
-      v-if="model"
       :label="`${t('reusable.from')}:`"
       :placeholder="t('webitelUI.filters.filterValue')"
       :v="vFrom"
-      :model-value="model.from"
+      :model-value="value.from"
       class="rating-from-to-filter-value-field__input"
       @update:model-value="handleInput('from', $event)"
     />
 
     <wt-input-number
-      v-if="model"
       :label="`${t('reusable.to')}:`"
       :placeholder="t('webitelUI.filters.filterValue')"
       :v="vTo"
-      :model-value="model.to"
+      :model-value="value.to"
       class="rating-from-to-filter-value-field__input"
       @update:model-value="handleInput('to', $event)"
     />
@@ -39,6 +37,14 @@ const model = defineModel<ModelValue>({
 	}),
 });
 
+const value = computed<ModelValue>(
+	() =>
+		model.value ?? {
+			from: null,
+			to: null,
+		},
+);
+
 const emit = defineEmits<{
 	'update:invalid': [
 		boolean,
@@ -53,17 +59,17 @@ const v$ = useVuelidate<{
 	computed(() => ({
 		model: {
 			from: {
-				required: requiredIf(() => !model.value.to),
+				required: requiredIf(() => !value.value.to),
 				maxValue: maxValue(
-					model.value.to &&
-						model.value.from !== null &&
-						model.value.from > model.value.to
-						? model.value.to
+					value.value.to &&
+						value.value.from !== null &&
+						value.value.from > value.value.to
+						? value.value.to
 						: Infinity,
 				),
 			},
 			to: {
-				required: requiredIf(() => !model.value.from),
+				required: requiredIf(() => !value.value.from),
 			},
 		},
 	})),
@@ -87,12 +93,11 @@ const vTo = computed(() => {
 	return modelValidation.to;
 });
 
-const handleInput = (key: keyof ModelValue, value: number) => {
-	const newValue = {
-		...model.value,
+const handleInput = (key: keyof ModelValue, newFieldValue: number) => {
+	model.value = {
+		...value.value,
+		[key]: newFieldValue,
 	};
-	newValue[key] = value;
-	model.value = newValue;
 };
 
 watch(

package/src/modules/filters/modules/filterConfig/components/score/score-from-to-filter-value-field.vue

@@ -1,8 +1,7 @@
 <template>
   <div class="score-from-to-filter-value-field">
     <wt-input-number
-      v-if="model"
-      :model-value="model.from"
+      :model-value="value.from"
       :max="props.numberMax"
       :min="0"
       :v="vFrom"
@@ -14,8 +13,7 @@
     />
 
     <wt-input-number
-      v-if="model"
-      :model-value="model.to"
+      :model-value="value.to"
       :max="props.numberMax"
       :min="0"
       :v="vTo"
@@ -45,6 +43,14 @@ const model = defineModel<ModelValue>({
 	}),
 });
 
+const value = computed<ModelValue>(
+	() =>
+		model.value ?? {
+			from: null,
+			to: null,
+		},
+);
+
 const props = withDefaults(
 	defineProps<{
 		numberMax?: number;
@@ -68,10 +74,10 @@ const v$ = useVuelidate<{
 	computed(() => ({
 		model: {
 			from: {
-				required: requiredIf(() => !model.value.to),
+				required: requiredIf(() => !value.value.to),
 			},
 			to: {
-				required: requiredIf(() => !model.value.from),
+				required: requiredIf(() => !value.value.from),
 			},
 		},
 	})),
@@ -95,12 +101,11 @@ const vTo = computed(() => {
 	return modelValidation.to;
 });
 
-const handleInput = (key: keyof ModelValue, value: number) => {
-	const newValue = {
-		...model.value,
+const handleInput = (key: keyof ModelValue, newFieldValue: number) => {
+	model.value = {
+		...value.value,
+		[key]: newFieldValue,
 	};
-	newValue[key] = value;
-	model.value = newValue;
 };
 
 watch(