@webitel/ui-sdk 23.12.39-vite-6 → 23.12.40

package/package.json

@@ -1,18 +1,20 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "23.12.39-vite-6",
+  "version": "23.12.40",
   "private": false,
   "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "serve": "vite preview",
-    "test:unit": "vitest",
-    "lint:fix": "eslint --fix --ext .js,.vue src",
+    "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",
     "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"
+    "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"
   },
-  "main": "./dist/@webitel/ui-sdk.umd.js",
+  "main": "./dist/@webitel/ui-sdk.common.js",
   "files": [
     "dist/*",
     "src/api/*",
@@ -38,6 +40,7 @@
     "@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",
@@ -46,7 +49,8 @@
     "jszip": "^3.5.0",
     "jszip-utils": "^0.1.0",
     "lodash": "^4.17.21",
-    "plyr": "3.6.3",
+    "node-polyfill-webpack-plugin": "^1.1.4",
+    "plyr": "3.6.2",
     "query-string": "^8.1.0",
     "sortablejs": "^1.15.0",
     "tiny-emitter": "^2.1.0",
@@ -58,21 +62,35 @@
     "webitel-sdk": "^23.7.5"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "4.4.1",
-    "@vitest/coverage-v8": "^0.34.6",
+    "@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",
     "@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.53.0",
-    "eslint-plugin-vue": "^9.18.1",
-    "happy-dom": "^12.9.1",
-    "husky": "^8.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",
     "sass": "^1.51.0",
-    "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",
-    "vitest": "^0.34.6",
+    "sass-loader": "^12.6.0",
+    "svg-sprite-loader": "^6.0.11",
+    "vue-cli-plugin-styleguidist": "~4.72.4",
     "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/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: 'WtExpandTransition',
+  name: 'wt-expand-transition',
   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: 'WtAppHeader',
+  name: 'wt-app-header',
 };
 </script>
 

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

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

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

@@ -1,37 +1,27 @@
 <template>
   <div class="wt-header-actions">
     <wt-tooltip>
-      <template #activator>
+      <template v-slot: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">
@@ -41,7 +31,7 @@
               target="_blank"
               @click="close"
             >
-              <wt-icon icon="docs" />
+              <wt-icon icon="docs"></wt-icon>
               <span>{{ $t('webitelUI.headerActions.docs') }}</span>
             </a>
           </li>
@@ -50,7 +40,7 @@
               class="wt-header-actions__action__link"
               @click.prevent="settings"
             >
-              <wt-icon icon="settings" />
+              <wt-icon icon="settings"></wt-icon>
               <span>{{ $t('webitelUI.headerActions.settings') }}</span>
             </a>
           </li>
@@ -59,18 +49,12 @@
               class="wt-header-actions__action__link"
               @click.prevent="logout"
             >
-              <wt-icon
-                color="error"
-                icon="logout"
-              />
+              <wt-icon color="error" icon="logout"></wt-icon>
               <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>
@@ -82,7 +66,10 @@
 
 <script>
 export default {
-  name: 'WtHeaderActions',
+  name: 'wt-header-actions',
+  data: () => ({
+    isOpened: false,
+  }),
   props: {
     user: {
       type: Object,
@@ -92,9 +79,6 @@ 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
-      v-if="isLetterAvatar"
       class="wt-avatar__letters"
+      v-if="isLetterAvatar"
       :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(${showIconBadge})` : `var(--${colorVariable})` }"
-  />
+    :style="{ background: iconBadge ? `url(${this.showIconBadge})` : `var(--${colorVariable})` }"
+  ></aside>
 </template>
 
 <script>
 import BadgeDnd from '../../assets/icons/badge-dnd.svg';
 
 export default {
-  name: 'WtBadge',
+  name: 'wt-badge',
   props: {
     colorVariable: {
       type: String,

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

@@ -19,16 +19,14 @@
       v-if="loading"
       size="sm"
       :color="loaderColor"
-    />
-    <slot v-else>
-      no content provided
-    </slot>
+    ></wt-loader>
+    <slot v-else>no content provided</slot>
   </button>
 </template>
 
 <script>
 export default {
-  name: 'WtButton',
+  name: 'wt-button',
   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 = vi.fn().mockImplementation(() => ({
-  observe: vi.fn(),
-  unobserve: vi.fn(),
-  disconnect: vi.fn(),
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.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 #activator>
+      <template v-slot: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,22 +20,17 @@
         @change="inputHandler"
       >
       <span class="wt-checkbox__checkmark">
-        <wt-icon
-          :icon="checkboxIcon"
-          :color="iconColor"
-        />
-      </span>
+      <wt-icon
+        :icon="checkboxIcon"
+        :color="iconColor"
+      ></wt-icon>
+    </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>
@@ -43,7 +38,7 @@
 
 <script>
 export default {
-  name: 'WtCheckbox',
+  name: 'wt-checkbox',
   model: {
     prop: 'selected',
     event: 'change',

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

@@ -1,15 +1,12 @@
 <template>
-  <span
-    class="wt-chip"
-    :class="`wt-chip--${color}-color`"
-  >
-    <slot />
+  <span class="wt-chip" :class="`wt-chip--${color}-color`">
+    <slot></slot>
   </span>
 </template>
 
 <script>
 export default {
-  name: 'WtChip',
+  name: 'wt-chip',
   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 #activator>
-      <slot name="activator" />
+    <template v-slot:activator>
+      <slot name="activator"></slot>
     </template>
-    <template #default="{ hide }">
+    <template v-slot: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 #activator>
+    <template v-slot: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,7 +18,10 @@ import copy from 'clipboard-copy';
 let copiedIdTimeout = null;
 
 export default {
-  name: 'WtCopyAction',
+  name: 'wt-copy-action',
+  data: () => ({
+    copied: false,
+  }),
   props: {
     value: {
       type: String,
@@ -31,9 +34,6 @@ 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,9 +13,7 @@
       <slot
         v-bind="{ label }"
         name="label"
-      >
-        {{ label }}
-      </slot>
+      >{{ label }}</slot>
     </wt-label>
     <vue-datepicker
       v-bind="{ ...$attrs, ...$props }"
@@ -31,46 +29,46 @@
       @open="isOpened = true"
       @update:model-value="emit('input', $event.getTime())"
     >
-      <template #input-icon>
+      <template v-slot:input-icon>
         <wt-icon
           :color="disabled ? 'disabled' : 'default'"
           icon="calendar"
-        />
+        ></wt-icon>
       </template>
-      <template #clear-icon>
+      <template v-slot: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 #arrow-left>
+      <template v-slot:arrow-left>
         <wt-icon-btn
           icon="arrow-left"
-        />
+        ></wt-icon-btn>
       </template>
-      <template #arrow-right>
+      <template v-slot:arrow-right>
         <wt-icon-btn
           icon="arrow-right"
-        />
+        ></wt-icon-btn>
       </template>
       <template
         v-if="isDateTime"
-        #time-picker="{ time, updateTime }"
+        v-slot: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: 'WtDivider',
+  name: 'wt-divider',
 };
 </script>