@dxtmisha/wiki 0.24.3 → 0.25.1

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

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

@@ -0,0 +1,56 @@
+## Навигация по элементам меню
+
+Методы `previous()` и `next()` предназначены для программного перемещения по элементам меню на основе текущего выбора и свойства `step`.
+
+**Методы:**
+
+- `previous()` — перемещает выбор на предыдущий элемент (назад на `step` позиций)
+- `next()` — перемещает выбор на следующий элемент (вперед на `step` позиций)
+- `step` — количество элементов для пропуска при навигации (по умолчанию: 1)
+
+Методы работают совместно с реактивным состоянием `selected`: при вызове `previous()` или `next()` происходит автоматический расчёт новой позиции относительно текущего выделенного элемента. Если элемент не выбран, методы выбирают первый доступный элемент. При достижении границ списка (первый или последний элемент) навигация останавливается на граничном элементе, предотвращая выход за пределы списка.
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const menuRef = ref()
+const selected = ref('item2')
+</script>
+
+<template>
+  <!-- Вызов через ref -->
+  <button @click="menuRef?.previous()">Назад</button>
+  <button @click="menuRef?.next()">Вперед</button>
+
+  <Menu
+    ref="menuRef"
+    v-model:selected="selected"
+    :list="[
+      { label: 'Элемент 1', value: 'item1' },
+      { label: 'Элемент 2', value: 'item2' },
+      { label: 'Элемент 3', value: 'item3' }
+    ]"
+    :step="1"
+  />
+
+  <!-- Навигация в слоте control -->
+  <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>
+
+  <!-- С пользовательским шагом -->
+  <Menu
+    ref="menuRef"
+    v-model:selected="selected"
+    :list="items"
+    :step="2"
+  />
+</template>
+```
+
+

package/src/media/mdx/Menu/slots.control.en.mdx

@@ -0,0 +1,65 @@
+### `control`
+
+Slot for placing the menu control element (trigger).
+
+**Parameters:**
+- `props: MenuControlItem` — object with menu control data
+  - `onclick` — function to toggle menu open/close
+  - `isSelected` — computed boolean indicating if any item is selected
+  - `selectedNames` — computed array of selected item labels
+  - `selectedValues` — computed array of selected item values
+  - `selectedList` — computed array of selected list items
+  - `loading` — ref indicating AJAX loading state
+  - `previous()` — method to navigate to previous item(s)
+  - `next()` — method to navigate to next item(s)
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const isOpen = ref(false)
+const menuItems = ref([
+  { label: 'Item 1', value: '1' },
+  { label: 'Item 2', value: '2' },
+  { label: 'Item 3', value: '3' }
+])
+</script>
+
+<template>
+  <Menu v-model:open="isOpen" :list="menuItems">
+    <template #control="{ onclick, isSelected, selectedNames }">
+      <button @click="onclick">
+        {{ isSelected ? selectedNames.join(', ') : 'Select items' }}
+      </button>
+    </template>
+  </Menu>
+</template>
+```
+
+**Navigation Example:**
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const selected = ref('item1')
+const menuItems = ref([
+  { label: 'Item 1', value: 'item1' },
+  { label: 'Item 2', value: 'item2' },
+  { label: 'Item 3', value: 'item3' }
+])
+</script>
+
+<template>
+  <Menu v-model:selected="selected" :list="menuItems">
+    <template #control="{ previous, next, selectedNames }">
+      <div class="navigation-control">
+        <button @click="previous">◀</button>
+        <span>{{ selectedNames[0] }}</span>
+        <button @click="next">▶</button>
+      </div>
+    </template>
+  </Menu>
+</template>
+```
+

package/src/media/mdx/Menu/slots.control.ru.mdx

@@ -0,0 +1,65 @@
+### `control`
+
+Слот для размещения элемента управления (триггера) меню.
+
+**Параметры:**
+- `props: MenuControlItem` — объект с данными управления меню
+  - `onclick` — функция для переключения открытия/закрытия меню
+  - `isSelected` — computed boolean, указывающий, выбран ли какой-либо элемент
+  - `selectedNames` — computed массив меток выбранных элементов
+  - `selectedValues` — computed массив значений выбранных элементов
+  - `selectedList` — computed массив выбранных элементов списка
+  - `loading` — ref, указывающий на состояние загрузки AJAX
+  - `previous()` — метод для перехода к предыдущему элементу(ам)
+  - `next()` — метод для перехода к следующему элементу(ам)
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const isOpen = ref(false)
+const menuItems = ref([
+  { label: 'Элемент 1', value: '1' },
+  { label: 'Элемент 2', value: '2' },
+  { label: 'Элемент 3', value: '3' }
+])
+</script>
+
+<template>
+  <Menu v-model:open="isOpen" :list="menuItems">
+    <template #control="{ onclick, isSelected, selectedNames }">
+      <button @click="onclick">
+        {{ isSelected ? selectedNames.join(', ') : 'Выбрать элементы' }}
+      </button>
+    </template>
+  </Menu>
+</template>
+```
+
+**Пример навигации:**
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const selected = ref('item1')
+const menuItems = ref([
+  { label: 'Элемент 1', value: 'item1' },
+  { label: 'Элемент 2', value: 'item2' },
+  { label: 'Элемент 3', value: 'item3' }
+])
+</script>
+
+<template>
+  <Menu v-model:selected="selected" :list="menuItems">
+    <template #control="{ previous, next, selectedNames }">
+      <div class="navigation-control">
+        <button @click="previous">◀</button>
+        <span>{{ selectedNames[0] }}</span>
+        <button @click="next">▶</button>
+      </div>
+    </template>
+  </Menu>
+</template>
+```
+

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

@@ -1,10 +1,3 @@
-### `control`
-
-Slot for placing the menu control element (trigger).
-
-**Parameters:**
-- `props: MenuControlItem` — object with menu control data
-
 ### `title`
 
 Slot for placing the menu window title.
@@ -35,28 +28,13 @@ Slot for placing contextual area below the menu list (hints, final actions).
 
 ```html
 <script setup>
-import { ref } from 'vue'
-
-const isOpen = ref(false)
-const menuItems = ref([
-  { label: 'Item 1', value: '1' },
-  { label: 'Item 2', value: '2' },
-  { label: 'Item 3', value: '3' }
-])
-
 const handleSubmit = (values) => {
   console.log('Selected values:', values)
 }
 </script>
 
 <template>
-  <Menu v-model:open="isOpen" :list="menuItems">
-    <template #control="{ onclick, isSelected, selectedNames }">
-      <button @click="onclick">
-        {{ isSelected ? selectedNames.join(', ') : 'Select items' }}
-      </button>
-    </template>
-
+  <Component>
     <template #title="{ selectedList }">
       <h3>Select Items</h3>
       <span v-if="selectedList.length">
@@ -77,7 +55,7 @@ const handleSubmit = (values) => {
         Apply
       </button>
     </template>
-  </Menu>
+  </Component>
 </template>
 ```