@dxtmisha/wiki 0.24.2 → 0.25.1

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

@@ -1,75 +1,21 @@
 ## Шаблон маски
 
-Свойство `mask` определяет шаблон для структурированного ввода данных с автоматическим форматированием в реальном времени. Обеспечивает направленный пользовательский ввод с предотвращением ошибок формата.
+Свойство `mask` определяет шаблон для структурированного ввода данных с автоматическим форматированием в реальном времени.
 
-### Основные возможности
+**Возможные значения:**
 
-- **Автоматическое форматирование**: Добавляет разделители и литеральные символы во время набора
-- **Множественные шаблоны**: Поддержка массива масок с автоматическим выбором наиболее подходящей
-- **Специальные символы**: Настраиваемые позиции для ввода через свойство `special`
-- **Предотвращение ошибок**: Ограничивает ввод только допустимыми символами в соответствующих позициях
-- **Интеграция валидации**: Совместная работа с системой проверки данных через `pattern` и `check`
+- `string` — одиночная маска для фиксированного формата
+- `string[]` — массив масок для поддержки множественных форматов с автоматическим выбором
 
-### Тип значения
+В шаблоне используются два типа символов: специальные символы (по умолчанию `*`) обозначают позиции для пользовательского ввода, а литеральные символы вставляются автоматически и не могут быть изменены. Компонент автоматически добавляет разделители во время набора и ограничивает ввод только допустимыми символами в соответствующих позициях. При использовании массива масок система автоматически выбирает наиболее подходящий шаблон на основе введённых данных. Работает совместно с системой валидации через свойства `pattern` и `check`. Для встроенных типов (`currency`, `number`, `date`) маски генерируются автоматически на основе региональных настроек.
 
-```typescript
-type MaskList = string | string[]
-```
-
-- **string** — одиночная маска для фиксированного формата
-- **string[]** — массив масок для поддержки множественных форматов
-
-### Синтаксис маски
-
-В шаблоне маски используются два типа символов:
-
-- **Специальные символы** (по умолчанию `*`) — обозначают позиции для пользовательского ввода
-- **Литеральные символы** — вставляются автоматически и не могут быть изменены пользователем
-
-### Примеры использования
-
-```javascript
-// Российский телефон
-mask: "+7 *** *** ** **"
-
-// Банковская карта
-mask: "**** **** **** ****"
-
-// Дата в российском формате
-mask: "**.**.****"
+```html
+<!-- Российский телефон -->
+<Mask mask="+7 *** *** ** **" />
 
-// Множественные форматы телефонов
-mask: [
-  "+7 *** *** ** **",     // +7 999 123 45 67
-  "8 *** *** ** **"       // 8 999 123 45 67
-]
+<!-- Банковская карта -->
+<Mask mask="**** **** **** ****" />
 
-// Почтовый индекс
-mask: "******"
+<!-- Множественные форматы -->
+<Mask :mask="['+7 *** *** ** **', '8 *** *** ** **']" />
 ```
-
-### Автоматический выбор маски
-
-При использовании массива масок система автоматически выбирает наиболее подходящий шаблон на основе введённых данных:
-
-```javascript
-mask: [
-  "+7 *** *** ** **",     // Выберется при вводе +7
-  "8 *** *** ** **",      // Выберется при вводе 8
-  "*** *** ** **"         // Резервный вариант
-]
-```
-
-### Взаимодействие с другими свойствами
-
-- **special** — определяет, какие символы считаются специальными и их поведение
-- **pattern** — задаёт паттерны валидации для групп специальных символов
-- **check** — применяет дополнительную валидацию к полному значению после заполнения маски
-- **type** — для встроенных типов (`currency`, `number`, `date`) автоматически генерирует соответствующие маски
-
-### Рекомендации
-
-- Используйте понятные разделители для улучшения читаемости (пробелы, дефисы, скобки)
-- При поддержке нескольких форматов располагайте более специфичные маски первыми в массиве
-- Комбинируйте с валидацией через `pattern` и `check` для полного контроля ввода
-- Для сложных случаев настраивайте специальные символы через свойство `special`

package/src/media/mdx/Mask/match.en.mdx

@@ -1,36 +1,28 @@
-## Global character pattern (match)
+## Input character validation
 
-The `match` property defines a global pattern for allowed characters during input. Applied when a group doesn't override this rule with its own pattern.
+The `match` property defines a regular expression for checking the validity of entered characters.
 
-### Validation priority
+**Possible values:**
 
-1. **Local group pattern** (`special[GROUP].match`)
-2. **Global pattern** (`match`)
-3. **Default** (`/[0-9]/`)
+- `RegExp` — regular expression (default `/[0-9]/`)
+- `string` — string converted to regular expression
 
-### Value types
-
-```ts
-type MaskMatchItem = RegExp | string
-
-match: /[A-F0-9]/        // RegExp object
-match: "[A-F0-9]"        // String (converted to RegExp)
-match: "\\d"             // With escaping
-```
-
-### Examples
+Checks each character during input. Characters that don't match the expression are ignored. Local `match` in group settings (`special[group].match`) takes priority over global. Differs from `pattern` in that `match` is a simple regular expression check, while `pattern` can be a function with access to mask state.
 
 ```html
