@webitel/ui-sdk 23.12.2 → 23.12.5-1

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

@@ -1,31 +1,30 @@
 <template>
   <div
     :class="{
-      'wt-input--outline': outline,
       'wt-input--disabled': disabled,
       'wt-input--invalid': invalid,
     }"
     class="wt-input"
   >
     <wt-label
-      v-bind="labelProps"
       v-if="hasLabel"
       :disabled="disabled"
       :for="name"
       :invalid="invalid"
-      :outline="outline"
+      v-bind="labelProps"
     >
       <!-- @slot Custom input label -->
       <slot
-        v-bind="{ label }"
         name="label"
-      >{{ requiredLabel }}</slot>
+        v-bind="{ label }"
+      >
+        {{ requiredLabel }}
+      </slot>
     </wt-label>
     <div class="wt-input__wrapper">
       <input
-        v-bind="$attrs"
         :id="name"
-        ref="wt-input"
+        ref="WtInput"
         :class="{
           'wt-input--is-password': isPassword,
         }"
@@ -36,216 +35,234 @@
         :type="inputType"
         :value="inputValue"
         class="wt-input__input"
+        v-bind="$attrs"
         @input="inputHandler"
         @keyup="$emit('keyup', $event)"
       >
       <div
-        ref="after-wrapper"
+        ref="AfterWrapper"
         class="wt-input__after-wrapper"
       >
         <slot
           name="after-input"
-        ></slot>
+        />
         <slot
-          v-bind="{
-          isPasswordVisible,
-          switchVisibilityPassword,
-        }"
           v-if="isPassword"
           name="show-password"
+          v-bind="{
+            isPasswordVisible,
+            switchVisibilityPassword,
+          }"
         >
           <wt-icon-btn
+            :disabled="disabled"
             :icon="showPasswordIcon"
-            class="wt-input__password-button"
             @click="switchVisibilityPassword"
-          ></wt-icon-btn>
+          />
         </slot>
       </div>
     </div>
     <wt-input-info
       v-if="isValidation"
       :invalid="invalid"
-    >{{ validationText }}
+    >
+      {{ validationText }}
     </wt-input-info>
   </div>
 </template>
 
-<script>
-import validationMixin from '../../mixins/validationMixin/validationMixin';
+<script setup>
+import {
+  ref, computed, useSlots, onMounted,
+} from 'vue';
+import { useValidation } from '../../mixins/validationMixin/useValidation';
 
 /*
 * IMPORTANT: WT-INPUT SHOULD SUPPORT VUE 3 AND VUE 2 V-MODEL INTERFACES SO THAT THERE'S
 * TWO PROPS: VALUE AND MODELVALUE, AND 2 EVENTS: @UPDATE:MODELVALUE AND @INPUT
 * */
-export default {
-  name: 'wt-input',
-  mixins: [validationMixin],
-  props: {
-    value: {
-      type: [String, Number],
-    },
-    /**
-     * Current input modelValue (`v-model`)
-     */
-    modelValue: {
-      type: [String, Number],
-    },
-    /**
-     * 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
-     */
-    numberMax: {
-      type: Number,
-    },
-
-    outline: {
-      type: Boolean,
-      default: false,
-    },
-
-    labelProps: {
-      type: Object,
-      description: 'Object with props, passed down to wt-label as props',
-    },
-
-    preventTrim: {
-      type: Boolean,
-      default: false,
-    },
+const props = defineProps({
+  value: {
+    type: [String, Number],
   },
-  emits: ['update:modelValue', 'input', 'keyup'],
-  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';
-          }
-        }
-        this.inputType = inputType;
-      },
-    },
+  /**
+   * Current input modelValue (`v-model`)
+   */
+  modelValue: {
+    type: [String, Number],
+  },
+  /**
+   * 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,
   },
 
-  computed: {
-    inputValue() {
-      return this.value !== undefined ? this.value : this.modelValue;
-    },
-
-    hasLabel() {
-      return !!(this.label || this.$slots.label);
-    },
-
-    requiredLabel() {
-      return this.required ? `${this.label}*` : this.label;
-    },
+  /**
+   * Native number input restrictions
+   */
+  numberMin: {
+    type: Number,
+    default: 0,
+  },
 
-    isPassword() {
-      return this.type === 'password' && this.hasShowPassword;
-    },
+  /**
+   * Native number input restrictions
+   */
+  numberMax: {
+    type: Number,
+  },
 
