@dxtmisha/wiki 0.24.2 → 0.25.1

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

@@ -2,96 +2,110 @@
 
 Date types in Mask provide automatic formatting and validation for date and time input with localization support.
 
-### Available types
+**Available types:**
 
-**Full formats:**
-- **date** — Full date (day-month-year)
-- **datetime** — Date and time (day-month-year hours:minutes)
-- **full** — Full date and time with seconds
+- `date`, `datetime`, `full` — full date and time formats
+- `time`, `hour-minute`, `hour`, `minute`, `second` — time components
+- `year`, `year-month`, `month`, `day`, `day-month` — date components
 
-**Time components:**
-- **time** — Time (hours:minutes:seconds)
-- **hour-minute** — Hours and minutes
-- **hour** — Hours only
-- **minute** — Minutes only
-- **second** — Seconds only
+All date types automatically create masks according to regional settings, ignoring the `mask` property. Mask structure is determined by locale via `language` (DD.MM.YYYY for Russian, MM/DD/YYYY for English).
 
-**Date components:**
-- **year** — Year only
-- **year-month** — Year and month
-- **month** — Month only
-- **day** — Day only
-- **day-month** — Day and month
-
-### Features
-
-- Automatic mask generation based on locale
-- Date correctness validation (leap years, days in month)
-- Support for various display formats
-- Integration with `language` for localization
-
-### Examples
+Date validation occurs at input level — numeric values correctness is checked, number of days in month (including leap years), value ranges (months 01-12, days 01-31, hours 00-23). Time works in 24-hour format.
 
 ```html
-<!-- Full date (Russian format: DD.MM.YYYY) -->
-<Mask type="date" language="ru" />
-
-<!-- US date format (MM/DD/YYYY) -->
+<!-- Full date -->
 <Mask type="date" language="en-US" />
 
 <!-- Date and time -->
 <Mask type="datetime" language="en-US" />
 
-<!-- Time only (24-hour format) -->
-<Mask type="time" language="en-US" />
+<!-- Time only -->
+<Mask type="time" />
+```
 
-<!-- Hours and minutes -->
-<Mask type="hour-minute" />
+### Types
 
-<!-- Year only (YYYY) -->
-<Mask type="year" />
+#### date
 
-<!-- Year and month -->
-<Mask type="year-month" language="en-US" />
+Full date in locale format (day, month, year). Automatically generates structure according to language settings: DD.MM.YYYY for Russian, MM/DD/YYYY for English. Separator is determined by locale (dot, slash, hyphen).
 
-<!-- Day and month -->
-<Mask type="day-month" language="en-US" />
+#### datetime
 
-<!-- Full date and time with seconds -->
-<Mask type="full" language="en-US" />
-```
+Date and time in locale format. Combines date and time masks, separating them with space. Date format is determined by language, time format is usually HH:MM. Validates both date and time.
+
+#### full
+
+Full date and time with seconds. Extended version of `datetime` with seconds added to time format (HH:MM:SS).
+
+#### time
+
+Time in HH:MM:SS format. Generates mask for time input with range validation (0-23 for hours, 0-59 for minutes and seconds).
+
+#### hour-minute
+
+Hours and minutes in HH:MM format. Short version of time without seconds. Validates ranges (0-23 for hours, 0-59 for minutes).
+
+#### hour
+
+Hours only (00-23). Mask for hours input with range validation from 0 to 23.
+
+#### minute
+
+Minutes only (00-59). Mask for minutes input with range validation from 0 to 59.
+
+#### second
+
+Seconds only (00-59). Mask for seconds input with range validation from 0 to 59.
+
+#### year
+
+Year (usually 4 digits). Creates simple numeric mask for year. Format may vary depending on locale (YYYY, YY).
+
+#### year-month
+
+Year and month. Combines year and month masks. Format depends on locale (YYYY/MM, YYYY-MM).
+
+#### month
+
+Month (01-12). Mask for month input with range validation from 01 to 12.
+
+#### day
+
+Day of month (01-31). Mask for day input with range validation from 01 to 31.
+
+#### day-month
+
+Day and month. Combines day and month masks without year. Useful for birthdays, holidays.
 
 ### Localization
 
-Formats automatically adapt to locale:
+Formats automatically adapt to locale via the `language` property:
 
-**Russian locale (ru):**
-- date: DD.MM.YYYY
-- datetime: DD.MM.YYYY HH:MM
-- time: HH:MM:SS
+**Russian (ru):**
+- Date format: DD.MM.YYYY
+- Separator: dot
+- Example: `31.12.2024`
 
-**US locale (en-US):**
-- date: MM/DD/YYYY
-- datetime: MM/DD/YYYY HH:MM
-- time: HH:MM:SS
+**English (en-US):**
+- Date format: MM/DD/YYYY
+- Separator: slash
+- Example: `12/31/2024`
 
-**European locale (de):**
-- date: DD.MM.YYYY
-- datetime: DD.MM.YYYY HH:MM
+**German (de):**
+- Date format: DD.MM.YYYY
+- Separator: dot
+- Example: `31.12.2024`
 
-### Validation
+```html
+<Mask type="date" language="ru" />
+<!-- Result: 31.12.2024 -->
 
