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

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

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

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

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

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

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

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

@@ -1,9 +1,7 @@
 <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"
@@ -11,28 +9,28 @@
         class="wt-pagination__size-input"
         type="number"
         @input="inputHandler"
-      />
+      ></wt-input>
     </div>
     <div class="wt-pagination__page-controls">
       <wt-tooltip>
-        <template #activator>
+        <template v-slot: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 #activator>
+        <template v-slot: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>
@@ -44,11 +42,7 @@
 import debounce from '../../scripts/debounce';
 
 export default {
-  name: 'WtPagination',
-  model: {
-    prop: 'size',
-    event: 'change',
-  },
+  name: 'wt-pagination',
   props: {
     size: {
       type: [String, Number],
@@ -71,10 +65,10 @@ export default {
     },
   },
   emits: ['change', 'input', 'prev', 'next'],
-
-  data: () => ({
-    defaultSize: '10',
-  }),
+  model: {
+    prop: 'size',
+    event: 'change',
+  },
 
   watch: {
     size(value) {
@@ -82,6 +76,10 @@ 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"
-      ref="player"
       class="wt-player__player"
+      ref="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"
-      ref="close-icon"
       class="wt-player__close-icon"
+      ref="close-icon"
       icon="close"
       @click="$emit('close')"
-    />
+    ></wt-icon-btn>
   </aside>
 </template>
 
@@ -28,7 +28,7 @@
 import Plyr from 'plyr';
 
 export default {
-  name: 'WtPlayer',
+  name: 'wt-player',
   props: {
     src: {},
     autoplay: {
@@ -74,17 +74,6 @@ export default {
     player: null,
   }),
 
-  computed: {
-    listeners() {
-      return {
-        ...this.$listeners,
-      };
-    },
-    playerType() {
-      return this.mime.includes('video') ? 'video' : 'audio';
-    },
-  },
-
   watch: {
     src() {
       this.setupDownload();
@@ -98,6 +87,17 @@ 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/wt-popup.vue

@@ -10,26 +10,20 @@
       <header class="wt-popup__header">
         <slot name="header">
           <h3 class="wt-popup__title">
-            <slot name="title" />
+            <slot name="title"></slot>
           </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" />
+      <section v-if="$slots.main" class="wt-popup__main">
+        <slot name="main"></slot>
       </section>
-      <footer
-        v-if="$slots.actions"
-        class="wt-popup__actions"
-      >
-        <slot name="actions" />
+      <footer v-if="$slots.actions" class="wt-popup__actions">
+        <slot name="actions"></slot>
       </footer>
     </aside>
   </div>
@@ -37,7 +31,7 @@
 
 <script>
 export default {
-  name: 'WtPopup',
+  name: 'wt-popup',
   props: {
     minWidth: {
       type: [Number, String],

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

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

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

@@ -16,21 +16,13 @@
         :disabled="disabled"
         @input="inputHandler"
       >
-      <wt-icon
-        class="wt-radio__icon"
-        :icon="radioIcon"
-      />
+      <wt-icon class="wt-radio__icon" :icon="radioIcon"></wt-icon>
       <!-- @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>
@@ -38,11 +30,7 @@
 
 <script>
 export default {
-  name: 'WtRadio',
-  model: {
-    prop: 'selected',
-    event: 'input',
-  },
+  name: 'wt-radio',
   props: {
     // value, set by radio
     value: {
@@ -71,6 +59,10 @@ 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';
 
-vi.mock('../../../mixins/validationMixin/useValidation');
+jest.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,17 +33,16 @@
           class="wt-search-bar__reset-icon-btn"
           icon="close"
           @click="handleInput('')"
-        />
+        ></wt-icon-btn>
         <wt-hint
           v-if="hint"
-          :icon-color="invalidColorProvider"
-        >
-          {{ hint }}
+          :iconColor="invalidColorProvider"
+        >{{ hint }}
         </wt-hint>
         <slot
           :invalid="invalid"
           name="additional-actions"
-        />
+        ></slot>
       </div>
     </div>
   </div>

package/src/components/wt-select/_multiselect.scss

@@ -1,3 +1,4 @@
+@import '~vue-multiselect/dist/vue3-multiselect.css';
 
 .multiselect ::v-deep {
   cursor: pointer;

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

@@ -10,8 +10,8 @@
     class="wt-select"
   >
     <wt-label
-      v-if="hasLabel"
       v-bind="labelProps"
+      v-if="hasLabel"
       :disabled="disabled"
       :invalid="invalid"
       class="wt-select__label"
@@ -20,9 +20,7 @@
       <slot
         v-bind="{ label }"
         name="label"
-      >
-        {{ requiredLabel }}
-      </slot>
+      >{{ requiredLabel }}</slot>
     </wt-label>
     <vue-multiselect
       v-bind="$attrs"
@@ -43,24 +41,19 @@
       @open="isOpened = true"
       v-on="listeners"
     >
-      <template
-        v-if="!isOpened"
-        #limit
-      >
-        <wt-chip class="multiselect__limit">
-          +{{ value.length - 1 }}
-        </wt-chip>
+      <template v-if="!isOpened" v-slot:limit>
+        <wt-chip class="multiselect__limit">+{{ value.length - 1 }}</wt-chip>
       </template>
 
       <!--      Slot that is used for all selected options (tags)-->
-      <template #tag="{ option }">
+      <template v-slot:tag="{ option }">
         <span class="multiselect__custom-tag">
-          {{ getOptionLabel({ option, optionLabel }) }}
+            {{ getOptionLabel({ option, optionLabel }) }}
         </span>
       </template>
 
       <!--      Slot for custom label template for single select-->
-      <template #singleLabel="{ option }">
+      <template v-slot:singleLabel="{ option }">
         <slot
           v-bind="{ option, optionLabel }"
           name="singleLabel"
@@ -72,7 +65,7 @@
       </template>
 
       <!--      Slot for custom option template -->
-      <template #option="{ option }">
+      <template v-slot:option="{ option }">
         <slot
           v-bind="{ option, optionLabel }"
           name="option"
@@ -82,18 +75,18 @@
       </template>
 
       <!--      Element for opening and closing the dropdown -->
-      <template #caret="{ toggle }">
+      <template v-slot:caret="{ toggle }">
         <!-- @mousedown.native.prevent.stop="toggle": https://github.com/shentao/vue-multiselect/issues/1204#issuecomment-615114727 -->
         <wt-icon-btn
           :disabled="disabled"
           class="multiselect__select"
           icon="arrow-down"
           @mousedown.prevent.stop="toggle"
-        />
+        ></wt-icon-btn>
       </template>
 
       <!--      Slot located before the tags -->
-      <template #clear="{}">
+      <template v-slot:clear="{}">
         <wt-icon-btn
           v-if="clearable"
           :class="{ 'hidden': !isValue }"
@@ -101,30 +94,23 @@
           class="multiselect__clear"
           icon="close"
           @click="clearValue"
-        />
+        ></wt-icon-btn>
       </template>
 
-      <template #beforeList>
-        <div
-          v-show="isLoading"
-          class="multiselect__loading-wrapper"
-        >
-          <wt-loader size="sm" />
+      <template v-slot:beforeList>
+        <div v-show="isLoading" class="multiselect__loading-wrapper">
+          <wt-loader size="sm"></wt-loader>
         </div>
       </template>
 
-      <template
-        v-if="showIntersectionObserver"
-        #afterList
-      >
-        <div v-observe-visibility="handleAfterListIntersect" />
+      <template v-if="showIntersectionObserver" v-slot:afterList>
+        <div v-observe-visibility="handleAfterListIntersect"></div>
       </template>
     </vue-multiselect>
     <wt-input-info
       v-if="isValidation"
       :invalid="invalid"
-    >
-      {{ validationText }}
+    >{{ validationText }}
     </wt-input-info>
   </div>
 </template>
@@ -133,7 +119,7 @@
 import multiselectMixin from './mixins/multiselectMixin';
 
 export default {
-  name: 'WtSelect',
+  name: 'wt-select',
   mixins: [multiselectMixin],
   props: {
     value: {},

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

@@ -17,9 +17,9 @@ and swapping height/width of this component in order to have the correct output.
 <template>
   <div
     :class="{
-      'wt-slider--disabled': disabled,
-      'wt-slider--vertical': vertical,
-    }"
+        'wt-slider--disabled': disabled,
+        'wt-slider--vertical': vertical,
+      }"
     :style="{ height: vertical && verticalHeight }"
     class="wt-slider"
   >
@@ -38,14 +38,14 @@ and swapping height/width of this component in order to have the correct output.
         class="wt-slider__slider"
         type="range"
         @input="inputHandler"
-      >
+      />
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'WtSlider',
+  name: 'wt-slider',
   props: {
     value: {
       type: Number,

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

@@ -8,17 +8,17 @@
     :searchable="false"
     @input="inputHandler"
   >
-    <template #singleLabel="{ option }">
+    <template v-slot:singleLabel="{ option }">
       <wt-indicator
         :color="option.color"
         :text="duration"
-      />
+      ></wt-indicator>
     </template>
-    <template #option="{ option }">
+    <template v-slot:option="{ option }">
       <wt-indicator
         :color="option.color"
         :text="option.text"
-      />
+      ></wt-indicator>
     </template>
   </wt-select>
 </template>
@@ -29,11 +29,7 @@ import convertDuration from '../../scripts/convertDuration';
 import StatusOptions from './_internals/StatusOptions.lookup';
 
 export default {
-  name: 'WtStatusSelect',
-  model: {
-    prop: 'status',
-    event: 'change',
-  },
+  name: 'wt-status-select',
   props: {
     status: {
       type: String,
@@ -52,6 +48,10 @@ export default {
     //   options: ['sm', 'md'],
     // },
   },
+  model: {
+    prop: 'status',
+    event: 'change',
+  },
   computed: {
     selectedOption() {
       return this.statusOptions.find((option) => option.value === this.status);

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

@@ -5,31 +5,29 @@
         class="wt-stepper-steps"
       >
         <div
-          v-for="({name, completed}, idx) in stepWithCompleted"
           class="wt-stepper-steps__wrapper"
+          v-for="({name, completed}, idx) in stepWithCompleted"
         >
           <div
             v-if="idx !== 0"
             class="wt-stepper-steps__divider"
             :class="{ 'wt-stepper-steps__divider--completed': completed }"
-          />
+          ></div>
           <wt-chip
             class="wt-stepper-steps__item"
             :color="!completed && 'secondary'"
-          >
-            {{ name }}
+          >{{ name }}
           </wt-chip>
         </div>
       </div>
     </div>
 
     <slot name="description">
-      <p class="wt-stepper-description">
-        {{ description }}
-      </p>
+      <p class="wt-stepper-description">{{ description }}</p>
     </slot>
 
-    <slot name="main" />
+    <slot name="main"></slot>
+
   </div>
 </template>
 <script setup>