@dxtmisha/wiki 0.24.2 → 0.25.1

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

@@ -1,127 +1,204 @@
-## Специальные символы (special)
+## Специальные символы
 
-Свойство `special` определяет специальные символы для групп маски и их расширенные настройки.
+Свойство `special` определяет специальные символы для обозначения мест пользовательского ввода в маске и настройку их расширенного поведения.
 
-### Назначение
+**Возможные значения:**
 
-Специальные символы в маске обозначают места, где пользователь может вводить данные. Свойство `special` позволяет настроить поведение этих групп ввода с дополнительными возможностями.
+- `string` — одиночный специальный символ (по умолчанию `'*'`)
+- `string[]` — массив специальных символов для разных типов групп
+- `MaskSpecialList` — объект с расширенной конфигурацией каждого символа
 
-### Типы значений
+Специальные символы в шаблоне маски обозначают позиции, где пользователь может вводить данные, в отличие от литеральных символов, которые вставляются автоматически.
 
-```ts
-type MaskSpecialProp = string | string[] | MaskSpecialList
+При использовании простой строки (например, `special="*"`) все места ввода в маске ограничиваются одинаковыми правилами валидации.
 
-// Расширенная конфигурация группы
-interface MaskSpecialItem {
-  defaultValue?: string           // Значение по умолчанию
-  rubber?: boolean               // Резиновая группа (переменная длина)
-  transitionChar?: string | string[]  // Символы перехода
-  minLength?: number             // Минимальная длина
-  maxLength?: number             // Максимальная длина
-  match?: RegExp | string        // Паттерн проверки
-  pattern?: FieldPatternItemOrFunction  // Паттерн валидации
-  view?: string                  // Отображаемый символ
-}
-```
+Массив символов (например, `special="['*', 'A', '#']"`) позволяет создавать разные типы групп с индивидуальными ограничениями: одна группа для цифр, другая для букв, третья для специальных символов.
 
-### Способы использования
+Объектная нотация `MaskSpecialList` (см. [детальное описание ниже](#maskspeciallist)) предоставляет максимальную гибкость. Каждый специальный символ настраивается отдельно с возможностью задать значения по умолчанию, резиновые группы переменной длины, символы автоперехода и кастомную валидацию.
 
-**1. Простая строка (один специальный символ)**
-```javascript
-special: '*'           // Символ * обозначает места ввода
-// Маска: "***-***" → группы: *, *, *, *, *, *
-```
+Для встроенных типов (`currency`, `number`, `date`, `time`) система автоматически генерирует специальные символы с учётом региональных настроек, игнорируя пользовательское значение `special`.
 
-**2. Массив символов (несколько типов групп)**
-```javascript
-special: ['*', '#', 'A']
-// * - любые символы, # - цифры, A - буквы
-// Маска: "A**-###" → группы разных типов
-```
+```html
+<!-- Простой специальный символ -->
+<Mask mask="***-***" special="*" />
 
-**3. Объект с расширенными настройками**
-```javascript
-special: {
-  '*': {
-    pattern: '\\d',        // Только цифры
-    view: '_',             // Показывать _ как placeholder
-    rubber: false          // Фиксированная длина
-  },
-  '#': {
-    pattern: '[A-Z]',      // Только заглавные буквы
-    defaultValue: 'X',     // Значение по умолчанию
-    rubber: true,          // Переменная длина
-    minLength: 1,
-    maxLength: 5
-  }
-}
+<!-- Несколько типов групп -->
+<Mask mask="AA*-###" :special="['A', '*', '#']" />
+
+<!-- Расширенная конфигурация -->
+<Mask
+  mask="***-***"
+  :special="{
+    '*': {
+      pattern: '\\d',
+      view: '_',
+      rubber: true,
+      minLength: 2,
+      maxLength: 8,
+      transitionChar: ' '
+    }
+  }"
+/>
+
+<!-- Группы с значениями по умолчанию -->
+<Mask
+  mask="DD/MM/YYYY"
+  :special="{
+    'D': { defaultValue: '01', pattern: '\\d' },
+    'M': { defaultValue: '01', pattern: '\\d' },
+    'Y': { defaultValue: '2024', pattern: '\\d' }
+  }"
+/>
 ```
 
-### Резиновые группы (rubber)
+## MaskSpecialList
 
-Резиновые группы позволяют вводить переменное количество символов:
+`MaskSpecialList` — объект расширенной конфигурации специальных символов маски, где каждый ключ соответствует специальному символу в шаблоне.
 
-```javascript
-special: {
-  '*': {
-    rubber: true,
-    minLength: 2,
-    maxLength: 8,
-    pattern: '\\d'
-  }
-}
-// Маска: "***-***" может принять от 2 до 8 цифр в каждой группе
-```
+### Структура типа
 
-### Значения по умолчанию
+```typescript
+type MaskSpecialList = Record<string, MaskSpecialItem>
 
