@webitel/ui-sdk 24.6.28 → 24.6.31

package/package.json

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

package/src/api/axios/generateInstance.js

@@ -1,9 +1,12 @@
 import axios from 'axios';
 
 // 'X-Webitel-Access' ~ 'X-Access-Token'
-const generateInstance = ({ interceptors } = {}) => {
+const generateInstance = ({
+                            interceptors,
+                            baseURL,
+                          } = {}) => {
   const instance = axios.create({
-    baseURL: import.meta.env.VITE_API_URL,
+    baseURL,
     headers: {
       'X-Webitel-Access': localStorage.getItem('access-token') || '',
     },

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,6 +146,8 @@ function close() {
 </script>
 
 <style lang="scss" scoped>
+@import '../../../src/css/main.scss';
+
 .wt-app-navigator {
   position: relative;
   z-index: var(--wt-app-header-content-z-index);

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

@@ -133,6 +133,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '../../../src/css/main.scss';
+
 .wt-header-actions {
   position: relative;
   z-index: var(--wt-app-header-content-z-index);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -197,11 +197,11 @@ export default {
 </style>
 
 <style lang="scss" scoped>
+@import '../../../src/css/main.scss';
 
 .wt-navigation-bar__menu-btn {
   display: block;
   width: fit-content;
-  width: -moz-fit-content;
 }
 
 .wt-navigation-bar__nav {

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

@@ -55,14 +55,15 @@ export default {
 </style>
 
 <style lang="scss" scoped>
+@import '../../../src/css/main.scss';
 
 .wt-notification {
   @extend %typo-body-1;
-  @include 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,6 +52,7 @@ export default {
 </style>
 
 <style lang="scss" scoped>
+@import '../../../src/css/main.scss';
 
 .wt-notifications-bar {
   @extend %wt-scrollbar;

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

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

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

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

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

@@ -92,6 +92,7 @@ export default {
 </style>
 
 <style lang="scss" scoped>
+@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 {
-  @include width-fit-content;
   box-sizing: border-box;
+  width: fit-content;
 
   .wt-label {
     cursor: pointer;

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

@@ -151,6 +151,7 @@ function handleKeyup(event) {
 </style>
 
 <style lang="scss" scoped>
+@import '../../../src/css/main.scss';
 
 .wt-search-bar {
   cursor: text;

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

@@ -1,3 +1,4 @@
+@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 {
-  @include 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,6 +254,7 @@ export default {
 </style>
 
 <style lang="scss" scoped>
+@import '../../../src/css/main.scss';
 
 .wt-table {
   @extend %wt-scrollbar;

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

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

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

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

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

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

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

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

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

@@ -112,6 +112,7 @@ onMounted(() => {
 </style>
 
 <style lang="scss" scoped>
+@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';

package/src/modules/CardStoreModule/store/CardStoreModule.js

@@ -1,6 +1,7 @@
 import deepCopy from 'deep-copy';
 import set from 'lodash/set.js';
-import BaseStoreModule from '../../../store/BaseStoreModules/BaseStoreModule.js';
+import BaseStoreModule
+  from '../../../store/BaseStoreModules/BaseStoreModule.js';
 
 export default class CardStoreModule extends BaseStoreModule {
   state = {

package/src/modules/Filters/store/FiltersStoreModule.js

@@ -104,7 +104,7 @@ export default class FiltersStoreModule extends BaseStoreModule {
 
       return context.dispatch('EMIT', {
         event: FilterEvent.RESTORED,
-        payload: context.getters.GET_FILTERS,
+        payload: context.getters.GET_FILTERS(),
       });
     },