@dxtmisha/wiki 0.24.3 → 0.39.1

package/src/media/mdx/Image/image.en.mdx

@@ -1,24 +1,24 @@
-Universal component for displaying images, icons, and PDF documents with advanced size, positioning, and adaptivity control.
+Universal component for displaying images, icons, flags, and PDF documents with advanced size, positioning, and adaptability controls.
 
-Image provides flexible API for working with various types of visual content: from simple icons to complex images with cropping and adaptive scaling. The component automatically detects the source type, supports coordinate positioning, adaptive resizing, and various fill modes.
+Image provides a flexible API for working with various types of visual content. The component automatically detects the source type (image, icon, color, file), selects the optimal rendering method (`<img>`, `background-image`, `<picture>`, `<object>`, or icon font), and supports advanced cropping and adaptation features.
 
 **Key Features:**
 
-- Support for multiple source types (icons, URLs, Files, PDFs)
-- Adaptive scaling with aspect ratio preservation
-- Coordinate-based cropping and precise positioning
-- Fill modes: auto, contain, cover
-- Automatic content type detection
-- CSS variable integration for flexible styling
-- Load events with complete type and data information
+- Support for multiple source types (URL, File, PDF, Material Icons, flags, colors)
+- Flexible rendering with automatic choice between background and img tag
+- Adaptive scaling with aspect ratio preservation and srcset support
+- Display control via fill modes and coordinate cropping
+- Styling support with masks and color filling
+- Integration with Material Symbols and system flags
 
 **Typical Use Cases:**
 
-- Displaying user avatars and uploaded images
-- Working with interface icons
-- PDF document previews
-- Adaptive image galleries
-- Background images with cropping
+- Responsive images with picture and srcset
+- Interface icons (Material Design or SVG masks)
+- User avatars with automatic cropping
+- Previews of uploaded files and PDF documents
+- Background images with complex positioning
+- Displaying country flags via CSS sprites
 
 ```html
 <script setup>
@@ -26,20 +26,25 @@ import { ref } from 'vue'
 import { Image } from '@dxtmisha/constructor'
 
 const imageUrl = ref('https://example.com/image.jpg')
-
-function handleLoad(data) {
-  console.log('Image loaded:', data.type, data.image)
-}
 </script>
 
 <template>
+  <!-- Background image with cropping -->
   <Image
     :value="imageUrl"
     size="cover"
-    adaptive
-    :coordinator="[0, 0, 100, 100]"
-    @load="handleLoad"
+    :coordinator="[10, 10, 10, 10]"
+  />
+
+  <!-- SEO-friendly image -->
+  <Image
+    :value="imageUrl"
+    tag-img
+    alt="Description"
   />
+
+  <!-- Material Design Icon -->
+  <Image value="filled-home" />
 </template>
 ```
 

package/src/media/mdx/Image/image.ru.mdx

@@ -1,24 +1,24 @@
-Универсальный компонент для отображения изображений, иконок и PDF-документов с расширенными возможностями управления размером, позиционированием и адаптивностью.
+Универсальный компонент для отображения изображений, иконок, флагов и PDF-документов с расширенными возможностями управления размером, позиционированием и адаптивностью.
 
-Image предоставляет гибкий API для работы с различными типами визуального контента: от простых иконок до сложных изображений с кадрированием и адаптивным масштабированием. Компонент автоматически определяет тип источника, поддерживает координатное позиционирование, адаптивное изменение размеров и различные режимы заполнения.
+Image предоставляет гибкий API для работы с различными типами визуального контента. Компонент автоматически определяет тип источника (изображение, иконка, цвет, файл), выбирает оптимальный способ рендеринга (`<img>`, `background-image`, `<picture>`, `<object>` или иконочный шрифт) и поддерживает продвинутые функции кадрирования и адаптации.
 
 **Основные возможности:**
 
-- Поддержка множества типов источников (иконки, URL, File, PDF)
-- Адаптивное масштабирование с сохранением пропорций
-- Координатное кадрирование и точное позиционирование
-- Режимы заполнения: auto, contain, cover
-- Автоматическое определение типа контента
-- Работа с CSS-переменными для гибкой стилизации
-- События загрузки с полной информацией о типе и данных
+- Поддержка множества типов источников (URL, File, PDF, Material Icons, флаги, цвета)
+- Гибкий рендеринг с автоматическим выбором между фоном и тегом img
+- Адаптивное масштабирование с сохранением пропорций и поддержкой srcset
+- Управление отображением через режимы заполнения и координатное кадрирование
+- Стилизация с поддержкой масок и заливки цветом
+- Интеграция с Material Symbols и системными флагами
 
 **Типичные сценарии использования:**
 
-- Отображение пользовательских аватаров и загруженных изображений
-- Работа с иконками в интерфейсе
-- Превью PDF-документов
-- Адаптивные галереи изображений
-- Фоновые изображения с кадрированием
+- Адаптивные изображения с picture и srcset
+- Иконки интерфейса (Material Design или SVG маски)
+- Аватары пользователей с автоматическим кадрированием
+- Превью загружаемых файлов и PDF документов
+- Фоновые изображения со сложным позиционированием
+- Отображение флагов стран через CSS спрайты
 
 ```html
 <script setup>
@@ -26,22 +26,26 @@ import { ref } from 'vue'
 import { Image } from '@dxtmisha/constructor'
 
 const imageUrl = ref('https://example.com/image.jpg')
-
-function handleLoad(data) {
-  console.log('Image loaded:', data.type, data.image)
-}
 </script>
 
 <template>
+  <!-- Фоновое изображение с кадрированием -->
   <Image
     :value="imageUrl"
     size="cover"
-    adaptive
-    :coordinator="[0, 0, 100, 100]"
-    @load="handleLoad"
+    :coordinator="[10, 10, 10, 10]"
   />
+
+  <!-- SEO-дружественное изображение -->
+  <Image
+    :value="imageUrl"
+    tag-img
+    alt="Описание"
+  />
+
+  <!-- Иконка Material Design -->
+  <Image value="filled-home" />
 </template>
 ```
 
 > Компонент автоматически управляет типом контента и оптимизирует отображение в зависимости от источника.
-

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,10 @@ 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 flagEn from './flag.en.mdx'
+import flagRu from './flag.ru.mdx'
 
 import eventLoadEn from './event.load.en.mdx'
 import eventLoadRu from './event.load.ru.mdx'
@@ -34,6 +38,14 @@ export const wikiMdxImage: StorybookComponentsMdxItem = {
       en: adaptiveEn,
       ru: adaptiveRu
     },
+    'img-tag': {
+      en: imgTagEn,
+      ru: imgTagRu
+    },
+    'flag': {
+      en: flagEn,
+      ru: flagRu
+    },
     '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>
+```