@webitel/ui-sdk 23.12.41 → 23.12.44

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

@@ -1,6 +1,5 @@
-@import '~vue-multiselect/dist/vue3-multiselect.css';
 
-.multiselect ::v-deep {
+.multiselect :deep {
   cursor: pointer;
   position: relative;
 
@@ -12,6 +11,7 @@
     transition: var(--transition);
     width: fit-content; // reset default
     height: fit-content; // reset default
+    background: transparent;
 
     &:before {
       display: none; // reset default
@@ -30,12 +30,13 @@
   }
 
 
+  // visible select input wrapper
   .multiselect__tags {
     padding: calc(var(--spacing-xs) - 1px); // borders
-    color: var(--form-input-color);
     border: var(--select-tags-border);
-    border-color: var(--form-border-color);
+    border-color: var(--wt-text-field-input-border-color);
     border-radius: var(--border-radius);
+    background: transparent;
   }
 
 
@@ -49,13 +50,9 @@
     margin: 0; // reset default
   }
 
-  .multiselect__input:focus {
-    @include wt-placeholder('focus');
-  }
-
   .multiselect__custom-tag,
   .multiselect__single-label {
-    color: var(--form-input-color);
+    color: var(--wt-text-field-placeholder-color);
   }
 
   .multiselect__placeholder {
@@ -69,17 +66,22 @@
     text-overflow: ellipsis;
   }
 
+  // select options wrapper
   .multiselect__content-wrapper {
     @extend %wt-distant-scrollbar;
     transition: var(--transition);
     border: var(--select-tags-border);
-    border-color: var(--form-border-color);
+    border-color: var(--wt-text-field-select-option-wrapper-border-color);
     border-radius: var(--border-radius);
+    box-shadow: var(--elevation-10);
   }
 
+  // select options
   .multiselect__option {
     @extend %typo-body-1;
     padding: var(--select-options-padding);
+    color: var(--wt-text-field-select-option-text-color);
+    background: var(--wt-text-field-select-option-background-color);
 
     &:after {
       display: none;
@@ -87,53 +89,28 @@
 
 
     &--highlight {
-      color: var(--form-input-color);
-      //background: var(--select-option--hover-color);
-      background: none;
+      color: var(--wt-text-field-select-option-text-hover-color);
+      background: var(--wt-text-field-select-option-background-hover-color);
     }
 
 
     &--selected {
-      font-weight: normal;
-      background: var(--select-option--active-color)
+      font-weight: normal; // reset
+      color: var(--wt-text-field-select-option-text-selected-color);
+      background: var(--wt-text-field-select-option-background-selected-color)
     }
   }
 }
 
-.multiselect--active ::v-deep {
+.multiselect--active :deep {
   .multiselect__select .wt-icon__icon {
-    fill: var(--icon-color--hover);
-  }
-
-  .multiselect__tags {
-    border-color: var(--form-border--active-color);
-
-    .multiselect__placeholder {
-      @extend %wt-placeholder--focus;
-    }
-  }
-
-}
-
-.wt-select:hover,
-.wt-tags-input:hover {
-  .multiselect ::v-deep {
-    .multiselect__tags {
-      border-color: var(--form-border--hover-color);
-    }
-
-    .multiselect__select,
-    .multiselect__clear {
-      .wt-icon__icon {
-        fill: var(--icon-color--hover);
-      }
-    }
+    fill: var(--icon-active-color);
   }
 }
 
 .wt-select--loading,
 .wt-tags-input--loading {
-  ::v-deep {
+  :deep {
     .multiselect__content-wrapper {
       overflow-y: hidden;
     }
@@ -156,11 +133,21 @@
 
 .wt-select.wt-select--invalid,
 .wt-tags-input.wt-tags-input--invalid {
-  .multiselect ::v-deep {
+  .multiselect :deep {
     .multiselect__tags {
-      border-color: var(--false-color);
+      border-color: var(--wt-text-field-input-border-error-color);
       outline: none; // prevent outline overlapping false color
     }
+
+    .multiselect__custom-tag,
+    .multiselect__single-label {
+      color: var(--wt-text-field-placeholder-error-color);
+    }
+
+    .multiselect__placeholder {
+      @extend %wt-placeholder--error;
+      //color: var(--form-placeholder--disabled-color);
+    }
   }
 }
 
@@ -177,16 +164,11 @@
     background: transparent; // reset default
   }
 
-  .multiselect__arrow-caret ::v-deep .wt-icon__icon,
-  .multiselect__clear ::v-deep .wt-icon__icon {
-    fill: var(--icon-color-disabled);
-  }
-
   .multiselect {
-    ::v-deep {
+    :deep {
       .multiselect__tags {
-        border-color: var(--form-border--disabled-color);
-        background: var(--form-border--disabled-color);
+        border-color: var(--wt-text-field-input-border-disabled-color);
+        background: var(--wt-text-field-input-background-disabled-color);
 
         .multiselect__placeholder {
           @extend %wt-placeholder--disabled;
@@ -196,3 +178,16 @@
     }
   }
 }
+
+// override .wt-select colors on chips
+.wt-tags-input,
+.wt-tags-input--invalid {
+  .multiselect :deep {
+    .multiselect__tags {
+      .multiselect__custom-tag,
+      .multiselect__single-label {
+        color: var(--wt-chip-main-text-color);
+      }
+    }
+  }
+}

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

@@ -8,7 +8,4 @@
   --select-tags-border: var(--input-border);  // right pos = 10px spacing + clear icon size + clear offset
 
   --select-options-padding: var(--input-padding);
-
-  --select-option--hover-color: var(--accent-secondary-color);
-  --select-option--active-color: var(--accent-secondary-color);
 }

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/wt-slider.vue

@@ -17,9 +17,9 @@ 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"
   >
@@ -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,

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,6 @@ export default {
     //   options: ['sm', 'md'],
     // },
   },
-  model: {
-    prop: 'status',
-    event: 'change',
-  },
   computed: {
     selectedOption() {
       return this.statusOptions.find((option) => option.value === this.status);

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 }}
+          >
+            {{ 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>

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-darken-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);
 }