-<!-- HEX characters -->
-<Mask :mask="'***-***'" match="[A-F0-9]" />
+<!-- Digits only (default) -->
+<Mask mask="***-***" />
 
-<!-- Letters only -->
-<Mask :mask="'***-***'" match="[A-Za-z]" />
+<!-- HEX characters -->
+<Mask mask="***-***" :match="/[A-F0-9]/i" />
 
-<!-- Combined with groups -->
+<!-- Different rules for groups -->
 <Mask
-  :mask="'***-###'"
-  :special="{ '*': {}, '#': { match: '[A-Za-z]' } }"
+  mask="***-###"
   match="\\d"
+  :special="{
+    '*': {},
+    '#': { match: /[A-Z]/ }
+  }"
 />
 ```

package/src/media/mdx/Mask/match.ru.mdx

@@ -1,36 +1,28 @@
-## Глобальный паттерн символов (match)
+## Валидация вводимых символов
 
-Свойство `match` задаёт глобальный паттерн допустимых символов при вводе. Применяется, когда группа не переопределяет это правило собственным паттерном.
+Свойство `match` определяет регулярное выражение для проверки допустимости вводимых символов.
 
-### Приоритет проверки
+**Возможные значения:**
 
-1. **Локальный паттерн группы** (`special[ГРУППА].match`)
-2. **Глобальный паттерн** (`match`)
-3. **По умолчанию** (`/[0-9]/`)
+- `RegExp` — регулярное выражение (по умолчанию `/[0-9]/`)
+- `string` — строка, преобразуется в регулярное выражение
 
-### Типы значений
-
-```ts
-type MaskMatchItem = RegExp | string
-
-match: /[A-F0-9]/        // RegExp объект
-match: "[A-F0-9]"        // Строка (конвертируется в RegExp)
-match: "\\d"             // С экранированием
-```
-
-### Примеры
+Проверяет каждый символ при вводе. Символы, не соответствующие выражению, игнорируются. Локальный `match` в настройках группы (`special[группа].match`) имеет приоритет над глобальным. Отличается от `pattern` тем, что `match` — простая проверка регулярным выражением, а `pattern` может быть функцией с доступом к состоянию маски.
 
 ```html
-<!-- HEX-символы -->
-<Mask :mask="'***-***'" match="[A-F0-9]" />
+<!-- Только цифры (по умолчанию) -->
+<Mask mask="***-***" />
 
-<!-- Только буквы -->
-<Mask :mask="'***-***'" match="[A-Za-z]" />
+<!-- HEX-символы -->
+<Mask mask="***-***" :match="/[A-F0-9]/i" />
 
-<!-- Комбинирование с группами -->
+<!-- Разные правила для групп -->
 <Mask
-  :mask="'***-###'"
-  :special="{ '*': {}, '#': { match: '[A-Za-z]' } }"
+  mask="***-###"
   match="\\d"
