plugin-ui-for-kzt 0.0.9 → 0.0.11

package/src/components/BaseInputCalendar/README.md

@@ -0,0 +1,84 @@
+### BaseInputCalendar
+
+Компонент для ввода даты (или диапазона дат) с возможностью выбора даты через календарь. Поддерживает валидацию формата даты и отображение ошибок.
+
+---
+
+#### Props
+
+- `modelValue: string`  
+  Значение поля ввода даты. Используется для двусторонней привязки данных.
+
+- `size: 'small' | 'medium' | 'large'`  
+  Размер компонента. Определяет размеры иконок и поля ввода. По умолчанию — `medium`.
+
+- `placeholder: string`  
+  Текст-заполнитель для поля ввода. По умолчанию пустое значение.
+
+- `error: string | boolean`  
+  Ошибка, которая будет отображаться под полем ввода. Может быть строкой с сообщением об ошибке или булевым значением, где `true` указывает на наличие ошибки.
+
+- `hint: string`  
+  Подсказка, отображаемая под полем ввода.
+
+- `range: boolean`  
+  Определяет, будет ли выбран диапазон дат (если `true`) или одиночная дата (если `false`). По умолчанию — `false`.
+
+- `minDate: Date | null`  
+  Минимальная дата, которая может быть выбрана. Если не указано, ограничения на дату отсутствуют.
+
+---
+
+#### Важные особенности
+
+- **Календарь:**  
+  Компонент использует `BaseCalendar` для выбора даты. При выборе даты из календаря автоматически обновляется значение поля ввода.
+
+- **Иконка слева:**  
+  В поле ввода отображается иконка календаря с помощью компонента `BaseIcon`, что визуально подсказывает пользователю, что это поле для ввода даты.
+
+- **Валидация:**  
+  Реализована валидация формата даты по шаблону `dd.MM.yyyy`. Если поле ввода не соответствует этому формату, будет отображаться ошибка, например: "Некорректный формат. Используйте dd.MM.yyyy".
+
+- **Диапазон дат:**  
+  Если свойство `range` установлено в `true`, компонент позволяет вводить диапазон дат в формате `dd.MM.yyyy - dd.MM.yyyy`. Для этого также выполняется соответствующая валидация.
+
+- **Двусторонняя привязка:**  
+  Компонент использует `v-model` для двусторонней привязки значения даты/диапазона дат и обновления его в родительском компоненте.
+
+- **Форматирование даты:**  
+  При изменении значения поля ввода, введенная дата форматируется в строку в виде `dd.MM.yyyy`. Если это диапазон дат, то форматируется в виде `dd.MM.yyyy - dd.MM.yyyy`.
+
+---
+
+#### Пример использования
+
+```vue
+<BaseInputCalendar 
+  v-model="selectedDate" 
+  placeholder="Выберите дату" 
+  :range="true" 
+  error="Некорректный формат даты" 
+  :minDate="new Date('2023-01-01')"
+/>
+```
+
+---
+
+#### Логика валидации
+
+- Для одиночной даты используется регулярное выражение, которое проверяет формат `dd.MM.yyyy`.
+- Для диапазона дат используется регулярное выражение, проверяющее формат `dd.MM.yyyy - dd.MM.yyyy`.
+- Если формат некорректен, будет отображено сообщение об ошибке: "Некорректный формат. Используйте dd.MM.yyyy".
+- Если дата не существует (например, 31.02.2023), также будет показана ошибка: "Некорректная дата".
+
+---
+
+#### Стилизация
+
+- Компонент использует стандартные стили для поля ввода и иконки календаря.
+- В случае выбора диапазона дат или одиночной даты, данные обновляются в поле ввода и отображаются в формате, соответствующем локализации.
+
+---
+
+Этот компонент идеально подходит для форм, где требуется ввод даты или диапазона дат, с возможностью выбора даты через календарь и поддержкой валидации ввода.

package/src/components/BaseInputCurrency/BaseInputCurrency.vue

