@webitel/ui-sdk 23.12.49 → 23.12.50-2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "23.12.49",
+  "version": "23.12.50-2",
   "private": false,
   "scripts": {
     "dev": "vite",

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

@@ -6,6 +6,7 @@
 
   --wt-indicator-text-margin: var(--spacing-2xs);
 
+  --wt-indicator-text-color: var(--text-main-color);
   --wt-indicator-primary-color: var(--primary-color);
   --wt-indicator-secondary-color: var(--dp-1-surface-color);
   --wt-indicator-disabled-color: var(--dp-10-surface-color);

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

@@ -61,6 +61,7 @@ export default {
 .wt-indicator__text {
   @extend %typo-body-1;
   margin-left: var(--wt-indicator-text-margin);
+  color: var(--wt-indicator-text-color);
 }
 
 .wt-indicator__indicator {

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

@@ -6,10 +6,12 @@
   --wt-slider-width: 100%;
   --wt-slider-input-height: 8px;
   --wt-slider-border: 1px solid var(--secondary-color);
-  --wt-slider-background-color: 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(--white);
+  --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

@@ -126,6 +126,7 @@ export default {
     border-radius: var(--wt-slider-pointer-radius);
     background: var(--wt-slider-pointer-background-color);
     -webkit-appearance: none;
+    transition: var(--transition);
   }
 
   &::-webkit-slider-runnable-track {
@@ -137,8 +138,10 @@ export default {
     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 {
@@ -154,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

@@ -2,7 +2,8 @@
 :root {
   --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(--form-input-color);
-  --wt-status-select-option-background-hover-color: var(--secondary-color);
-  --wt-status-select-option-background-selected-color: var(--secondary-color);
+  --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

@@ -124,6 +124,7 @@ export default {
         min-height: 0;
         padding: 0;
         color: var(--wt-status-select-option-text-color);
+        background: var(--wt-status-select-option-background-color);
       }
 
       .multiselect__option--highlight {
@@ -131,7 +132,7 @@ export default {
       }
 
       .multiselect__option--selected {
-        background: var(--wt-status-select-option-background-selected-color);
+        //background: var(--wt-status-select-option-background-selected-color);
       }
     }
   }

package/src/mixins/validationMixin/useValidation.js

@@ -1,14 +1,28 @@
-import { computed } from 'vue';
+import { computed, isReactive, isRef } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-export function useValidation({ v, customValidators }) {
+export function useValidation({ v: inputV, customValidators: inputCustomValidators }) {
   const { t } = useI18n();
+
+  // support vue options api, where v is a reactive, not ref
+  let v = inputV;
+  let customValidators = inputCustomValidators;
+
+  if (isReactive(v)) {
+    v = computed(() => inputV);
+    customValidators = computed(() => inputCustomValidators);
+  }
+
+  // end
+
+  console.info(v, inputV, isRef(v), isReactive(inputV));
+
   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');
@@ -28,7 +42,7 @@ export function useValidation({ v, customValidators }) {
       else if (v.value.integer?.$invalid) validationText = `${t('validation.integer')}`;
     }
     // eslint-disable-next-line no-restricted-syntax
-    for (const { name, text } of customValidators) {
+    for (const { name, text } of customValidators.value) {
       if (v.value[name]?.$invalid) validationText = text;
     }
     return validationText;