+  :special="{
+    '*': {},
+    '#': { match: /[A-Z]/ }
+  }"
 />
 ```

package/src/media/mdx/Mask/numberTypes.en.mdx

@@ -2,80 +2,92 @@
 
 Numeric types in Mask provide specialized formatting and validation for working with numbers, currencies, and financial data.
 
-### Available types
+**Available types:**
 
-- **number** — Simple numeric mask with rubber structure
-- **number-format** — Formatted numbers with thousand separators and localization
-- **currency** — Currency mask with automatic currency symbol
+- `number` — simple numeric mask with rubber structure
+- `number-format` — formatted numbers with thousand separators
+- `currency` — currency mask with automatic currency symbol
 
-### Features
+All numeric types automatically create rubber masks with variable length, ignoring the `mask` property. Numeric character validation occurs at input level, negative values and constraints via `min`/`max` are supported.
 
-**number:**
-- Rubber mask, numeric character validation
-- Support for negative values and `min`/`max` constraints
-- Decimal places configuration via `fraction`
+The `number-format` and `currency` types apply localized thousand separators according to `language` (space for Russian, comma for English). Decimal places are configured via `fraction` — number for exact digit count, `true` for auto-detection, `false` for integers.
 
-**number-format:**
-- Automatic thousand separators
-- Format localization (depends on `language`)
-- Rubber structure for large numbers
+```html
+<!-- Simple number -->
+<Mask type="number" />
 
-**currency:**
-- Automatic currency symbol and localized separators
-- Option to hide currency symbol (`currencyHide`)
-- Support for various currencies (RUB, USD, EUR)
+<!-- Formatted number -->
+<Mask type="number-format" language="en-US" :fraction="2" />
 
-### Decimal places configuration (fraction)
+<!-- Currency -->
+<Mask type="currency" currency="USD" language="en-US" />
+```
 
-The `fraction` property controls the number of digits after the decimal point:
+### Types
 
-- **number** — exact number of digits (e.g., `:fraction="2"`)
-- **true** — automatic detection based on user input
-- **false/0** — no decimal places
+#### number
 
-### Examples
+Simple numeric mask for entering integers and decimals without formatting. Creates a rubber group with variable length, supports negative values. Decimal separator is determined by locale (dot for English, comma for Russian).
 
-```html
-<!-- Simple number -->
-<Mask type="number" />
+#### number-format
 
-<!-- Number with constraints -->
-<Mask type="number" :min="0" :max="100" :fraction="1" />
+Numeric mask with automatic thousand separators to improve readability of large numbers. Works similarly to `number`, but adds thousand and million separators according to regional settings. Suitable for quantitative indicators and statistics.
 
-<!-- Formatted number (Russian format: 1 234,56) -->
-<Mask type="number-format" language="ru" :fraction="2" />
+#### currency
 
-<!-- Formatted number (US format: 1,234.56) -->
-<Mask type="number-format" language="en-US" :fraction="2" />
+Currency mask with currency symbol and formatting according to regional standards. Automatically adds currency symbol (₽, $, €) and thousand separators. Symbol can be displayed before or after the number depending on locale. The `currencyHide` property allows hiding the currency symbol while keeping the formatting.
 
-<!-- Currency with symbol ($1,234.56) -->
-<Mask type="currency" currency="USD" language="en-US" />
+### Property fraction
 
-<!-- Currency without symbol (1,234.56) -->
-<Mask type="currency" currency="USD" :currencyHide="true" />
+Defines the number of digits after the decimal separator.
 
-<!-- No decimal places -->
-<Mask type="number-format" :fraction="0" />
+**Possible values:**
 
-<!-- High precision -->
-<Mask type="number" :fraction="4" />
+- `number` — exact number of digits (e.g., `2` for two digits)
+- `true` — automatic detection based on user input
+- `false` or `0` — no decimal places (integers only)
+
+```html
+<!-- Two decimal places -->
+<Mask type="number" :fraction="2" />
+
+<!-- Auto-detection -->
+<Mask type="number-format" :fraction="true" />
+
+<!-- Integers only -->
+<Mask type="currency" currency="USD" :fraction="false" />
 ```
 
 ### Localization
 
