@webitel/ui-sdk 24.6.17 → 24.6.18

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

@@ -17,9 +17,9 @@
         <header class="wt-navigation-bar__nav-header">
           <!--        vue cli build target lib cant handle dynamic require :( -->
           <img
-            class="wt-navigation-bar__app-pic"
-            :src="darkMode ? appLogo[currentApp].dark : appLogo[currentApp].light"
             :alt="currentApp"
+            :src="darkMode ? appLogo[currentApp].dark : appLogo[currentApp].light"
+            class="wt-navigation-bar__app-pic"
           >
           <wt-icon-btn
             class="wt-navigation-bar__nav-close"
@@ -92,20 +92,20 @@
 </template>
 
 <script>
+import WebitelApplications from '../../enums/WebitelApplications/WebitelApplications.enum.js';
 import ExpandTransition from '../transitions/wt-expand-transition.vue';
-import WebitelApplications from '../../enums/WebitelApplications/WebitelApplications.enum';
 import AdminDark from './assets/dark/app-logo-dark-admin.svg';
-import AdminLight from './assets/light/app-logo-light-admin.svg';
-import WorkspaceDark from './assets/dark/app-logo-dark-workspace.svg';
-import WorkspaceLight from './assets/light/app-logo-light-workspace.svg';
 import AuditDark from './assets/dark/app-logo-dark-audit.svg';
-import AuditLight from './assets/light/app-logo-light-audit.svg';
+import CrmDark from './assets/dark/app-logo-dark-crm.svg';
 import HistoryDark from './assets/dark/app-logo-dark-history.svg';
-import HistoryLight from './assets/light/app-logo-light-history.svg';
 import SupervisorDark from './assets/dark/app-logo-dark-supervisor.svg';
-import SupervisorLight from './assets/light/app-logo-light-supervisor.svg';
-import CrmDark from './assets/dark/app-logo-dark-crm.svg';
+import WorkspaceDark from './assets/dark/app-logo-dark-workspace.svg';
+import AdminLight from './assets/light/app-logo-light-admin.svg';
+import AuditLight from './assets/light/app-logo-light-audit.svg';
 import CrmLight from './assets/light/app-logo-light-crm.svg';
+import HistoryLight from './assets/light/app-logo-light-history.svg';
+import SupervisorLight from './assets/light/app-logo-light-supervisor.svg';
+import WorkspaceLight from './assets/light/app-logo-light-workspace.svg';
 
 const appLogo = {
   [WebitelApplications.SUPERVISOR]: {
@@ -148,7 +148,8 @@ export default {
     },
     darkMode: {
       type: Boolean,
-      default: false,}
+      default: false,
+    },
   },
   data: () => ({
     isOpened: false,
@@ -264,8 +265,8 @@ export default {
   justify-content: space-between;
   width: 100%;
   padding: var(--wt-navigation-bar-link-padding);
-  outline: none;
   color: var(--wt-navigation-bar-option-text-color);
+  outline: none;
 
   &:before {
     position: absolute;

package/src/components/wt-notification/__tests__/WtNotification.spec.js

@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
-import WtNotification from '../wt-notification.vue';
 import WtIcon from '../../wt-icon/wt-icon.vue';
+import WtNotification from '../wt-notification.vue';
 
 describe('WtNotification', () => {
   it('renders a component', () => {

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

@@ -4,9 +4,9 @@
     @click="$emit('close')"
   >
     <wt-icon
-      class="wt-notification__icon"
-      :icon="notificationIcon"
       :color="notificationIconColor"
+      :icon="notificationIcon"
+      class="wt-notification__icon"
     />
 
     <p class="wt-notification__text">
@@ -66,11 +66,11 @@ export default {
   min-width: var(--wt-notification-min-width);
   max-width: var(--wt-notification-max-width);
   padding: var(--wt-notification-padding);
+  cursor: pointer;
   color: var(--wt-notification-text-color);
-  background: var(--wt-notification-bg-color);
   border-radius: var(--border-radius);
+  background: var(--wt-notification-bg-color);
   box-shadow: var(--elevation-1);
-  cursor: pointer;
 }
 
 .wt-notification__icon {
@@ -79,8 +79,8 @@ export default {
 }
 
 .wt-notification__text {
-  flex-grow: 1;
   align-self: center;
+  flex-grow: 1;
   margin: 0;
 }
 </style>

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

@@ -1,7 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
-import WtNotificationsBar from '../wt-notifications-bar.vue';
+import eventBus from '../../../scripts/eventBus.js';
 import WtNotification from '../../wt-notification/wt-notification.vue';
-import eventBus from '../../../scripts/eventBus';
+import WtNotificationsBar from '../wt-notifications-bar.vue';
 
 describe('WtNotificationsBar', () => {
   it('renders a component', () => {

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

@@ -57,12 +57,12 @@ export default {
   @extend %wt-scrollbar;
 
   position: fixed;
+  z-index: var(--notifications-bar-z-index);
   top: var(--notifications-bar-corner-margin);
   right: var(--notifications-bar-corner-margin);
-  max-height: var(--notifications-bar-max-height);
-  overflow-y: auto;
   overflow-x: hidden;
-  z-index: var(--notifications-bar-z-index);
+  overflow-y: auto;
+  max-height: var(--notifications-bar-max-height);
 
   .wt-notification {
     margin: var(--notifications-bar-notifications-margin);
@@ -76,7 +76,7 @@ export default {
 
 .wt-notifications-transition-enter,
 .wt-notifications-transition-leave-to {
-  opacity: 0;
   transform: translateX(60px);
+  opacity: 0;
 }
 </style>

package/src/components/wt-page-header/wt-page-header.vue

@@ -21,8 +21,8 @@
       </slot>
       <wt-button
         v-if="!hideSecondary && !emptySecondary"
-        color="secondary"
         :disabled="secondaryDisabled"
+        color="secondary"
         @click="secondaryAction"
       >
         {{ secondaryText || $t('reusable.close') }}

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

@@ -20,7 +20,8 @@ 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-page-wrapper/wt-page-wrapper.vue

@@ -37,11 +37,11 @@ export default {
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
-  min-height: 100%;
   max-width: 100%;
+  min-height: 100%;
   padding: var(--page-wrapper-padding);
-  gap: var(--page-wrapper-section-gap);
   background: var(--wt-page-wrapper-background-color);
+  gap: var(--page-wrapper-section-gap);
 }
 
 .wt-page-wrapper__header,

package/src/components/wt-pagination/__tests__/WtPagination.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount, mount } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
 import WtPagination from '../wt-pagination.vue';
 
 describe('WtPagination', () => {

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

@@ -41,7 +41,7 @@
 </template>
 
 <script>
-import debounce from '../../scripts/debounce';
+import debounce from '../../scripts/debounce.js';
 
 export default {
   name: 'WtPagination',

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

@@ -1,4 +1,4 @@
-import createPlyrURL from '../createPlyrURL';
+import createPlyrURL from '../createPlyrURL.js';
 
 describe('createPlyrURL', () => {
   it('baseURL equals to "/"', () => {

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

@@ -1,11 +1,14 @@
 function createPlyrURL(baseURL) {
   // Check if baseURL is exactly "/" and adjust it to an empty string
-  let normalizedBaseURL = baseURL === "/" ? "" : baseURL;
+  let normalizedBaseURL = baseURL === '/' ? '' : baseURL;
 
   // Ensure there is no trailing slash in normalizedBaseURL to prevent double slashes
-  normalizedBaseURL = normalizedBaseURL.endsWith('/') ? normalizedBaseURL.slice(0, -1) : normalizedBaseURL;
+  normalizedBaseURL = normalizedBaseURL.endsWith('/')
+    ? normalizedBaseURL.slice(0, -1)
+    : normalizedBaseURL;
 
   // Construct iconUrl
   return `${normalizedBaseURL}/img/plyr.svg`;
 }
+
 export default createPlyrURL;

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

@@ -1,14 +1,14 @@
 <template>
   <aside
-    class="wt-player"
     :class="[`wt-player--position-${position}`]"
+    class="wt-player"
   >
     <component
       :is="playerType"
       ref="player"
-      class="wt-player__player"
-      :src="src"
       :autoplay="autoplay"
+      :src="src"
+      class="wt-player__player"
       controls
       v-on="listeners"
     />
@@ -27,7 +27,7 @@
 <script>
 import Plyr from 'plyr';
 import 'plyr/src/sass/plyr.scss';
-import createPlyrURL from './scripts/createPlyrURL';
+import createPlyrURL from './scripts/createPlyrURL.js';
 
 export default {
   name: 'WtPlayer',
@@ -190,8 +190,8 @@ export default {
       padding: var(--plyr-controls-icon-padding);
 
       svg {
-        height: var(--plyr-controls-icon-size);
         width: var(--plyr-controls-icon-size);
+        height: var(--plyr-controls-icon-size);
       }
     }
 
@@ -208,11 +208,11 @@ export default {
       cursor: pointer;
 
       &::-webkit-slider-thumb {
+        transition: var(--transition);
         border: var(--wt-slider-border);
         border-radius: var(--wt-slider-pointer-radius);
         background: var(--wt-slider-pointer-background-color);
         -webkit-appearance: none;
-        transition: var(--transition);
       }
 
       &::-webkit-slider-runnable-track {
@@ -222,12 +222,12 @@ export default {
       &::-moz-range-thumb {
         width: var(--wt-slider-pointer-size);
         height: var(--wt-slider-pointer-size);
+        transition: var(--transition);
         border: var(--wt-slider-border);
-        border-radius: var(--wt-slider-pointer-radius);
         border-color: var(--wt-slider-pointer-border-color);
+        border-radius: var(--wt-slider-pointer-radius);
         background: var(--wt-slider-pointer-background-color);
         -moz-appearance: none;
-        transition: var(--transition);
       }
 
       &::-moz-range-track {

package/src/components/wt-popup/__tests__/WtPopup.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount, mount } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
 import WtPopup from '../wt-popup.vue';
 
 describe('WtPopup', () => {

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

@@ -111,16 +111,19 @@ export default {
         width: var(--wt-popup-size-xs);
       }
     }
+
     &-sm {
       .wt-popup__popup {
         width: var(--wt-popup-size-sm);
       }
     }
+
     &-md {
       .wt-popup__popup {
         width: var(--wt-popup-size-md);
       }
     }
+
     &-lg {
       .wt-popup__popup {
         width: var(--wt-popup-size-lg);

package/src/components/wt-progress-bar/__tests__/WtProgressBar.spec.js

@@ -7,11 +7,21 @@ describe('WtProgressBar', () => {
     expect(wrapper.exists()).toBe(true);
   });
   it('isOverflow correctly computes overflow=true', () => {
-    const wrapper = shallowMount(WtProgressBar, { props: { value: 2, max: 1 } });
+    const wrapper = shallowMount(WtProgressBar, {
+      props: {
+        value: 2,
+        max: 1,
+      },
+    });
     expect(wrapper.vm.isOverflow).toBe(true);
   });
   it('isOverflow correctly computes overflow=false', () => {
-    const wrapper = shallowMount(WtProgressBar, { props: { value: 0.99, max: 1 } });
+    const wrapper = shallowMount(WtProgressBar, {
+      props: {
+        value: 0.99,
+        max: 1,
+      },
+    });
     expect(wrapper.vm.isOverflow).toBe(false);
   });
 });

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

@@ -1,15 +1,15 @@
 <template>
   <div
-    class="wt-progress-bar"
     :class="[{
                'wt-progress-bar--overflow': isOverflow,
              },
              `wt-progress-bar--${color}`
     ]"
+    class="wt-progress-bar"
   >
     <span
-      class="wt-progress-bar__progress"
       :style="`width: ${progressWidth}%;`"
+      class="wt-progress-bar__progress"
     />
   </div>
 </template>
@@ -53,23 +53,23 @@ export default {
 <style lang="scss" scoped>
 
 .wt-progress-bar {
+  position: relative;
   box-sizing: border-box;
   width: 100%;
-  position: relative;
   padding: var(--wt-progress-bar-padding);
   line-height: 0;
-  background: var(--wt-progress-bar-background-color);
   border-radius: var(--border-radius);
+  background: var(--wt-progress-bar-background-color);
   box-shadow: var(--elevation-1);
 }
 
 .wt-progress-bar__progress {
   display: inline-block;
   height: var(--wt-progress-bar-height);
-  will-change: width;
-  background: var(--wt-progress-bar-background-primary-color);
-  border-radius: var(--wt-progress-bar-border-radius) 0 0 var(--wt-progress-bar-border-radius);
   transition: var(--transition);
+  border-radius: var(--wt-progress-bar-border-radius) 0 0 var(--wt-progress-bar-border-radius);
+  background: var(--wt-progress-bar-background-primary-color);
+  will-change: width;
 }
 
 .wt-progress-bar--primary .wt-progress-bar__progress {

package/src/components/wt-radio/__tests__/WtRadio.spec.js

@@ -1,7 +1,7 @@
 import { mount, shallowMount } from '@vue/test-utils';
-import WtRadio from '../wt-radio.vue';
-import WtLabel from '../../wt-label/wt-label.vue';
 import WtIcon from '../../wt-icon/wt-icon.vue';
+import WtLabel from '../../wt-label/wt-label.vue';
+import WtRadio from '../wt-radio.vue';
 
 describe('WtRadio', () => {
   it('renders a component', () => {

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

@@ -1,29 +1,29 @@
 <template>
   <div
-    class="wt-radio"
     :class="{
       'wt-radio--active': isChecked,
       'wt-radio--outline': outline,
       'wt-radio--disabled': disabled,
     }"
+    class="wt-radio"
   >
     <wt-label class="wt-radio__wrapper">
       <input
-        class="wt-radio__input"
-        type="radio"
-        :value="value"
         :checked="isChecked"
         :disabled="disabled"
+        :value="value"
+        class="wt-radio__input"
+        type="radio"
         @input="inputHandler"
       >
       <wt-icon
-        class="wt-radio__icon"
         :icon="radioIcon"
+        class="wt-radio__icon"
       />
       <!-- @slot Custom input label -->
       <slot
-        v-bind="{ label, isChecked, disabled }"
         name="label"
+        v-bind="{ label, isChecked, disabled }"
       >
         <div
           v-if="label"
@@ -108,8 +108,8 @@ export default {
   position: relative;
   display: flex;
   align-items: center;
-  user-select: none;
   cursor: pointer;
+  user-select: none;
 }
 
 .wt-radio__label {
@@ -122,8 +122,8 @@ export default {
   position: absolute;
   width: 0;
   height: 0;
-  opacity: 0;
   pointer-events: none;
+  opacity: 0;
 }
 
 .wt-radio__icon {

package/src/components/wt-rounded-action/wt-rounded-action.vue

@@ -7,14 +7,14 @@
       { 'wt-rounded-action--rounded': rounded },
       { 'wt-rounded-action--wide': wide },
     ]"
-    type="button"
     class="wt-rounded-action"
+    type="button"
     @click="emit('click', $event)"
   >
     <wt-loader
       v-if="loading"
-      size="sm"
       color="main"
+      size="sm"
     />
     <wt-icon
       v-else
@@ -77,8 +77,10 @@ const emit = defineEmits(['click']);
 const iColor = computed(() => {
   if (props.disabled) return 'disabled';
   switch (props.color) {
-    case 'secondary': return 'default';
-    default: return props.color;
+    case 'secondary':
+      return 'default';
+    default:
+      return props.color;
   }
 });
 </script>
@@ -91,17 +93,17 @@ const iColor = computed(() => {
 .wt-rounded-action {
   display: block;
   width: fit-content;
-  line-height: 0;
   padding: var(--rounded-action-padding);
+  transition: var(--transition);
+  line-height: 0;
   border: var(--rounded-action-border-size) solid;
-  background: var(--rounded-action-bg-color);
   border-color: var(--rounded-action-bg-color);
   border-radius: var(--border-radius);
-  transition: var(--transition);
+  background: var(--rounded-action-bg-color);
 
   &:hover {
-    background: var(--rounded-action-bg-hover-color);
     border-color: var(--rounded-action-bg-hover-color);
+    background: var(--rounded-action-bg-hover-color);
   }
 
   &--wide {

package/src/components/wt-search-bar/__tests__/WtSearchBar.spec.js

@@ -1,7 +1,7 @@
-import { ref } from 'vue';
 import { shallowMount } from '@vue/test-utils';
+import { ref } from 'vue';
+import { useValidation } from '../../../mixins/validationMixin/useValidation.js';
 import WtSearchBar from '../wt-search-bar.vue';
-import { useValidation } from '../../../mixins/validationMixin/useValidation';
 
 vi.mock('../../../mixins/validationMixin/useValidation');
 useValidation.mockImplementation(() => ({

package/src/components/wt-search-bar/_variables.scss

@@ -1,8 +1,4 @@
 
 :root {
-  --search-bar-padding:
-    var(--input-padding)
-    calc(var(--input-padding) + var(--icon-sm-size) + var(--spacing-xs))
-    var(--input-padding)
-    calc(var(--input-padding) + var(--icon-md-size) + var(--spacing-xs));
-}
+  --search-bar-padding: var(--input-padding) calc(var(--input-padding) + var(--icon-sm-size) + var(--spacing-xs)) var(--input-padding) calc(var(--input-padding) + var(--icon-md-size) + var(--spacing-xs));
+}

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

@@ -76,8 +76,8 @@
 
 <script setup>
 import { computed, toRefs } from 'vue';
-import { useValidation } from '../../mixins/validationMixin/useValidation';
-import debounce from '../../scripts/debounce';
+import { useValidation } from '../../mixins/validationMixin/useValidation.js';
+import debounce from '../../scripts/debounce.js';
 
 const props = defineProps({
   v: {
@@ -198,9 +198,9 @@ function handleKeyup(event) {
     padding: 0;
     transition: var(--transition);
     color: var(--wt-text-field-text-color);
-    background: transparent;
     border: none;
     outline: none;
+    background: transparent;
   }
 
   /* clears the 'X' from Internet Explorer */

package/src/components/wt-select/__tests__/WtSelect.spec.js

@@ -1,6 +1,6 @@
 import { mount, shallowMount } from '@vue/test-utils';
-import WtSelect from '../wt-select.vue';
 import WtLabel from '../../wt-label/wt-label.vue';
+import WtSelect from '../wt-select.vue';
 
 describe('WtSelect', () => {
   it('renders a component', () => {

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

@@ -5,7 +5,7 @@
 
   --select-caret-right-pos: var(--input-padding);
 
-  --select-tags-border: var(--input-border);  // right pos = 10px spacing + clear icon size + clear offset
+  --select-tags-border: var(--input-border); // right pos = 10px spacing + clear icon size + clear offset
 
   --select-options-padding: var(--input-padding);
 }

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

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import MultiselectMixin from '../multiselectMixin';
+import MultiselectMixin from '../multiselectMixin.js';
 
 const Component = {
   mixins: [MultiselectMixin],

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

@@ -1,10 +1,9 @@
 import VueMultiselect from 'vue-multiselect';
 import { ObserveVisibility } from 'vue-observe-visibility';
-import validationMixin
-  from '../../../mixins/validationMixin/validationMixin';
-import debounce from '../../../scripts/debounce';
-import isEmpty from '../../../scripts/isEmpty';
-import labelUsageMixin from '../../wt-label/mixins/labelUsageMixin';
+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';
 
 export default {
   mixins: [validationMixin, labelUsageMixin],
@@ -133,7 +132,9 @@ 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;
     },
@@ -153,7 +154,7 @@ export default {
     disabled() {
       // load options if becomes enabled
       if (!this.disabled) this.fetchOptions();
-    }
+    },
   },
 
   created() {

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

@@ -36,8 +36,8 @@
       :multiple="multiple"
       :options="optionsWithCustomValues"
       :placeholder="placeholder || label"
-      :track-by="trackBy"
       :taggable="taggable"
+      :track-by="trackBy"
       class="wt-select__select"
       v-bind="$attrs"
       @close="isOpened = false"
@@ -91,8 +91,8 @@
           :disabled="disabled"
           class="multiselect__select multiselect__custom-value"
           icon="select-custom-value-enter"
-          @mousedown.prevent
           @click="handleCustomValueArrowInput(toggle)"
+          @mousedown.prevent
         />
         <!--    To view a list of possible values, click on this icon  -->
         <!-- @mousedown.native.prevent.stop="toggle": https://github.com/shentao/vue-multiselect/issues/1204#issuecomment-615114727 -->
@@ -101,8 +101,8 @@
           :disabled="disabled"
           class="multiselect__select multiselect__arrow"
           icon="arrow-down"
-          @mousedown.prevent
           @click="toggle"
+          @mousedown.prevent
         />
       </template>
 
@@ -144,9 +144,9 @@
 </template>
 
 <script>
-import isEmpty from '../../scripts/isEmpty';
-import taggableMixin from '../wt-tags-input/mixin/taggableMixin';
-import multiselectMixin from './mixins/multiselectMixin';
+import isEmpty from '../../scripts/isEmpty.js';
+import taggableMixin from '../wt-tags-input/mixin/taggableMixin.js';
+import multiselectMixin from './mixins/multiselectMixin.js';
 
 export default {
   name: 'WtSelect',
@@ -202,9 +202,8 @@ export default {
       // https://webitel.atlassian.net/browse/WTEL-3181
       if (!this.allowCustomValues) return this.selectOptions;
 
-
       /**
-        custom values could be restored after refresh, so that they could be not included in options prop,
+       custom values could be restored after refresh, so that they could be not included in options prop,
        so that we should add them to options manually (but filter duplicates, which are already in options)
 
        i assume it's bad decision and it's better to include custom values to options prop,