@dxtmisha/wiki 0.24.3 → 0.25.1

package/src/media/mdx/Image/img-tag.en.mdx

@@ -0,0 +1,105 @@
+## Using the img tag
+
+The `tagImg`, `srcset`, `picture`, `alt`, `lazy`, `preloadOffset` and `fetchPriority` properties are designed to control the image display mode using the HTML `<img>` tag instead of a background image.
+
+**Properties:**
+
+- `tagImg` — use the `<img>` tag instead of a background image
+- `srcset` — set of image sources for different screen resolutions
+- `picture` — sources for different display conditions using the `<picture>` tag
+- `alt` — alternative text for the image
+- `lazy` — enables lazy loading of the image
+- `preloadOffset` — offset for image preloading (default `1024px`)
+- `fetchPriority` — image loading priority (`low`, `high`, `auto`)
+
+The properties work together: if `tagImg` is not set or equals `false`, the image is displayed as a CSS background via `background-image`. When `tagImg` is activated (value `true`), the component uses the semantic HTML `<img>` tag, providing better accessibility and SEO optimization. The `alt` property defines alternative text that is displayed when the image is unavailable and is used by screen readers for people with disabilities.
+
+The `srcset` property allows you to provide multiple versions of an image for different pixel densities and screen sizes. It accepts a string in the standard `srcset` attribute format or an object where keys are width descriptors (numbers or strings like `'2x'`) and values are image URLs. When using numeric keys, the `w` suffix (width descriptor) is automatically added. The browser automatically selects the optimal image based on screen size and pixel density.
+
+The `picture` property enables the use of the HTML `<picture>` tag for art direction — when you need to load different images depending on screen size or other media query conditions. It accepts an object where keys are media conditions (such as screen width in pixels) and values are image URLs, or an array of objects with `<source>` attributes. When using an object, media queries like `(width >= 768px)` are automatically generated. The `<picture>` tag provides more flexible control over image selection compared to `srcset`, allowing you to load images with different aspect ratios or content for various viewing conditions.
+
+The `lazy` property activates native browser lazy loading via the `loading="lazy"` attribute. Images with this attribute are loaded only when approaching the visible screen area, which significantly speeds up initial page load and reduces traffic consumption. It is especially effective for pages with a large number of images or long lists.
+
+The `preloadOffset` property defines the pixel offset for preloading images when using lazy loading. The default value is `1024px`, which means the image starts loading 1024 pixels before it enters the visible area. This ensures smooth image loading without delays during scrolling. You can specify either a numeric value or a string with a unit of measurement.
+
+The `fetchPriority` property allows you to control the browser's image loading priority. It accepts three values: `high` — high priority for critical images (such as hero images or main banners), `low` — low priority for secondary images, `auto` — the browser determines the priority automatically (default value). Proper use of this property helps optimize page loading by ensuring fast loading of important content.
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const productImage = ref('/images/product.jpg')
+</script>
+
+<template>
+  <!-- Basic usage -->
+  <Image
+    :value="productImage"
+    tag-img
+    alt="Product description"
+  />
+
+  <!-- With lazy loading -->
+  <Image
+    :value="productImage"
+    tag-img
+    alt="Product"
+    lazy
+  />
+
+  <!-- With srcset object -->
+  <Image
+    :value="productImage"
+    tag-img
+    alt="Responsive image"
+    :srcset="{
+      '1x': '/images/product.jpg',
+      '2x': '/images/product@2x.jpg'
+    }"
+  />
+
+  <!-- With picture for different screen sizes -->
+  <Image
+    :value="productImage"
+    tag-img
+    alt="Responsive image for different devices"
+    :picture="{
+      768: '/images/product-tablet.jpg',
+      1024: '/images/product-desktop.jpg'
+    }"
+  />
+
+  <!-- With preload offset configuration -->
+  <Image
+    :value="productImage"
+    tag-img
+    alt="Image with early preload"
+    lazy
+    preload-offset="2048px"
+  />
+
+  <!-- With high loading priority -->
+  <Image
+    :value="productImage"
+    tag-img
+    alt="Main page image"
+    fetch-priority="high"
+  />
+
+  <!-- Complex example -->
+  <Image
+    :value="productImage"
+    tag-img
+    alt="Responsive product image"
+    lazy
+    preload-offset="1536px"
+    fetch-priority="low"
+    :srcset="{
+      '1x': '/images/product.jpg',
+      '2x': '/images/product@2x.jpg',
+      '3x': '/images/product@3x.jpg'
+    }"
+  />
+</template>
+```
+

package/src/media/mdx/Image/img-tag.ru.mdx

@@ -0,0 +1,105 @@
+## Использование тега img
+
+Свойства `tagImg`, `srcset`, `picture`, `alt`, `lazy`, `preloadOffset` и `fetchPriority` предназначены для управления режимом отображения изображения через HTML-тег `<img>` вместо фонового изображения.
+
+**Свойства:**
+
+- `tagImg` — использовать тег `<img>` вместо фонового изображения
+- `srcset` — набор источников изображения для разных разрешений экрана
+- `picture` — источники для разных условий отображения с использованием тега `<picture>`
+- `alt` — альтернативный текст для изображения
+- `lazy` — включает ленивую загрузку изображения
+- `preloadOffset` — смещение для предзагрузки изображения (по умолчанию `1024px`)
+- `fetchPriority` — приоритет загрузки изображения (`low`, `high`, `auto`)
+
+Свойства работают совместно: если `tagImg` не задан или равен `false`, изображение отображается как CSS-фон через `background-image`. При активации `tagImg` (значение `true`), компонент использует семантический HTML-тег `<img>`, обеспечивая лучшую доступность и SEO-оптимизацию. Свойство `alt` определяет альтернативный текст, который отображается при недоступности изображения и используется программами чтения с экрана для людей с ограниченными возможностями.
+
+Свойство `srcset` позволяет предоставить несколько версий изображения для разных плотностей пикселей и размеров экрана. Принимает строку в формате стандартного атрибута `srcset` или объект, где ключи — это дескрипторы ширины (числа или строки вроде `'2x'`), а значения — URL изображений. При использовании числовых ключей автоматически добавляется суффикс `w` (width descriptor). Браузер самостоятельно выбирает оптимальное изображение на основе размера экрана и плотности пикселей.
+
+Свойство `picture` позволяет использовать HTML-тег `<picture>` для art direction — когда требуется загружать разные изображения в зависимости от размера экрана или других условий медиа-запросов. Принимает объект, где ключи — это медиа-условия (например, ширина экрана в пикселях), а значения — URL изображений, или массив объектов с атрибутами `<source>`. При использовании объекта автоматически генерируются медиа-запросы вида `(width >= 768px)`. Тег `<picture>` обеспечивает более гибкий контроль над выбором изображения по сравнению с `srcset`, позволяя загружать изображения разных пропорций или содержания для различных условий просмотра.
+
+Свойство `lazy` активирует нативную ленивую загрузку браузера через атрибут `loading="lazy"`. Изображения с этим атрибутом загружаются только при приближении к видимой области экрана, что значительно ускоряет начальную загрузку страницы и снижает потребление трафика. Особенно эффективно для страниц с большим количеством изображений или длинных списков.
+
+Свойство `preloadOffset` определяет смещение в пикселях для предварительной загрузки изображений при использовании ленивой загрузки. По умолчанию установлено значение `1024px`, что означает начало загрузки изображения за 1024 пикселя до того, как оно попадет в видимую область. Это обеспечивает плавную загрузку изображений без задержек при прокрутке. Можно указать как числовое значение, так и строку с единицей измерения.
+
+Свойство `fetchPriority` позволяет управлять приоритетом загрузки изображения браузером. Принимает три значения: `high` — высокий приоритет для критически важных изображений (например, главный баннер или hero-изображение), `low` — низкий приоритет для второстепенных изображений, `auto` — браузер самостоятельно определяет приоритет (значение по умолчанию). Правильное использование этого свойства помогает оптимизировать загрузку страницы, обеспечивая быструю загрузку важного контента.
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const productImage = ref('/images/product.jpg')
+</script>
+
+<template>
+  <!-- Базовое использование -->
+  <Image
+    :value="productImage"
+    tag-img
+    alt="Описание продукта"
+  />
+
+  <!-- С ленивой загрузкой -->
+  <Image
+    :value="productImage"
+    tag-img
+    alt="Товар"
+    lazy
+  />
+
+  <!-- С srcset объектом -->
+  <Image
+    :value="productImage"
+    tag-img
+    alt="Адаптивное изображение"
+    :srcset="{
+      '1x': '/images/product.jpg',
+      '2x': '/images/product@2x.jpg'
+    }"
+  />
+
+  <!-- С picture для разных размеров экрана -->
+  <Image
+    :value="productImage"
+    tag-img
+    alt="Адаптивное изображение для разных устройств"
+    :picture="{
+      768: '/images/product-tablet.jpg',
+      1024: '/images/product-desktop.jpg'
+    }"
+  />
+
+  <!-- С настройкой предзагрузки -->
+  <Image
+    :value="productImage"
+    tag-img
+    alt="Изображение с ранней предзагрузкой"
+    lazy
+    preload-offset="2048px"
+  />
+
+  <!-- С высоким приоритетом загрузки -->
+  <Image
+    :value="productImage"
+    tag-img
+    alt="Главное изображение страницы"
+    fetch-priority="high"
+  />
+
+  <!-- Комплексный пример -->
+  <Image
+    :value="productImage"
+    tag-img
+    alt="Адаптивное изображение товара"
+    lazy
+    preload-offset="1536px"
+    fetch-priority="low"
+    :srcset="{
+      '1x': '/images/product.jpg',
+      '2x': '/images/product@2x.jpg',
+      '3x': '/images/product@3x.jpg'
+    }"
+  />
+</template>
+```
+

