plugin-ui-for-kzt 0.0.20 → 0.0.21

package/src/components/BaseInput/BaseInput.vue

@@ -1,42 +1,53 @@
 <template>
-  <div class="base-input" :class="classList">
-    <div class="base-input__wrapper">
-      <div v-if="$slots['left-icon']" class="base-input__icon base-input__icon--left">
-        <slot name="left-icon"></slot>
-      </div>
-      <input
-        :id="id"
-        :type="type"
-        :value="modelValue"
-        v-maska="mask"
-        v-bind="componentAttrs"
-        :placeholder="placeholder || ''"
-        class="base-input__field"
-        :class="{ 'base-input__field--focusable': focusable }"
-        @input="handleInput"
-      />
-      <div v-if="$slots['right-icon']" class="base-input__icon base-input__icon--right">
-        <slot name="right-icon"></slot>
+    <div class="base-input" :class="classList">
+      <label class="base-input__label" :for="id">
+          <span v-if="label" class="base-input__label-text">{{ label }}</span>
+
+      <div class="base-input__wrapper">
+        <div v-if="$slots['left-icon']" class="base-input__icon base-input__icon--left">
+          <slot name="left-icon"></slot>
+        </div>
+
+          <input
+            :id="id"
+            :type="type"
+            :value="modelValue"
+            v-maska="mask"
+            v-bind="componentAttrs"
+            :placeholder="placeholder || ''"
+            class="base-input__field"
+            @input="handleInput"
+          />
+
+        <div v-if="$slots['right-icon']" class="base-input__icon base-input__icon--right">
+          <slot name="right-icon"></slot>
+        </div>
       </div>
+
+      <transition name="error">
+        <div v-if="(error && typeof error === 'string') || hint" class="base-input__hint">
+          {{ error || hint }}
+        </div>
+      </transition>
+    </label>
     </div>
-  </div>
 </template>
 
 <script setup lang="ts">
 import { computed, useAttrs, useSlots } from 'vue';
-import type { ICoreInputProps } from '../../types/input';
-import { useKitSize } from '../../composables/kit/size';
-import { useKitState } from '../../composables/kit/state';
-import { vMaska } from 'maska/vue';
+import type { ICoreInputProps } from '../../types/input'
+import { useKitSize } from '../../composables/kit/size'
+import { useKitState } from '../../composables/kit/state'
+import { vMaska } from "maska/vue"
 
 const props = withDefaults(defineProps<ICoreInputProps>(), {
-  id: '',
   size: 'medium',
   type: 'text',
   modelValue: '',
-  placeholder: '',
+  placeholder: '' as string,
+  error: '',
+  hint: '',
   mask: '',
-  focusable: true,
 });
 
 const emit: (event: 'update:modelValue', value: string) => void = defineEmits();
@@ -44,21 +55,22 @@ const emit: (event: 'update:modelValue', value: string) => void = defineEmits();
 const { sizeClassList } = useKitSize(props);
 const { stateClassList, stateAttrs } = useKitState(props);
 const attrs = useAttrs();
-const slots = useSlots();
 
 const componentAttrs = computed(() => ({
   ...attrs,
   ...stateAttrs.value,
 }));
 
+const slots = useSlots();
+
 const classList = computed(() => [
   sizeClassList.value,
   stateClassList.value,
+
   {
+    '--is-readonly': props.readonly,
     '--icon-left': !!slots['left-icon'],
     '--icon-right': !!slots['right-icon'],
-    '--is-error': props.error,
-    '--is-readonly': props.readonly,
   },
 ]);
 
