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

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

@@ -19,18 +19,13 @@
         :disabled="disabled"
         @change="inputHandler"
       >
-      <span class="wt-switcher__checkmark" />
+      <span class="wt-switcher__checkmark"></span>
       <!-- @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>
@@ -38,11 +33,7 @@
 
 <script>
 export default {
-  name: 'WtSwitcher',
-  model: {
-    prop: 'value',
-    event: 'change',
-  },
+  name: 'wt-switcher',
   props: {
     value: {
       type: Boolean,
@@ -65,6 +56,10 @@ 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,124 +2,86 @@
   <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"
+      <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)"
         >
-          <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>
+          <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>
       </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"
-            />
-          </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"
+      >
+        <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"
-          >
-            <slot
-              :index="dataKey"
-              :item="row"
-              :name="col.value"
-            >
-              <div>{{ row[col.value] }}</div>
-            </slot>
-          </td>
+        <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>
+        <td v-if="gridActions" class="wt-table__td__actions">
+          <slot :index="dataKey" :item="row" name="actions"></slot>
+        </td>
+      </tr>
       </tbody>
 
-      <tfoot
-        v-if="isTableFooter"
-        class="wt-table__foot"
-      >
-        <tr
-          :style="columnsStyle"
-          class="wt-table__tr wt-table__tr__foot"
+      <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"
         >
-          <!--        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>
+          <slot :header="col" :index="headerKey" :name="`${col.value}-footer`"></slot>
+        </td>
+      </tr>
       </tfoot>
     </table>
   </div>
@@ -129,7 +91,7 @@
 import getNextSortOrder from './_internals/getSortOrder';
 
 export default {
-  name: 'WtTable',
+  name: 'wt-table',
   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 #activator>
+      <template v-slot: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 #activator>
+      <template v-slot: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 #activator>
+      <template v-slot: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 #activator>
+      <template v-slot: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 #activator>
+      <template v-slot: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 #activator>
+      <template v-slot: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: 'WtTableActions',
+  name: 'wt-table-actions',
   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 #activator>
+      <template v-slot: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 #title>
+      <template v-slot:title>
         {{ $t('webitelUI.tableColumnSelect.title') }}
       </template>
-      <template #main>
+      <template v-slot: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,22 +37,20 @@
               <wt-checkbox
                 v-model="column.show"
                 :label="shownColLabel(column)"
-              />
+              ></wt-checkbox>
             </li>
           </ul>
         </div>
       </template>
-      <template #actions>
+      <template v-slot: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>
@@ -63,12 +61,7 @@
 import deepCopy from 'deep-copy';
 
 export default {
-  name: 'WtTableColumnSelect',
-
-  model: {
-    prop: 'headers',
-    event: 'change',
-  },
+  name: 'wt-table-column-select',
   props: {
     headers: {
       type: Array,
@@ -82,18 +75,15 @@ export default {
     },
   },
 
+  model: {
+    prop: 'headers',
+    event: 'change',
+  },
+
   data: () => ({
     draft: [], // headers draft
     isColumnSelectPopup: false,
   }),
-  computed: {
-    changeableDraft() {
-      return this.draft.filter((header) => !this.staticHeaders.includes(header.value)).sort((a, b) => {
-        return this.shownColLabel(a).localeCompare(this.shownColLabel(b));
-        // sorting headers for alphabet just in popup
-      });
-    },
-  },
 
   watch: {
     isColumnSelectPopup: {
@@ -102,6 +92,14 @@ export default {
       },
     },
   },
+  computed: {
+    changeableDraft() {
+      return this.draft.filter((header) => !this.staticHeaders.includes(header.value)).sort((a, b) => {
+        return this.shownColLabel(a).localeCompare(this.shownColLabel(b));
+        // sorting headers for alphabet just in popup
+      });
+    },
+  },
   methods: {
     shownColLabel({ text, locale }) {
       if (!text && locale) {

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

@@ -26,19 +26,14 @@
           transform: `translateX(${activeLineOffset}px)`
         }"
         class="wt-tab__underline--highlight"
-      />
+      ></div>
     </div>
   </nav>
 </template>
 
 <script>
 export default {
-  name: 'WtTabs',
-
-  model: {
-    prop: 'current',
-    event: 'change',
-  },
+  name: 'wt-tabs',
   props: {
     current: {
       type: Object,
@@ -50,6 +45,11 @@ 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-if="hasLabel"
       v-bind="labelProps"
+      v-if="hasLabel"
       :disabled="disabled"
       :invalid="invalid"
       class="wt-tags-input__label"
@@ -18,9 +18,7 @@
       <slot
         v-bind="{ label }"
         name="label"
-      >
-        {{ requiredLabel }}
-      </slot>
+      >{{ requiredLabel }}</slot>
     </wt-label>
 
     <vue-multiselect
@@ -40,20 +38,21 @@
       multiple
       v-on="listeners"
     >
+
       <!--      Slot that is used for all selected options (tags)-->
-      <template #tag="{ option, remove }">
+      <template v-slot: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 #option="{ option }">
+      <template v-slot:option="{ option }">
         <slot
           v-bind="{ option, optionLabel }"
           name="option"
@@ -63,7 +62,7 @@
       </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"
@@ -71,31 +70,24 @@
           color="active"
           icon="arrow-down"
           @mousedown.prevent.stop="toggle"
-        />
+        ></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>
@@ -104,7 +96,7 @@
 import multiselectMixin from '../wt-select/mixins/multiselectMixin';
 
 export default {
-  name: 'WtTagsInput',
+  name: 'wt-tags-input',
   mixins: [multiselectMixin],
   props: {
     value: {

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

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