@webitel/ui-sdk 24.12.29 → 24.12.34

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

@@ -2,144 +2,144 @@
   <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"
+        <tr
+          :style="columnsStyle"
+          class="wt-table__tr wt-table__tr__head"
         >
-          <wt-checkbox
-            :selected="isAllSelected"
-            @change="selectAll"
-          />
-        </th>
-        <th
-          v-for="(col, key) of dataHeaders"
-          :key="key"
-          :class="[
-              {'wt-table__th--sortable': isColSortable(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 Table head actions row slot -->
-          <slot name="actions-header" />
-        </th>
-      </tr>
+            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 Table head actions row slot -->
+            <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="_selected.includes(row)"
-            @change="handleSelection(row, $event)"
-          />
-        </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"
         >
-          <!--
+          <td
+            v-if="selectable"
+            class="wt-table__td wt-table__td--checkbox"
+          >
+            <wt-checkbox
+              :selected="_selected.includes(row)"
+              @change="handleSelection(row, $event)"
+            />
+          </td>
+
+          <td
+            v-for="(col, headerKey) of dataHeaders"
+            :key="headerKey"
+            class="wt-table__td"
+          >
+            <!--
            @slot Customize data columns. Recommended for representing nested data structures like object or array, and adding specific elements like select or chip
            @scope [ { "name": "item", "description": "Data row object" }, { "name": "index", "description": "Data row index" } ]
            -->
-          <slot
-            :index="dataKey"
-            :item="row"
-            :name="col.value"
+            <slot
+              :index="dataKey"
+              :item="row"
+              :name="col.value"
+            >
+              <div>{{ row[col.value] }}</div>
+            </slot>
+          </td>
+
+          <td
+            v-if="gridActions"
+            class="wt-table__td__actions"
           >
-            <div>{{ row[col.value] }}</div>
-          </slot>
-        </td>
-
-        <td
-          v-if="gridActions"
-          class="wt-table__td__actions"
-        >
-          <!--
+            <!--
           @slot Table body actions row slot
           @scope [ { "name": "item", "description": "Data row object" }, { "name": "index", "description": "Data row index" } ]
            -->
-          <slot
-            :index="dataKey"
-            :item="row"
-            name="actions"
-          />
-        </td>
-      </tr>
+            <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"
-        />
-        <td
-          v-for="(col, headerKey) of dataHeaders"
-          :key="headerKey"
-          class="wt-table__td"
+        <tr
+          :style="columnsStyle"
+          class="wt-table__tr wt-table__tr__foot"
         >
-          <!--
+          <!--        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 Add your custom aggregations for column in table footer. Table footer is rendered conditionally depending on templates with "-footer" name
            @scope [ { "name": "header", "description": "header object" } ]
            -->
-          <slot
-            :header="col"
-            :index="headerKey"
-            :name="`${col.value}-footer`"
-          />
-        </td>
-      </tr>
+            <slot
+              :header="col"
+              :index="headerKey"
+              :name="`${col.value}-footer`"
+            />
+          </td>
+        </tr>
       </tfoot>
     </table>
   </div>
 </template>
 
 <script>
-import getNextSortOrder from './_internals/getSortOrder.js';
+import { getNextSortOrder } from '../../scripts/sortQueryAdapters.js';
 
 export default {
   name: 'WtTable',
@@ -229,7 +229,9 @@ export default {
     },
 
     isTableFooter() {
-      return Object.keys(this.$slots).some((slotName) => slotName.includes('-footer'));
+      return Object.keys(this.$slots).some((slotName) =>
+        slotName.includes('-footer'),
+      );
     },
   },
 

package/src/components/wt-table-actions/_variables.scss

@@ -1,5 +1,4 @@
-
 :root {
   --table-actions-padding: var(--spacing-xs);
   --table-actions-icon-gap: var(--spacing-xs);
-}
+}

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

@@ -49,7 +49,7 @@
     <wt-tooltip v-if="isSettings">
       <template #activator>
         <wt-icon-btn
-          :class="{'active': isSettingsActive}"
+          :class="{ active: isSettingsActive }"
           icon="filter"
           @click="$emit('input', 'settings')"
         />
@@ -100,7 +100,6 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-
 .wt-table-actions {
   display: flex;
   align-items: center;

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

@@ -24,7 +24,7 @@
               'wt-table-column-select__popup-list--md':
                 changeableDraft.length > 10 && changeableDraft.length <= 20,
               'wt-table-column-select__popup-list--lg':
-                changeableDraft.length > 20
+                changeableDraft.length > 20,
             }"
             class="wt-table-column-select__popup-list"
           >
@@ -44,9 +44,7 @@
         </div>
       </template>
       <template #actions>
-        <wt-button
-          @click="setShownColumns"
-        >
+        <wt-button @click="setShownColumns">
           {{ $t('reusable.add') }}
         </wt-button>
         <wt-button
@@ -109,7 +107,9 @@ export default {
   methods: {
     shownColLabel({ text, locale }) {
       if (!text && locale) {
-        return typeof locale === 'string' ? this.$t(locale) : this.$t(...locale);
+        return typeof locale === 'string'
+          ? this.$t(locale)
+          : this.$t(...locale);
       }
       return text;
     },
@@ -134,8 +134,12 @@ export default {
 @import '../../../src/css/main.scss';
 
 $list-height: 400px;
-$list-width-sm: calc(500px - var(--spacing-xl)); // all popup width - (paddings + overflow-padding)
-$list-width-md: calc(800px - var(--spacing-xl)); // all popup width - (paddings + overflow-padding)
+$list-width-sm: calc(
+  500px - var(--spacing-xl)
+); // all popup width - (paddings + overflow-padding)
+$list-width-md: calc(
+  800px - var(--spacing-xl)
+); // all popup width - (paddings + overflow-padding)
 
 .wt-table-column-select {
   line-height: 0; // prevent 24x28 icon height :/
@@ -183,5 +187,4 @@ $list-width-md: calc(800px - var(--spacing-xl)); // all popup width - (paddings
     margin-bottom: var(--spacing-sm);
   }
 }
-
 </style>

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

@@ -1,4 +1,3 @@
-
 :root {
   --tabs-underiline-height: 1px;
   --tabs-underiline-color: transparent;

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

@@ -6,7 +6,7 @@
     class="wt-tabs"
   >
     <button
-      v-for="(tab) in tabs"
+      v-for="tab in tabs"
       :key="tab.value"
       :class="{
         'wt-tab--highlight': tab.value === current.value,
@@ -20,7 +20,7 @@
         :name="tab.value"
         v-bind="{ tab, current }"
       >
-        <span style="display: block;">{{ tab.text }}</span>
+        <span style="display: block">{{ tab.text }}</span>
       </slot>
     </button>
 
@@ -28,7 +28,7 @@
       <div
         :style="{
           width: `${activeLineWidth}px`,
-          transform: `translateX(${activeLineOffset}px)`
+          transform: `translateX(${activeLineOffset}px)`,
         }"
         class="wt-tab__underline--highlight"
       />
@@ -72,7 +72,8 @@ export default {
 
     moveActiveLine(newValue) {
       if (!this.current) return;
-      if (!this.$refs || !this.$refs[newValue] || !this.$refs[newValue][0]) return;
+      if (!this.$refs || !this.$refs[newValue] || !this.$refs[newValue][0])
+        return;
       const element = this.$refs[newValue][0];
       this.activeLineWidth = element.clientWidth;
       this.activeLineOffset = element.offsetLeft;
@@ -118,7 +119,7 @@ export default {
   background: transparent;
 
   &:hover,
-  &:focus, {
+  &:focus {
     color: var(--wt-tabs-text-hover-color);
     border-bottom-color: var(--wt-tabs-underline-active-color);
   }
@@ -138,5 +139,4 @@ export default {
     font-weight: bold;
   }
 }
-
 </style>

package/src/components/wt-tags-input/__tests__/WtTagsInput.spec.js

@@ -34,17 +34,17 @@ describe('WtTagsInput', () => {
         value: [
           { label: 'Vue.js', text: 'JavaScript' },
           { label: 'Vue2.js', text: 'JavaScript' },
-          { label: 'Vue3.js', text: 'JavaScript' }
+          { label: 'Vue3.js', text: 'JavaScript' },
         ],
-        options: [
-          { label: 'Vue.js', text: 'JavaScript' }
-        ]
+        options: [{ label: 'Vue.js', text: 'JavaScript' }],
       },
     });
-    expect(wrapper.findComponent({ name: 'vue-multiselect' }).vm.$props.options.length).toEqual(3);
+    expect(
+      wrapper.findComponent({ name: 'vue-multiselect' }).vm.$props.options
+        .length,
+    ).toEqual(3);
   });
 
-
   it('in manual mode doesnt emit "input" event at native "tag" event', () => {
     const tag = '123';
     const wrapper = mount(WtTagsInput, {

package/src/components/wt-tags-input/mixin/taggableMixin.js

@@ -17,7 +17,9 @@ export default {
         if (typeof newTag === 'string') {
           return this.options.some((elem) => elem === newTag);
         }
-        return this.options.some((elem) => elem[this.trackBy] === newTag[this.trackBy]);
+        return this.options.some(
+          (elem) => elem[this.trackBy] === newTag[this.trackBy],
+        );
       };
 
       if (isTagExist(tag)) return;

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

@@ -160,20 +160,20 @@ export default {
         return [];
       }
 
-      const newOptions = this.value.filter(valObj => {
-        return !this.options.find(option => {
-          return deepEqual(option, valObj)
+      const newOptions = this.value.filter((valObj) => {
+        return !this.options.find((option) => {
+          return deepEqual(option, valObj);
         });
       });
 
-      this.options.unshift(...newOptions)
-    }
+      this.options.unshift(...newOptions);
+    },
   },
   created() {
     if (!this.isApiMode) {
-      this.initializeOptions()
+      this.initializeOptions();
     }
-  }
+  },
 };
 </script>
 
@@ -195,9 +195,7 @@ export default {
 .wt-tags-input :deep(.multiselect) {
   .multiselect__tags {
     padding-right: calc(
-      var(--input-padding)
-      + var(--icon-md-size)
-      + var(--select-caret-right-pos)
+      var(--input-padding) + var(--icon-md-size) + var(--select-caret-right-pos)
     );
     padding-bottom: 0;
 

package/src/components/wt-textarea/__tests__/WtTextarea.spec.js

@@ -30,7 +30,9 @@ describe('WtTextarea', () => {
       },
       props: { autoresize: true },
     });
-    wrapper.find('.wt-textarea__textarea').trigger('keypress', { key: 'Enter' });
+    wrapper
+      .find('.wt-textarea__textarea')
+      .trigger('keypress', { key: 'Enter' });
     expect(wrapper.emitted().enter).toBeTruthy();
   });
 
@@ -40,7 +42,9 @@ describe('WtTextarea', () => {
         WtLabel,
       },
     });
-    wrapper.find('.wt-textarea__textarea').trigger('keypress', { key: 'Enter' });
+    wrapper
+      .find('.wt-textarea__textarea')
+      .trigger('keypress', { key: 'Enter' });
     expect(wrapper.emitted().enter).toBeFalsy();
   });
 });

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

@@ -1,4 +1,3 @@
-
 :root {
   --textarea-min-height: 100px;
   --textarea-padding: var(--input-padding);

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

@@ -39,7 +39,7 @@
       >
         <slot name="after-input" />
         <wt-icon-btn
-          :class="{ 'hidden': !value }"
+          :class="{ hidden: !value }"
           :disabled="disabled"
           class="wt-textarea__reset-icon-btn"
           icon="close--filled"
@@ -127,7 +127,7 @@ export default {
     this.updateInputPaddings();
   },
   updated() {
-    if(this.autoresize && !this.value) this.resetGrow();
+    if (this.autoresize && !this.value) this.resetGrow();
   },
 
   methods: {
@@ -146,7 +146,7 @@ export default {
       const bordersSize = 2; // + 2px for height because of --rounded-action-border-size
 
       inputEl.style.height = 'auto';
-      inputEl.style.height = (inputEl.scrollHeight + bordersSize) + "px";
+      inputEl.style.height = inputEl.scrollHeight + bordersSize + 'px';
     },
 
     resetGrow() {
@@ -158,9 +158,9 @@ export default {
       // cant test this thing cause vue test utils doesnt render elements width :/
       const afterWrapperWidth = this.$refs['after-wrapper'].offsetWidth;
       const inputEl = this.$refs['wt-textarea'];
-      const defaultInputPadding = getComputedStyle(document.documentElement).getPropertyValue(
-        '--textarea-padding',
-      );
+      const defaultInputPadding = getComputedStyle(
+        document.documentElement,
+      ).getPropertyValue('--textarea-padding');
       inputEl.style.paddingRight = `calc(${defaultInputPadding} * 2 + ${afterWrapperWidth}px)`;
     },
   },
@@ -192,7 +192,6 @@ export default {
     .wt-textarea__wrapper {
       height: 100%;
     }
-
   }
 }
 

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

@@ -29,7 +29,7 @@
         class="wt-time-input__input"
         type="number"
         @input="$emit('input', $event.target.value)"
-      >
+      />
     </div>
     <wt-input-info
       v-if="showInfo"
@@ -151,7 +151,6 @@ export default {
   }
 }
 
-
 .wt-time-input__wrapper {
   position: relative;
 }

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

@@ -1,5 +1,4 @@
-
 :root {
   --timepicker-input-width: 75px;
   --timepicker-input-margin: var(--spacing-xs);
-}
+}

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    :class="{'wt-timepicker--invalid': invalid}"
+    :class="{ 'wt-timepicker--invalid': invalid }"
     class="wt-timepicker"
   >
     <wt-label
