@webitel/ui-sdk 24.6.17 → 24.6.18

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

@@ -122,11 +122,11 @@ export default {
   &::-webkit-slider-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);
     background: var(--wt-slider-pointer-background-color);
     -webkit-appearance: none;
-    transition: var(--transition);
   }
 
   &::-webkit-slider-runnable-track {
@@ -136,12 +136,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-status-select/__tests__/WtStatusSelect.spec.js

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

package/src/components/wt-status-select/_internals/StatusOptions.lookup.js

@@ -1,4 +1,4 @@
-import AgentStatus from '../../../enums/AgentStatus/AgentStatus.enum';
+import AgentStatus from '../../../enums/AgentStatus/AgentStatus.enum.js';
 
 export default [
   {

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

@@ -1,11 +1,11 @@
 <template>
   <wt-select
-    class="wt-status-select"
-    :value="selectedOption"
-    :options="availableOptions"
-    track-by="value"
     :clearable="false"
+    :options="availableOptions"
     :searchable="false"
+    :value="selectedOption"
+    class="wt-status-select"
+    track-by="value"
     @input="inputHandler"
   >
     <template #singleLabel="{ option }">
@@ -24,9 +24,9 @@
 </template>
 
 <script>
-import AgentStatus from '../../enums/AgentStatus/AgentStatus.enum';
-import convertDuration from '../../scripts/convertDuration';
-import StatusOptions from './_internals/StatusOptions.lookup';
+import AgentStatus from '../../enums/AgentStatus/AgentStatus.enum.js';
+import convertDuration from '../../scripts/convertDuration.js';
+import StatusOptions from './_internals/StatusOptions.lookup.js';
 
 export default {
   name: 'WtStatusSelect',
@@ -65,14 +65,14 @@ export default {
         }));
     },
     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
-         return options;
-       }
-       return [...options, opt];
-     }, []);
+      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
+          return options;
+        }
+        return [...options, opt];
+      }, []);
     },
     duration() {
       /* The check commented below limits the display of time in the status to 8 characters.

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

@@ -10,12 +10,12 @@
         >
           <div
             v-if="idx !== 0"
-            class="wt-stepper-steps__divider"
             :class="{ 'wt-stepper-steps__divider--completed': completed }"
+            class="wt-stepper-steps__divider"
           />
           <wt-chip
-            class="wt-stepper-steps__item"
             :color="completed ? 'primary' : 'secondary'"
+            class="wt-stepper-steps__item"
           >
             {{ name }}
           </wt-chip>
@@ -48,9 +48,9 @@ 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,
-  })));
+  ...item,
+  completed: props.activeStep > idx,
+})));
 </script>
 
 <style lang="scss">
@@ -65,8 +65,8 @@ const stepWithCompleted = computed(() => props.steps.map((item, idx) => ({
 .wt-stepper-header {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-lg);
   margin-bottom: var(--spacing-lg);
+  gap: var(--spacing-lg);
 }
 
 .wt-stepper-steps {

package/src/components/wt-switcher/__tests__/WtSwitcher.spec.js

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

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

@@ -1,6 +1,6 @@
 import { mount, shallowMount } from '@vue/test-utils';
-import WtTable from '../wt-table.vue';
 import WtCheckbox from '../../wt-checkbox/wt-checkbox.vue';
+import WtTable from '../wt-table.vue';
 
 const headers = [
   {
@@ -41,7 +41,8 @@ const data = [
     h2: 'value 2',
     h3: 'value 3',
     _isSelected: false,
-  }];
+  },
+];
 
 describe('WtTable', () => {
   it('renders a component', () => {
@@ -68,7 +69,8 @@ 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', () => {
@@ -116,8 +118,8 @@ describe('WtTable', () => {
       },
     });
     expect(wrapper
-      .find('.wt-table__th--sortable .wt-table__th__sort-arrow')
-      .exists()).toBe(true);
+    .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

@@ -2,131 +2,131 @@
   <div class="wt-table">
     <table class="wt-table__table">
       <thead class="wt-table__head">
-        <tr
-          :style="columnsStyle"
-          class="wt-table__tr wt-table__tr__head"
+      <tr
+        :style="columnsStyle"
+        class="wt-table__tr wt-table__tr__head"
+      >
+        <th
+          v-if="selectable"
+          class="wt-table__th wt-table__th--checkbox"
         >
-          <th
-            v-if="selectable"
-            class="wt-table__th wt-table__th--checkbox"
-          >
-            <wt-checkbox
-              :selected="isAllSelected"
-              @change="selectAll"
-            />
-          </th>
-          <th
-            v-for="(col, key) of dataHeaders"
-            :key="key"
-            :class="[
+          <wt-checkbox
+            :selected="isAllSelected"
+            @change="selectAll"
+          />
+        </th>
+        <th
+          v-for="(col, key) of dataHeaders"
+          :key="key"
+          :class="[
               {'wt-table__th--sortable': isColSortable(col)},
               `wt-table__th--sort-${col.sort}`,
             ]"
-            class="wt-table__th"
-            @click="sort(col)"
-          >
-            <div class="wt-table__th__text">
-              {{ col.text }}
-            </div>
-            <wt-icon
-              v-if="sortable"
-              class="wt-table__th__sort-arrow wt-table__th__sort-arrow--asc"
-              icon="sort-arrow-up"
-              size="sm"
-            />
-            <wt-icon
-              v-if="sortable"
-              class="wt-table__th__sort-arrow wt-table__th__sort-arrow--desc"
-              icon="sort-arrow-down"
-              size="sm"
-            />
-          </th>
-          <th
-            v-if="gridActions"
-            class="wt-table__th__actions"
-          >
-            <slot name="actions-header" />
-          </th>
-        </tr>
+          class="wt-table__th"
+          @click="sort(col)"
+        >
+          <div class="wt-table__th__text">
+            {{ col.text }}
+          </div>
+          <wt-icon
+            v-if="sortable"
+            class="wt-table__th__sort-arrow wt-table__th__sort-arrow--asc"
+            icon="sort-arrow-up"
+            size="sm"
+          />
+          <wt-icon
+            v-if="sortable"
+            class="wt-table__th__sort-arrow wt-table__th__sort-arrow--desc"
+            icon="sort-arrow-down"
+            size="sm"
+          />
+        </th>
+        <th
+          v-if="gridActions"
+          class="wt-table__th__actions"
+        >
+          <slot name="actions-header" />
+        </th>
+      </tr>
       </thead>
 
       <tbody class="wt-table__body">
-        <tr
-          v-for="(row, dataKey) of data"
-          :key="dataKey"
-          :class="`wt-table__tr__${row.id || dataKey}`"
-          :style="columnsStyle"
-          class="wt-table__tr wt-table__tr__body"
+      <tr
+        v-for="(row, dataKey) of data"
+        :key="dataKey"
+        :class="`wt-table__tr__${row.id || dataKey}`"
+        :style="columnsStyle"
+        class="wt-table__tr wt-table__tr__body"
+      >
+        <td
+          v-if="selectable"
+          class="wt-table__td wt-table__td--checkbox"
         >
-          <td
-            v-if="selectable"
-            class="wt-table__td wt-table__td--checkbox"
-          >
-            <wt-checkbox
-              :selected="_selected.includes(row)"
-              @change="handleSelection(row, $event)"
-            />
-          </td>
-
-          <td
-            v-for="(col, headerKey) of dataHeaders"
-            :key="headerKey"
-            class="wt-table__td"
-          >
-            <slot
-              :index="dataKey"
-              :item="row"
-              :name="col.value"
-            >
-              <div>{{ row[col.value] }}</div>
-            </slot>
-          </td>
-
-          <td
-            v-if="gridActions"
-            class="wt-table__td__actions"
+          <wt-checkbox
+            :selected="_selected.includes(row)"
+            @change="handleSelection(row, $event)"
+          />
+        </td>
+
+        <td
+          v-for="(col, headerKey) of dataHeaders"
+          :key="headerKey"
+          class="wt-table__td"
+        >
+          <slot
+            :index="dataKey"
+            :item="row"
+            :name="col.value"
           >
-            <slot
-              :index="dataKey"
-              :item="row"
-              name="actions"
-            />
-          </td>
-        </tr>
+            <div>{{ row[col.value] }}</div>
+          </slot>
+        </td>
+
+        <td
+          v-if="gridActions"
+          class="wt-table__td__actions"
+        >
+          <slot
+            :index="dataKey"
+            :item="row"
+            name="actions"
+          />
+        </td>
+      </tr>
       </tbody>
 
       <tfoot
         v-if="isTableFooter"
         class="wt-table__foot"
       >
-        <tr
-          :style="columnsStyle"
-          class="wt-table__tr wt-table__tr__foot"
+      <tr
+        :style="columnsStyle"
+        class="wt-table__tr wt-table__tr__foot"
+      >
+        <!--        empty checkbox column -->
+        <th
+          v-if="selectable"
+          class="wt-table__th__checkbox"
+        />
+        <td
+          v-for="(col, headerKey) of dataHeaders"
+          :key="headerKey"
+          class="wt-table__td"
         >
-          <!--        empty checkbox column -->
-          <th
-            v-if="selectable"
-            class="wt-table__th__checkbox"
+          <slot
+            :header="col"
+            :index="headerKey"
+            :name="`${col.value}-footer`"
           />
-          <td
-            v-for="(col, headerKey) of dataHeaders"
-            :key="headerKey"
-            class="wt-table__td"
-          >
-            <slot
-              :header="col"
-              :index="headerKey"
-              :name="`${col.value}-footer`"
-            />
-          </td>
-        </tr>
+        </td>
+      </tr>
       </tfoot>
     </table>
   </div>
 </template>
 
 <script>
-import getNextSortOrder from './_internals/getSortOrder';
+import getNextSortOrder from './_internals/getSortOrder.js';
 
 export default {
   name: 'WtTable',
@@ -243,7 +243,7 @@ export default {
         // for backwards compatibility
         row._isSelected = !row._isSelected;
       }
-    }
+    },
   },
 
 };
@@ -269,9 +269,9 @@ export default {
   display: grid;
   padding: var(--table-row-padding);
   transition: var(--transition);
+  background: var(--wt-table-primary-color);
   grid-template-columns: repeat(auto-fit, var(--table-col-min-width));
   grid-column-gap: var(--table-column-gap);
-  background: var(--wt-table-primary-color);
 
   &:nth-child(2n) {
     background: var(--wt-table-zebra-color);

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

@@ -20,13 +20,13 @@
       <template #main>
         <div class="wt-table-column-select__popup-list-wrap">
           <ul
-            class="wt-table-column-select__popup-list"
             :class="{
               'wt-table-column-select__popup-list--md':
                 changeableDraft.length > 10 && changeableDraft.length <= 20,
               'wt-table-column-select__popup-list--lg':
                 changeableDraft.length > 20
             }"
+            class="wt-table-column-select__popup-list"
           >
             <li
               v-for="(column, key) of changeableDraft"
@@ -35,8 +35,8 @@
               @click.capture.prevent="column.show = !column.show"
             >
               <wt-checkbox
-                :selected="column.show"
                 :label="shownColLabel(column)"
+                :selected="column.show"
                 @change="column.show = $event"
               />
             </li>
@@ -137,6 +137,7 @@ $list-width-md: calc(800px - var(--spacing-xl)); // all popup width - (paddings
 .wt-table-column-select {
   line-height: 0; // prevent 24x28 icon height :/
 }
+
 .wt-table-column-select {
   &__heading {
     text-align: center;
@@ -148,27 +149,27 @@ $list-width-md: calc(800px - var(--spacing-xl)); // all popup width - (paddings
 
   &__popup-list {
     @extend %wt-scrollbar;
-    max-height: $list-height;
-    width: $list-width-sm;
     display: flex;
+    overflow-x: hidden;
     flex-direction: column;
     flex-wrap: wrap;
-    overflow-x: hidden;
+    width: $list-width-sm;
+    max-height: $list-height;
 
     // for 10-30 items
     &--md {
-      width: $list-width-md;
       display: block;
+      width: $list-width-md;
       column-count: 2;
     }
 
     // for 30+ items
     &--lg {
+      display: block;
+      overflow-y: auto;
       width: $list-width-md;
       max-height: none;
-      display: block;
       column-count: 3;
-      overflow-y: auto;
     }
   }
 

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

@@ -1,9 +1,9 @@
 <template>
   <nav
-    class="wt-tabs"
     :class="{
       'wt-tabs--wide': wide,
     }"
+    class="wt-tabs"
   >
     <button
       v-for="(tab) in tabs"
@@ -17,8 +17,8 @@
       @click="open(tab)"
     >
       <slot
-        v-bind="{ tab, current }"
         :name="tab.value"
+        v-bind="{ tab, current }"
       >
         <span style="display: block;">{{ tab.text }}</span>
       </slot>

package/src/components/wt-tags-input/__tests__/WtTagsInput.spec.js

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

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

@@ -1,5 +1,5 @@
 import { mount, shallowMount } from '@vue/test-utils';
-import taggableMixin from '../taggableMixin';
+import taggableMixin from '../taggableMixin.js';
 
 describe('taggableMixin', () => {
   const Component = {
@@ -18,7 +18,7 @@ describe('taggableMixin', () => {
 
     wrapper.vm.$emit('tag', searchQuery);
 
-    expect(wrapper.emitted().tag).toBeTruthy()
+    expect(wrapper.emitted().tag).toBeTruthy();
     expect(wrapper.emitted().input).toBeFalsy();
   });
-})
+});

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

@@ -102,8 +102,8 @@
 </template>
 
 <script>
-import multiselectMixin from '../wt-select/mixins/multiselectMixin';
-import taggableMixin from './mixin/taggableMixin';
+import multiselectMixin from '../wt-select/mixins/multiselectMixin.js';
+import taggableMixin from './mixin/taggableMixin.js';
 
 export default {
   name: 'WtTagsInput',

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

@@ -1,6 +1,6 @@
 import { mount, shallowMount } from '@vue/test-utils';
-import WtTextarea from '../wt-textarea.vue';
 import WtLabel from '../../wt-label/wt-label.vue';
+import WtTextarea from '../wt-textarea.vue';
 
 describe('WtTextarea', () => {
   it('renders a component', () => {
@@ -30,7 +30,8 @@ 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();
   });
 
@@ -40,7 +41,8 @@ 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();
   });
 });

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

@@ -55,7 +55,7 @@
 </template>
 
 <script>
-import validationMixin from '../../mixins/validationMixin/validationMixin';
+import validationMixin from '../../mixins/validationMixin/validationMixin.js';
 
 export default {
   name: 'WtTextarea',
@@ -173,12 +173,12 @@ export default {
   min-height: var(--textarea-min-height);
   padding: var(--textarea-padding);
   resize: none;
-  color: var(--wt-text-field-text-color);
   transition: var(--transition);
-  background: transparent;
+  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);
+  background: transparent;
 
   .wt-textarea--disabled & {
     @include wt-placeholder('disabled');

package/src/components/wt-time-input/__tests__/WtTimeInput.spec.js

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