@dxtmisha/wiki 0.24.3 → 0.39.1

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

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

@@ -0,0 +1,30 @@
+## Input Masking
+
+Properties `mask`, `maskVisible`, `maskNone`, and `maskAttrs` are designed to manage formatted input with automatic separator insertion and character control at specified positions.
+
+**Properties:**
+
+- `mask` — mask template as a string (e.g., `+1 (***) ***-****`)
+- `maskVisible` — controls placeholder characters display (default `true`)
+- `maskNone` — completely disables the mask
+- `maskAttrs` — object with extended mask settings
+
+Properties work together: `mask` defines the formatting structure, where special character (default `*`) defines positions for digit input, and other characters (spaces, brackets, hyphens) are automatically inserted as fixed separators. `maskVisible` controls the display of unfilled positions, where when set to `true` they are displayed with placeholder characters `_`, and when `false` only entered characters with separators are shown. `maskNone` allows completely disabling masking logic, converting the field to a regular text input. `maskAttrs` provides access to extended settings, allowing configuration of special characters (`special`), regular expressions for validation (`match`), custom placeholder characters (`view`), validation patterns (`pattern`), and rubber groups (`rubber`).
+
+```html
+<script setup>
+import { ref } from 'vue'
+const value = ref('')
+</script>
+
+<template>
+  <!-- US Phone -->
+  <Input v-model="value" type="tel" mask="+1 (###) ###-####" placeholder="+1 (555) 000-0000" label="Phone" />
+
+  <!-- Credit Card -->
+  <Input v-model="value" type="text" mask="#### #### #### ####" placeholder="0000 0000 0000 0000" label="Card" />
+
+  <!-- Without placeholder display -->
+  <Input v-model="value" type="tel" mask="+1 (###) ###-####" :mask-visible="false" label="No placeholder" />
+</template>
+```

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

@@ -0,0 +1,30 @@
+## Маскирование ввода
+
+Свойства `mask`, `maskVisible`, `maskNone` и `maskAttrs` предназначены для управления форматированным вводом с автоматической подстановкой разделителей и контролем символов в заданных позициях.
+
+**Свойства:**
+
+- `mask` — шаблон маски в виде строки (например, `+1 (***) ***-****`)
+- `maskVisible` — управляет отображением символов-заполнителей (по умолчанию `true`)
+- `maskNone` — полностью отключает маску
+- `maskAttrs` — объект с расширенными настройками маски
+
+Свойства работают совместно: `mask` определяет структуру форматирования, где специальный символ (по умолчанию `*`) определяет позиции для ввода цифр, а остальные символы (пробелы, скобки, дефисы) автоматически подставляются как фиксированные разделители. `maskVisible` управляет отображением незаполненных позиций, где при значении `true` они отображаются символами-заполнителями `_`, а при `false` показываются только введённые символы с разделителями. `maskNone` позволяет полностью отключить логику маскирования, превращая поле в обычный текстовый инпут. `maskAttrs` обеспечивает доступ к расширенным настройкам, позволяя настраивать специальные символы (`special`), регулярные выражения для проверки (`match`), кастомные символы-заполнители (`view`), паттерны валидации (`pattern`) и резиновые группы (`rubber`).
+
+```html
+<script setup>
+import { ref } from 'vue'
+const value = ref('')
+</script>
+
+<template>
+  <!-- Телефон США -->
+  <Input v-model="value" type="tel" mask="+1 (###) ###-####" placeholder="+1 (555) 000-0000" label="Телефон" />
+
+  <!-- Кредитная карта -->
+  <Input v-model="value" type="text" mask="#### #### #### ####" placeholder="0000 0000 0000 0000" label="Карта" />
+
+  <!-- Без отображения символов-заполнителей -->
+  <Input v-model="value" type="tel" mask="+1 (###) ###-####" :mask-visible="false" label="Без заполнителя" />
+</template>
+```

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

