@dxtmisha/wiki 0.39.5 → 0.39.7

package/src/media/mdx/ListItem/fill.en.mdx

@@ -1,24 +0,0 @@
-## Element fill color
-
-The `fill` property defines the background color of the list item element, allowing precise control over the component's visual styling.
-
-**Possible values:**
-
-- Hex colors: `#FF0000`, `#ffffff`, `#3498db`
-- RGB: `rgb(255, 0, 0)`, `rgb(52, 152, 219)`
-- RGBA: `rgba(255, 0, 0, 0.5)`, `rgba(0, 0, 0, 0.1)`
-- Named colors: `red`, `blue`, `green`, `transparent`
-- HSL/HSLA: `hsl(0, 100%, 50%)`, `hsla(210, 70%, 53%, 0.8)`
-
-Accepts any standard CSS color format. The property provides a flexible way to customize the visual presentation of list items, allowing you to create color schemes and highlight important elements. The value is applied as background-color to the component's root element.
-
-```html
-<!-- Red background -->
-<ListItem fill="#FF0000" text="Item with red background" />
-
-<!-- Semi-transparent blue -->
-<ListItem fill="rgba(52, 152, 219, 0.3)" text="Semi-transparent item" />
-
-<!-- Named color -->
-<ListItem fill="lightblue" text="Light blue item" />
-```

package/src/media/mdx/ListItem/fill.ru.mdx

@@ -1,24 +0,0 @@
-## Цвет заливки элемента
-
-Свойство `fill` определяет цвет фона элемента списка, позволяя точно контролировать визуальное оформление компонента.
-
-**Возможные значения:**
-
-- Hex-цвета: `#FF0000`, `#ffffff`, `#3498db`
-- RGB: `rgb(255, 0, 0)`, `rgb(52, 152, 219)`
-- RGBA: `rgba(255, 0, 0, 0.5)`, `rgba(0, 0, 0, 0.1)`
-- Именованные цвета: `red`, `blue`, `green`, `transparent`
-- HSL/HSLA: `hsl(0, 100%, 50%)`, `hsla(210, 70%, 53%, 0.8)`
-
-Принимает любой стандартный CSS-формат цвета. Свойство предоставляет гибкий способ настройки визуального представления элементов списка, позволяя создавать цветовые схемы и выделять важные элементы. Значение применяется как background-color к корневому элементу компонента.
-
-```html
-<!-- Красный фон -->
-<ListItem fill="#FF0000" text="Элемент с красным фоном" />
-
-<!-- Полупрозрачный синий -->
-<ListItem fill="rgba(52, 152, 219, 0.3)" text="Полупрозрачный элемент" />
-
-<!-- Именованный цвет -->
-<ListItem fill="lightblue" text="Светло-голубой элемент" />
-```

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

@@ -1,2 +0,0 @@
-- `body: any` — Slot for placing additional content at the bottom of the list item.
-- `trailing: any` — Slot for placing controls or indicators at the end of the list item.

package/src/media/mdx/ListItem/slots.ru.mdx

@@ -1,2 +0,0 @@
-- `body: any` — Слот для размещения дополнительного контента в нижней части элемента списка.
-- `trailing: any` — Слот для размещения элементов управления или индикаторов в конце элемента списка.

package/src/media/mdx/ListItem/wikiMdxListItem.ts

@@ -1,31 +0,0 @@
-import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
-
-import basicEn from './basic.en.mdx'
-import basicRu from './basic.ru.mdx'
-import fillEn from './fill.en.mdx'
-import fillRu from './fill.ru.mdx'
-import slotsEn from './slots.en.mdx'
-import slotsRu from './slots.ru.mdx'
-
-/**
- * MDX files for ListItem component
- *
- * MDX файлы для компонента ListItem
- */
-export const wikiMdxListItem: StorybookComponentsMdxItem = {
-  name: 'ListItem',
-  descriptions: {
-    basic: {
-      en: basicEn,
-      ru: basicRu
-    },
-    fill: {
-      en: fillEn,
-      ru: fillRu
-    },
-    slots: {
-      en: slotsEn,
-      ru: slotsRu
-    }
-  }
-}

package/src/media/mdx/ListMenu/listMenu.en.mdx

