@webitel/ui-sdk 24.6.17 → 24.6.18

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

@@ -1,32 +1,32 @@
 <template>
   <div
-    class="wt-time-input"
     :class="{
       'wt-time-input--disabled': disabled,
       'wt-time-input--invalid': invalid,
     }"
+    class="wt-time-input"
   >
     <wt-label
       v-if="hasLabel"
-      v-bind="labelProps"
       :disabled="disabled"
       :invalid="invalid"
+      v-bind="labelProps"
     >
       <!-- @slot Custom input label -->
       <slot
-        v-bind="{ label }"
         name="label"
+        v-bind="{ label }"
       >
         {{ label }}
       </slot>
     </wt-label>
     <div class="wt-time-input__wrapper">
       <input
-        class="wt-time-input__input"
-        :value="value"
-        :min="0"
-        :max="maxValue"
         :disabled="disabled"
+        :max="maxValue"
+        :min="0"
+        :value="value"
+        class="wt-time-input__input"
         type="number"
         @input="$emit('input', $event.target.value)"
       >
@@ -41,7 +41,7 @@
 </template>
 
 <script>
-import validationMixin from '../../mixins/validationMixin/validationMixin';
+import validationMixin from '../../mixins/validationMixin/validationMixin.js';
 
 export default {
   name: 'WtTimeInput',
@@ -118,19 +118,20 @@ export default {
   &--disabled {
     pointer-events: none;
   }
+
   .wt-time-input__input {
     @extend %typo-body-1;
 
     display: block;
-    width: 100%;
     box-sizing: border-box;
+    width: 100%;
     padding: var(--input-padding);
+    transition: var(--transition);
+    color: var(--wt-text-field-text-color);
     border: var(--input-border);
     border-color: var(--wt-text-field-input-border-color);
     border-radius: var(--border-radius);
-    color: var(--wt-text-field-text-color);
     background: transparent;
-    transition: var(--transition);
 
     .wt-time-input--invalid &,
     .wt-time-input--invalid:hover & {

package/src/components/wt-timepicker/__tests__/WtTimepicker.spec.js

@@ -1,6 +1,6 @@
-import { shallowMount, mount } from '@vue/test-utils';
-import WtTimepicker from '../wt-timepicker.vue';
+import { mount, shallowMount } from '@vue/test-utils';
 import WtTimeInput from '../../wt-time-input/wt-time-input.vue';
+import WtTimepicker from '../wt-timepicker.vue';
 
 describe('WtTimepicker', () => {
   it('renders a component', () => {

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

@@ -1,43 +1,43 @@
 <template>
   <div
-    class="wt-timepicker"
     :class="{'wt-timepicker--invalid': invalid}"
+    class="wt-timepicker"
   >
     <wt-label
       v-if="label"
-      v-bind="labelProps"
       :invalid="invalid"
+      v-bind="labelProps"
     >
       {{ `${label} (${format})` }}
     </wt-label>
     <div class="wt-timepicker__wrapper">
       <wt-time-input
         v-if="isHour"
-        :value="hour"
-        :v="v"
+        :disabled="disabled"
         :label="label ? null : $t('webitelUI.timepicker.hour') "
         :max-value="dateMode ? null : 23"
-        :disabled="disabled"
+        :v="v"
+        :value="hour"
         hide-input-info
         @input="hour = $event"
       />
       <wt-time-input
         v-if="isMin"
-        :value="min"
-        :v="v"
+        :disabled="disabled"
         :label="label ? null : $t('webitelUI.timepicker.min')"
         :max-value="59"
-        :disabled="disabled"
+        :v="v"
+        :value="min"
         hide-input-info
         @input="min = $event"
       />
       <wt-time-input
         v-if="isSec"
-        :value="sec"
-        :v="v"
+        :disabled="disabled"
         :label="label ? null : $t('webitelUI.timepicker.sec')"
         :max-value="59"
-        :disabled="disabled"
+        :v="v"
+        :value="sec"
         hide-input-info
         @input="sec = $event"
       />
@@ -52,7 +52,7 @@
 </template>
 
 <script>
-import validationMixin from '../../mixins/validationMixin/validationMixin';
+import validationMixin from '../../mixins/validationMixin/validationMixin.js';
 
 const SEC_IN_HOUR = 60 * 60;
 const SEC_IN_MIN = 60;

package/src/components/wt-tooltip/_internals/wt-tooltip-floating.vue

@@ -18,7 +18,7 @@
 * */
 
 import { ref } from 'vue';
-import { useTooltipTriggerSubscriptions } from './useTooltipTriggerSubscriptions';
+import { useTooltipTriggerSubscriptions } from './useTooltipTriggerSubscriptions.js';
 
 const props = defineProps({
   triggers: {

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

@@ -15,12 +15,12 @@
       v-if="isVisible"
       ref="floating"
       v-clickaway="hideTooltip"
-      class="wt-tooltip__floating"
       :class="[popperClass]"
       :style="floatingStyles"
       :triggers="popperTriggers"
-      @show="showTooltip"
+      class="wt-tooltip__floating"
       @hide="hideTooltip"
+      @show="showTooltip"
     >
       <slot v-bind="{ hide: hideTooltip }" />
     </wt-tooltip-floating>
@@ -28,13 +28,9 @@
 </template>
 
 <script setup>
-import {
-  ref, onMounted, watch,
-} from 'vue';
-import {
-  useFloating, autoPlacement, shift, flip, offset, autoUpdate,
-} from '@floating-ui/vue';
-import { useTooltipTriggerSubscriptions } from './_internals/useTooltipTriggerSubscriptions';
+import { autoPlacement, autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/vue';
+import { onMounted, ref, watch } from 'vue';
+import { useTooltipTriggerSubscriptions } from './_internals/useTooltipTriggerSubscriptions.js';
 import WtTooltipFloating from './_internals/wt-tooltip-floating.vue';
 
 const props = defineProps({
@@ -127,12 +123,12 @@ onMounted(() => {
 
   .wt-tooltip-floating {
     @extend %typo-body-2;
+    z-index: 1000;
     padding: var(--spacing-2xs) var(--spacing-xs);
     color: var(--wt-tooltip-text-color);
-    background: var(--wt-tooltip-background-color);
     border-radius: var(--border-radius);
+    background: var(--wt-tooltip-background-color);
     box-shadow: var(--elevation-10);
-    z-index: 1000;
   }
 }
 </style>

package/src/composables/useCachedInterval/__tests__/useCachedInterval.spec.js

@@ -1,4 +1,4 @@
-import { useCachedInterval } from '../useCachedInterval';
+import { useCachedInterval } from '../useCachedInterval.js';
 
 describe('useCachedInterval', () => {
   it.skip('subscribe', async () => {

package/src/composables/useCachedInterval/useCachedInterval.js

@@ -1,19 +1,20 @@
 import { onBeforeUnmount } from 'vue';
 import preventHiddenPageCallsDecorator
-  from '../../scripts/preventHiddenPageCallsDecorator';
+  from '../../scripts/preventHiddenPageCallsDecorator.js';
 
 // eslint-disable-next-line import/prefer-default-export
 export const useCachedInterval = ({
-                             timeout,
-                             localStorageKey = 'auto-refresh',
-                           }) => {
+                                    timeout,
+                                    localStorageKey = 'auto-refresh',
+                                  }) => {
   let interval = null;
 
   onBeforeUnmount(() => {
     if (interval) clearInterval(interval);
   });
   const subscribe = (callback) => {
-    const _timeout = timeout || +localStorage.getItem(localStorageKey) || 5 * 60 * 1000;
+    const _timeout = timeout || +localStorage.getItem(localStorageKey) || 5 *
+      60 * 1000;
     callback();
     interval = setInterval(preventHiddenPageCallsDecorator(callback), _timeout);
   };

package/src/composables/useDestroyableSortable/useDestroyableSortable.js

@@ -1,10 +1,5 @@
 import Sortable from 'sortablejs';
-import {
-  ref,
-  nextTick,
-  onMounted,
-  onUnmounted,
-} from 'vue';
+import { nextTick, onMounted, onUnmounted, ref } from 'vue';
 
 /**
  * @param elRef

package/src/composables/useRepresentableAgentPauseCause/__tests__/useRepresentableAgentPauseCause.spec.js

@@ -1,7 +1,6 @@
 import {
   useRepresentableAgentPauseCause,
-} from '../useRepresentableAgentPauseCause';
-
+} from '../useRepresentableAgentPauseCause.js';
 
 describe('useRepresentableAgentPauseCause', () => {
   it('correctly computes duration', () => {
@@ -65,9 +64,9 @@ describe('useRepresentableAgentPauseCause', () => {
     expect(representablePauseCause.value[0].progressColor).toBe('success');
   });
 
-it('correctly computes progressColor with duration = limit', () => {
-  const pauseCauses = { value: [{ durationMin: 12, limitMin: 12 }] };
-  const {
+  it('correctly computes progressColor with duration = limit', () => {
+    const pauseCauses = { value: [{ durationMin: 12, limitMin: 12 }] };
+    const {
       representablePauseCause,
     } = useRepresentableAgentPauseCause(pauseCauses);
     expect(representablePauseCause.value[0].progressColor).toBe('primary');

package/src/composables/useRepresentableAgentPauseCause/useRepresentableAgentPauseCause.js

@@ -1,5 +1,5 @@
 import { computed } from 'vue';
-import convertDuration from '../../scripts/convertDuration';
+import convertDuration from '../../scripts/convertDuration.js';
 
 const prettifyPauseCauseDuration = (min) => {
   const SEC_IN_MIN = 60;

package/src/css/main.scss

@@ -21,8 +21,8 @@ html {
 body {
   @extend %typo-body-1;
 
-  min-height: 100%;
   height: 100%;
+  min-height: 100%;
   margin: 0;
 }
 
@@ -44,8 +44,8 @@ h1, h2, h3, h4, h5, h6, p {
 
 //reset ul styles
 ul {
-  padding: 0;
   margin: 0;
+  padding: 0;
   list-style-type: none;
 }
 
@@ -56,20 +56,20 @@ iframe {
 
 button {
   padding: 0;
-  background: transparent;
+  cursor: pointer;
   border: none;
   outline-color: #000;
-  cursor: pointer;
+  background: transparent;
 }
 
 a {
-  color: #000;
   text-decoration: none;
+  color: #000;
 }
 
 .hidden {
-  opacity: 0;
   pointer-events: none;
+  opacity: 0;
 }
 
 // https://github.com/Akryum/floating-vue/issues/488

package/src/css/styleguide/colors/_deprecated.scss

@@ -29,7 +29,7 @@
   --_page-bg-color: var(--_page-bg-color-hue), 20%, 95%;
   --_header-color: var(--_page-bg-color-hue), 20%, 90%;
   --_positive-color: var(--_positive-color-hue), 60%, 40%;
-  --_negative-color: var(--_negative-color-hue) , 80%, 50%;
+  --_negative-color: var(--_negative-color-hue), 80%, 50%;
   --_icon-color: var(--_icon-color-hue), 100%, 15%;
 
   --_hold-color: var(--_hold-color-hue), 80%, 50%;

package/src/css/styleguide/fonts/_fonts.scss

@@ -1,4 +1,3 @@
-
 @font-face {
   font-family: 'Montserrat';
   src: url('../../../assets/fonts/Montserrat/Montserrat-Thin.ttf') format('truetype');

package/src/css/styleguide/placeholder/_placeholder.scss

@@ -33,8 +33,8 @@ $vendors: (':-webkit', '-moz', ':-moz', '-ms');
    (e.g. vue-multiselect .multiselect__placeholder which is technically a span)
 */
 %wt-placeholder {
-  font: inherit;
   transition: var(--transition);
+  font: inherit;
   color: var(--wt-text-field-placeholder-color);
 }
 

package/src/css/styleguide/scroll.scss

@@ -12,17 +12,17 @@
   &::-webkit-scrollbar {
     width: var(--scrollbar-width);
     height: var(--scrollbar-height);
-    background-color: var(--scrollbar-bg-color);
     cursor: pointer;
     border-radius: var(--scrollbar-border-radius);
+    background-color: var(--scrollbar-bg-color);
   }
 
   // scrollable element
   &::-webkit-scrollbar-thumb {
     width: var(--scrollbar-thumb-width);
     height: var(--scrollbar-thumb-height);
-    background-color: var(--scrollbar-thumb-color);
     border-radius: var(--scrollbar-border-radius);
+    background-color: var(--scrollbar-thumb-color);
   }
 }
 
@@ -32,12 +32,13 @@
     height: 18px;
     background-color: var(--scrollbar-bg-color);
   }
+
   &::-webkit-scrollbar-thumb {
     height: 2px;
     border: 4px solid rgba(0, 0, 0, 0);
-    background-clip: padding-box;
-    background-color: var(--scrollbar-thumb-color);
     border-radius: var(--scrollbar-border-radius);
-   // -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
+    background-color: var(--scrollbar-thumb-color);
+    background-clip: padding-box;
+    // -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
   }
 }

package/src/css/styleguide/typography/_typography.scss

@@ -85,8 +85,8 @@ NOTE:   text-transform: none; is set explicitly cause t-t is inherited from pare
     size: 12px;
     weight: 600;
   }
-  text-transform: uppercase;
   line-height: 24px;
+  text-transform: uppercase;
   //letter-spacing: 0.96px; // 0.06em
 }
 

package/src/directives/index.js

@@ -1,4 +1,4 @@
-import clickaway from './clickaway/clickaway';
+import clickaway from './clickaway/clickaway.js';
 
 const Directives = {
   clickaway,

package/src/enums/WebitelApplications/AdminSections.enum.js

@@ -1,5 +1,3 @@
- 
-
 const AdminSections = Object.freeze({
   // DIRECTORY
   LICENSE: 'license',                   // permissions: add

package/src/locale/en/en.js

@@ -6,15 +6,15 @@ import {
   EngineRoutingSchemaType,
 } from 'webitel-sdk';
 import { QueueType } from 'webitel-sdk/esm2015/enums/index.js';
-import AdminSections from '../../enums/WebitelApplications/AdminSections.enum';
+import AdminSections from '../../enums/WebitelApplications/AdminSections.enum.js';
 import AuditorSections
-  from '../../enums/WebitelApplications/AuditorSections.enum';
-import CrmSections from '../../enums/WebitelApplications/CrmSections.enum';
+  from '../../enums/WebitelApplications/AuditorSections.enum.js';
+import CrmSections from '../../enums/WebitelApplications/CrmSections.enum.js';
 import SupervisorSections
-  from '../../enums/WebitelApplications/SupervisorSections.enum';
+  from '../../enums/WebitelApplications/SupervisorSections.enum.js';
 import WebitelApplications
-  from '../../enums/WebitelApplications/WebitelApplications.enum';
-import { snakeToCamel } from '../../scripts/caseConverters';
+  from '../../enums/WebitelApplications/WebitelApplications.enum.js';
+import { snakeToCamel } from '../../scripts/caseConverters.js';
 
 export default {
   // describes reusable buttons, actions, default titles, and other ui elements

package/src/locale/es/es.js

@@ -6,14 +6,14 @@ import {
   EngineRoutingSchemaType,
 } from 'webitel-sdk';
 import { QueueType } from 'webitel-sdk/esm2015/enums/index.js';
-import AdminSections from '../../enums/WebitelApplications/AdminSections.enum';
+import AdminSections from '../../enums/WebitelApplications/AdminSections.enum.js';
 import AuditorSections
-  from '../../enums/WebitelApplications/AuditorSections.enum';
+  from '../../enums/WebitelApplications/AuditorSections.enum.js';
 import SupervisorSections
-  from '../../enums/WebitelApplications/SupervisorSections.enum';
+  from '../../enums/WebitelApplications/SupervisorSections.enum.js';
 import WebitelApplications
-  from '../../enums/WebitelApplications/WebitelApplications.enum';
-import { snakeToCamel } from '../../scripts/caseConverters';
+  from '../../enums/WebitelApplications/WebitelApplications.enum.js';
+import { snakeToCamel } from '../../scripts/caseConverters.js';
 
 export default {
   // describes reusable buttons, actions, default titles, and other ui elements

package/src/locale/i18n.js

@@ -1,9 +1,9 @@
 import { createI18n } from 'vue-i18n';
-import en from './en/en';
-import es from './es/es';
-import kz from './kz/kz';
-import ru from './ru/ru';
-import ua from './ua/ua';
+import en from './en/en.js';
+import es from './es/es.js';
+import kz from './kz/kz.js';
+import ru from './ru/ru.js';
+import ua from './ua/ua.js';
 
 const messages = {
   en,
@@ -13,7 +13,6 @@ const messages = {
   kz,
 };
 
- 
 export default createI18n({
   // legacy: false,
   locale: 'en',

package/src/locale/kz/kz.js

@@ -6,13 +6,13 @@ import {
   EngineRoutingSchemaType,
 } from 'webitel-sdk';
 import { QueueType } from 'webitel-sdk/esm2015/enums/index.js';
-import AdminSections from '../../enums/WebitelApplications/AdminSections.enum';
-import CrmSections from '../../enums/WebitelApplications/CrmSections.enum';
+import AdminSections from '../../enums/WebitelApplications/AdminSections.enum.js';
+import CrmSections from '../../enums/WebitelApplications/CrmSections.enum.js';
 import SupervisorSections
-  from '../../enums/WebitelApplications/SupervisorSections.enum';
+  from '../../enums/WebitelApplications/SupervisorSections.enum.js';
 import WebitelApplications
-  from '../../enums/WebitelApplications/WebitelApplications.enum';
-import { snakeToCamel } from '../../scripts/caseConverters';
+  from '../../enums/WebitelApplications/WebitelApplications.enum.js';
+import { snakeToCamel } from '../../scripts/caseConverters.js';
 
 export default {
   reusable: {

package/src/locale/ru/ru.js

@@ -6,15 +6,15 @@ import {
   EngineRoutingSchemaType,
 } from 'webitel-sdk';
 import { QueueType } from 'webitel-sdk/esm2015/enums/index.js';
-import AdminSections from '../../enums/WebitelApplications/AdminSections.enum';
+import AdminSections from '../../enums/WebitelApplications/AdminSections.enum.js';
 import AuditorSections
-  from '../../enums/WebitelApplications/AuditorSections.enum';
-import CrmSections from '../../enums/WebitelApplications/CrmSections.enum';
+  from '../../enums/WebitelApplications/AuditorSections.enum.js';
+import CrmSections from '../../enums/WebitelApplications/CrmSections.enum.js';
 import SupervisorSections
-  from '../../enums/WebitelApplications/SupervisorSections.enum';
+  from '../../enums/WebitelApplications/SupervisorSections.enum.js';
 import WebitelApplications
-  from '../../enums/WebitelApplications/WebitelApplications.enum';
-import { snakeToCamel } from '../../scripts/caseConverters';
+  from '../../enums/WebitelApplications/WebitelApplications.enum.js';
+import { snakeToCamel } from '../../scripts/caseConverters.js';
 
 export default {
   // describes reusable buttons, actions, default titles, and other ui elements

package/src/locale/ua/ua.js

@@ -6,15 +6,15 @@ import {
   EngineRoutingSchemaType,
 } from 'webitel-sdk';
 import { QueueType } from 'webitel-sdk/esm2015/enums/index.js';
-import AdminSections from '../../enums/WebitelApplications/AdminSections.enum';
+import AdminSections from '../../enums/WebitelApplications/AdminSections.enum.js';
 import AuditorSections
-  from '../../enums/WebitelApplications/AuditorSections.enum';
-import CrmSections from '../../enums/WebitelApplications/CrmSections.enum';
+  from '../../enums/WebitelApplications/AuditorSections.enum.js';
+import CrmSections from '../../enums/WebitelApplications/CrmSections.enum.js';
 import SupervisorSections
-  from '../../enums/WebitelApplications/SupervisorSections.enum';
+  from '../../enums/WebitelApplications/SupervisorSections.enum.js';
 import WebitelApplications
-  from '../../enums/WebitelApplications/WebitelApplications.enum';
-import { snakeToCamel } from '../../scripts/caseConverters';
+  from '../../enums/WebitelApplications/WebitelApplications.enum.js';
+import { snakeToCamel } from '../../scripts/caseConverters.js';
 
 export default {
   // describes reusable buttons, actions, default titles, and other ui elements

package/src/mixins/dataFilterMixins/__tests__/apiFilterMixin.spec.js

@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import { createRouter, createWebHistory } from 'vue-router';
-import apiFilterMixin from '../apiFilterMixin';
+import apiFilterMixin from '../apiFilterMixin.js';
 
 const router = createRouter({
   history: createWebHistory(),

package/src/mixins/dataFilterMixins/__tests__/enumFilterMixin.spec.js

@@ -1,15 +1,17 @@
 import { shallowMount } from '@vue/test-utils';
 import { createRouter, createWebHistory } from 'vue-router';
-import enumFilterMixin from '../enumFilterMixin';
+import enumFilterMixin from '../enumFilterMixin.js';
 
-const options = [{
+const options = [
+  {
     name: 'Inbound',
     value: 'inbound',
   },
   {
     name: 'Outbound',
     value: 'outbound',
-  }];
+  },
+];
 
 const router = createRouter({
   history: createWebHistory(),

package/src/mixins/dataFilterMixins/__tests__/paginationFilterMixin.spec.js

@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import { createRouter, createWebHistory } from 'vue-router';
-import paginationFilterMixin from '../paginationFilterMixin';
+import paginationFilterMixin from '../paginationFilterMixin.js';
 
 const router = createRouter({
   history: createWebHistory(),