@@ -0,0 +1,41 @@
+## Working with Numbers
+
+Properties `type`, `fraction`, `language`, `min`, `max`, `step`, `arrow`, `arrowStep`, and `align` are designed to manage numeric value input and formatting with localization support and interactive control elements.
+
+**Properties:**
+
+- `type` — input type (`number` or `number-format`)
+- `fraction` — number of decimal places (number, `true` for dynamic fractional part)
+- `language` — locale code for formatting (e.g., `ru-RU`, `en-US`)
+- `min` — minimum allowed value
+- `max` — maximum allowed value
+- `step` — step size for keyboard input
+- `arrow` — control arrows type (`auto`, `stepper`, `carousel`, `none`)
+- `arrowStep` — step size for arrow clicks
+- `align` — arrows placement (`left`, `center`, `right`)
+
+Properties work together: `type` defines the base input mode, where `number` activates simple numeric input with basic validation without formatting, and `number-format` enables automatic formatting with thousands separators and decimal places depending on locale. `language` defines regional rules for thousands separators (space, comma, period) and decimal separator (period or comma). Properties `min` and `max` activate built-in range validation. `step` defines increment/decrement magnitude when using arrow keys up/down and Page Up/Down. Properties `arrow` and `arrowStep` add visual control elements (± buttons or < > arrows) with customizable step size, where if `arrowStep` is not specified, `step` value is used. `align` controls arrows placement in the input field.
+
+```html
+<script setup>
+import { ref } from 'vue'
+const value = ref('1234567.89')
+</script>
+
+<template>
+  <!-- Simple numeric input -->
+  <Input v-model="value" type="number" label="Number" />
+
+  <!-- Formatted number with locale -->
+  <Input v-model="value" type="number-format" language="en-US" label="Formatted" />
+
+  <!-- With range constraints -->
+  <Input v-model="value" type="number" :min="0" :max="100" label="From 0 to 100" />
+
+  <!-- With step and stepper arrows -->
+  <Input v-model="value" type="number" arrow="stepper" :step="5" :arrow-step="10" label="Step 5/10" />
+
+  <!-- With center alignment -->
+  <Input v-model="value" type="number-format" align="center" :fraction="2" label="Centered" />
+</template>
+```

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

@@ -0,0 +1,41 @@
+## Работа с числами
+
+Свойства `type`, `fraction`, `language`, `min`, `max`, `step`, `arrow`, `arrowStep` и `align` предназначены для управления вводом и форматированием числовых значений с поддержкой локализации и интерактивных элементов управления.
+
+**Свойства:**
+
+- `type` — тип инпута (`number` или `number-format`)
+- `fraction` — количество знаков после запятой (число, `true` для динамической дробной части)
+- `language` — код локали для форматирования (например, `ru-RU`, `en-US`)
+- `min` — минимальное допустимое значение
+- `max` — максимальное допустимое значение
+- `step` — шаг изменения при клавиатурном вводе
+- `arrow` — тип управляющих стрелок (`auto`, `stepper`, `carousel`, `none`)
+- `arrowStep` — шаг изменения при нажатии на стрелки
+- `align` — расположение стрелок (`left`, `center`, `right`)
+
+Свойства работают совместно: `type` определяет базовый режим ввода, где `number` активирует простой числовой ввод с базовой валидацией без форматирования, а `number-format` включает автоматическое форматирование с разделителями тысяч и десятичными знаками в зависимости от локали. `language` определяет региональные правила для разделителей тысяч (пробел, запятая, точка) и десятичного разделителя (точка или запятая). Свойства `min` и `max` активируют встроенную валидацию диапазона. `step` определяет величину инкремента/декремента при использовании клавиш стрелок вверх/вниз и Page Up/Down. Свойства `arrow` и `arrowStep` добавляют визуальные элементы управления (кнопки ± или стрелки < >) с настраиваемым шагом изменения, где если `arrowStep` не указан, используется значение `step`. `align` управляет расположением стрелок в поле ввода.
+
+```html
+<script setup>
+import { ref } from 'vue'
+const value = ref('1234567.89')
+</script>
+
+<template>
+  <!-- Простой числовой ввод -->
+  <Input v-model="value" type="number" label="Число" />
+
+  <!-- Форматированное число с локалью -->
+  <Input v-model="value" type="number-format" language="ru-RU" label="Форматированное" />
+
+  <!-- С ограничениями диапазона -->
+  <Input v-model="value" type="number" :min="0" :max="100" label="От 0 до 100" />
+
+  <!-- С шагом и стрелками stepper -->
+  <Input v-model="value" type="number" arrow="stepper" :step="5" :arrow-step="10" label="Шаг 5/10" />
+
+  <!-- С выравниванием по центру -->
+  <Input v-model="value" type="number-format" align="center" :fraction="2" label="По центру" />
+</template>
+```

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

