@webitel/ui-sdk 25.4.31 → 25.4.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "25.4.31",
+  "version": "25.4.32",
   "private": false,
   "scripts": {
     "dev": "vite",

package/src/components/wt-label/_variables.scss

@@ -1,4 +1,6 @@
 :root {
+  --wt-label-padding: var(--spacing-2xs) var(--spacing-xs);
+
   --wt-label-color: var(--text-main-color);
   --wt-label-error-color: var(--text-error-color);
   --wt-label-disabled-color: var(--text-disabled-color);

package/src/components/wt-label/wt-label.vue

@@ -39,13 +39,14 @@ export default {
 @use '../../css/main.scss';
 
 .wt-label {
-  @extend %typo-body-1;
+  @extend %typo-subtitle-2;
 
   display: flex;
   align-items: center;
   cursor: text;
   transition: var(--transition);
   color: var(--wt-label-color);
+  padding: var(--wt-label-padding);
 
   &--invalid {
     color: var(--wt-label-error-color);

package/src/locale/ru/ru.js

@@ -468,7 +468,7 @@ export default {
     },
     empty: {
       text: {
-        empty: 'Записи в разделе еще не созданы',
+        empty: 'Записи еще не созданы',
         filters: 'К сожалению, ни одна запись не соответствует вашим критериям',
       },
     },

package/src/locale/ua/ua.js

@@ -468,7 +468,7 @@ export default {
     },
     empty: {
       text: {
-        empty: 'Записи у розділі ще не створені',
+        empty: 'Записи ще не створені',
         filters: 'На жаль, жоден запис не відповідає вашим критеріям',
       },
     },

package/src/modules/Filters/v2/filter-presets/components/_shared/preset-filters-preview.vue

@@ -3,7 +3,9 @@
     <wt-label>
       {{ t('webitelUI.filters.filterName') }}
     </wt-label>
-    <dynamic-filter-panel-wrapper>
+    <dynamic-filter-panel-wrapper
+      size="sm"
+    >
       <template #filters>
         <dynamic-filter-preview
           v-for="(filter) of props.filters"

package/src/modules/Filters/v2/filter-presets/components/apply-preset/apply-preset-action.vue

@@ -6,7 +6,7 @@
     />
     <wt-popup
       :shown="showPresetsList"
-      size="sm"
+      size="md"
       @close="showPresetsList = false"
     >
       <template #title>
@@ -28,9 +28,9 @@
 
           <section class="available-presets-list">
             <preset-preview
-              v-for="(preset, index) of dataList"
+              v-for="(preset) of dataList"
               :key="preset.id"
-              :collapsed="!!index"
+              collapsed
               :is-selected="preset === selectedPreset"
               :preset="preset"
               @preset:select="selectedPreset = preset"
@@ -67,7 +67,7 @@
 
 <script lang="ts" setup>
 import {type StoreDefinition, storeToRefs } from "pinia";
-import {computed, inject, ref, watch} from "vue";
+import {computed, inject, ref, watch, onUnmounted} from "vue";
 import {useI18n} from "vue-i18n";
 
 import {WtButton, WtEmpty, WtPopup, WtSearchBar, WtIconAction} from "../../../../../../components/index";
@@ -112,18 +112,6 @@ const {
 } = presetsStore;
 
 updateSize(1000);
-
-const {
-  showEmpty,
-  image: imageEmpty,
-  text: textEmpty,
-} = useTableEmpty({
-  dataList,
-  isLoading,
-  error,
-  filters: computed(() => filtersManager.value.getAllValues()),
-});
-
 filtersManager.value.addFilter({name: 'presetNamespace', value: props.namespace});
 
 const search = computed({
@@ -135,13 +123,31 @@ const search = computed({
   }
 });
 
+const {
+  showEmpty,
+  image: imageEmpty,
+  text: textEmpty,
+} = useTableEmpty({
+  dataList,
+  isLoading,
+  error,
+  filters: computed(() => {
+    return {
+      search: search.value,
+    };
+  }),
+});
+
 watch(showPresetsList, () => {
   initialize();
 
   watch(showPresetsList, (value) => {
     if (value) {
       search.value = '';
-      loadDataList();
+      /* search.value reset causes re-fetch as filter change, so
+      loadDataList() is commented.
+      TODO: implement ability to set filters "silently" and refactor this code */
+      // loadDataList();
     }
   });
 }, {once: true});
@@ -159,8 +165,9 @@ const applySelectedPreset = () => {
 const updatePreset = async ({preset, onSuccess, onFailure}) => {
   try {
     await PresetQueryAPI.update({
-      item: { ...preset, section: props.namespace },
+      item: { ...preset },
       id: preset.id,
+      namespace: preset.namespace,
     });
     eventBus.$emit('notification', {
       type: 'success',

package/src/modules/Filters/v2/filter-presets/components/save-preset/overwrite-preset-popup.vue

@@ -1,6 +1,6 @@
 <template>
   <wt-popup
-    size="sm"
+    size="md"
     @close="emit('close')"
   >
     <template #title>

package/src/modules/Filters/v2/filter-presets/components/save-preset/save-preset-popup.vue

@@ -1,6 +1,6 @@
 <template>
   <wt-popup
-    size="sm"
+    size="md"
     @close="emit('close')"
   >
     <template #title>
@@ -118,6 +118,7 @@ const save = () => {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
+  margin-bottom: var(--spacing-sm);
 }
 
 .save-preset-filters-preview-wrapper {

package/src/modules/Filters/v2/filters/components/dynamic-filter-panel-wrapper.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="dynamic-filter-panel-wrapper">
+  <div
+    class="dynamic-filter-panel-wrapper"
+    :class="`dynamic-filter-panel-wrapper--${props.size}`"
+  >
     <div class="dynamic-filter-panel-wrapper__filters">
       <slot name="filters" />
     </div>
@@ -10,23 +13,42 @@
   </div>
 </template>
 
+<script setup lang="ts">
+import { ComponentSize } from '../../../../../enums';
+
+const props = withDefaults(defineProps<{
+  size?: ComponentSize;
+}>(), {
+  size: ComponentSize.MD,
+});
+</script>
+
 <style lang="scss" scoped>
 .dynamic-filter-panel-wrapper {
   display: grid;
   grid-gap: var(--spacing-sm);
   align-items: center;
   grid-template-columns: 1fr auto;
+}
 
-  &__filters {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    grid-gap: var(--spacing-sm);
-  }
+.dynamic-filter-panel-wrapper__filters {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  grid-gap: var(--spacing-sm);
+}
 
-  &__actions {
-    display: flex;
-    grid-gap: var(--spacing-sm);
+.dynamic-filter-panel-wrapper__actions {
+  display: flex;
+  grid-gap: var(--spacing-sm);
+}
+
+.dynamic-filter-panel-wrapper {
+  &--sm {
+    .dynamic-filter-panel-wrapper__filters,
+    .dynamic-filter-panel-wrapper__actions, {
+      grid-gap: var(--spacing-xs);
+    }
   }
 }
 </style>