@webitel/ui-sdk 24.10.3 → 24.10.5

package/src/components/wt-app-header/wt-app-navigator.vue

@@ -130,19 +130,25 @@ const order = [
   WebitelApplications.ANALYTICS,
 ];
 
-const formattedApps = computed(() => props.apps.reduce((apps, app) => ([
-  ...apps,
-  {
-    ...app,
-    img: props.darkMode ? pics[app.name].dark : pics[app.name].light,
-    currentApp: props.currentApp === app.name,
-  },
-]), []).sort((a, b) => order.indexOf(a.name) - order.indexOf(b.name)));
+const formattedApps = computed(() =>
+  props.apps
+    .reduce(
+      (apps, app) => [
+        ...apps,
+        {
+          ...app,
+          img: props.darkMode ? pics[app.name].dark : pics[app.name].light,
+          currentApp: props.currentApp === app.name,
+        },
+      ],
+      [],
+    )
+    .sort((a, b) => order.indexOf(a.name) - order.indexOf(b.name)),
+);
 
 function close() {
   isOpened.value = false;
 }
-
 </script>
 
 <style lang="scss" scoped>

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

@@ -57,7 +57,10 @@ const isLetterAvatar = computed(() => !props.src && props.username);
 
 const avatarLetters = computed(() => {
   if (!props.username) return false;
-  const abbreviation = props.username.split(' ').map((word) => word.at(0).toUpperCase()).join('');
+  const abbreviation = props.username
+    .split(' ')
+    .map((word) => word.at(0).toUpperCase())
+    .join('');
   return abbreviation.length > 2 ? abbreviation.at(0).concat(abbreviation.at(-1)) : abbreviation;
 });
 
@@ -78,8 +81,10 @@ const avatarLettersBackground = computed(() => {
     { letters: 'WX'.concat(''), color: '--wt-avatar-letters-p12-color' },
     { letters: 'YZ'.concat(''), color: '--wt-avatar-letters-p13-color' },
   ];
-  const searchedLetter = letterList.find(({ letters }) => letters.includes(avatarLetters.value.at(0).toUpperCase()));
-  return (searchedLetter && searchedLetter.color) || '--wt-avatar-letters-p1-color';
+  const searchedLetter = letterList.find(({ letters }) =>
+    letters.includes(avatarLetters.value.at(0).toUpperCase()),
+  );
+  return searchedLetter?.color || '--wt-avatar-letters-p1-color';
 });
 
 const imgSrc = computed(() => props.src || defaultAvatar);

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

@@ -110,7 +110,6 @@ export default {
         }
       },
     },
-
   },
 };
 </script>

package/src/components/wt-button-select/__tests__/WtButtonSelect.spec.js

@@ -30,13 +30,12 @@ describe('WtSelectButton', () => {
         options: [],
       },
     });
-    const arrowBtn = wrapper.findAllComponents({ name: 'wt-button' })
-    .find((component) => component.classes()
-    .includes('wt-button-select__select-btn'));
+    const arrowBtn = wrapper
+      .findAllComponents({ name: 'wt-button' })
+      .find((component) => component.classes().includes('wt-button-select__select-btn'));
     arrowBtn.vm.$emit('click');
     await wrapper.vm.$nextTick();
     const wtIcon = wrapper.find('.wt-button-select__select-arrow');
-    expect(wtIcon.classes())
-    .toContain('wt-button-select__select-arrow--active');
+    expect(wtIcon.classes()).toContain('wt-button-select__select-arrow--active');
   });
 });

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

@@ -92,7 +92,6 @@ function selectOption({ option, index }) {
 function atClickaway() {
   isOpened.value = false;
 }
-
 </script>
 
 <style lang="scss">

package/src/components/wt-context-menu/wt-context-menu.vue

@@ -43,43 +43,40 @@
 </template>
 
 <script setup>
-  const props = defineProps({
-    options: {
-      type: Array,
-      required: true,
-      description: '[{ text, disabled, ... anything you need }]',
-    },
-    visible: {
-      type: Boolean,
-      default: false,
-    },
-    width: {
-      type: [String],
-      default: 'auto',
-    },
-    minWidth: {
-      type: [String],
-      default: '160px',
-    },
-    maxWidth: {
-      type: [String],
-      default: '300px',
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  });
+const props = defineProps({
+  options: {
+    type: Array,
+    required: true,
+    description: '[{ text, disabled, ... anything you need }]',
+  },
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  width: {
+    type: [String],
+    default: 'auto',
+  },
+  minWidth: {
+    type: [String],
+    default: '160px',
+  },
+  maxWidth: {
+    type: [String],
+    default: '300px',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
 
-  const emit = defineEmits([
-    'click',
-    'update:visible'
-  ]);
+const emit = defineEmits(['click', 'update:visible']);
 
-  function handleOptionClick({ option, index, hide }) {
-    emit('click', { option, index });
-    hide();
-  }
+function handleOptionClick({ option, index, hide }) {
+  emit('click', { option, index });
+  hide();
+}
 </script>
 
 <style lang="scss">

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

@@ -56,12 +56,9 @@ const props = defineProps({
   },
 });
 
-const emits = defineEmits([
-  'create',
-]);
-
-const dummy = computed(() => props.darkMode ? dummyDark : dummyLight);
+const emits = defineEmits(['create']);
 
+const dummy = computed(() => (props.darkMode ? dummyDark : dummyLight));
 </script>
 
 <style lang="scss">

package/src/components/wt-expansion-panel/wt-expansion-panel.vue

@@ -70,13 +70,16 @@ function toggle() {
   return opened.value ? close() : open();
 }
 
-watch(() => props.collapsed, (newVal) => {
-  if (newVal) {
-    close();
-  } else {
-    open();
-  }
-});
+watch(
+  () => props.collapsed,
+  (newVal) => {
+    if (newVal) {
+      close();
+    } else {
+      open();
+    }
+  },
+);
 </script>
 
 <style lang="scss">

package/src/components/wt-filters-panel-wrapper/__tests__/WtFiltersPanelWrapper.spec.js

@@ -8,19 +8,15 @@ describe('Filters Panel Wrapper', () => {
   });
   it('emits "reset" event at wt-table-actions "filterReset" event', () => {
     const wrapper = shallowMount(FiltersPanelWrapper);
-    wrapper.findComponent({ name: 'wt-table-actions' })
-    .vm.$emit('input', 'filterReset');
+    wrapper.findComponent({ name: 'wt-table-actions' }).vm.$emit('input', 'filterReset');
     expect(wrapper.emitted().reset).toBeTruthy();
   });
   it(`toggles "filters-panel-wrapper--opened" class at
    wt-table-actions "settings" event`, async () => {
     const wrapper = shallowMount(FiltersPanelWrapper);
-    expect(wrapper.classes().includes('filters-panel-wrapper--opened'))
-    .toBe(false);
-    wrapper.findComponent({ name: 'wt-table-actions' })
-    .vm.$emit('input', 'settings');
+    expect(wrapper.classes().includes('filters-panel-wrapper--opened')).toBe(false);
+    wrapper.findComponent({ name: 'wt-table-actions' }).vm.$emit('input', 'settings');
     await wrapper.vm.$nextTick();
-    expect(wrapper.classes().includes('filters-panel-wrapper--opened'))
-    .toBe(true);
+    expect(wrapper.classes().includes('filters-panel-wrapper--opened')).toBe(true);
   });
 });

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

@@ -14,7 +14,6 @@
 </template>
 
 <script setup>
-
 import { computed } from 'vue';
 
 const props = defineProps({

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