@@ -1,63 +0,0 @@
-Component for creating nested menus and organizing navigation elements with expandable structure.
-
-ListMenu is an auxiliary component for List, managing hierarchical menu structure with open/close submenu functionality. The component integrates with Window for positioning dropdown submenus, supports multiple nesting levels, and provides smooth navigation through tree-like data structures.
-
-**Key Features:**
-
-- Hierarchical menu organization with unlimited nesting
-- Open/close submenu state management
-- Integration with Window for dropdown menu positioning
-- Support for horizontal and vertical positioning axes
-- Automatic click and navigation handling
-- Adaptive submenu behavior
-- Menu item open/close events
-
-**Typical Use Cases:**
-
-- Navigation menus with subsections
-- Multi-level catalogs and categories
-- Tree-like data structures
-- Context menus with submenus
-- Navigation panels with grouping
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const menuItems = ref([
-  {
-    text: 'Home',
-    value: 'home'
-  },
-  {
-    text: 'Products',
-    value: 'products',
-    sublist: [
-      { text: 'Category 1', value: 'cat1' },
-      { text: 'Category 2', value: 'cat2' }
-    ]
-  },
-  {
-    text: 'About',
-    value: 'about'
-  }
-])
-</script>
-
-<template>
-  <List :items="menuItems">
-    <template #item="{ item }">
-      <ListMenu
-        v-if="item.sublist"
-        :items="item.sublist"
-        :axis="'y'"
-      >
-        <template #default>
-          {{ item.text }}
-        </template>
-      </ListMenu>
-      <div v-else>{{ item.text }}</div>
-    </template>
-  </List>
-</template>
-```

package/src/media/mdx/ListMenu/listMenu.ru.mdx

@@ -1,63 +0,0 @@
-Компонент для создания вложенных меню и организации навигационных элементов с раскрывающейся структурой.
-
-ListMenu является вспомогательным компонентом для List, управляющим иерархической структурой меню с возможностью открытия/закрытия подменю. Компонент интегрируется с Window для позиционирования выпадающих подменю, поддерживает множественные уровни вложенности и обеспечивает плавную навигацию по древовидной структуре данных.
-
-**Основные возможности:**
-
-- Иерархическая организация меню с неограниченной вложенностью
-- Управление состоянием открытия/закрытия подменю
-- Интеграция с Window для позиционирования выпадающих меню
-- Поддержка горизонтальной и вертикальной осей позиционирования
-- Автоматическая обработка кликов и навигации
-- Адаптивное поведение подменю
-- События открытия/закрытия элементов меню
-
-**Типичные сценарии использования:**
-
-- Навигационные меню с подразделами
-- Многоуровневые каталоги и категории
-- Древовидные структуры данных
-- Контекстные меню с подменю
-- Панели навигации с группировкой
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const menuItems = ref([
-  {
-    text: 'Главная',
-    value: 'home'
-  },
-  {
-    text: 'Продукты',
-    value: 'products',
-    sublist: [
-      { text: 'Категория 1', value: 'cat1' },
-      { text: 'Категория 2', value: 'cat2' }
-    ]
-  },
-  {
-    text: 'О нас',
-    value: 'about'
-  }
-])
-</script>
-
-<template>
-  <List :items="menuItems">
-    <template #item="{ item }">
-      <ListMenu
-        v-if="item.sublist"
-        :items="item.sublist"
-        :axis="'y'"
-      >
-        <template #default>
-          {{ item.text }}
-        </template>
-      </ListMenu>
-      <div v-else>{{ item.text }}</div>
-    </template>
-  </List>
-</template>
-```

package/src/media/mdx/ListMenu/wikiMdxListMenu.ts

@@ -1,19 +0,0 @@
-import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
-
-import listMenuEn from './listMenu.en.mdx'
-import listMenuRu from './listMenu.ru.mdx'
-
-/**
- * MDX files for ListMenu component
- *
- * MDX файлы для компонента ListMenu
- */
-export const wikiMdxListMenu: StorybookComponentsMdxItem = {
-  name: 'ListMenu',
-  descriptions: {
-    listMenu: {
-      en: listMenuEn,
-      ru: listMenuRu
-    }
-  }
-}

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

