@webitel/ui-sdk 23.12.2 → 23.12.5-1

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

@@ -10,8 +10,8 @@
     class="wt-select"
   >
     <wt-label
-      v-bind="labelProps"
       v-if="hasLabel"
+      v-bind="labelProps"
       :disabled="disabled"
       :invalid="invalid"
       class="wt-select__label"
@@ -20,7 +20,9 @@
       <slot
         v-bind="{ label }"
         name="label"
-      >{{ requiredLabel }}</slot>
+      >
+        {{ requiredLabel }}
+      </slot>
     </wt-label>
     <vue-multiselect
       v-bind="$attrs"
@@ -41,19 +43,24 @@
       @open="isOpened = true"
       v-on="listeners"
     >
-      <template v-if="!isOpened" v-slot:limit>
-        <wt-chip class="multiselect__limit">+{{ value.length - 1 }}</wt-chip>
+      <template
+        v-if="!isOpened"
+        #limit
+      >
+        <wt-chip class="multiselect__limit">
+          +{{ value.length - 1 }}
+        </wt-chip>
       </template>
 
       <!--      Slot that is used for all selected options (tags)-->
-      <template v-slot:tag="{ option }">
+      <template #tag="{ option }">
         <span class="multiselect__custom-tag">
-            {{ getOptionLabel({ option, optionLabel }) }}
+          {{ getOptionLabel({ option, optionLabel }) }}
         </span>
       </template>
 
       <!--      Slot for custom label template for single select-->
-      <template v-slot:singleLabel="{ option }">
+      <template #singleLabel="{ option }">
         <slot
           v-bind="{ option, optionLabel }"
           name="singleLabel"
@@ -65,7 +72,7 @@
       </template>
 
       <!--      Slot for custom option template -->
-      <template v-slot:option="{ option }">
+      <template #option="{ option }">
         <slot
           v-bind="{ option, optionLabel }"
           name="option"
@@ -75,18 +82,18 @@
       </template>
 
       <!--      Element for opening and closing the dropdown -->
-      <template v-slot:caret="{ toggle }">
+      <template #caret="{ toggle }">
         <!-- @mousedown.native.prevent.stop="toggle": https://github.com/shentao/vue-multiselect/issues/1204#issuecomment-615114727 -->
         <wt-icon-btn
           :disabled="disabled"
           class="multiselect__select"
           icon="arrow-down"
           @mousedown.prevent.stop="toggle"
-        ></wt-icon-btn>
+        />
       </template>
 
       <!--      Slot located before the tags -->
-      <template v-slot:clear="{}">
+      <template #clear="{}">
         <wt-icon-btn
           v-if="clearable"
           :class="{ 'hidden': !isValue }"
@@ -94,23 +101,30 @@
           class="multiselect__clear"
           icon="close"
           @click="clearValue"
-        ></wt-icon-btn>
+        />
       </template>
 
-      <template v-slot:beforeList>
-        <div v-show="isLoading" class="multiselect__loading-wrapper">
-          <wt-loader size="sm"></wt-loader>
+      <template #beforeList>
+        <div
+          v-show="isLoading"
+          class="multiselect__loading-wrapper"
+        >
+          <wt-loader size="sm" />
         </div>
       </template>
 
-      <template v-if="showIntersectionObserver" v-slot:afterList>
-        <div v-observe-visibility="handleAfterListIntersect"></div>
+      <template
+        v-if="showIntersectionObserver"
+        #afterList
+      >
+        <div v-observe-visibility="handleAfterListIntersect" />
       </template>
     </vue-multiselect>
     <wt-input-info
       v-if="isValidation"
       :invalid="invalid"
-    >{{ validationText }}
+    >
+      {{ validationText }}
     </wt-input-info>
   </div>
 </template>
