@webitel/ui-sdk 25.4.37 → 25.4.39

package/src/components/wt-app-header/wt-app-header.vue

@@ -13,14 +13,14 @@
 <style lang="scss" scoped>
 .wt-app-header {
   display: flex;
-  align-items: center;
   justify-content: flex-end;
+  align-items: center;
+  gap: var(--wt-app-header-content-gap);
   box-sizing: border-box;
+  background: var(--wt-app-header-background);
+  padding: var(--wt-app-header-padding);
   min-height: var(
     --wt-app-header-min-height
   ); // fixed height because anything can be put inside slot, so padding won't work properly
-  padding: var(--wt-app-header-padding);
-  background: var(--wt-app-header-background);
-  gap: var(--wt-app-header-content-gap);
 }
 </style>

package/src/components/wt-app-header/wt-app-navigator.vue

@@ -154,10 +154,10 @@ function close() {
 @use '@webitel/styleguide/typography' as *;
 
 .wt-app-navigator {
-  position: relative;
-  z-index: var(--wt-app-header-content-z-index);
   display: flex;
+  position: relative;
   align-items: center;
+  z-index: var(--wt-app-header-content-z-index);
 }
 
 // dropdown part
@@ -166,14 +166,14 @@ function close() {
   position: absolute;
   top: 100%; // icon
   right: 0;
-  overflow: auto;
-  max-height: var(--wt-app-navigator-max-height);
-  margin-top: var(--wt-app-header-content-panel-margin);
-  padding: var(--wt-app-header-content-gap);
   transition: var(--transition);
+  margin-top: var(--wt-app-header-content-panel-margin);
+  box-shadow: var(--elevation-10);
   border-radius: var(--border-radius);
   background: var(--wt-app-header-content-bg-color);
-  box-shadow: var(--elevation-10);
+  padding: var(--wt-app-header-content-gap);
+  max-height: var(--wt-app-navigator-max-height);
+  overflow: auto;
 }
 
 .wt-app-navigator__nav-title {
@@ -191,13 +191,13 @@ function close() {
 }
 
 .wt-app-navigator__card {
-  box-sizing: border-box;
-  width: var(--wt-app-navigator-item-width);
-  height: var(--wt-app-navigator-item-height);
   transition: var(--transition);
+  box-sizing: border-box;
   border: var(--wt-app-navigator-item-border);
   border-color: var(--wt-app-navigator-item-border-color);
   border-radius: var(--border-radius);
+  width: var(--wt-app-navigator-item-width);
+  height: var(--wt-app-navigator-item-height);
 
   &.active,
   &:hover {
@@ -210,24 +210,24 @@ function close() {
   display: inline-flex;
   flex-direction: column;
   justify-content: space-between;
+  cursor: pointer;
   box-sizing: border-box;
+  padding: var(--wt-app-navigator-item-padding);
   width: 100%;
   height: 100%;
-  padding: var(--wt-app-navigator-item-padding);
-  cursor: pointer;
 }
 
 // img inside a
 .wt-app-navigator__card__img {
+  margin: auto;
   width: var(--wt-app-navigator-item-pic-size);
   height: var(--wt-app-navigator-item-pic-size);
-  margin: auto;
 }
 
 // app title
 .wt-app-navigator__card__title {
   @extend %typo-overline;
-  text-align: center;
   color: var(--text-main-color);
+  text-align: center;
 }
 </style>

package/src/components/wt-app-header/wt-header-actions.vue

@@ -108,7 +108,12 @@ export default {
       return this.user.preferredUsername || this.user.account;
     },
     buildVersion() {
-      return `${this.$t('webitelUI.headerActions.buildVersion')}: v${this.buildInfo.release}-${this.buildInfo.build}`;
+      let buildString = '';
+      buildString = `${this.$t('webitelUI.headerActions.buildVersion')}: v${this.buildInfo.release}-${this.buildInfo.build}`;
+      if (this.buildInfo.timestamp) {
+        buildString += `, ${new Date(this.buildInfo.timestamp).toLocaleString()}`;
+      }
+      return buildString;
     },
   },
 
@@ -134,38 +139,38 @@ export default {
 @use '@webitel/styleguide/typography' as *;
 
 .wt-header-actions {
-  position: relative;
-  z-index: var(--wt-app-header-content-z-index);
   display: flex;
+  position: relative;
   align-items: center;
+  z-index: var(--wt-app-header-content-z-index);
 }
 
 .wt-header-actions__panel-wrapper {
+  display: flex;
   position: absolute;
   top: 100%; // icon
   right: 0;
-  display: flex;
   flex-direction: column;
-  min-width: var(--wt-header-actions-min-width);
-  margin-top: var(--wt-app-header-content-panel-margin);
-  padding: var(--wt-header-actions-padding);
+  gap: var(--wt-header-actions-content-sections-gap);
   transition: var(--transition);
+  margin-top: var(--wt-app-header-content-panel-margin);
+  box-shadow: var(--elevation-10);
   border-radius: var(--border-radius);
   background: var(--wt-app-header-content-bg-color);
-  box-shadow: var(--elevation-10);
-  gap: var(--wt-header-actions-content-sections-gap);
+  padding: var(--wt-header-actions-padding);
+  min-width: var(--wt-header-actions-min-width);
 }
 
 .wt-header-actions__name {
   @extend %typo-subtitle-1;
-  white-space: nowrap;
   color: var(--text-main-color);
+  white-space: nowrap;
 }
 
 .wt-header-actions__account {
   @extend %typo-body-1;
-  white-space: nowrap;
   color: var(--text-main-color);
+  white-space: nowrap;
 }
 
 .wt-header-actions__action {
@@ -180,9 +185,9 @@ export default {
     @extend %typo-body-1;
     display: flex;
     align-items: center;
-    width: 100%;
-    padding: var(--wt-header-actions-action-link-padding);
     cursor: pointer;
+    padding: var(--wt-header-actions-action-link-padding);
+    width: 100%;
     color: var(--text-main-color);
 
     .wt-icon {
@@ -197,7 +202,7 @@ export default {
 
 .wt-header-actions__build__version {
   @extend %typo-caption;
-  white-space: nowrap;
   color: var(--text-main-color);
+  white-space: nowrap;
 }
 </style>

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

@@ -151,24 +151,24 @@ const badgeColorVar = computed(() => {
 
 .wt-avatar {
   position: relative;
+  border-radius: 50%;
   width: var(--wt-avatar-size);
   height: var(--wt-avatar-size);
   user-select: none;
-  border-radius: 50%;
 
   &__letters {
     display: flex;
-    align-items: center;
     justify-content: center;
+    align-items: center;
+    border-radius: 50%;
     height: 100%;
     color: var(--wt-avatar-text-color);
-    border-radius: 50%;
   }
 
   &__img {
+    border-radius: 50%;
     width: 100%;
     height: 100%;
-    border-radius: 50%;
   }
 
   &--size-xs {

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

@@ -91,9 +91,9 @@ export default {
     position: absolute;
     top: 0;
     right: 0;
+    border-radius: 50%;
     width: var(--wt-badge-size);
     height: var(--wt-badge-size);
-    border-radius: 50%;
 
     &__pic {
       position: absolute;

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

@@ -1,5 +1,7 @@
 <template>
   <button
+    type="button"
+    :disabled="disabled"
     :class="[
       colorClass,
       `wt-button--size-${size}`,
@@ -11,9 +13,7 @@
         'wt-button--loading': showLoader,
       },
     ]"
-    :disabled="disabled"
     class="wt-button"
-    type="button"
     @click="$emit('click', $event)"
   >
     <!--  Show loader and button contents at the same time to prevent width shift if content > min-width of button -->
@@ -23,7 +23,7 @@
       size="sm"
     />
     <div class="wt-button__contents">
-      <slot> no content provided </slot>
+      <slot> no content provided</slot>
     </div>
   </button>
 </template>
@@ -120,18 +120,18 @@ export default {
 @use '@webitel/styleguide/typography' as *;
 
 .wt-button {
+  cursor: pointer;
+  background-clip: padding-box;
   @extend %typo-button;
-  position: relative;
   display: inline-block;
-  box-sizing: border-box;
-  min-width: var(--btn-min-width);
-  padding: var(--btn-padding);
-  cursor: pointer;
+  position: relative;
   transition: var(--transition);
-  color: var(--btn-primary-text-color);
+  box-sizing: border-box;
   border-radius: var(--border-radius);
   background-color: var(--btn-primary-color);
-  background-clip: padding-box;
+  padding: var(--btn-padding);
+  min-width: var(--btn-min-width);
+  color: var(--btn-primary-text-color);
 
   &__contents {
     display: contents;
@@ -181,8 +181,8 @@ export default {
   }
 
   &.secondary {
-    color: var(--btn-secondary-text-color);
     background-color: var(--btn-secondary-color);
+    color: var(--btn-secondary-text-color);
 
     &:hover,
     &:active {
@@ -191,8 +191,8 @@ export default {
   }
 
   &.success {
-    color: var(--btn-success-text-color);
     background-color: var(--btn-success-color);
+    color: var(--btn-success-text-color);
 
     &:hover,
     &:active {
@@ -201,8 +201,8 @@ export default {
   }
 
   &.info {
-    color: var(--btn-info-text-color);
     background-color: var(--btn-info-color);
+    color: var(--btn-info-text-color);
 
     &:hover,
     &:active {
@@ -211,8 +211,8 @@ export default {
   }
 
   &.job {
-    color: var(--btn-job-text-color);
     background-color: var(--btn-job-color);
+    color: var(--btn-job-text-color);
 
     &:hover,
     &:active {
@@ -221,8 +221,8 @@ export default {
   }
 
   &.transfer {
-    color: var(--btn-transfer-text-color);
     background-color: var(--btn-transfer-color);
+    color: var(--btn-transfer-text-color);
 
     &:hover,
     &:active {
@@ -231,8 +231,8 @@ export default {
   }
 
   &.error {
-    color: var(--btn-error-text-color);
     background-color: var(--btn-error-color);
+    color: var(--btn-error-text-color);
 
     &:hover,
     &:active {
@@ -242,10 +242,10 @@ export default {
 
   &.wt-button--disabled {
     cursor: auto;
+    box-shadow: none;
+    background-color: var(--btn-disabled-color);
     pointer-events: none;
     color: var(--btn-disabled-text-color);
-    background-color: var(--btn-disabled-color);
-    box-shadow: none;
   }
 
   .wt-loader {

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

@@ -101,20 +101,20 @@ const atClickaway = () => {
 
 <style lang="scss" scoped>
 .wt-button-select {
-  position: relative;
   display: inline-flex;
+  position: relative;
   align-items: center;
   gap: var(--button-select-buttons-gap);
 
   .wt-button-select__button {
-    padding: var(--button-select-button-padding);
     border-radius: var(--border-radius) 0 0 var(--border-radius);
+    padding: var(--button-select-button-padding);
   }
 
   .wt-button-select__select-btn {
-    min-width: auto;
-    padding: var(--button-select-icon-button-padding);
     border-radius: 0 var(--border-radius) var(--border-radius) 0;
+    padding: var(--button-select-icon-button-padding);
+    min-width: auto;
 
     // OPEN AND SHUT ARROW
     .wt-button-select__select-arrow {

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

@@ -120,8 +120,8 @@ export default {
 }
 
 .wt-checkbox__wrapper {
-  position: relative;
   display: flex;
+  position: relative;
   align-items: center;
   user-select: none;
 
@@ -131,18 +131,18 @@ export default {
 }
 
 .wt-checkbox__label {
-  margin-left: var(--checkbox-icon-margin);
-  cursor: pointer;
   transition: var(--transition);
+  cursor: pointer;
+  margin-left: var(--checkbox-icon-margin);
 }
 
 /* Hide the browser's default checkbox */
 .wt-checkbox__input {
   position: absolute;
+  opacity: 0;
   width: 0;
   height: 0;
   pointer-events: none;
-  opacity: 0;
 }
 
 .wt-checkbox:hover {

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

@@ -4,43 +4,43 @@
   @extend %typo-body-2;
 
   display: inline-block;
-  padding: var(--chip-padding);
-  color: var(--wt-chip-main-text-color);
   border-radius: var(--chip-border-radius);
   background: var(--wt-chip-main-background-color);
+  padding: var(--chip-padding);
+  color: var(--wt-chip-main-text-color);
 
   &--main-color {
-    color: var(--wt-chip-main-text-color);
     background: var(--wt-chip-main-background-color);
+    color: var(--wt-chip-main-text-color);
   }
 
   &--primary-color {
-    color: var(--wt-chip-primary-text-color);
     background: var(--wt-chip-primary-background-color);
+    color: var(--wt-chip-primary-text-color);
   }
 
   &--secondary-color {
-    color: var(--wt-chip-secondary-text-color);
     background: var(--wt-chip-secondary-background-color);
+    color: var(--wt-chip-secondary-text-color);
   }
 
   &--success-color {
-    color: var(--wt-chip-success-text-color);
     background: var(--wt-chip-success-background-color);
+    color: var(--wt-chip-success-text-color);
   }
 
   &--warning-color {
-    color: var(--wt-chip-warning-text-color);
     background: var(--wt-chip-warning-background-color);
+    color: var(--wt-chip-warning-text-color);
   }
 
   &--error-color {
-    color: var(--wt-chip-error-text-color);
     background: var(--wt-chip-error-background-color);
+    color: var(--wt-chip-error-text-color);
   }
 
   &--transfer-color {
-    color: var(--wt-chip-transfer-text-color);
     background: var(--wt-chip-transfer-background-color);
+    color: var(--wt-chip-transfer-text-color);
   }
 }

package/src/components/wt-confirm-dialog/wt-confirm-dialog.vue

@@ -26,7 +26,7 @@
     <template #actions>
       <slot
         name="actions"
-        :isDeleting="isDeleting"
+        :is-deleting="isDeleting"
         :confirm="confirm"
         :close="close"
       >
@@ -96,8 +96,8 @@ async function confirm() {
 <style scoped>
 .wt-confirm-dialog__content {
   display: flex;
-  align-items: center;
   flex-direction: column;
+  align-items: center;
   gap: var(--spacing-sm);
 }
 

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

@@ -100,9 +100,9 @@ function handleOptionClick({ option, index, hide }) {
   @extend %typo-body-2;
   z-index: 1;
   transition: var(--transition);
+  box-shadow: var(--box-shadow);
   border-radius: var(--border-radius);
   background-color: var(--wt-context-menu-background-color);
-  box-shadow: var(--box-shadow);
 }
 
 .wt-context-menu__option-wrapper {
@@ -121,9 +121,9 @@ function handleOptionClick({ option, index, hide }) {
 
 .wt-context-menu__option {
   display: block;
-  padding: var(--wt-context-menu-option-padding);
-  cursor: pointer;
   transition: var(--transition);
+  cursor: pointer;
+  padding: var(--wt-context-menu-option-padding);
   color: var(--wt-context-menu-option-text-color);
 
   &:hover {
@@ -131,9 +131,9 @@ function handleOptionClick({ option, index, hide }) {
   }
 
   &--disabled {
+    background-color: var(--wt-context-menu-option-background-disabled-color);
     pointer-events: none;
     color: var(--wt-context-menu-option-text-disabled-color);
-    background-color: var(--wt-context-menu-option-background-disabled-color);
   }
 }
 </style>

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

@@ -207,11 +207,11 @@ const clearValue = () => {
 
   .dp__menu {
     box-sizing: border-box;
+    box-shadow: var(--elevation-10);
+    border-radius: var(--border-radius);
+    padding: var(--spacing-xs);
     width: 196px;
     min-width: 196px;
-    padding: var(--spacing-xs);
-    border-radius: var(--border-radius);
-    box-shadow: var(--elevation-10);
   }
 
   .dp__calendar_wrap {
@@ -259,8 +259,8 @@ const clearValue = () => {
 .datepicker__timepicker {
   display: flex;
   align-items: center;
-  margin-top: var(--spacing-xs);
   gap: var(--spacing-xs);
+  margin-top: var(--spacing-xs);
 
   .wt-time-input {
     flex-grow: 1;

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

@@ -26,32 +26,32 @@ export default {
   display: block;
   box-sizing: border-box;
   margin: 0;
-  padding: 0;
   border-color: var(--divider-border-color);
+  padding: 0;
 
   &-vertical {
-    min-height: 100%;
     display: flex;
     position: relative;
     justify-content: center;
-    width: 1px;
-    padding: var(--spacing-md) 0 0;
-    border-left: 0;
-    border-bottom: 0;
     border-top: 0;
     border-right: var(--divider-border-color) solid 1px;
+    border-bottom: 0;
+    border-left: 0;
+    padding: var(--spacing-md) 0 0;
+    width: 1px;
+    min-height: 100%;
   }
 
   &-horizontal {
+    border-top: var(--divider-border-color) solid 1px;
+    border-right: 0;
+    border-bottom: 0;
+    border-left: 0;
+    border-top-width: thin;
     width: 100%;
     max-width: 100%;
     height: 0;
     max-height: 0;
-    border-top: var(--divider-border-color) solid 1px;
-    border-left: 0;
-    border-bottom: 0;
-    border-right: 0;
-    border-top-width: thin;
   }
 }
 </style>

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

@@ -74,26 +74,26 @@ $side-panel-md-width: 320px;
 .wt-dual-panel {
   display: flex;
   flex-direction: column;
+  gap: var(--wt-dual-panel-section-gap);
   box-sizing: border-box;
+  background: var(--wt-dual-panel-background-color);
+  padding: var(--wt-dual-panel-padding);
   max-width: 100%;
   height: 100%;
-  padding: var(--wt-dual-panel-padding);
-  background: var(--wt-dual-panel-background-color);
-  gap: var(--wt-dual-panel-section-gap);
 
   &__header,
   &__actions-panel,
   &__main {
     box-sizing: border-box;
-    padding: var(--wt-dual-panel-section-padding);
     border-radius: var(--border-radius);
     background: var(--wt-dual-panel-content-wrapper-color);
+    padding: var(--wt-dual-panel-section-padding);
   }
 
   &__main {
     @extend %wt-scrollbar;
-    overflow: auto;
     flex: 1 1 auto;
+    overflow: auto;
   }
 
   &__header,
@@ -104,21 +104,21 @@ $side-panel-md-width: 320px;
   &__content {
     display: flex;
     flex-grow: 1;
-    min-height: 0;
     gap: var(--spacing-sm);
+    min-height: 0;
   }
 
   &__side-panel {
     @extend %wt-scrollbar;
-    overflow: auto;
     display: flex;
     flex-direction: column;
-    min-width: 0;
-    padding: var(--wt-dual-panel-section-padding);
+    gap: var(--wt-dual-panel-section-gap);
     transition: var(--transition);
-    background: var(--wt-dual-panel-content-wrapper-color);
     will-change: width;
-    gap: var(--wt-dual-panel-section-gap);
+    background: var(--wt-dual-panel-content-wrapper-color);
+    padding: var(--wt-dual-panel-section-padding);
+    min-width: 0;
+    overflow: auto;
 
     &--md {
       flex: 0 0 $side-panel-md-width;

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

@@ -71,11 +71,11 @@ const dummy = computed(() => (props.darkMode ? dummyDark : dummyLight));
 
 .wt-dummy {
   display: flex;
-  align-items: center;
   flex-direction: column;
   justify-content: center;
-  text-align: center;
+  align-items: center;
   gap: var(--spacing-sm);
+  text-align: center;
 
   &__img {
     width: 200px;