@webitel/ui-datalist 1.0.36 → 1.0.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-datalist",
-  "version": "1.0.36",
+  "version": "1.0.38",
   "description": "Toolkit for building data lists in webitel ui system",
   "scripts": {
     "build:types": "vue-tsc -p ./tsconfig.build.json",
@@ -53,7 +53,7 @@
     "@vuelidate/validators": "^2.0.4",
     "@webitel/styleguide": "^24.12.26",
     "@webitel/ui-sdk": "^25.4.76",
-    "zod": "^4.0.0-beta.20250505T195954"
+    "zod": "^3.25.55"
   },
   "devDependencies": {
     "@eslint/js": "^9.22.0",
@@ -81,9 +81,6 @@
     "vite-plugin-checker": "^0.9.0",
     "vue-tsc": "^2.2.8"
   },
-  "overrides": {
-    "zod": "^4.0.0-beta.20250505T195954"
-  },
   "engines": {
     "npm": "10",
     "node": "v22"

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

@@ -1,3 +1,5 @@
+import { AnyFilterConfig } from '../modules/filterConfig';
+
 export type FilterName = string;
 export type FilterLabel = string;
 export type FilterValue =

package/src/modules/filters/components/config/{dynamic-filter-config-form-value-input.vue → dynamic-view/dynamic-filter-config-form-value-input.vue}

@@ -9,7 +9,7 @@
 </template>
 
 <script setup lang="ts">
-import {AnyFilterConfig} from "../../modules/filterConfig/classes/FilterConfig";
+import {AnyFilterConfig} from "../../../modules/filterConfig/classes/FilterConfig";
 
 const filterValue = defineModel<unknown>();
 

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

@@ -65,8 +65,8 @@ import deepcopy from 'deep-copy';
 import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import {FilterInitParams, IFilter} from "../../classes/Filter";
-import {BaseFilterConfig} from "../../modules/filterConfig/classes/FilterConfig";
+import {FilterInitParams, IFilter} from "../../../classes/Filter";
+import {BaseFilterConfig} from "../../../modules/filterConfig/classes/FilterConfig";
 import DynamicFilterConfigFormLabel from './dynamic-filter-config-form-label.vue';
 import DynamicFilterConfigFormValueInput from "./dynamic-filter-config-form-value-input.vue";
 

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

@@ -0,0 +1,56 @@
+<template>
+  <div class="static-filter-field">
+    <component
+      :is="filterConfig.valueInputComponent"
+      :disable-validation="true /*for static filters validation is not needed (different presentation with dynamic filters)*/"
+      :filter-config="filterConfig"
+      :hide-label="true /*for static filters need to hide label and display placeholder (different presentation with dynamic filters)*/"
+      :model-value="filterValue"
+      :placeholder="filterConfig.label"
+      @update:model-value="onValueChange"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { isEmpty } from '@webitel/ui-sdk/scripts';
+import { computed } from 'vue';
+import { StaticFilterEmits, StaticFilterProps } from '../../types/Filter.types';
+
+/* Author @Lera24
+Static filters
+Description - [https://webitel.atlassian.net/browse/WTEL-6934]
+Example - section CRM / lookups Contact groups / Contacts tab / Adding contacts popup (click on the "+" button) */
+
+const props = defineProps<StaticFilterProps>();
+
+const emit = defineEmits<StaticFilterEmits>();
+
+const filterValue = computed(() => props.filter?.value);
+
+const onValueChange = (value) => {
+    if (isEmpty(value) && typeof value !== 'boolean') {
+      return emit('delete:filter', props.filter);
+    }
+
+    if (isEmpty(filterValue.value)) {
+      return emit('add:filter', {
+        name: props.filterConfig.name,
+        value,
+      });
+    }
+
+    emit('update:filter', {
+      ...props.filter,
+      value,
+    });
+  }
+;
+
+</script>
+
+<style lang="scss" scoped>
+.static-filter-field {
+  flex: 1;
+}
+</style>

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

@@ -35,8 +35,8 @@ import { useI18n } from 'vue-i18n';
 
 import {FilterInitParams} from "../classes/Filter";
 import {BaseFilterConfig} from "../modules/filterConfig/classes/FilterConfig";
-import DynamicFilterConfigForm from './config/dynamic-filter-config-form.vue';
-import DynamicFilterConfigView from './config/dynamic-filter-config-view.vue';
+import DynamicFilterConfigForm from './config/dynamic-view/dynamic-filter-config-form.vue';
+import DynamicFilterConfigView from './config/dynamic-view/dynamic-filter-config-view.vue';
 
 interface Props {
   filterConfigs: BaseFilterConfig[];

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

@@ -70,34 +70,17 @@ import {
   WtTooltip,
 } from '@webitel/ui-sdk/components';
 import { computed, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
 
-import { FilterData, IFilter } from '../../classes/Filter';
-import { AnyFilterConfig } from '../../modules/filterConfig/classes/FilterConfig';
+import { IFilter } from '../../classes/Filter';
+import { DynamicFilterProps, DynamicFilterEmits } from '../types/Filter.types';
 import { FilterOptionToPreviewApiSearchMethodMap } from '../../modules/filterConfig/components';
-import { FilterOption } from '../../modules/filterConfig/enums/FilterOption';
-import DynamicFilterConfigForm from '../config/dynamic-filter-config-form.vue';
-import DynamicFilterConfigView from '../config/dynamic-filter-config-view.vue';
+import DynamicFilterConfigForm from '../config/dynamic-view/dynamic-filter-config-form.vue';
+import DynamicFilterConfigView from '../config/dynamic-view/dynamic-filter-config-view.vue';
 import DynamicFilterPreviewInfo from './dynamic-filter-preview-info.vue';
 
-interface Props {
-  filter: IFilter;
-  /**
-   * @description
-   * this filter config
-   */
-  filterConfig: AnyFilterConfig;
-  readonly?: boolean;
-}
-
-const { t } = useI18n();
-
-const props = defineProps<Props>();
+const props = defineProps<DynamicFilterProps>();
 
-const emit = defineEmits<{
-  'update:filter': [FilterData];
-  'delete:filter': [IFilter];
-}>();
+const emit = defineEmits<DynamicFilterEmits>();
 
 const localValue = ref();
 
@@ -167,8 +150,8 @@ const deleteFilter = () => {
 <style lang="scss" scoped>
 .wt-chip {
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
   gap: var(--spacing-2xs);
 }
 

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

@@ -4,7 +4,7 @@
     :search-mode="searchMode"
     :search-mode-options="searchModeOptions"
     :value="localSearchValue"
-    @input="localSearchValue = $event"
+    @input="inputValue"
     @search="handleSearch"
     @update:search-mode="updateSearchMode"
   />
@@ -28,6 +28,7 @@ const props = defineProps<{
    * default search name is used when there are no search modes
    */
   singleSearchName?: string;
+  value?: string;
 }>();
 
 const defaultSearchName = props.singleSearchName || 'search';
@@ -41,7 +42,7 @@ const emit = defineEmits<{
 const { t } = useI18n();
 
 const searchMode: Ref<FilterName> = ref();
-const localSearchValue = ref('');
+const localSearchValue = computed(() => props?.value || '');
 
 const hasFilter = (filterName = searchMode.value) => {
   return props.filtersManager.filters.has(filterName);
@@ -72,17 +73,32 @@ const currentSearchName = computed(() => {
   return defaultSearchName;
 });
 
+const inputValue = (value: string) => {
+  localSearchValue.value = value;
+
+  if (value === '') {
+    if (hasFilter(currentSearchName.value)) {
+      deleteFilter({
+        name: currentSearchName.value,
+      });
+    }
+    return;
+  }
+};
+
 const handleSearch = (value = localSearchValue.value) => {
-  if (hasFilter(currentSearchName.value)) {
-    updateFilter({
-      name: currentSearchName.value,
-      value,
-    });
-  } else {
-    addFilter({
-      name: currentSearchName.value,
-      value,
-    });
+  if(value) {
+    if (hasFilter(currentSearchName.value)) {
+      updateFilter({
+        name: currentSearchName.value,
+        value,
+      });
+    } else {
+      addFilter({
+        name: currentSearchName.value,
+        value,
+      });
+    }
   }
 };
 

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

@@ -1,21 +1,36 @@
 <template>
+  <div :class="{ 'table-filters-panel--static-wrapper': staticMode }">
   <dynamic-filter-panel-wrapper>
     <template #filters>
-      <dynamic-filter-preview
-        v-for="({ filter, filterConfig }) of appliedFilterToFilterConfigMappings"
-        :key="filter.name"
-        :filter="filter"
-        :filter-config="filterConfig"
-        disable-click-away
-        @update:filter="emit('filter:update', $event)"
-        @delete:filter="emit('filter:delete', filter)"
-      />
+      <div v-if="staticMode" class="table-filters-panel--static-filters">
+        <static-filter-field
+          v-for="({ filter, filterConfig }) in staticViewFilterToFilterConfigMappings"
+          :key="filterConfig.name"
+          :filter="filter"
+          :filter-config="filterConfig"
+          @add:filter="emit('filter:add', $event)"
+          @update:filter="emit('filter:update', $event)"
+          @delete:filter="emit('filter:delete', filter)"
+        />
+      </div>
 
-      <dynamic-filter-add-action
-        :filter-configs="unAppliedFiltersConfigs"
-        :show-label="!appliedFilters.length"
-        @add:filter="emit('filter:add', $event)"
-      />
+      <div v-else class="table-filters-panel--dynamic-filters">
+        <dynamic-filter-preview
+          v-for="({ filter, filterConfig }) of appliedFilterToFilterConfigMappings"
+          :key="filter.name"
+          :filter="filter"
+          :filter-config="filterConfig"
+          disable-click-away
+          @update:filter="emit('filter:update', $event)"
+          @delete:filter="emit('filter:delete', filter)"
+        />
+
+        <dynamic-filter-add-action
+          :filter-configs="unAppliedFiltersConfigs"
+          :show-label="!appliedFilters.length"
+          @add:filter="emit('filter:add', $event)"
+        />
+      </div>
     </template>
 
     <template #actions>
@@ -42,11 +57,13 @@
       />
 
       <wt-icon-action
+        v-if="!staticMode"
         action="close"
         @click="emit('hide')"
       />
     </template>
   </dynamic-filter-panel-wrapper>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -61,6 +78,7 @@ import {IFiltersManager} from "../classes/FiltersManager";
 import {useFilterConfigsToolkit} from "../composables/useFilterConfigsToolkit";
 import {AnyFilterConfig} from "../modules/filterConfig/classes/FilterConfig";
 import { FilterOption } from '../modules/filterConfig/enums/FilterOption';
+import StaticFilterField from './config/static-view/static-filter-field.vue';
 import DynamicFilterAddAction from './dynamic-filter-add-action.vue';
 import DynamicFilterPanelWrapper from './dynamic-filter-panel-wrapper.vue';
 import DynamicFilterPreview from './preview/dynamic-filter-preview.vue';
@@ -107,6 +125,14 @@ type Props = {
    * TODO: https://github.com/webitel/webitel-ui-sdk/pull/551
    */
   usePresetsStore?: Store;
+
+  /**
+   * @author @Lera24
+   * @description
+   * Static view filter rendering mode. With it, filters are drawn immediately when the form is opened
+   * [https://webitel.atlassian.net/browse/WTEL-6934]
+   */
+  staticMode?: boolean;
 };
 
 const props = defineProps<Props>();
@@ -134,6 +160,7 @@ const emit = defineEmits<{
 
 const {
   filterConfigs,
+  staticViewFilterToFilterConfigMappings,
   filtersIncluded,
   appliedFilters,
   appliedFilterToFilterConfigMappings,
@@ -142,9 +169,32 @@ const {
   filterOptions: props.filterOptions,
   filtersManager: props.filtersManager,
   filterableExtensionFields: props.filterableExtensionFields,
+  staticMode: props.staticMode,
 });
 
 const enablePresets = computed(() => !!props.presetNamespace);
 </script>
 
-<style scoped></style>
+<style>
+.table-filters-panel--static-wrapper {
+  width: 100%;
+
+  .dynamic-filter-panel-wrapper {
+    align-items: center;
+  }
+  .dynamic-filter-panel-wrapper__filters {
+    display: flex;
+    flex-wrap: nowrap;
+    grid-gap: var(--spacing-xs);
+  }
+}
+.table-filters-panel--dynamic-filters {
+  display: flex;
+  gap: var(--spacing-sm);
+}
+
+.table-filters-panel--static-filters {
+  display: contents;
+  gap: var(--spacing-sm);
+}
+</style>

package/src/modules/filters/components/types/Filter.types.ts

@@ -0,0 +1,26 @@
+import { AnyFilterConfig } from '../../modules/filterConfig';
+import { FilterData, FilterInitParams, IFilter } from '../../classes/Filter';
+
+export interface FilterEmits {
+  'update:filter': [FilterData];
+  'delete:filter': [IFilter];
+}
+
+export interface StaticFilterEmits extends FilterEmits {
+  'add:filter': [FilterInitParams];
+}
+
+export interface DynamicFilterEmits extends FilterEmits {
+}
+
+export interface FilterProps {
+  filter: IFilter;
+  filterConfig: AnyFilterConfig;
+}
+
+export interface StaticFilterProps extends FilterProps {
+}
+
+export interface DynamicFilterProps extends FilterProps {
+  readonly?: boolean;
+}

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

@@ -38,12 +38,13 @@ export type FilterConfigToolkitParams = {
   filterOptions: (FilterOption | BaseFilterConfig)[];
   filtersManager: IFiltersManager;
   filterableExtensionFields: WebitelProtoDataField[];
+  staticMode?: boolean;
 };
 
 export const useFilterConfigsToolkit = ({
   filterOptions,
   filtersManager,
-  filterableExtensionFields = [],
+  filterableExtensionFields = [], staticMode = false,
 }: FilterConfigToolkitParams): FilterConfigToolkit => {
   const { t } = useI18n();
 
@@ -126,11 +127,30 @@ export const useFilterConfigsToolkit = ({
     });
   });
 
+  const staticViewFilterToFilterConfigMappings = computed(() => {
+    // Author @Lera24
+    // [https://webitel.atlassian.net/browse/WTEL-6934]
+    //
+    // Static (computed staticViewFilterToFilterConfigMappings) filters
+    // use all page filters passed in filterOptions for configuration, without values
+    //
+    // Dynamic (computed applyFilterToFilterConfigMappings) filters consist of a configuration
+    // of filters for which a value has already been defined
+
+      return filterConfigs.value.map((filterConfig) => {
+        return {
+          filter: filtersManager.getFilter(filterConfig.name),
+          filterConfig,
+        }
+      });
+  });
+
   return {
     filterConfigs,
     filtersIncluded,
     appliedFilters,
     appliedFilterToFilterConfigMappings,
+    staticViewFilterToFilterConfigMappings,
     unAppliedFiltersConfigs,
   };
 };

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

@@ -48,6 +48,7 @@ export class FilterConfig implements BaseFilterConfig {
   valueInputComponent: Component;
   valuePreviewComponent: Component;
   label?: ReturnType<MessageResolver> | string;
+  staticView?: boolean;
   notDeletable: boolean;
 
   constructor({
@@ -55,6 +56,7 @@ export class FilterConfig implements BaseFilterConfig {
                 valueInputComponent,
                 valuePreviewComponent,
                 notDeletable,
+    staticView,
               }: FilterConfigBaseParams = {}) {
 
     if (name) this.name = name;
@@ -62,6 +64,7 @@ export class FilterConfig implements BaseFilterConfig {
     if (valuePreviewComponent)
       this.valuePreviewComponent = valuePreviewComponent;
     this.notDeletable = !!notDeletable;
+    if (staticView) this.staticView = staticView;
   }
 }
 

package/src/modules/filters/modules/filterConfig/components/_shared/has-options/has-option-filter-value-field.vue

@@ -1,13 +1,12 @@
 <template>
   <wt-select
-    v-bind="attrs"
-    :clearable="false"
+    :label="labelValue"
     :options="BooleanOptions"
     :value="strModel"
-    :label="t('webitelUI.filters.filterValue')"
     class="has-option-filter-value-field"
     track-by="value"
     use-value-from-options-by-prop="value"
+    v-bind="attrs"
     @input="strModel = $event"
   />
 </template>
@@ -19,18 +18,24 @@ import { useI18n } from 'vue-i18n';
 
 import { BooleanOptions } from '../../../enums/options/BooleanFilterOptions';
 
+const props = defineProps<{
+  hideLabel?: boolean;
+}>();
+
 const model = defineModel<boolean | null>();
 
 const attrs = useAttrs();
 
 const { t } = useI18n();
 
+const labelValue = computed(() => props?.hideLabel ? null : t('webitelUI.filters.filterValue'))
+
 const strModel = computed({
   get: () => {
     return typeof model.value === 'boolean' ? String(model.value) : model.value;
   },
   set: (value: string) => {
-    model.value = value === 'true';
+    model.value = typeof value === 'string' ? value === 'true' : value;
   },
 });
 </script>

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

@@ -1,20 +1,21 @@
 <template>
   <wt-select
     :close-on-select="false"
-    :label="t('webitelUI.filters.filterValue')"
+    :label="labelValue"
     :search-method="props.filterConfig.searchRecords"
-    :v="v$.model.list"
+    :v="v$?.model.list"
     :value="model?.list"
     multiple
     track-by="id"
     use-value-from-options-by-prop="id"
-    @input="model.list = $event"
+    v-bind="$attrs"
+    @input="changeListValue"
   />
   <wt-checkbox
     v-if="!props.filterConfig?.hideUnassigned"
     :label="t('reusable.showUnassigned')"
     :selected="model?.unassigned"
-    :v="v$.model.unassigned"
+    :v="v$?.model.unassigned"
     @change="model.unassigned = $event"
   />
 </template>
@@ -30,7 +31,10 @@ import { IContactGroupFilterConfig } from './index';
 
 const props = defineProps<{
   filterConfig: IContactGroupFilterConfig;
+  disableValidation?: boolean;
+  hideLabel?: boolean;
 }>();
+
 type ModelValue = {
   list: string[];
   unassigned: boolean;
@@ -43,35 +47,45 @@ const emit = defineEmits<{
 }>();
 const { t } = useI18n();
 
-const initModel = () => {
-  if (!model.value) {
+const labelValue = computed(() => props?.hideLabel ? null : t('webitelUI.filters.filterValue'))
+
+const changeListValue = (event) => {
+  if(!event.length && !model.value.unassigned) {
+
+    return model.value = {}
+  } else {
     model.value = {
-      list: [],
-      unassigned: false,
+      ...model.value,
+      list: event,
     };
   }
 };
-onMounted(() => initModel());
-
-const v$ = useVuelidate(
-  computed(() => ({
-    model: {
-      list: { required: requiredIf(() => !model.value.unassigned) },
-      unassigned: { required: requiredIf(() => props.filterConfig?.hideUnassigned && !model.value.list.length) },
-    },
-  })),
-  { model },
-  { $autoDirty: true },
-);
-v$.value.$touch();
+const v$ = computed(() => {
+  if (props.disableValidation) return null;
+  return useVuelidate(
+    computed(() => ({
+      model: {
+        list: { required: requiredIf(() => !model.value.unassigned) },
+        unassigned: {
+          required: requiredIf(() =>
+            props.filterConfig?.hideUnassigned && !model.value.list.length
+          ),
+        },
+      },
+    })),
+    { model },
+    { $autoDirty: true }
+  );
+});
 
 watch(
-  () => v$.value.$invalid,
+  () => v$?.value?.$invalid,
   (invalid) => {
-    emit('update:invalid', invalid);
+    if (v$?.value) {
+      emit('update:invalid', invalid);
+    }
   },
-  { immediate: true },
-);
+  { immediate: true });
 </script>
 
 <style scoped></style>