@webitel/ui-sdk 23.12.41 → 23.12.44

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

@@ -1,13 +1,19 @@
 <template>
-  <aside v-clickaway="close" class="wt-navigation-bar">
+  <aside
+    v-clickaway="close"
+    class="wt-navigation-bar"
+  >
     <wt-icon-btn
       :class="{'active': isOpened}"
       class="wt-navigation-bar__menu-btn"
       icon="menu"
       @click="isOpened = !isOpened"
-    ></wt-icon-btn>
+    />
     <transition name="fade">
-      <nav v-show="isOpened" class="wt-navigation-bar__nav">
+      <nav
+        v-show="isOpened"
+        class="wt-navigation-bar__nav"
+      >
         <header class="wt-navigation-bar__nav-header">
           <!--        vue cli build target lib cant handle dynamic require :( -->
           <img
@@ -50,7 +56,7 @@
             class="wt-navigation-bar__nav-close"
             icon="close"
             @click="isOpened = false"
-          ></wt-icon-btn>
+          />
         </header>
         <wt-divider />
         <ul class="wt-navigation-bar__nav-list">
@@ -66,7 +72,8 @@
                   :to="navItem.route"
                   class="wt-navigation-bar__nav-item-link"
                   @click="close"
-                > {{ navItem.name || navItem.value }}
+                >
+                  {{ navItem.name || navItem.value }}
                 </router-link>
               </div>
             </div>
@@ -85,7 +92,7 @@
                   class="wt-navigation-bar__expansion-arrow"
                   color="active"
                   icon="arrow-right"
-                ></wt-icon>
+                />
               </button>
               <expand-transition>
                 <ul v-if="isExpanded(navItem)">
@@ -100,7 +107,8 @@
                         :to="nestedRoute(subNavItem, navItem)"
                         class="wt-navigation-bar__nav-item-link wt-navigation-bar__nav-item-link--subnav"
                         @click="close"
-                      >{{ subNavItem.name || subNavItem.value }}
+                      >
+                        {{ subNavItem.name || subNavItem.value }}
                       </router-link>
                     </div>
                   </li>
@@ -118,7 +126,7 @@
 import ExpandTransition from '../transitions/wt-expand-transition.vue';
 
 export default {
-  name: 'wt-navigation-bar',
+  name: 'WtNavigationBar',
   components: { ExpandTransition },
   props: {
     currentApp: {

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

@@ -7,10 +7,10 @@
       class="wt-notification__icon"
       :icon="notificationIcon"
       :color="notificationIconColor"
-    ></wt-icon>
+    />
 
     <p class="wt-notification__text">
-      <slot></slot>
+      <slot />
     </p>
   </article>
 </template>
@@ -18,7 +18,7 @@
 <script>
 
 export default {
-  name: 'wt-notification',
+  name: 'WtNotification',
   props: {
     type: {
       type: String,

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

@@ -1,12 +1,16 @@
 <template>
   <aside class="wt-notifications-bar">
-    <transition-group name="wt-notifications-transition" tag="div">
+    <transition-group
+      name="wt-notifications-transition"
+      tag="div"
+    >
       <wt-notification
         v-for="(notification, key) of notifications"
-        :type="notification.type"
         :key="key+notification.text"
+        :type="notification.type"
         @close="closeNotification(notification)"
-      >{{ notification.text }}
+      >
+        {{ notification.text }}
       </wt-notification>
     </transition-group>
   </aside>
@@ -14,7 +18,7 @@
 
 <script>
 export default {
-  name: 'wt-notifications-bar',
+  name: 'WtNotificationsBar',
   inject: ['$eventBus'],
   data: () => ({
     notificationDuration: 4000,
@@ -27,7 +31,7 @@ export default {
       console.error('wt-notifications-bar cannot work without globally registered eventBus', err);
     }
   },
-  destroyed() {
+  unmounted() {
     this.$eventBus.$off('notification', this.showNotification);
   },
   methods: {

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

@@ -1,17 +1,16 @@
 <template>
   <wt-headline>
-    <template v-slot:title-wrapper>
-      <slot>
-      </slot>
+    <template #title-wrapper>
+      <slot />
     </template>
-    <template v-slot:title>
-      <slot name="title"></slot>
+    <template #title>
+      <slot name="title" />
     </template>
-    <template v-slot:actions>
-      <slot name="actions"></slot>
+    <template #actions>
+      <slot name="actions" />
       <slot
-        name="primary-action"
         v-if="!hidePrimary"
+        name="primary-action"
       >
         <wt-button
           :disabled="primaryDisabled"

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

@@ -1,20 +1,23 @@
 <template>
   <section class="wt-page-wrapper">
     <div class="wt-page-wrapper__header">
-      <slot name="header"></slot>
+      <slot name="header" />
     </div>
-    <div v-if="actionsPanel" class="wt-page-wrapper__actions-panel">
-      <slot name="actions-panel"></slot>
+    <div
+      v-if="actionsPanel"
+      class="wt-page-wrapper__actions-panel"
+    >
+      <slot name="actions-panel" />
     </div>
     <div class="wt-page-wrapper__main">
-      <slot name="main"></slot>
+      <slot name="main" />
     </div>
   </section>
 </template>
 
 <script>
 export default {
-  name: 'wt-page-wrapper',
+  name: 'WtPageWrapper',
   props: {
     actionsPanel: {
       type: Boolean,

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

@@ -1,7 +1,9 @@
 <template>
   <footer class="wt-pagination">
     <div class="wt-pagination__size">
-      <div class="wt-pagination__size-text">{{ $t('webitelUI.pagination.sizeText') }}</div>
+      <div class="wt-pagination__size-text">
+        {{ $t('webitelUI.pagination.sizeText') }}
+      </div>
       <wt-input
         :number-max="1000"
         :number-min="1"
@@ -9,28 +11,28 @@
         class="wt-pagination__size-input"
         type="number"
         @input="inputHandler"
-      ></wt-input>
+      />
     </div>
     <div class="wt-pagination__page-controls">
       <wt-tooltip>
-        <template v-slot:activator>
+        <template #activator>
           <wt-icon-btn
             :disabled="!prev"
             class="wt-pagination__page-control"
             icon="arrow-left"
             @click="goPrev"
-          ></wt-icon-btn>
+          />
         </template>
         {{ $t('webitelUI.pagination.prev') }}
       </wt-tooltip>
       <wt-tooltip>
-        <template v-slot:activator>
+        <template #activator>
           <wt-icon-btn
             :disabled="!next"
             class="wt-pagination__page-control"
             icon="arrow-right"
             @click="goNext"
-          ></wt-icon-btn>
+          />
         </template>
         {{ $t('webitelUI.pagination.next') }}
       </wt-tooltip>
@@ -42,7 +44,11 @@
 import debounce from '../../scripts/debounce';
 
 export default {
-  name: 'wt-pagination',
+  name: 'WtPagination',
+  model: {
+    prop: 'size',
+    event: 'change',
+  },
   props: {
     size: {
       type: [String, Number],
@@ -65,10 +71,10 @@ export default {
     },
   },
   emits: ['change', 'input', 'prev', 'next'],
-  model: {
-    prop: 'size',
-    event: 'change',
-  },
+
+  data: () => ({
+    defaultSize: '10',
+  }),
 
   watch: {
     size(value) {
@@ -76,10 +82,6 @@ export default {
     },
   },
 
-  data: () => ({
-    defaultSize: '10',
-  }),
-
   created() {
     if (this.debounce) this.changeSize = debounce(this.changeSize, this.debounceDelay);
   },

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

@@ -5,22 +5,22 @@
   >
     <component
       :is="playerType"
-      class="wt-player__player"
       ref="player"
+      class="wt-player__player"
       :src="src"
       :autoplay="autoplay"
       controls
       v-on="listeners"
-    ></component>
+    />
 
     <!-- The "wt-icon-btn" component is append in to "audio" element by "setCloseIcon" method-->
     <wt-icon-btn
       v-if="closable"
-      class="wt-player__close-icon"
       ref="close-icon"
+      class="wt-player__close-icon"
       icon="close"
       @click="$emit('close')"
-    ></wt-icon-btn>
+    />
   </aside>
 </template>
 
@@ -28,7 +28,7 @@
 import Plyr from 'plyr';
 
 export default {
-  name: 'wt-player',
+  name: 'WtPlayer',
   props: {
     src: {},
     autoplay: {
@@ -74,6 +74,17 @@ export default {
     player: null,
   }),
 
+  computed: {
+    listeners() {
+      return {
+        ...this.$listeners,
+      };
+    },
+    playerType() {
+      return this.mime.includes('video') ? 'video' : 'audio';
+    },
+  },
+
   watch: {
     src() {
       this.setupDownload();
@@ -87,17 +98,6 @@ export default {
     this.setupPlayer();
   },
 
-  computed: {
-    listeners() {
-      return {
-        ...this.$listeners,
-      };
-    },
-    playerType() {
-      return this.mime.includes('video') ? 'video' : 'audio';
-    },
-  },
-
   methods: {
     async setupPlayer() {
       await this.$nextTick(); // test is failing to render component if element is passed to Plyr as Vue $ref

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

@@ -3,16 +3,17 @@
   --popup-wrapper-z-index: 11;
 
   --popup-shadow-opacity: 0.8;
-  --popup-shadow-color: hsla(var(--_contrast-color), var(--popup-shadow-opacity));
+  --wt-popup-shadow-color: hsla(0, 0%, 0%, var(--popup-shadow-opacity));
 
   --popup-max-height: 90%;
 
-  --popup-bg-color: var(--main-color);
+  --wt-popup-background-color: var(--dp-24-surface-color);
   --popup-sections-gap: var(--spacing-sm);
   --popup-padding: var(--popup-sections-gap);
 
   --popup-header-padding: var(--spacing-xs);
-  --popup-header-bg-color: var(--secondary-color);
+  --wt-popup-header-background-color: var(--dp-18-surface-color);
+  --wt-popup-header-text-color: var(--text-main-color);
 
   --popup-main-section-padding-right: var(--spacing-xs); // scroll offset
 

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

@@ -10,20 +10,26 @@
       <header class="wt-popup__header">
         <slot name="header">
           <h3 class="wt-popup__title">
-            <slot name="title"></slot>
+            <slot name="title" />
           </h3>
         </slot>
         <wt-icon-btn
           class="wt-popup__close-btn"
           icon="close"
           @click="$emit('close')"
-        ></wt-icon-btn>
+        />
       </header>
-      <section v-if="$slots.main" class="wt-popup__main">
-        <slot name="main"></slot>
+      <section
+        v-if="$slots.main"
+        class="wt-popup__main"
+      >
+        <slot name="main" />
       </section>
-      <footer v-if="$slots.actions" class="wt-popup__actions">
-        <slot name="actions"></slot>
+      <footer
+        v-if="$slots.actions"
+        class="wt-popup__actions"
+      >
+        <slot name="actions" />
       </footer>
     </aside>
   </div>
@@ -31,7 +37,7 @@
 
 <script>
 export default {
-  name: 'wt-popup',
+  name: 'WtPopup',
   props: {
     minWidth: {
       type: [Number, String],
@@ -44,6 +50,7 @@ export default {
       default: false,
     },
   },
+  emits: ['close'],
   computed: {
     popupStyle() {
       let style = '';
@@ -71,7 +78,7 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--popup-shadow-color);
+  background: var(--wt-popup-shadow-color);
 }
 
 .wt-popup__popup {
@@ -82,7 +89,7 @@ export default {
   margin: var(--popup-padding);
   padding: var(--popup-padding);
   border-radius: var(--border-radius);
-  background: var(--popup-bg-color);
+  background: var(--wt-popup-background-color);
   box-shadow: var(--elevation-10);
   gap: var(--popup-sections-gap);
 }
@@ -93,9 +100,10 @@ export default {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  color: var(--wt-popup-header-text-color);
   padding: var(--popup-header-padding);
   border-radius: var(--border-radius);
-  background: var(--popup-header-bg-color);
+  background: var(--wt-popup-header-background-color);
   gap: var(--popup-header-padding);
 
   .wt-popup__title {

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

@@ -1,18 +1,22 @@
 <template>
   <div
-    class="wt-progress-bar" :class="[{
-      'wt-progress-bar--overflow': isOverflow,
-     },
-     `wt-progress-bar--${color}`
-     ]"
+    class="wt-progress-bar"
+    :class="[{
+               'wt-progress-bar--overflow': isOverflow,
+             },
+             `wt-progress-bar--${color}`
+    ]"
   >
-    <span class="wt-progress-bar__progress" :style="`width: ${this.progressWidth}%;`"></span>
+    <span
+      class="wt-progress-bar__progress"
+      :style="`width: ${progressWidth}%;`"
+    />
   </div>
 </template>
 
 <script>
 export default {
-  name: 'wt-progress-bar',
+  name: 'WtProgressBar',
   props: {
     max: {
       type: [Number, String],

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

@@ -16,13 +16,21 @@
         :disabled="disabled"
         @input="inputHandler"
       >
-      <wt-icon class="wt-radio__icon" :icon="radioIcon"></wt-icon>
+      <wt-icon
+        class="wt-radio__icon"
+        :icon="radioIcon"
+      />
       <!-- @slot Custom input label -->
       <slot
         v-bind="{ label, isChecked, disabled }"
         name="label"
       >
-        <div v-if="label" class="wt-radio__label">{{ label }}</div>
+        <div
+          v-if="label"
+          class="wt-radio__label"
+        >
+          {{ label }}
+        </div>
       </slot>
     </wt-label>
   </div>
@@ -30,7 +38,11 @@
 
 <script>
 export default {
-  name: 'wt-radio',
+  name: 'WtRadio',
+  model: {
+    prop: 'selected',
+    event: 'input',
+  },
   props: {
     // value, set by radio
     value: {
@@ -59,10 +71,6 @@ export default {
       default: false,
     },
   },
-  model: {
-    prop: 'selected',
-    event: 'input',
-  },
   computed: {
     isChecked() {
       return this.value === this.selected;

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

@@ -15,13 +15,13 @@
       v-if="loading"
       size="sm"
       :color="loaderColor"
-    ></wt-loader>
+    />
     <wt-icon
       v-else
       :color="iColor"
       :icon="icon"
       :size="size"
-    ></wt-icon>
+    />
   </button>
 </template>
 

package/src/components/wt-search-bar/__tests__/WtSearchBar.spec.js

@@ -3,7 +3,7 @@ import { shallowMount } from '@vue/test-utils';
 import WtSearchBar from '../wt-search-bar.vue';
 import { useValidation } from '../../../mixins/validationMixin/useValidation';
 
-jest.mock('../../../mixins/validationMixin/useValidation');
+vi.mock('../../../mixins/validationMixin/useValidation');
 useValidation.mockImplementation(() => ({
   isValidation: ref(false),
   invalid: ref(false),

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

@@ -15,7 +15,7 @@
           <wt-icon
             :color="invalidColorProvider"
             icon="search"
-          ></wt-icon>
+          />
         </slot>
       </div>
       <input
@@ -33,16 +33,17 @@
           class="wt-search-bar__reset-icon-btn"
           icon="close"
           @click="handleInput('')"
-        ></wt-icon-btn>
+        />
         <wt-hint
           v-if="hint"
-          :iconColor="invalidColorProvider"
-        >{{ hint }}
+          :icon-color="invalidColorProvider"
+        >
+          {{ hint }}
         </wt-hint>
         <slot
           :invalid="invalid"
           name="additional-actions"
-        ></slot>
+        />
       </div>
     </div>
   </div>