plugin-ui-for-kzt 0.0.9 → 0.0.10

package/src/components/BaseInput/BaseInput.vue

@@ -0,0 +1,300 @@
+<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>
+
+      <div v-if="(error && typeof error === 'string') || hint" class="base-input__hint">
+        {{ error || hint }}
+      </div>
+    </label>
+    </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"
+
+const props = withDefaults(defineProps<ICoreInputProps>(), {
+  size: 'medium',
+  type: 'text',
+  modelValue: '',
+  placeholder: '' as string,
+  error: '',
+  hint: '',
+  mask: '',
+});
+
+const emit: (event: 'update:modelValue', value: string) => void = defineEmits();
+
+const { sizeClassList } = useKitSize(props);
+const { stateClassList, stateAttrs } = useKitState(props);
+const attrs = useAttrs();
+
+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'],
+  },
+]);
+
+function handleInput(event: Event) {
+  const target = event.target as HTMLInputElement;
+  emit('update:modelValue', target.value);
+}
+</script>
+
+<style scoped lang="scss">
+@import '../../styles/variables';
+@import '../../styles/root';
+
+  .base-input {
+    width: max-content;
+    $input: &;
+
+    &__wrapper {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      width: fit-content;
+    }
+
+    &__field {
+      flex: 1;
+      width: auto;
+      height: 100%;
+      color: var(--primary-text-primary);
+      background: var(--bg-light);
+      border: 1px solid var(--primary-black-300);
+      outline: none;
+
+      &::placeholder {
+        color: var(--primary-text-tertiary);
+      }
+
+      @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);
+    }
+
+    @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;
+    }
+
+    &__label-text {
+      color: var(--primary-text-primary);
+    }
+
+    &.--is-error {
+      #{$input}__hint {
+        color: var(--error-red);
+      }
+
+      #{$input}__field {
+        border-color: var(--error-red-light-01);
+      }
+
+      #{$input}__icon--right > * {
+        color: var(--error-red);
+      }
+    }
+
+    &.--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;
+        }
+    }
+
+    &.--medium-size {
+      #{$input} {
+        &__label {
+          font: var(--typography-text-s-medium);
+        }
+
+        &__hint {
+          font: var(--typography-text-s-regular);
+        }
+
+        &__wrapper {
+          height: 48px;
+        }
+
+        &__field {
+          padding: 12px 14px;
+          font: var(--typography-text-m-regular);
+          border-radius: 12px;
+        }
+      }
+
+      &.--icon-left #{$input}__field {
+        padding-left: 46px;
+      }
+
+      &.--icon-right #{$input}__field {
+        padding-right: 42px;
+      }
+
+      #{$input}__icon--left {
+        left: 14px;
+        width: 24px;
+        height: 24px;
+      }
+
+      #{$input}__icon--right {
+        right: 14px;
+        width: 20px;
+        height: 20px;
+      }
+    }
+
+    &.--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;
+      }
+    }
+  }
+</style>

package/src/components/BaseInput/README.md

