@webitel/ui-sdk 24.6.30 → 24.6.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.6.30",
+  "version": "24.6.32",
   "private": false,
   "scripts": {
     "dev": "vite",

package/src/api/clients/users/__tests__/users.spec.js

@@ -1,39 +1,31 @@
-import axios from 'axios';
-import UsersAPI from '../users.js';
-
-// axios mock should be copy-pasted :(
-// https://stackoverflow.com/questions/65554910/jest-referenceerror-cannot-access-before-initialization
-vi.mock('axios', () => {
-  return {
-    default: {
-      post: vi.fn(),
-      get: vi.fn(),
-      delete: vi.fn(),
-      put: vi.fn(),
-      patch: vi.fn(),
-      create: vi.fn().mockReturnThis(),
-      interceptors: {
-        request: {
-          use: vi.fn(), eject: vi.fn(),
-        }, response: {
-          use: vi.fn(), eject: vi.fn(),
-        },
-      },
-    },
-  };
-});
+import axiosMock from '../../../../tests/mocks/axiosMock.js';
+
+const instanceMock = axiosMock()().default;
+
+vi.doMock('../../../defaults/getDefaultInstance/getDefaultInstance.js', () => ({
+  default: () => instanceMock,
+}));
 
 describe('UsersAPI', () => {
+  beforeEach(() => {
+    Object.assign(instanceMock, axiosMock()().default);
+  });
+
   it('correctly computes "getList" method api call', async () => {
+    const get = vi.fn(() => Promise.resolve({
+      data: {},
+    }));
+
+    instanceMock.get = get;
+
+    const UsersAPI = (await import('../users.js')).default;
+
     const inputParams = {
       fields: ['id', 'name', 'vitest'],
     };
     const url = '/users?fields=id&fields=name&fields=vitest&page=1&size=10';
-    const mock = axios.get.mockImplementationOnce(() => Promise.resolve({
-      data: {},
-    }));
     await UsersAPI.getList(inputParams);
-    expect(mock).toHaveBeenCalledWith(url);
+    expect(get).toHaveBeenCalledWith(url);
   });
 
   it('correctly computes "getList" method output', async () => {
@@ -57,7 +49,13 @@ describe('UsersAPI', () => {
         ], next: true,
       },
     };
-    axios.get.mockImplementationOnce(() => Promise.resolve(response));
+
+    const get = vi.fn(() => Promise.resolve(response));
+
+    instanceMock.get = get;
+
+    const UsersAPI = (await import('../users.js')).default;
+
     expect(await UsersAPI.getList({})).toEqual(output);
   });
 
@@ -66,11 +64,17 @@ describe('UsersAPI', () => {
       itemId: 1,
     };
     const url = '/users/1';
-    const mock = axios.get.mockImplementationOnce(() => Promise.resolve({
+
+    const get = vi.fn(() => Promise.resolve({
       data: {},
     }));
+
+    instanceMock.get = get;
+
+    const UsersAPI = (await import('../users.js')).default;
+
     await UsersAPI.get(inputParams);
-    expect(mock).toHaveBeenCalledWith(url);
+    expect(get).toHaveBeenCalledWith(url);
   });
 
   it('correctly computes "get" method output', async () => {
@@ -87,7 +91,13 @@ describe('UsersAPI', () => {
         id: 1,
       },
     };
-    axios.get.mockImplementationOnce(() => Promise.resolve(response));
+
+    const get = vi.fn(() => Promise.resolve(response));
+
+    instanceMock.get = get;
+
+    const UsersAPI = (await import('../users.js')).default;
+
     expect(await UsersAPI.get({})).toEqual(output);
   });
 
@@ -104,11 +114,17 @@ describe('UsersAPI', () => {
     };
 
     const url = '/users';
-    const mock = axios.post.mockImplementationOnce(() => Promise.resolve({
+
+    const post = vi.fn(() => Promise.resolve({
       data: {},
     }));
+
+    instanceMock.post = post;
+
+    const UsersAPI = (await import('../users.js')).default;
+
     await UsersAPI.add(input);
-    expect(mock).toHaveBeenCalledWith(url, body);
+    expect(post).toHaveBeenCalledWith(url, body);
   });
 
   it('correctly computes "add" method output', async () => {
@@ -123,7 +139,13 @@ describe('UsersAPI', () => {
         check_case: '',
       },
     };
-    axios.post.mockImplementationOnce(() => Promise.resolve(response));
+
+    const post = vi.fn(() => Promise.resolve(response));
+
+    instanceMock.post = post;
+
+    const UsersAPI = (await import('../users.js')).default;
+
     expect(await UsersAPI.add({ itemInstance: {} })).toEqual(output);
   });
 
@@ -141,11 +163,17 @@ describe('UsersAPI', () => {
     };
 
     const url = '/users/1';
-    const mock = axios.put.mockImplementationOnce(() => Promise.resolve({
+
+    const put = vi.fn(() => Promise.resolve({
       data: {},
     }));
+
+    instanceMock.put = put;
+
+    const UsersAPI = (await import('../users.js')).default;
+
     await UsersAPI.update(input);
-    expect(mock).toHaveBeenCalledWith(url, body);
+    expect(put).toHaveBeenCalledWith(url, body);
   });
 
   it('correctly computes "update" method output', async () => {
@@ -160,7 +188,13 @@ describe('UsersAPI', () => {
         check_case: '',
       },
     };
-    axios.put.mockImplementationOnce(() => Promise.resolve(response));
+
+    const put = vi.fn(() => Promise.resolve(response));
+
+    instanceMock.put = put;
+
+    const UsersAPI = (await import('../users.js')).default;
+
     expect(await UsersAPI.update({ itemInstance: {}, itemId: 1 }))
     .toEqual(output);
   });
@@ -178,11 +212,17 @@ describe('UsersAPI', () => {
     };
 
     const url = '/users/1';
-    const mock = axios.patch.mockImplementationOnce(() => Promise.resolve({
+
+    const patch = vi.fn(() => Promise.resolve({
       data: {},
     }));
+
+    instanceMock.patch = patch;
+
+    const UsersAPI = (await import('../users.js')).default;
+
     await UsersAPI.patch(input);
-    expect(mock).toHaveBeenCalledWith(url, body);
+    expect(patch).toHaveBeenCalledWith(url, body);
   });
 
   it('correctly computes "delete" method api call', async () => {
@@ -191,10 +231,16 @@ describe('UsersAPI', () => {
     };
 
     const url = '/users/1?permanent=true';
-    const mock = axios.delete.mockImplementationOnce(() => Promise.resolve({
+
+    const _delete = vi.fn(() => Promise.resolve({
       data: {},
     }));
+
+    instanceMock.delete = _delete;
+
+    const UsersAPI = (await import('../users.js')).default;
+
     await UsersAPI.delete(input);
-    expect(mock).toHaveBeenCalledWith(url);
+    expect(_delete).toHaveBeenCalledWith(url);
   });
 });

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

@@ -146,7 +146,7 @@ function close() {
 </script>
 
 <style lang="scss" scoped>
-@import 'src/css/main.scss';
+@import '../../../src/css/main.scss';
 
 .wt-app-navigator {
   position: relative;

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

@@ -133,7 +133,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'src/css/main.scss';
+@import '../../../src/css/main.scss';
 
 .wt-header-actions {
   position: relative;

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

@@ -112,7 +112,7 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-@import 'src/css/main.scss';
+@import '../../../src/css/main.scss';
 
 .wt-button {
   @extend %typo-button;

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

@@ -112,8 +112,8 @@ export default {
 <style lang="scss" scoped>
 
 .wt-checkbox {
-  width: fit-content;
   box-sizing: border-box;
+  width: fit-content;
 
   .wt-label {
     cursor: pointer;

package/src/components/wt-chip/wt-chip.scss

@@ -1,5 +1,4 @@
-
-@import 'src/css/main.scss';
+@import '../../../src/css/main.scss';
 
 .wt-chip {
   @extend %typo-body-2;

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

@@ -81,7 +81,7 @@ function handleOptionClick({ option, index, hide }) {
 </style>
 
 <style lang="scss" scoped>
-@import 'src/css/main.scss';
+@import '../../../src/css/main.scss';
 
 .wt-context-menu {
   line-height: 0;

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

@@ -132,7 +132,7 @@ const isDateTime = props.mode === 'datetime';
 </style>
 
 <style lang="scss" scoped>
-@import 'src/css/main.scss';
+@import '../../../src/css/main.scss';
 
 .wt-datepicker :deep(.dp__main) {
   .dp__input_icon {

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

@@ -69,7 +69,7 @@ const dummy = computed(() => props.darkMode ? dummyDark : dummyLight);
 </style>
 
 <style lang="scss" scoped>
-@import 'src/css/main.scss';
+@import '../../../src/css/main.scss';
 
 .wt-dummy {
   display: flex;

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

@@ -84,7 +84,7 @@ watch(() => props.collapsed, (newVal) => {
 </style>
 
 <style lang="scss" scoped>
-@import 'src/css/main.scss';
+@import '../../../src/css/main.scss';
 
 .wt-expansion-panel {
   display: flex;

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

@@ -25,7 +25,7 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-@import 'src/css/main.scss';
+@import '../../../src/css/main.scss';
 
 .wt-headline {
   display: flex;

package/src/components/wt-headline-nav/wt-headline-nav.vue

@@ -48,7 +48,7 @@ const props = defineProps({
 </style>
 
 <style lang="scss" scoped>
-@import 'src/css/main.scss';
+@import '../../../src/css/main.scss';
 
 .wt-headline-nav {
   display: flex;

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

@@ -52,7 +52,7 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-@import 'src/css/main.scss';
+@import '../../../src/css/main.scss';
 
 .wt-indicator {
   display: flex;

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

@@ -272,7 +272,7 @@ onMounted(() => {
 </style>
 
 <style lang="scss" scoped>
-@import 'src/css/main.scss';
+@import '../../../src/css/main.scss';
 
 .wt-input {
   cursor: text;

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

@@ -26,7 +26,7 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-@import 'src/css/main.scss';
+@import '../../../src/css/main.scss';
 
 .wt-input-info {
   @extend %typo-caption;

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

@@ -39,7 +39,7 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-@import 'src/css/main.scss';
+@import '../../../src/css/main.scss';
 
 .wt-label {
   @extend %typo-body-1;

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

@@ -197,7 +197,7 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-@import 'src/css/main.scss';
+@import '../../../src/css/main.scss';
 
 .wt-navigation-bar__menu-btn {
   display: block;

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

@@ -55,15 +55,15 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-@import 'src/css/main.scss';
+@import '../../../src/css/main.scss';
 
 .wt-notification {
   @extend %typo-body-1;
-  width: fit-content;
-
   position: relative;
+
   display: flex;
   align-items: flex-start;
+  width: fit-content;
   min-width: var(--wt-notification-min-width);
   max-width: var(--wt-notification-max-width);
   padding: var(--wt-notification-padding);

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

@@ -52,7 +52,7 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-@import 'src/css/main.scss';
+@import '../../../src/css/main.scss';
 
 .wt-notifications-bar {
   @extend %wt-scrollbar;

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

@@ -112,7 +112,7 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-@import 'src/css/main.scss';
+@import '../../../src/css/main.scss';
 
 .wt-pagination {
   @extend %typo-body-1;

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

@@ -160,7 +160,7 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-@import 'src/css/main.scss';
+@import '../../../src/css/main.scss';
 
 .wt-player {
   @extend %typo-body-2;

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

@@ -92,7 +92,7 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-@import 'src/css/main.scss';
+@import '../../../src/css/main.scss';
 
 .wt-popup {
   position: fixed;

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

@@ -96,8 +96,8 @@ export default {
 
 /* Customize the label (the container) */
 .wt-radio {
-  width: fit-content;
   box-sizing: border-box;
+  width: fit-content;
 
   .wt-label {
     cursor: pointer;

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

@@ -43,7 +43,7 @@
         <wt-context-menu
           v-if="searchMode"
           :options="searchModeOptions"
-          @click="emit('change:search-mode', $event.option)"
+          @click="updateSearchMode"
         >
           <template #activator>
             <wt-tooltip>
@@ -117,6 +117,10 @@ const emit = defineEmits([
   'input',
   'search',
   'enter',
+  'update:search-mode',
+  /**
+   * @deprecated
+   */
   'change:search-mode',
 ]);
 
@@ -144,6 +148,11 @@ function handleKeyup(event) {
     event.preventDefault();
   }
 }
+
+function updateSearchMode(value) {
+  emit('update:search-mode', value);
+  emit('change:search-mode', value);
+}
 </script>
 
 <style lang="scss">
@@ -151,7 +160,7 @@ function handleKeyup(event) {
 </style>
 
 <style lang="scss" scoped>
-@import 'src/css/main.scss';
+@import '../../../src/css/main.scss';
 
 .wt-search-bar {
   cursor: text;

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

@@ -1,5 +1,4 @@
-
-@import 'src/css/main.scss';
+@import '../../../src/css/main.scss';
 
 .multiselect :deep {
   position: relative;

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

@@ -84,9 +84,9 @@ export default {
 <style lang="scss" scoped>
 
 .wt-switcher {
-  width: fit-content;
   position: relative;
   box-sizing: border-box;
+  width: fit-content;
 
   .wt-label {
     cursor: pointer;

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

@@ -254,7 +254,7 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-@import 'src/css/main.scss';
+@import '../../../src/css/main.scss';
 
 .wt-table {
   @extend %wt-scrollbar;

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

@@ -130,7 +130,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'src/css/main.scss';
+@import '../../../src/css/main.scss';
 
 $list-height: 400px;
 $list-width-sm: calc(500px - var(--spacing-xl)); // all popup width - (paddings + overflow-padding)

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

@@ -88,7 +88,7 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-@import 'src/css/main.scss';
+@import '../../../src/css/main.scss';
 
 .wt-tabs {
   position: relative;

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

@@ -149,7 +149,7 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-@import 'src/css/main.scss';
+@import '../../../src/css/main.scss';
 
 .wt-textarea {
   cursor: text;

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

@@ -111,7 +111,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'src/css/main.scss';
+@import '../../../src/css/main.scss';
 
 .wt-time-input {
   display: inline-block;

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

@@ -112,7 +112,7 @@ onMounted(() => {
 </style>
 
 <style lang="scss" scoped>
-@import 'src/css/main.scss';
+@import '../../../src/css/main.scss';
 
 .wt-tooltip {
   display: inline-block;

package/src/css/main.scss

@@ -11,7 +11,6 @@
 
 @mixin width-fit-content {
   width: fit-content;
-  width: -moz-fit-content;
 }
 
 html {

package/src/enums/QueueType/QueueType.enum.js

@@ -7,7 +7,7 @@ const QueueType = Object.freeze({
   PREDICTIVE_DIALER: 5,
   CHAT_INBOUND_QUEUE: 6,
   INBOUND_JOB_QUEUE: 7,
-  OUTBOUND_JOB_QUEUE: 8
+  OUTBOUND_JOB_QUEUE: 8,
 });
 
 export default QueueType;

package/src/locale/en/en.js

@@ -6,7 +6,8 @@ import {
   EngineRoutingSchemaType,
 } from 'webitel-sdk';
 import QueueType from '../../enums/QueueType/QueueType.enum.js';
-import AdminSections from '../../enums/WebitelApplications/AdminSections.enum.js';
+import AdminSections
+  from '../../enums/WebitelApplications/AdminSections.enum.js';
 import AuditorSections
   from '../../enums/WebitelApplications/AuditorSections.enum.js';
 import CrmSections from '../../enums/WebitelApplications/CrmSections.enum.js';

package/src/locale/es/es.js

@@ -6,7 +6,8 @@ import {
   EngineRoutingSchemaType,
 } from 'webitel-sdk';
 import QueueType from '../../enums/QueueType/QueueType.enum.js';
-import AdminSections from '../../enums/WebitelApplications/AdminSections.enum.js';
+import AdminSections
+  from '../../enums/WebitelApplications/AdminSections.enum.js';
 import AuditorSections
   from '../../enums/WebitelApplications/AuditorSections.enum.js';
 import SupervisorSections

package/src/locale/kz/kz.js

@@ -6,7 +6,8 @@ import {
   EngineRoutingSchemaType,
 } from 'webitel-sdk';
 import QueueType from '../../enums/QueueType/QueueType.enum.js';
-import AdminSections from '../../enums/WebitelApplications/AdminSections.enum.js';
+import AdminSections
+  from '../../enums/WebitelApplications/AdminSections.enum.js';
 import CrmSections from '../../enums/WebitelApplications/CrmSections.enum.js';
 import SupervisorSections
   from '../../enums/WebitelApplications/SupervisorSections.enum.js';

package/src/locale/ru/ru.js

@@ -6,7 +6,8 @@ import {
   EngineRoutingSchemaType,
 } from 'webitel-sdk';
 import QueueType from '../../enums/QueueType/QueueType.enum.js';
-import AdminSections from '../../enums/WebitelApplications/AdminSections.enum.js';
+import AdminSections
+  from '../../enums/WebitelApplications/AdminSections.enum.js';
 import AuditorSections
   from '../../enums/WebitelApplications/AuditorSections.enum.js';
 import CrmSections from '../../enums/WebitelApplications/CrmSections.enum.js';

package/src/locale/ua/ua.js

@@ -6,7 +6,8 @@ import {
   EngineRoutingSchemaType,
 } from 'webitel-sdk';
 import QueueType from '../../enums/QueueType/QueueType.enum.js';
-import AdminSections from '../../enums/WebitelApplications/AdminSections.enum.js';
+import AdminSections
+  from '../../enums/WebitelApplications/AdminSections.enum.js';
 import AuditorSections
   from '../../enums/WebitelApplications/AuditorSections.enum.js';
 import CrmSections from '../../enums/WebitelApplications/CrmSections.enum.js';