-Date types automatically validate:
-- Correctness of numeric values for day, month, year
-- Number of days in month (including February in leap years)
-- Value ranges (months 01-12, days 01-31, hours 00-23)
-- Time format (24-hour format)
+<Mask type="date" language="en-US" />
+<!-- Result: 12/31/2024 -->
 
-### Usage
+<Mask type="datetime" language="en-US" />
+<!-- Result: 12/31/2024 2:30 PM -->
 
-- **date** — birth date fields, deadlines
-- **datetime** — event timestamps, schedules
-- **time** — start/end times, duration
-- **year** — release year, validity period
-- **day-month** — birthdays without year, holidays
-- **hour-minute** — working hours, transport schedules
+<Mask type="time" />
+<!-- Result: 14:30:45 -->
+```

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

@@ -2,96 +2,110 @@
 
 Типы дат в Mask обеспечивают автоматическое форматирование и валидацию для ввода даты и времени с учётом локализации.
 
-### Доступные типы
+**Доступные типы:**
 
-**Полные форматы:**
-- **date** — Полная дата (день-месяц-год)
-- **datetime** — Дата и время (день-месяц-год часы:минуты)
-- **full** — Полная дата и время с секундами
+- `date`, `datetime`, `full` — полные форматы даты и времени
+- `time`, `hour-minute`, `hour`, `minute`, `second` — компоненты времени
+- `year`, `year-month`, `month`, `day`, `day-month` — компоненты даты
 
-**Компоненты времени:**
-- **time** — Время (часы:минуты:секунды)
-- **hour-minute** — Часы и минуты
-- **hour** — Только часы
-- **minute** — Только минуты
-- **second** — Только секунды
+Все типы дат автоматически создают маски согласно региональным настройкам, игнорируя свойство `mask`. Структура маски определяется локалью через `language` (DD.MM.YYYY для русского, MM/DD/YYYY для английского).
 
-**Компоненты даты:**
-- **year** — Только год
-- **year-month** — Год и месяц
-- **month** — Только месяц
-- **day** — Только день
-- **day-month** — День и месяц
-
-### Особенности
-
-- Автоматическая генерация маски на основе локали
-- Валидация корректности даты (високосные годы, количество дней в месяце)
-- Поддержка различных форматов отображения
-- Интеграция с `language` для локализации
-
-### Примеры
+Валидация даты происходит на уровне ввода — проверяется корректность числовых значений, количество дней в месяце (включая високосные годы), диапазоны значений (месяцы 01-12, дни 01-31, часы 00-23). Время работает в 24-часовом формате.
 
 ```html
-<!-- Полная дата (русский формат: ДД.ММ.ГГГГ) -->
+<!-- Полная дата -->
 <Mask type="date" language="ru" />
 
-<!-- Американский формат даты (ММ/ДД/ГГГГ) -->
-<Mask type="date" language="en-US" />
-
 <!-- Дата и время -->
 <Mask type="datetime" language="ru" />
 
