@webitel/ui-sdk 2.0.6 → 2.0.9

package/package.json

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

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

@@ -7,6 +7,7 @@
     :popper-class="[
       'wt-tooltip__popper',
        { 'wt-tooltip--contrast__popper': contrast },
+       popperClass,
      ]"
     :triggers="['hover', 'focus', 'touch']"
     class="wt-tooltip"
@@ -30,6 +31,10 @@ export default {
       type: String,
       default: 'auto',
     },
+    popperClass: {
+      type: String,
+      default: '',
+    },
   },
 };
 </script>

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

@@ -1,18 +1,18 @@
 <template>
   <div
-    class="wt-input"
     :class="{
       'wt-input--outline': outline,
       'wt-input--disabled': disabled,
       'wt-input--invalid': invalid,
     }"
+    class="wt-input"
   >
     <wt-label
       v-if="hasLabel"
-      :for="name"
-      :outline="outline"
       :disabled="disabled"
+      :for="name"
       :invalid="invalid"
+      :outline="outline"
       v-bind="labelProps"
     >
       <!-- @slot Custom input label -->
@@ -21,22 +21,22 @@
     <div class="wt-input__wrapper">
       <input
         :id="name"
-        class="wt-input__input"
+        ref="wt-input"
         :class="{
           'wt-input--is-password': isPassword,
         }"
-        ref="wt-input"
-        :value="value"
-        :type="inputType"
-        :placeholder="placeholder || label"
         :disabled="disabled"
-        :min="numberMin"
         :max="numberMax"
+        :min="numberMin"
+        :placeholder="placeholder || label"
+        :type="inputType"
+        :value="value"
+        class="wt-input__input"
         v-on="listeners"
       >
       <div
-        class="wt-input__after-wrapper"
         ref="after-wrapper"
+        class="wt-input__after-wrapper"
       >
         <slot
           name="after-input"
@@ -50,8 +50,8 @@
         }"
         >
           <wt-icon-btn
-            class="wt-input__password-button"
             :icon="showPasswordIcon"
+            class="wt-input__password-button"
             @click.native="switchVisibilityPassword"
           ></wt-icon-btn>
         </slot>