@@ -72,81 +84,94 @@ function handleInput(event: Event) {
 @import '../../styles/variables';
 @import '../../styles/root';
 
-.base-input {
-  width: 100%;
-  $input: &;
-
-  &__wrapper {
-    position: relative;
-    display: flex;
-    align-items: center;
-    width: 100%;
-  }
-
-  &__field {
-    flex: 1;
+  .base-input {
     width: 100%;
-    height: 100%;
-    color: var(--primary-text-primary);
-    background: var(--bg-light);
-    border: 1px solid var(--primary-black-300);
-    outline: none;
-    transition: all var(--transition);
-
-    &::placeholder {
-      color: var(--primary-text-tertiary);
+    $input: &;
+
+    &__wrapper {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      width: 100%;
     }
 
-    @include pressed {
-      color: var(--primary-blue);
-    }
-
-    @include is-disabled-state {
-      & {
+    &__field {
+      flex: 1;
+      width: 100%;
+      height: 100%;
+      color: var(--primary-text-primary);
+      background: var(--bg-light);
+      border: 1px solid var(--primary-black-300);
+      outline: none;
+      transition: all var(--transition);
+
+      &::placeholder {
         color: var(--primary-text-tertiary);
-        background: var(--primary-black-100);
       }
-    }
 
-    &--focusable {
+      @include pressed {
+        color: var(--primary-blue);
+      }
+
       @include focused {
         border: 1px solid var(--primary-blue-500);
         outline: 4px solid var(--effects-primary-focus);
       }
+
+      @include is-disabled-state {
+        & {
+          color: var(--primary-text-tertiary);
+          background: var(--primary-black-100);
+        }
+      }
     }
-  }
 
-  &__icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--primary-black-500);
-  }
+    &__icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--primary-black-500);
+    }
 
-  @include is-disabled-state {
-    #{$input}__icon--right {
-      color: var(--primary-black-400);
+    &__hint {
+      transition: opacity 0.3s ease, transform 0.3s ease;
     }
-  }
 
-  &__icon--left,
-  &__icon--right {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-  
-  &.--is-error {
+    @include is-disabled-state {
+      #{$input}__icon--right {
+        color: var(--primary-black-400);
+      }
+
+      #{$input}__hint {
+        color: var(--primary-text-secondary);
+      }
+    }
+
+    &__icon--left, &__icon--right  {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    &__label {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      width: 100%;
+    }
+
+    &__label-text {
+      color: var(--primary-text-primary);
+    }
+
+    &.--is-error {
+      #{$input}__hint {
+        color: var(--error-red);
+      }
 
       #{$input}__field {
         border-color: var(--error-red-light-01);
-
-        &--focusable {
-          @include focused {
-            border: 1px solid var(--error-red-light-02);
-            outline: 4px solid var(--effects-error-focus);
-          }
-        }
       }
 
       #{$input}__icon--right > * {
@@ -154,100 +179,141 @@ function handleInput(event: Event) {
       }
     }
 
-  &.--small-size {
-    #{$input}__wrapper {
-      height: 40px;
-    }
+    &.--small-size {
+        #{$input} {
+          &__label {
+            font: var(--typography-text-s-medium);
+          }
 
-    #{$input}__field {
-      padding: 8px 14px;
-      font: var(--typography-text-m-regular);
-      border-radius: 10px;
-    }
+          &__hint {
+            font: var(--typography-text-s-regular);
+          }
+        }
 
-    &.--icon-left #{$input}__field {
-      padding-left: 42px;
-    }
+        #{$input}__wrapper {
+          height: 40px;
+        }
 
-    &.--icon-right #{$input}__field {
-      padding-right: 38px;
-    }
+        #{$input}__field {
+          padding: 8px 14px;
+          font: var(--typography-text-m-regular);
+          border-radius: 10px;
+        }
 
-    #{$input}__icon--left {
-      left: 14px;
-      width: 20px;
-      height: 20px;
-    }
+        &.--icon-left #{$input}__field {
+          padding-left: 42px;
+        }
 
-    #{$input}__icon--right {
-      right: 14px;
-      width: 16px;
-      height: 16px;
-    }
-  }
+        &.--icon-right #{$input}__field {
+          padding-right: 38px;
+        }
 
-  &.--medium-size {
-    #{$input}__wrapper {
-      height: 48px;
-    }
+        #{$input}__icon--left {
+          left: 14px;
+          width: 20px;
+          height: 20px;
+        }
 
-    #{$input}__field {
-      padding: 12px 14px;
-      font: var(--typography-text-m-regular);
-      border-radius: 12px;
+        #{$input}__icon--right {
+          right: 14px;
+          width: 16px;
+          height: 16px;
+        }
     }
 
-    &.--icon-left #{$input}__field {
-      padding-left: 46px;
-    }
+    &.--medium-size {
+      #{$input} {
+        &__label {
+          font: var(--typography-text-s-medium);
+        }
 
-    &.--icon-right #{$input}__field {
-      padding-right: 42px;
-    }
+        &__hint {
+          font: var(--typography-text-s-regular);
+        }
 
-    #{$input}__icon--left {
-      left: 14px;
-      width: 24px;
-      height: 24px;
-    }
+        &__wrapper {
+          height: 48px;
+        }
 