-<!-- Только время (24-часовой формат) -->
-<Mask type="time" language="ru" />
+<!-- Только время -->
+<Mask type="time" />
+```
 
-<!-- Часы и минуты -->
-<Mask type="hour-minute" />
+### Типы
 
-<!-- Только год (ГГГГ) -->
-<Mask type="year" />
+#### date
 
-<!-- Год и месяц -->
-<Mask type="year-month" language="ru" />
+Полная дата в формате локали (день, месяц, год). Автоматически генерирует структуру согласно языковым настройкам: DD.MM.YYYY для русского, MM/DD/YYYY для английского. Разделитель определяется локалью (точка, слэш, дефис).
 
-<!-- День и месяц -->
-<Mask type="day-month" language="ru" />
+#### datetime
 
-<!-- Полная дата и время с секундами -->
-<Mask type="full" language="ru" />
-```
+Дата и время в формате локали. Комбинирует маску даты и времени, разделяя их пробелом. Формат даты определяется языком, формат времени обычно HH:MM. Валидирует как дату, так и время.
+
+#### full
+
+Полная дата и время с секундами. Расширенная версия `datetime` с добавлением секунд в формат времени (HH:MM:SS).
+
+#### time
+
+Время в формате HH:MM:SS. Генерирует маску для ввода времени с валидацией диапазонов (0-23 для часов, 0-59 для минут и секунд).
+
+#### hour-minute
+
+Часы и минуты в формате HH:MM. Короткая версия времени без секунд. Валидирует диапазоны (0-23 для часов, 0-59 для минут).
+
+#### hour
+
+Только часы (00-23). Маска для ввода часов с валидацией диапазона от 0 до 23.
+
+#### minute
+
+Только минуты (00-59). Маска для ввода минут с валидацией диапазона от 0 до 59.
+
+#### second
+
+Только секунды (00-59). Маска для ввода секунд с валидацией диапазона от 0 до 59.
+
+#### year
+
+Год (обычно 4 цифры). Создаёт простую числовую маску для года. Формат может варьироваться в зависимости от локали (YYYY, YY).
+
+#### year-month
+
+Год и месяц. Комбинирует маску года и месяца. Формат зависит от локали (YYYY/MM, YYYY-MM).
+
+#### month
+
+Месяц (01-12). Маска для ввода месяца с валидацией диапазона от 01 до 12.
+
+#### day
+
+День месяца (01-31). Маска для ввода дня с валидацией диапазона от 01 до 31.
+
+#### day-month
+
+День и месяц. Комбинирует маску дня и месяца без года. Полезно для дней рождения, праздников.
 
 ### Локализация
 
-Форматы автоматически адаптируются к локали:
+Форматы автоматически адаптируются к локали через свойство `language`:
 
-**Русская локаль (ru):**
-- date: ДД.ММ.ГГГГ
-- datetime: ДД.ММ.ГГГГ ЧЧ:ММ
-- time: ЧЧ:ММ:СС
+**Русский (ru):**
+- Формат даты: DD.MM.YYYY
+- Разделитель: точка
+- Пример: `31.12.2024`
 
-**Американская локаль (en-US):**
-- date: ММ/ДД/ГГГГ
-- datetime: ММ/ДД/ГГГГ ЧЧ:ММ
-- time: ЧЧ:ММ:СС
+**Английский (en-US):**
+- Формат даты: MM/DD/YYYY
+- Разделитель: слэш
+- Пример: `12/31/2024`
 
-**Европейская локаль (de):**
-- date: ДД.ММ.ГГГГ
-- datetime: ДД.ММ.ГГГГ ЧЧ:ММ
+**Немецкий (de):**
+- Формат даты: DD.MM.YYYY
+- Разделитель: точка
+- Пример: `31.12.2024`
 
-### Валидация
+```html
+<Mask type="date" language="ru" />
+<!-- Результат: 31.12.2024 -->
 
-Типы дат автоматически проверяют:
-- Корректность числовых значений для дня, месяца, года
-- Количество дней в месяце (включая февраль в високосных годах)
-- Диапазоны значений (месяцы 01-12, дни 01-31, часы 00-23)
-- Формат времени (24-часовой формат)
+<Mask type="date" language="en-US" />
+<!-- Результат: 12/31/2024 -->
 
-### Применение
+<Mask type="datetime" language="ru" />
+<!-- Результат: 31.12.2024 14:30 -->
 
-- **date** — поля выбора даты рождения, крайних сроков
-- **datetime** — временные метки событий, расписания
-- **time** — время начала/окончания, продолжительность
-- **year** — год выпуска, период действия
-- **day-month** — дни рождения без года, праздники
-- **hour-minute** — время работы, расписание транспорта
+<Mask type="time" />
+<!-- Результат: 14:30:45 -->
+```

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

@@ -0,0 +1,20 @@
+### `value`
+
+Final formatted mask value.
+
+**Type:** `Ref<string>`
+
+### `valueBasic`
+
+Basic mask value without formatting (only entered characters).
+
+**Type:** `Ref<string>`
+
+### `set`
+
+Sets new value and reinitializes the mask.
+
+**Parameters:**
+- `value: string` — new value to set
+
+**Returns:** `boolean` — `true` if the value was changed

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

