@webitel/ui-sdk 23.12.41 → 23.12.44

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

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

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

@@ -10,11 +10,15 @@
     </div>
     <p
       v-if="!hiddenText"
-      class="wt-dummy__text">{{ text || $t('webitelUI.dummy.text') }}</p>
+      class="wt-dummy__text"
+    >
+      {{ text || $t('webitelUI.dummy.text') }}
+    </p>
     <wt-button
       v-if="showAction"
       @click="emits('create')"
-      >{{ buttonText || $t('reusable.add') }}
+    >
+      {{ buttonText || $t('reusable.add') }}
     </wt-button>
   </div>
 </template>

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

@@ -7,12 +7,18 @@
         :alt="errorPic.alt"
       >
       <h2
-        class="wt-error-page__title">{{ errorTitle }}</h2>
-      <p class="wt-error-page__text">{{ errorText }}</p>
+        class="wt-error-page__title"
+      >
+        {{ errorTitle }}
+      </h2>
+      <p class="wt-error-page__text">
+        {{ errorText }}
+      </p>
       <wt-button
         class="wt-error-page__action"
         @click="$emit('back')"
-      >{{ $t('webitelUI.errorPages.goBack') }}
+      >
+        {{ $t('webitelUI.errorPages.goBack') }}
       </wt-button>
     </article>
   </section>