@@ -0,0 +1,198 @@
+<template>
+<div :class="classList">
+    <div class="base-input-currency__wrapper">
+    <div class="base-input-currency__input-container">
+        <span class="base-input-currency__symbol">{{ selectedOption.symbol }}</span>
+        <base-input
+        id="input-currency"
+        type="text"
+        :modelValue="modelValue"
+        v-bind="componentAttrs"
+        v-maska
+        :data-maska="selectedOption.mask"
+        :size="size"
+        :placeholder="placeholder || '0.00'"
+        class="base-input-currency__input"
+        @update:modelValue="handleInput"
+        ></base-input>
+    </div>
+    <base-select
+        id="select-currency"
+        v-model="selectedOptionId"
+        :options="optionsCurrency"
+        :size="size"
+        :error="error"
+        class="base-input-currency__select"
+    >
+    </base-select>
+    </div>
+</div>
+</template>
+
+<script setup lang="ts">
+import { computed, useAttrs, ref, watch } from 'vue';
+import { vMaska } from 'maska/vue';
+import BaseInput from '../BaseInput/BaseInput.vue';
+import BaseSelect from '../BaseSelect/BaseSelect.vue';
+import { useKitState } from '../../composables/kit/state';
+import { useKitSize } from '../../composables/kit/size';
+import type { ICoreInputProps } from '../../types/input';
+
+const props = withDefaults(defineProps<ICoreInputProps>(), {
+size: 'medium',
+type: 'text',
+modelValue: '',
+placeholder: '0.00',
+error: '',
+hint: '',
+});
+
+const emit: (event: 'update:modelValue', value: string) => void = defineEmits();
+
+const optionsCurrency = ref([
+{ id: '1', name: 'KZT', value: 'kzt', mask: '# ##0.##', symbol: '₸' },
+{ id: '2', name: 'RUB', value: 'rub', mask: '# ##0.##', symbol: '₽' },
+{ id: '3', name: 'KGS', value: 'kgs', mask: '# ##0.##', symbol: '⃀' },
+{ id: '4', name: 'UZS', value: 'uzs', mask: '# ##0.##', symbol: 'сў' },
+]);
+
+const selectedOption = ref(optionsCurrency.value[0]);
+
+const selectedOptionId = ref(selectedOption.value.id);
+
+watch(selectedOptionId, (newId) => {
+const newOption = optionsCurrency.value.find((option) => option.id === newId);
+if (newOption) {
+    selectedOption.value = newOption;
+}
+});
+
+const { stateClassList, stateAttrs } = useKitState(props);
+const { sizeClassList } = useKitSize(props);
+const attrs = useAttrs();
+
+const componentAttrs = computed(() => ({
+...attrs,
+...stateAttrs.value,
+label: props.label,
+error: props.error,
+hint: props.hint,
+placeholder: props.placeholder,
+}));
+
+const classList = computed(() => [
+stateClassList.value,
+sizeClassList.value,
+'base-input-currency',
+]);
+
+const modelValue = computed({
+get: () => props.modelValue,
+set: (value) => emit('update:modelValue', value),
+});
+
+const handleInput = (value: string) => {
+emit('update:modelValue', value);
+};
+</script>
+
+<style lang="scss" scoped>
+.base-input-currency {
+$input: &;
+
+display: flex;
+align-items: center;
+width: 100%;
+
+&__wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+}
+
+&__input-container {
+    display: flex;
+    align-items: center;
+}
+
+&__symbol {
+    position: absolute;
+    top: 50%;
+    left: 12px;
+    transform: translateY(-50%);
+    z-index: 1;
+    font-size: var(--typography-text-m-regular);
+    color: var(--primary-text-tertiary);
+}
+
+&__input {
+    flex-grow: 1;
+
+    :deep(.base-input__field) {
+        border-top-right-radius: 0 !important;
+        border-bottom-right-radius: 0 !important;
+        border-right: none;
+    }
+}
+
+&__select {
+    min-width: unset;
+
+    :deep(.base-select__header) {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        border-left: none;
+    }
+
+    :deep(.base-select__hint) {
+        display: none;
+    }
+}
+
+&.--small-size {
+    #{$input} {
+        :deep(.base-select) {
+            width: 71px;
+        }
+        &__symbol {
+            font-size: var(--typography-text-s-regular);
+        }
+    }
+
+    :deep(.base-input__field) {
+        padding-left: 30px;
+    }
+}
+
+&.--medium-size {
+    #{$input} {
+        :deep(.base-select) {
+            width: 75px;
+        }
+        &__symbol {
+            font-size: var(--typography-text-m-regular);
+        }
+    }
+
+    :deep(.base-input__field) {
+        padding-left: 30px;
+    }
+}
+
+&.--large-size {
+    #{$input} {
+        :deep(.base-select) {
+            width: 87px;
+        }
+        &__symbol {
+            font-size: var(--typography-text-l-regular);
+        }
+    }
+
+    :deep(.base-input__field) {
+        padding-left: 30px;
+    }
+}
+}
+</style>