@@ -0,0 +1,85 @@
+### BaseInput
+
+Компонент для ввода текста с поддержкой различных состояний, подсказок, иконок и обработки ошибок.
+
+---
+
+#### Props
+
+- `modelValue: string`  
+  Значение поля ввода. Используется для двусторонней привязки данных.
+
+- `size: 'small' | 'medium' | 'large'`  
+  Размер компонента. Определяет размеры иконок и поля ввода. По умолчанию — `medium`.
+
+- `type: 'text' | 'password' | 'email' | 'number' | ...`  
+  Тип поля ввода. Например, `text`, `password`, `email`, и другие.
+
+- `placeholder: string`  
+  Текст-заполнитель для поля ввода.
+
+- `error: string | boolean`  
+  Ошибка, которая будет отображаться под полем ввода. Может быть строкой с сообщением об ошибке или булевым значением, где `true` указывает на наличие ошибки.
+
+- `hint: string`  
+  Подсказка, отображаемая под полем ввода.
+
+- `readonly: boolean`  
+  Указывает, что поле ввода только для чтения. Если `true`, то поле нельзя редактировать.
+
+---
+
+#### Важные особенности
+
+- **Иконки слева и справа:**  
+  Компонент поддерживает иконки слева и справа от поля ввода через слоты `left-icon` и `right-icon`. Это удобно для отображения дополнительных иконок (например, иконки для показа пароля).
+
+- **Состояния:**  
+  Используются CSS-классы для отображения разных состояний поля ввода, таких как фокус, ошибка и состояние "disabled".
+
+- **Валидация ошибок:**  
+  В случае ошибки поле ввода будет отображать сообщение об ошибке, и его рамка станет красной. Сообщение об ошибке или подсказка отображается под полем ввода.
+
+- **Размеры:**  
+  Компонент поддерживает три размера: `small`, `medium`, `large`. Для каждого размера задаются различные отступы и размеры шрифта.
+
+- **Двусторонняя привязка:**  
+  Используется `v-model` для двусторонней привязки значения.
+
+---
+
+#### Пример использования
+
+```vue
+<BaseInput 
+  v-model="inputValue" 
+  placeholder="Введите текст" 
+  :error="errorMessage" 
+  :hint="hintMessage" 
+  :size="'medium'"
+/>
+```
+
+---
+
+#### Логика
+
+- **Обработка ввода:**  
+  При изменении значения поля ввода вызывается метод `handleInput`, который обновляет значение через `v-model` и вызывает событие `update:modelValue`.
+
+- **CSS стили для состояний:**  
+  Используются миксины для стилизации поля ввода в различных состояниях, например, для фокуса, нажатия, ошибок или отключенного состояния.
+
+---
+
+#### Стилизация
+
+- **Иконки:**  
+  Иконки, если они присутствуют, располагаются влево или вправо от поля ввода, и их размеры и позиционирование изменяются в зависимости от размера поля ввода.
+  
+- **Состояния ошибок:**  
+  В случае ошибки или активного состояния, компонент применяет соответствующие стили, такие как изменение цвета рамки и отображение сообщения об ошибке.
+
+---
+
+Этот компонент подходит для создания формы с текстовым вводом, где необходимо отображать иконки, подсказки и ошибки, а также поддерживать несколько размеров и состояний.

package/src/components/BaseInputCalendar/BaseInputCalendar.vue

