@webitel/ui-sdk 23.12.37 → 23.12.39-vite

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,

package/src/components/wt-tags-input/wt-tags-input.vue

@@ -8,8 +8,8 @@
     class="wt-tags-input"
   >
     <wt-label
-      v-bind="labelProps"
       v-if="hasLabel"
+      v-bind="labelProps"
       :disabled="disabled"
       :invalid="invalid"
       class="wt-tags-input__label"
@@ -18,7 +18,9 @@
       <slot
         v-bind="{ label }"
         name="label"
-      >{{ requiredLabel }}</slot>
+      >
+        {{ requiredLabel }}
+      </slot>
     </wt-label>
 
     <vue-multiselect
@@ -38,21 +40,20 @@
       multiple
       v-on="listeners"
     >
-
       <!--      Slot that is used for all selected options (tags)-->
-      <template v-slot:tag="{ option, remove }">
+      <template #tag="{ option, remove }">
         <wt-chip class="multiselect__custom-tag">
           {{ getTagOptionLabel({ option, optionLabel }) }}
           <wt-icon-btn
             icon="close--filled"
             size="sm"
             @click="remove(option)"
-          ></wt-icon-btn>
+          />
         </wt-chip>
       </template>
 
       <!--      Slot for custom option template -->
-      <template v-slot:option="{ option }">
+      <template #option="{ option }">
         <slot
           v-bind="{ option, optionLabel }"
           name="option"
@@ -62,7 +63,7 @@
       </template>
 
       <!--      Element for opening and closing the dropdown -->
-      <template v-slot:caret="{ toggle }">
+      <template #caret="{ toggle }">
         <!-- @mousedown.native.prevent.stop="toggle": https://github.com/shentao/vue-multiselect/issues/1204#issuecomment-615114727 -->
         <wt-icon-btn
           :disabled="disabled"
@@ -70,24 +71,31 @@
           color="active"
           icon="arrow-down"
           @mousedown.prevent.stop="toggle"
-        ></wt-icon-btn>
+        />
       </template>
 
-      <template v-slot:beforeList>
-        <div v-show="isLoading" class="multiselect__loading-wrapper">
-          <wt-loader size="sm"></wt-loader>
+      <template #beforeList>
+        <div
+          v-show="isLoading"
+          class="multiselect__loading-wrapper"
+        >
+          <wt-loader size="sm" />
         </div>
       </template>
 
-      <template v-if="showIntersectionObserver" v-slot:afterList>
-        <div v-observe-visibility="handleAfterListIntersect"></div>
+      <template
+        v-if="showIntersectionObserver"
+        #afterList
+      >
+        <div v-observe-visibility="handleAfterListIntersect" />
       </template>
     </vue-multiselect>
 
     <wt-input-info
       v-if="isValidation"
       :invalid="invalid"
-    >{{ validationText }}
+    >
+      {{ validationText }}
     </wt-input-info>
   </div>
 </template>
@@ -96,7 +104,7 @@
 import multiselectMixin from '../wt-select/mixins/multiselectMixin';
 
 export default {
-  name: 'wt-tags-input',
+  name: 'WtTagsInput',
   mixins: [multiselectMixin],
   props: {
     value: {

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

@@ -16,7 +16,8 @@
       <slot
         name="label"
         v-bind="{ label }"
-      >{{ requiredLabel }}
+      >
+        {{ requiredLabel }}
       </slot>
     </wt-label>
     <div class="wt-textarea__wrapper">
@@ -28,9 +29,12 @@
         :value="value"
         class="wt-textarea__textarea"
         v-on="listeners"
-      ></textarea>
-      <div ref="after-wrapper" class="wt-textarea__after-wrapper">
-        <slot name="after-input"></slot>
+      />
+      <div
+        ref="after-wrapper"
+        class="wt-textarea__after-wrapper"
+      >
+        <slot name="after-input" />
         <wt-icon-btn
           :class="{ 'hidden': !value }"
           :disabled="disabled"
@@ -38,13 +42,14 @@
           icon="close--filled"
           size="sm"
           @click="$emit('input', '')"
-        ></wt-icon-btn>
+        />
       </div>
     </div>
     <wt-input-info
       v-if="isValidation"
       :invalid="invalid"
-    >{{ validationText }}
+    >
+      {{ validationText }}
     </wt-input-info>
   </div>
 </template>
@@ -53,7 +58,7 @@
 import validationMixin from '../../mixins/validationMixin/validationMixin';
 
 export default {
-  name: 'wt-textarea',
+  name: 'WtTextarea',
   mixins: [validationMixin],
   props: {
     /**
@@ -114,6 +119,9 @@ export default {
       return this.required ? `${this.label}*` : this.label;
     },
   },
+  mounted() {
+    this.updateInputPaddings();
+  },
 
   methods: {
     handleKeypress(event) {
@@ -133,9 +141,6 @@ export default {
       inputEl.style.paddingRight = `calc(${defaultInputPadding} * 2 + ${afterWrapperWidth}px)`;
     },
   },
-  mounted() {
-    this.updateInputPaddings();
-  },
 };
 </script>