-    #{$input}__icon--right {
-      right: 14px;
-      width: 20px;
-      height: 20px;
-    }
-  }
+        &__field {
+          padding: 12px 14px;
+          font: var(--typography-text-m-regular);
+          border-radius: 12px;
+        }
+      }
 
-  &.--large-size {
-    #{$input}__wrapper {
-      height: 56px;
-    }
+      &.--icon-left #{$input}__field {
+        padding-left: 46px;
+      }
 
-    #{$input}__field {
-      padding: 14px 16px;
-      font: var(--typography-text-l-regular);
-      border-radius: 12px;
-    }
+      &.--icon-right #{$input}__field {
+        padding-right: 42px;
+      }
 
-    &.--icon-left #{$input}__field {
-      padding-left: 56px;
-    }
+      #{$input}__icon--left {
+        left: 14px;
+        width: 24px;
+        height: 24px;
+      }
 
-    &.--icon-right #{$input}__field {
-      padding-right: 48px;
+      #{$input}__icon--right {
+        right: 14px;
+        width: 20px;
+        height: 20px;
+      }
     }
 
-    #{$input}__icon--left {
-      left: 16px;
-      width: 32px;
-      height: 32px;
-    }
+    &.--large-size {
+      #{$input} {
+        &__label {
+          font: var(--typography-text-m-medium);
+        }
+
+        &__hint {
+          font: var(--typography-text-m-regular);
+        }
+
+        &__wrapper {
+          height: 56px;
+        }
+
+        &__field {
+          padding: 14px 16px;
+          font: var(--typography-text-l-regular);
+          border-radius: 12px;
+        }
+      }
+
+      &.--icon-left #{$input}__field {
+        padding-left: 56px;
+      }
+
+      &.--icon-right #{$input}__field {
+        padding-right: 48px;
+      }
+
+      #{$input}__icon--left {
+        left: 16px;
+        width: 32px;
+        height: 32px;
+      }
 
-    #{$input}__icon--right {
-      right: 16px;
-      width: 24px;
-      height: 24px;
+      #{$input}__icon--right {
+        right: 16px;
+        width: 24px;
+        height: 24px;
+      }
     }
   }
-}
-</style>
+  .error-enter-active,
+  .error-leave-active {
+    transition: opacity 0.3s ease, transform 0.3s ease;
+  }
+
+  .error-enter-from,
+  .error-leave-to {
+    opacity: 0;
+    transform: translateY(10px);
+    max-height: 0;
+  }
+</style>

package/src/components/BaseInputCalendar/BaseInputCalendar.vue

@@ -6,11 +6,11 @@
           :range="range"
           :size="size"
           :min-date="minDate"
-          :id="id"
         >
           <base-input
-            v-bind="{ ...$props }"
+            v-bind="{ ...$props, ...$attrs }"
             :model-value="formattedValue"
+            :error="errorMessage || props.error"
             @update:model-value="handleInputUpdate"
           >
             <template #['left-icon']>
@@ -37,14 +37,13 @@ const props = withDefaults(defineProps<TCoreInputCalendarProps>(), {
   type: 'text',
   modelValue: '',
   placeholder: '',
+  error: '',
+  hint: '',
   range: false,
   minDate: null,
 });
 
-const emit = defineEmits<{
-  'update:modelValue': [value: string],
-  'validationError': [value: string],
-}>();
+const emit: (event: 'update:modelValue', value: string) => void = defineEmits();
 
 const inputValue = ref<string>('');
 
@@ -202,18 +201,16 @@ function handleInputUpdate(value: string) {
 
   inputValue.value = filteredValue;
   emit('update:modelValue', filteredValue);
-  emit('validationError', validation.value);
 
   const parsed = parseDateString(filteredValue);
   if (parsed) {
     const formatted = formatDateRange(parsed);
     inputValue.value = formatted;
     emit('update:modelValue', formatted);
-    emit('validationError', validation.value);
   }
 }
 
-const validation = computed<string>(() => {
+const errorMessage = computed<string>(() => {
   if (!inputValue.value) {
     return '';
   }
@@ -236,7 +233,7 @@ const validation = computed<string>(() => {
 
 <style scoped lang="scss">
   .base-input-calendar {
-    width: 100%;
+    width: max-content;
 
     &__wrapper {
       position: relative;