@webitel/ui-datalist 26.8.7 → 26.8.9

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

@@ -3,7 +3,7 @@
     :label="t('webitelUI.filters.filterValue')"
     :options="CallHistoryTagFilterOptions"
     v-model:model-value="model"
-    :v="v$.model"
+    :v="!disableValidation && v$.model"
     data-key="value"
     option-value="value"
   />
@@ -18,6 +18,10 @@ import { useI18n } from 'vue-i18n';
 
 import { CallHistoryTagFilterOptions } from '../../enums/options/CallHistoryTagFilterOptions';
 
+const props = defineProps<{
+	disableValidation?: boolean;
+}>();
+
 const model = defineModel<string>();
 const { t } = useI18n();
 
@@ -35,8 +39,7 @@ const v$ = useVuelidate(
 	},
 );
 
-v$.value.$touch();
-
+if (!props?.disableValidation) v$.value.$touch();
 const emit = defineEmits<{
 	'update:invalid': [
 		boolean,

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

@@ -3,7 +3,7 @@
     :label="t('webitelUI.filters.filterValue')"
     :search-method="searchMethod"
     :model-value="model"
-    :v="v$.model"
+    :v="!disableValidation && v$.model"
     option-value="id"
     @update:model-value="handleInput"
   />
@@ -20,6 +20,10 @@ import { searchMethod } from './config.js';
 
 type ModelValue = number[];
 
+const props = defineProps<{
+	disableValidation?: boolean;
+}>();
+
 const model = defineModel<ModelValue>();
 
 const emit = defineEmits<{
@@ -42,8 +46,7 @@ const v$ = useVuelidate(
 		$autoDirty: true,
 	},
 );
-v$.value.$touch();
-
+if (!props?.disableValidation) v$.value.$touch();
 watch(
 	() => v$.value.$invalid,
 	(invalid) => {

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

@@ -2,7 +2,7 @@
   <wt-input-text
     v-model:model-value="model"
     :label="t('webitelUI.filters.filterValue')"
-    :v="v$.model"
+    :v="!disableValidation && v$.model"
   />
 </template>
 
@@ -14,6 +14,10 @@ import { useI18n } from 'vue-i18n';
 
 type ModelValue = string;
 
+const props = defineProps<{
+	disableValidation?: boolean;
+}>();
+
 const model = defineModel<ModelValue>();
 if (!model.value) {
 	model.value = '';
@@ -35,8 +39,7 @@ const v$ = useVuelidate(
 	},
 );
 
-v$.value.$touch();
-
+if (!props?.disableValidation) v$.value.$touch();
 const emit = defineEmits<{
 	'update:invalid': [
 		boolean,

package/src/modules/table/createTableStore.store.ts

@@ -1,21 +1,28 @@
 import deepEqual from 'deep-equal';
 import { set } from 'lodash-es';
-import { nextTick, type Ref, ref, toRaw, watch } from 'vue';
+import { computed, nextTick, type Ref, ref, toRaw, watch } from 'vue';
 
 import {
 	createDatalistStore,
 	makeThisToRefs,
 } from '../_shared/createDatalistStore';
+import type { FilterName } from '../filters';
 import { createTableFiltersStore } from '../filters/createTableFiltersStore';
 import { createTableHeadersStore } from '../headers/createTableHeadersStore';
 import { createTablePaginationStore } from '../pagination/createTablePaginationStore';
 import type { Identifiable } from '../types/createDatalistStore.types';
 import type {
+	DatalistTableHeader,
 	LoadDataListOptions,
 	PatchItemPropertyParams,
 	useTableStoreConfig,
 } from '../types/tableStore.types';
 
+const getFilterName = (
+	filter: DatalistTableHeader['filter'],
+): FilterName | undefined =>
+	typeof filter === 'object' ? filter?.name : filter;
+
 export const tableStoreBody = <Entity extends Identifiable>(
 	namespace: string,
 	config: useTableStoreConfig<Entity>,
@@ -58,8 +65,8 @@ export const tableStoreBody = <Entity extends Identifiable>(
 
 	const headersStore = useHeadersStore();
 	const {
-		headers,
-		shownHeaders,
+		headers: rawHeaders,
+		shownHeaders: rawShownHeaders,
 		fields,
 		sort,
 		columnWidths,
@@ -90,6 +97,20 @@ export const tableStoreBody = <Entity extends Identifiable>(
 		updateSearchMode,
 	} = filtersStore;
 
+	const withFilteredFlag = (list: DatalistTableHeader[]) =>
+		list.map((header) => {
+			const name = getFilterName(header.filter);
+			return name
+				? {
+						...header,
+						filtered: filtersManager.value.hasFilter(name),
+					}
+				: header;
+		});
+
+	const headers = computed(() => withFilteredFlag(rawHeaders.value));
+	const shownHeaders = computed(() => withFilteredFlag(rawShownHeaders.value));
+
 	/**
 	 * @internal
 	 * @description

package/src/modules/types/tableStore.types.ts

@@ -1,5 +1,8 @@
 import type { ApiModule } from '@webitel/ui-sdk/api/types/ApiModule';
-import type { WtTableHeader } from '@webitel/ui-sdk/components/wt-table/types/WtTable';
+import type {
+	WtTableHeader,
+	WtTableHeaderFilter,
+} from '@webitel/ui-sdk/components/wt-table/types/WtTable';
 import type { Ref } from 'vue';
 
 import type { IFiltersManager } from '../filters';
@@ -20,6 +23,20 @@ export type DatalistTableHeader = WtTableHeader & {
 	 * restorable from persisted state. Omitted means allowed.
 	 */
 	access?: () => boolean | Ref<boolean>;
+	/**
+	 * Name of the filter shown in the column header popover (`column-filter` slot),
+	 * or an already-resolved config for it (build one with `createFilterConfig`). Passing a
+	 * config here lets `headers.ts` map the header to its filter once, instead of
+	 * `useColumnFilter` searching `filterOptions`/`filterableExtensionFields` for it on every
+	 * column.
+	 *
+	 * {@link WtTableHeaderFilter} deliberately keeps only the `name` of a resolved config and not
+	 * the full `AnyFilterConfig` (with its `Component` props): `createTableHeadersStore` keeps
+	 * headers in a plain `ref<DatalistTableHeader[]>`, and `Component` props there send Vue's
+	 * `UnwrapRef` into excessive type-instantiation depth (TS2589). `useColumnFilter`'s
+	 * `isResolvedFilterConfig` narrows it back to `AnyFilterConfig` for actual use.
+	 */
+	filter?: WtTableHeaderFilter;
 };
 
 export type TrackSelectedRowBy<T> = (row: T) => T;