@webitel/ui-sdk 25.4.37 → 25.4.39

package/package.json

@@ -1,16 +1,13 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "25.4.37",
+  "version": "25.4.39",
   "private": false,
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "serve": "vite preview",
     "test:unit": "vitest",
-    "lint:js": "eslint",
-    "lint:prettier": "prettier --check .",
-    "lint": "npm run lint:js && npm run lint:prettier",
-    "lint:fix": "prettier --write --list-different . && npm run lint:js --fix",
+    "lint:fix": "prettier --write --check . && eslint --fix",
     "publish-lib": "npm run test:unit && npm run build && npm publish --access public",
     "publish-lib:testless": "npm run build && npm publish --access public",
     "docs:dev": "vitepress dev docs --port 8080",
@@ -21,7 +18,8 @@
     "update-node": "nvm install --lts && nvm alias default node",
     "i": "npm install",
     "lint:package": "publint",
-    "orval": "orval"
+    "orval": "orval",
+    "prepare": "husky && husky install"
   },
   "main": "./dist/ui-sdk.js",
   "type": "module",
@@ -108,15 +106,15 @@
     "CHANGELOG.md"
   ],
   "dependencies": {
-    "@floating-ui/vue": "^1.1.5",
+    "@floating-ui/vue": "^1.1.6",
     "@morev/vue-transitions": "^3.0.5",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
     "@vuepic/vue-datepicker": "^4.5.1",
-    "@vueuse/components": "^11.2.0",
+    "@vueuse/components": "^13.0.0",
     "@webitel/styleguide": "^24.12.26",
     "autosize": "^6.0.1",
-    "axios": "^1.7.7",
+    "axios": "^1.8.3",
     "clipboard-copy": "^4.0.1",
     "csv-stringify": "^5.5.3",
     "date-fns": "^4.1.0",
@@ -129,71 +127,78 @@
     "jszip": "^3.10.1",
     "jszip-utils": "^0.1.0",
     "lodash-es": "^4.17.21",
-    "mitt": "3.0.1",
+    "mitt": "^3.0.1",
     "path-browserify": "^1.0.1",
     "plyr": "^3.7.8",
     "query-string": "^9.1.1",
     "sortablejs": "^1.15.3",
-    "vue-i18n": "^11.0.1",
+    "vue-i18n": "^11.1.2",
     "vue-multiselect": "^3.1.0",
     "vue-observe-visibility": "^2.0.0-alpha.1",
-    "vue-router": "^4.4.5",
-    "webitel-sdk": "^24.10.29",
-    "xlsx": "^0.18.5",
+    "vue-router": "^4.5.0",
+    "webitel-sdk": "^25.2.11",
+    "xlsx": "0.18.5",
     "zod": "^3.24.2"
   },
   "devDependencies": {
-    "@eslint/js": "^9.17.0",
+    "@eslint/js": "^9.22.0",
     "@tsconfig/node22": "^22.0.0",
-    "@types/node": "^22.12.0",
-    "@vitejs/plugin-vue": "^5.2.1",
-    "@vitest/coverage-v8": "^3.0.6",
+    "@types/node": "^22.13.10",
+    "@vitejs/plugin-vue": "^5.2.3",
     "@vue/compat": "^3.5.13",
     "@vue/compiler-sfc": "^3.5.13",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.7.0",
-    "eslint": "^9.17.0",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint": "^9.22.0",
+    "eslint-config-prettier": "^10.1.1",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "eslint-plugin-vue": "^9.32.0",
-    "globals": "^15.14.0",
-    "globby": "^14.0.2",
-    "happy-dom": "^15.11.6",
+    "eslint-plugin-vue": "^10.0.0",
+    "globals": "^16.0.0",
+    "globby": "^14.1.0",
+    "happy-dom": "^17.4.4",
+    "husky": "^9.1.7",
+    "lint-staged": "^15.5.0",
     "markdown-it": "^14.1.0",
     "markdown-table": "^3.0.4",
     "orval": "^7.6.0",
     "path": "^0.12.7",
-    "pinia": "^2.3.0",
-    "postcss": "^8.4.49",
+    "pinia": "^3.0.1",
+    "postcss": "^8.5.3",
     "postcss-prefix-selector": "^2.1.0",
-    "prettier": "^3.4.2",
-    "prismjs": "^1.29.0",
-    "publint": "^0.3.6",
-    "sass": "^1.81.0",
-    "typescript": "5.7.3",
-    "typescript-eslint": "^8.22.0",
+    "prettier": "^3.5.3",
+    "prettier-plugin-css-order": "^2.1.2",
+    "prismjs": "^1.30.0",
+    "publint": "^0.3.9",
+    "sass": "^1.85.1",
+    "typescript": "5.8.2",
+    "typescript-eslint": "^8.26.1",
     "typescript-plugin-css-modules": "^5.1.0",
-    "vite": "^6.1.1",
+    "unplugin-auto-import": "^19.1.1",
+    "vite": "^6.2.2",
     "vite-plugin-checker": "^0.9.0",
     "vite-plugin-node-polyfills": "^0.23.0",
-    "vite-plugin-static-copy": "^2.2.0",
+    "vite-plugin-static-copy": "^2.3.0",
     "vite-plugin-svg-sprite": "=0.5",
     "vite-plugin-vue-docgen": "^0.3.4",
     "vitepress": "1.6.3",
-    "vitest": "^3.0.6",
+    "vitest": "^3.0.9",
     "vue": "^3.5.13",
-    "vue-tsc": "^2.1.10",
+    "vue-tsc": "^2.2.8",
     "vuex": "^4.1.0"
   },
   "optionalDependencies": {
     "@rollup/rollup-linux-x64-gnu": "4.9.5"
   },
   "overrides": {
-    "vite": "^6.1.1",
+    "vite": "^6.2.2",
     "date-fns": "^4.1.0"
   },
   "engines": {
     "npm": "10",
     "node": "v22"
+  },
+  "lint-staged": {
+    "*.js": "eslint --cache --fix",
+    "*.{js,css,md}": "prettier --write"
   }
 }

