@webitel/ui-sdk 0.9.44 → 0.9.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "0.9.44",
+  "version": "0.9.48",
   "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);
           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

@@ -25,6 +25,7 @@
         :class="{
           'wt-input--is-password': isPassword,
         }"
+        ref="wt-input"
         :value="value"
         :type="inputType"
         :placeholder="placeholder || label"
@@ -33,20 +34,28 @@
         :max="numberMax"
         v-on="listeners"
       >
-      <slot
-        v-if="isPassword"
-        name="show-password"
-        v-bind="{
+      <div
+        class="wt-input__after-wrapper"
+        ref="after-wrapper"
+      >
+        <slot
+          name="after-input"
+        ></slot>
+        <slot
+          v-if="isPassword"
+          name="show-password"
+          v-bind="{
           isPasswordVisible,
           switchVisibilityPassword,
         }"
-      >
-        <wt-icon-btn
-          class="wt-input__password-button"
-          :icon="showPasswordIcon"
-          @click.native="switchVisibilityPassword"
-        ></wt-icon-btn>
-      </slot>
+        >
+          <wt-icon-btn
+            class="wt-input__password-button"
+            :icon="showPasswordIcon"
+            @click.native="switchVisibilityPassword"
+          ></wt-icon-btn>
+        </slot>
+      </div>
     </div>
     <wt-input-info
       v-if="isValidation"
@@ -57,9 +66,9 @@
 </template>
 
 <script>
-  import validationMixin from '../../../mixins/validationMixin/validationMixin';
+import validationMixin from '../../../mixins/validationMixin/validationMixin';
 
-  export default {
+export default {
     name: 'wt-input',
     mixins: [validationMixin],
     props: {
@@ -207,8 +216,20 @@
         this.isPasswordVisible = !this.isPasswordVisible;
         this.inputType = this.isPasswordVisible ? 'text' : 'password';
       },
+
+      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)
+          .getPropertyValue('--input-padding'), 10);
+        inputEl.style.paddingRight = `${defaultInputPadding + afterWrapperWidth + defaultInputPadding}px`;
+      },
     },
-  };
+    mounted() {
+      this.updateInputPaddings();
+    },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -298,19 +319,24 @@
     }
   }
 
-  .wt-input__password-button {
+  .wt-input__after-wrapper {
+    display: flex;
+    gap: var(--input-after-wrapper-gap);
+    align-items: center;
     position: absolute;
     top: 50%;
     right: var(--input-icon-margin);
     transform: translateY(-50%);
 
-    .wt-input--disabled & ::v-deep .wt-icon__icon {
-      fill: var(--icon-color-disabled);
-    }
+    .wt-input__password-button {
+      .wt-input--disabled & ::v-deep .wt-icon__icon {
+        fill: var(--icon-color-disabled);
+      }
 
-    .wt-input:hover & ::v-deep .wt-icon__icon,
-    .wt-input:focus-within & ::v-deep .wt-icon__icon {
-      fill: var(--icon-color--hover);
+      .wt-input:hover & ::v-deep .wt-icon__icon,
+      .wt-input:focus-within & ::v-deep .wt-icon__icon {
+        fill: var(--icon-color--hover);
+      }
     }
   }
 </style>

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-input/_variables.scss

@@ -3,4 +3,6 @@
   --input-padding: 9px;
   --input-border: 1px solid;
   --input-icon-margin: 10px;
+
+  --input-after-wrapper-gap: var(--spacing--xs);
 }

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;
     },
   },
 };