@webitel/ui-sdk 24.6.16 → 24.6.18

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

@@ -1,34 +1,34 @@
 <template>
   <div
-    class="wt-checkbox"
     :class="{
       'wt-checkbox--active': isChecked,
       'wt-checkbox--disabled': disabled,
     }"
+    class="wt-checkbox"
   >
     <wt-label
-      v-bind="labelProps"
       :disabled="disabled"
       class="wt-checkbox__wrapper"
+      v-bind="labelProps"
     >
       <input
-        class="wt-checkbox__input"
-        type="checkbox"
-        :value="value"
         :checked="isChecked"
         :disabled="disabled"
+        :value="value"
+        class="wt-checkbox__input"
+        type="checkbox"
         @change="inputHandler"
       >
       <span class="wt-checkbox__checkmark">
         <wt-icon
-          :icon="checkboxIcon"
           :color="iconColor"
+          :icon="checkboxIcon"
         />
       </span>
       <!-- @slot Custom label markup -->
       <slot
-        v-bind="{ label, isChecked, disabled }"
         name="label"
+        v-bind="{ label, isChecked, disabled }"
       >
         <div
           v-if="label"
@@ -133,8 +133,8 @@ export default {
 
 .wt-checkbox__label {
   margin-left: var(--checkbox-icon-margin);
-  transition: var(--transition);
   cursor: pointer;
+  transition: var(--transition);
 }
 
 /* Hide the browser's default checkbox */
@@ -142,8 +142,8 @@ export default {
   position: absolute;
   width: 0;
   height: 0;
-  opacity: 0;
   pointer-events: none;
+  opacity: 0;
 }
 
 .wt-checkbox:hover {

package/src/components/wt-chip/wt-chip.scss

@@ -8,37 +8,37 @@
   background: var(--wt-chip-main-background-color);
 
   &--main-color {
-    background: var(--wt-chip-main-background-color);
     color: var(--wt-chip-main-text-color);
+    background: var(--wt-chip-main-background-color);
   }
 
   &--primary-color {
-    background: var(--wt-chip-primary-background-color);
     color: var(--wt-chip-primary-text-color);
+    background: var(--wt-chip-primary-background-color);
   }
 
   &--secondary-color {
-    background: var(--wt-chip-secondary-background-color);
     color: var(--wt-chip-secondary-text-color);
+    background: var(--wt-chip-secondary-background-color);
   }
 
   &--success-color {
-    background: var(--wt-chip-success-background-color);
     color: var(--wt-chip-success-text-color);
+    background: var(--wt-chip-success-background-color);
   }
 
   &--warning-color {
-    background: var(--wt-chip-warning-background-color);
     color: var(--wt-chip-warning-text-color);
+    background: var(--wt-chip-warning-background-color);
   }
 
   &--error-color {
-    background: var(--wt-chip-error-background-color);
     color: var(--wt-chip-error-text-color);
+    background: var(--wt-chip-error-background-color);
   }
 
   &--transfer-color {
-    background: var(--wt-chip-transfer-background-color);
     color: var(--wt-chip-transfer-text-color);
+    background: var(--wt-chip-transfer-background-color);
   }
 }

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

@@ -1,7 +1,7 @@
 <template>
   <span
-    class="wt-chip"
     :class="`wt-chip--${color}-color`"
+    class="wt-chip"
   >
     <slot />
   </span>

package/src/components/wt-context-menu/wt-context-menu.vue

@@ -1,8 +1,8 @@
 <template>
   <wt-tooltip
-    class="wt-context-menu"
-    :visible="visible"
     :triggers="['click', 'touch']"
+    :visible="visible"
+    class="wt-context-menu"
     placement="bottom-end"
     popper-class="wt-context-menu__floating-wrapper"
   >
@@ -11,8 +11,8 @@
     </template>
     <template #default="{ hide }">
       <ul
-        class="wt-context-menu__menu"
         :style="`width: ${width}; min-width: ${minWidth}; max-width: ${maxWidth};`"
+        class="wt-context-menu__menu"
       >
         <li
           v-for="(option, index) of options"
@@ -29,8 +29,8 @@
             @click.prevent="handleOptionClick({ option, index, hide })"
           >
             <slot
-              v-bind="option"
               name="option"
+              v-bind="option"
             >
               {{ option.text || option }}
             </slot>
@@ -92,11 +92,11 @@ function handleOptionClick({ option, index, hide }) {
 
 .wt-context-menu__menu {
   @extend %typo-body-2;
-  background-color: var(--wt-context-menu-background-color);
+  z-index: 1;
+  transition: var(--transition);
   border-radius: var(--border-radius);
+  background-color: var(--wt-context-menu-background-color);
   box-shadow: var(--box-shadow);
-  transition: var(--transition);
-  z-index: 1;
 }
 
 .wt-context-menu__option-wrapper {
@@ -117,8 +117,8 @@ function handleOptionClick({ option, index, hide }) {
   display: block;
   padding: var(--wt-context-menu-option-padding);
   cursor: pointer;
-  color: var(--wt-context-menu-option-text-color);
   transition: var(--transition);
+  color: var(--wt-context-menu-option-text-color);
 
   &:hover {
     background-color: var(--wt-context-menu-option-background-hover-color);

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

@@ -2,9 +2,9 @@
   <wt-tooltip class="wt-copy-action">
     <template #activator>
       <wt-icon-btn
-        v-bind="$attrs"
         :icon="copied ? 'done' : 'copy'"
         class="copy-action"
+        v-bind="$attrs"
         @click="copy"
       />
     </template>

package/src/components/wt-datepicker/__tests__/WtDatepicker.spec.js

@@ -1,7 +1,7 @@
-import { shallowMount, mount } from '@vue/test-utils';
-import WtDatepicker from '../wt-datepicker.vue';
-import WtLabel from '../../wt-label/wt-label.vue';
+import { mount, shallowMount } from '@vue/test-utils';
 import WtIcon from '../../wt-icon/wt-icon.vue';
+import WtLabel from '../../wt-label/wt-label.vue';
+import WtDatepicker from '../wt-datepicker.vue';
 
 describe('WtDatepicker', () => {
   it('renders a component', () => {

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

@@ -6,27 +6,27 @@
     class="wt-datepicker"
   >
     <wt-label
-      v-bind="labelProps"
       :disabled="disabled"
+      v-bind="labelProps"
     >
       <!-- @slot Custom input label -->
       <slot
-        v-bind="{ label }"
         name="label"
+        v-bind="{ label }"
       >
         {{ label }}
       </slot>
     </wt-label>
     <vue-datepicker
-      v-bind="{ ...$attrs, ...$props }"
       ref="datepicker"
+      :close-on-auto-apply="false"
+      :format="isDateTime ? 'dd/MM/yyyy HH:mm' : 'dd/MM/yyyy'"
       :locale="$i18n.locale === 'ua' ? 'uk' : $i18n.locale"
       :model-value="+value"
       :placeholder="label || placeholder"
-      class="wt-datepicker__datepicker"
-      :format="isDateTime ? 'dd/MM/yyyy HH:mm' : 'dd/MM/yyyy'"
-      :close-on-auto-apply="false"
       auto-apply
+      class="wt-datepicker__datepicker"
+      v-bind="{ ...$attrs, ...$props }"
       @closed="isOpened = false"
       @open="isOpened = true"
       @update:model-value="emit('input', $event.getTime())"
@@ -172,8 +172,8 @@ const isDateTime = props.mode === 'datetime';
 
   .dp__menu {
     box-sizing: border-box;
-    min-width: 196px;
     width: 196px;
+    min-width: 196px;
     padding: var(--spacing-xs);
     border-radius: var(--border-radius);
     box-shadow: var(--elevation-10);
@@ -224,8 +224,8 @@ const isDateTime = props.mode === 'datetime';
 .datepicker__timepicker {
   display: flex;
   align-items: center;
-  gap: var(--spacing-xs);
   margin-top: var(--spacing-xs);
+  gap: var(--spacing-xs);
 
   .wt-time-input {
     flex-grow: 1;

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

@@ -21,8 +21,8 @@ export default {
   max-width: 100%;
   height: 0;
   max-height: 0;
-  padding: 0;
   margin: 0;
+  padding: 0;
   border: var(--divider-border);
   border-color: var(--divider-border-color);
   border-top-width: thin;

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

@@ -2,9 +2,9 @@
   <section class="wt-error-page">
     <article class="wt-error-page__wrapper">
       <img
-        class="wt-error-page__img"
-        :src="errorPic.src"
         :alt="errorPic.alt"
+        :src="errorPic.src"
+        class="wt-error-page__img"
       >
       <h2
         class="wt-error-page__title"
@@ -74,10 +74,10 @@ export default {
 
 <style lang="scss" scoped>
 .wt-error-page {
-  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
+  box-sizing: border-box;
   min-width: 100vw;
   min-height: 100vh;
   padding: 90px;
@@ -89,14 +89,14 @@ export default {
   }
 
   &__img {
-    max-width: 65vw;
     width: 778px;
+    max-width: 65vw;
     user-select: none;
   }
 
   &__title {
-    text-transform: uppercase;
     margin-top: 69px;
+    text-transform: uppercase;
   }
 
   &__text {

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

@@ -16,8 +16,8 @@
           v-bind="{ open, opened }"
         />
         <wt-icon
-          class="wt-expansion-panel-arrow"
           :class="{ 'wt-expansion-panel-arrow--opened': opened }"
+          class="wt-expansion-panel-arrow"
           icon="arrow-right"
         />
       </div>

package/src/components/wt-filters-panel-wrapper/__tests__/WtFiltersPanelWrapper.spec.js

@@ -15,10 +15,12 @@ describe('Filters Panel Wrapper', () => {
   it(`toggles "filters-panel-wrapper--opened" class at
    wt-table-actions "settings" event`, async () => {
     const wrapper = shallowMount(FiltersPanelWrapper);
-    expect(wrapper.classes().includes('filters-panel-wrapper--opened')).toBe(false);
+    expect(wrapper.classes().includes('filters-panel-wrapper--opened'))
+    .toBe(false);
     wrapper.findComponent({ name: 'wt-table-actions' })
     .vm.$emit('input', 'settings');
     await wrapper.vm.$nextTick();
-    expect(wrapper.classes().includes('filters-panel-wrapper--opened')).toBe(true);
+    expect(wrapper.classes().includes('filters-panel-wrapper--opened'))
+    .toBe(true);
   });
 });

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

@@ -1,7 +1,7 @@
 <template>
   <article
-    class="filters-panel-wrapper"
     :class="{ 'filters-panel-wrapper--opened': isOpened }"
+    class="filters-panel-wrapper"
   >
     <div class="filters-wrap">
       <slot />
@@ -56,9 +56,9 @@ $actions-width: calc(2 * (var(--icon-md-size) + var(--table-actions-icon-gap)));
 
   .actions-wrap {
     display: flex;
-    margin-left: auto;
-    margin-top: 24px;
     flex: 0 0 $actions-width;
+    margin-top: 24px;
+    margin-left: auto;
 
     .wt-table-actions {
       height: fit-content;

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

@@ -1,6 +1,6 @@
 
 :root {
-  --headline-min-height : 40px; // button/search-bar height
+  --headline-min-height: 40px; // button/search-bar height
   --headline-title-margin: var(--spacing-sm);
   --wt-headline-background-color: var(--content-wrapper-color);
 }

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

@@ -29,12 +29,12 @@ export default {
 .wt-headline {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   flex-wrap: wrap;
-  min-height: var(--headline-min-height);
+  justify-content: space-between;
   box-sizing: border-box;
-  background: var(--wt-headline-background-color);
+  min-height: var(--headline-min-height);
   border-radius: var(--border-radius);
+  background: var(--wt-headline-background-color);
 }
 
 .wt-headline__title {
@@ -43,8 +43,8 @@ export default {
 }
 
 .wt-headline__actions-wrapper {
+  position: relative;
   display: flex;
   align-items: center;
-  position: relative;
 }
 </style>

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

@@ -2,8 +2,8 @@
   <wt-tooltip class="wt-hint">
     <template #activator>
       <wt-icon-btn
-        icon="rounded-info"
         :color="iconColor"
+        icon="rounded-info"
         size="sm"
       />
     </template>

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

@@ -1,11 +1,11 @@
 <template>
   <i
-    class="wt-icon"
     :class="[
       `wt-icon--size-${size}`,
       `wt-icon--color-${color}`,
       { 'wt-icon--disabled': disabled },
     ]"
+    class="wt-icon"
   >
     <svg class="wt-icon__icon">
       <use :xlink:href="iconName" />
@@ -69,8 +69,8 @@ const iconName = computed(() => {
 <style lang="scss" scoped>
 .wt-icon {
   display: inline-flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
   transition: var(--transition);
 }
 
@@ -79,51 +79,64 @@ svg {
   display: block;
   width: 100%;
   height: 100%;
+  transition: var(--transition);
   stroke-width: 0;
   fill: var(--icon-color);
-  transition: var(--transition);
 }
 
 .wt-icon--color {
   &-default .wt-icon__icon {
     fill: var(--icon-color);
   }
+
   &-active .wt-icon__icon {
     fill: var(--icon-active-color);
   }
+
   &-primary .wt-icon__icon {
     fill: var(--icon-primary-color);
   }
+
   &-error .wt-icon__icon {
     fill: var(--icon-error-color);
   }
+
   &-success .wt-icon__icon {
     fill: var(--icon-success-color);
   }
+
   &-warning .wt-icon__icon {
     fill: var(--icon-warning-color);
   }
+
   &-on-dark .wt-icon__icon {
     fill: var(--icon-on-dark-color);
   }
+
   &-on-light .wt-icon__icon {
     fill: var(--icon-on-light-color);
   }
+
   &-on-primary .wt-icon__icon {
     fill: var(--icon-on-primary-color);
   }
+
   &-info .wt-icon__icon {
     fill: var(--icon-info-color);
   }
+
   &-chat .wt-icon__icon {
     fill: var(--icon-chat-color);
   }
+
   &-transfer .wt-icon__icon {
     fill: var(--icon-transfer-color);
   }
+
   &-job .wt-icon__icon {
     fill: var(--icon-job-color);
   }
+
   &-disabled .wt-icon__icon {
     fill: var(--icon-disabled-color);
   }

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

@@ -2,8 +2,8 @@
   <wt-tooltip>
     <template #activator>
       <wt-icon-btn
-        icon="plus"
         :disabled="disabled"
+        icon="plus"
         @click="emit('click')"
       />
     </template>

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

@@ -2,8 +2,8 @@
   <wt-tooltip>
     <template #activator>
       <wt-icon-btn
-        icon="bucket"
         :disabled="disabled"
+        icon="bucket"
         @click="emit('click')"
       />
     </template>

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

@@ -2,8 +2,8 @@
   <wt-tooltip>
     <template #activator>
       <wt-icon-btn
-        icon="download"
         :disabled="disabled"
+        icon="download"
         @click="emit('click')"
       />
     </template>

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

@@ -2,8 +2,8 @@
   <wt-tooltip>
     <template #activator>
       <wt-icon-btn
-        icon="edit"
         :disabled="disabled"
+        icon="edit"
         @click="emit('click')"
       />
     </template>

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

@@ -2,8 +2,8 @@
   <wt-tooltip>
     <template #activator>
       <wt-icon-btn
-        icon="history"
         :disabled="disabled"
+        icon="history"
         @click="emit('click')"
       />
     </template>

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

@@ -2,8 +2,8 @@
   <wt-tooltip>
     <template #activator>
       <wt-icon-btn
-        icon="refresh"
         :disabled="disabled"
+        icon="refresh"
         @click="emit('click')"
       />
     </template>

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

@@ -8,11 +8,11 @@
 
 <script setup>
 import { computed } from 'vue';
+import WtAddIconAction from './_internals/wt-add-icon-action.vue';
 import WtDeleteIconAction from './_internals/wt-delete-icon-action.vue';
+import WtDownloadIconAction from './_internals/wt-download-icon-action.vue';
 import WtEditIconAction from './_internals/wt-edit-icon-action.vue';
-import WtAddIconAction from './_internals/wt-add-icon-action.vue';
 import WtHistoryIconAction from './_internals/wt-history-icon-action.vue';
-import WtDownloadIconAction from './_internals/wt-download-icon-action.vue';
 import WtRefreshIconAction from './_internals/wt-refresh-icon-action.vue';
 
 const props = defineProps({

package/src/components/wt-icon-btn/__tests__/WtIconBtn.spec.js

@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
-import WtIconBtn from '../wt-icon-btn.vue';
 import WtIcon from '../../wt-icon/wt-icon.vue';
+import WtIconBtn from '../wt-icon-btn.vue';
 
 describe('WtIconBtn', () => {
   it('renders a component', () => {

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

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

package/src/components/wt-indicator/__tests__/WtIndicator.spec.js

@@ -24,6 +24,6 @@ describe('WtIndicator', () => {
       },
     });
     expect(wrapper.find('.wt-indicator__indicator').classes())
-      .toContain('wt-indicator__indicator--primary');
+    .toContain('wt-indicator__indicator--primary');
   });
 });

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

@@ -1,15 +1,15 @@
 <template>
   <div
-    class="wt-indicator"
     :class="[
       `wt-indicator--size-${size}`
     ]"
+    class="wt-indicator"
   >
     <span
-      class="wt-indicator__indicator"
       :class="[
         `wt-indicator__indicator--${color}`,
       ]"
+      class="wt-indicator__indicator"
     />
     <div
       v-if="isText"
@@ -68,8 +68,8 @@ export default {
   min-width: var(--wt-indicator-dot-size);
   height: var(--wt-indicator-dot-size);
   margin: var(--wt-indicator-dot-offset);
-  background: var(--wt-indicator-disabled-color);
   border-radius: 50%;
+  background: var(--wt-indicator-disabled-color);
 
   &--primary {
     background: var(--wt-indicator-primary-color);
@@ -110,15 +110,18 @@ export default {
       min-width: var(--wt-indicator-dot-size--size-sm);
       height: var(--wt-indicator-dot-size--size-sm);
     }
+
     .wt-indicator__text {
       @extend %typo-caption;
     }
   }
+
   &-md {
     .wt-indicator__indicator {
       min-width: var(--wt-indicator-dot-size--size-md);
       height: var(--wt-indicator-dot-size--size-md);
     }
+
     .wt-indicator__text {
       @extend %typo-body-1;
     }

package/src/components/wt-input/__tests__/WtInput.spec.js

@@ -1,6 +1,6 @@
-import { shallowMount, mount } from '@vue/test-utils';
-import WtInput from '../wt-input.vue';
+import { mount, shallowMount } from '@vue/test-utils';
 import WtLabel from '../../wt-label/wt-label.vue';
+import WtInput from '../wt-input.vue';
 
 describe('WtInput', () => {
   it('renders a component', () => {