package/src/api/clients/casePriorities/casePriorities.js

@@ -12,7 +12,7 @@ import applyTransform, {
   snakeToCamel,
   starToSearch,
 } from '../../transformers/index.js';
-import {PrioritiesApiFactory} from 'webitel-sdk';
+import { PrioritiesApiFactory } from 'webitel-sdk';
 
 const instance = getDefaultInstance();
 const configuration = getDefaultOpenAPIConfig();
@@ -22,7 +22,17 @@ const priorityService = new PrioritiesApiFactory(configuration, '', instance);
 const fieldsToSend = ['name', 'description', 'color'];
 
 const getPrioritiesList = async (params) => {
-  const fieldsToSend = ['page', 'size', 'q', 'sort', 'fields', 'id', 'notInSla', 'inSla', 'inSlaCond'];
+  const fieldsToSend = [
+    'page',
+    'size',
+    'q',
+    'sort',
+    'fields',
+    'id',
+    'notInSla',
+    'inSla',
+    'inSlaCond',
+  ];
   const {
     page,
     size,
@@ -125,6 +135,6 @@ const CasePrioritiesAPI = {
   getLookup: getConditionsLookup,
   delete: deletePriority,
   add: addPriority,
-}
+};
 
 export default CasePrioritiesAPI;

package/src/api/clients/caseSources/caseSources.js

@@ -32,15 +32,7 @@ const getSourcesList = async (params) => {
     }));
   };
 