package/src/components/BaseInputCurrency/README.md

@@ -0,0 +1,57 @@
+# BaseInputCurrency
+
+Vue-компонент для ввода денежных сумм с выбором валюты. Включает поле ввода с маской форматирования чисел и выпадающий список для выбора валюты. Символ валюты отображается как текст слева от поля ввода.
+
+## Пропсы
+
+| Проп          | Тип                 | По умолчанию | Описание                                                                    |
+|---------------|---------------------|--------------|-----------------------------------------------------------------------------|
+| `modelValue`  | `string`            | `''`         | Значение поля ввода, поддерживает двустороннюю привязку через `v-model`.     |
+| `size`        | `'small' \| 'medium' \| 'large'` | `'medium'` | Размер компонента, влияет на размеры поля и списка.                          |
+| `type`        | `string`            | `'text'`     | Тип поля ввода, для валюты используйте `'text'`.                             |
+| `placeholder` | `string`            | `'0.00'`     | Текст-заполнитель для поля ввода.                                           |
+| `error`       | `string \| boolean` | `''`         | Сообщение об ошибке или булево значение для отображения ошибки под полем.    |
+| `hint`        | `string`            | `''`         | Подсказка, отображаемая под полем, если нет ошибки.                         |
+
+## Особенности
+
+- **Символ валюты**: Текстовый символ (₸, ₽, лв, сў) отображается слева от поля ввода, обновляется при выборе валюты.
+- **Выбор валюты**: Выпадающий список (`<base-select>`) справа для выбора валют (KZT, RUB, KGS, UZS) с иконками.
+- **Маска ввода**: Использует `maska` для форматирования чисел (например, `1234567.89` → `1 234 567.89`).
+- **Размеры**: Поддерживает `small`, `medium`, `large` с адаптивными стилями.
+- **Состояния**: Ошибка, фокус и отключение стилизуются через CSS-классы.
+
+## Использование
+
+```vue
+<template>
+  <base-input-currency
+    id="currency"
+    v-model="amount"
+    size="medium"
+    label="Сумма"
+    placeholder="0.00"
+    :error="errorMessage"
+    hint="Введите сумму в выбранной валюте"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const amount = ref('');
+const errorMessage = ref('');
+</script>
+```
+
+## Зависимости
+
+- **`maska`**: Для форматирования ввода.
+- **Компоненты**: `<base-input>`, `<base-select>`, `<base-icon>`.
+- **Компосаблы**: `useKitState`, `useKitSize`.
+
+## Примечания
+
+- Поле ввода стыкуется с выпадающим списком: левая часть без правой границы, правая — без левой.
+- Символ валюты позиционируется абсолютно внутри поля ввода для экономии пространства.
+- Поддерживает состояния ошибки и фокуса через стили и пропсы.

package/src/components/BaseInputEmail/BaseInputEmail.vue

