@webitel/ui-sdk 23.12.2 → 23.12.5-1

package/package.json

@@ -1,20 +1,21 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "23.12.2",
+  "version": "23.12.5-1",
   "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,26 +35,24 @@
   ],
   "dependencies": {
     "@floating-ui/vue": "^1.0.1",
-    "@vue/compat": "^3.2.47",
-    "@vuelidate/core": "^2.0.0",
-    "@vuelidate/validators": "^2.0.0",
+    "@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",
-    "node-polyfill-webpack-plugin": "^1.1.4",
-    "plyr": "3.6.2",
+    "lodash": "^4.17.21",
+    "plyr": "3.6.3",
     "query-string": "^8.1.0",
     "sortablejs": "^1.15.0",
     "tiny-emitter": "^2.1.0",
-    "vue": "^3.2.47",
     "vue-i18n": "^9.2.2",
     "vue-multiselect": "^3.0.0-beta.1",
     "vue-observe-visibility": "^2.0.0-alpha.1",
@@ -61,34 +60,29 @@
     "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",
+    "@vue/compat": "^3.3.8",
+    "vue": "^3.3.8",
+    "@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",
     "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/api/axios/generateInstance.js

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

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/on-demand/wt-save-failed-popup/__tests__/WtPopup.spec.js

@@ -0,0 +1,9 @@
+import { shallowMount } from '@vue/test-utils';
+import WtSaveFailedPopup from '../wt-save-failed-popup.vue';
+
+describe('WtSaveFailedPopup', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtSaveFailedPopup);
+    expect(wrapper.classes('wt-save-failed-popup')).toBe(true);
+  });
+});

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

@@ -0,0 +1,70 @@
+<template>
+  <wt-popup
+    class="wt-save-failed-popup"
+    :width="500"
+    @close="closePopup"
+  >
+    <template #title>
+      {{ $t('webitelUI.saveFailedPopup.title') }}
+    </template>
+    <template #main>
+      <div class="flow-save-filed-popup__wrapper">
+        <wt-icon
+          color="error"
+          icon="attention"
+        />
+        <p>{{ $t('webitelUI.saveFailedPopup.label') }}</p>
+      </div>
+    </template>
+    <template #actions>
+      <wt-button
+        @click="save"
+      >
+        {{ $t('reusable.retry') }}
+      </wt-button>
+      <wt-button
+        color="secondary"
+        @click="download"
+      >
+        {{ $t('webitelUI.saveFailedPopup.exportToJson') }}
+      </wt-button>
+      <wt-button
+        color="secondary"
+        @click="closePopup"
+      >
+        {{ $t('reusable.close') }}
+      </wt-button>
+    </template>
+  </wt-popup>
+</template>
+
+<script>
+export default {
+  name: 'FlowSaveFailedPopup',
+  emits: ['close-popup', 'save', 'download'],
+  methods: {
+    closePopup() {
+      this.$emit('close-popup');
+    },
+    save() {
+      this.$emit('save');
+    },
+    download() {
+      this.$emit('download');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.flow-save-filed-popup__wrapper {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  text-align: center;
+
+  .wt-icon {
+    margin-bottom: var(--spacing-sm);
+  }
+}
+</style>

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/_variables.scss

@@ -15,7 +15,7 @@
   --wt-app-navigator-item-gap: var(--wt-app-header-content-gap);
   --wt-app-navigator-item-border: 1px solid;
   --wt-app-navigator-item-border-color: var(--secondary-color);
-  --wt-app-navigator-item-border-color--hover: var(--accent-color);
+  --wt-app-navigator-item-border-color--hover: var(--primary-color);
 
   --wt-header-actions-min-width: 120px;
   --wt-header-actions-content-sections-gap: var(--spacing-lg);

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

@@ -1,13 +1,10 @@
 <template>
   <header class="wt-app-header">
-    <slot></slot>
+    <slot />
   </header>
 </template>
 
-<script>
-export default {
-  name: 'wt-app-header',
-};
+<script setup>
 </script>
 
 <style lang="scss">

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="danger" 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/_variables.scss

@@ -10,7 +10,7 @@
   --avatar-size: var(--avatar-size--size-md);
 
   --online-color: var(--true-color);
-  --dnd-color: var(--accent-color);
+  --dnd-color: var(--primary-color);
   --busy-color: var(--false-color);
   --offline-color: var(--secondary-color);
 

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/_variables.scss

@@ -6,7 +6,7 @@
   // COLORS
   --btn-primary-color: var(--primary-color);
   --btn-primary-hover-color: var(--primary-hover-color);
-  --btn-primary-text-color: var(--on-primary-color);
+  --btn-primary-text-color: var(--primary-on-color);
 
   --btn-secondary-color: var(--dp-10-surface-color);
   --btn-secondary-hover-color: var(--dp-14-surface-color);
@@ -30,42 +30,12 @@
 
   --btn-transfer-color: var(--transfer-color);
   --btn-transfer-hover-color: var(--transfer-hover-color);
-  --btn-transfer-text-color: var(--on-transfer-color);
+  --btn-transfer-text-color: var(--transfer-on-color);
 
   --btn-disabled-color: var(--dp-16-surface-color);
   --btn-disabled-text-color: var(--grey-darken-1);
 }
 
 :root.theme--dark {
-  // COLORS
-  --btn-primary-color: var(--primary-color);
-  --btn-primary-hover-color: var(--primary-hover-color);
-  --btn-primary-text-color: var(--on-primary-color);
-
-  --btn-secondary-color: var(--dp-10-surface-color);
-  --btn-secondary-hover-color: var(--dp-14-surface-color);
   --btn-secondary-text-color: var(--grey-lighten-4);
-
-  --btn-success-color: var(--success-color);
-  --btn-success-hover-color: var(--success-hover-color);
-  --btn-success-text-color: var(--grey-lighten-5);
-
-  --btn-info-color: var(--info-color);
-  --btn-info-hover-color: var(--info-hover-color);
-  --btn-info-text-color: var(--grey-lighten-5);
-
-  --btn-job-color: var(--job-color);
-  --btn-job-hover-color: var(--job-hover-color);
-  --btn-job-text-color: var(--grey-lighten-5);
-
-  --btn-error-color: var(--error-color);
-  --btn-error-hover-color: var(--error-hover-color);
-  --btn-error-text-color: var(--grey-lighten-5);
-
-  --btn-transfer-color: var(--transfer-color);
-  --btn-transfer-hover-color: var(--transfer-hover-color);
-  --btn-transfer-text-color: var(--on-transfer-color);
-
-  --btn-disabled-color: var(--dp-16-surface-color);
-  --btn-disabled-text-color: var(--grey-lighten-1);
 }

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', () => {
@@ -24,15 +24,16 @@ describe('WtSelectButton', () => {
     expect(wrapper.find('.wt-button-select__button').text()).toBe(content);
   });
 
-  it('should rotate the arrow', () => {
+  it('should rotate the arrow', async () => {
     const wrapper = mount(WtSelectButton, {
-      data: () => ({
-        isOpened: true,
-      }),
       props: {
         options: [],
       },
     });
+    const arrowBtn = wrapper.findAllComponents({ name: 'wt-button' })
+           .find((component) => component.classes().includes('wt-button-select__select-btn'));
+    arrowBtn.vm.$emit('click');
+    await wrapper.vm.$nextTick();
     const wtIcon = wrapper.find('.wt-button-select__select-arrow');
     expect(wtIcon.classes()).toContain('wt-button-select__select-arrow--active');
   });