@@ -0,0 +1,26 @@
+## Input Field Type
+
+The `type` property defines the type and behavior of the Input field.
+
+**Available values:**
+
+- `'text'` — standard text field (default value)
+- `'search'` — search field with quick clear functionality
+- `'number'` — numeric field with basic number validation
+- `'number-format'` — numeric field with formatting (thousands separators)
+- `'currency'` — field for currency input with currency formatting
+- `'email'` — field for email input with corresponding validation
+- `'password'` — field for password input (hides characters)
+- `'datetime'` — field for date and time input
+- `'date'` — field for date input
+- `'year-month'` — field for year and month input
+- `'time'` — field for time input
+- `'hour-minute'` — field for hours and minutes input
+- `'tel'` — field for telephone number input
+- `'url'` — field for web address input with URL validation
+- `'checkbox'` — checkbox (used for boolean values)
+- `'radio'` — radio button (used for selecting one option from a group)
+
+Each type activates corresponding validation, formatting, and input mechanisms. For the `password` type, a visibility toggle function is available through a special icon. Types `number`, `number-format`, and `currency` automatically enable formatting and restrict input to numeric values only. Types `email`, `tel`, and `url` apply built-in HTML5 validation and set the appropriate `inputMode` for mobile keyboards. Date and time related types (`datetime`, `date`, `year-month`, `time`, `hour-minute`) activate special input masks and value formatting.
+
+

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

@@ -0,0 +1,26 @@
+## Тип поля ввода
+
+Свойство `type` определяет тип и поведение поля ввода Input.
+
+**Возможные значения:**
+
+- `'text'` — обычное текстовое поле (значение по умолчанию)
+- `'search'` — поле для поиска с возможностью быстрой очистки
+- `'number'` — числовое поле с базовой валидацией чисел
+- `'number-format'` — числовое поле с форматированием (разделители тысяч)
+- `'currency'` — поле для ввода денежных значений с форматированием валюты
+- `'email'` — поле для ввода электронной почты с соответствующей валидацией
+- `'password'` — поле для ввода пароля (скрывает символы)
+- `'datetime'` — поле для ввода даты и времени
+- `'date'` — поле для ввода даты
+- `'year-month'` — поле для ввода года и месяца
+- `'time'` — поле для ввода времени
+- `'hour-minute'` — поле для ввода часов и минут
+- `'tel'` — поле для ввода телефонного номера
+- `'url'` — поле для ввода веб-адреса с валидацией URL
+- `'checkbox'` — чекбокс (используется для булевых значений)
+- `'radio'` — радиокнопка (используется для выбора одного варианта из группы)
+
+Каждый тип активирует соответствующие механизмы валидации, форматирования и ввода. Для типа `password` доступна функция переключения видимости через специальную иконку. Типы `number`, `number-format` и `currency` автоматически включают форматирование и ограничивают ввод только числовыми значениями. Типы `email`, `tel` и `url` применяют встроенную HTML5-валидацию и устанавливают соответствующий `inputMode` для мобильных клавиатур. Типы, связанные с датой и временем (`datetime`, `date`, `year-month`, `time`, `hour-minute`), активируют специальные маски ввода и форматирование значений.
+
+

package/src/media/mdx/Input/wikiMdxInput.ts

@@ -0,0 +1,49 @@
+import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
+
+import currencyEn from './currency.en.mdx'
+import currencyRu from './currency.ru.mdx'
+import dateEn from './date.en.mdx'
+import dateRu from './date.ru.mdx'
+import inputEn from './input.en.mdx'
+import inputRu from './input.ru.mdx'
+import maskEn from './mask.en.mdx'
+import maskRu from './mask.ru.mdx'
+import numberEn from './number.en.mdx'
+import numberRu from './number.ru.mdx'
+import typeEn from './type.en.mdx'
+import typeRu from './type.ru.mdx'
+
+/**
+ * MDX files for Input component
+ *
+ * MDX файлы для компонента Input
+ */
+export const wikiMdxInput: StorybookComponentsMdxItem = {
+  name: 'Input',
+  descriptions: {
+    currency: {
+      en: currencyEn,
+      ru: currencyRu
+    },
+    date: {
+      en: dateEn,
+      ru: dateRu
+    },
+    input: {
+      en: inputEn,
+      ru: inputRu
+    },
+    mask: {
+      en: maskEn,
+      ru: maskRu
+    },
+    number: {
+      en: numberEn,
+      ru: numberRu
+    },
+    type: {
+      en: typeEn,
+      ru: typeRu
+    }
+  }
+}

