@webitel/ui-sdk 23.12.50 → 23.12.52

package/src/components/wt-navigation-bar/_variables.scss

@@ -1,16 +1,22 @@
 :root {
-  --navigation-bar-width: 340px;
-  --navigation-bar-z-index: 10;
-  --navigation-bar-bg-color: var(--main-color);
-  --navigation-bar-padding: var(--spacing-sm);
+  --wt-navigation-bar-width: 340px;
+  --wt-navigation-bar-z-index: 10;
+  --wt-navigation-bar-padding: var(--spacing-sm);
 
-  --navigation-bar-header-padding: var(--spacing-xs);
-  --navigation-bar-app-pic-width: 200px;
-  --navigation-bar-app-pic-height: 30px;
+  --wt-navigation-bar-header-padding: var(--spacing-xs);
+  --wt-navigation-bar-app-pic-width: 200px;
+  --wt-navigation-bar-app-pic-height: 30px;
 
-  --navigation-bar-list-padding: var(--navigation-bar-padding);
-  --navigation-bar-link-padding: var(--navigation-bar-padding);
-  --navigation-bar-subnav-padding-left: var(--spacing-lg);
-  --navigation-bar-active-expansion-flag-width: 5px;
-  --navigation-bar-active-expansion-name-max-width: calc(100% - var(--icon-md-size) - var(--spacing-xs));
+  --wt-navigation-bar-list-padding: var(--wt-navigation-bar-padding);
+  --wt-navigation-bar-link-padding: var(--wt-navigation-bar-padding);
+  --wt-navigation-bar-subnav-padding-left: var(--spacing-lg);
+  --wt-navigation-bar-active-expansion-flag-width: 5px;
+  --wt-navigation-bar-active-expansion-name-max-width: calc(100% - var(--icon-md-size) - var(--spacing-xs));
+
+  --wt-navigation-bar-background-color: var(--dp-18-surface-color);
+  --wt-navigation-bar-option-text-color: var(--text-main-color);
+  --wt-navigation-bar-option-background-color: var(--wt-navigation-bar-background-color);
+  --wt-navigation-bar-option-background-hover-color: var(--dp-20-surface-color);
+  --wt-navigation-bar-option-background-active-color: var(--primary-light-color);
+  --wt-navigation-bar-expansion-ribbon-color: var(--primary-color);
 }

package/src/components/wt-navigation-bar/wt-navigation-bar.vue