@@ -0,0 +1,89 @@
+<template>
+    <div class="base-input-email">
+      <div class="base-input-email__wrapper">
+        <base-input
+          v-bind="{...$props, ...$attrs}"
+          v-model="modelValue"
+          type="email"
+          :error="emailError || props.error"
+          @update:modelValue="onUpdateModelValue"
+        >
+          <template #left-icon>
+            <base-icon
+              name="email-sms"
+              :size="size"
+            />
+          </template>
+
+          <template #right-icon>
+            <div v-if="tooltipOptions?.title" class="base-input-email__tooltip-container">
+              <base-tooltip
+                :title="tooltipOptions.title"
+                :content="tooltipOptions.content"
+                :theme="tooltipOptions.theme"
+                :trigger="tooltipOptions.trigger"
+                :position="tooltipOptions.position"
+              >
+              <template #trigger>
+                <slot name="right-icon" />
+              </template>
+              </base-tooltip>
+            </div>
+          </template>
+        </base-input>
+      </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import BaseInput from '../BaseInput/BaseInput.vue';
+import BaseTooltip from '../BaseTooltip/BaseTooltip.vue';
+import BaseIcon from '../BaseIcon/BaseIcon.vue';
+import type { ICoreInputProps } from '../../types/input';
+
+const props = withDefaults(defineProps<ICoreInputProps>(), {
+  size: 'medium',
+  type: 'email',
+  modelValue: '',
+  placeholder: '' as string,
+  error: '',
+  hint: '',
+});
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: string): void;
+}>();
+
+const modelValue = computed({
+  get: () => props.modelValue,
+  set: value => emit('update:modelValue', value),
+});
+
+function onUpdateModelValue(value: string) {
+  emit('update:modelValue', value);
+}
+
+const emailError = ref('');
+
+watch(modelValue, (value) => {
+  if (!/^[\w\-.]+@(?:[\w\-]+\.)+[\w\-]{2,4}$/.test(String(value))) {    
+    emailError.value = props.validationText || 'Некорректный email';
+  } else {
+    emailError.value = '';
+  }
+});
+</script>
+
+<style scoped lang="scss">
+  .base-input-email {
+    width: max-content;
+
+    &__tooltip-container {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+</style>

package/src/components/BaseInputEmail/README.md

@@ -0,0 +1,71 @@
+### BaseInputEmail
+
+Компонент для ввода email с валидацией и иконками, представляющими визуальную подсказку и дополнительную информацию.
+
+---
+
+#### Props
+
+- `modelValue: string`  
+  Значение поля ввода email. Двусторонняя привязка, обновляется при изменении значения.
+
+- `size: 'small' | 'medium' | 'large'`  
+  Размер компонента. Определяет размеры иконок и поля ввода. По умолчанию — `medium`.
+
+- `placeholder: string`  
+  Текст-заполнитель для поля ввода. По умолчанию пустое значение.
+
+- `error: string | boolean`  
+  Ошибка, которая будет отображаться под полем ввода. Может быть строкой с сообщением об ошибке или булевым значением, где `true` указывает на наличие ошибки. По умолчанию — пустое значение.
+
+- `hint: string`  
+  Подсказка, отображаемая под полем ввода.
+
+---
+
+#### Важные особенности
+
+- **Иконка слева:**  
+  В поле ввода по умолчанию отображается иконка `email`, предоставляемая компонентом `BaseIcon`, которая будет визуально отображать цель поля ввода.
+
+- **Иконка справа:**  
+  С правой стороны поля ввода отображается иконка помощи (`help`), на которую можно навести курсор, чтобы открыть подсказку в виде тултипа. Тултип использует компонент `BaseTooltip` для отображения дополнительной информации при наведении.
+
+- **Валидация email:**  
+  В компоненте реализована базовая валидация email. Если введенный текст не соответствует формату email, то отображается ошибка "Некорректный email". Если поле пустое, показывается ошибка "Введите email".
+
+- **Двусторонняя привязка:**  
+  Компонент использует `v-model` для двусторонней привязки значения email и обновления его в родительском компоненте.
+
+---
+
+#### Пример использования
+
+```vue
+<BaseInputEmail 
+  v-model="email" 
+  placeholder="Введите ваш email" 
+  :error="emailError" 
+  size="large" 
+  hint="Мы никогда не передадим ваш email третьим лицам."
+/>
+```
+
+---
+
+#### Логика валидации
+
+- Если значение поля пустое, в переменную `emailError` записывается сообщение "Введите email".
+- Если введенный текст не соответствует регулярному выражению для email, показывается ошибка "Некорректный email".
+- Если валидация проходит, ошибка очищается.
+
+---
+
+#### Стилизация
+
+- Поле ввода использует стандартные стили компонента `BaseInput`, включая стили для иконок и ошибок.
+- Стили для тултипа контейнера и для самой иконки добавляют интерактивности и четкости в отображении ошибок и подсказок.
+
+---
+
+Этот компонент идеально подходит для реализации форм, где требуется ввод email, с интерактивными и визуально понятными подсказками для пользователя.

package/src/components/BaseInputPhone/BaseInputPhone.vue

@@ -0,0 +1,175 @@
+<template>
+    <div :class="classList">
+        <div class="base-input-phone__wrapper">
+            <base-select
+                id="select-phone"
+                v-model="selectedOptionId"
+                :options="optionsPhone"
+                :size="size"
+                :error="error"
+                class="base-input-phone__select"
+                >
+                    <template #iconItem="{ item }">
+                    <base-icon
+                        :name="item.icon"
+                        :size="size"
+                    />
+                    </template>
+                </base-select>
+                <base-input
+                    id="input-phone"
+                    type="tel"
+                    :modelValue="modelValue"
+                    v-bind="componentAttrs"
+                    :mask="selectedOption.mask"
+                    :size="size"
+                    :placeholder="placeholder || ''"
+                    class="base-input-phone__input"
+                    @update:modelValue="handleInput"
+                ></base-input>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useAttrs, ref, watch } from 'vue';
+import BaseInput from '../BaseInput/BaseInput.vue';
+import BaseSelect from '../BaseSelect/BaseSelect.vue';
+import { useKitState } from '../../composables/kit/state';
+import { useKitSize } from '../../composables/kit/size';
+import type { ICoreInputProps } from '../../types/input';
+
+const props = withDefaults(defineProps<ICoreInputProps>(), {
+    size: 'medium',
+    type: 'text',
+    modelValue: '',
+    placeholder: '' as string,
+    error: '',
+    hint: '',
+});
+
+const emit: (event: 'update:modelValue', value: string) => void = defineEmits();
+
+const optionsPhone = ref([
+    { id: '1', name: 'KZ', value: 'kz', mask: '+7 (###) ###-##-##', icon: 'kz' },
+    { id: '2', name: 'RU', value: 'ru', mask: '+7 (###) ###-##-##', icon: 'ru' },
+    { id: '3', name: 'KG', value: 'kg', mask:'+996 (###) ###-###', icon: 'kg' },
+    { id: '4', name: 'UZ', value: 'uz', mask: '+998 (##) ###-##-##', icon: 'uz' },
+]);
+
+const selectedOption = ref(optionsPhone.value[0]);
+
+const selectedOptionId = ref(selectedOption.value.id);
+
+watch(selectedOptionId, (newId) => {
+  const newOption = optionsPhone.value.find((option) => option.id === newId);
+  if (newOption) {
+    selectedOption.value = newOption;
+  }
+});
+
+const { stateClassList, stateAttrs } = useKitState(props);
+const { sizeClassList } = useKitSize(props);
+const attrs = useAttrs();
+
+const componentAttrs = computed(() => ({
+    ...attrs,
+    ...stateAttrs.value,
+    label: props.label,
+    error: props.error,
+    hint: props.hint,
+    placeholder: props.placeholder,
+}));
+
+const classList = computed(() => [
+    stateClassList.value,
+    sizeClassList.value,
+    'base-input-phone',
+]);
+
+const modelValue = computed({
+  get: () => props.modelValue,
+  set: value => emit('update:modelValue', value),
+});
+const handleInput = (value: string) => {
+    emit('update:modelValue', value);
+};
+</script>
+
+<style lang="scss" scoped>
+.base-input-phone {
+    $input: &;
+
+    display: flex;
+    align-items: center;
+    width: 100%;
+
+    &__wrapper {
+        display: flex;
+        align-items: center;
+        width: 100%;
+
+        :deep(.base-select__header) {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            border-right: none;
+        }
+
+        :deep(.base-input__field) {
+            border-top-left-radius: 0 !important;
+            border-bottom-left-radius: 0 !important;
+            border-left: none;
+        }
+
+        :deep(.base-select__hint) {
+            display: none;
+        }
+    }
+
+    &__input {
+        flex-grow: 1;
+    }
+
+    &__select {
+        min-width: unset;
+    }
+
+    &.--small-size {
+        #{$input} {
+            :deep(.base-select) {
+                width: 71px;
+            }
+        }
+        :deep(.base-input__label-text), 
+        :deep(.base-input__hint) {
+            transform: translateX(-54px);
+        }
+    }
+
+    &.--medium-size {
+        #{$input} {
+            &__select {
+                width: 75px;
+            }
+        }
+
+        :deep(.base-input__label-text), 
+        :deep(.base-input__hint) {
+            transform: translateX(-75px);
+        }
+    }
+
+    &.--large-size {
+        #{$input} {
+            &__select {
+                width: 87px;
+            }
+        }
+
+        :deep(.base-input__label-text), 
+        :deep(.base-input__hint) {
+            transform: translateX(-86px);
+        }
+    }
+}
+</style>