@webitel/ui-sdk 23.12.2 → 23.12.5-1

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

@@ -16,13 +16,21 @@
         :disabled="disabled"
         @input="inputHandler"
       >
-      <wt-icon class="wt-radio__icon" :icon="radioIcon"></wt-icon>
+      <wt-icon
+        class="wt-radio__icon"
+        :icon="radioIcon"
+      />
       <!-- @slot Custom input label -->
       <slot
         v-bind="{ label, isChecked, disabled }"
         name="label"
       >
-        <div v-if="label" class="wt-radio__label">{{ label }}</div>
+        <div
+          v-if="label"
+          class="wt-radio__label"
+        >
+          {{ label }}
+        </div>
       </slot>
     </wt-label>
   </div>
@@ -30,7 +38,11 @@
 
 <script>
 export default {
-  name: 'wt-radio',
+  name: 'WtRadio',
+  model: {
+    prop: 'selected',
+    event: 'input',
+  },
   props: {
     // value, set by radio
     value: {
@@ -59,10 +71,7 @@ export default {
       default: false,
     },
   },
-  model: {
-    prop: 'selected',
-    event: 'input',
-  },
+  emits: ['input'],
   computed: {
     isChecked() {
       return this.value === this.selected;
@@ -79,9 +88,11 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-
+<style lang="scss">
 @import './variables.scss';
+</style>
+
+<style lang="scss" scoped>
 
 /* Customize the label (the container) */
 .wt-radio {
@@ -120,61 +131,22 @@ export default {
 }
 
 .wt-radio:hover {
-  .wt-radio__label {
-    color: var(--form-label--hover-color);
-  }
-
-  ::v-deep .wt-icon__icon {
-    fill: var(--icon-color--hover);
+  :deep .wt-icon__icon {
+    fill: var(--icon-btn-hover-color);
   }
 }
 
 .wt-radio--active {
-  .wt-radio__label {
-    color: var(--form-label--active-color);
-  }
-
-  ::v-deep .wt-icon__icon {
-    fill: var(--icon-color-active);
-  }
-}
-
-.wt-radio--outline {
-  .wt-radio__label {
-    color: var(--form-outline-label-color);
-  }
-
-  ::v-deep .wt-icon__icon {
-    fill: var(--icon-outline-color);
-  }
-
-  &.wt-radio--active {
-    .wt-radio__label {
-      color: var(--form-label--active-color);
-    }
-
-    ::v-deep .wt-icon__icon {
-      fill: var(--icon-outline--active-color);
-    }
-  }
-
-  &:hover {
-
-    ::v-deep .wt-icon__icon {
-      fill: var(--icon-outline--hover-color);
-    }
+  :deep .wt-icon__icon {
+    fill: var(--icon-active-color);
   }
 }
 
 .wt-radio--disabled {
   pointer-events: none;
 
-  .wt-radio__label {
-    color: var(--form-label--disabled-color);
-  }
-
-  ::v-deep .wt-icon__icon {
-    fill: var(--icon-color-disabled);
+  :deep .wt-icon__icon {
+    fill: var(--icon-disabled-color);
   }
 }
 </style>

package/src/components/wt-rounded-action/_variables.scss

@@ -1,45 +1,14 @@
 :root {
-  --rounded-action-border-size: 1px;
+  --rounded-action-border-size: 2px;
   --rounded-action-padding: calc(var(--spacing-xs) - var(--rounded-action-border-size));
 
   --rounded-action-rounded-border-radius: var(--border-radius--pill);
 
-  --rounded-action-primary-color: var(--primary-color);
-  --rounded-action-primary-hover-color: var(--primary-hover-color);
+  --rounded-action-bg-color: var(--dp-20-surface-color);
+  --rounded-action-bg-hover-color: var(--dp-22-surface-color);
 
-  --rounded-action-secondary-color: var(--dp-20-surface-color);
-  --rounded-action-secondary-hover-color: var(--dp-18-surface-color);
-  --rounded-action-secondary-active-color: var(--grey-lighten-1);
-
-  --rounded-action-success-color: var(--success-color);
-  --rounded-action-success-hover-color: var(--success-hover-color);
-
-  --rounded-action-error-color: var(--error-color);
-  --rounded-action-error-hover-color: var(--error-hover-color);
-
-  --rounded-action-transfer-color: var(--transfer-color);
-  --rounded-action-transfer-hover-color: var(--transfer-hover-color);
-
-  --rounded-action-disabled-color: var(--dp-18-surface-color);
+  --rounded-action-active-color: var(--dp-10-surface-color);
 }
 
 :root.theme--dark {
-  --rounded-action-primary-color: var(--primary-color);
-  --rounded-action-primary-hover-color: var(--primary-hover-color);
-
-  --rounded-action-secondary-color: var(--dp-20-surface-color);
-  --rounded-action-secondary-hover-color: var(--dp-18-surface-color);
-  --rounded-action-secondary-active-color: var(--grey-darken-1);
-
-  --rounded-action-success-color: var(--success-color);
-  --rounded-action-success-hover-color: var(--success-hover-color);
-
-  --rounded-action-error-color: var(--error-color);
-  --rounded-action-error-hover-color: var(--error-hover-color);
-
-  --rounded-action-transfer-color: var(--transfer-color);
-  --rounded-action-transfer-hover-color: var(--transfer-hover-color);
-
-  --rounded-action-disabled-color: var(--dp-18-surface-color);
-
 }

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

@@ -1,7 +1,6 @@
 <template>
   <button
     :class="[
-      `wt-rounded-action--color-${color}`,
       `wt-rounded-action--size-${size}`,
       { 'wt-rounded-action--active': active },
       { 'wt-rounded-action--disabled': disabled },
@@ -16,13 +15,13 @@
       v-if="loading"
       size="sm"
       :color="loaderColor"
-    ></wt-loader>
+    />
     <wt-icon
       v-else
       :color="iColor"
       :icon="icon"
       :size="size"
-    ></wt-icon>
+    />
   </button>
 </template>
 
@@ -76,16 +75,14 @@ const props = defineProps({
 const emit = defineEmits(['click']);
 
 const iColor = computed(() => {
-  const onDark = ['success', 'error', 'transfer'];
-  const onLight = ['primary'];
   if (props.disabled) return 'disabled';
-  if (onDark.includes(props.color)) return 'on-dark';
-  if (onLight.includes(props.color)) return 'on-light';
-  if (props.active) return 'default';
-  return 'default';
+  switch (props.color) {
+    case 'secondary': return 'default';
+    default: return props.color;
+  }
 });
 const loaderColor = computed(() => {
-  if (['success', 'transfer', 'error'].includes(props.color)) return 'main';
+  // if (['success', 'transfer', 'error'].includes(props.color)) return 'main';
   return 'contrast';
 });
 </script>
@@ -100,15 +97,15 @@ const loaderColor = computed(() => {
   width: fit-content;
   line-height: 0;
   padding: var(--rounded-action-padding);
-  box-shadow: var(--elevation-1);
   border: var(--rounded-action-border-size) solid;
-  background: var(--rounded-action-secondary-color);
-  border-color: var(--rounded-action-secondary-color);
+  background: var(--rounded-action-bg-color);
+  border-color: var(--rounded-action-bg-color);
   border-radius: var(--border-radius);
   transition: var(--transition);
 
   &:hover {
-    box-shadow: var(--elevation-2);
+    background: var(--rounded-action-bg-hover-color);
+    border-color: var(--rounded-action-bg-hover-color);
   }
 
   &--wide {
@@ -119,67 +116,15 @@ const loaderColor = computed(() => {
     border-radius: var(--rounded-action-rounded-border-radius);
   }
 
-  &--color {
-    &-primary {
-      background: var(--rounded-action-primary-color);
-      border-color: var(--rounded-action-primary-color);
-
-      &:hover {
-        background: var(--rounded-action-primary-hover-color);
-        border-color: var(--rounded-action-primary-hover-color);
-      }
-    }
-
-    &-secondary {
-      background: var(--rounded-action-secondary-color);
-      border-color: var(--rounded-action-secondary-color);
-
-      &:hover {
-        background: var(--rounded-action-secondary-hover-color);
-        border-color: var(--rounded-action-secondary-hover-color);
-      }
-
-      &.wt-rounded-action--active {
-        background: transparent;
-        border-color: var(--rounded-action-secondary-active-color);
-      }
-    }
-
-    &-success {
-      background: var(--rounded-action-success-color);
-      border-color: var(--rounded-action-success-color);
-
-      &:hover {
-        background: var(--rounded-action-success-hover-color);
-        border-color: var(--rounded-action-success-hover-color);
-      }
-    }
-
-    &-error {
-      background: var(--rounded-action-error-color);
-      border-color: var(--rounded-action-error-color);
-
-      &:hover {
-        background: var(--rounded-action-error-hover-color);
-        border-color: var(--rounded-action-error-hover-color);
-      }
-    }
-
-    &-transfer {
-      background: var(--rounded-action-transfer-color);
-      border-color: var(--rounded-action-transfer-color);
+  &--active {
+    border-color: var(--rounded-action-active-color);
 
-      &:hover {
-        background: var(--rounded-action-transfer-hover-color);
-        border-color: var(--rounded-action-transfer-hover-color);
-      }
+    &:hover {
+      border-color: var(--rounded-action-active-color);
     }
   }
 
   &.wt-rounded-action--disabled {
-    background: var(--rounded-action-disabled-color);
-    border-color: var(--rounded-action-disabled-color);
-    box-shadow: none;
     pointer-events: none;
   }
 

package/src/components/wt-search-bar/__tests__/WtSearchBar.spec.js

@@ -3,7 +3,7 @@ import { shallowMount } from '@vue/test-utils';
 import WtSearchBar from '../wt-search-bar.vue';
 import { useValidation } from '../../../mixins/validationMixin/useValidation';
 
-jest.mock('../../../mixins/validationMixin/useValidation');
+vi.mock('../../../mixins/validationMixin/useValidation');
 useValidation.mockImplementation(() => ({
   isValidation: ref(false),
   invalid: ref(false),

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

@@ -1,7 +1,6 @@
 <template>
   <div
     :class="{
-      'wt-search-bar--outline': outline,
       'wt-search-bar--invalid': invalid,
     }"
     class="wt-search-bar"
@@ -15,7 +14,7 @@
           <wt-icon
             :color="invalidColorProvider"
             icon="search"
-          ></wt-icon>
+          />
         </slot>
       </div>
       <input
@@ -29,20 +28,21 @@
       <div class="wt-search-bar__icon-controls">
         <wt-icon-btn
           :class="{ 'hidden': !value }"
+          :color="invalidColorProvider"
           class="wt-search-bar__reset-icon-btn"
           icon="close"
-          :color="invalidColorProvider"
           @click="handleInput('')"
-        ></wt-icon-btn>
+        />
         <wt-hint
           v-if="hint"
-          :iconColor="invalidColorProvider"
-        >{{ hint }}
+          :icon-color="invalidColorProvider"
+        >
+          {{ hint }}
         </wt-hint>
         <slot
           :invalid="invalid"
           name="additional-actions"
-        ></slot>
+        />
       </div>
     </div>
   </div>
@@ -50,8 +50,8 @@
 
 <script setup>
 import { computed, toRefs } from 'vue';
-import debounce from '../../scripts/debounce';
 import { useValidation } from '../../mixins/validationMixin/useValidation';
+import debounce from '../../scripts/debounce';
 
 const props = defineProps({
   v: {
@@ -74,10 +74,6 @@ const props = defineProps({
   placeholder: {
     type: String,
   },
-  outline: {
-    type: Boolean,
-    default: false,
-  },
   hint: {
     type: String,
     description: 'Adds hint icon + tooltip with text, passed as "hint" prop',
@@ -94,9 +90,7 @@ const { v, customValidators } = toRefs(props);
 
 const { invalid } = useValidation({ v, customValidators });
 
-const invalidColorProvider = computed(() => {
-  return invalid.value ? 'danger' : null;
-});
+const invalidColorProvider = computed(() => (invalid.value ? 'error' : 'default'));
 
 const search = debounce((value) => {
   emit('search', value);
@@ -129,21 +123,23 @@ function handleKeyup(event) {
 
   &.wt-search-bar--invalid {
     .wt-search-bar__wrapper {
-      border-color: var(--false-color);
+      border-color: var(--wt-text-field-input-border-error-color);
       outline: none; // prevent outline overlapping false color
     }
+
     .wt-search-bar__input {
-      color: var(--false-color);
+      @include wt-placeholder('error');
+      color: var(--wt-text-field-error-text-color);
     }
   }
 
   .wt-search-bar__wrapper {
-    border: var(--input-border);
-    border-color: var(--form-border-color);
-    border-radius: var(--border-radius);
     display: flex;
-    padding: calc(var(--spacing-xs) - 1px) var(--spacing-xs);
     align-items: center;
+    padding: calc(var(--spacing-xs) - 1px) var(--spacing-xs);
+    border: var(--input-border);
+    border-color: var(--wt-text-field-input-border-color);
+    border-radius: var(--border-radius);
     gap: var(--spacing-xs);
   }
 
@@ -167,29 +163,9 @@ function handleKeyup(event) {
     width: 100%;
     padding: 0;
     transition: var(--transition);
-    color: var(--form-input-color);
+    color: var(--wt-text-field-placeholder-color);
     border: none;
     outline: none;
-
-    &:focus {
-      @include wt-placeholder('focus');
-      border-color: var(--form-border--hover-color);
-    }
-
-    .wt-search-bar--outline & {
-      border-color: var(--form-outline-border-color);
-    }
-
-    .wt-search-bar--outline:hover &,
-    .wt-search-bar--outline &:focus {
-      border-color: var(--form-outline-border--hover-color);
-    }
-  }
-
-  /* make icons black */
-  .wt-search-bar:hover ::v-deep .wt-icon__icon,
-  .wt-search-bar:focus-within ::v-deep .wt-icon__icon {
-    fill: var(--icon-color--hover);
   }
 
   /* clears the 'X' from Internet Explorer */

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/mixins/multiselectMixin.js

@@ -144,8 +144,16 @@ export default {
     tag() {},
   },
 
+  watch: {
+    disabled() {
+      // load options if becomes enabled
+      if (!this.disabled) this.fetchOptions();
+    }
+  },
+
   created() {
-    this.fetchOptions();
+    // load options only if not disabled
+    if (!this.disabled) this.fetchOptions();
     this.fetchOptions = debounce(this.fetchOptions, 500);
   },
 };