@@ -119,7 +133,7 @@
 import multiselectMixin from './mixins/multiselectMixin';
 
 export default {
-  name: 'wt-select',
+  name: 'WtSelect',
   mixins: [multiselectMixin],
   props: {
     value: {},
@@ -162,21 +176,7 @@ export default {
   min-width: 0;
 }
 
-.wt-label {
-  .wt-select:hover &,
-  .wt-select:focus-within &, {
-    color: var(--form-label--hover-color);
-  }
-}
-
-.wt-select--invalid,
-.wt-select--invalid:hover {
-  .wt-label {
-    color: var(--false-color);
-  }
-}
-
-.multiselect ::v-deep {
+.multiselect :deep {
   .multiselect__custom-tag,
   .multiselect__single-label {
     // text overflow 3 dots
@@ -188,7 +188,7 @@ export default {
   }
 }
 
-.multiselect--active ::v-deep {
+.multiselect--active :deep {
   .multiselect__tags-wrap,
   .multiselect__strong {
     display: none;
@@ -200,7 +200,7 @@ export default {
 // default case
 .wt-select {
   // all is fine
-  .multiselect ::v-deep {
+  .multiselect :deep {
     .multiselect__tags {
       padding: var(--input-padding) calc(
         var(--input-padding)
@@ -213,7 +213,7 @@ export default {
 
 // only chip
 .wt-select.wt-select--multiple:not(.wt-select--clearable) {
-  .multiselect ::v-deep {
+  .multiselect :deep {
     $multiselect-limit-right-pos: calc(
       var(--select-caret-right-pos) // caret offet from border
       + var(--icon-md-size) // caret size
@@ -234,9 +234,9 @@ export default {
 
 // only clearable
 .wt-select.wt-select--clearable:not(.wt-select--multiple) {
-  .multiselect ::v-deep {
+  .multiselect :deep {
     $multiselect-clear-right-pos: calc(
-      var(--select-caret-right-pos) // caret offet from border
+      var(--select-caret-right-pos) // caret offset from border
       + var(--icon-md-size) // caret size
       + var(--input-padding) // caret-to-chip offset
     );
@@ -254,8 +254,9 @@ export default {
   }
 }
 
+// clearable and chip
 .wt-select.wt-select--multiple.wt-select--clearable {
-  .multiselect ::v-deep {
+  .multiselect :deep {
     $multiselect-clear-right-pos: calc(
       var(--select-caret-right-pos)// caret offet from border
       + var(--icon-md-size)// caret size

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

@@ -6,6 +6,12 @@
   --wt-slider-width: 100%;
   --wt-slider-input-height: 8px;
   --wt-slider-border: 1px solid var(--secondary-color);
+  --wt-slider-background-color: var(--dp-1-surface-color);
+  --wt-slider-background-completed-color: var(--primary-color);
+
+  --wt-slider-pointer-background-color: var(--dp-24-surface-color);
+  --wt-slider-pointer-background-hover-color: var(--dp-22-surface-color);
+  --wt-slider-pointer-border-color: var(--dp-10-surface-color);
 
   --wt-slider-pointer-radius: 50%;
 

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

@@ -17,14 +17,14 @@ and swapping height/width of this component in order to have the correct output.
 <template>
   <div
     :class="{
-        'wt-slider--disabled': disabled,
-        'wt-slider--vertical': vertical,
-      }"
+      'wt-slider--disabled': disabled,
+      'wt-slider--vertical': vertical,
+    }"
     :style="{ height: vertical && verticalHeight }"
     class="wt-slider"
   >
     <div
-      :style="{ width: !vertical && verticalHeight }"
+      :style="{ width: vertical && verticalHeight }"
       class="wt-slider__wrapper"
     >
       <!-- The row above is needed in order to set correct component width when slider is vertical -->
@@ -38,14 +38,14 @@ and swapping height/width of this component in order to have the correct output.
         class="wt-slider__slider"
         type="range"
         @input="inputHandler"
-      />
+      >
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'wt-slider',
+  name: 'WtSlider',
   props: {
     value: {
       type: Number,
@@ -77,10 +77,11 @@ export default {
       default: 100,
     },
   },
+  emits: ['input'],
   computed: {
     progressStyle() { // To achieve the correct color styling:
       const progressPercent = ((this.value - this.min) / (this.max - this.min)) * 100;
-      return `linear-gradient(to right, var(--accent-color) ${progressPercent}%, var(--secondary-color) 0%)`;
+      return `linear-gradient(to right, var(--wt-slider-background-completed-color) ${progressPercent}%, var(--wt-slider-background-color) 0%)`;
     },
     verticalHeight() { // in order to have correct parent height after slider rotation
       return this.vertical ? `${this.height}px` : '100%';
@@ -123,8 +124,9 @@ export default {
     height: var(--wt-slider-pointer-size);
     border: var(--wt-slider-border);
     border-radius: var(--wt-slider-pointer-radius);
-    background: var(--main-color);
+    background: var(--wt-slider-pointer-background-color);
     -webkit-appearance: none;
+    transition: var(--transition);
   }
 
   &::-webkit-slider-runnable-track {
@@ -136,8 +138,10 @@ export default {
     height: var(--wt-slider-pointer-size);
     border: var(--wt-slider-border);
     border-radius: var(--wt-slider-pointer-radius);
-    background: var(--main-color);
+    border-color: var(--wt-slider-pointer-border-color);
+    background: var(--wt-slider-pointer-background-color);
     -moz-appearance: none;
+    transition: var(--transition);
   }
 
   &::-moz-range-track {
@@ -153,6 +157,18 @@ export default {
   }
 }
 
+.wt-slider:hover {
+  .wt-slider__slider {
+    &::-webkit-slider-thumb {
+      background: var(--wt-slider-pointer-background-hover-color);
+    }
+
+    &::-moz-range-thumb {
+      background: var(--wt-slider-pointer-background-hover-color);
+    }
+  }
+}
+
 .wt-slider--disabled {
   .wt-slider__slider {
     pointer-events: none;

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

@@ -1,6 +1,9 @@
 
 :root {
-  --status-select-padding: 0 calc(var(--icon-size-md) + var(--spacing-xs)) 0 0; // reset wt-select padding, but preserve arrow icon padding
-  --status-select-option-color: var(--form-input-color);
-  --status-select-bg--hover-color: var(--secondary-color);
-}
+  --wt-status-select-padding: 0 calc(var(--icon-size-md) + var(--spacing-xs)) 0 0; // reset wt-select padding, but preserve arrow icon padding
+
+  --wt-status-select-option-text-color: var(--text-main-color);
+  --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);
+}

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

@@ -8,17 +8,17 @@
     :searchable="false"
     @input="inputHandler"
   >
-    <template v-slot:singleLabel="{ option }">
+    <template #singleLabel="{ option }">
       <wt-indicator
         :color="option.color"
         :text="duration"
-      ></wt-indicator>
+      />
     </template>
-    <template v-slot:option="{ option }">
+    <template #option="{ option }">
       <wt-indicator
         :color="option.color"
         :text="option.text"
-      ></wt-indicator>
+      />
     </template>
   </wt-select>
 </template>
@@ -29,7 +29,11 @@ import convertDuration from '../../scripts/convertDuration';
 import StatusOptions from './_internals/StatusOptions.lookup';
 
 export default {
-  name: 'wt-status-select',
+  name: 'WtStatusSelect',
+  model: {
+    prop: 'status',
+    event: 'change',
+  },
   props: {
     status: {
       type: String,
@@ -48,10 +52,7 @@ export default {
     //   options: ['sm', 'md'],
     // },
   },
-  model: {
-    prop: 'status',
-    event: 'change',
-  },
+  emits: ['change'],
   computed: {
     selectedOption() {
       return this.statusOptions.find((option) => option.value === this.status);
@@ -107,7 +108,7 @@ export default {
 
     .multiselect__tags {
       min-height: 0;
-      padding: var(--status-select-padding);
+      padding: var(--wt-status-select-padding);
       border: none;
     }
 
@@ -122,11 +123,16 @@ export default {
       .multiselect__option {
         min-height: 0;
         padding: 0;
-        color: var(--status-select-option-color);
+        color: var(--wt-status-select-option-text-color);
+        background: var(--wt-status-select-option-background-color);
       }
 
       .multiselect__option--highlight {
-        background: var(--status-select-bg--hover-color);
+        background: var(--wt-status-select-option-background-hover-color);
+      }
+
+      .multiselect__option--selected {
+        //background: var(--wt-status-select-option-background-selected-color);
       }
     }
   }

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

@@ -0,0 +1,5 @@
+
+:root {
+  --wt-stepper-divider-background-color: var(--secondary-color);
+  --wt-stepper-divider-background-completed-color: var(--primary-color);
+}

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

@@ -5,29 +5,31 @@
         class="wt-stepper-steps"
       >
         <div
-          class="wt-stepper-steps__wrapper"
           v-for="({name, completed}, idx) in stepWithCompleted"
+          class="wt-stepper-steps__wrapper"
         >
           <div
             v-if="idx !== 0"
             class="wt-stepper-steps__divider"
             :class="{ 'wt-stepper-steps__divider--completed': completed }"
-          ></div>
+          />
           <wt-chip
             class="wt-stepper-steps__item"
-            :color="!completed && 'secondary'"
-          >{{ name }}
+            :color="completed ? 'primary' : 'secondary'"
+          >
+            {{ name }}
           </wt-chip>
         </div>
       </div>
     </div>
 
     <slot name="description">
-      <p class="wt-stepper-description">{{ description }}</p>
+      <p class="wt-stepper-description">
+        {{ description }}
+      </p>
     </slot>
 
-    <slot name="main"></slot>
-
+    <slot name="main" />
   </div>
 </template>
 <script setup>
@@ -51,6 +53,10 @@ const stepWithCompleted = computed(() => props.steps.map((item, idx) => ({
   })));
 </script>
 
+<style lang="scss">
+@import './variables.scss';
+</style>
+
 <style lang="scss" scoped>
 .wt-stepper {
   width: 100%;
@@ -74,10 +80,10 @@ const stepWithCompleted = computed(() => props.steps.map((item, idx) => ({
   &__divider {
     flex: 1 1 auto;
     height: 1px;
-    background: var(--secondary-color);
+    background: var(--wt-stepper-divider-background-color);
 
     &--completed {
-      background-color: var(--chip-bg-color);
+      background-color: var(--wt-stepper-divider-background-completed-color);
     }
   }
 }

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

@@ -6,12 +6,35 @@
   --switcher-cicle-size: 14px;
   --switcher-cicle-margin: 4px;
   --switcher-cicle-translateX: 17px;
-  --switcher-bg-color--off: hsla(var(--_icon-color), var(--_opacity--default));
-  --switcher-bg-color--on: hsla(var(--_accent-color), var(--_opacity--default));
-  --switcher-bg-color--off--hover: hsla(var(--_icon-color), var(--_opacity--hover));
-  --switcher-bg-color--on--hover: hsla(var(--_accent-color), var(--_opacity--hover));
-  --switcher-bg-color--off--disabled: hsla(var(--_icon-color), var(--_opacity--disabled));
-  --switcher-bg-color--on--disabled: hsla(var(--_accent-color), var(--_opacity--disabled));
-  --switcher-circle-bg-color: var(--main-color);
   --switcher-border-radius: 24px;
+
+  // circle
+  --wt-switcher-circle-background-color-on: var(--grey-darken-3);
+  --wt-switcher-circle-background-color-on-hover: var(--grey-darken-4);
+  --wt-switcher-circle-background-color-on-disabled: var(--grey-lighten-3);
+
+  --wt-switcher-circle-background-color-off: var(--grey-lighten-4);
+  --wt-switcher-circle-background-color-off-hover: var(--grey-lighten-5);
+  --wt-switcher-circle-background-color-off-disabled: var(--grey-lighten-3);
+
+  // background
+  --wt-switcher-background-color-on: var(--primary-color);
+  --wt-switcher-background-color-on-hover: var(--primary-hover-color);
+  --wt-switcher-background-color-on-disabled: var(--primary-light-color);
+
+  --wt-switcher-background-color-off: var(--grey-darken-2);
+  --wt-switcher-background-color-off-hover: var(--grey-darken-1);
+  --wt-switcher-background-color-off-disabled: var(--grey-lighten-4);
+}
+
+:root.theme--dark {
+  // circle
+  --wt-switcher-circle-background-color-off: var(--grey-darken-4);
+  --wt-switcher-circle-background-color-off-hover: var(--grey-darken-3);
+  --wt-switcher-circle-background-color-off-disabled: var(--grey-darken-3);
+
+  // background
+  --wt-switcher-background-color-off: var(--grey-lighten-1);
+  --wt-switcher-background-color-off-hover: var(--grey-lighten-2);
+  --wt-switcher-background-color-off-disabled: var(--grey-darken-2);
 }