@webitel/ui-sdk 24.10.2 → 24.10.4

package/src/components/wt-indicator/__tests__/WtIndicator.spec.js

@@ -23,7 +23,8 @@ describe('WtIndicator', () => {
         color: 'primary',
       },
     });
-    expect(wrapper.find('.wt-indicator__indicator').classes())
-    .toContain('wt-indicator__indicator--primary');
+    expect(wrapper.find('.wt-indicator__indicator').classes()).toContain(
+      'wt-indicator__indicator--primary',
+    );
   });
 });

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

@@ -27,7 +27,16 @@ export default {
     color: {
       type: String,
       default: 'secondary',
-      options: ['primary', 'secondary', 'disabled', 'success', 'error', 'transfer', 'break-out', 'info'],
+      options: [
+        'primary',
+        'secondary',
+        'disabled',
+        'success',
+        'error',
+        'transfer',
+        'break-out',
+        'info',
+      ],
     },
     text: {
       type: [String, Number],

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

@@ -76,9 +76,9 @@ import { computed, onMounted, ref, toRefs, useSlots } from 'vue';
 import { useValidation } from '../../mixins/validationMixin/useValidation.js';
 
 /*
-* IMPORTANT: WT-INPUT SHOULD SUPPORT VUE 3 AND VUE 2 V-MODEL INTERFACES SO THAT THERE'S
-* TWO PROPS: VALUE AND MODELVALUE, AND 2 EVENTS: @UPDATE:MODELVALUE AND @INPUT
-* */
+ * IMPORTANT: WT-INPUT SHOULD SUPPORT VUE 3 AND VUE 2 V-MODEL INTERFACES SO THAT THERE'S
+ * TWO PROPS: VALUE AND MODELVALUE, AND 2 EVENTS: @UPDATE:MODELVALUE AND @INPUT
+ * */
 const props = defineProps({
   value: {
     type: [String, Number],
@@ -182,11 +182,7 @@ const slots = useSlots();
 // https://stackoverflow.com/questions/72408463/use-props-in-composables-vue3
 const { v, customValidators } = toRefs(props);
 
-const {
-  isValidation,
-  invalid,
-  validationText,
-} = useValidation({ v, customValidators });
+const { isValidation, invalid, validationText } = useValidation({ v, customValidators });
 
 // toggles password <-> text at showPassword
 const inputType = ref('');
@@ -256,8 +252,9 @@ function updateInputPaddings() {
   // cant test this thing cause vue test utils doesnt render elements width :/
   const afterWrapperWidth = AfterWrapper.value.offsetWidth;
   const inputEl = WtInput.value;
-  const defaultInputPadding = getComputedStyle(document.documentElement)
-  .getPropertyValue('--input-padding');
+  const defaultInputPadding = getComputedStyle(document.documentElement).getPropertyValue(
+    '--input-padding',
+  );
   if (afterWrapperWidth >= inputEl.offsetWidth) return; // fixes https://my.webitel.com/browse/WTEL-2635
   inputEl.style.paddingRight = `calc(${defaultInputPadding} * 2 + ${afterWrapperWidth}px)`;
 }

package/src/components/wt-item-link/wt-item-link.vue

@@ -60,10 +60,13 @@ const props = defineProps({
   },
 });
 
-const to = computed(() => props.link || {
-  name: `${props.routeName}-edit`,
-  params: { id: props.id },
-});
+const to = computed(
+  () =>
+    props.link || {
+      name: `${props.routeName}-edit`,
+      params: { id: props.id },
+    },
+);
 </script>
 
 <style lang="scss">

package/src/components/wt-navigation-bar/__tests__/WtNavigationBar.spec.js

@@ -7,9 +7,7 @@ const nav = [
   {
     value: '2',
     route: '/2',
-    subNav: [
-      { value: '3', route: '3' },
-    ],
+    subNav: [{ value: '3', route: '3' }],
   },
 ];
 
@@ -32,8 +30,7 @@ describe('WtNavigationBar', () => {
       props: { nav },
     });
     const navLinksLen = nav.filter((nav) => !nav.subNav).length;
-    expect(wrapper.findAll('.wt-navigation-bar__nav-item-link').length)
-    .toBe(navLinksLen);
+    expect(wrapper.findAll('.wt-navigation-bar__nav-item-link').length).toBe(navLinksLen);
   });
 
   it('renders navigation expansions with subNav inside it', async () => {
@@ -45,13 +42,8 @@ describe('WtNavigationBar', () => {
     });
     wrapper.find('.wt-navigation-bar__nav-expansion').trigger('click');
     await wrapper.vm.$nextTick();
-    const navExpansion = nav
-    .find((nav) => nav.subNav)
-      .subNav.length;
-    expect(wrapper
-    .findAll('.wt-navigation-bar__nav-item-link--subnav')
-      .length)
-    .toBe(navExpansion);
+    const navExpansion = nav.find((nav) => nav.subNav).subNav.length;
+    expect(wrapper.findAll('.wt-navigation-bar__nav-item-link--subnav').length).toBe(navExpansion);
   });
 
   it('correctly computes subNav nested routes', async () => {
@@ -63,8 +55,8 @@ describe('WtNavigationBar', () => {
     });
     await wrapper.find('.wt-navigation-bar__nav-expansion').trigger('click');
     await wrapper.vm.$nextTick();
-    expect(wrapper.findComponent('.wt-navigation-bar__nav-item-link--subnav')
-    .attributes('href'))
-    .toBe('/2/3');
+    expect(
+      wrapper.findComponent('.wt-navigation-bar__nav-item-link--subnav').attributes('href'),
+    ).toBe('/2/3');
   });
 });