-    showPasswordIcon() {
-      return this.isPasswordVisible ? 'eye--closed' : 'eye--opened';
-    },
+  labelProps: {
+    type: Object,
+    description: 'Object with props, passed down to wt-label as props',
   },
-  methods: {
-    inputHandler(event) {
-      const value = this.preventTrim ? event.target.value : event.target.value.trim();
-      this.$emit('update:modelValue', value);
-      this.$emit('input', value);
-    },
 
-    switchVisibilityPassword() {
-      this.isPasswordVisible = !this.isPasswordVisible;
-      this.inputType = this.isPasswordVisible ? 'text' : 'password';
-    },
+  preventTrim: {
+    type: Boolean,
+    default: false,
+  },
 
-    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)`;
-    },
+  // validation rules
+  // TODO: move to separate file to make it reusable
+  v: {
+    type: Object,
   },
-  mounted() {
-    this.updateInputPaddings();
+  customValidators: {
+    type: Array,
+    default: () => [],
   },
-};
+});
+const emit = defineEmits(['update:modelValue', 'input', 'keyup']);
+
+const slots = useSlots();
+const {
+  isValidation,
+  invalid,
+  validationText,
+} = useValidation({ v: props.v, customValidators: props.customValidators });
+
+// toggles password <-> text at showPassword
+const inputType = ref('');
+inputType.value = props.type;
+
+// template ref
+const AfterWrapper = ref(null);
+// template ref
+const WtInput = ref(null);
+
+const isPasswordVisible = ref(false);
+
+// FIXME: uncomment and test, because this code was copy-pasted from vue-storefront long ago
+// 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'
+//         ) {
+//           inputType = 'text';
+//         }
+//       }
+//       this.inputType = inputType;
+//     },
+//   },
+// },
+
+const inputValue = computed(() => {
+  return props.value !== undefined ? props.value : props.modelValue;
+});
+
+const hasLabel = computed(() => {
+  return !!(props.label || slots.label);
+});
+
+const requiredLabel = computed(() => {
+  return props.required ? `${props.label}*` : props.label;
+});
+
+const isPassword = computed(() => {
+  return props.type === 'password' && props.hasShowPassword;
+});
+
+const showPasswordIcon = computed(() => {
+  return isPasswordVisible.value ? 'eye--closed' : 'eye--opened';
+});
+
+function inputHandler(event) {
+  const value = props.preventTrim ? event.target.value : event.target.value.trim();
+  emit('update:modelValue', value);
+  emit('input', value);
+}
+
+function switchVisibilityPassword() {
+  isPasswordVisible.value = !isPasswordVisible.value;
+  inputType.value = isPasswordVisible.value ? 'text' : 'password';
+}
+
+function updateInputPaddings() {
+  // cant test this thing cause vue test utils doesnt render elements width :/
+  const afterWrapperWidth = AfterWrapper.value.offsetWidth;
+  const inputEl = WtInput.value;
+  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)`;
+}
+
+onMounted(() => {
+  updateInputPaddings();
+});
 </script>
 
 <style lang="scss">
@@ -266,18 +283,6 @@ export default {
   position: relative;
 }
 
-.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__input {
   @extend %typo-body-1;
   @include wt-placeholder;
@@ -287,35 +292,22 @@ export default {
   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-color: var(--wt-text-field-input-border-color);
   border-radius: var(--border-radius);
 
-  &: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: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);
+    @include wt-placeholder('error');
+    color: var(--wt-text-field-error-text-color);
+    border-color: var(--wt-text-field-input-border-error-color);
     outline: none; // prevent outline overlapping false color
   }
 
   .wt-input--disabled & {
     @include wt-placeholder('disabled');
-    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);
   }
 }
 
@@ -328,16 +320,5 @@ export default {
   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:hover & ::v-deep .wt-icon__icon,
-    .wt-input:focus-within & ::v-deep .wt-icon__icon {
-      fill: var(--icon-color--hover);
-    }
-  }
 }
 </style>

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

@@ -5,13 +5,13 @@
       'wt-input-info--invalid': invalid,
     }"
   >
