@webitel/ui-sdk 24.12.28 → 24.12.33

package/src/components/on-demand/wt-navigation-menu/components/wt-navigation-menu.vue

@@ -26,7 +26,6 @@ import NavMenuLvl1 from './_internals/nav-menu-lvl-1.vue';
 import NavMenuLvl2 from './_internals/nav-menu-lvl-2.vue';
 
 const props = defineProps({
-
   /** entire navigation hierarchy. Value: `{ value: string, name: string, subNav: [{ value: string, route: string, name: string}] }`
    **/
 
@@ -40,7 +39,7 @@ const props = defineProps({
 
   icons: {
     type: Array,
-    default: () => ([]),
+    default: () => [],
   },
 });
 
@@ -56,7 +55,9 @@ const categories = computed(() => {
 const subcategories = computed(() => {
   if (!selected.value.subNav) return [];
   return selected.value.subNav.map((subNav) => {
-    const route = selected.value.route ? `${selected.value.route}/${subNav.route}` : subNav.route;
+    const route = selected.value.route
+      ? `${selected.value.route}/${subNav.route}`
+      : subNav.route;
     const name = subNav.name;
     return {
       ...subNav,
@@ -92,9 +93,8 @@ function select(category) {
   --button-min-height: 60px;
   --wrapper-width: 60%;
   --wrapper-height: calc(
-    var(--spacing-sm) * 2
-    + var(--button-min-height) * 7
-    + var(--spacing-2xs) * 6
+    var(--spacing-sm) * 2 + var(--button-min-height) * 7 + var(--spacing-2xs) *
+      6
   );
 
   @media only screen and (max-width: $viewport-sm) {

package/src/components/on-demand/wt-route-transition/wt-route-transition.vue

@@ -1,17 +1,17 @@
 <template>
-    <transition-slide
-      :offset="{
-              enter: ['-50%', 0],
-              leave: [0, 0]
-            }"
-      duration="200"
-      mode="out-in"
-      appear
-    >
-      <slot />
-    </transition-slide>
+  <transition-slide
+    :offset="{
+      enter: ['-50%', 0],
+      leave: [0, 0],
+    }"
+    duration="200"
+    mode="out-in"
+    appear
+  >
+    <slot />
+  </transition-slide>
 </template>
 
 <script setup>
-  import { TransitionSlide } from '@morev/vue-transitions';
+import { TransitionSlide } from '@morev/vue-transitions';
 </script>

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

@@ -17,9 +17,7 @@
       </div>
     </template>
     <template #actions>
-      <wt-button
-        @click="save"
-      >
+      <wt-button @click="save">
         {{ $t('reusable.retry') }}
       </wt-button>
       <wt-button

package/src/components/on-demand/wt-selection-popup/wt-selection-popup.vue

@@ -14,7 +14,7 @@
         <li
           v-for="(option, key) of options"
           :key="key"
-          :class="{'active': option.value === selected.value }"
+          :class="{ active: option.value === selected.value }"
           class="wt-selection-popup__item-wrapper"
           @click="selectOption(option)"
         >
@@ -32,7 +32,8 @@
             </h4>
             <p
               v-if="option.description"
-              class="popup-options__item-text">
+              class="popup-options__item-text"
+            >
               {{ option.description }}
             </p>
             <wt-tooltip>
@@ -73,7 +74,6 @@
 import { useI18n } from 'vue-i18n';
 
 const props = defineProps({
-
   /**
    * Popup title
    */

package/src/components/on-demand/wt-start-page/components/start-page-card.vue

@@ -3,13 +3,15 @@
     <header class="start-page-card__header">
       <wt-icon
         v-if="card.disabled"
-        icon="lock" />
+        icon="lock"
+      />
       {{ card.name }}
     </header>
     <section class="start-page-card__main-section">
       <img
         :alt="card.name"
-        :src="card.image">
+        :src="card.image"
+      />
       <p class="start-page-card__description">
         {{ card.text }}
       </p>

package/src/components/on-demand/wt-start-page/components/start-page-logo.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="start-page-logo">
-    <img :src="logo">
+    <img :src="logo" />
   </div>
 </template>
 

package/src/components/on-demand/wt-start-page/components/wt-start-page.vue

@@ -2,7 +2,8 @@
   <div class="wt-start-page">
     <start-page-logo
       v-if="appLogo"
-      :logo="logo" />
+      :logo="logo"
+    />
 
     <div class="wt-start-page__wrapper">
       <start-page-card
@@ -11,7 +12,6 @@
         :card="card"
       />
     </div>
-
   </div>
 </template>
 
@@ -21,7 +21,6 @@ import StartPageCard from './start-page-card.vue';
 import StartPageLogo from './start-page-logo.vue';
 
 const props = defineProps({
-
   /** entire navigation hierarchy. Value: `{ value: string, route: string, name: string, text: string, images: object - { light: string, dark: string } }`
    **/
 

package/src/components/on-demand/wt-table-transition/wt-table-transition.vue

@@ -2,9 +2,9 @@
   <div class="wt-table-transition">
     <transition-slide
       :offset="{
-              enter: ['-50%', 0],
-              leave: [0, 0]
-            }"
+        enter: ['-50%', 0],
+        leave: [0, 0],
+      }"
       duration="200"
       mode="out-in"
       appear
@@ -15,11 +15,11 @@
 </template>
 
 <script setup>
-  import { TransitionSlide } from '@morev/vue-transitions';
+import { TransitionSlide } from '@morev/vue-transitions';
 </script>
 
 <style lang="scss" scoped>
-  .wt-table-transition{
-    display:contents;
-  }
+.wt-table-transition {
+  display: contents;
+}
 </style>

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

@@ -11,9 +11,7 @@
     <!--    @slot custom actions here
             @scope `{ size<ComponentSize> }`
      -->
-    <slot
-      v-bind="{ size }"
-    />
+    <slot v-bind="{ size }" />
 
     <!--    @slot May be useful to set complex component which draws the same `wt-icon-action`
             @scope `{ action<IconAction>, size<ComponentSize> }`
@@ -36,7 +34,10 @@
 import { computed } from 'vue';
 import IconAction from '../../enums/IconAction/IconAction.enum.js';
 import WtIconAction from '../wt-icon-action/wt-icon-action.vue';
-import { tableActionsOrder, sectionActionsOrder } from './WtActionBarActionsOrder.js';
+import {
+  tableActionsOrder,
+  sectionActionsOrder,
+} from './WtActionBarActionsOrder.js';
 
 const props = defineProps({
   /**
@@ -58,7 +59,7 @@ const props = defineProps({
   },
 
   /**
-  * Leave the default value for the mode only listed in includes prop
+   * Leave the default value for the mode only listed in includes prop
    */
 
   include: {
@@ -67,7 +68,7 @@ const props = defineProps({
   },
 
   /**
-  * Leave the default values for the mode, except for those in exclude prop
+   * Leave the default values for the mode, except for those in exclude prop
    */
 
   exclude: {
@@ -79,7 +80,8 @@ const props = defineProps({
    * Built dynamically on `disabled:[IconAction]` pattern for all available [IconActions](../../enums/IconAction/Readme.md).
    */
 
-  disabled: { // Not implemented, but can be used to disable all actions
+  disabled: {
+    // Not implemented, but can be used to disable all actions
     type: Boolean,
     default: false,
   },
@@ -88,21 +90,23 @@ const props = defineProps({
     acc[`disabled:${action}`] = { type: Boolean, default: false };
     return acc;
   }, {}),
-
 });
 const emit = defineEmits([
   /**
    * click:IconAction
    */
-  ...Object.values(IconAction).map((action) => `click:${action}`)
+  ...Object.values(IconAction).map((action) => `click:${action}`),
 ]);
 
 const shownActions = computed(() => {
-  const actionsOrder = props.mode === 'section' ? sectionActionsOrder : tableActionsOrder;
+  const actionsOrder =
+    props.mode === 'section' ? sectionActionsOrder : tableActionsOrder;
 
-  if(props.include.length) return actionsOrder.filter((action) => props.include.includes(action));
+  if (props.include.length)
+    return actionsOrder.filter((action) => props.include.includes(action));
 
-  if(props.exclude.length) return actionsOrder.filter((action) => !props.exclude.includes(action));
+  if (props.exclude.length)
+    return actionsOrder.filter((action) => !props.exclude.includes(action));
 
   return actionsOrder;
 });

package/src/components/wt-app-header/__tests__/WtHeaderActions.spec.js

@@ -16,6 +16,8 @@ describe('WtHeaderActions', () => {
       props: { user },
     });
     expect(wrapper.find('.wt-header-actions__name').text()).toBe(user.name);
-    expect(wrapper.find('.wt-header-actions__account').text()).toBe(user.account);
+    expect(wrapper.find('.wt-header-actions__account').text()).toBe(
+      user.account,
+    );
   });
 });

package/src/components/wt-app-header/_variables.scss

@@ -1,4 +1,3 @@
-
 :root {
   --wt-app-header-min-height: 56px;
   --wt-app-header-padding: var(--spacing-sm);

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

@@ -4,21 +4,21 @@
   </header>
 </template>
 
-<script setup>
-</script>
+<script setup></script>
 
 <style lang="scss">
 @import './variables.scss';
 </style>
 
 <style lang="scss" scoped>
-
 .wt-app-header {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   box-sizing: border-box;
-  min-height: var(--wt-app-header-min-height); // fixed height because anything can be put inside slot, so padding won't work properly
+  min-height: var(
+    --wt-app-header-min-height
+  ); // fixed height because anything can be put inside slot, so padding won't work properly
   padding: var(--wt-app-header-padding);
   background: var(--wt-app-header-background);
   gap: var(--wt-app-header-content-gap);

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

@@ -6,7 +6,7 @@
     <wt-tooltip>
       <template #activator>
         <wt-icon-btn
-          :class="{'active': isOpened}"
+          :class="{ active: isOpened }"
           class="wt-app-navigator__btn"
           icon="app-navigator"
           @click="isOpened = !isOpened"
@@ -27,7 +27,7 @@
           <li
             v-for="app of formattedApps"
             :key="app.name"
-            :class="{'active': app.currentApp }"
+            :class="{ active: app.currentApp }"
             class="wt-app-navigator__card"
           >
             <a
@@ -40,10 +40,8 @@
                 :alt="`${app.name}-pic`"
                 :src="app.img"
                 class="wt-app-navigator__card__img"
-              >
-              <p
-                class="wt-app-navigator__card__title"
-              >
+              />
+              <p class="wt-app-navigator__card__title">
                 {{ $t(`webitelUI.appNavigator.${app.name}`) }}
               </p>
             </a>
@@ -200,7 +198,8 @@ function close() {
   border-color: var(--wt-app-navigator-item-border-color);
   border-radius: var(--border-radius);
 
-  &.active, &:hover {
+  &.active,
+  &:hover {
     border-color: var(--wt-app-navigator-item-border-color--hover);
   }
 }

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

@@ -4,7 +4,7 @@
       <template #activator>
         <wt-icon-btn
           v-clickaway="close"
-          :class="{'active': isOpened}"
+          :class="{ active: isOpened }"
           class="wt-header-actions__btn"
           icon="account"
           @click="isOpened = !isOpened"
@@ -22,14 +22,10 @@
           v-if="isHeader"
           class="wt-header-actions__header"
         >
-          <h3
-            class="wt-header-actions__name"
-          >
+          <h3 class="wt-header-actions__name">
             {{ userName }}
           </h3>
-          <p
-            class="wt-header-actions__account"
-          >
+          <p class="wt-header-actions__account">
             {{ userAccount }}
           </p>
         </header>
@@ -54,7 +50,9 @@
               <span>{{ $t('webitelUI.headerActions.settings') }}</span>
             </a>
           </li>
-          <li class="wt-header-actions__action wt-header-actions__action--logout">
+          <li
+            class="wt-header-actions__action wt-header-actions__action--logout"
+          >
             <a
               class="wt-header-actions__action__link"
               @click.prevent="logout"

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

@@ -20,7 +20,7 @@
       :src="imgSrc"
       alt="avatar"
       class="wt-avatar__img"
-    >
+    />
   </div>
 </template>
 
@@ -61,7 +61,9 @@ const avatarLetters = computed(() => {
     .split(' ')
     .map((word) => word.at(0).toUpperCase())
     .join('');
-  return abbreviation.length > 2 ? abbreviation.at(0).concat(abbreviation.at(-1)) : abbreviation;
+  return abbreviation.length > 2
+    ? abbreviation.at(0).concat(abbreviation.at(-1))
+    : abbreviation;
 });
 
 const avatarLettersBackground = computed(() => {
@@ -123,7 +125,6 @@ const badgeColorVar = computed(() => {
 </style>
 
 <style lang="scss" scoped>
-
 %wt-avatar-typo-xs {
   font-size: 10px;
 }

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

@@ -9,7 +9,7 @@
       :alt="iconBadge"
       :src="iconBadgePic"
       class="wt-badge__pic"
-    >
+    />
   </aside>
 </template>
 
@@ -57,7 +57,6 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-
 .wt-badge {
   position: absolute;
   top: 0;

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

@@ -9,7 +9,7 @@
         'wt-button--wide': wide,
         'wt-button--disabled': disabled,
         'wt-button--loading': showLoader,
-      }
+      },
     ]"
     :disabled="disabled"
     class="wt-button"
@@ -23,9 +23,7 @@
       size="sm"
     />
     <div class="wt-button__contents">
-      <slot>
-        no content provided
-      </slot>
+      <slot> no content provided </slot>
     </div>
   </button>
 </template>
@@ -150,7 +148,7 @@ export default {
     width: 100%;
   }
 
-  &--width-by-content{
+  &--width-by-content {
     min-width: 0;
   }
 

package/src/components/wt-button-select/__tests__/WtButtonSelect.spec.js

@@ -32,10 +32,14 @@ describe('WtSelectButton', () => {
     });
     const arrowBtn = wrapper
       .findAllComponents({ name: 'wt-button' })
-      .find((component) => component.classes().includes('wt-button-select__select-btn'));
+      .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');
+    expect(wtIcon.classes()).toContain(
+      'wt-button-select__select-arrow--active',
+    );
   });
 });

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

@@ -30,7 +30,7 @@
           @click="isOpened = !isOpened"
         >
           <wt-icon
-            :class="{'wt-button-select__select-arrow--active': isOpened}"
+            :class="{ 'wt-button-select__select-arrow--active': isOpened }"
             :color="color === 'primary' ? 'on-primary' : 'default'"
             :disabled="disabled"
             class="wt-button-select__select-arrow"
@@ -88,11 +88,11 @@ const isOpened = ref(false);
 const selectOption = ({ option, index }) => {
   emit('click:option', option, index);
   isOpened.value = false;
-}
+};
 
 const atClickaway = () => {
   isOpened.value = false;
-}
+};
 </script>
 
 <style lang="scss">
@@ -100,7 +100,6 @@ const atClickaway = () => {
 </style>
 
 <style lang="scss" scoped>
-
 .wt-button-select {
   position: relative;
   display: inline-flex;

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

@@ -1,4 +1,3 @@
-
 :root {
   --checkbox-icon-margin: var(--spacing-xs);
-}
+}

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

@@ -18,7 +18,7 @@
         class="wt-checkbox__input"
         type="checkbox"
         @change="inputHandler"
-      >
+      />
       <span class="wt-checkbox__checkmark">
         <wt-icon
           :color="iconColor"
@@ -110,7 +110,6 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-
 .wt-checkbox {
   box-sizing: border-box;
   width: fit-content;

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

@@ -1,4 +1,3 @@
-
 :root {
   --chip-padding: var(--spacing-2xs) var(--spacing-sm);
   --chip-border-radius: var(--spacing-lg);

package/src/components/wt-confirm-dialog/wt-confirm-dialog.vue

@@ -12,13 +12,24 @@
       <slot name="main">
         <div class="wt-confirm-dialog__content">
           <p class="wt-confirm-dialog__message">
-            {{ deleteMessage ? deleteMessage : $t('webitelUI.deleteConfirmationPopup.askingAlert', { subject }) }}
+            {{
+              deleteMessage
+                ? deleteMessage
+                : $t('webitelUI.deleteConfirmationPopup.askingAlert', {
+                    subject,
+                  })
+            }}
           </p>
         </div>
       </slot>
     </template>
     <template #actions>
-      <slot name="actions" :isDeleting="isDeleting" :confirm="confirm" :close="close">
+      <slot
+        name="actions"
+        :isDeleting="isDeleting"
+        :confirm="confirm"
+        :close="close"
+      >
         <wt-button
           :disabled="isDeleting"
           color="secondary"
@@ -44,7 +55,7 @@ import { ref, useAttrs } from 'vue';
 const props = defineProps({
   title: {
     type: String,
-    required: true
+    required: true,
   },
   deleteMessage: {
     type: String,
@@ -74,7 +85,7 @@ async function confirm() {
   try {
     isDeleting.value = true;
 
-    await props.callback()
+    await props.callback();
     close();
   } finally {
     isDeleting.value = false;
@@ -93,5 +104,4 @@ async function confirm() {
 .wt-confirm-dialog__message {
   text-align: center;
 }
-
 </style>

package/src/components/wt-context-menu/_variables.scss

@@ -4,7 +4,9 @@
   --wt-context-menu-background-color: var(--content-wrapper-color);
   --wt-context-menu-option-text-color: var(--text-main-color);
   --wt-context-menu-option-background-hover-color: var(--dp-24-surface-color);
-  --wt-context-menu-option-background-disabled-color: var(--dp-14-surface-color);
+  --wt-context-menu-option-background-disabled-color: var(
+    --dp-14-surface-color
+  );
   --wt-context-menu-option-text-disabled-color: var(--grey-lighten-3);
 }
 

package/src/components/wt-context-menu/wt-context-menu.vue

@@ -22,9 +22,7 @@
           class="wt-context-menu__option-wrapper"
         >
           <a
-            :class="[
-              { 'wt-context-menu__option--disabled': option.disabled },
-            ]"
+            :class="[{ 'wt-context-menu__option--disabled': option.disabled }]"
             class="wt-context-menu__option"
             href="#"
             @click.prevent="handleOptionClick({ option, index, hide })"

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

@@ -52,5 +52,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>