package/src/components/wt-navigation-bar/wt-navigation-bar.vue

@@ -161,14 +161,14 @@ export default {
     currentNav() {
       const path = this.$route.fullPath;
       const currentNav = this.nav
-      .reduce((flatNav, currentNavItem) => {
-        if (currentNavItem.subNav) return flatNav.concat(currentNavItem.subNav);
-        return [...flatNav, currentNavItem];
-      }, [])
-      .find((navItem) => path.includes(navItem.route));
+        .reduce((flatNav, currentNavItem) => {
+          if (currentNavItem.subNav) return flatNav.concat(currentNavItem.subNav);
+          return [...flatNav, currentNavItem];
+        }, [])
+        .find((navItem) => path.includes(navItem.route));
       const currentExpansion = this.nav
-      .filter((nav) => nav.subNav)
-      .find((nav) => nav.subNav.indexOf(currentNav) !== -1);
+        .filter((nav) => nav.subNav)
+        .find((nav) => nav.subNav.indexOf(currentNav) !== -1);
       return {
         nav: currentNav?.value,
         expansion: currentExpansion?.value,

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

@@ -16,7 +16,6 @@
 </template>
 
 <script>
-
 export default {
   name: 'WtNotification',
   props: {
@@ -41,7 +40,7 @@ export default {
       }
     },
     notificationIconColor() {
-      return this.type || ''
+      return this.type || '';
     },
   },
 };

package/src/components/wt-notifications-bar/__tests__/WtNotificationsBar.spec.js

@@ -16,7 +16,8 @@ describe('WtNotificationsBar', () => {
       global: { provide: { $eventBus: eventBus } },
     });
     wrapper.vm.$eventBus.$emit('notification', {
-      type: 'error', text: 'error',
+      type: 'error',
+      text: 'error',
     });
     await wrapper.vm.$nextTick();
     expect(wrapper.findAllComponents(WtNotification).length).toBe(1);
@@ -27,7 +28,8 @@ describe('WtNotificationsBar', () => {
       global: { provide: { $eventBus: eventBus } },
     });
     wrapper.vm.$eventBus.$emit('notification', {
-      type: 'error', text: 'error',
+      type: 'error',
+      text: 'error',
     });
     await wrapper.vm.$nextTick();
     wrapper.findComponent(WtNotification).vm.$emit('close');
@@ -41,7 +43,8 @@ describe('WtNotificationsBar', () => {
       data: () => ({ notificationDuration: 100 }),
     });
     wrapper.vm.$eventBus.$emit('notification', {
-      type: 'error', text: 'error',
+      type: 'error',
+      text: 'error',
     });
     setTimeout(() => {
       expect(wrapper.findAllComponents(WtNotification).length).toBe(0);

package/src/components/wt-notifications-bar/wt-notifications-bar.vue

@@ -37,7 +37,10 @@ export default {
   methods: {
     showNotification(notification) {
       this.notifications.unshift(notification);
-        setTimeout(() => this.closeNotification(notification), (notification.timeout * 1000) || this.notificationDuration);
+      setTimeout(
+        () => this.closeNotification(notification),
+        notification.timeout * 1000 || this.notificationDuration,
+      );
     },
     closeNotification(notification) {
       const index = this.notifications.indexOf(notification);

package/src/components/wt-page-wrapper/__tests__/WtPageWrapper.spec.js

@@ -20,8 +20,7 @@ describe('WtPageWrapper', () => {
     const wrapper = shallowMount(WtPageWrapper, {
       slots: { 'actions-panel': content },
     });
-    expect(wrapper.find('.wt-page-wrapper__actions-panel').text())
-    .toBe(content);
+    expect(wrapper.find('.wt-page-wrapper__actions-panel').text()).toBe(content);
   });
 
   it('renders page wrapper main content via main slot', () => {

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

@@ -88,9 +88,7 @@ export default {
 
   methods: {
     inputHandler(value) {
-      const size = (value >= 0 && value <= 1000)
-        ? value
-        : this.defaultSize;
+      const size = value >= 0 && value <= 1000 ? value : this.defaultSize;
       this.$emit('input', size);
       this.changeSize(size);
     },

package/src/components/wt-player/scripts/__tests__/createPlyrURL.spec.js

@@ -4,28 +4,24 @@ describe('createPlyrURL', () => {
   it('baseURL equals to "/"', () => {
     const baseURL = '/';
     const iconURL = '/img/plyr.svg';
-    expect(createPlyrURL(baseURL))
-    .toBe(iconURL);
+    expect(createPlyrURL(baseURL)).toBe(iconURL);
   });
 
   it('baseURL starts with "/"', () => {
     const baseURL = '/workspace';
     const iconURL = '/workspace/img/plyr.svg';
-    expect(createPlyrURL(baseURL))
-    .toBe(iconURL);
+    expect(createPlyrURL(baseURL)).toBe(iconURL);
   });
 
   it('baseURL starts and ends with "/"', () => {
     const baseURL = '/workspace/';
     const iconURL = '/workspace/img/plyr.svg';
-    expect(createPlyrURL(baseURL))
-    .toBe(iconURL);
+    expect(createPlyrURL(baseURL)).toBe(iconURL);
   });
 
   it('Empty baseURL', () => {
     const baseURL = '';
     const iconURL = '/img/plyr.svg';
-    expect(createPlyrURL(baseURL))
-    .toBe(iconURL);
+    expect(createPlyrURL(baseURL)).toBe(iconURL);
   });
 });

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

@@ -113,13 +113,22 @@ export default {
       if (this.player) this.player.destroy();
 
       const defaultControls = [
-        'play-large', 'play', 'progress', 'current-time',
-        'duration', 'mute', 'volume', 'captions', 'settings',
-        'pip', 'airplay', 'fullscreen',
+        'play-large',
+        'play',
+        'progress',
+        'current-time',
+        'duration',
+        'mute',
+        'volume',
+        'captions',
+        'settings',
+        'pip',
+        'airplay',
+        'fullscreen',
       ];
 
       const controls = this.hideDuration
-        ? defaultControls.filter(control => control !== 'duration')
+        ? defaultControls.filter((control) => control !== 'duration')
         : defaultControls;
 
       if (this.download) controls.push('download');

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

@@ -81,7 +81,8 @@ export default {
             this.wrapperShown = value;
           }, 200); // 200 -> 0.2s css var(--transition); duration
         }
-      }, immediate: true,
+      },
+      immediate: true,
     },
   },
 };

package/src/components/wt-search-bar/wt-search-bar.vue

@@ -109,7 +109,7 @@ const props = defineProps({
   },
   searchModeOptions: {
     type: Array,
-    default: () => ([]),
+    default: () => [],
   },
 });
 

package/src/components/wt-select/mixins/multiselectMixin.js

@@ -1,7 +1,6 @@
 import VueMultiselect from 'vue-multiselect';
 import { ObserveVisibility } from 'vue-observe-visibility';
-import validationMixin
-  from '../../../mixins/validationMixin/validationMixin.js';
+import validationMixin from '../../../mixins/validationMixin/validationMixin.js';
 import debounce from '../../../scripts/debounce.js';
 import isEmpty from '../../../scripts/isEmpty.js';
 import labelUsageMixin from '../../wt-label/mixins/labelUsageMixin.js';
@@ -133,9 +132,7 @@ export default {
     async fetchOptions({ search, page } = this.searchParams) {
       if (!this.isApiMode) return;
       const { items, next } = await this.searchMethod({ search, page });
-      this.apiOptions = this.searchParams.page === 1
-        ? items
-        : this.apiOptions.concat(items);
+      this.apiOptions = this.searchParams.page === 1 ? items : this.apiOptions.concat(items);
       this.searchHasNext = next;
       this.isLoading = false;
     },

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

@@ -195,9 +195,13 @@ export default {
   }),
   computed: {
     // for taggableMixin
-    taggable() { return this.allowCustomValues; },
+    taggable() {
+      return this.allowCustomValues;
+    },
     // for taggableMixin
-    manualTagging() { return this.handleCustomValuesAdditionManually; },
+    manualTagging() {
+      return this.handleCustomValuesAdditionManually;
+    },
     optionsWithCustomValues() {
       // https://webitel.atlassian.net/browse/WTEL-3181
       if (!this.allowCustomValues) return this.selectOptions;
@@ -210,10 +214,11 @@ export default {
        but current filters logic restores value at filter component, but options value are pre-defined at store state
        */
 
-      const customValuesToOptions =
-        Array.isArray(this.value)
-          ? this.value
-          : (isEmpty(this.value) ? [] : [this.value]); //do not add empty values
+      const customValuesToOptions = Array.isArray(this.value)
+        ? this.value
+        : isEmpty(this.value)
+          ? []
+          : [this.value]; //do not add empty values
       const optionsWithoutValues = this.selectOptions.filter((opt) => {
         const optKey = this.trackBy ? opt[this.trackBy] : opt;
         return !customValuesToOptions.some((customValue) => {
@@ -221,14 +226,10 @@ export default {
           return customValueKey === optKey;
         });
       });
-      return [
-        ...customValuesToOptions,
-        ...optionsWithoutValues,
-      ];
+      return [...customValuesToOptions, ...optionsWithoutValues];
     },
   },
   methods: {
-
     // for taggableMixin functionality
     async handleCustomValue(value) {
       // https://webitel.atlassian.net/browse/WTEL-3181

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

@@ -79,11 +79,13 @@ export default {
   },
   emits: ['input'],
   computed: {
-    progressStyle() { // To achieve the correct color styling:
+    progressStyle() {
+      // To achieve the correct color styling:
       const progressPercent = ((this.value - this.min) / (this.max - this.min)) * 100;
       return `linear-gradient(to right, var(--wt-slider-background-completed-color) ${progressPercent}%, var(--wt-slider-background-color) 0%)`;
     },
-    verticalHeight() { // in order to have correct parent height after slider rotation
+    verticalHeight() {
+      // in order to have correct parent height after slider rotation
       return this.vertical ? `${this.height}px` : '100%';
     },
   },

package/src/components/wt-status-select/wt-status-select.vue

@@ -59,17 +59,21 @@ export default {
       return this.statusOptions.find((option) => option.value === this.status);
     },
     statusOptions() {
-      return this.options ? this.options
+      return this.options
+        ? this.options
         : StatusOptions.map((opt) => ({
-          ...opt,
-          text: this.$t(opt.locale),
-        }));
+            ...opt,
+            text: this.$t(opt.locale),
+          }));
     },
     availableOptions() {
       return this.statusOptions.reduce((options, opt) => {
         // PAUSE option is always passed
-        if ((this.status === opt.value && opt.value !== AgentStatus.PAUSE)
-          || opt.value === AgentStatus.BREAK_OUT) { // skip breakout option
+        if (
+          (this.status === opt.value && opt.value !== AgentStatus.PAUSE) ||
+          opt.value === AgentStatus.BREAK_OUT
+        ) {
+          // skip breakout option
           return options;
         }
         return [...options, opt];

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

@@ -47,10 +47,12 @@ const props = defineProps({
 
 const description = computed(() => props.steps[props.activeStep - 1].description);
 
-const stepWithCompleted = computed(() => props.steps.map((item, idx) => ({
-  ...item,
-  completed: props.activeStep > idx,
-})));
+const stepWithCompleted = computed(() =>
+  props.steps.map((item, idx) => ({
+    ...item,
+    completed: props.activeStep > idx,
+  })),
+);
 </script>
 
 <style lang="scss">

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

@@ -66,9 +66,7 @@ export default {
       description: 'Object with props, passed down to wt-label as props',
     },
   },
-  emits: [
-    'change',
-  ],
+  emits: ['change'],
   methods: {
     inputHandler() {
       this.$emit('change', !this.value);

package/src/components/wt-table/__tests__/WtTable.spec.js

@@ -69,8 +69,7 @@ describe('WtTable', () => {
         gridActions: false,
       },
     });
-    expect(wrapper.findAll('.wt-table__tr__head th').length)
-    .toBe(headers.length);
+    expect(wrapper.findAll('.wt-table__tr__head th').length).toBe(headers.length);
   });
 
   it('do not renders table footer by default', () => {
@@ -117,9 +116,7 @@ describe('WtTable', () => {
         sortable: true,
       },
     });
-    expect(wrapper
-    .find('.wt-table__th--sortable .wt-table__th__sort-arrow')
-    .exists()).toBe(true);
+    expect(wrapper.find('.wt-table__th--sortable .wt-table__th__sort-arrow').exists()).toBe(true);
   });
 
   it('selects all rows at header checkbox click', async () => {

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

@@ -156,10 +156,7 @@ export default {
       default: true,
     },
   },
-  emits: [
-    'sort',
-    'update:selected',
-  ],
+  emits: ['sort', 'update:selected'],
 
   data: () => ({}),
 
@@ -175,16 +172,19 @@ export default {
 
     dataHeaders() {
       return this.headers
-      .filter((header) => header.show === undefined || header.show)
-      .map((header) => {
-        if (!header.text && header.locale) {
-          return {
-            ...header,
-            text: typeof header.locale === 'string' ? this.$t(header.locale) : this.$t(...header.locale),
-          };
-        }
-        return header;
-      });
+        .filter((header) => header.show === undefined || header.show)
+        .map((header) => {
+          if (!header.text && header.locale) {
+            return {
+              ...header,
+              text:
+                typeof header.locale === 'string'
+                  ? this.$t(header.locale)
+                  : this.$t(...header.locale),
+            };
+          }
+          return header;
+        });
     },
 
     columnsStyle() {
@@ -248,7 +248,10 @@ export default {
         if (select) {
           this.$emit('update:selected', [...this._selected, row]);
         } else {
-          this.$emit('update:selected', this._selected.filter((item) => item !== row));
+          this.$emit(
+            'update:selected',
+            this._selected.filter((item) => item !== row),
+          );
         }
       } else {
         // for backwards compatibility
@@ -256,7 +259,6 @@ export default {
       }
     },
   },
-
 };
 </script>
 

package/src/components/wt-table-column-select/wt-table-column-select.vue

@@ -74,7 +74,8 @@ export default {
     headers: {
       type: Array,
       required: true,
-      description: 'Each header should have following schema: { value: String, show: Boolean, text: String }',
+      description:
+        'Each header should have following schema: { value: String, show: Boolean, text: String }',
     },
     staticHeaders: {
       type: Array,
@@ -82,19 +83,19 @@ export default {
       description: 'Header values to exclude from selection',
     },
   },
-  emits: [
-    'change',
-  ],
+  emits: ['change'],
   data: () => ({
     draft: [], // headers draft
     isColumnSelectPopup: false,
   }),
   computed: {
     changeableDraft() {
-      return this.draft.filter((header) => !this.staticHeaders.includes(header.value)).sort((a, b) => {
-        return this.shownColLabel(a).localeCompare(this.shownColLabel(b));
-        // sorting headers for alphabet just in popup
-      });
+      return this.draft
+        .filter((header) => !this.staticHeaders.includes(header.value))
+        .sort((a, b) => {
+          return this.shownColLabel(a).localeCompare(this.shownColLabel(b));
+          // sorting headers for alphabet just in popup
+        });
     },
   },
 

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

@@ -58,9 +58,7 @@ export default {
       default: false,
     },
   },
-  emits: [
-    'change',
-  ],
+  emits: ['change'],
   data: () => ({
     activeLineWidth: 0,
     activeLineOffset: 0,

package/src/components/wt-tags-input/mixin/taggableMixin.js

@@ -6,17 +6,18 @@ export default {
     tag(searchQuery, id) {
       this.emitTagEvent(searchQuery, id);
 
-      const tag = this.trackBy ? {
-        [this.optionLabel || 'name']: searchQuery,
-        [this.trackBy]: id || searchQuery,
-      } : searchQuery;
+      const tag = this.trackBy
+        ? {
+            [this.optionLabel || 'name']: searchQuery,
+            [this.trackBy]: id || searchQuery,
+          }
+        : searchQuery;
 
       const isTagExist = (newTag) => {
         if (typeof newTag === 'string') {
           return this.options.some((elem) => elem === newTag);
         }
-        return this.options.some((elem) => elem[this.trackBy] ===
-          newTag[this.trackBy]);
+        return this.options.some((elem) => elem[this.trackBy] === newTag[this.trackBy]);
       };
 
       if (isTagExist(tag)) return;
@@ -33,4 +34,3 @@ export default {
     },
   },
 };
-

package/src/components/wt-textarea/__tests__/WtTextarea.spec.js

@@ -30,8 +30,7 @@ describe('WtTextarea', () => {
       },
       props: { chatMode: true },
     });
-    wrapper.find('.wt-textarea__textarea')
-    .trigger('keypress', { key: 'Enter' });
+    wrapper.find('.wt-textarea__textarea').trigger('keypress', { key: 'Enter' });
     expect(wrapper.emitted().enter).toBeTruthy();
   });
 
@@ -41,8 +40,7 @@ describe('WtTextarea', () => {
         WtLabel,
       },
     });
-    wrapper.find('.wt-textarea__textarea')
-    .trigger('keypress', { key: 'Enter' });
+    wrapper.find('.wt-textarea__textarea').trigger('keypress', { key: 'Enter' });
     expect(wrapper.emitted().enter).toBeFalsy();
   });
 });