@@ -1,76 +0,0 @@
-A component for creating input fields with automatic data formatting according to a specified pattern in real-time.
-
-Mask provides structured input with support for various formats (phones, bank cards, dates, currencies, numbers). The component automatically adds separators and literal characters during typing, restricts input to only allowed characters, supports multiple patterns with automatic selection of the most suitable one, works together with the validation system through `pattern` and `check`, and provides built-in mask types for common data formats.
-
-**Key features:**
-
-- Automatic formatting with separator addition
-- Flexible templates with support for single and multiple masks
-- Built-in types: text, number, number-format, currency, date, time
-- Customizable special characters via `special` property
-- Input error prevention with character restriction
-- Integration with validation system through `pattern` and `check`
-- Alignment support (left/right) and direction (ltr/rtl)
-- Rubber groups with dynamic length
-- Visibility control for unfilled characters
-
-**Typical use cases:**
-
-- Phone number input fields
-- Bank card numbers and CVV codes
-- Dates and times in various formats
-- Postal codes and identifiers
-- Currency amounts with formatting
-- Numeric values with separators
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const phone = ref('')
-const cardNumber = ref('')
-const date = ref('')
-const amount = ref('')
-
-const handleInput = (value) => {
-  console.log('Entered value:', value)
-}
-</script>
-
-<template>
-  <!-- Russian phone -->
-  <Mask
-    v-model="phone"
-    mask="+7 *** *** ** **"
-    placeholder="Enter phone number"
-    @input="handleInput"
-  />
-
-  <!-- Bank card -->
-  <Mask
-    v-model="cardNumber"
-    mask="**** **** **** ****"
-    placeholder="0000 0000 0000 0000"
-  />
-
-  <!-- Multiple phone formats -->
-  <Mask
-    v-model="phone"
-    :mask="['+7 *** *** ** **', '8 *** *** ** **']"
-  />
-
-  <!-- Date with built-in type -->
-  <Mask
-    v-model="date"
-    type="date"
-    pattern="DD.MM.YYYY"
-  />
-
-  <!-- Currency -->
-  <Mask
-    v-model="amount"
-    type="currency"
-    currency="RUB"
-  />
-</template>
-```

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

@@ -1,76 +0,0 @@
-Компонент для создания полей ввода с автоматическим форматированием данных по заданному шаблону в реальном времени.
-
-Mask обеспечивает структурированный ввод с поддержкой различных форматов (телефоны, банковские карты, даты, валюты, числа). Компонент автоматически добавляет разделители и литеральные символы во время набора, ограничивает ввод только допустимыми символами, поддерживает множественные шаблоны с автоматическим выбором наиболее подходящего, работает совместно с системой валидации через `pattern` и `check`, и предоставляет встроенные типы масок для распространенных форматов данных.
-
-**Основные возможности:**
-
-- Автоматическое форматирование с добавлением разделителей
-- Гибкие шаблоны с поддержкой одиночных и множественных масок
-- Встроенные типы: text, number, number-format, currency, date, time
-- Настраиваемые специальные символы через свойство `special`
-- Предотвращение ошибок ввода с ограничением символов
-- Интеграция с системой валидации через `pattern` и `check`
-- Поддержка выравнивания (left/right) и направления (ltr/rtl)
-- Резиновые группы с динамической длиной
-- Управление видимостью незаполненных символов
-
-**Типичные сценарии использования:**
-
-- Поля ввода телефонных номеров
-- Номера банковских карт и CVV-кодов
-- Даты и время в различных форматах
-- Почтовые индексы и коды
-- Валютные суммы с форматированием
-- Числовые значения с разделителями
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const phone = ref('')
-const cardNumber = ref('')
-const date = ref('')
-const amount = ref('')
-
-const handleInput = (value) => {
-  console.log('Введено значение:', value)
-}
-</script>
-
-<template>
-  <!-- Российский телефон -->
-  <Mask
-    v-model="phone"
-    mask="+7 *** *** ** **"
-    placeholder="Введите номер телефона"
-    @input="handleInput"
-  />
-
-  <!-- Банковская карта -->
-  <Mask
-    v-model="cardNumber"
-    mask="**** **** **** ****"
-    placeholder="0000 0000 0000 0000"
-  />
-
-  <!-- Множественные форматы телефонов -->
-  <Mask
-    v-model="phone"
-    :mask="['+7 *** *** ** **', '8 *** *** ** **']"
-  />
-
-  <!-- Дата с встроенным типом -->
-  <Mask
-    v-model="date"
-    type="date"
-    pattern="DD.MM.YYYY"
-  />
-
-  <!-- Валюта -->
-  <Mask
-    v-model="amount"
-    type="currency"
-    currency="RUB"
-  />
-</template>
-```

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

@@ -1,38 +0,0 @@
-## Date and time types
-
-Date types in Mask provide automatic formatting and validation for date and time input with localization support.
-
-All date types automatically create masks according to regional settings, ignoring the `mask` property. The mask is determined by locale via `language` (DD.MM.YYYY for ru). Validation checks for correct numbers, days in month, and value ranges.
-
-### Types
-
-- `date` — full date in locale format (MM/DD/YYYY for US)
-- `datetime` — date and time (HH:MM) separated by space
-- `full` — full date and time with seconds (HH:MM:SS)
-- `time` — time in HH:MM:SS format
-- `hour-minute` — hours and minutes (HH:MM)
-- `hour`, `minute`, `second` — separate time components
-- `year`, `month`, `day` — separate date components
-- `year-month`, `day-month` — date component combinations
-
-### Localization
-
-Formats adapt via the `language` property:
-- `ru`, `de` — DD.MM.YYYY (31.12.2024)
-- `en-US` — MM/DD/YYYY (12/31/2024)
-
-### Examples
-
-```html
-<!-- US date format -->
-<Mask type="date" language="en-US" />
-
-<!-- Full date and time -->
-<Mask type="datetime" language="en-US" />
-
-<!-- Russian date format -->
-<Mask type="date" language="ru" />
-
-<!-- Time only -->
-<Mask type="time" />
-```

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