@@ -0,0 +1,20 @@
+### `value`
+
+Итоговое отформатированное значение маски.
+
+**Тип:** `Ref<string>`
+
+### `valueBasic`
+
+Базовое значение маски без форматирования (только введённые символы).
+
+**Тип:** `Ref<string>`
+
+### `set`
+
+Устанавливает новое значение и переинициализирует маску.
+
+**Параметры:**
+- `value: string` — новое значение для установки
+
+**Возвращает:** `boolean` — `true`, если значение было изменено

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

@@ -1,59 +1,26 @@
-## Cursor Behavior Control
+## Preserving groups on deletion
 
-The `groupSave` property controls cursor behavior when navigating between different special character groups in the mask. When set to `true` (default), it enables intelligent navigation that improves user experience when working with complex masks.
+The `groupSave` property controls behavior when deleting characters in a mask with multiple types of special characters.
 
-### Navigation Mechanism
+**Possible values:**
 
-During mask navigation, the system checks:
-- Current cursor position
-- Type of special character at current position
-- Type of the next special character
-- If characters belong to different groups, special movement logic is applied
+- `true` — preserves group separation on deletion (default)
+- `false` — allows characters from different groups to mix on deletion
 
-### Usage Examples
+With `groupSave: true` and different groups ahead, the character is not physically deleted but marked with a deletion marker, preserving the mask structure. With `false`, characters are deleted completely, which can lead to "collapsing" of groups and loss of structure. Only works for fixed (non-rubber) groups of special characters.
 
 ```html
-// Standard behavior (default)
+<!-- Preserve group structure (default) -->
 <Mask
-  :mask="'***-###-XXX'"
-  :special="['*', '#', 'X']"
-  :groupSave="true"
+  mask="***-###"
+  :special="['*', '#']"
+  groupSave
 />
 
-// Disable smart navigation
+<!-- Without structure preservation -->
 <Mask
-  :mask="'***-###-XXX'"
-  :special="['*', '#', 'X']"
+  mask="***-###"
+  :special="['*', '#']"
   :groupSave="false"
 />
-
-// Complex mask with multiple groups
-<Mask
-  :mask="'AAA-111-BBB-222'"
-  :special="['A', '1', 'B', '2']"
-  :groupSave="true"
-/>
 ```
-
-### When to Use
-
-#### groupSave: true (recommended)
-- For masks with multiple group types
-- When smooth navigation between groups is needed
-- In most user interface scenarios
-
-#### groupSave: false
-- For simple masks with single symbol type
-- When standard cursor behavior is required
-- In specific cases with custom navigation logic
-
-### Behavior Features
-
-- With **groupSave: true**, cursor "understands" boundaries between groups
-- Improves navigation in masks like phone numbers with area codes
-- Works only with rubber (non-fixed) groups
-- Doesn't affect data validation or formatting
-
-### Application
-
-Use this property to create more intuitive input interfaces, especially when the mask contains multiple logically separated data groups (country code, area code, number, etc.).

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

@@ -1,59 +1,26 @@
-## Управление поведением курсора
+## Сохранение групп при удалении
 
-Свойство `groupSave` управляет поведением курсора при навигации между различными группами специальных символов в маске. При значении `true` (по умолчанию) включается интеллектуальная навигация, которая улучшает пользовательский опыт при работе со сложными масками.
+Свойство `groupSave` управляет поведением при удалении символов в маске с несколькими типами специальных символов.
 
-### Механизм работы
+**Возможные значения:**
 
-При навигации по маске система проверяет:
-- Текущую позицию курсора
-- Тип специального символа в текущей позиции
-- Тип следующего специального символа
-- Если символы относятся к разным группам, применяется особая логика перемещения
+- `true` — сохраняет разделение групп при удалении (по умолчанию)
+- `false` — позволяет символам из разных групп смешиваться при удалении
 
-### Примеры использования
+При `groupSave: true` и наличии разных групп впереди символ не удаляется физически, а помечается маркером удаления, сохраняя структуру маски. При `false` символы удаляются полностью, что может привести к "схлопыванию" групп и потере структуры. Работает только для фиксированных (не резиновых) групп специальных символов.
 
 ```html
-// Стандартное поведение (по умолчанию)
+<!-- Сохранение структуры групп (по умолчанию) -->
 <Mask
-  :mask="'***-###-XXX'"
-  :special="['*', '#', 'X']"
-  :groupSave="true"
+  mask="***-###"
+  :special="['*', '#']"
+  groupSave
 />
 
-// Отключение умной навигации
+<!-- Без сохранения структуры -->
 <Mask
-  :mask="'***-###-XXX'"
-  :special="['*', '#', 'X']"
+  mask="***-###"
+  :special="['*', '#']"
   :groupSave="false"
 />
-
-// Сложная маска с множественными группами
-<Mask
-  :mask="'AAA-111-BBB-222'"
-  :special="['A', '1', 'B', '2']"
-  :groupSave="true"
-/>
 ```