-```javascript
-special: {
-  'Y': { defaultValue: '2024' },    // Год по умолчанию
-  'M': { defaultValue: '01' },      // Месяц по умолчанию
-  'D': { defaultValue: '01' }       // День по умолчанию
-}
-// Маска: "DD/MM/YYYY" → автозаполнение: "01/01/2024"
-```
+interface MaskSpecialItem {
+  /** Значение по умолчанию для группы */
+  defaultValue?: string
 
-### Символы перехода (transitionChar)
+  /** Включает режим переменной длины (резиновая группа) */
+  rubber?: boolean
 
-Определяют символы, которые автоматически переводят курсор к следующей группе:
+  /** Символы автоматического перехода к следующей группе */
+  transitionChar?: string | string[]
 
-```javascript
-special: {
-  '*': {
-    transitionChar: [' ', '-'],     // Пробел или дефис переводят дальше
-    pattern: '\\d'
-  }
-}
-// При вводе "123 " курсор автоматически перейдёт к следующей группе
-```
+  /** Минимальная длина для резиновой группы */
+  minLength?: number
 
-### Отображение (view)
+  /** Максимальная длина для резиновой группы */
+  maxLength?: number
 
-Настройка placeholder-символов для незаполненных позиций:
+  /** Регулярное выражение для валидации символов */
+  match?: RegExp | string
 
-```javascript
-special: {
-  '*': { view: '_' },       // Показывать подчёркивания
-  '#': { view: '0' }        // Показывать нули
+  /** Паттерн валидации группы */
+  pattern?: FieldPatternItemOrFunction
+
+  /** Отображаемый символ placeholder */
+  view?: string
 }
-// Маска: "***-###" отображается как "___-000"
 ```
 
-### Интеграция с типами маски
+### Свойства
+
+#### `defaultValue`
+
+Строка с начальным значением для группы. Автоматически подставляется при инициализации или когда пользователь не ввёл данные.
+
+#### `rubber`
+
+Логическое значение, включающее режим резиновой группы с переменной длиной. Позволяет пользователю вводить от `minLength` до `maxLength` символов в одной группе.
+
+#### `transitionChar`
+
+Символ или массив символов, при вводе которых резиновая группа завершается и курсор переходит к следующей части маски. Работает только для резиновых групп (`rubber: true`).
+
+#### `minLength`
 
-Для встроенных типов (`currency`, `number`, дата/время) система автоматически генерирует соответствующие специальные символы:
+Минимальное количество символов для резиновой группы. Работает только при `rubber: true`.
 
-- **currency/number**: специальные символы для разрядов и дробной части
-- **date/time**: символы для дня, месяца, года, часов, минут, секунд
-- **text**: использует настройки из свойства `special`
+#### `maxLength`
 
-### Взаимодействие с другими свойствами
+Максимальное количество символов для резиновой группы. Работает только при `rubber: true`.
 
-- `pattern` — дополняет специальные символы групповыми паттернами
-- `check` — применяется после заполнения всех специальных групп
-- `mask` — использует специальные символы для определения мест ввода
+#### `match`
 
-Специальные символы являются основой системы масок, обеспечивая гибкое определение групп ввода с индивидуальными правилами валидации и поведения.
+Регулярное выражение или строка для валидации вводимых символов в группе.
+
+#### `pattern`
+
+Регулярное выражение или строка для валидации символов в текущей группе при вводе. Также может быть функцией, которая динамически возвращает паттерн на основе данных маски.
+
+**Тип:**
+
+```typescript
+type FieldPatternItemOrFunction = FieldPatternItem | ((item: FieldMasks) => FieldPatternItem)
+type FieldPatternItem = string | Partial<HTMLInputElement>
+```
+
+Где `FieldMasks` — объект с информацией о всех группах маски, каждая из которых содержит:
+- `group` — ключ группы
+- `value` — накопленное значение группы
+- `maxLength` — максимальная длина фрагмента
+- `full` — флаг заполненности фрагмента
+- `end` — флаг конца ввода
+- `chars` — массив символов значения
+
+#### `view`
+
+Символ, отображаемый в качестве placeholder для незаполненных позиций группы.
+
+### Пример использования
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const phoneCode = ref('')
+const productCode = ref('')
+const dateValue = ref('')
+</script>
+
+<template>
+  <!-- Телефонный код переменной длины с автозавершением -->
+  <Mask
+    v-model="phoneCode"
+    mask="+* (***) *** ** **"
+    :special="{
+      '*': {
+        rubber: true,
+        minLength: 1,
+        maxLength: 3,
+        pattern: '\\d',
+        transitionChar: ' '
+      }
+    }"
+  />
+
+  <!-- Код товара переменной длины -->
+  <Mask
+    v-model="productCode"
+    mask="PRD-***"
+    :special="{
+      '*': {
+        rubber: true,
+        minLength: 4,
+        maxLength: 10,
+        match: /[A-Z0-9]/,
+        view: '_'
+      }
+    }"
+  />
+
+  <!-- Дата с значениями по умолчанию -->
+  <Mask
+    v-model="dateValue"
+    mask="DD/MM/YYYY"
+    :special="{
+      'D': {
+        defaultValue: '01',
+        pattern: '\\d',
+        view: '0'
+      },
+      'M': {
+        defaultValue: '01',
+        pattern: '\\d',
+        view: '0'
+      },
+      'Y': {
+        defaultValue: '2024',
+        pattern: '\\d',
+        view: '0'
+      }
+    }"
+  />
+</template>
+```

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

@@ -1,46 +1,22 @@
-## Mask Types
+## Mask types
 
 The `type` property defines the mask operation mode and automatically generates the appropriate structure for different data types.
 
-### Type Categories
+**Possible values:**
 
-#### Text Type
-- **text** — Basic text mask (default)
+- `'text'` — basic text mask (default)
+- `'number'`, `'number-format'`, `'currency'` — numeric types with validation and localization
+- `'date'`, `'datetime'`, `'time'`, `'year'`, `'month'`, `'day'`, `'hour-minute'` — date and time types
 
-Used to create custom masks using the `mask` property. All characters are processed as-is, without additional formatting.
-
-#### Numeric Types
-- **number** — Simple numeric mask
-- **number-format** — Numbers with thousand separators
-- **currency** — Currency formatting
-
-Automatically create rubber masks with validation, localization, and specialized formatting.
-
-#### Date and Time Types
-- **date** — Full date
-- **datetime** — Date and time
-- **time** — Time
-- **year**, **month**, **day** — Date components
-- **hour-minute** — Time components
-
-Generate masks according to local formats with date correctness validation.
-
-### Automatic Generation
-
-When using specialized types, the `mask` property is ignored — the mask is created automatically:
+When using `text`, explicit structure specification via the `mask` property is required. Specialized numeric types automatically create rubber masks with thousand separators, validation, and formatting according to regional settings (`language`). Date types generate masks according to local formats with validation of entered values correctness. When a specialized type is activated, the `mask` property is ignored, and the mask structure is formed automatically based on `language`, `currency`, and `fraction`.
 
 ```html