-Formats automatically adapt to locale:
-- **ru**: space + comma (1 234,56)
-- **en-US**: comma + dot (1,234.56)
-- **de**: dot + comma (1.234.567,89)
+Formats automatically adapt to locale via the `language` property:
+
+**Russian (ru):**
+- Thousand separator: space
+- Decimal separator: comma
+- Example: `1 234 567,89`
+
+**English (en-US):**
+- Thousand separator: comma
+- Decimal separator: dot
+- Example: `1,234,567.89`
 
-### Validation
+**German (de):**
+- Thousand separator: dot
+- Decimal separator: comma
+- Example: `1.234.567,89`
 
-- Character filtering (only numbers and separators)
-- Value range via `min`/`max`
-- Compliance with local standards
+```html
+<Mask type="number-format" language="ru" :fraction="2" />
+<!-- Result: 1 234,56 -->
+
+<Mask type="number-format" language="en-US" :fraction="2" />
+<!-- Result: 1,234.56 -->
 
-### Usage
+<Mask type="currency" currency="EUR" language="de" />
+<!-- Result: 1.234,56 € -->
 
-- **number** — simple numeric fields, percentages, coefficients
-- **number-format** — large numbers, quantitative indicators
-- **currency** — monetary amounts, product prices
+<!-- Currency without symbol -->
+<Mask type="currency" currency="USD" :currencyHide="true" />
+<!-- Result: 1,234.56 -->
+```

package/src/media/mdx/Mask/numberTypes.ru.mdx

@@ -2,80 +2,92 @@
 
 Числовые типы в Mask обеспечивают специализированное форматирование и валидацию для работы с числами, валютами и финансовыми данными.
 
-### Доступные типы
+**Доступные типы:**
 
-- **number** — Простая числовая маска с резиновой структурой
-- **number-format** — Форматированные числа с разделителями разрядов и локализацией
-- **currency** — Валютная маска с автоматическим символом валюты
+- `number` — простая числовая маска с резиновой структурой
+- `number-format` — форматированные числа с разделителями разрядов
+- `currency` — валютная маска с автоматическим символом валюты
 
-### Особенности
+Все числовые типы автоматически создают резиновые маски переменной длины, игнорируя свойство `mask`. Валидация числовых символов происходит на уровне ввода, поддерживаются отрицательные значения и ограничения через `min`/`max`.
 
-**number:**
-- Резиновая маска, валидация числовых символов
-- Поддержка отрицательных значений и ограничений `min`/`max`
-- Настройка дробной части через `fraction`
+Типы `number-format` и `currency` применяют локализованные разделители разрядов согласно `language` (пробел для русского, запятая для английского). Дробная часть настраивается через `fraction` — число для точного количества знаков, `true` для автоопределения, `false` для целых чисел.
 
-**number-format:**
-- Автоматические разделители тысяч
-- Локализация формата (зависит от `language`)
-- Резиновая структура для больших чисел
+```html
+<!-- Простое число -->
+<Mask type="number" />
 
-**currency:**
-- Автоматический символ валюты и локализованные разделители
-- Опция скрытия символа валюты (`currencyHide`)
-- Поддержка различных валют (RUB, USD, EUR)
+<!-- Форматированное число -->
+<Mask type="number-format" language="ru" :fraction="2" />
 
-### Настройка дробной части (fraction)
+<!-- Валюта -->
+<Mask type="currency" currency="RUB" language="ru" />
+```
 
-Свойство `fraction` управляет количеством знаков после запятой:
+### Типы
 
-- **число** — точное количество знаков (например, `:fraction="2"`)
-- **true** — автоматическое определение по вводу пользователя
-- **false/0** — без дробной части
+#### number
 
-### Примеры
+Простая числовая маска для ввода целых и дробных чисел без форматирования. Создаёт резиновую группу переменной длины, поддерживает отрицательные значения. Разделитель дробной части определяется локалью (точка для английского, запятая для русского).
 