@@ -23,7 +29,7 @@ import pic403 from '../../assets/components/organisms/wt-error-page/403.svg';
 import pic404 from '../../assets/components/organisms/wt-error-page/404.svg';
 
 export default {
-  name: 'wt-error-page',
+  name: 'WtErrorPage',
   props: {
     type: {
       type: String,

package/src/components/wt-expansion-panel/wt-expansion-panel.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     :class="[{'wt-expansion-panel--opened':open},
-    `wt-expansion-panel--${props.size}`]"
+             `wt-expansion-panel--${props.size}`]"
     class="wt-expansion-panel"
   >
     <div
@@ -10,14 +10,14 @@
       @click="open = !open"
       @keypress.enter="open = !open"
     >
-      <slot name="title"></slot>
+      <slot name="title" />
       <wt-icon
         icon="arrow-right"
-      ></wt-icon>
+      />
     </div>
     <wt-expand-transition>
       <div v-show="open">
-        <slot></slot>
+        <slot />
       </div>
     </wt-expand-transition>
   </div>

package/src/components/wt-filters-panel-wrapper/wt-filters-panel-wrapper.vue

@@ -1,20 +1,23 @@
 <template>
-  <article class="filters-panel-wrapper" :class="{ 'filters-panel-wrapper--opened': isOpened }">
+  <article
+    class="filters-panel-wrapper"
+    :class="{ 'filters-panel-wrapper--opened': isOpened }"
+  >
     <div class="filters-wrap">
-      <slot></slot>
+      <slot />
     </div>
     <div class="actions-wrap">
       <wt-table-actions
         :icons="['filter-reset', 'settings']"
         @input="tableActionsHandler"
-      ></wt-table-actions>
+      />
     </div>
   </article>
 </template>
 
 <script>
 export default {
-  name: 'filters-panel-wrapper',
+  name: 'FiltersPanelWrapper',
   data: () => ({
     isOpened: false,
     filtersCount: 0,

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

@@ -3,12 +3,12 @@
     <slot>
       <slot name="title-wrapper">
         <h1 class="wt-headline__title">
-          <slot name="title"></slot>
+          <slot name="title" />
         </h1>
       </slot>
       <div class="wt-headline__actions-wrapper">
-        <slot name="search"></slot>
-        <slot name="actions"></slot>
+        <slot name="search" />
+        <slot name="actions" />
       </div>
     </slot>
   </header>
@@ -16,7 +16,7 @@
 
 <script>
 export default {
-  name: 'wt-headline',
+  name: 'WtHeadline',
 };
 </script>
 

package/src/components/wt-headline-nav/wt-headline-nav.vue

@@ -5,15 +5,22 @@
       :key="key"
       class="wt-headline-nav__wrapper"
     >
-      <span v-if="key !== 0" class="wt-headline-nav__indicator"></span>
+      <span
+        v-if="key !== 0"
+        class="wt-headline-nav__indicator"
+      />
       <h1 class="wt-headline-nav__title">
         <router-link
           v-if="singlePath.route"
           :to="singlePath.route"
           class="wt-headline-nav__text wt-headline-nav__text--link"
-        >{{ singlePath.name }}
+        >
+          {{ singlePath.name }}
         </router-link>
-        <span v-else class="wt-headline-nav__text">{{ singlePath.name }}</span>
+        <span
+          v-else
+          class="wt-headline-nav__text"
+        >{{ singlePath.name }}</span>
       </h1>
     </div>
   </nav>
@@ -77,7 +84,7 @@ const props = defineProps({
 }
 
 .wt-headline-nav__text {
-  color: var(--main-text-color);
+  color: var(--text-main-color);
 }
 
 .wt-headline-nav__wrapper:last-child {

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

@@ -1,18 +1,18 @@
 <template>
   <wt-tooltip class="wt-hint">
-    <template v-slot:activator>
+    <template #activator>
       <wt-icon-btn
         icon="rounded-info"
         :color="iconColor"
-      ></wt-icon-btn>
+      />
     </template>
-    <slot></slot>
+    <slot />
   </wt-tooltip>
 </template>
 
 <script>
 export default {
-  name: 'wt-hint',
+  name: 'WtHint',
   props: {
     iconColor: {
       type: String,

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

@@ -2,13 +2,13 @@
   <i
     class="wt-icon"
     :class="[
-       `wt-icon--size-${size}`,
-       `wt-icon--color-${color}`,
-       { 'wt-icon--disabled': disabled },
-     ]"
+      `wt-icon--size-${size}`,
+      `wt-icon--color-${color}`,
+      { 'wt-icon--disabled': disabled },
+    ]"
   >
     <svg class="wt-icon__icon">
-      <use :xlink:href="iconName"></use>
+      <use :xlink:href="iconName" />
     </svg>
   </i>
 </template>

package/src/components/wt-icon-action/_internals/wt-add-icon-action.vue

@@ -1,11 +1,11 @@
 <template>
   <wt-tooltip>
-    <template v-slot:activator>
+    <template #activator>
       <wt-icon-btn
         icon="plus"
         :disabled="disabled"
         @click="emit('click')"
-      ></wt-icon-btn>
+      />
     </template>
     {{ $t('webitelUI.iconAction.addActionHint') }}
   </wt-tooltip>

package/src/components/wt-icon-action/_internals/wt-delete-icon-action.vue

@@ -1,11 +1,11 @@
 <template>
   <wt-tooltip>
-    <template v-slot:activator>
+    <template #activator>
       <wt-icon-btn
         icon="bucket"
         :disabled="disabled"
         @click="emit('click')"
-      ></wt-icon-btn>
+      />
     </template>
     {{ $t('webitelUI.iconAction.deleteActionHint') }}
   </wt-tooltip>

package/src/components/wt-icon-action/_internals/wt-download-icon-action.vue

@@ -1,11 +1,11 @@
 <template>
   <wt-tooltip>
-    <template v-slot:activator>
+    <template #activator>
       <wt-icon-btn
         icon="download"
         :disabled="disabled"
         @click="emit('click')"
-      ></wt-icon-btn>
+      />
     </template>
     {{ $t('webitelUI.iconAction.downloadActionHint') }}
   </wt-tooltip>

package/src/components/wt-icon-action/_internals/wt-edit-icon-action.vue

@@ -1,11 +1,11 @@
 <template>
   <wt-tooltip>
-    <template v-slot:activator>
+    <template #activator>
       <wt-icon-btn
         icon="edit"
         :disabled="disabled"
         @click="emit('click')"
-      ></wt-icon-btn>
+      />
     </template>
     {{ $t('webitelUI.iconAction.editActionHint') }}
   </wt-tooltip>

package/src/components/wt-icon-action/_internals/wt-history-icon-action.vue

@@ -1,11 +1,11 @@
 <template>
   <wt-tooltip>
-    <template v-slot:activator>
+    <template #activator>
       <wt-icon-btn
         icon="history"
         :disabled="disabled"
         @click="emit('click')"
-      ></wt-icon-btn>
+      />
     </template>
     {{ $t('webitelUI.iconAction.historyActionHint') }}
   </wt-tooltip>

package/src/components/wt-icon-action/_internals/wt-refresh-icon-action.vue

@@ -1,11 +1,11 @@
 <template>
   <wt-tooltip>
-    <template v-slot:activator>
+    <template #activator>
       <wt-icon-btn
         icon="refresh"
         :disabled="disabled"
         @click="emit('click')"
-      ></wt-icon-btn>
+      />
     </template>
     {{ $t('reusable.refresh') }}
   </wt-tooltip>

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

@@ -3,7 +3,7 @@
     :is="actionComponent"
     :disabled="disabled"
     @click="emit('click')"
-  ></component>
+  />
 </template>
 
 <script setup>

package/src/components/wt-icon-btn/wt-icon-btn.vue

@@ -5,10 +5,11 @@
     type="button"
     @click="emit('click', $event)"
   >
+<!--    prevent icon-btn classes to fall to wt-icon -->
     <wt-icon
-      v-bind="$attrs"
+      v-bind="{ ...$attrs, class: '' }"
       :disabled="disabled"
-    ></wt-icon>
+    />
   </button>
 </template>
 

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

@@ -10,8 +10,11 @@
       :class="[
         `wt-indicator__indicator--${color}`,
       ]"
-    ></span>
-    <div v-if="isText" class="wt-indicator__text">
+    />
+    <div
+      v-if="isText"
+      class="wt-indicator__text"
+    >
       {{ text }}
     </div>
   </div>
@@ -19,7 +22,7 @@
 
 <script>
 export default {
-  name: 'wt-indicator',
+  name: 'WtIndicator',
   props: {
     color: {
       type: String,