-<!-- Text mask — requires explicit mask specification -->
-<Mask :mask="'+1 *** *** ****'" type="text" />
+<!-- Text mask -->
+<Mask mask="+1 (***) ***-****" type="text" />
+
+<!-- Currency mask -->
+<Mask type="currency" currency="USD" language="en-US" />
 
-<!-- Specialized types — mask generated automatically -->
+<!-- Date mask -->
 <Mask type="date" language="en-US" />
-<Mask type="currency" currency="USD" />
-<Mask type="number-format" :fraction="2" />
 ```
-
-### Type Selection
-
-- **text** — for phones, codes, custom formats
-- **Numeric types** — for quantities, amounts, percentages
-- **Date types** — for timestamps, periods, schedules

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

@@ -2,45 +2,21 @@
 
 Свойство `type` определяет режим работы маски и автоматически генерирует соответствующую структуру для различных типов данных.
 
-### Категории типов
+**Возможные значения:**
 
-#### Текстовый тип
-- **text** — Базовая текстовая маска (по умолчанию)
+- `'text'` — базовая текстовая маска (по умолчанию)
+- `'number'`, `'number-format'`, `'currency'` — числовые типы с валидацией и локализацией
+- `'date'`, `'datetime'`, `'time'`, `'year'`, `'month'`, `'day'`, `'hour-minute'` — типы дат и времени
 
-Используется для создания произвольных масок с помощью свойства `mask`. Все символы обрабатываются как есть, без дополнительного форматирования.
-
-#### Числовые типы
-- **number** — Простая числовая маска
-- **number-format** — Числа с разделителями разрядов
-- **currency** — Валютное форматирование
-
-Автоматически создают резиновые маски с валидацией, локализацией и специальным форматированием.
-
-#### Типы дат и времени
-- **date** — Полная дата
-- **datetime** — Дата и время
-- **time** — Время
-- **year**, **month**, **day** — Компоненты даты
-- **hour-minute** — Компоненты времени
-
-Генерируют маски согласно локальным форматам с валидацией корректности дат.
-
-### Автоматическая генерация
-
-При использовании специализированных типов свойство `mask` игнорируется — маска создаётся автоматически:
+При использовании `text` требуется явное указание структуры через свойство `mask`. Специализированные числовые типы автоматически создают резиновые маски с разделителями разрядов, валидацией и форматированием согласно региональным настройкам (`language`). Типы дат генерируют маски по локальным форматам с проверкой корректности введённых значений. При активации специализированного типа свойство `mask` игнорируется, а структура маски формируется автоматически на основе `language`, `currency` и `fraction`.
 
 ```html
