plugin-ui-for-kzt 0.0.19 → 0.0.20

package/src/components/BaseInput/BaseInput.vue

@@ -1,53 +1,42 @@
 <template>
-    <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 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>
-
-      <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: '' as string,
-  error: '',
-  hint: '',
+  placeholder: '',
   mask: '',
+  focusable: true,
 });
 
 const emit: (event: 'update:modelValue', value: string) => void = defineEmits();
@@ -55,22 +44,21 @@ 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,
   },
 ]);
 
@@ -84,94 +72,81 @@ function handleInput(event: Event) {
 @import '../../styles/variables';
 @import '../../styles/root';
 
-  .base-input {
-    width: 100%;
-    $input: &;
-
-    &__wrapper {
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      width: 100%;
-    }
-
-    &__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);
-      }
+.base-input {
+  width: 100%;
+  $input: &;
 
-      @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);
-        }
-      }
-    }
+  &__wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
 
-    &__icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: var(--primary-black-500);
+  &__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);
     }
 
-    &__hint {
-      transition: opacity 0.3s ease, transform 0.3s ease;
+    @include pressed {
+      color: var(--primary-blue);
     }
 
     @include is-disabled-state {
-      #{$input}__icon--right {
-        color: var(--primary-black-400);
-      }
-
-      #{$input}__hint {
-        color: var(--primary-text-secondary);
+      & {
+        color: var(--primary-text-tertiary);
+        background: var(--primary-black-100);
       }
     }
 
-    &__icon--left, &__icon--right  {
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
+    &--focusable {
+      @include focused {
+        border: 1px solid var(--primary-blue-500);
+        outline: 4px solid var(--effects-primary-focus);
+      }
     }
+  }
 
-    &__label {
-      display: flex;
-      flex-direction: column;
-      gap: 6px;
-      width: 100%;
-    }
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--primary-black-500);
+  }
 
-    &__label-text {
-      color: var(--primary-text-primary);
+  @include is-disabled-state {
+    #{$input}__icon--right {
+      color: var(--primary-black-400);
     }
+  }
 
-    &.--is-error {
-      #{$input}__hint {
-        color: var(--error-red);
-      }
+  &__icon--left,
+  &__icon--right {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+  
+  &.--is-error {
 
       #{$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 > * {
@@ -179,141 +154,100 @@ function handleInput(event: Event) {
       }
     }
 
-    &.--small-size {
-        #{$input} {
-          &__label {
-            font: var(--typography-text-s-medium);
-          }
-
-          &__hint {
-            font: var(--typography-text-s-regular);
-          }
-        }
-
-        #{$input}__wrapper {
-          height: 40px;
-        }
-
-        #{$input}__field {
-          padding: 8px 14px;
-          font: var(--typography-text-m-regular);
-          border-radius: 10px;
-        }
-
-        &.--icon-left #{$input}__field {
-          padding-left: 42px;
-        }
-
-        &.--icon-right #{$input}__field {
-          padding-right: 38px;
-        }
-
-        #{$input}__icon--left {
-          left: 14px;
-          width: 20px;
-          height: 20px;
-        }
-
-        #{$input}__icon--right {
-          right: 14px;
-          width: 16px;
-          height: 16px;
-        }
+  &.--small-size {
+    #{$input}__wrapper {
+      height: 40px;
     }
 
-    &.--medium-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;
+    }
 
-        &__wrapper {
-          height: 48px;
-        }
+    &.--icon-right #{$input}__field {
+      padding-right: 38px;
+    }
 
-        &__field {
-          padding: 12px 14px;
-          font: var(--typography-text-m-regular);
-          border-radius: 12px;
-        }
-      }
+    #{$input}__icon--left {
+      left: 14px;
+      width: 20px;
+      height: 20px;
+    }
 
-      &.--icon-left #{$input}__field {
-        padding-left: 46px;
-      }
+    #{$input}__icon--right {
+      right: 14px;
+      width: 16px;
+      height: 16px;
+    }
+  }
 
-      &.--icon-right #{$input}__field {
-        padding-right: 42px;
-      }
+  &.--medium-size {
+    #{$input}__wrapper {
+      height: 48px;
+    }
 
-      #{$input}__icon--left {
-        left: 14px;
-        width: 24px;
-        height: 24px;
-      }
+    #{$input}__field {
+      padding: 12px 14px;
+      font: var(--typography-text-m-regular);
+      border-radius: 12px;
+    }
 
-      #{$input}__icon--right {
-        right: 14px;
-        width: 20px;
-        height: 20px;
-      }
+    &.--icon-left #{$input}__field {
+      padding-left: 46px;
     }
 
-    &.--large-size {
-      #{$input} {
-        &__label {
-          font: var(--typography-text-m-medium);
-        }
+    &.--icon-right #{$input}__field {
+      padding-right: 42px;
+    }
 
-        &__hint {
-          font: var(--typography-text-m-regular);
-        }
+    #{$input}__icon--left {
+      left: 14px;
+      width: 24px;
+      height: 24px;
+    }
 
-        &__wrapper {
-          height: 56px;
-        }
+    #{$input}__icon--right {
+      right: 14px;
+      width: 20px;
+      height: 20px;
+    }
+  }
 
-        &__field {
-          padding: 14px 16px;
-          font: var(--typography-text-l-regular);
-          border-radius: 12px;
-        }
-      }
+  &.--large-size {
+    #{$input}__wrapper {
+      height: 56px;
+    }
 
-      &.--icon-left #{$input}__field {
-        padding-left: 56px;
-      }
+    #{$input}__field {
+      padding: 14px 16px;
+      font: var(--typography-text-l-regular);
+      border-radius: 12px;
+    }
 
-      &.--icon-right #{$input}__field {
-        padding-right: 48px;
-      }
+    &.--icon-left #{$input}__field {
+      padding-left: 56px;
+    }
 
-      #{$input}__icon--left {
-        left: 16px;
-        width: 32px;
-        height: 32px;
-      }
+    &.--icon-right #{$input}__field {
+      padding-right: 48px;
+    }
 
-      #{$input}__icon--right {
-        right: 16px;
-        width: 24px;
-        height: 24px;
-      }
+    #{$input}__icon--left {
+      left: 16px;
+      width: 32px;
+      height: 32px;
     }
-  }
-  .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;
+    #{$input}__icon--right {
+      right: 16px;
+      width: 24px;
+      height: 24px;
+    }
   }
-</style>
+}
+</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, ...$attrs }"
+            v-bind="{ ...$props }"
             :model-value="formattedValue"
-            :error="errorMessage || props.error"
             @update:model-value="handleInputUpdate"
           >
             <template #['left-icon']>
@@ -37,13 +37,14 @@ const props = withDefaults(defineProps<TCoreInputCalendarProps>(), {
   type: 'text',
   modelValue: '',
   placeholder: '',
-  error: '',
-  hint: '',
   range: false,
   minDate: null,
 });
 
-const emit: (event: 'update:modelValue', value: string) => void = defineEmits();
+const emit = defineEmits<{
+  'update:modelValue': [value: string],
+  'validationError': [value: string],
+}>();
 
 const inputValue = ref<string>('');
 
@@ -201,16 +202,18 @@ 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 errorMessage = computed<string>(() => {
+const validation = computed<string>(() => {
   if (!inputValue.value) {
     return '';
   }
@@ -233,7 +236,7 @@ const errorMessage = computed<string>(() => {
 
 <style scoped lang="scss">
   .base-input-calendar {
-    width: max-content;
+    width: 100%;
 
     &__wrapper {
       position: relative;