@webitel/ui-sdk 25.4.34 → 25.4.36

package/src/modules/Filters/v2/filters/components/filter-options/actual-reaction-time/actual-reaction-time-filter-value-preview.vue

@@ -2,25 +2,25 @@
   <div class="actual-reaction-time-filter-value-preview">
     <div v-if="props.value.from">
       <p class="actual-reaction-time-filter-value-preview__title">
-        {{t('reusable.from')}}
+        {{ t('reusable.from') }}
       </p>
 
-      <span>{{convertTimestampToDate(props.value.from)}}</span>
+      <span>{{ convertTimestampToDate(props.value.from) }}</span>
     </div>
 
     <div v-if="props.value.to">
       <p class="actual-reaction-time-filter-value-preview__title">
-        {{t('reusable.to')}}
+        {{ t('reusable.to') }}
       </p>
 
-      <span>{{convertTimestampToDate(props.value.to)}}</span>
+      <span>{{ convertTimestampToDate(props.value.to) }}</span>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import {useI18n} from "vue-i18n";
-import { format } from "date-fns";
+import { format } from 'date-fns';
+import { useI18n } from 'vue-i18n';
 
 const props = defineProps<{
   value: number[];
@@ -34,6 +34,8 @@ function convertTimestampToDate(value) {
 </script>
 
 <style lang="scss" scoped>
+@use '@webitel/styleguide/typography' as *;
+
 .actual-reaction-time-filter-value-preview {
   &__title {
     @extend %typo-subtitle-1;

package/src/modules/Filters/v2/filters/components/filter-options/actual-resolution-time/actual-resolution-time-filter-value-preview.vue

@@ -2,25 +2,25 @@
   <div class="actual-resolution-time-filter-value-preview">
     <div v-if="props.value.from">
       <p class="actual-resolution-time-filter-value-preview__title">
-        {{t('reusable.from')}}
+        {{ t('reusable.from') }}
       </p>
 
-      <span>{{convertTimestampToDate(props.value.from)}}</span>
+      <span>{{ convertTimestampToDate(props.value.from) }}</span>
     </div>
 
     <div v-if="props.value.to">
       <p class="actual-resolution-time-filter-value-preview__title">
-        {{t('reusable.to')}}
+        {{ t('reusable.to') }}
       </p>
 
-      <span>{{convertTimestampToDate(props.value.to)}}</span>
+      <span>{{ convertTimestampToDate(props.value.to) }}</span>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import {useI18n} from "vue-i18n";
-import {format} from "date-fns";
+import { format } from 'date-fns';
+import { useI18n } from 'vue-i18n';
 
 const props = defineProps<{
   value: number[];
@@ -34,6 +34,8 @@ function convertTimestampToDate(value) {
 </script>
 
 <style lang="scss" scoped>
+@use '@webitel/styleguide/typography' as *;
+
 .actual-resolution-time-filter-value-preview {
   &__title {
     @extend %typo-subtitle-1;

package/src/modules/Filters/v2/filters/components/filter-options/gateway/gateway-filter-value-preview.vue

@@ -21,7 +21,7 @@ const props = defineProps<{
 const localValue = ref([]);
 
 const getLocalValue = async () => {
-  const { items } = await searchMethod({ids: props.value});
+  const { items } = await searchMethod({id: props.value});
   localValue.value = items;
 };
 

package/src/modules/Filters/v2/filters/components/filter-options/rating/rating-from-to-filter-value-preview.vue

@@ -2,24 +2,24 @@
   <div class="score-from-to-filter-value-preview">
     <div v-if="props.value.from">
       <p class="score-from-to-filter-value-preview__title">
-        {{t('reusable.from')}}
+        {{ t('reusable.from') }}
       </p>
 
-      <span>{{props.value.from}}</span>
+      <span>{{ props.value.from }}</span>
     </div>
 
     <div v-if="props.value.to">
       <p class="score-from-to-filter-value-preview__title">
-        {{t('reusable.to')}}
+        {{ t('reusable.to') }}
       </p>
 
-      <span>{{props.value.to}}</span>
+      <span>{{ props.value.to }}</span>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import {useI18n} from "vue-i18n";
+import { useI18n } from 'vue-i18n';
 
 const props = defineProps<{
   value: number[];
@@ -29,6 +29,8 @@ const { t } = useI18n();
 </script>
 
 <style lang="scss" scoped>
+@use '@webitel/styleguide/typography' as *;
+
 .score-from-to-filter-value-preview {
   &__title {
     @extend %typo-subtitle-1;

package/src/modules/Filters/v2/filters/components/filter-options/reaction-time/reaction-time-filter-value-preview.vue

@@ -2,25 +2,25 @@
   <div class="reaction-time-filter-value-preview">
     <div v-if="props.value.from">
       <p class="reaction-time-filter-value-preview__title">
-        {{t('reusable.from')}}
+        {{ t('reusable.from') }}
       </p>
 
-      <span>{{convertTimestampToDate(props.value.from)}}</span>
+      <span>{{ convertTimestampToDate(props.value.from) }}</span>
     </div>
 
     <div v-if="props.value.to">
       <p class="reaction-time-filter-value-preview__title">
-        {{t('reusable.to')}}
+        {{ t('reusable.to') }}
       </p>
 
-      <span>{{convertTimestampToDate(props.value.to)}}</span>
+      <span>{{ convertTimestampToDate(props.value.to) }}</span>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import {useI18n} from "vue-i18n";
-import { format } from "date-fns";
+import { format } from 'date-fns';
+import { useI18n } from 'vue-i18n';
 
 const props = defineProps<{
   value: number[];
@@ -34,6 +34,8 @@ function convertTimestampToDate(value) {
 </script>
 
 <style lang="scss" scoped>
+@use '@webitel/styleguide/typography' as *;
+
 .reaction-time-filter-value-preview {
   &__title {
     @extend %typo-subtitle-1;

package/src/modules/Filters/v2/filters/components/filter-options/resolution-time/resolution-time-filter-value-preview.vue

@@ -2,25 +2,25 @@
   <div class="resolution-time-filter-value-preview">
     <div v-if="props.value.from">
       <p class="resolution-time-filter-value-preview__title">
-        {{t('reusable.from')}}
+        {{ t('reusable.from') }}
       </p>
 
-      <span>{{convertTimestampToDate(props.value.from)}}</span>
+      <span>{{ convertTimestampToDate(props.value.from) }}</span>
     </div>
 
     <div v-if="props.value.to">
       <p class="resolution-time-filter-value-preview__title">
-        {{t('reusable.to')}}
+        {{ t('reusable.to') }}
       </p>
 
-      <span>{{convertTimestampToDate(props.value.to)}}</span>
+      <span>{{ convertTimestampToDate(props.value.to) }}</span>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import {useI18n} from "vue-i18n";
-import { format } from "date-fns";
+import { format } from 'date-fns';
+import { useI18n } from 'vue-i18n';
 
 const props = defineProps<{
   value: number[];
@@ -34,6 +34,8 @@ function convertTimestampToDate(value) {
 </script>
 
 <style lang="scss" scoped>
+@use '@webitel/styleguide/typography' as *;
+
 .resolution-time-filter-value-preview {
   &__title {
     @extend %typo-subtitle-1;

package/src/modules/Filters/v2/filters/components/filter-options/score/score-from-to-filter-value-preview.vue

@@ -2,24 +2,24 @@
   <div class="score-from-to-filter-value-preview">
     <div v-if="props.value.from">
       <p class="score-from-to-filter-value-preview__title">
-        {{t('reusable.from')}}
+        {{ t('reusable.from') }}
       </p>
 
-      <span>{{props.value.from}}</span>
+      <span>{{ props.value.from }}</span>
     </div>
 
     <div v-if="props.value.to">
       <p class="score-from-to-filter-value-preview__title">
-        {{t('reusable.to')}}
+        {{ t('reusable.to') }}
       </p>
 
-      <span>{{props.value.to}}</span>
+      <span>{{ props.value.to }}</span>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import {useI18n} from "vue-i18n";
+import { useI18n } from 'vue-i18n';
 
 const props = defineProps<{
   value: number[];
@@ -29,6 +29,8 @@ const { t } = useI18n();
 </script>
 
 <style lang="scss" scoped>
+@use '@webitel/styleguide/typography' as *;
+
 .score-from-to-filter-value-preview {
   &__title {
     @extend %typo-subtitle-1;

package/src/modules/Filters/v2/filters/components/filter-options/talk-duration/talk-duration-filter-value-preview.vue

@@ -2,7 +2,7 @@
   <div class="talk-duration-filter-value-preview">
     <div v-if="from">
       <p class="talk-duration-filter-value-preview__title">
-        {{t('reusable.from')}}
+        {{ t('reusable.from') }}
       </p>
 
       <span>{{ from }}</span>
@@ -10,7 +10,7 @@
 
     <div v-if="to">
       <p class="talk-duration-filter-value-preview__title">
-        {{t('reusable.to')}}
+        {{ t('reusable.to') }}
       </p>
 
       <span>{{ to }}</span>
@@ -19,10 +19,10 @@
 </template>
 
 <script lang="ts" setup>
-import {useI18n} from "vue-i18n";
+import { useI18n } from 'vue-i18n';
 
-import {useFromToSecToPreviewTime} from "../_shared/composables/useFromToSecToPreviewTime";
-import type {TalkDurationFilterModelValue} from "./TalkDurationFilter.d.ts";
+import { useFromToSecToPreviewTime } from '../_shared/composables/useFromToSecToPreviewTime';
+import type { TalkDurationFilterModelValue } from './TalkDurationFilter.d.ts';
 
 const props = defineProps<{
   value: TalkDurationFilterModelValue;
@@ -30,13 +30,12 @@ const props = defineProps<{
 
 const { t } = useI18n();
 
-const {
-  from,
-  to,
-} = useFromToSecToPreviewTime(props.value);
+const { from, to } = useFromToSecToPreviewTime(props.value);
 </script>
 
 <style lang="scss" scoped>
+@use '@webitel/styleguide/typography' as *;
+
 .duration-filter-value-preview {
   &__title {
     @extend %typo-subtitle-1;

package/src/modules/Filters/v2/filters/components/filter-options/total-duration/total-duration-filter-value-preview.vue

@@ -2,7 +2,7 @@
   <div class="total-duration-filter-value-preview">
     <div v-if="from">
       <p class="total-duration-filter-value-preview__title">
-        {{t('reusable.from')}}
+        {{ t('reusable.from') }}
       </p>
 
       <span>{{ from }}</span>
@@ -10,7 +10,7 @@
 
     <div v-if="to">
       <p class="total-duration-filter-value-preview__title">
-        {{t('reusable.to')}}
+        {{ t('reusable.to') }}
       </p>
 
       <span>{{ to }}</span>
@@ -19,10 +19,10 @@
 </template>
 
 <script lang="ts" setup>
-import {useI18n} from "vue-i18n";
+import { useI18n } from 'vue-i18n';
 
-import {useFromToSecToPreviewTime} from "../_shared/composables/useFromToSecToPreviewTime";
-import type {TalkDurationFilterModelValue} from "../talk-duration/TalkDurationFilter";
+import { useFromToSecToPreviewTime } from '../_shared/composables/useFromToSecToPreviewTime';
+import type { TalkDurationFilterModelValue } from '../talk-duration/TalkDurationFilter';
 
 const props = defineProps<{
   value: TalkDurationFilterModelValue;
@@ -30,13 +30,12 @@ const props = defineProps<{
 
 const { t } = useI18n();
 
-const {
-  from,
-  to,
-} = useFromToSecToPreviewTime(props.value);
+const { from, to } = useFromToSecToPreviewTime(props.value);
 </script>
 
 <style lang="scss" scoped>
+@use '@webitel/styleguide/typography' as *;
+
 .duration-filter-value-preview {
   &__title {
     @extend %typo-subtitle-1;

package/src/modules/Filters/v2/filters/components/filter-options/variable/variable-filter-value-preview.vue

@@ -1,22 +1,23 @@
 <template>
   <div class="variables-filter-value-preview">
-
     <div>
-      <p class="variables-filter-value-preview__title">{{t('vocabulary.keys')}}:</p>
-      <span>{{variable[0]}}</span>
+      <p class="variables-filter-value-preview__title">
+        {{ t('vocabulary.keys') }}:
+      </p>
+      <span>{{ variable[0] }}</span>
     </div>
 
     <div>
-      <p class="variables-filter-value-preview__title">{{t('vocabulary.values')}}:</p>
-      <span>{{variable[1]}}</span>
+      <p class="variables-filter-value-preview__title">
+        {{ t('vocabulary.values') }}:
+      </p>
+      <span>{{ variable[1] }}</span>
     </div>
-
-
   </div>
 </template>
 
 <script lang="ts" setup>
-import {useI18n} from "vue-i18n";
+import { useI18n } from 'vue-i18n';
 
 const props = defineProps<{
   value: string;
@@ -28,6 +29,8 @@ const variable = props.value.split('=');
 </script>
 
 <style lang="scss" scoped>
+@use '@webitel/styleguide/typography' as *;
+
 .variables-filter-value-preview {
   &__title {
     @extend %typo-subtitle-1;

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

@@ -1,7 +1,7 @@
 <template>
   <section class="dynamic-filter-preview-info">
     <header class="dynamic-filter-preview-info__header">
-      <slot name="header"/>
+      <slot name="header" />
     </header>
 
     <wt-divider />
@@ -9,14 +9,14 @@
     <div class="dynamic-filter-preview-info__body">
       <slot name="default" />
     </div>
-
   </section>
 </template>
 
-<script lang="ts" setup>
-</script>
+<script lang="ts" setup></script>
 
 <style lang="scss" scoped>
+@use '@webitel/styleguide/typography' as *;
+
 .dynamic-filter-preview-info {
   display: flex;
   flex-direction: column;

package/src/modules/ObjectPermissions/components/permissions-tab.vue

@@ -100,14 +100,15 @@
 import { computed, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStore } from 'vuex';
+
+import IconAction from '../../../enums/IconAction/IconAction.enum.js';
+import { useTableEmpty } from '../../../modules/TableComponentModule/composables/useTableEmpty.js';
 import { useTableStore } from '../../../store/new/index.js';
 import FilterPagination from '../../Filters/components/filter-pagination.vue';
 import { useTableFilters } from '../../Filters/composables/useTableFilters.js';
 import RoleColumn from '../_internals/components/permissions-role-row.vue';
 import RolePopup from '../_internals/components/permissions-tab-role-popup.vue';
 import { AccessMode } from '../_internals/enums/AccessMode.enum.js';
-import IconAction from '../../../enums/IconAction/IconAction.enum.js';
-import { useTableEmpty } from '../../../modules/TableComponentModule/composables/useTableEmpty.js';
 
 const props = defineProps({
   /**
@@ -205,4 +206,6 @@ const changeAccessMode = (payload) =>
   store.dispatch(`${tableNamespace}/CHANGE_ACCESS_MODE`, payload);
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+@use '../../../css/pages/table-page';
+</style>

package/src/modules/QueryFilters/components/filter-from-to.vue

@@ -110,7 +110,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use '../../../css/main.scss';
+@use '@webitel/styleguide/typography' as *;
 
 .filter-from-to {
   &:hover > .wt-label {