@webitel/ui-sdk 0.9.45 → 0.9.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "0.9.45",
+  "version": "0.9.49",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",

package/src/components/atoms/wt-button/wt-button.vue

@@ -100,15 +100,15 @@
 
     &:not(&--outline) {
       &.secondary {
-        color: var(--btn-secondary-color);
+        color: var(--btn-dark-font-color);
         border-color: var(--btn-secondary-color);
-        background: var(--btn-secondary-bg-color);
+        background: var(--btn-secondary-color);
 
         &:hover,
         &:active {
-          color: var(--btn-secondary--hover-color);
+          color: var(--btn-dark-font-color);
           border-color: var(--btn-secondary--hover-color);
-          background: var(--btn-secondary-bg-color);
+          background: var(--btn-secondary-color);
         }
       }
 

package/src/components/molecules/wt-input/wt-input.vue

@@ -218,6 +218,7 @@ export default {
       },
 
       updateInputPaddings() {
+        // cant test this thing cause vue test utils doesnt render elements width :/
         const afterWrapperWidth = this.$refs['after-wrapper'].offsetWidth;
         const inputEl = this.$refs['wt-input'];
         const defaultInputPadding = parseInt(getComputedStyle(document.documentElement)

package/src/css/components/atoms/wt-button/_variables.scss

@@ -26,9 +26,8 @@
   --btn-primary-color: var(--main-accent-color);
   --btn-primary--hover-color: #EFB917;
 
-  --btn-secondary-color: #808080;
-  --btn-secondary-bg-color: transparent;
-  --btn-secondary--hover-color: #000;
+  --btn-secondary-color: hsla(var(--_secondary-color), var(--_opacity--default));
+  --btn-secondary--hover-color: hsla(var(--_secondary-color), var(--_opacity--hover));
 
   --btn-disabled-color: var(--disabled-color);
   --btn-disabled-bg-color: transparent;

package/src/css/components/molecules/wt-button-select/_variables.scss

@@ -9,7 +9,7 @@
   --button-select-buttons-gap: 1px;
 
   --button-select-icon-color-primary: var(--btn-primary-color);
-  --button-select-icon-color-secondary: var(--btn-secondary-color);
+  --button-select-icon-color-secondary: var(--btn-dark-font-color);
   --button-select-icon-color-dark: var(--btn-dark-font-color);
   --button-select-icon-color-ligth: var(--main-color);
 

package/src/mixins/validationMixin/validationMixin.js

@@ -17,24 +17,25 @@ export default {
       return this.isValidation && this.v.$error;
     },
     validationText() {
+      let validationText = '';
       if (this.isValidation && this.invalid) {
-        if (this.v.required === false) return this.$t('validation.required');
-        if (this.v.numeric === false) return this.$t('validation.numeric');
-        if (this.v.email === false) return this.$t('validation.email');
-        if (this.v.gatewayHostValidator === false) return this.$t('validation.gatewayHostValidator');
-        if (this.v.ipValidator === false) return this.$t('validation.ipValidator');
-        if (this.v.macValidator === false) return this.$t('validation.macValidator');
-        if (this.v.minValue === false) return `${this.$t('validation.minValue')} ${this.v.$params.minValue.min}`;
-        if (this.v.maxValue === false) return `${this.$t('validation.maxValue')} ${this.v.$params.maxValue.max}`;
-        if (this.v.sipAccountValidator === false) return this.$t('validation.sipAccountValidator');
-        if (this.v.minLength === false) return `${this.$t('validation.minLength')} ${this.v.$params.minLength.min}`;
-        if (this.v.url === false) return `${this.$t('validation.url')}`;
+        if (this.v.required === false) validationText = this.$t('validation.required');
+        else if (this.v.numeric === false) validationText = this.$t('validation.numeric');
+        else if (this.v.email === false) validationText = this.$t('validation.email');
+        else if (this.v.gatewayHostValidator === false) validationText = this.$t('validation.gatewayHostValidator');
+        else if (this.v.ipValidator === false) validationText = this.$t('validation.ipValidator');
+        else if (this.v.macValidator === false) validationText = this.$t('validation.macValidator');
+        else if (this.v.minValue === false) validationText = `${this.$t('validation.minValue')} ${this.v.$params.minValue.min}`;
+        else if (this.v.maxValue === false) validationText = `${this.$t('validation.maxValue')} ${this.v.$params.maxValue.max}`;
+        else if (this.v.sipAccountValidator === false) validationText = this.$t('validation.sipAccountValidator');
+        else if (this.v.minLength === false) validationText = `${this.$t('validation.minLength')} ${this.v.$params.minLength.min}`;
+        else if (this.v.url === false) validationText = `${this.$t('validation.url')}`;
       }
       // eslint-disable-next-line no-restricted-syntax
       for (const { name, text } of this.customValidators) {
-        if (this.v[name] === false) return text;
+        if (this.v[name] === false) validationText = text;
       }
-      return '';
+      return validationText;
     },
   },
 };