-  const {
-    page,
-    size,
-    fields,
-    sort,
-    id,
-    q,
-    type,
-  } = applyTransform(params, [
+  const { page, size, fields, sort, id, q, type } = applyTransform(params, [
     merge(getDefaultGetParams()),
     starToSearch('search'),
     (params) => ({ ...params, q: params.search }),
@@ -57,7 +49,7 @@ const getSourcesList = async (params) => {
       id,
       q,
       type,
-    )
+    );
     const { items, next } = applyTransform(response.data, [
       merge(getDefaultGetListResponse()),
     ]);
@@ -75,10 +67,7 @@ const getSource = async ({ itemId: id }) => {
 
   try {
     const response = await sourceService.locateSource(id);
-    return applyTransform(response.data, [
-      snakeToCamel(),
-      itemResponseHandler,
-    ]);
+    return applyTransform(response.data, [snakeToCamel(), itemResponseHandler]);
   } catch (err) {
     throw applyTransform(err, [notify]);
   }
@@ -91,9 +80,7 @@ const addSource = async ({ itemInstance }) => {
   ]);
   try {
     const response = await sourceService.createSource(item);
-    return applyTransform(response.data, [
-      snakeToCamel()
-    ]);
+    return applyTransform(response.data, [snakeToCamel()]);
   } catch (err) {
     throw applyTransform(err, [notify]);
   }
@@ -102,7 +89,8 @@ const addSource = async ({ itemInstance }) => {
 const updateSource = async ({ itemInstance, itemId: id }) => {
   const item = applyTransform(itemInstance, [
     camelToSnake(),
-    sanitize(fieldsToSend)]);
+    sanitize(fieldsToSend),
+  ]);
 
   try {
     const response = await sourceService.updateSource(id, item);
@@ -121,10 +109,11 @@ const deleteSource = async ({ id }) => {
   }
 };
 
-const getLookup = (params) => getSourcesList({
-  ...params,
-  fields: params.fields || ['id', 'name', 'type'],
-});
+const getLookup = (params) =>
+  getSourcesList({
+    ...params,
+    fields: params.fields || ['id', 'name', 'type'],
+  });
 
 const CaseSourcesAPI = {
   getList: getSourcesList,
@@ -132,7 +121,7 @@ const CaseSourcesAPI = {
   add: addSource,
   update: updateSource,
   delete: deleteSource,
-  getLookup
-}
+  getLookup,
+};
 
 export default CaseSourcesAPI;

package/src/api/clients/slas/slas.js

@@ -19,19 +19,20 @@ const configuration = getDefaultOpenAPIConfig();
 
 const slaService = new SLAsApiFactory(configuration, '', instance);
 
-const fieldsToSend = ['name', 'description', 'valid_from', 'valid_to', 'calendar', 'reaction_time', 'resolution_time'];
+const fieldsToSend = [
+  'name',
+  'description',
+  'valid_from',
+  'valid_to',
+  'calendar',
+  'reaction_time',
+  'resolution_time',
+];
 
 const getSlasList = async (params) => {
   const fieldsToSend = ['page', 'size', 'q', 'sort', 'fields', 'id'];
 
-  const {
-    page,
-    size,
-    fields,
-    sort,
-    id,
-    q,
-  } = applyTransform(params, [
+  const { page, size, fields, sort, id, q } = applyTransform(params, [
     merge(getDefaultGetParams()),
     starToSearch('search'),
     (params) => ({ ...params, q: params.search }),
@@ -39,14 +40,7 @@ const getSlasList = async (params) => {
     camelToSnake(),
   ]);
   try {
-    const response = await slaService.listSLAs(
-      page,
-      size,
-      fields,
-      sort,
-      id,
-      q,
-    );
+    const response = await slaService.listSLAs(page, size, fields, sort, id, q);
     const { items, next } = applyTransform(response.data, [
       merge(getDefaultGetListResponse()),
     ]);
@@ -66,10 +60,7 @@ const getSla = async ({ itemId: id }) => {
 
   try {
     const response = await slaService.locateSLA(id, fieldsToSend);
-    return applyTransform(response.data, [
-      snakeToCamel(),
-      itemResponseHandler,
-    ]);
+    return applyTransform(response.data, [snakeToCamel(), itemResponseHandler]);
   } catch (err) {
     throw applyTransform(err, [notify]);
   }
@@ -82,9 +73,7 @@ const addSla = async ({ itemInstance }) => {
   ]);
   try {
     const response = await slaService.createSLA(item);
-    return applyTransform(response.data, [
-      snakeToCamel()
-    ]);
+    return applyTransform(response.data, [snakeToCamel()]);
   } catch (err) {
     throw applyTransform(err, [notify]);
   }
@@ -93,7 +82,8 @@ const addSla = async ({ itemInstance }) => {
 const updateSla = async ({ itemInstance, itemId: id }) => {
   const item = applyTransform(itemInstance, [
     camelToSnake(),
-    sanitize(fieldsToSend)]);
+    sanitize(fieldsToSend),
+  ]);
   try {
     const response = await slaService.updateSLA(id, item);
     return applyTransform(response.data, [snakeToCamel()]);
@@ -124,6 +114,6 @@ const SlasAPI = {
   add: addSla,
   update: updateSla,
   delete: deleteSla,
-}
+};
 
 export default SlasAPI;

package/src/api/clients//321/201ontacts/contacts.js

@@ -164,6 +164,7 @@ const get = async ({ itemId: id }) => {
     'phones',
     'emails',
     'imclients',
+    'user',
   ];
 
   const defaultObject = {};

package/src/api/transformers/skipIf/skipIf.ts

@@ -1,6 +1,11 @@
-export const skipIf = (transformer: (...payload: unknown[]) => unknown, ifFn: boolean | ((...payload: unknown[]) => boolean)) => (payload: unknown) => {
+export const skipIf =
+  (
+    transformer: (...payload: unknown[]) => unknown,
+    ifFn: boolean | ((...payload: unknown[]) => boolean),
+  ) =>
+  (payload: unknown) => {
     if (typeof ifFn === 'function' ? ifFn(payload) : ifFn) {
-        return payload;
+      return payload;
     }
     return transformer(payload);
-};
+  };

package/src/api/websocket/WebSocketClientController.js

@@ -34,7 +34,8 @@ class WebSocketClientController {
   }
 
   addEventListener(event, callback) {
-    if (Array.isArray(callback)) this._on[event] = this._on[event].concat(callback);
+    if (Array.isArray(callback))
+      this._on[event] = this._on[event].concat(callback);
     else this._on[event].push(callback);
   }
 
@@ -62,12 +63,16 @@ class WebSocketClientController {
     cli.callStore = reactive(cli.callStore);
 
     this._on[WebSocketClientEvent.AFTER_AUTH].forEach((callback) => callback());
-    this._on[WebSocketClientEvent.ERROR].forEach((callback) => cli.on('error', callback));
-    cli.on(`show_message`, e => eventBus.$emit('notification', {
-      type: e.type,
-      text: e.message,
-      timeout: e.timeout,
-    }));
+    this._on[WebSocketClientEvent.ERROR].forEach((callback) =>
+      cli.on('error', callback),
+    );
+    cli.on(`show_message`, (e) =>
+      eventBus.$emit('notification', {
+        type: e.type,
+        text: e.message,
+        timeout: e.timeout,
+      }),
+    );
 
     await cli.connect();
 
@@ -84,23 +89,25 @@ class WebSocketClientController {
         resolve();
       }, 5000);
 
-      const markUa = () => cli.phone?.ua && (cli.phone.ua = markRaw(cli.phone.ua));
+      const markUa = () =>
+        cli.phone?.ua && (cli.phone.ua = markRaw(cli.phone.ua));
 
       if (cli.phone?.ua) {
         markUa();
         clearTimeout(timeout);
         resolve();
-      } else cli.on('phone_connected', () => {
-        markUa();
-        clearTimeout(timeout);
-        resolve();
-      });
+      } else
+        cli.on('phone_connected', () => {
+          markUa();
+          clearTimeout(timeout);
+          resolve();
+        });
     });
 
     window.cli = cli;
     return cli;
   };
-};
+}
 
 const webSocketClientController = new WebSocketClientController();
 

package/src/api/websocket/config.js

@@ -8,8 +8,9 @@ export const getConfig = () => {
 };
 
 const { hostname, protocol } = window.location;
-const origin = (`${protocol}//${hostname}`).replace(/^http/, 'ws');
+const origin = `${protocol}//${hostname}`.replace(/^http/, 'ws');
 
-export const endpoint = import.meta.env.MODE === 'production'
-  ? `${origin}/ws`
-  : 'wss://dev.webitel.com/ws';
+export const endpoint =
+  import.meta.env.MODE === 'production'
+    ? `${origin}/ws`
+    : 'wss://dev.webitel.com/ws';

package/src/components/on-demand/wt-navigation-menu/components/_internals/nav-menu-lvl-1.vue

@@ -63,12 +63,12 @@ function select(category) {
   }
 
   &--selected {
-    color: var(--primary-on-color);
     background: var(--primary-color);
+    color: var(--primary-on-color);
 
     &:hover {
-      color: var(--primary-on-color);
       background: var(--primary-color);
+      color: var(--primary-on-color);
     }
   }
 }

package/src/components/on-demand/wt-navigation-menu/components/_internals/nav-menu-lvl-2.vue

@@ -36,8 +36,8 @@ const props = defineProps({
   overflow-y: auto;
 
   .nav-menu-lvl-2__indicator {
-    position: relative;
     display: block;
+    position: relative;
     width: var(--spacing-md);
     height: var(--spacing-md);
 
@@ -45,12 +45,12 @@ const props = defineProps({
       position: absolute;
       top: 50%;
       left: 50%;
-      width: var(--spacing-2xs);
-      height: var(--spacing-2xs);
-      content: '';
       transform: translate(-50%, -50%);
       border-radius: 50%;
       background: var(--text-main-color);
+      width: var(--spacing-2xs);
+      height: var(--spacing-2xs);
+      content: '';
     }
   }
 

package/src/components/on-demand/wt-navigation-menu/components/wt-navigation-menu.vue

@@ -87,9 +87,9 @@ function select(category) {
 
 .wt-navigation-menu {
   display: flex;
-  align-items: center;
   flex-grow: 1;
   justify-content: center;
+  align-items: center;
   height: 100%;
 
   --button-min-height: 60px;
@@ -111,14 +111,14 @@ function select(category) {
   &__wrapper {
     @extend %wt-scrollbar;
     display: grid;
+    grid-template-columns: repeat(2, 1fr);
     box-sizing: border-box;
-    width: var(--wrapper-width);
-    height: var(--wrapper-height);
     margin: auto;
-    padding: var(--spacing-sm);
     border-radius: var(--spacing-xs);
     background: var(--content-wrapper-color);
-    grid-template-columns: repeat(2, 1fr);
+    padding: var(--spacing-sm);
+    width: var(--wrapper-width);
+    height: var(--wrapper-height);
     grid-gap: var(--spacing-sm);
 
     @media only screen and (max-width: $viewport-xs) {

package/src/components/on-demand/wt-navigation-menu/css/_nav-menu.scss

@@ -2,8 +2,8 @@
 
 .nav-menu {
   &__category {
-    height: 100%;
     border-radius: var(--border-radius);
+    height: 100%;
   }
 
   &__option {
@@ -16,14 +16,14 @@
     @extend %typo-body-1;
     display: flex;
     align-items: center;
+    transition: var(--transition);
     box-sizing: border-box;
+    border-radius: var(--border-radius);
+    padding: 18px 20px;
     width: 100%;
     min-height: var(--button-min-height);
-    padding: 18px 20px;
-    transition: var(--transition);
-    text-align: left;
     color: var(--text-main-color);
-    border-radius: var(--border-radius);
+    text-align: left;
 
     .wt-icon {
       margin-right: var(--spacing-xs);

package/src/components/on-demand/wt-save-failed-popup/wt-save-failed-popup.vue

@@ -57,8 +57,8 @@ export default {
 <style lang="scss" scoped>
 .flow-save-filed-popup__wrapper {
   display: flex;
-  align-items: center;
   flex-direction: column;
+  align-items: center;
   text-align: center;
 
   .wt-icon {

package/src/components/on-demand/wt-selection-popup/wt-selection-popup.vue

@@ -128,14 +128,14 @@ function selectOption(option) {
   }
 
   &__item-wrapper {
-    position: relative;
     display: flex;
+    position: relative;
     align-items: center;
-    padding: var(--spacing-xs);
-    cursor: pointer;
     transition: var(--transition);
+    cursor: pointer;
     border: 1px solid var(--text-main-color);
     border-radius: var(--border-radius);
+    padding: var(--spacing-xs);
 
     &:hover,
     &.active {

package/src/components/on-demand/wt-start-page/components/start-page-card.vue

@@ -52,25 +52,25 @@ const open = () => {
 .start-page-card {
   display: flex;
   flex-direction: column;
-  width: 264px;
-  padding: var(--spacing-xs);
-  color: var(--text-main-color);
+  gap: var(--spacing-xs);
   border-radius: var(--border-radius);
   background-color: var(--content-wrapper-color);
-  gap: var(--spacing-xs);
+  padding: var(--spacing-xs);
+  width: 264px;
+  color: var(--text-main-color);
 
   &__header {
     @extend %typo-heading-4;
     display: flex;
-    align-items: center;
     justify-content: center;
+    align-items: center;
   }
 
   &__description {
     @extend %typo-body-1;
     display: -webkit-box;
-    overflow: hidden;
     height: 78px; //in order to cut text after 3rd line:
+    overflow: hidden;
     text-align: center;
     text-overflow: ellipsis;
     -webkit-line-clamp: 3;

package/src/components/on-demand/wt-start-page/components/start-page-logo.vue

@@ -16,8 +16,8 @@ const props = defineProps({
 <style lang="scss" scoped>
 .start-page-logo {
   display: flex;
-  align-items: center;
   justify-content: center;
+  align-items: center;
   min-height: 200px;
 }
 </style>

package/src/components/on-demand/wt-start-page/components/wt-start-page.vue

@@ -52,11 +52,11 @@ const navCards = computed(() => {
 <style scoped>
 .wt-start-page__wrapper {
   display: grid;
+  grid-template-columns: repeat(auto-fit, 264px);
   justify-content: center;
   box-sizing: border-box;
-  min-width: 264px;
   padding: var(--spacing-sm);
-  grid-template-columns: repeat(auto-fit, 264px);
+  min-width: 264px;
   grid-gap: var(--spacing-sm);
 }
 </style>

package/src/components/transitions/wt-expand-transition.vue

@@ -52,8 +52,8 @@ export default {
 <style lang="scss">
 .expand-enter-active,
 .expand-leave-active {
-  overflow: hidden;
   transition: height var(--transition);
+  overflow: hidden;
 }
 
 .expand-enter,

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

@@ -120,8 +120,8 @@ const handleActionClick = (action) => {
 <style lang="scss" scoped>
 .wt-action-bar {
   display: flex;
-  align-items: center;
   justify-content: center;
+  align-items: center;
   gap: var(--spacing-xs);
 }
 </style>