@@ -1,38 +0,0 @@
-## Типы дат и времени
-
-Типы дат в Mask обеспечивают автоматическое форматирование и валидацию для ввода даты и времени с учётом локализации.
-
-Все типы дат автоматически создают маски согласно региональным настройкам, игнорируя свойство `mask`. Маска определяется локалью через `language` (DD.MM.YYYY для ru). Валидация проверяет корректность чисел, дней в месяце и диапазонов.
-
-### Типы
-
-- `date` — полная дата в формате локали (DD.MM.YYYY для ru)
-- `datetime` — дата и время (HH:MM) через пробел
-- `full` — полная дата и время с секундами (HH:MM:SS)
-- `time` — время в формате HH:MM:SS
-- `hour-minute` — часы и минуты (HH:MM)
-- `hour`, `minute`, `second` — компоненты времени
-- `year`, `month`, `day` — компоненты даты
-- `year-month`, `day-month` — комбинации даты
-
-### Локализация
-
-Форматы адаптируются через свойство `language`:
-- `ru`, `de` — DD.MM.YYYY (31.12.2024)
-- `en-US` — MM/DD/YYYY (12/31/2024)
-
-### Примеры
-
-```html
-<!-- Русский формат даты -->
-<Mask type="date" language="ru" />
-
-<!-- Полная дата и время -->
-<Mask type="datetime" language="ru" />
-
-<!-- Английский формат даты -->
-<Mask type="date" language="en-US" />
-
-<!-- Только время -->
-<Mask type="time" />
-```

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

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

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

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

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

@@ -1,26 +0,0 @@
-## Preserving groups on deletion
-
-The `groupSave` property controls behavior when deleting characters in a mask with multiple types of special characters.
-
-**Possible values:**
-
-- `true` — preserves group separation on deletion (default)
-- `false` — allows characters from different groups to mix on deletion
-
-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
-<!-- Preserve group structure (default) -->
-<Mask
-  mask="***-###"
-  :special="['*', '#']"
-  groupSave
-/>
-
-<!-- Without structure preservation -->
-<Mask
-  mask="***-###"
-  :special="['*', '#']"
-  :groupSave="false"
-/>
-```

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

@@ -1,26 +0,0 @@
-## Сохранение групп при удалении
-
-Свойство `groupSave` управляет поведением при удалении символов в маске с несколькими типами специальных символов.
-
-**Возможные значения:**
-
-- `true` — сохраняет разделение групп при удалении (по умолчанию)
-- `false` — позволяет символам из разных групп смешиваться при удалении
-
-При `groupSave: true` и наличии разных групп впереди символ не удаляется физически, а помечается маркером удаления, сохраняя структуру маски. При `false` символы удаляются полностью, что может привести к "схлопыванию" групп и потере структуры. Работает только для фиксированных (не резиновых) групп специальных символов.
-
-```html
-<!-- Сохранение структуры групп (по умолчанию) -->
-<Mask
-  mask="***-###"
-  :special="['*', '#']"
-  groupSave
-/>
-
-<!-- Без сохранения структуры -->
-<Mask
-  mask="***-###"
-  :special="['*', '#']"
-  :groupSave="false"
-/>
-```

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

@@ -1,21 +0,0 @@
-## Mask template
-
-The `mask` property defines a template for structured data input with automatic real-time formatting.
-
-**Possible values:**
-
-- `string` — single mask for fixed format
-- `string[]` — array of masks to support multiple formats with automatic selection
-
-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.
-
-```html
-<!-- Russian phone -->
-<Mask mask="+7 *** *** ** **" />
-
-<!-- Bank card -->
-<Mask mask="**** **** **** ****" />
-
-<!-- Multiple formats -->
-<Mask :mask="['+7 *** *** ** **', '8 *** *** ** **']" />
-```

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

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

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

@@ -1,28 +0,0 @@
-## Input character validation
-
-The `match` property defines a regular expression for checking the validity of entered characters.
-
-**Possible values:**
-
-- `RegExp` — regular expression (default `/[0-9]/`)
-- `string` — string converted to regular expression
-
-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
-<!-- Digits only (default) -->
-<Mask mask="***-***" />
-
-<!-- HEX characters -->
-<Mask mask="***-***" :match="/[A-F0-9]/i" />
-
-<!-- Different rules for groups -->
-<Mask
-  mask="***-###"
-  match="\\d"
-  :special="{
-    '*': {},
-    '#': { match: /[A-Z]/ }
-  }"
-/>
-```

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

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