@webitel/ui-datalist 1.1.25 → 1.1.27

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-datalist",
-	"version": "1.1.25",
+	"version": "1.1.27",
 	"description": "Toolkit for building data lists in webitel ui system",
 	"scripts": {
 		"make-all": "npm version patch --git-tag-version false && ( npm run lint:fix || true) && (npm run build:types || true) && npm run lint:package && npm run utils:publish",

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

@@ -12,6 +12,7 @@
     <template #[WtTypeExtensionFieldKind.Select]="{ defaultProps }">
       <wt-select
         v-bind="defaultProps"
+        :v="v$.model"
         :value="
           model ??
           [] /* so that component won't break when model is nullish at init */
@@ -19,6 +20,7 @@
         :search-method="
           (...params) => props.filterConfig.searchRecords(...params)
         "
+        :required="false /* https://github.com/webitel/webitel-ui-sdk/pull/1359#discussion_r3180877255 */"
         use-value-from-options-by-prop="id"
         @input="model = $event"
       />
@@ -26,6 +28,7 @@
     <template #[WtTypeExtensionFieldKind.Multiselect]="{ defaultProps }">
       <wt-select
         v-bind="defaultProps"
+        :v="v$.model"
         :value="
           model ??
           [] /* so that component won't break when model is nullish at init */
@@ -33,6 +36,8 @@
         :search-method="
           (...params) => props.filterConfig.searchRecords(...params)
         "
+
+        :required="false /* https://github.com/webitel/webitel-ui-sdk/pull/1359#discussion_r3180877255 */""
         use-value-from-options-by-prop="id"
         @input="model = $event"
       />
@@ -51,7 +56,8 @@ import {
 	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, useAttrs, watch } from 'vue';
+import { computed, onMounted, useAttrs, watch } from 'vue';
+import { WebitelProtoDataTypeKind } from 'webitel-sdk';
 
 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';
@@ -84,7 +90,7 @@ const v$ = useVuelidate(
 		$autoDirty: true,
 	},
 );
-
+v$.value.$touch();
 watch(
 	() => v$.value.$invalid,
 	(invalid) => {

package/src/modules/headers/createTableHeadersStore.ts

@@ -101,36 +101,48 @@ export const tableHeadersStoreBody = ({
 	};
 
 	const updateFields = (fields: string[]) => {
-		const newHeaders = headers.value.map((header: WtTableHeader) => ({
+		const fieldsSet = new Set(fields);
+		const mainFieldNames = new Set(headers.value.map((header) => header.field));
+
+		const mainHeaders = headers.value.map((header: WtTableHeader) => ({
 			...header,
-			show: fields.includes(header.field),
+			show: fieldsSet.has(header.field),
 		}));
 
-		const customFields = fields.filter(
-			(field) => !headers.value.some((header) => header.field === field),
+		const customHeaders = fields
+			.filter((field) => !mainFieldNames.has(field))
+			.map((field) => ({
+				show: true,
+				field,
+				shouldBeInitialized: true,
+			}));
+
+		const headersByField = new Map(
+			[
+				...mainHeaders,
+				...customHeaders,
+			].map((header) => [
+				header.field,
+				header,
+			]),
 		);
-		const customFieldHeaders = customFields.map((field) => ({
-			show: true,
-			field,
-			shouldBeInitialized: true,
-		}));
 
-		const mergedHeaders = [
-			...newHeaders,
-			...customFieldHeaders,
-		];
-		const orderedFields = fields.filter((field) =>
-			mergedHeaders.some((header) => header.field === field),
-		);
-		const reordered = setHeaderOrder(orderedFields);
+		const headersInPersistedOrder = fields.flatMap((field) => {
+			const header = headersByField.get(field);
+			if (!header) return [];
+			headersByField.delete(field);
+			return [
+				header,
+			];
+		});
 
-		const uniqueMerged = mergedHeaders.filter(
-			(merged) => !reordered.some((r) => r.field === merged.field),
-		);
+		const hiddenHeaders = [
+			...headersByField.values(),
+		];
 
 		updateShownHeaders([
-			...reordered,
-			...uniqueMerged,
+			...headersInPersistedOrder,
+			...hiddenHeaders,
 		]);
 	};