package/src/media/mdx/Image/wikiMdxImage.ts

@@ -8,6 +8,8 @@ import sizeEn from './size.en.mdx'
 import sizeRu from './size.ru.mdx'
 import adaptiveEn from './adaptive.en.mdx'
 import adaptiveRu from './adaptive.ru.mdx'
+import imgTagEn from './img-tag.en.mdx'
+import imgTagRu from './img-tag.ru.mdx'
 
 import eventLoadEn from './event.load.en.mdx'
 import eventLoadRu from './event.load.ru.mdx'
@@ -34,6 +36,10 @@ export const wikiMdxImage: StorybookComponentsMdxItem = {
       en: adaptiveEn,
       ru: adaptiveRu
     },
+    'img-tag': {
+      en: imgTagEn,
+      ru: imgTagRu
+    },
     'event.load': {
       en: eventLoadEn,
       ru: eventLoadRu

package/src/media/mdx/Input/currency.en.mdx

@@ -0,0 +1,38 @@
+## Currency Formatting
+
+Properties `type`, `currency`, `currencyHide`, `language`, and `fraction` are designed to manage currency value formatting with automatic currency symbol insertion and localization.
+
+**Properties:**
+
+- `type` — input type (set to `currency`)
+- `currency` — currency code (e.g., `USD`, `EUR`, `RUB`)
+- `currencyHide` — hides currency symbol in the input field
+- `language` — locale code for formatting (e.g., `ru-RU`, `en-US`)
+- `fraction` — number of decimal places (default `2`)
+
+Properties work together: `type="currency"` automatically activates currency formatting mode with two decimal places. `currency` defines the symbol appended to the formatted number (`$`, `€`, `₽`). When `currencyHide` is set, currency symbol is not displayed, but number formatting is preserved. Property `language` affects thousand separators, decimal separator, and currency symbol position. Number of decimal places can be changed via `fraction`, overriding the default value.
+
+```html
+<script setup>
+import { ref } from 'vue'
+const value = ref('1234.56')
+</script>
+
+<template>
+  <!-- Standard currency input -->
+  <Input v-model="value" type="currency" currency="USD" language="en-US" label="Price" />
+
+  <!-- Currency with Russian locale -->
+  <Input v-model="value" type="currency" currency="RUB" language="ru-RU" label="Salary" />
+
+  <!-- Currency without symbol -->
+  <Input v-model="value" type="currency" currency="EUR" currency-hide language="de-DE" label="Amount" />
+
+  <!-- Currency with three decimals -->
+  <Input v-model="value" type="currency" currency="USD" language="en-US" :fraction="3" label="Precise Amount" />
+
+  <!-- Number formatting only -->
+  <Input v-model="value" type="number-format" language="ru-RU" label="Number" />
+</template>
+```
+

package/src/media/mdx/Input/currency.ru.mdx

@@ -0,0 +1,38 @@
+## Работа с валютой
+
+Свойства `type`, `currency`, `currencyHide`, `language` и `fraction` предназначены для управления форматированием денежных значений с автоматической подстановкой символа валюты и локализацией.
+
+**Свойства:**
+
+- `type` — тип инпута (устанавливается значение `currency`)
+- `currency` — код валюты (например, `USD`, `EUR`, `RUB`)
+- `currencyHide` — скрывает символ валюты в поле ввода
+- `language` — код локали для форматирования (например, `ru-RU`, `en-US`)
+- `fraction` — количество знаков после запятой (по умолчанию `2`)
+
+Свойства работают совместно: `type="currency"` автоматически активирует режим валютного форматирования с двумя знаками после запятой. `currency` определяет символ, который добавляется к отформатированному числу (`$`, `€`, `₽`). При установке `currencyHide` символ валюты не отображается, но форматирование числа сохраняется. Свойство `language` влияет на разделители тысяч, десятичный разделитель и позицию символа валюты. Количество десятичных знаков можно изменить через `fraction`, перезаписав значение по умолчанию.
+
+```html
+<script setup>
+import { ref } from 'vue'
+const value = ref('1234.56')
+</script>
+
+<template>
+  <!-- Стандартный валютный инпут -->
+  <Input v-model="value" type="currency" currency="USD" language="en-US" label="Цена" />
+
+  <!-- Валюта с русской локалью -->
+  <Input v-model="value" type="currency" currency="RUB" language="ru-RU" label="Зарплата" />
+
+  <!-- Валюта без символа -->
+  <Input v-model="value" type="currency" currency="EUR" currency-hide language="de-DE" label="Сумма" />
+
+  <!-- Валюта с тремя знаками -->
+  <Input v-model="value" type="currency" currency="USD" language="en-US" :fraction="3" label="Точная сумма" />
+
+  <!-- Только числовое форматирование -->
+  <Input v-model="value" type="number-format" language="ru-RU" label="Число" />
+</template>
+```
+

package/src/media/mdx/Input/date.en.mdx

@@ -0,0 +1,53 @@
+## Date and Time Formatting
+
+Properties `type`, `language`, and `mask` are designed to manage date and time input and formatting with automatic localization and masking.
+
+**Properties:**
+
+- `type` — input type (set to one of: `date`, `datetime`, `year-month`, `time`, `hour-minute`)
+- `language` — locale code for formatting (e.g., `ru-RU`, `en-US`)
+- `mask` — custom input mask (optional)
+- `min` — minimum allowed date/time value
+- `max` — maximum allowed date/time value
+
+Properties work together: `type="date"` automatically activates date input mode with localized formatting. `language` determines the order of date components (day/month/year or month/day/year) and separators. `type="datetime"` adds time input to the date. Types `year-month`, `time`, and `hour-minute` allow input of specific components only. Properties `min` and `max` restrict the range of allowed values. You can override the automatic mask via the `mask` property for custom formatting.
+
+```html
+<script setup>
+import { ref } from 'vue'
+const dateValue = ref('2024-03-15')
+const datetimeValue = ref('2024-03-15T14:30:00')
+const timeValue = ref('14:30')
+const yearMonthValue = ref('2024-03')
+</script>
+
+<template>
+  <!-- Standard date input -->
+  <Input v-model="dateValue" type="date" language="en-US" label="Date" />
+
+  <!-- Date with Russian locale -->
+  <Input v-model="dateValue" type="date" language="ru-RU" label="Дата" />
+
+  <!-- Date and time -->
+  <Input v-model="datetimeValue" type="datetime" language="en-US" label="Date and Time" />
+
+  <!-- Time only -->
+  <Input v-model="timeValue" type="time" language="en-US" label="Time" />
+
+  <!-- Hours and minutes -->
+  <Input v-model="timeValue" type="hour-minute" language="en-US" label="Hours:Minutes" />
+
+  <!-- Year and month -->
+  <Input v-model="yearMonthValue" type="year-month" language="en-US" label="Period" />
+
+  <!-- Date with constraints -->
+  <Input
+    v-model="dateValue"
+    type="date"
+    language="en-US"
+    min="2024-01-01"
+    max="2024-12-31"
+    label="Date in 2024"
+  />
+</template>
+```

package/src/media/mdx/Input/date.ru.mdx

@@ -0,0 +1,53 @@
+## Работа с датой и временем
+
+Свойства `type`, `language` и `mask` предназначены для управления вводом и форматированием значений даты и времени с автоматической локализацией и маскированием.
+
+**Свойства:**
+
+- `type` — тип инпута (устанавливается одно из значений: `date`, `datetime`, `year-month`, `time`, `hour-minute`)
+- `language` — код локали для форматирования (например, `ru-RU`, `en-US`)
+- `mask` — пользовательская маска для ввода (опционально)
+- `min` — минимальное допустимое значение даты/времени
+- `max` — максимальное допустимое значение даты/времени
+
+Свойства работают совместно: `type="date"` автоматически активирует режим ввода даты с локализованным форматированием. `language` определяет порядок компонентов даты (день/месяц/год или месяц/день/год) и разделители. `type="datetime"` добавляет к дате ввод времени. Типы `year-month`, `time` и `hour-minute` позволяют вводить только определённые компоненты. Свойства `min` и `max` ограничивают диапазон допустимых значений. Можно переопределить автоматическую маску через свойство `mask` для кастомного форматирования.
+
+```html
+<script setup>
+import { ref } from 'vue'
+const dateValue = ref('2024-03-15')
+const datetimeValue = ref('2024-03-15T14:30:00')
+const timeValue = ref('14:30')
+const yearMonthValue = ref('2024-03')
+</script>
+
+<template>
+  <!-- Стандартный ввод даты -->
+  <Input v-model="dateValue" type="date" language="ru-RU" label="Дата" />
+
+  <!-- Дата с английской локалью -->
+  <Input v-model="dateValue" type="date" language="en-US" label="Date" />
+
+  <!-- Дата и время -->
+  <Input v-model="datetimeValue" type="datetime" language="ru-RU" label="Дата и время" />
+
+  <!-- Только время -->
+  <Input v-model="timeValue" type="time" language="ru-RU" label="Время" />
+
+  <!-- Часы и минуты -->
+  <Input v-model="timeValue" type="hour-minute" language="ru-RU" label="Часы:Минуты" />
+
+  <!-- Год и месяц -->
+  <Input v-model="yearMonthValue" type="year-month" language="ru-RU" label="Период" />
+
+  <!-- Дата с ограничениями -->
+  <Input
+    v-model="dateValue"
+    type="date"
+    language="ru-RU"
+    min="2024-01-01"
+    max="2024-12-31"
+    label="Дата в 2024 году"
+  />
+</template>
+```

package/src/media/mdx/Input/input.en.mdx

@@ -0,0 +1,143 @@
+Text input field component with validation, masking and formatting support.
+
+Input provides a flexible interface for entering various types of data: text, numbers, email, passwords, phones, URLs, dates and time. The component automatically applies appropriate validation, formatting and keyboard based on the specified type. Supports masking for structured input (phones, dates, custom patterns), currency and number formatting, password visibility control and integration with the Field component for consistent styling.
+
+**Key features:**
+
+- Multiple input types (text, number, email, password, tel, url, date, time and more)
+- Built-in validation with custom messages
+- Masking for formatted input
+- Currency and number formatting with localization
+- Password visibility toggle
+- Prefix and suffix for additional context
+- Character counter for length limits
+- Navigation arrows for numeric values
+- Autocomplete and spellcheck support
+- Clear button for value reset
+
+**Common use cases:**
+
+- Registration and login forms
+- Contact information fields (email, phone)
+- Numeric fields (quantity, price, age)
+- Password fields with visibility toggle
+- Search fields with quick clear
+- Formatted input (phones, dates, cards)
+- Currency fields with automatic formatting
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const email = ref('')
+const password = ref('')
+
+const handleInput = (event, validation) => {
+  console.log('Input value:', validation.value)
+  console.log('Valid:', validation.status)
+}
+</script>
+
+<template>
+  <div class="form">
+    <Input
+      v-model="email"
+      type="email"
+      label="Email"
+      placeholder="example@mail.com"
+      required
+      @input="handleInput"
+    />
+
+    <Input
+      v-model="password"
+      type="password"
+      label="Password"
+      placeholder="Enter password"
+      minlength="8"
+      required
+      iconVisibility="visibility"
+      iconVisibilityOff="visibility_off"
+    />
+
+    <Input
+      type="currency"
+      label="Price"
+      currency="USD"
+      language="en-US"
+    />
+  </div>
+</template>
+```
+Компонент текстового поля ввода с поддержкой валидации, маскирования и форматирования.
+
+Input предоставляет гибкий интерфейс для ввода данных различных типов: текст, числа, email, пароли, телефоны, URL, даты и время. Компонент автоматически применяет соответствующую валидацию, форматирование и клавиатуру в зависимости от указанного типа. Поддерживает маскирование для структурированного ввода (телефоны, даты, кастомные паттерны), форматирование валют и чисел, управление видимостью пароля и интеграцию с компонентом Field для единообразной стилизации.
+
+**Основные возможности:**
+
+- Множественные типы ввода (text, number, email, password, tel, url, date, time и другие)
+- Встроенная валидация с пользовательскими сообщениями
+- Маскирование для форматированного ввода
+- Форматирование валюты и чисел с локализацией
+- Переключатель видимости пароля
+- Префикс и суффикс для дополнительного контекста
+- Счётчик символов для ограничения длины
+- Стрелки навигации для числовых значений
+- Поддержка автозаполнения и проверки орфографии
+- Кнопка очистки значения
+
+**Типичные сценарии использования:**
+
+- Формы регистрации и авторизации
+- Поля ввода контактных данных (email, телефон)
+- Числовые поля (количество, цена, возраст)
+- Поля для ввода паролей с переключением видимости
+- Поля поиска с быстрой очисткой
+- Форматированный ввод (телефоны, даты, карты)
+- Валютные поля с автоматическим форматированием
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const email = ref('')
+const password = ref('')
+
+const handleInput = (event, validation) => {
+  console.log('Введённое значение:', validation.value)
+  console.log('Валидно:', validation.status)
+}
+</script>
+
+<template>
+  <div class="form">
+    <Input
+      v-model="email"
+      type="email"
+      label="Email"
+      placeholder="example@mail.com"
+      required
+      @input="handleInput"
+    />
+
+    <Input
+      v-model="password"
+      type="password"
+      label="Пароль"
+      placeholder="Введите пароль"
+      minlength="8"
+      required
+      iconVisibility="visibility"
+      iconVisibilityOff="visibility_off"
+    />
+
+    <Input
+      type="currency"
+      label="Цена"
+      currency="RUB"
+      language="ru-RU"
+    />
+  </div>
+</template>
+```
+

package/src/media/mdx/Input/input.ru.mdx

@@ -0,0 +1,71 @@
+Компонент текстового поля ввода с поддержкой валидации, маскирования и форматирования.
+
+Input предоставляет гибкий интерфейс для ввода данных различных типов: текст, числа, email, пароли, телефоны, URL, даты и время. Компонент автоматически применяет соответствующую валидацию, форматирование и клавиатуру в зависимости от указанного типа. Поддерживает маскирование для структурированного ввода (телефоны, даты, кастомные паттерны), форматирование валют и чисел, управление видимостью пароля и интеграцию с компонентом Field для единообразной стилизации.
+
+**Основные возможности:**
+
+- Множественные типы ввода (text, number, email, password, tel, url, date, time и другие)
+- Встроенная валидация с пользовательскими сообщениями
+- Маскирование для форматированного ввода
+- Форматирование валюты и чисел с локализацией
+- Переключатель видимости пароля
+- Префикс и суффикс для дополнительного контекста
+- Счётчик символов для ограничения длины
+- Стрелки навигации для числовых значений
+- Поддержка автозаполнения и проверки орфографии
+- Кнопка очистки значения
+
+**Типичные сценарии использования:**
+
+- Формы регистрации и авторизации
+- Поля ввода контактных данных (email, телефон)
+- Числовые поля (количество, цена, возраст)
+- Поля для ввода паролей с переключением видимости
+- Поля поиска с быстрой очисткой
+- Форматированный ввод (телефоны, даты, карты)
+- Валютные поля с автоматическим форматированием
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const email = ref('')
+const password = ref('')
+
+const handleInput = (event, validation) => {
+  console.log('Введённое значение:', validation.value)
+  console.log('Валидно:', validation.status)
+}
+</script>
+
+<template>
+  <div class="form">
+    <Input
+      v-model="email"
+      type="email"
+      label="Email"
+      placeholder="example@mail.com"
+      required
+      @input="handleInput"
+    />
+
+    <Input
+      v-model="password"
+      type="password"
+      label="Пароль"
+      placeholder="Введите пароль"
+      minlength="8"
+      required
+      iconVisibility="visibility"
+      iconVisibilityOff="visibility_off"
+    />
+
+    <Input
+      type="currency"
+      label="Цена"
+      currency="RUB"
+      language="ru-RU"
+    />
+  </div>
+</template>
+```