@dxtmisha/wiki 0.39.4 → 0.39.5

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/size.en.mdx

@@ -0,0 +1,32 @@
+## Image display control
+
+The `size`, `coordinator`, `x`, and `y` properties allow you to precisely control image scaling, visible area, and positioning within the container.
+
+**Properties:**
+
+- `size` — scaling and fill mode of the image (`auto`, `contain`, `cover`)
+- `coordinator` — array of coordinates for cropping the display area `[left, top, right, bottom]` in percentages
+- `x` — horizontal offset of the image (pixels, percentages)
+- `y` — vertical offset of the image (pixels, percentages)
+
+Properties work together or individually. The `size` value defines the scaling mode: `auto` uses the original size, `contain` fits the image completely, `cover` fills the container with possible cropping. The `coordinator` property sets the visible area by cropping the image at specified coordinates. The `x` and `y` parameters shift the image relative to the container for precise positioning.
+
+```html
+<!-- Scaling mode -->
+<Image value="image.png" size="contain" />
+
+<!-- Cropping by coordinates -->
+<Image value="image.png" :coordinator="[10, 20, 100, 80]" />
+
+<!-- Position offset -->
+<Image value="image.png" x="15" y="-10" />
+
+<!-- Combined parameters -->
+<Image
+  value="image.png"
+  size="cover"
+  :coordinator="[0, 0, 100, 50]"
+  x="10"
+  y="5"
+/>
+```

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

@@ -0,0 +1,32 @@
+## Управление отображением изображения
+
+Свойства `size`, `coordinator`, `x` и `y` позволяют детально управлять масштабированием, областью видимости и позиционированием изображения внутри контейнера.
+
+**Свойства:**
+
+- `size` — режим масштабирования и заполнения изображения (`auto`, `contain`, `cover`)
+- `coordinator` — массив координат для обрезки области отображения `[left, top, right, bottom]` в процентах
+- `x` — смещение изображения по горизонтали (пиксели, проценты)
+- `y` — смещение изображения по вертикали (пиксели, проценты)
+
+Свойства работают совместно или по отдельности. Значение `size` определяет режим масштабирования: `auto` использует исходный размер, `contain` вписывает изображение полностью, `cover` заполняет контейнер с возможной обрезкой. Свойство `coordinator` задаёт видимую область, обрезая изображение по указанным координатам. Параметры `x` и `y` смещают изображение относительно контейнера для точного позиционирования.
+
+```html
+<!-- Режим масштабирования -->
+<Image value="image.png" size="contain" />
+
+<!-- Обрезка по координатам -->
+<Image value="image.png" :coordinator="[10, 20, 100, 80]" />
+
+<!-- Смещение позиции -->
+<Image value="image.png" x="15" y="-10" />
+
+<!-- Комбинация параметров -->
+<Image
+  value="image.png"
+  size="cover"
+  :coordinator="[0, 0, 100, 50]"
+  x="10"
+  y="5"
+/>
+```

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

@@ -0,0 +1,23 @@
+## Main value
+
+The `value` property defines the image content. This universal property supports multiple source types for maximum flexibility.
+
+**Supported types:**
+
+- **Icon name** — built-in or custom icon from the design system
+- **Image URL** — direct link to file (PNG, JPG, SVG, GIF, WebP, etc.)
+- **File object** — JavaScript File object obtained from `<input type="file">`
+- **PDF document** — direct link to PDF file with automatic display
+
+The component automatically detects the source type and selects the optimal display method. When passing a File object, the content is read and previewed. The property is reactive and supports dynamic updates.
+
+```html
+<!-- Icon by name -->
+<Image value="icon-user" />
+
+<!-- Image by URL -->
+<Image value="https://example.com/image.png" />
+
+<!-- User file -->
+<Image :value="fileFromInput" />
+```

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

@@ -0,0 +1,23 @@
+## Основное значение
+
+Свойство `value` определяет контент изображения. Это универсальное свойство, поддерживающее несколько типов источников для максимальной гибкости.
+
+**Поддерживаемые типы:**
+
+- **Имя иконки** — встроенная или пользовательская иконка из системы дизайна
+- **URL изображения** — прямая ссылка на файл (PNG, JPG, SVG, GIF, WebP и др.)
+- **Объект File** — JavaScript-объект File, полученный из `<input type="file">`
+- **PDF-документ** — прямая ссылка на PDF-файл с автоматическим отображением
+
+Компонент автоматически определяет тип источника и выбирает оптимальный способ отображения. При передаче объекта File происходит чтение и предпросмотр содержимого. Свойство реактивно и поддерживает динамическое обновление.
+
+```html
+<!-- Иконка по имени -->
+<Image value="icon-user" />
+
+<!-- Изображение по URL -->
+<Image value="https://example.com/image.png" />
+
+<!-- Файл от пользователя -->
+<Image :value="fileFromInput" />
+```

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

@@ -0,0 +1,58 @@
+import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
+
+import imageEn from './image.en.mdx'
+import imageRu from './image.ru.mdx'
+import valueEn from './value.en.mdx'
+import valueRu from './value.ru.mdx'
+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'
+
+import exposeEn from './expose.en.mdx'
+import exposeRu from './expose.ru.mdx'
+
+export const wikiMdxImage: StorybookComponentsMdxItem = {
+  name: 'Image',
+  descriptions: {
+    'image': {
+      en: imageEn,
+      ru: imageRu
+    },
+    'value': {
+      en: valueEn,
+      ru: valueRu
+    },
+    'size': {
+      en: sizeEn,
+      ru: sizeRu
+    },
+    'adaptive': {
+      en: adaptiveEn,
+      ru: adaptiveRu
+    },
+    'img-tag': {
+      en: imgTagEn,
+      ru: imgTagRu
+    },
+    'flag': {
+      en: flagEn,
+      ru: flagRu
+    },
+    'event.load': {
+      en: eventLoadEn,
+      ru: eventLoadRu
+    },
+    'expose': {
+      en: exposeEn,
+      ru: exposeRu
+    }
+  }
+}

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>
+```
+