@webitel/ui-sdk 23.12.39-vite-6 → 23.12.40

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

@@ -19,14 +19,13 @@
       <slot
         name="label"
         v-bind="{ label }"
-      >
-        {{ requiredLabel }}
+      >{{ requiredLabel }}
       </slot>
     </wt-label>
     <div class="wt-input__wrapper">
       <input
         :id="name"
-        ref="WtInput"
+        ref="wt-input"
         :class="{
           'wt-input--is-password': isPassword,
         }"
@@ -42,234 +41,212 @@
         @keyup="$emit('keyup', $event)"
       >
       <div
-        ref="AfterWrapper"
+        ref="after-wrapper"
         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 setup>
-import {
-  ref, computed, useSlots, onMounted,
-} from 'vue';
-import { useValidation } from '../../mixins/validationMixin/useValidation';
+<script>
+import validationMixin from '../../mixins/validationMixin/validationMixin';
 
 /*
 * 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
 * */
-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',
+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,
+    },
   },
-  /**
-   * Status of show password icon display
-   */
-  hasShowPassword: {
-    type: Boolean,
-    default: false,
+  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;
+      },
+    },
   },
 
-  /**
-   * Native number input restrictions
-   */
-  numberMin: {
-    type: Number,
-    default: 0,
-  },
+  computed: {
+    inputValue() {
+      return this.value !== undefined ? this.value : this.modelValue;
+    },
 
-  /**
-   * Native number input restrictions
-   */
-  numberMax: {
-    type: Number,
-  },
+    hasLabel() {
+      return !!(this.label || this.$slots.label);
+    },
 
-  outline: {
-    type: Boolean,
-    default: false,
-  },
+    requiredLabel() {
+      return this.required ? `${this.label}*` : this.label;
+    },
 
-  labelProps: {
-    type: Object,
-    description: 'Object with props, passed down to wt-label as props',
-  },
+    isPassword() {
+      return this.type === 'password' && this.hasShowPassword;
+    },
 
-  preventTrim: {
-    type: Boolean,
-    default: false,
+    showPasswordIcon() {
+      return this.isPasswordVisible ? 'eye--closed' : 'eye--opened';
+    },
   },
-
-  // validation rules
-  // TODO: move to separate file to make it reusable
-  v: {
-    type: Object,
+  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)`;
+    },
   },
-  customValidators: {
-    type: Array,
-    default: () => [],
+  mounted() {
+    this.updateInputPaddings();
   },
-});
-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">
@@ -290,6 +267,18 @@ onMounted(() => {
   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: 'WtInputInfo',
+  name: 'wt-input-info',
   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: 'WtLabel',
+  name: 'wt-label',
   props: {
     for: {
       type: String,

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

@@ -1,15 +1,12 @@
 <template>
   <div class="wt-load-bar">
-    <span
-      :style="`width: ${progressWidth}%;`"
-      class="wt-load-bar__progress"
-    />
+    <span :style="`width: ${this.progressWidth}%;`" class="wt-load-bar__progress"></span>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'WtLoadBar',
+  name: 'wt-load-bar',
   props: {
     max: {
       type: [Number, String],

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

@@ -1,16 +1,7 @@
 <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"
-      />
+    <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>
   </div>
 </template>

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

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

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

@@ -1,19 +1,13 @@
 <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
@@ -56,7 +50,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">
@@ -72,8 +66,7 @@
                   :to="navItem.route"
                   class="wt-navigation-bar__nav-item-link"
                   @click="close"
-                >
-                  {{ navItem.name || navItem.value }}
+                > {{ navItem.name || navItem.value }}
                 </router-link>
               </div>
             </div>
@@ -92,7 +85,7 @@
                   class="wt-navigation-bar__expansion-arrow"
                   color="active"
                   icon="arrow-right"
-                />
+                ></wt-icon>
               </button>
               <expand-transition>
                 <ul v-if="isExpanded(navItem)">
@@ -107,8 +100,7 @@
                         :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>
@@ -126,7 +118,7 @@
 import ExpandTransition from '../transitions/wt-expand-transition.vue';
 
 export default {
-  name: 'WtNavigationBar',
+  name: 'wt-navigation-bar',
   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: 'WtNotification',
+  name: 'wt-notification',
   props: {
     type: {
       type: String,