@@ -0,0 +1,242 @@
+<template>
+    <div class="base-input-calendar">
+      <div class="base-input-calendar__wrapper">
+        <base-calendar
+          v-model="calendarModelValue"
+          :range="range"
+          :size="size"
+          :min-date="minDate"
+        >
+          <base-input
+            v-bind="{ ...$props, ...$attrs }"
+            :model-value="formattedValue"
+            :error="errorMessage || props.error"
+            @update:model-value="handleInputUpdate"
+          >
+            <template #['left-icon']>
+              <base-icon
+                name="calendar"
+                :size="size"
+                class="base-input-calendar__icon"
+              />
+            </template>
+          </base-input>
+        </base-calendar>
+      </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import BaseInput from '../BaseInput/BaseInput.vue';
+import BaseCalendar from '../BaseCalendar/BaseCalendar.vue';
+import type { DateRange, TCoreInputCalendarProps } from '../../types/calendar';
+
+const props = withDefaults(defineProps<TCoreInputCalendarProps>(), {
+  size: 'medium',
+  type: 'text',
+  modelValue: '',
+  placeholder: '',
+  error: '',
+  hint: '',
+  range: false,
+  minDate: null,
+});
+
+const emit: (event: 'update:modelValue', value: string) => void = defineEmits();
+
+const inputValue = ref<string>('');
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    inputValue.value = typeof newValue === 'string' ? newValue : '';
+  },
+  { immediate: true },
+);
+
+function parseDateString(value: string | undefined | null): DateRange {
+  if (!value || typeof value !== 'string' || value.trim() === '') {
+    return null;
+  }
+
+  const parseSingleDate = (dateStr: string): Date | null => {
+    const dateRegex = /^(\d{2})\.(\d{2})\.(\d{4})$/;
+    const match = dateStr.match(dateRegex);
+
+    if (!match) {
+      console.warn(`Invalid date format: ${dateStr}. Expected format: dd.MM.yyyy`);
+      return null;
+    }
+
+    const [_, day, month, year] = match.map(Number);
+
+    if (day < 1 || day > 31 || month < 1 || month > 12 || year < 1900 || year > 9999) {
+      console.warn(`Invalid date values: ${dateStr}`);
+      return null;
+    }
+
+    const date = new Date(year, month - 1, day);
+    date.setHours(0, 0, 0, 0);
+
+    if (Number.isNaN(date.getTime())) {
+      console.warn(`Invalid date: ${dateStr}`);
+      return null;
+    }
+
+    return date;
+  };
+
+  try {
+    if (props.range) {
+      const [start, end] = value.split(' - ').map(part => part.trim());
+      if (!start || !end) {
+        return null;
+      }
+      const startDate = parseSingleDate(start);
+      const endDate = parseSingleDate(end);
+      if (!startDate || !endDate) {
+        return null;
+      }
+      if (startDate.getTime() > endDate.getTime()) {
+        console.warn('End date cannot be earlier than start date');
+        return null;
+      }
+      return [startDate, endDate];
+    }
+
+    const singleDate = parseSingleDate(value);
+    return singleDate;
+  } catch (error) {
+    console.error('Error parsing date string:', error);
+    return null;
+  }
+}
+
+function formatDateRange(value: DateRange | (string | Date)[]): string {
+  if (!value)
+    return '';
+
+  const formatSingleDate = (date: string | Date): string => {
+    if (typeof date === 'string') {
+      const parsed = new Date(date);
+      if (isNaN(parsed.getTime())) {
+        return '';
+      }
+      date = parsed;
+    }
+
+    const localDate = new Date(date.getTime() - date.getTimezoneOffset() * 60 * 1000);
+    const day = localDate.getDate().toString().padStart(2, '0');
+    const month = (localDate.getMonth() + 1).toString().padStart(2, '0');
+    const year = localDate.getFullYear();
+    return `${day}.${month}.${year}`;
+  };
+
+
+  if (Array.isArray(value)) {
+    return value.map(formatSingleDate).join(' - ');
+  }
+
+  return formatSingleDate(value);
+}
+
+const calendarModelValue = computed<DateRange>({
+  get: () => {
+    return parseDateString(props.modelValue);
+  },
+  set: (value: DateRange) => {
+    const formatted = formatDateRange(value);
+    inputValue.value = formatted;
+    emit('update:modelValue', formatted);
+  },
+});
+
+const formattedValue = computed<string>(() => {
+  return inputValue.value;
+});
+
+function handleInputUpdate(value: string) {
+  let filteredValue = value.replace(/[^0-9.\s-]/g, '');
+
+  if (props.range) {
+    const parts = filteredValue.split(' - ').map(part => part.trim());
+    const formattedParts = parts.map((part) => {
+      const digits = part.replace(/\D/g, '');
+      let formatted = '';
+
+      if (digits.length > 0) {
+        formatted += digits.slice(0, 2);
+        if (digits.length > 2) {
+          formatted += `.${digits.slice(2, 4)}`;
+        }
+        if (digits.length > 4) {
+          formatted += `.${digits.slice(4, 8)}`;
+        }
+      }
+
+      return formatted;
+    });
+
+    filteredValue = formattedParts[0];
+    if (formattedParts.length > 1) {
+      filteredValue += ` - ${formattedParts[1]}`;
+    }
+  } else {
+    const digits = filteredValue.replace(/\D/g, '');
+    let formatted = '';
+
+    if (digits.length > 0) {
+      formatted += digits.slice(0, 2);
+      if (digits.length > 2) {
+        formatted += `.${digits.slice(2, 4)}`;
+      }
+      if (digits.length > 4) {
+        formatted += `.${digits.slice(4, 8)}`;
+      }
+    }
+
+    filteredValue = formatted;
+  }
+
+  inputValue.value = filteredValue;
+  emit('update:modelValue', filteredValue);
+
+  const parsed = parseDateString(filteredValue);
+  if (parsed) {
+    const formatted = formatDateRange(parsed);
+    inputValue.value = formatted;
+    emit('update:modelValue', formatted);
+  }
+}
+
+const errorMessage = computed<string>(() => {
+  if (!inputValue.value) {
+    return '';
+  }
+
+  const formatRegex = props.range
+    ? /^(\d{2}\.\d{2}\.\d{4})\s*-\s*(\d{2}\.\d{2}\.\d{4})$|^(\d{0,2}\.?\d{0,2}\.?\d{0,4})\s*-\s*(\d{0,2}\.?\d{0,2}\.?\d{0,4})$|^(\d{0,2}\.?\d{0,2}\.?\d{0,4})$/
+    : /^(\d{2}\.\d{2}\.\d{4})$|^(\d{0,2}\.?\d{0,2}\.?\d{0,4})$/;
+
+  if (!formatRegex.test(inputValue.value)) {
+    return `Некорректный формат. Используйте dd.MM.yyyy${props.range ? ' - dd.MM.yyyy' : ''}`;
+  }
+
+  if (inputValue.value && !parseDateString(inputValue.value)) {
+    return `Некорректная дата. Используйте dd.MM.yyyy${props.range ? ' - dd.MM.yyyy' : ''}`;
+  }
+
+  return '';
+});
+</script>
+
+<style scoped lang="scss">
+  .base-input-calendar {
+    width: max-content;
+
+    &__wrapper {
+      position: relative;
+    }
+  }
+</style>