@webitel/ui-datalist 26.8.8 → 26.8.10

package/package.json

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

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

@@ -26,9 +26,9 @@
 <script lang="ts" setup>
 import type { DataField } from '@webitel/api-services/gen/models';
 import { WtLoader } from '@webitel/ui-sdk/components';
+import type { WtTableHeader } from '@webitel/ui-sdk/components/wt-table/types/WtTable';
 import { ComponentSize } from '@webitel/ui-sdk/enums';
 
-import type { DatalistTableHeader } from '../../../types/tableStore.types';
 import type { IFiltersManager } from '../../classes/FiltersManager';
 import { useColumnFilter } from '../../composables/useColumnFilter';
 import { useFilterValuePreview } from '../../composables/useFilterValuePreview';
@@ -42,7 +42,7 @@ import DynamicFilterPreviewInfo from '../preview/dynamic-filter-preview-info.vue
  * [WTEL-7727](https://webitel.atlassian.net/browse/WTEL-7727)
  */
 const props = defineProps<{
-	header: DatalistTableHeader;
+	header: WtTableHeader;
 	filtersManager: IFiltersManager;
 	/** the page's filter definitions; a configured one is reused for the matching header */
 	filterOptions?: FilterConfigDefinition[];

package/src/modules/filters/components/column/column-filter.vue

@@ -20,7 +20,8 @@
 <script lang="ts" setup>
 import type { DataField } from '@webitel/api-services/gen/models';
 
-import type { DatalistTableHeader } from '../../../types/tableStore.types';
+import type { WtTableHeader } from '@webitel/ui-sdk/components/wt-table/types/WtTable';
+
 import type { FilterInitParams } from '../../classes/Filter';
 import type { IFiltersManager } from '../../classes/FiltersManager';
 import { useColumnFilter } from '../../composables/useColumnFilter';
@@ -41,7 +42,7 @@ import ColumnFilterPreview from './column-filter-preview.vue';
  * [WTEL-7727](https://webitel.atlassian.net/browse/WTEL-7727)
  */
 const props = defineProps<{
-	header: DatalistTableHeader;
+	header: WtTableHeader;
 	filtersManager: IFiltersManager;
 	filterOptions?: FilterConfigDefinition[];
 	filterableExtensionFields?: DataField[];

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

@@ -1,8 +1,8 @@
 import type { DataField } from '@webitel/api-services/gen/models';
+import type { WtTableHeader } from '@webitel/ui-sdk/components/wt-table/types/WtTable';
 import { computed, type MaybeRefOrGetter, toValue } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import type { DatalistTableHeader } from '../../types/tableStore.types';
 import type { FilterName } from '../classes/Filter';
 import type { IFiltersManager } from '../classes/FiltersManager';
 import { createFilterConfig } from '../modules/filterConfig/classes/createFilterConfig';
@@ -14,7 +14,7 @@ import { createTypeExtensionFilterConfig } from '../modules/filterConfig/compone
 import type { FilterConfigDefinition } from '../modules/filterConfig/types/FilterConfigDefinition';
 
 const isResolvedFilterConfig = (
-	filter: DatalistTableHeader['filter'],
+	filter: WtTableHeader['filter'],
 ): filter is AnyFilterConfig => typeof filter === 'object' && filter !== null;
 
 /**
@@ -36,7 +36,7 @@ export const useColumnFilter = ({
 	filterOptions = [],
 	filterableExtensionFields = [],
 }: {
-	header: MaybeRefOrGetter<DatalistTableHeader>;
+	header: MaybeRefOrGetter<WtTableHeader>;
 	filtersManager: MaybeRefOrGetter<IFiltersManager>;
 	filterOptions?: MaybeRefOrGetter<FilterConfigDefinition[]>;
 	filterableExtensionFields?: MaybeRefOrGetter<DataField[]>;

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

@@ -1,6 +1,6 @@
 <template>
   <wt-multi-select
-    :label="t('webitelUI.filters.filterValue')"
+    :label="labelValue"
     :search-method="searchMethod"
     :model-value="model"
     :v="!disableValidation && v$.model"
@@ -13,9 +13,10 @@
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
 import { WtMultiSelect } from '@webitel/ui-sdk/components';
-import { computed, watch } from 'vue';
+import { computed, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import { WtSysTypeFilterConfig } from '../../classes/FilterConfig';
 import { searchMethod } from './config.js';
 
 type ModelValue = number[];
@@ -26,6 +27,11 @@ const props = defineProps<{
 
 const model = defineModel<ModelValue>();
 
+const props = defineProps<{
+	filterConfig?: WtSysTypeFilterConfig;
+	disableValidation?: boolean;
+}>();
+
 const emit = defineEmits<{
 	'update:invalid': [
 		boolean,
@@ -34,6 +40,13 @@ const emit = defineEmits<{
 
 const { t } = useI18n();
 
+const labelValue = computed(() => {
+	const value = props?.filterConfig?.showFilterName
+		? props?.filterConfig.name
+		: 'filterValue';
+	return t(`webitelUI.filters.${value}`);
+});
+
 const v$ = useVuelidate(
 	computed(() => ({
 		model: {
@@ -48,7 +61,10 @@ const v$ = useVuelidate(
 	},
 );
 
-if (!props?.disableValidation) v$.value.$touch();
+onMounted(() => {
+	if (!props.disableValidation) v$.value.$touch();
+});
+
 watch(
 	() => v$.value.$invalid,
 	(invalid) => {

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

@@ -1,7 +1,7 @@
 <template>
   <wt-single-select
     :clearable="false"
-    :label="t('webitelUI.filters.filterValue')"
+    :label="labelValue"
     :options="CallDirectionFilterOptions"
     v-model:model-value="model"
     :v="!disableValidation && v$.model"
@@ -14,9 +14,10 @@
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
 import { WtSingleSelect } from '@webitel/ui-sdk/components';
-import { computed, watch } from 'vue';
+import { computed, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import { WtSysTypeFilterConfig } from '../../classes/FilterConfig';
 import { CallDirectionFilterOptions } from '../../enums/options/CallDirectionFilterOptions';
 
 const props = defineProps<{
@@ -26,6 +27,18 @@ const props = defineProps<{
 const model = defineModel<string>();
 const { t } = useI18n();
 
+const props = defineProps<{
+	filterConfig?: WtSysTypeFilterConfig;
+	disableValidation?: boolean;
+}>();
+
+const labelValue = computed(() => {
+	const value = props?.filterConfig?.showFilterName
+		? props?.filterConfig.name
+		: 'filterValue';
+	return t(`webitelUI.filters.${value}`);
+});
+
 const v$ = useVuelidate(
 	computed(() => ({
 		model: {
@@ -40,13 +53,16 @@ const v$ = useVuelidate(
 	},
 );
 
-if (!props?.disableValidation) v$.value.$touch();
 const emit = defineEmits<{
 	'update:invalid': [
 		boolean,
 	];
 }>();
 
+onMounted(() => {
+	if (!props.disableValidation) v$.value.$touch();
+});
+
 watch(
 	() => v$.value.$invalid,
 	(invalid) => {

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

@@ -1,6 +1,6 @@
 <template>
   <wt-multi-select
-    :label="t('webitelUI.filters.filterValue')"
+    :label="labelValue"
     :search-method="searchGateway"
     :v="!disableValidation && v$.model"
     :model-value="model"
@@ -13,9 +13,10 @@
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
 import { WtMultiSelect } from '@webitel/ui-sdk/components';
-import { computed, watch } from 'vue';
+import { computed, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import { WtSysTypeFilterConfig } from '../../classes/FilterConfig';
 import { searchMethod } from './config.js';
 
 type ModelValue = number[];
@@ -26,6 +27,11 @@ const props = defineProps<{
 
 const model = defineModel<ModelValue>();
 
+const props = defineProps<{
+	filterConfig?: WtSysTypeFilterConfig;
+	disableValidation?: boolean;
+}>();
+
 const emit = defineEmits<{
 	'update:invalid': [
 		boolean,
@@ -33,6 +39,13 @@ const emit = defineEmits<{
 }>();
 const { t } = useI18n();
 
+const labelValue = computed(() => {
+	const value = props?.filterConfig?.showFilterName
+		? props?.filterConfig.name
+		: 'filterValue';
+	return t(`webitelUI.filters.${value}`);
+});
+
 const v$ = useVuelidate(
 	computed(() => ({
 		model: {
@@ -46,7 +59,11 @@ const v$ = useVuelidate(
 		$autoDirty: true,
 	},
 );
-if (!props?.disableValidation) v$.value.$touch();
+
+onMounted(() => {
+	if (!props.disableValidation) v$.value.$touch();
+});
+
 const searchGateway = async (params: { search?: string }) => {
 	return params.search
 		? await searchMethod({

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

@@ -1,6 +1,6 @@
 <template>
   <wt-multi-select
-    :label="t('webitelUI.filters.filterValue')"
+    :label="labelValue"
     :search-method="searchMethod"
     :model-value="model"
     :v="!disableValidation && v$.model"
@@ -13,9 +13,10 @@
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
 import { WtMultiSelect } from '@webitel/ui-sdk/components';
-import { computed, watch } from 'vue';
+import { computed, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import { WtSysTypeFilterConfig } from '../../classes/FilterConfig';
 import { searchMethod } from './config.js';
 
 type ModelValue = number[];
@@ -26,6 +27,11 @@ const props = defineProps<{
 
 const model = defineModel<ModelValue>();
 
+const props = defineProps<{
+	filterConfig?: WtSysTypeFilterConfig;
+	disableValidation?: boolean;
+}>();
+
 const emit = defineEmits<{
 	'update:invalid': [
 		boolean,
@@ -33,6 +39,13 @@ const emit = defineEmits<{
 }>();
 const { t } = useI18n();
 
+const labelValue = computed(() => {
+	const value = props?.filterConfig?.showFilterName
+		? props?.filterConfig.name
+		: 'filterValue';
+	return t(`webitelUI.filters.${value}`);
+});
+
 const v$ = useVuelidate(
 	computed(() => ({
 		model: {
@@ -46,7 +59,11 @@ const v$ = useVuelidate(
 		$autoDirty: true,
 	},
 );
-if (!props?.disableValidation) v$.value.$touch();
+
+onMounted(() => {
+	if (!props.disableValidation) v$.value.$touch();
+});
+
 watch(
 	() => v$.value.$invalid,
 	(invalid) => {

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

@@ -1,27 +1,19 @@
 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 { FilterName, IFiltersManager } from '../filters';
+import type { IFiltersManager } from '../filters';
 import type { DatalistStoreProviderType } from './StoreProvider';
 
-/**
- * Minimal shape of an already-resolved header filter. Deliberately 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 a value of this shape back to `AnyFilterConfig` for actual use.
- */
-export type ResolvedHeaderFilter = {
-	name: FilterName;
-};
-
 /**
  * Table header shape used inside the datalist stores. In addition to the
  * base {@link WtTableHeader} shape, datalist stores key columns by `field`
  * and may flag dynamically-appended headers for lazy initialization.
  */
-export type DatalistTableHeader = Omit<WtTableHeader, 'filter'> & {
+export type DatalistTableHeader = WtTableHeader & {
 	field: string;
 	shouldBeInitialized?: boolean;
 	/**
@@ -37,8 +29,14 @@ export type DatalistTableHeader = Omit<WtTableHeader, 'filter'> & {
 	 * 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?: WtTableHeader['filter'] | ResolvedHeaderFilter;
+	filter?: WtTableHeaderFilter;
 };
 
 export type TrackSelectedRowBy<T> = (row: T) => T;