@webitel/ui-sdk 23.12.41 → 23.12.44

package/package.json

@@ -1,20 +1,21 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "23.12.41",
+  "version": "23.12.44",
   "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

@@ -3,12 +3,12 @@
     class="wt-checkbox"
     :class="{
       'wt-checkbox--active': isChecked,
-      'wt-checkbox--outline': outline,
       'wt-checkbox--disabled': disabled,
     }"
   >
     <wt-label
       v-bind="labelProps"
+      :disabled="disabled"
       class="wt-checkbox__wrapper"
     >
       <input
@@ -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',
@@ -60,10 +65,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    outline: {
-      type: Boolean,
-      default: false,
-    },
     labelProps: {
       type: Object,
       description: 'Object with props, passed down to wt-label as props',
@@ -146,46 +147,12 @@ export default {
 }
 
 .wt-checkbox:hover {
-  .wt-checkbox__label {
-    color: var(--form-label--hover-color);
-  }
-
-  ::v-deep .wt-icon__icon {
-    fill: var(--icon-color--hover);
-  }
-}
-
-.wt-checkbox--active {
-  .wt-checkbox__label {
-    color: var(--form-label--active-color);
-  }
-}
-
-.wt-checkbox--outline {
-  .wt-checkbox__label {
-    color: var(--form-outline-label-color);
-  }
-
-  ::v-deep .wt-icon__icon {
-    fill: var(--icon-outline-color);
-  }
-
-  &.wt-checkbox--active {
-    .wt-checkbox__label {
-      color: var(--form-label--active-color);
-    }
-
-    ::v-deep .wt-icon__icon {
-      fill: var(--icon-outline--active-color);
-    }
+  :deep .wt-icon__icon {
+    fill: var(--icon-active-color);
   }
 }
 
 .wt-checkbox--disabled {
   pointer-events: none;
-
-  .wt-checkbox__label {
-    color: var(--form-label--disabled-color);
-  }
 }
 </style>

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

@@ -2,6 +2,29 @@
 :root {
   --chip-padding: var(--spacing-2xs) var(--spacing-sm);
   --chip-border-radius: var(--spacing-lg);
-  --chip-bg-color: var(--accent-secondary-color);
-  --chip-bg-color--outline: var(--secondary-color);
+
+  --wt-chip-main-background-color: var(--primary-light-color);
+  --wt-chip-main-text-color: var(--primary-on-color);
+
+  --wt-chip-primary-background-color: var(--primary-color);
+  --wt-chip-primary-text-color: var(--primary-on-color);
+
+  --wt-chip-secondary-background-color: var(--dp-14-surface-color);
+  --wt-chip-secondary-text-color: var(--grey-darken-4);
+
+  --wt-chip-success-background-color: var(--success-color);
+  --wt-chip-success-text-color: var(--success-on-color);
+
+  --wt-chip-warning-background-color: var(--warning-color);
+  --wt-chip-warning-text-color: var(--warning-on-color);
+
+  --wt-chip-error-background-color: var(--error-color);
+  --wt-chip-error-text-color: var(--error-on-color);
+
+  --wt-chip-transfer-background-color: var(--transfer-color);
+  --wt-chip-transfer-text-color: var(--transfer-on-color);
+}
+
+:root.theme--dark {
+  --wt-chip-secondary-text-color: var(--grey-lighten-4);
 }

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

@@ -3,39 +3,42 @@
 
   display: inline-block;
   padding: var(--chip-padding);
-  color: var(--text-primary-color);
+  color: var(--wt-chip-main-text-color);
   border-radius: var(--chip-border-radius);
-  background: var(--chip-bg-color);
+  background: var(--wt-chip-main-background-color);
 
   &--main-color {
-    background: var(--chip-bg-color);
+    background: var(--wt-chip-main-background-color);
+    color: var(--wt-chip-main-text-color);
   }
 
-  &--outline-color {
-    background: var(--chip-bg-color--outline);
-  }
-
-  &--accent-color {
-    background: var(--primary-color);
+  &--primary-color {
+    background: var(--wt-chip-primary-background-color);
+    color: var(--wt-chip-primary-text-color);
   }
 
   &--secondary-color {
-    background: var(--secondary-color);
+    background: var(--wt-chip-secondary-background-color);
+    color: var(--wt-chip-secondary-text-color);
   }
 
-  &--secondary-50-color {
-    background: var(--secondary-color-50);
+  &--success-color {
+    background: var(--wt-chip-success-background-color);
+    color: var(--wt-chip-success-text-color);
   }
 
-  &--success-color {
-    background: var(--true-color);
+  &--warning-color {
+    background: var(--wt-chip-warning-background-color);
+    color: var(--wt-chip-warning-text-color);
   }
 
-  &--danger-color {
-    background: var(--false-color);
+  &--error-color {
+    background: var(--wt-chip-error-background-color);
+    color: var(--wt-chip-error-text-color);
   }
 
   &--transfer-color {
-    background: var(--transfer-color);
+    background: var(--wt-chip-transfer-background-color);
+    color: var(--wt-chip-transfer-text-color);
   }
 }

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

@@ -1,18 +1,23 @@
 <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: {
+    /**
+     * The color of the chip
+     * @values main, primary, secondary, success, warning, error, transfer
+     */
     color: {
       type: String,
       default: 'main',
-      options: ['main', 'outline', 'accent', 'secondary', 'secondary-50', 'success', 'danger', 'transfer'],
-      notes: '"main" and "outline" are chip-specific colors',
     },
   },
 };

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