-<!-- Текстовая маска — требует явного указания mask -->
-<Mask :mask="'+7 *** *** ** **'" type="text" />
+<!-- Текстовая маска -->
+<Mask mask="+7 (***) ***-**-**" type="text" />
+
+<!-- Валютная маска -->
+<Mask type="currency" currency="RUB" language="ru" />
 
-<!-- Специализированные типы — mask генерируется автоматически -->
+<!-- Маска даты -->
 <Mask type="date" language="ru" />
-<Mask type="currency" currency="RUB" />
-<Mask type="number-format" :fraction="2" />
 ```
-
-### Выбор типа
-
-- **text** — для телефонов, кодов, произвольных форматов
-- **Числовые типы** — для количества, сумм, процентов
-- **Типы дат** — для временных меток, периодов, расписаний

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

@@ -1,48 +1,40 @@
-## Mask Visibility Control
+## Mask visibility control
 
-The `visible` and `visiblePartly` properties control the display of mask placeholder characters and overall component visibility.
+The `visible` and `visiblePartly` properties are designed for managing the display of mask placeholder characters and overall component visibility.
 
-### Properties
+**Properties:**
 
-- **visible** — Primary property for controlling complete visibility of the mask component
-- **visiblePartly** — Controls partial visibility of mask placeholder characters
+- `visible` — controls complete visibility of the mask component
+- `visiblePartly` — controls partial visibility of placeholder characters
 
-### How it works
-
-**visible** controls complete visibility of the mask component. When set to `false`, hides the entire mask component including all placeholder characters.
-
-**visiblePartly** controls partial visibility of mask placeholder characters. When set to `true`, shows only filled positions while hiding empty placeholder characters.
-
-### Usage Examples
+Properties work together: when `visible: false`, the mask component is completely hidden, including all placeholder characters. When `visiblePartly: true` is activated, only filled mask positions are displayed, hiding empty placeholder characters. If `visible` is set to `false`, the `visiblePartly` property is ignored. Visibility changes don't affect validation logic and data processing, allowing creation of adaptive interfaces with conditional or abbreviated mask display.
 
 ```html