-    <slot></slot>
+    <slot />
   </div>
 </template>
 
 <script>
 export default {
-  name: 'wt-input-info',
+  name: 'WtInputInfo',
   props: {
     invalid: {
       type: Boolean,

package/src/components/wt-item-link/wt-item-link.vue

@@ -5,7 +5,7 @@
     :class="{ 'wt-item-link--disabled': disabled }"
     class="wt-item-link"
   >
-    <slot></slot>
+    <slot />
   </router-link>
 </template>
 

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

@@ -1,4 +1,6 @@
 
 :root {
-  --label--invalid-color: var(--false-color);
-}
+  --wt-label-color: var(--text-main-color);
+  --wt-label-error-color: var(--text-error-color);
+  --wt-label-disabled-color: var(--text-disabled-color);
+}

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

@@ -2,13 +2,11 @@
   <label
     class="wt-label"
     :class="{
-      'wt-label--outline': outline,
       'wt-label--invalid': invalid,
       'wt-label--disabled': disabled,
     }"
-    :for="this.for"
   >
-    <slot></slot>
+    <slot />
     <wt-hint
       v-if="hint"
     >{{ hint }}
@@ -18,19 +16,12 @@
 
 <script>
 export default {
-  name: 'wt-label',
+  name: 'WtLabel',
   props: {
-    for: {
-      type: String,
-    },
     disabled: {
       type: Boolean,
       default: false,
     },
-    outline: {
-      type: Boolean,
-      default: false,
-    },
     invalid: {
       type: Boolean,
       default: false,
@@ -54,20 +45,16 @@ export default {
 
   display: flex;
   align-items: center;
-  color: var(--form-label-color);
+  color: var(--wt-label-color);
   transition: var(--transition);
   cursor: text;
 
-  &--outline {
-    color: var(--form-outline-label-color);
-  }
-
   &--invalid {
-    color: var(--label--invalid-color);
+    color: var(--wt-label-error-color);
   }
 
   &--disabled {
-    color: var(--form-label--disabled-color);
+    color: var(--wt-label-disabled-color);
   }
 }
 

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

@@ -1,12 +1,15 @@
 <template>
   <div class="wt-load-bar">
-    <span :style="`width: ${this.progressWidth}%;`" class="wt-load-bar__progress"></span>
+    <span
+      :style="`width: ${progressWidth}%;`"
+      class="wt-load-bar__progress"
+    />
   </div>
 </template>
 
 <script>
 export default {
-  name: 'wt-load-bar',
+  name: 'WtLoadBar',
   props: {
     max: {
       type: [Number, String],
@@ -40,7 +43,7 @@ export default {
   width: 100%;
   padding: var(--load-bar-padding);
   line-height: 0;
-  border: 1px solid var(--accent-color);
+  border: 1px solid var(--primary-color);
   border-radius: var(--border-radius);
 }
 
@@ -49,7 +52,7 @@ export default {
   height: var(--load-bar-height);
   transition: var(--transition);
   border-radius: var(--load-bar-border-radius);
-  background: var(--accent-color);
+  background: var(--primary-color);
   will-change: width;
 }
 </style>

package/src/components/wt-loader/_internals/wt-loader--md.vue

@@ -1,7 +1,16 @@
 <template>
   <div class="wt-loader wt-loader--md">
-    <svg class="wt-loader--md__svg" viewBox="0 0 80 80">
-      <rect class="wt-loader--md__svg__rect" x="8" y="8" width="64" height="64"></rect>
+    <svg
+      class="wt-loader--md__svg"
+      viewBox="0 0 80 80"
+    >
+      <rect
+        class="wt-loader--md__svg__rect"
+        x="8"
+        y="8"
+        width="64"
+        height="64"
+      />
     </svg>
   </div>
 </template>

package/src/components/wt-loader/_internals/wt-loader--sm.vue

@@ -1,9 +1,16 @@
 <!--https://codepen.io/zapdev/pen/MYJRaj-->
 
 <template>
-  <div class="wt-loader--sm" :class="`wt-loader--sm--${color}`">
+  <div
+    class="wt-loader--sm"
+    :class="`wt-loader--sm--${color}`"
+  >
     <svg viewBox="0 0 24 24">
-      <circle cx="12" cy="12" r="8" />
+      <circle
+        cx="12"
+        cy="12"
+        r="8"
+      />
     </svg>
   </div>
 </template>

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

@@ -3,6 +3,6 @@
   --loader-size: 44px;
   --loader-dot-size: 6px;
   --loader-path-color: var(--contrast-color);
-  --loader-dot-color: var(--accent-color);
+  --loader-dot-color: var(--primary-color);
   --loader-animation-duration: 3s;
-}
+}