package/src/media/mdx/Menu/event.updateValue.en.mdx

@@ -0,0 +1,29 @@
+### `updateValue`
+
+Event fires when the selected value in the menu changes.
+
+**Parameters:**
+- `value?: NumberOrStringOrBoolean` — new selected value
+
+```html
+<script setup>
+const handleUpdateValue = (value) => {
+  console.log('New value:', value)
+  console.log('Value type:', typeof value)
+}
+</script>
+
+<template>
+  <Menu
+    :isSelectedByValue="true"
+    @updateValue="handleUpdateValue"
+  >
+    <template #default>
+      <MenuItem value="item1">Menu Item 1</MenuItem>
+      <MenuItem value="item2">Menu Item 2</MenuItem>
+      <MenuItem value="item3">Menu Item 3</MenuItem>
+    </template>
+  </Menu>
+</template>
+```
+

package/src/media/mdx/Menu/event.updateValue.ru.mdx

@@ -0,0 +1,30 @@
+### `updateValue`
+
+Событие срабатывает при изменении выбранного значения в меню.
+
+**Параметры:**
+- `value?: NumberOrStringOrBoolean` — новое выбранное значение
+
+```html
+<script setup>
+const handleUpdateValue = (value) => {
+  console.log('Новое значение:', value)
+  console.log('Тип значения:', typeof value)
+}
+</script>
+
+<template>
+  <Menu
+    :isSelectedByValue="true"
+    @updateValue="handleUpdateValue"
+  >
+    <template #default>
+      <MenuItem value="item1">Пункт меню 1</MenuItem>
+      <MenuItem value="item2">Пункт меню 2</MenuItem>
+      <MenuItem value="item3">Пункт меню 3</MenuItem>
+    </template>
+  </Menu>
+</template>
+```
+
+

package/src/media/mdx/Menu/expose.navigation.en.mdx

@@ -0,0 +1,12 @@
+### `previous()`
+
+Moves the selection to the previous menu item based on the `step` property value.
+
+**Returns:** `void`
+
+### `next()`
+
+Moves the selection to the next menu item based on the `step` property value.
+
+**Returns:** `void`
+

package/src/media/mdx/Menu/expose.navigation.ru.mdx

@@ -0,0 +1,12 @@
+### `previous()`
+
+Перемещает выбор на предыдущий элемент меню на основе значения свойства `step`.
+
+**Возвращает:** `void`
+
+### `next()`
+
+Перемещает выбор на следующий элемент меню на основе значения свойства `step`.
+
+**Возвращает:** `void`
+

package/src/media/mdx/Menu/navigation.en.mdx

@@ -0,0 +1,56 @@
+## Menu item navigation
+
+Methods `previous()` and `next()` are designed for programmatic movement through menu items based on current selection and the `step` property.
+
+**Methods:**
+
+- `previous()` — moves selection to the previous item (backwards by `step` positions)
+- `next()` — moves selection to the next item (forwards by `step` positions)
+- `step` — number of items to skip during navigation (default: 1)
+
+The methods work together with reactive `selected` state: calling `previous()` or `next()` automatically calculates the new position relative to the currently selected item. If no item is selected, the methods select the first available item. When reaching list boundaries (first or last item), navigation stops at the boundary item, preventing overflow beyond the list.
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const menuRef = ref()
+const selected = ref('item2')
+</script>
+
+<template>
+  <!-- Call via ref -->
+  <button @click="menuRef?.previous()">Previous</button>
+  <button @click="menuRef?.next()">Next</button>
+
+  <Menu
+    ref="menuRef"
+    v-model:selected="selected"
+    :list="[
+      { label: 'Item 1', value: 'item1' },
+      { label: 'Item 2', value: 'item2' },
+      { label: 'Item 3', value: 'item3' }
+    ]"
+    :step="1"
+  />
+
+  <!-- Navigation in control slot -->
+  <Menu v-model:selected="selected" :list="items">
+    <template #control="{ previous, next, selectedNames }">
+      <button @click="previous">◀</button>
+      <span>{{ selectedNames[0] }}</span>
+      <button @click="next">▶</button>
+    </template>
+  </Menu>
+
+  <!-- With custom step -->
+  <Menu
+    ref="menuRef"
+    v-model:selected="selected"
+    :list="items"
+    :step="2"
+  />
+</template>
+```
+
+