-```html
-<!-- Простое число -->
-<Mask type="number" />
+#### number-format
 
-<!-- Число с ограничениями -->
-<Mask type="number" :min="0" :max="100" :fraction="1" />
+Числовая маска с автоматическими разделителями разрядов для улучшения читаемости больших чисел. Работает аналогично `number`, но добавляет разделители тысяч, миллионов согласно региональным настройкам. Подходит для количественных показателей, статистики.
 
-<!-- Форматированное число (русский формат: 1 234,56) -->
-<Mask type="number-format" language="ru" :fraction="2" />
+#### currency
 
-<!-- Форматированное число (американский формат: 1,234.56) -->
-<Mask type="number-format" language="en-US" :fraction="2" />
+Валютная маска с символом валюты и форматированием согласно региональным стандартам. Автоматически добавляет символ валюты (₽, $, €) и разделители разрядов. Символ может отображаться до или после числа в зависимости от локали. Свойство `currencyHide` позволяет скрыть символ валюты, оставив только форматирование.
 
-<!-- Валюта с символом (1 234,56 ₽) -->
-<Mask type="currency" currency="RUB" language="ru" />
+### Свойство fraction
 
-<!-- Валюта без символа (1,234.56) -->
-<Mask type="currency" currency="USD" :currencyHide="true" />
+Определяет количество знаков после десятичного разделителя.
 
-<!-- Без дробной части -->
-<Mask type="number-format" :fraction="0" />
+**Возможные значения:**
 
-<!-- Высокая точность -->
-<Mask type="number" :fraction="4" />
+- `number` — точное количество знаков (например, `2` для двух знаков)
+- `true` — автоматическое определение по вводу пользователя
+- `false` или `0` — без дробной части (только целые числа)
+
+```html
+<!-- Два знака после запятой -->
+<Mask type="number" :fraction="2" />
+
+<!-- Автоопределение -->
+<Mask type="number-format" :fraction="true" />
+
+<!-- Только целые числа -->
+<Mask type="currency" currency="USD" :fraction="false" />
 ```
 
 ### Локализация
 
-Форматы автоматически адаптируются к локали:
-- **ru**: пробел + запятая (1 234,56)
-- **en-US**: запятая + точка (1,234.56)
-- **de**: точка + запятая (1.234.567,89)
+Форматы автоматически адаптируются к локали через свойство `language`:
+
+**Русский (ru):**
+- Разделитель разрядов: пробел
+- Десятичный разделитель: запятая
+- Пример: `1 234 567,89`
+
+**Английский (en-US):**
+- Разделитель разрядов: запятая
+- Десятичный разделитель: точка
+- Пример: `1,234,567.89`
 
-### Валидация
+**Немецкий (de):**
+- Разделитель разрядов: точка
+- Десятичный разделитель: запятая
+- Пример: `1.234.567,89`
 
-- Фильтрация символов (только числа и разделители)
-- Диапазон значений через `min`/`max`
-- Соответствие локальным стандартам
+```html
+<Mask type="number-format" language="ru" :fraction="2" />
+<!-- Результат: 1 234,56 -->
+
+<Mask type="number-format" language="en-US" :fraction="2" />
+<!-- Результат: 1,234.56 -->
 
-### Применение
+<Mask type="currency" currency="EUR" language="de" />
+<!-- Результат: 1.234,56 € -->
 
