@webitel/ui-sdk 23.12.40 → 23.12.43

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: 'wt-slider',
+  name: 'WtSlider',
   props: {
     value: {
       type: Number,

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

@@ -8,17 +8,17 @@
     :searchable="false"
     @input="inputHandler"
   >
-    <template v-slot:singleLabel="{ option }">
+    <template #singleLabel="{ option }">
       <wt-indicator
         :color="option.color"
         :text="duration"
-      ></wt-indicator>
+      />
     </template>
-    <template v-slot:option="{ option }">
+    <template #option="{ option }">
       <wt-indicator
         :color="option.color"
         :text="option.text"
-      ></wt-indicator>
+      />
     </template>
   </wt-select>
 </template>
@@ -29,7 +29,11 @@ import convertDuration from '../../scripts/convertDuration';
 import StatusOptions from './_internals/StatusOptions.lookup';
 
 export default {
-  name: 'wt-status-select',
+  name: 'WtStatusSelect',
+  model: {
+    prop: 'status',
+    event: 'change',
+  },
   props: {
     status: {
       type: String,
@@ -48,10 +52,6 @@ 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,29 +5,31 @@
         class="wt-stepper-steps"
       >
         <div
-          class="wt-stepper-steps__wrapper"
           v-for="({name, completed}, idx) in stepWithCompleted"
+          class="wt-stepper-steps__wrapper"
         >
           <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>
-
+    <slot name="main" />
   </div>
 </template>
 <script setup>

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

@@ -19,13 +19,18 @@
         :disabled="disabled"
         @change="inputHandler"
       >
-      <span class="wt-switcher__checkmark"></span>
+      <span class="wt-switcher__checkmark" />
       <!-- @slot Custom input label -->
       <slot
         v-bind="{ label, value, disabled }"
         name="label"
       >
-        <div v-if="label" class="wt-switcher__label">{{ label }}</div>
+        <div
+          v-if="label"
+          class="wt-switcher__label"
+        >
+          {{ label }}
+        </div>
       </slot>
     </wt-label>
   </div>
@@ -33,7 +38,11 @@
 
 <script>
 export default {
-  name: 'wt-switcher',
+  name: 'WtSwitcher',
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
   props: {
     value: {
       type: Boolean,
@@ -56,10 +65,6 @@ export default {
       description: 'Object with props, passed down to wt-label as props',
     },
   },
-  model: {
-    prop: 'value',
-    event: 'change',
-  },
   methods: {
     inputHandler() {
       this.$emit('change', !this.value);

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

@@ -2,86 +2,124 @@
   <div class="wt-table">
     <table class="wt-table__table">
       <thead class="wt-table__head">
-      <tr :style="columnsStyle" class="wt-table__tr wt-table__tr__head">
-        <th v-if="selectable" class="wt-table__th wt-table__th--checkbox">
-          <wt-checkbox
-            :selected="isAllSelected"
-            @change="selectAll"
-          ></wt-checkbox>
-        </th>
-        <th
-          v-for="(col, key) of dataHeaders"
-          :key="key"
-          :class="[
-           {'wt-table__th--sortable': isColSortable(col)},
-           `wt-table__th--sort-${col.sort}`,
-        ]"
-          class="wt-table__th"
-          @click="sort(col)"
+        <tr
+          :style="columnsStyle"
+          class="wt-table__tr wt-table__tr__head"
         >
-          <div class="wt-table__th__text">{{ col.text }}</div>
-          <wt-icon
-            v-if="sortable"
-            class="wt-table__th__sort-arrow wt-table__th__sort-arrow--asc"
-            icon="sort-arrow-up"
-            size="sm"
-          ></wt-icon>
-          <wt-icon
-            v-if="sortable"
-            class="wt-table__th__sort-arrow wt-table__th__sort-arrow--desc"
-            icon="sort-arrow-down"
-            size="sm"
-          ></wt-icon>
-        </th>
-        <th v-if="gridActions" class="wt-table__th__actions">
-          <slot name="actions-header"></slot>
-        </th>
-      </tr>
+          <th
+            v-if="selectable"
+            class="wt-table__th wt-table__th--checkbox"
+          >
+            <wt-checkbox
+              :selected="isAllSelected"
+              @change="selectAll"
+            />
+          </th>
+          <th
+            v-for="(col, key) of dataHeaders"
+            :key="key"
+            :class="[
+              {'wt-table__th--sortable': isColSortable(col)},
+              `wt-table__th--sort-${col.sort}`,
+            ]"
+            class="wt-table__th"
+            @click="sort(col)"
+          >
+            <div class="wt-table__th__text">
+              {{ col.text }}
+            </div>
+            <wt-icon
+              v-if="sortable"
+              class="wt-table__th__sort-arrow wt-table__th__sort-arrow--asc"
+              icon="sort-arrow-up"
+              size="sm"
+            />
+            <wt-icon
+              v-if="sortable"
+              class="wt-table__th__sort-arrow wt-table__th__sort-arrow--desc"
+              icon="sort-arrow-down"
+              size="sm"
+            />
+          </th>
+          <th
+            v-if="gridActions"
+            class="wt-table__th__actions"
+          >
+            <slot name="actions-header" />
+          </th>
+        </tr>
       </thead>
 
       <tbody class="wt-table__body">
-      <tr
-        v-for="(row, dataKey) of data"
-        :key="dataKey"
-        :class="`wt-table__tr__${row.id || dataKey}`"
-        :style="columnsStyle"
-        class="wt-table__tr wt-table__tr__body"
-      >
-        <td v-if="selectable" class="wt-table__td wt-table__td--checkbox">
-          <wt-checkbox
-            :selected="row._isSelected"
-            @change="row._isSelected = !row._isSelected"
-          ></wt-checkbox>
-        </td>
-
-        <td
-          v-for="(col, headerKey) of dataHeaders"
-          :key="headerKey"
-          class="wt-table__td"
+        <tr
+          v-for="(row, dataKey) of data"
+          :key="dataKey"
+          :class="`wt-table__tr__${row.id || dataKey}`"
+          :style="columnsStyle"
+          class="wt-table__tr wt-table__tr__body"
         >
-          <slot :index="dataKey" :item="row" :name="col.value">
-            <div>{{ row[col.value] }}</div>
-          </slot>
-        </td>
+          <td
+            v-if="selectable"
+            class="wt-table__td wt-table__td--checkbox"
+          >
+            <wt-checkbox
+              :selected="row._isSelected"
+              @change="row._isSelected = !row._isSelected"
+            />
+          </td>
 
-        <td v-if="gridActions" class="wt-table__td__actions">
-          <slot :index="dataKey" :item="row" name="actions"></slot>
-        </td>
-      </tr>
+          <td
+            v-for="(col, headerKey) of dataHeaders"
+            :key="headerKey"
+            class="wt-table__td"
+          >
+            <slot
+              :index="dataKey"
+              :item="row"
+              :name="col.value"
+            >
+              <div>{{ row[col.value] }}</div>
+            </slot>
+          </td>
+
+          <td
+            v-if="gridActions"
+            class="wt-table__td__actions"
+          >
+            <slot
+              :index="dataKey"
+              :item="row"
+              name="actions"
+            />
+          </td>
+        </tr>
       </tbody>
 
-      <tfoot v-if="isTableFooter" class="wt-table__foot">
-      <tr :style="columnsStyle" class="wt-table__tr wt-table__tr__foot">
-        <!--        empty checkbox column -->
-        <th v-if="selectable" class="wt-table__th__checkbox"></th>
-        <td
-          v-for="(col, headerKey) of dataHeaders"
-          :key="headerKey"
-          class="wt-table__td"
+      <tfoot
+        v-if="isTableFooter"
+        class="wt-table__foot"
+      >
+        <tr
+          :style="columnsStyle"
+          class="wt-table__tr wt-table__tr__foot"
         >
-          <slot :header="col" :index="headerKey" :name="`${col.value}-footer`"></slot>
-        </td>
-      </tr>
+          <!--        empty checkbox column -->
+          <th
+            v-if="selectable"
+            class="wt-table__th__checkbox"
+          />
+          <td
+            v-for="(col, headerKey) of dataHeaders"
+            :key="headerKey"
+            class="wt-table__td"
+          >
+            <slot
+              :header="col"
+              :index="headerKey"
+              :name="`${col.value}-footer`"
+            />
+          </td>
+        </tr>
       </tfoot>
     </table>
   </div>
@@ -91,7 +129,7 @@
 import getNextSortOrder from './_internals/getSortOrder';
 
 export default {
-  name: 'wt-table',
+  name: 'WtTable',
   props: {
     headers: {
       type: Array,

package/src/components/wt-table-actions/wt-table-actions.vue

@@ -1,58 +1,58 @@
 <template>
   <aside class="wt-table-actions">
-    <slot></slot>
+    <slot />
     <wt-tooltip v-if="isImport">
-      <template v-slot:activator>
+      <template #activator>
         <wt-icon-btn
           icon="download"
           @click="$emit('input', 'import')"
-        ></wt-icon-btn>
+        />
       </template>
       {{ $t('reusable.import') }}
     </wt-tooltip>
     <wt-tooltip v-if="isExport">
-      <template v-slot:activator>
+      <template #activator>
         <wt-icon-btn
           icon="upload"
           @click="$emit('input', 'export')"
-        ></wt-icon-btn>
+        />
       </template>
       {{ $t('reusable.export') }}
     </wt-tooltip>
     <wt-tooltip v-if="isFilterReset">
-      <template v-slot:activator>
+      <template #activator>
         <wt-icon-btn
           icon="clear"
           @click="$emit('input', 'filterReset')"
-        ></wt-icon-btn>
+        />
       </template>
       {{ $t('webitelUI.tableActions.filterReset') }}
     </wt-tooltip>
     <wt-tooltip v-if="isColumnSelect">
-      <template v-slot:activator>
+      <template #activator>
         <wt-icon-btn
           icon="column-select"
           @click="$emit('input', 'columnSelect')"
-        ></wt-icon-btn>
+        />
       </template>
       {{ $t('webitelUI.tableActions.columnSelect') }}
     </wt-tooltip>
     <wt-tooltip v-if="isRefresh">
-      <template v-slot:activator>
+      <template #activator>
         <wt-icon-btn
           icon="refresh"
           @click="$emit('input', 'refresh')"
-        ></wt-icon-btn>
+        />
       </template>
       {{ $t('webitelUI.tableActions.refreshTable') }}
     </wt-tooltip>
     <wt-tooltip v-if="isSettings">
-      <template v-slot:activator>
+      <template #activator>
         <wt-icon-btn
           :class="{'active': isSettingsActive}"
           icon="filter"
           @click="$emit('input', 'settings')"
-        ></wt-icon-btn>
+        />
       </template>
       {{ $t('webitelUI.tableActions.expandFilters') }}
     </wt-tooltip>
@@ -61,7 +61,7 @@
 
 <script>
 export default {
-  name: 'wt-table-actions',
+  name: 'WtTableActions',
   props: {
     icons: {
       type: Array,

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

@@ -1,11 +1,11 @@
 <template>
   <div class="wt-table-column-select">
     <wt-tooltip>
-      <template v-slot:activator>
+      <template #activator>
         <wt-icon-btn
           icon="column-select"
           @click="openPopup"
-        ></wt-icon-btn>
+        />
       </template>
       {{ $t('webitelUI.tableColumnSelect.title') }}
     </wt-tooltip>
@@ -14,18 +14,18 @@
       class="wt-table-column-select__popup"
       @close="close"
     >
-      <template v-slot:title>
+      <template #title>
         {{ $t('webitelUI.tableColumnSelect.title') }}
       </template>
-      <template v-slot:main>
+      <template #main>
         <div class="wt-table-column-select__popup-list-wrap">
           <ul
             class="wt-table-column-select__popup-list"
             :class="{
-            'wt-table-column-select__popup-list--md':
-            changeableDraft.length > 10 && changeableDraft.length <= 20,
-            'wt-table-column-select__popup-list--lg':
-            changeableDraft.length > 20
+              'wt-table-column-select__popup-list--md':
+                changeableDraft.length > 10 && changeableDraft.length <= 20,
+              'wt-table-column-select__popup-list--lg':
+                changeableDraft.length > 20
             }"
           >
             <li
@@ -37,20 +37,22 @@
               <wt-checkbox
                 v-model="column.show"
                 :label="shownColLabel(column)"
-              ></wt-checkbox>
+              />
             </li>
           </ul>
         </div>
       </template>
-      <template v-slot:actions>
+      <template #actions>
         <wt-button
           @click="setShownColumns"
-        >{{ $t('reusable.add') }}
+        >
+          {{ $t('reusable.add') }}
         </wt-button>
         <wt-button
           color="secondary"
           @click="close"
-        >{{ $t('reusable.cancel') }}
+        >
+          {{ $t('reusable.cancel') }}
         </wt-button>
       </template>
     </wt-popup>
@@ -61,7 +63,12 @@
 import deepCopy from 'deep-copy';
 
 export default {
-  name: 'wt-table-column-select',
+  name: 'WtTableColumnSelect',
+
+  model: {
+    prop: 'headers',
+    event: 'change',
+  },
   props: {
     headers: {
       type: Array,
@@ -75,23 +82,10 @@ export default {
     },
   },
 
-  model: {
-    prop: 'headers',
-    event: 'change',
-  },
-
   data: () => ({
     draft: [], // headers draft
     isColumnSelectPopup: false,
   }),
-
-  watch: {
-    isColumnSelectPopup: {
-      handler() {
-        this.fillHeadersDraft();
-      },
-    },
-  },
   computed: {
     changeableDraft() {
       return this.draft.filter((header) => !this.staticHeaders.includes(header.value)).sort((a, b) => {
@@ -100,6 +94,14 @@ export default {
       });
     },
   },
+
+  watch: {
+    isColumnSelectPopup: {
+      handler() {
+        this.fillHeadersDraft();
+      },
+    },
+  },
   methods: {
     shownColLabel({ text, locale }) {
       if (!text && locale) {

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

@@ -26,14 +26,19 @@
           transform: `translateX(${activeLineOffset}px)`
         }"
         class="wt-tab__underline--highlight"
-      ></div>
+      />
     </div>
   </nav>
 </template>
 
 <script>
 export default {
-  name: 'wt-tabs',
+  name: 'WtTabs',
+
+  model: {
+    prop: 'current',
+    event: 'change',
+  },
   props: {
     current: {
       type: Object,
@@ -45,11 +50,6 @@ export default {
     },
   },
 
-  model: {
-    prop: 'current',
-    event: 'change',
-  },
-
   data: () => ({
     activeLineWidth: 0,
     activeLineOffset: 0,