@webitel/ui-sdk 23.12.40 → 23.12.43

package/package.json

@@ -1,20 +1,21 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "23.12.40",
+  "version": "23.12.43",
   "private": false,
   "scripts": {
-    "build": "vue-cli-service build --target lib --name ui-sdk ./src/install.js",
-    "test:unit": "vue-cli-service test:unit",
-    "lint": "vue-cli-service lint --fix",
-    "build:app": "vue-cli-service build",
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "test:unit": "vitest",
+    "lint:fix": "eslint --fix --ext .js,.vue src",
     "prepare": "husky install",
     "publish-lib": "npm run test:unit && npm run build && npm publish --access public",
     "publish-lib:testless": "npm run build && npm publish --access public",
-    "serve-lib": "vue-cli-service serve",
-    "styleguide": "vue-cli-service styleguidist",
-    "styleguide:build": "vue-cli-service styleguidist:build"
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs"
   },
-  "main": "./dist/@webitel/ui-sdk.common.js",
+  "main": "./dist/@webitel/ui-sdk.umd.js",
   "files": [
     "dist/*",
     "src/api/*",
@@ -34,27 +35,26 @@
   ],
   "dependencies": {
     "@floating-ui/vue": "^1.0.1",
-    "@vue/compat": "^3.2.47",
-    "@vuelidate/core": "^2.0.0",
-    "@vuelidate/validators": "^2.0.0",
+    "@vue/compat": "^3.3.8",
+    "@vuelidate/core": "^2.0.3",
+    "@vuelidate/validators": "^2.0.4",
     "@vuepic/vue-datepicker": "^4.4.0",
     "@vueuse/components": "^10.5.0",
     "clipboard-copy": "^4.0.1",
-    "core-js": "^3.6.5",
     "csv-stringify": "^5.5.3",
     "deep-copy": "^1.4.2",
     "deep-equal": "^2.0.3",
+    "deepmerge": "^4.3.1",
     "file-saver": "^2.0.2",
     "is-valid-domain": "^0.1.6",
     "jszip": "^3.5.0",
     "jszip-utils": "^0.1.0",
     "lodash": "^4.17.21",
-    "node-polyfill-webpack-plugin": "^1.1.4",
-    "plyr": "3.6.2",
+    "plyr": "3.6.3",
     "query-string": "^8.1.0",
     "sortablejs": "^1.15.0",
     "tiny-emitter": "^2.1.0",
-    "vue": "^3.2.47",
+    "vue": "^3.3.8",
     "vue-i18n": "^9.2.2",
     "vue-multiselect": "^3.0.0-beta.1",
     "vue-observe-visibility": "^2.0.0-alpha.1",
@@ -62,35 +62,27 @@
     "webitel-sdk": "^23.7.5"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.17.0",
-    "@babel/preset-react": "^7.22.15",
-    "@testing-library/jest-dom": "^5.16.2",
-    "@vue/cli-plugin-babel": "~5.0.8",
-    "@vue/cli-plugin-eslint": "~5.0.8",
-    "@vue/cli-plugin-router": "^5.0.8",
-    "@vue/cli-plugin-unit-jest": "^5.0.8",
-    "@vue/cli-service": "~5.0.8",
+    "@vitejs/plugin-vue": "4.4.1",
+    "@vitest/coverage-v8": "^0.34.6",
     "@vue/compiler-sfc": "^3.2.47",
-    "@vue/eslint-config-airbnb": "^6.0.0",
     "@vue/test-utils": "^2.3.0",
-    "@vue/vue3-jest": "^29.2.2",
-    "babel-preset-vite": "^1.1.0",
     "bamboo-jest-reporter": "^1.0.3",
-    "eslint": "^8.14.0",
-    "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-vue": "^8.7.1",
-    "husky": "^7.0.0",
-    "jest-environment-jsdom": "^29.4.3",
+    "eslint": "^8.53.0",
+    "eslint-plugin-vue": "^9.18.1",
+    "globby": "^14.0.0",
+    "happy-dom": "^12.9.1",
+    "husky": "^8.0.3",
+    "markdown-it": "^13.0.2",
+    "postcss": "^8.4.31",
+    "postcss-prefix-selector": "^1.16.0",
+    "prismjs": "^1.29.0",
     "sass": "^1.51.0",
-    "sass-loader": "^12.6.0",
-    "svg-sprite-loader": "^6.0.11",
-    "vue-cli-plugin-styleguidist": "~4.72.4",
+    "vite": "^4.5.0",
+    "vite-plugin-node-polyfills": "^0.15.0",
+    "vite-plugin-static-copy": "^0.17.0",
+    "vite-plugin-svg-sprite": "^0.5.0",
+    "vitepress": "^1.0.0-rc.29",
+    "vitest": "^0.34.6",
     "vuex": "^4.1.0"
-  },
-  "overrides": {
-    "@vue/vue3-jest": "^29.2.2",
-    "vue": "^3.2.47",
-    "babel-jest": "^29.*",
-    "jest": "^29.*"
   }
 }