-- **number** — простые числовые поля, проценты, коэффициенты
-- **number-format** — большие числа, количественные показатели
-- **currency** — денежные суммы, цены товаров
+<!-- Валюта без символа -->
+<Mask type="currency" currency="USD" :currencyHide="true" />
+<!-- Результат: 1,234.56 -->
+```

package/src/media/mdx/Mask/pattern.en.mdx

@@ -1,78 +1,66 @@
 ## Validation and patterns
 
-The `check` and `pattern` properties are designed to control input validation and define allowed characters in the mask.
-
-### Properties
-
-- **pattern** — Defines validation patterns for individual mask groups, specifying allowed characters and rules per group
-- **check** — Global validation pattern applied after mask completion for additional input checking
-
-### FieldPatternItemOrFunction type
-
-Both `pattern` and `check` parameters have the `FieldPatternItemOrFunction` type and accept the following values:
-
-```ts
-type FieldPatternItemOrFunction =
-  | string                                    // RegExp string
-  | Partial<HTMLInputElement>                 // Object with input attributes
-  | ((item: FieldMasks) => FieldPatternItem)  // Pattern generator function
-
-interface FieldMasks {
-  group: string      // Mask group name
-  value: string      // Current group value
-  maxLength: number  // Maximum group length
-  full: boolean      // Group is fully filled
-  end: boolean       // End of input
-  // ...other mask properties
-}
+The `pattern` and `check` properties are designed for managing input validation in the mask.
+
+**Properties:**
+
+- `pattern` — defines validation patterns for individual mask groups, checking entered values
+- `check` — global validation pattern applied after the mask is fully completed
+
+Properties work sequentially: `pattern` validates entered values at the mask group level, highlighting validation errors after input. Characters are entered into the field, but when they don't match the pattern, an error message is displayed. Each group (defined by special characters) receives its own pattern. After the mask is fully filled, `check` performs final validation of the entire value, providing an additional layer of verification for complex business logic. Both properties are optional and can be used independently or together for multi-level protection against incorrect data.
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const phone = ref('')
+const cardNumber = ref('')
+</script>
+
+<template>
+  <!-- Pattern for groups: digits only -->
+  <Mask
+    v-model="phone"
+    mask="+7 (***) ***-**-**"
+    pattern="\\d"
+  />
+
+  <!-- Pattern with function for different groups -->
+  <Mask
+    v-model="phone"
+    mask="DD/MM/YYYY"
+    :special="{
+      'D': {
+        pattern: (masks) => {
+          const value = masks['D']?.value || ''
+          if (value === '0') return '[1-9]'
+          if (value === '3') return '[0-1]'
+          return '\\d'
+        }
+      },
+      'M': {
+        pattern: (masks) => {
+          const value = masks['M']?.value || ''
+          if (value === '0') return '[1-9]'
+          if (value === '1') return '[0-2]'
+          return '\\d'
+        }
+      },
+      'Y': { pattern: '\\d' }
+    }"
+  />
+
+  <!-- Check for final validation -->
+  <Mask
+    v-model="cardNumber"
+    mask="**** **** **** ****"
+    pattern="\\d"
+    :check="(maskData) => {
+      const number = maskData.value.replace(/\s/g, '')
+      return isValidLuhn(number) ? {} : {
+        validationMessage: 'Invalid card number'
+      }
+    }"
+  />
+</template>
 ```
-
-### Usage differences
-
-**Pattern** works at the mask group level:
-- Applied in real-time during character input
-- Each mask group (defined by special characters) gets its own pattern
-- Invalid characters are rejected before appearing in the field
-- Different groups can have different validation rules
-
-**Check** works with the complete value:
-- Runs only after the mask is fully completed
-- Applied to the entire entered value
-- Provides an additional validation layer for complex business logic
-- Used for final correctness verification
-
-### Usage examples
-
-```javascript
-// Pattern for groups: digits only in phone number
-pattern: "\\d"
-
-// Pattern with function for different groups
-pattern: (maskData) => {
-  if (maskData.group === 'month') return "[0-1]\\d"
-  if (maskData.group === 'day') return "[0-3]\\d"
-  return "\\d"
-}
-
-// Check for card number validation using Luhn algorithm
-check: (maskData) => {
-  const cardNumber = maskData.value.replace(/\s/g, '')
-  return isValidLuhn(cardNumber)
-    ? { valid: true }
-    : { valid: false, message: "Invalid card number" }
-}
-
-// Check with RegExp for format validation
-check: "^\\+1\\d{10}$"
-```
-
-### Property interaction
-
-The properties work sequentially to ensure quality validation:
-
-- `pattern` filters input at the character and group level, preventing incorrect input
-- `check` performs final validation of the complete value after mask completion
-- Both properties are optional and can be used independently or together
-- When used together, they provide multi-level protection against incorrect data
-
-This approach allows creating flexible and reliable input fields with detailed validation control at all stages of user interaction.