@webitel/ui-sdk 23.12.38 → 23.12.39-vite-1

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

@@ -19,13 +19,14 @@
       <slot
         name="label"
         v-bind="{ label }"
-      >{{ requiredLabel }}
+      >
+        {{ requiredLabel }}
       </slot>
     </wt-label>
     <div class="wt-input__wrapper">
       <input
         :id="name"
-        ref="wt-input"
+        ref="WtInput"
         :class="{
           'wt-input--is-password': isPassword,
         }"
@@ -41,212 +42,234 @@
         @keyup="$emit('keyup', $event)"
       >
       <div
-        ref="after-wrapper"
+        ref="AfterWrapper"
         class="wt-input__after-wrapper"
       >
         <slot
           name="after-input"
-        ></slot>
+        />
         <slot
           v-if="isPassword"
           name="show-password"
           v-bind="{
-          isPasswordVisible,
-          switchVisibilityPassword,
-        }"
+            isPasswordVisible,
+            switchVisibilityPassword,
+          }"
         >
           <wt-icon-btn
             :disabled="disabled"
             :icon="showPasswordIcon"
             @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],
+  },
+  /**
+   * 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',
   },
-  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;
-      },
-    },
+  /**
+   * Status of show password icon display
+   */
+  hasShowPassword: {
+    type: Boolean,
+    default: false,
   },
 
-  computed: {
-    inputValue() {
-      return this.value !== undefined ? this.value : this.modelValue;
-    },
+  /**
+   * Native number input restrictions
+   */
+  numberMin: {
+    type: Number,
+    default: 0,
+  },
 
-    hasLabel() {
-      return !!(this.label || this.$slots.label);
-    },
+  /**
+   * Native number input restrictions
+   */
+  numberMax: {
+    type: Number,
+  },
 
-    requiredLabel() {
-      return this.required ? `${this.label}*` : this.label;
-    },
+  outline: {
+    type: Boolean,
+    default: false,
+  },
 
-    isPassword() {
-      return this.type === 'password' && this.hasShowPassword;
-    },
+  labelProps: {
+    type: Object,
+    description: 'Object with props, passed down to wt-label as props',
+  },
 
-    showPasswordIcon() {
-      return this.isPasswordVisible ? 'eye--closed' : 'eye--opened';
-    },
+  preventTrim: {
+    type: Boolean,
+    default: false,
   },
-  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';
-    },
-
-    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">
@@ -267,18 +290,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;

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/wt-label.vue

@@ -8,7 +8,7 @@
     }"
     :for="this.for"
   >
-    <slot></slot>
+    <slot />
     <wt-hint
       v-if="hint"
     >{{ hint }}
@@ -18,7 +18,7 @@
 
 <script>
 export default {
-  name: 'wt-label',
+  name: 'WtLabel',
   props: {
     for: {
       type: String,

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],

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/wt-loader.vue

@@ -1,6 +1,13 @@
 <template>
-  <wt-loader-sm class="wt-loader" v-if="size === 'sm'" :color="color"></wt-loader-sm>
-  <wt-loader-md class="wt-loader" v-else-if="size === 'md'"></wt-loader-md>
+  <wt-loader-sm
+    v-if="size === 'sm'"
+    class="wt-loader"
+    :color="color"
+  />
+  <wt-loader-md
+    v-else-if="size === 'md'"
+    class="wt-loader"
+  />
 </template>
 
 <script>
@@ -8,7 +15,7 @@ import WtLoaderSm from './_internals/wt-loader--sm.vue';
 import WtLoaderMd from './_internals/wt-loader--md.vue';
 
 export default {
-  name: 'wt-loader',
+  name: 'WtLoader',
   components: {
     WtLoaderSm,
     WtLoaderMd,

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

@@ -1,13 +1,19 @@
 <template>
-  <aside v-clickaway="close" class="wt-navigation-bar">
+  <aside
+    v-clickaway="close"
+    class="wt-navigation-bar"
+  >
     <wt-icon-btn
       :class="{'active': isOpened}"
       class="wt-navigation-bar__menu-btn"
       icon="menu"
       @click="isOpened = !isOpened"
-    ></wt-icon-btn>
+    />
     <transition name="fade">
-      <nav v-show="isOpened" class="wt-navigation-bar__nav">
+      <nav
+        v-show="isOpened"
+        class="wt-navigation-bar__nav"
+      >
         <header class="wt-navigation-bar__nav-header">
           <!--        vue cli build target lib cant handle dynamic require :( -->
           <img
@@ -50,7 +56,7 @@
             class="wt-navigation-bar__nav-close"
             icon="close"
             @click="isOpened = false"
-          ></wt-icon-btn>
+          />
         </header>
         <wt-divider />
         <ul class="wt-navigation-bar__nav-list">
@@ -66,7 +72,8 @@
                   :to="navItem.route"
                   class="wt-navigation-bar__nav-item-link"
                   @click="close"
-                > {{ navItem.name || navItem.value }}
+                >
+                  {{ navItem.name || navItem.value }}
                 </router-link>
               </div>
             </div>
@@ -85,7 +92,7 @@
                   class="wt-navigation-bar__expansion-arrow"
                   color="active"
                   icon="arrow-right"
-                ></wt-icon>
+                />
               </button>
               <expand-transition>
                 <ul v-if="isExpanded(navItem)">
@@ -100,7 +107,8 @@
                         :to="nestedRoute(subNavItem, navItem)"
                         class="wt-navigation-bar__nav-item-link wt-navigation-bar__nav-item-link--subnav"
                         @click="close"
-                      >{{ subNavItem.name || subNavItem.value }}
+                      >
+                        {{ subNavItem.name || subNavItem.value }}
                       </router-link>
                     </div>
                   </li>
@@ -118,7 +126,7 @@
 import ExpandTransition from '../transitions/wt-expand-transition.vue';
 
 export default {
-  name: 'wt-navigation-bar',
+  name: 'WtNavigationBar',
   components: { ExpandTransition },
   props: {
     currentApp: {

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

@@ -7,10 +7,10 @@
       class="wt-notification__icon"
       :icon="notificationIcon"
       :color="notificationIconColor"
-    ></wt-icon>
+    />
 
     <p class="wt-notification__text">
-      <slot></slot>
+      <slot />
     </p>
   </article>
 </template>
@@ -18,7 +18,7 @@
 <script>
 
 export default {
-  name: 'wt-notification',
+  name: 'WtNotification',
   props: {
     type: {
       type: String,