@@ -193,15 +193,15 @@ export default {
 .wt-navigation-bar__nav {
   @extend %wt-scrollbar;
   position: fixed;
-  z-index: var(--navigation-bar-z-index);
+  z-index: var(--wt-navigation-bar-z-index);
   top: 0;
   bottom: 0;
   left: 0;
   overflow: auto;
-  width: var(--navigation-bar-width);
-  padding: var(--navigation-bar-padding);
+  width: var(--wt-navigation-bar-width);
+  padding: var(--wt-navigation-bar-padding);
   border-radius: var(--border-radius);
-  background: var(--navigation-bar-bg-color);
+  background: var(--wt-navigation-bar-background-color);
   box-shadow: var(--elevation-10);
 
   // expand animation optimization
@@ -217,27 +217,28 @@ export default {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--navigation-bar-header-padding);
+  padding: var(--wt-navigation-bar-header-padding);
 }
 
 .wt-navigation-bar__app-pic {
-  width: var(--navigation-bar-app-pic-width);
-  height: var(--navigation-bar-app-pic-height);
+  width: var(--wt-navigation-bar-app-pic-width);
+  height: var(--wt-navigation-bar-app-pic-height);
 }
 
 .wt-navigation-bar__nav-item-link {
   @extend %typo-body-1;
   display: block;
-  padding: var(--navigation-bar-link-padding);
+  padding: var(--wt-navigation-bar-link-padding);
   transition: var(--transition);
   word-wrap: break-word;
+  color: var(--wt-navigation-bar-option-text-color);
 
   &:hover {
-    background: var(--accent-secondary-color);
+    background: var(--wt-navigation-bar-option-background-hover-color);
   }
 
   &--active {
-    background: var(--accent-secondary-color);
+    background: var(--wt-navigation-bar-option-background-active-color);
   }
 }
 
@@ -248,20 +249,21 @@ export default {
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: var(--navigation-bar-link-padding);
+  padding: var(--wt-navigation-bar-link-padding);
   outline: none;
+  color: var(--wt-navigation-bar-option-text-color);
 
   &:before {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
-    width: var(--navigation-bar-active-expansion-flag-width);
+    width: var(--wt-navigation-bar-active-expansion-flag-width);
     content: '';
     transition: var(--transition);
     opacity: 0;
     border-radius: var(--border-radius);
-    background: var(--primary-color);
+    background: var(--wt-navigation-bar-expansion-ribbon-color);
   }
 
   .wt-navigation-bar__expansion-arrow {
@@ -280,11 +282,11 @@ export default {
 
 .wt-navigation-bar__nav-expansion-name {
   display: block;
-  max-width: var(--navigation-bar-active-expansion-name-max-width);
+  max-width: var(--wt-navigation-bar-active-expansion-name-max-width);
   word-wrap: break-word;
 }
 
 .wt-navigation-bar__nav-item-link--subnav {
-  padding-left: var(--navigation-bar-subnav-padding-left);
+  padding-left: var(--wt-navigation-bar-subnav-padding-left);
 }
 </style>

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

@@ -1,10 +1,10 @@
 
 :root {
-  --notification-min-width: 30vw;
-  --notification-max-width: 40vw;
-  --notification-padding: var(--spacing-xs);
-  --notification-icon-margin: var(--spacing-xs);
+  --wt-notification-min-width: 30vw;
+  --wt-notification-max-width: 40vw;
+  --wt-notification-padding: var(--spacing-xs);
+  --wt-notification-icon-margin: var(--spacing-xs);
 
-  --notification-text-color: var(--text-primary-color);
-  --notification-bg-color: var(--main-color);
-}
+  --wt-notification-text-color: var(--text-main-color);
+  --wt-notification-bg-color: var(--content-wrapper-color);
+}

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

@@ -63,11 +63,11 @@ export default {
   position: relative;
   display: flex;
   align-items: flex-start;
-  min-width: var(--notification-min-width);
-  max-width: var(--notification-max-width);
-  padding: var(--notification-padding);
-  color: var(--notification-text-color);
-  background: var(--notification-bg-color);
+  min-width: var(--wt-notification-min-width);
+  max-width: var(--wt-notification-max-width);
+  padding: var(--wt-notification-padding);
+  color: var(--wt-notification-text-color);
+  background: var(--wt-notification-bg-color);
   border-radius: var(--border-radius);
   box-shadow: var(--elevation-1);
   cursor: pointer;
@@ -75,7 +75,7 @@ export default {
 
 .wt-notification__icon {
   flex: 0 0 var(--icon-md-size);
-  margin-right: var(--notification-icon-margin);
+  margin-right: var(--wt-notification-icon-margin);
 }
 
 .wt-notification__text {

package/src/components/wt-page-wrapper/_variables.scss

@@ -2,4 +2,10 @@
   --page-wrapper-padding: var(--spacing-sm);
   --page-wrapper-section-padding: var(--spacing-sm);
   --page-wrapper-section-gap: var(--spacing-sm);
+
+  --wt-page-wrapper-background-color: var(--grey-lighten-5);
+}
+
+:root.theme--dark {
+  --wt-page-wrapper-background-color: var(--grey-darken-4);
 }

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

@@ -49,7 +49,7 @@ export default {
   box-sizing: border-box;
   padding: var(--page-wrapper-section-padding);
   border-radius: var(--border-radius);
-  background: var(--main-color);
+  background: var(--wt-page-wrapper-background-color);
 }
 
 .wt-page-wrapper__main {

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

@@ -1,6 +1,15 @@
 .wt-player {
   --plyr-color-main: var(--primary-color);
-  --plyr-audio-control-color: var(--icon-primary-color);
+  --plyr-audio-control-color: var(--icon-color);
+  --plyr-audio-control-color-hover: var(--icon-btn-hover-color);
+  --plyr-audio-controls-background: var(--content-wrapper-color);
+  --plyr-control-icon-size: var(--icon-md-size);
+  --plyr-audio-control-background-hover: transparent;
+  --plyr-audio-progress-buffered-background: var(--dp-14-surface-color); // loaded color
+  --wt-player-audio-progress-background: var(--wt-slider-background-color); // not played color
+  --plyr-tooltip-background: var(--wt-tooltip-background-color);
+  --plyr-tooltip-color: var(--wt-tooltip-text-color);
+
   // --plyr-control-toggle-checked-background: var(--main-color);
   --player-close-icon-transform-translate-x: var(--spacing-md);
   // "-1 * var" for use the negative value of a variable

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

@@ -26,6 +26,7 @@
 
 <script>
 import Plyr from 'plyr';
+import 'plyr/src/sass/plyr.scss';
 
 export default {
   name: 'WtPlayer',
@@ -70,6 +71,7 @@ export default {
       default: 'sticky',
     },
   },
+  emits: ['initialized', 'close'],
   data: () => ({
     player: null,
   }),
@@ -152,9 +154,10 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../../node_modules/plyr/src/sass/plyr';
 @import './variables.scss';
+</style>
 
+<style lang="scss" scoped>
 .wt-player {
   @extend %typo-body-2;
   bottom: 60px;
@@ -174,35 +177,61 @@ export default {
     }
   }
 
-  .plyr {
-    max-width: 100%; // prevents <video> container overflow
-    border-radius: var(--border-radius);
-    box-shadow: var(--box-shadow);
-  }
+  :deep {
+    .plyr {
+      max-width: 100%; // prevents <video> container overflow
+      border-radius: var(--border-radius);
+      box-shadow: var(--elevation-10);
+    }
 
-  &__close-icon {
-    //transform: translate(var(--player-close-icon-transform-translate-x),
-    //  var(--player-close-icon-transform-translate-y));
-  }
+    .plyr__control--overlaid svg {
+      left: 0; // reset plyr style for video "play" button icon
+    }
 
-  .plyr__control:hover, {
-    background: var(--accent-secondary-color);
-    color: var(--text-primary-color);
-  }
+    .plyr__progress__buffer {
+      background: var(--wt-player-audio-progress-background);
+    }
 
-  .plyr__control--overlaid svg {
-    left: 0; // reset plyr style for video "play" button icon
-  }
+    .plyr__progress input,
+    .plyr__volume input {
+      cursor: pointer;
 
-  //.plyr__control[role='menuitemradio']::before,
-  //.plyr__control[role='menuitemradio']:hover::before {
-  //  border: 2px solid var(--secondary-color);
-  //  background: var(--main-color);
-  //}
-  //
-  //.plyr__control[role='menuitemradio']::after {
-  //  background: var(--secondary-color);
-  //}
+      &::-webkit-slider-thumb {
+        border: var(--wt-slider-border);
+        border-radius: var(--wt-slider-pointer-radius);
+        background: var(--wt-slider-pointer-background-color);
+        -webkit-appearance: none;
+        transition: var(--transition);
+      }
+
+      &::-webkit-slider-runnable-track {
+        -webkit-appearance: none;
+      }
+
+      &::-moz-range-thumb {
+        width: var(--wt-slider-pointer-size);
+        height: var(--wt-slider-pointer-size);
+        border: var(--wt-slider-border);
+        border-radius: var(--wt-slider-pointer-radius);
+        border-color: var(--wt-slider-pointer-border-color);
+        background: var(--wt-slider-pointer-background-color);
+        -moz-appearance: none;
+        transition: var(--transition);
+      }
+
+      &::-moz-range-track {
+        -moz-appearance: none;
+      }
+
+      &::-ms-thumb {
+        appearance: none;
+      }
+
+      &::-ms-track {
+        appearance: none;
+      }
+    }
+  }
 }
 
 </style>

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

@@ -14,7 +14,7 @@
     <wt-loader
       v-if="loading"
       size="sm"
-      :color="loaderColor"
+      color="main"
     />
     <wt-icon
       v-else
@@ -81,10 +81,6 @@ const iColor = computed(() => {
     default: return props.color;
   }
 });
-const loaderColor = computed(() => {
-  // if (['success', 'transfer', 'error'].includes(props.color)) return 'main';
-  return 'contrast';
-});
 </script>
 
 <style lang="scss">

package/src/components/wt-search-bar/wt-search-bar.vue

@@ -163,7 +163,7 @@ function handleKeyup(event) {
     width: 100%;
     padding: 0;
     transition: var(--transition);
-    color: var(--wt-text-field-placeholder-color);
+    color: var(--wt-text-field-text-color);
     border: none;
     outline: none;
   }

package/src/components/wt-select/_multiselect.scss

@@ -52,7 +52,7 @@
 
   .multiselect__custom-tag,
   .multiselect__single-label {
-    color: var(--wt-text-field-placeholder-color);
+    color: var(--wt-text-field-text-color);
   }
 
   .multiselect__placeholder {

package/src/components/wt-status-select/_variables.scss

@@ -6,4 +6,6 @@
   --wt-status-select-option-background-color: var(--dp-22-surface-color);
   --wt-status-select-option-background-hover-color: var(--secondary-light-color);
   //--wt-status-select-option-background-selected-color: var(--primary-light-color);
+
+  --wt-status-select-background-color: var(--wt-status-select-option-background-color);
 }

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

@@ -110,6 +110,7 @@ export default {
       min-height: 0;
       padding: var(--wt-status-select-padding);
       border: none;
+      background: var(--wt-status-select-background-color);
     }
 
     .multiselect__select {

package/src/css/styleguide/colors/_colors.scss

@@ -30,7 +30,7 @@
   --dp-1-surface-color: hsl(225, 20%, 77%);
 
   // content wrapper
-  --content-wrapper-color: var(--dp-24-surface-color);
+  --content-wrapper-color: var(--dp-22-surface-color);
 
   // success colors
   --success-color: var(--green-darken-4);

package/src/css/styleguide/colors/reusable/_text-field.scss

@@ -5,10 +5,14 @@
   // helper
   --wt-helper-text-color: var(--text-main-color);
   --wt-helper-text-disabled-color: var(--text-disabled-color);
+  --wt-helper-text-invalid-color: var(--text-error-color);
+
+  // text
+  --wt-text-field-text-color: var(--black);
 
   // placeholder
   --wt-text-field-error-text-color: var(--error-color);
-  --wt-text-field-placeholder-color: var(--text-main-color);
+  --wt-text-field-placeholder-color: var(--grey-lighten-1);
   --wt-text-field-placeholder-error-color: var(--error-color);
   --wt-text-field-placeholder-disabled-color: var(--text-disabled-color);
 
@@ -32,5 +36,8 @@
 }
 
 :root.theme--dark {
+  // text
+  --wt-text-field-text-color: var(--white);
+
   --wt-text-field-input-border-color: var(--grey-lighten-1);
 }

package/src/mixins/validationMixin/useValidation.js

@@ -1,4 +1,4 @@
-import { computed, isReactive } from 'vue';
+import { computed, isReactive, isRef } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 export function useValidation({ v: inputV, customValidators: inputCustomValidators }) {
@@ -12,15 +12,14 @@ export function useValidation({ v: inputV, customValidators: inputCustomValidato
     v = computed(() => inputV);
     customValidators = computed(() => inputCustomValidators);
   }
-
-  // support end
+  // end
 
   const isValidation = computed(() => !!v && !!v.value && !!Object.keys(v.value).length);
   const invalid = computed(() => isValidation.value && v.value.$error);
 
   const validationText = computed(() => {
     let validationText = '';
-    if (isValidation.value && invalid) {
+    if (isValidation.value && invalid.value) {
       if (v.value.required?.$invalid) validationText = t('validation.required');
       else if (v.value.numeric?.$invalid) validationText = t('validation.numeric');
       else if (v.value.email?.$invalid) validationText = t('validation.email');
@@ -39,11 +38,14 @@ export function useValidation({ v: inputV, customValidators: inputCustomValidato
       else if (v.value.websocketValidator?.$invalid) validationText = `${t('validation.websocketValidator')}`;
       else if (v.value.integer?.$invalid) validationText = `${t('validation.integer')}`;
     }
-    // eslint-disable-next-line no-restricted-syntax
-    for (const { name, text } of customValidators) {
-      if (v.value[name]?.$invalid) validationText = text;
+
+    if (customValidators && customValidators.value) {
+      // eslint-disable-next-line no-restricted-syntax
+      for (const { name, text } of customValidators.value) {
+        if (v.value[name]?.$invalid) validationText = text;
+      }
+      return validationText;
     }
-    return validationText;
   });
 
   return {