@@ -120,15 +120,15 @@ export default {
       return this.format.includes('ss');
     },
     labelHours() {
-      if(this.noLabel) return null;
+      if (this.noLabel) return null;
       return this.label ? null : this.$t('webitelUI.timepicker.hour');
     },
     labelMin() {
-      if(this.noLabel) return null;
+      if (this.noLabel) return null;
       return this.label ? null : this.$t('webitelUI.timepicker.min');
     },
     labelSec() {
-      if(this.noLabel) return null;
+      if (this.noLabel) return null;
       return this.label ? null : this.$t('webitelUI.timepicker.sec');
     },
     hour: {
@@ -159,7 +159,9 @@ export default {
     },
     sec: {
       get() {
-        return this.dateMode ? new Date(+this.value).getSeconds() : Math.floor(this.value % 60);
+        return this.dateMode
+          ? new Date(+this.value).getSeconds()
+          : Math.floor(this.value % 60);
       },
       set(value) {
         const newValue = this.dateMode
@@ -169,7 +171,9 @@ export default {
       },
     },
     requiredLabel() {
-      return this.required ? `${this.label} (${this.format})*` : `${this.label} (${this.format})`;
+      return this.required
+        ? `${this.label} (${this.format})*`
+        : `${this.label} (${this.format})`;
     },
   },
 
@@ -182,7 +186,6 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-
 .wt-timepicker {
   display: flex;
   flex-direction: column;
@@ -200,5 +203,4 @@ export default {
     margin-right: 0;
   }
 }
-
 </style>

package/src/components/wt-tooltip/_internals/useTooltipTriggerSubscriptions.js

@@ -19,7 +19,12 @@ const HIDE_EVENT_MAP = {
 };
 
 // eslint-disable-next-line import/prefer-default-export
-export const useTooltipTriggerSubscriptions = ({ target, triggers, show, hide }) => {
+export const useTooltipTriggerSubscriptions = ({
+  target,
+  triggers,
+  show,
+  hide,
+}) => {
   const subscribeTriggers = () => {
     const setEventListeners = (target, triggers) => {
       triggers.forEach((trigger) => {

package/src/components/wt-tooltip/_internals/wt-tooltip-floating.vue

@@ -39,6 +39,4 @@ useTooltipTriggerSubscriptions({
 });
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>

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

@@ -1,4 +1,3 @@
-
 :root {
   --tooltip-padding: var(--spacing-2xs) var(--spacing-xs);