-
-### Когда использовать
-
-#### groupSave: true (рекомендуется)
-- Для масок с несколькими типами групп
-- Когда нужна плавная навигация между группами
-- В большинстве пользовательских интерфейсов
-
-#### groupSave: false
-- Для простых масок с одним типом символов
-- Когда требуется стандартное поведение курсора
-- В специфических случаях с кастомной логикой навигации
-
-### Особенности поведения
-
-- При **groupSave: true** курсор "понимает" границы между группами
-- Улучшает навигацию в масках типа телефонных номеров с кодами
-- Работает только с резиновыми (не фиксированными) группами
-- Не влияет на валидацию или форматирование данных
-
-### Применение
-
-Используйте это свойство для создания более интуитивных интерфейсов ввода, особенно когда маска содержит несколько логически разделённых групп данных (код страны, код города, номер и т.д.).

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

@@ -1,75 +1,21 @@
 ## Mask template
 
-The `mask` property defines a template for structured data input with real-time automatic formatting. It provides guided user input with format error prevention.
+The `mask` property defines a template for structured data input with automatic real-time formatting.
 
-### Key features
+**Possible values:**
 
-- **Automatic formatting**: Adds separators and literal characters during typing
-- **Multiple templates**: Support for mask arrays with automatic selection of the most suitable one
-- **Special characters**: Customizable input positions through the `special` property
-- **Error prevention**: Restricts input to only allowed characters in corresponding positions
-- **Validation integration**: Works together with the data validation system through `pattern` and `check`
+- `string` — single mask for fixed format
+- `string[]` — array of masks to support multiple formats with automatic selection
 
-### Value type
+The template uses two types of characters: special characters (default `*`) denote positions for user input, while literal characters are inserted automatically and cannot be changed. The component automatically adds separators during typing and restricts input to only allowed characters in corresponding positions. When using an array of masks, the system automatically selects the most suitable template based on entered data. Works together with the validation system through `pattern` and `check` properties. For built-in types (`currency`, `number`, `date`), masks are generated automatically based on regional settings.
 
-```typescript
-type MaskList = string | string[]
-```
-
-- **string** — single mask for fixed format
-- **string[]** — array of masks to support multiple formats
-
-### Mask syntax
-
-The mask template uses two types of characters:
-
-- **Special characters** (default `*`) — denote positions for user input
-- **Literal characters** — inserted automatically and cannot be changed by the user
-
-### Usage examples
-
-```javascript
-// Phone number
-mask: "+1 *** *** ****"
-
-// Credit card
-mask: "**** **** **** ****"
-
-// Date format
-mask: "**/**/****"
+```html
+<!-- Russian phone -->
+<Mask mask="+7 *** *** ** **" />
 
-// Multiple phone formats
-mask: [
-  "+1 *** *** ****",      // +1 999 123 4567
-  "*** *** ****"          // 999 123 4567
-]
+<!-- Bank card -->
+<Mask mask="**** **** **** ****" />
 
-// Postal code
-mask: "******"
+<!-- Multiple formats -->
+<Mask :mask="['+7 *** *** ** **', '8 *** *** ** **']" />
 ```
-
-### Automatic mask selection
-
-When using an array of masks, the system automatically selects the most suitable template based on the entered data:
-
-```javascript
-mask: [
-  "+1 *** *** ****",      // Selected when typing +1
-  "1 *** *** ****",       // Selected when typing 1
-  "*** *** ****"          // Fallback option
-]
-```
-
-### Interaction with other properties
-
-- **special** — defines which characters are considered special and their behavior
-- **pattern** — sets validation patterns for special character groups
-- **check** — applies additional validation to the complete value after mask completion
-- **type** — for built-in types (`currency`, `number`, `date`) automatically generates corresponding masks
-
-### Recommendations
-
-- Use clear separators to improve readability (spaces, dashes, parentheses)
-- When supporting multiple formats, place more specific masks first in the array
-- Combine with validation through `pattern` and `check` for complete input control
-- For complex cases, configure special characters through the `special` property