@@ -69,254 +69,255 @@
 import validationMixin from '../../../mixins/validationMixin/validationMixin';
 
 export default {
-    name: 'wt-input',
-    mixins: [validationMixin],
-    props: {
-      /**
-       * Current input value (`v-model`)
-       */
-      value: {
-        type: [String, Number],
-        default: '',
-      },
-      /**
-       * Form input label
-       */
-      label: {
-        type: String,
-        default: '',
-      },
-      /**
-       * Form input placeholder
-       */
-      placeholder: {
-        type: String,
-      },
-      /**
-       * Form input name
-       */
-      name: {
-        type: String,
-        default: '',
-      },
-      /**
-       * Form input type
-       */
-      type: {
-        type: String,
-        default: 'text',
-      },
-      /**
-       * Native input required attribute
-       */
-      required: {
-        type: Boolean,
-        default: false,
-        description: 'Native input required attribute',
-      },
-      /**
-       * Native input disabled attribute
-       */
-      disabled: {
-        type: Boolean,
-        default: false,
-        description: 'Native input disabled attribute',
-      },
-      /**
-       * Status of show password icon display
-       */
-      hasShowPassword: {
-        type: Boolean,
-        default: false,
-      },
+  name: 'wt-input',
+  mixins: [validationMixin],
+  props: {
+    /**
+     * Current input value (`v-model`)
+     */
+    value: {
+      type: [String, Number],
+      default: '',
+    },
+    /**
+     * Form input label
+     */
+    label: {
+      type: String,
+      default: '',
+    },
+    /**
+     * Form input placeholder
+     */
+    placeholder: {
+      type: String,
+    },
+    /**
+     * Form input name
+     */
+    name: {
+      type: String,
+      default: '',
+    },
+    /**
+     * Form input type
+     */
+    type: {
+      type: String,
+      default: 'text',
+    },
+    /**
+     * Native input required attribute
+     */
+    required: {
+      type: Boolean,
+      default: false,
+      description: 'Native input required attribute',
+    },
+    /**
+     * Native input disabled attribute
+     */
+    disabled: {
+      type: Boolean,
+      default: false,
+      description: 'Native input disabled attribute',
+    },
+    /**
+     * Status of show password icon display
+     */
+    hasShowPassword: {
+      type: Boolean,
+      default: false,
+    },
 
-      /**
-       * Native number input restrictions
-       */
-      numberMin: {
-        type: Number,
-        default: 0,
-      },
+    /**
+     * Native number input restrictions
+     */
+    numberMin: {
+      type: Number,
+      default: 0,
+    },
 
-      /**
-       * Native number input restrictions
-       */
-      numberMax: {
-        type: Number,
-      },
+    /**
+     * Native number input restrictions
+     */
+    numberMax: {
+      type: Number,
+    },
 
-      outline: {
-        type: Boolean,
-        default: false,
-      },
+    outline: {
+      type: Boolean,
+      default: false,
+    },
 
-      labelProps: {
-        type: Object,
-        description: 'Object with props, passed down to wt-label as props',
-      },
+    labelProps: {
+      type: Object,
+      description: 'Object with props, passed down to wt-label as props',
     },
+  },
 
-    data: () => ({
-      inputType: '',
-      isPasswordVisible: false,
-    }),
+  data: () => ({
+    inputType: '',
+    isPasswordVisible: false,
+  }),
 
-    watch: {
-      type: {
-        immediate: true,
-        handler(type) {
-          let inputType = type;
-          // Safari has bug for number input
-          if (typeof window !== 'undefined' || typeof document !== 'undefined') {
-            const ua = navigator.userAgent.toLocaleLowerCase();
-            if (
-              ua.indexOf('safari') !== -1
-              && ua.indexOf('chrome') === -1
-              && type === 'number'
-            ) {
-              this.isNumberTypeSafari = true;
-              inputType = 'text';
-            }
+  watch: {
+    type: {
+      immediate: true,
+      handler(type) {
+        let inputType = type;
+        // Safari has bug for number input
+        if (typeof window !== 'undefined' || typeof document !== 'undefined') {
+          const ua = navigator.userAgent.toLocaleLowerCase();
+          if (
+            ua.indexOf('safari') !== -1
+            && ua.indexOf('chrome') === -1
+            && type === 'number'
+          ) {
+            this.isNumberTypeSafari = true;
+            inputType = 'text';
           }
-          this.inputType = inputType;
-        },
+        }
+        this.inputType = inputType;
       },
     },
+  },
 
-    computed: {
-      hasLabel() {
-        return !!(this.label || this.$slots.label);
-      },
-
-      requiredLabel() {
-        return this.required ? `${this.label}*` : this.label;
-      },
+  computed: {
+    hasLabel() {
+      return !!(this.label || this.$slots.label);
+    },
 
-      isPassword() {
-        return this.type === 'password' && this.hasShowPassword;
-      },
+    requiredLabel() {
+      return this.required ? `${this.label}*` : this.label;
+    },
 
-      showPasswordIcon() {
-        return this.isPasswordVisible ? 'eye--closed' : 'eye--opened';
-      },
+    isPassword() {
+      return this.type === 'password' && this.hasShowPassword;
+    },
 
-      listeners() {
-        return {
-          ...this.$listeners,
-          input: this.inputHandler,
-        };
-      },
+    showPasswordIcon() {
+      return this.isPasswordVisible ? 'eye--closed' : 'eye--opened';
     },
-    methods: {
-      inputHandler(event) {
-        this.$emit('input', event.target.value.trim());
-      },
 
-      switchVisibilityPassword() {
-        this.isPasswordVisible = !this.isPasswordVisible;
-        this.inputType = this.isPasswordVisible ? 'text' : 'password';
-      },
+    listeners() {
+      return {
+        ...this.$listeners,
+        input: this.inputHandler,
+      };
+    },
+  },
+  methods: {
+    inputHandler(event) {
+      this.$emit('input', event.target.value.trim());
+    },
 
-      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 = getComputedStyle(document.documentElement)
-          .getPropertyValue('--input-padding');
-        inputEl.style.paddingRight = `calc(${defaultInputPadding} * 2 + ${afterWrapperWidth}px)`;
-      },
+    switchVisibilityPassword() {
+      this.isPasswordVisible = !this.isPasswordVisible;
+      this.inputType = this.isPasswordVisible ? 'text' : 'password';
     },
-    mounted() {
-      this.updateInputPaddings();
+
+    async 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 = getComputedStyle(document.documentElement)
+        .getPropertyValue('--input-padding');
+      if (afterWrapperWidth >= inputEl.offsetWidth) return; // fixes https://my.webitel.com/browse/WTEL-2635
+      inputEl.style.paddingRight = `calc(${defaultInputPadding} * 2 + ${afterWrapperWidth}px)`;
     },
+  },
+  mounted() {
+    this.updateInputPaddings();
+  },
 };
 </script>
 
 <style lang="scss" scoped>
-  .wt-input {
-    cursor: text;
+.wt-input {
+  cursor: text;
 
-    &--disabled {
-      pointer-events: none;
-    }
+  &--disabled {
+    pointer-events: none;
   }
+}
 
-  .wt-input__wrapper {
-    position: relative;
-  }
+.wt-input__wrapper {
+  position: relative;
+}
 
-  .wt-label {
-    .wt-input:hover &,
-    .wt-input:focus-within & {
-      color: var(--form-label--hover-color);
-    }
+.wt-label {
+  .wt-input:hover &,
+  .wt-input:focus-within & {
+    color: var(--form-label--hover-color);
+  }
 
-    .wt-input--invalid:hover &,
-    .wt-input--invalid:focus-within & {
-      color: var(--label--invalid-color);
-    }
+  .wt-input--invalid:hover &,
+  .wt-input--invalid:focus-within & {
+    color: var(--label--invalid-color);
   }
+}
 
-  .wt-input__input {
-    @extend %typo-body-1;
-    @include wt-placeholder;
+.wt-input__input {
+  @extend %typo-body-1;
+  @include wt-placeholder;
 
-    display: block;
-    width: 100%;
-    box-sizing: border-box;
-    padding: var(--input-padding);
-    color: var(--form-input-color);
-    border: var(--input-border);
-    border-color: var(--form-border-color);
-    border-radius: var(--border-radius);
-    transition: var(--transition);
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--input-padding);
+  transition: var(--transition);
+  color: var(--form-input-color);
+  border: var(--input-border);
+  border-color: var(--form-border-color);
+  border-radius: var(--border-radius);
 
-    &:focus {
-      @include wt-placeholder('focus');
-      border-color: var(--form-border--hover-color);
-    }
+  &:focus {
+    @include wt-placeholder('focus');
+    border-color: var(--form-border--hover-color);
+  }
 
-    .wt-input--outline & {
-      border-color: var(--form-outline-border-color);
-    }
+  .wt-input--outline & {
+    border-color: var(--form-outline-border-color);
+  }
 
-    .wt-input--outline:hover &,
-    .wt-input--outline &:focus {
-      border-color: var(--form-outline-border--hover-color);
-    }
+  .wt-input--outline:hover &,
+  .wt-input--outline &:focus {
+    border-color: var(--form-outline-border--hover-color);
+  }
 
-    .wt-input--invalid &,
-    .wt-input--invalid:hover & {
-      border-color: var(--false-color);
-      outline: none; // prevent outline overlapping false color
-    }
+  .wt-input--invalid &,
+  .wt-input--invalid:hover & {
+    border-color: var(--false-color);
+    outline: none; // prevent outline overlapping false color
+  }
 
-    .wt-input--disabled & {
-      @include wt-placeholder('disabled');
-      background: var(--form-border--disabled-color);
-      border-color: var(--form-border--disabled-color);
-    }
+  .wt-input--disabled & {
+    @include wt-placeholder('disabled');
+    border-color: var(--form-border--disabled-color);
+    background: var(--form-border--disabled-color);
   }
+}
 
-  .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%);
-    pointer-events: auto; // override --disabled p-events none
+.wt-input__after-wrapper {
+  position: absolute;
+  top: 50%;
+  right: var(--input-icon-margin);
+  display: flex;
+  align-items: center;
+  transform: translateY(-50%);
+  pointer-events: auto; // override --disabled p-events none
+  gap: var(--input-after-wrapper-gap);
 
-    .wt-input__password-button {
-      .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-tooltip/_variables.scss

@@ -13,6 +13,8 @@
 // cause we need to set styles to element somewhere in the HTML, not inside .wt-tooltip scope
 .wt-tooltip__popper .v-popper__inner {
   @extend %typo-body-1;
+  max-width: 80vw;
+  max-height: 80vh;
   padding: var(--tooltip-padding);
   color: var(--tooltip-light-text-color);
   background: var(--tooltip-light-bg-color);