package/src/components/on-demand/wt-cc-agent-status-timers/wt-cc-agent-status-timers.vue

@@ -4,17 +4,17 @@
       color="disabled"
       :text="status.offline"
       :size="size"
-    ></wt-indicator>
+    />
     <wt-indicator
       color="success"
       :text="status.online"
       :size="size"
-    ></wt-indicator>
+    />
     <wt-indicator
       color="primary"
       :text="status.pause"
       :size="size"
-    ></wt-indicator>
+    />
   </article>
 </template>
 

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

@@ -5,7 +5,7 @@
     @enter="enter"
     @leave="leave"
   >
-    <slot></slot>
+    <slot />
   </transition>
 </template>
 
@@ -13,7 +13,7 @@
 /* eslint-disable no-param-reassign */
 // https://markus.oberlehner.net/blog/transition-to-height-auto-with-vue/
 export default {
-  name: 'wt-expand-transition',
+  name: 'WtExpandTransition',
   methods: {
     afterEnter(element) {
       element.style.height = 'auto';

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

@@ -1,12 +1,12 @@
 <template>
   <header class="wt-app-header">
-    <slot></slot>
+    <slot />
   </header>
 </template>
 
 <script>
 export default {
-  name: 'wt-app-header',
+  name: 'WtAppHeader',
 };
 </script>
 

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

@@ -1,13 +1,16 @@
 <template>
-  <div v-clickaway="close" class="wt-app-navigator">
+  <div
+    v-clickaway="close"
+    class="wt-app-navigator"
+  >
     <wt-tooltip>
-      <template v-slot:activator>
+      <template #activator>
         <wt-icon-btn
           :class="{'active': isOpened}"
           class="wt-app-navigator__btn"
           icon="app-navigator"
           @click="isOpened = !isOpened"
-        ></wt-icon-btn>
+        />
       </template>
       {{ $t('webitelUI.appNavigator.title') }}
     </wt-tooltip>
@@ -21,7 +24,6 @@
           {{ $t('webitelUI.appNavigator.title') }}
         </h3>
         <ul class="wt-app-navigator__nav">
-
           <li
             v-if="formattedApps[WebitelApplications.AGENT]"
             :class="{'active': formattedApps[WebitelApplications.AGENT].currentApp }"
@@ -173,7 +175,6 @@
               >
             </a>
           </li>
-
         </ul>
       </nav>
     </transition>

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

@@ -1,27 +1,37 @@
 <template>
   <div class="wt-header-actions">
     <wt-tooltip>
-      <template v-slot:activator>
+      <template #activator>
         <wt-icon-btn
           v-clickaway="close"
           :class="{'active': isOpened}"
           class="wt-header-actions__btn"
           icon="account"
           @click="isOpened = !isOpened"
-        ></wt-icon-btn>
+        />
       </template>
       {{ $t('webitelUI.headerActions.account') }}
     </wt-tooltip>
 
     <transition name="fade">
-      <section v-show="isOpened" class="wt-header-actions__panel-wrapper">
-        <header v-if="isHeader" class="wt-header-actions__header">
+      <section
+        v-show="isOpened"
+        class="wt-header-actions__panel-wrapper"
+      >
+        <header
+          v-if="isHeader"
+          class="wt-header-actions__header"
+        >
           <h3
             class="wt-header-actions__name"
-          >{{ userName }}</h3>
+          >
+            {{ userName }}
+          </h3>
           <p
             class="wt-header-actions__account"
-          >{{ userAccount }}</p>
+          >
+            {{ userAccount }}
+          </p>
         </header>
         <ul class="wt-header-actions__actions-wrapper">
           <li class="wt-header-actions__action">
@@ -31,7 +41,7 @@
               target="_blank"
               @click="close"
             >
-              <wt-icon icon="docs"></wt-icon>
+              <wt-icon icon="docs" />
               <span>{{ $t('webitelUI.headerActions.docs') }}</span>
             </a>
           </li>
@@ -40,7 +50,7 @@
               class="wt-header-actions__action__link"
               @click.prevent="settings"
             >
-              <wt-icon icon="settings"></wt-icon>
+              <wt-icon icon="settings" />
               <span>{{ $t('webitelUI.headerActions.settings') }}</span>
             </a>
           </li>
@@ -49,12 +59,18 @@
               class="wt-header-actions__action__link"
               @click.prevent="logout"
             >
-              <wt-icon color="error" icon="logout"></wt-icon>
+              <wt-icon
+                color="error"
+                icon="logout"
+              />
               <span>{{ $t('webitelUI.headerActions.logout') }}</span>
             </a>
           </li>
         </ul>
-        <footer v-if="isFooter" class="wt-header-actions__footer">
+        <footer
+          v-if="isFooter"
+          class="wt-header-actions__footer"
+        >
           <p class="wt-header-actions__build__version">
             {{ buildVersion }}
           </p>
@@ -66,10 +82,7 @@
 
 <script>
 export default {
-  name: 'wt-header-actions',
-  data: () => ({
-    isOpened: false,
-  }),
+  name: 'WtHeaderActions',
   props: {
     user: {
       type: Object,
@@ -79,6 +92,9 @@ export default {
       type: Object,
     },
   },
+  data: () => ({
+    isOpened: false,
+  }),
 
   computed: {
     isHeader() {

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

@@ -7,10 +7,10 @@
       v-if="badge"
       :color-variable="badgeColorVar"
       :icon-badge="isDnd ? 'dnd' : null"
-    ></wt-badge>
+    />
     <div
-      class="wt-avatar__letters"
       v-if="isLetterAvatar"
+      class="wt-avatar__letters"
       :style="{ background: `var(${avatarLettersBackground})` }"
     >
       {{ avatarLetters }}

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

@@ -2,15 +2,15 @@
   <aside
     class="wt-badge"
     :class="{ 'wt-badge--outside': outside }"
-    :style="{ background: iconBadge ? `url(${this.showIconBadge})` : `var(--${colorVariable})` }"
-  ></aside>
+    :style="{ background: iconBadge ? `url(${showIconBadge})` : `var(--${colorVariable})` }"
+  />
 </template>
 
 <script>
 import BadgeDnd from '../../assets/icons/badge-dnd.svg';
 
 export default {
-  name: 'wt-badge',
+  name: 'WtBadge',
   props: {
     colorVariable: {
       type: String,

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

@@ -19,14 +19,16 @@
       v-if="loading"
       size="sm"
       :color="loaderColor"
-    ></wt-loader>
-    <slot v-else>no content provided</slot>
+    />
+    <slot v-else>
+      no content provided
+    </slot>
   </button>
 </template>
 
 <script>
 export default {
-  name: 'wt-button',
+  name: 'WtButton',
   props: {
     /**
      * @values 'primary', 'secondary', 'success', 'error', 'transfer', 'job', 'info'

package/src/components/wt-button-select/__tests__/WtButtonSelect.spec.js

@@ -2,10 +2,10 @@ import { shallowMount, mount } from '@vue/test-utils';
 import WtSelectButton from '../wt-button-select.vue';
 
 // helps to mock @floating-ui/vue autoUpdate method
-global.ResizeObserver = jest.fn().mockImplementation(() => ({
-  observe: jest.fn(),
-  unobserve: jest.fn(),
-  disconnect: jest.fn(),
+global.ResizeObserver = vi.fn().mockImplementation(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
 }));
 
 describe('WtSelectButton', () => {

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

@@ -10,7 +10,7 @@
       class="wt-button-select__button"
       @click="$emit('click', $event)"
     >
-      <slot></slot>
+      <slot />
     </wt-button>
 
     <wt-context-menu
@@ -18,7 +18,7 @@
       :visible="isOpened"
       @click="selectOption"
     >
-      <template v-slot:activator>
+      <template #activator>
         <wt-button
           v-bind="$attrs"
           :color="color"
@@ -33,7 +33,7 @@
             :disabled="disabled"
             class="wt-button-select__select-arrow"
             icon="arrow-down"
-          ></wt-icon>
+          />
         </wt-button>
       </template>
     </wt-context-menu>

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

@@ -20,17 +20,22 @@
         @change="inputHandler"
       >
       <span class="wt-checkbox__checkmark">
-      <wt-icon
-        :icon="checkboxIcon"
-        :color="iconColor"
-      ></wt-icon>
-    </span>
+        <wt-icon
+          :icon="checkboxIcon"
+          :color="iconColor"
+        />
+      </span>
       <!-- @slot Custom label markup -->
       <slot
         v-bind="{ label, isChecked, disabled }"
         name="label"
       >
-        <div v-if="label" class="wt-checkbox__label">{{ label }}</div>
+        <div
+          v-if="label"
+          class="wt-checkbox__label"
+        >
+          {{ label }}
+        </div>
       </slot>
     </wt-label>
   </div>
@@ -38,7 +43,7 @@
 
 <script>
 export default {
-  name: 'wt-checkbox',
+  name: 'WtCheckbox',
   model: {
     prop: 'selected',
     event: 'change',

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

@@ -1,12 +1,15 @@
 <template>
-  <span class="wt-chip" :class="`wt-chip--${color}-color`">
-    <slot></slot>
+  <span
+    class="wt-chip"
+    :class="`wt-chip--${color}-color`"
+  >
+    <slot />
   </span>
 </template>
 
 <script>
 export default {
-  name: 'wt-chip',
+  name: 'WtChip',
   props: {
     color: {
       type: String,

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

@@ -6,18 +6,18 @@
     placement="bottom-end"
     popper-class="wt-context-menu__floating-wrapper"
   >
-    <template v-slot:activator>
-      <slot name="activator"></slot>
+    <template #activator>
+      <slot name="activator" />
     </template>
-    <template v-slot:default="{ hide }">
+    <template #default="{ hide }">
       <ul
         class="wt-context-menu__menu"
         :style="`width: ${width}; min-width: ${minWidth}; max-width: ${maxWidth};`"
       >
         <li
-          class="wt-context-menu__option-wrapper"
           v-for="(option, index) of options"
           :key="index"
+          class="wt-context-menu__option-wrapper"
         >
           <!--      <a> click.prevent prevents redirect to # -->
           <a

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

@@ -1,12 +1,12 @@
 <template>
   <wt-tooltip class="wt-copy-action">
-    <template v-slot:activator>
+    <template #activator>
       <wt-icon-btn
         v-bind="$attrs"
         :icon="copied ? 'done' : 'copy'"
         class="copy-action"
         @click="copy"
-      ></wt-icon-btn>
+      />
     </template>
     {{ copied ? copiedTooltip : copyTooltip }}
   </wt-tooltip>
@@ -18,10 +18,7 @@ import copy from 'clipboard-copy';
 let copiedIdTimeout = null;
 
 export default {
-  name: 'wt-copy-action',
-  data: () => ({
-    copied: false,
-  }),
+  name: 'WtCopyAction',
   props: {
     value: {
       type: String,
@@ -34,6 +31,9 @@ export default {
       }),
     },
   },
+  data: () => ({
+    copied: false,
+  }),
   computed: {
     copyTooltip() {
       return this.tooltips.copy || this.$t('webitelUI.copyAction.copy');

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

@@ -13,7 +13,9 @@
       <slot
         v-bind="{ label }"
         name="label"
-      >{{ label }}</slot>
+      >
+        {{ label }}
+      </slot>
     </wt-label>
     <vue-datepicker
       v-bind="{ ...$attrs, ...$props }"
@@ -29,46 +31,46 @@
       @open="isOpened = true"
       @update:model-value="emit('input', $event.getTime())"
     >
-      <template v-slot:input-icon>
+      <template #input-icon>
         <wt-icon
           :color="disabled ? 'disabled' : 'default'"
           icon="calendar"
-        ></wt-icon>
+        />
       </template>
-      <template v-slot:clear-icon>
+      <template #clear-icon>
         <wt-icon
           :class="{ 'wt-datepicker__open-arrow--opened': isOpened }"
           :color="disabled ? 'disabled' : 'default'"
           class="wt-datepicker__open-arrow"
           icon="arrow-down"
-        ></wt-icon>
+        />
       </template>
-      <template v-slot:arrow-left>
+      <template #arrow-left>
         <wt-icon-btn
           icon="arrow-left"
-        ></wt-icon-btn>
+        />
       </template>
-      <template v-slot:arrow-right>
+      <template #arrow-right>
         <wt-icon-btn
           icon="arrow-right"
-        ></wt-icon-btn>
+        />
       </template>
       <template
         v-if="isDateTime"
-        v-slot:time-picker="{ time, updateTime }"
+        #time-picker="{ time, updateTime }"
       >
         <div class="datepicker__timepicker">
           <wt-time-input
             :value="time.hours"
             max-value="23"
             @input="updateTime"
-          ></wt-time-input>
+          />
           :
           <wt-time-input
             :value="time.minutes"
             max-value="59"
             @input="updateTime($event, false)"
-          ></wt-time-input>
+          />
         </div>
       </template>
     </vue-datepicker>

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

@@ -4,7 +4,7 @@
 
 <script>
 export default {
-  name: 'wt-divider',
+  name: 'WtDivider',
 };
 </script>
 

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

@@ -10,11 +10,15 @@
     </div>
     <p
       v-if="!hiddenText"
-      class="wt-dummy__text">{{ text || $t('webitelUI.dummy.text') }}</p>
+      class="wt-dummy__text"
+    >
+      {{ text || $t('webitelUI.dummy.text') }}
+    </p>
     <wt-button
       v-if="showAction"
       @click="emits('create')"
-      >{{ buttonText || $t('reusable.add') }}
+    >
+      {{ buttonText || $t('reusable.add') }}
     </wt-button>
   </div>
 </template>

package/src/components/wt-error-page/wt-error-page.vue

@@ -7,12 +7,18 @@
         :alt="errorPic.alt"
       >
       <h2
-        class="wt-error-page__title">{{ errorTitle }}</h2>
-      <p class="wt-error-page__text">{{ errorText }}</p>
+        class="wt-error-page__title"
+      >
+        {{ errorTitle }}
+      </h2>
+      <p class="wt-error-page__text">
+        {{ errorText }}
+      </p>
       <wt-button
         class="wt-error-page__action"
         @click="$emit('back')"
-      >{{ $t('webitelUI.errorPages.goBack') }}
+      >
+        {{ $t('webitelUI.errorPages.goBack') }}
       </wt-button>
     </article>
   </section>
@@ -23,7 +29,7 @@ import pic403 from '../../assets/components/organisms/wt-error-page/403.svg';
 import pic404 from '../../assets/components/organisms/wt-error-page/404.svg';
 
 export default {
-  name: 'wt-error-page',
+  name: 'WtErrorPage',
   props: {
     type: {
       type: String,