-// Complete mask hiding
-<Mask
-  :mask="'+1 (***) ***-****'"
-  :visible="false"
-/>
-
-// Show only filled positions
-<Mask
-  :mask="'+1 (***) ***-****'"
-  :visiblePartly="true"
-/>
-
-// Conditional display with partial visibility
-<Mask
-  :mask="'+1 (***) ***-****'"
-  :visible="showMask"
-  :visiblePartly="compactMode"
-/>
+<script setup>
+import { ref } from 'vue'
+
+const showMask = ref(true)
+const compactMode = ref(false)
+</script>
+
+<template>
+  <!-- Complete mask hiding -->
+  <Mask
+    mask="+1 (***) ***-****"
+    :visible="false"
+  />
+
+  <!-- Show only filled positions -->
+  <Mask
+    mask="+1 (***) ***-****"
+    :visiblePartly="true"
+  />
+
+  <!-- Conditional display with partial visibility -->
+  <Mask
+    mask="+1 (***) ***-****"
+    :visible="showMask"
+    :visiblePartly="compactMode"
+  />
+</template>
 ```
-
-### Behavior Features
-
-- When **visible: false**, the mask component is completely hidden
-- When **visiblePartly: true**, only filled mask positions are displayed
-- If **visible: false**, the **visiblePartly** property is ignored
-- Visibility changes don't affect validation logic and data processing
-
-### Application
-
-Use these properties to create adaptive interfaces where the mask can be displayed conditionally or in abbreviated form depending on the usage context.

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

@@ -1,48 +1,40 @@
 ## Управление видимостью маски
 
-Свойства `visible` и `visiblePartly` управляют отображением символов-заполнителей маски и видимостью компонента в целом.
+Свойства `visible` и `visiblePartly` предназначены для управления отображением символов-заполнителей маски и видимостью компонента в целом.
 
-### Свойства
+**Свойства:**
 
-- **visible** — Основное свойство для управления полной видимостью компонента маски
-- **visiblePartly** — Управляет частичной видимостью символов-заполнителей маски
+- `visible` — управляет полной видимостью компонента маски
+- `visiblePartly` — управляет частичной видимостью символов-заполнителей
 
-### Описание работы
-
-**visible** контролирует полную видимость компонента маски. При значении `false` скрывает весь компонент маски включая все символы-заполнители.
-
-**visiblePartly** управляет частичной видимостью символов-заполнителей. При значении `true` показывает только заполненные позиции, скрывая пустые символы-заполнители.
-
-### Примеры использования
+Свойства работают совместно: при `visible: false` компонент маски полностью скрыт, включая все символы-заполнители. При активации `visiblePartly: true` отображаются только заполненные позиции маски, скрывая пустые символы-заполнители. Если `visible` установлен в `false`, то свойство `visiblePartly` игнорируется. Изменение видимости не влияет на логику валидации и обработку данных, позволяя создавать адаптивные интерфейсы с условным или сокращённым отображением маски.
 
 ```html
-// Полное скрытие маски
-<Mask
-  :mask="'+1 (***) ***-****'"
-  :visible="false"
-/>
-
-// Показ только заполненных позиций
-<Mask
-  :mask="'+1 (***) ***-****'"
-  :visiblePartly="true"
-/>
-
-// Условное отображение с частичной видимостью
-<Mask
-  :mask="'+1 (***) ***-****'"
-  :visible="showMask"
-  :visiblePartly="compactMode"
-/>
+<script setup>
+import { ref } from 'vue'
+
+const showMask = ref(true)
+const compactMode = ref(false)
+</script>
+
+<template>
+  <!-- Полное скрытие маски -->
+  <Mask
+    mask="+7 (***) ***-**-**"
+    :visible="false"
+  />
+
+  <!-- Показ только заполненных позиций -->
+  <Mask
+    mask="+7 (***) ***-**-**"
+    :visiblePartly="true"
+  />
+
+  <!-- Условное отображение с частичной видимостью -->
+  <Mask
+    mask="+7 (***) ***-**-**"
+    :visible="showMask"
+    :visiblePartly="compactMode"
+  />
+</template>
 ```
-
-### Особенности поведения
-
-- При **visible: false** компонент маски полностью скрыт
-- При **visiblePartly: true** отображаются только заполненные позиции маски
-- Если **visible: false**, то свойство **visiblePartly** игнорируется
-- Изменение видимости не влияет на логику валидации и обработку данных
-
-### Применение
-
-Используйте эти свойства для создания адаптивных интерфейсов, где маска может показываться условно или в сокращённом виде в зависимости от контекста использования.

package/src/media/mdx/Mask/wikiMdxMask.ts

@@ -4,6 +4,8 @@ import basicEn from './basic.en.mdx'
 import basicRu from './basic.ru.mdx'
 import dateTypesEn from './dateTypes.en.mdx'
 import dateTypesRu from './dateTypes.ru.mdx'
+import exposeEn from './expose.en.mdx'
+import exposeRu from './expose.ru.mdx'
 import groupSaveEn from './groupSave.en.mdx'
 import groupSaveRu from './groupSave.ru.mdx'
 import maskEn from './mask.en.mdx'
@@ -37,6 +39,10 @@ export const wikiMdxMask: StorybookComponentsMdxItem = {
       en: dateTypesEn,
       ru: dateTypesRu
     },
+    expose: {
+      en: exposeEn,
+      ru: exposeRu
+    },
     groupSave: {
       en: groupSaveEn,
       ru: groupSaveRu