@dxtmisha/wiki 0.24.2 → 0.25.1

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

@@ -1,18 +1,55 @@
-## Description
+Component for creating interactive list items with flexible content structure and multiple display areas.
 
-Versatile list item component for displaying structured content with labels, descriptions, and additional elements. ListItem provides consistent representation of elements in lists, menus, and navigation structures.
+ListItem provides uniform presentation of items in lists, menus, and navigation structures. The component supports labels, descriptions, icons, status badges, interactive states (focus, selection, disabled), loading with progress and skeleton, and ripple effect for enhanced feedback.
 
-### Key Features
+**Key features:**
 
-- Multiple content areas: label, description, prefix, suffix, caption
+- Multiple content areas (label, description, prefix, suffix, caption)
 - Icon support with flexible positioning and alignment
 - Badge integration for status indicators
-- Interactive states: focus, selected, disabled, readonly
-- Progress and skeleton loading states
-- Ripple effect for enhanced user feedback
-- Flexible tag options: button, link, div, span
+- Interactive states (focus, selected, disabled, readonly)
+- Loading states with progress and skeleton
+- Ripple effect for visual feedback
+- Flexible tag variants (button, link, div, span)
 - Built-in accessibility support
 
-### Recommendations
+**Common use cases:**
 
-Use ListItem to create list elements, menu items, settings, and other interface elements that require structured information display. Particularly effective in mobile interfaces and lists with multiple selection.
+- List items and navigation menus
+- Settings and configuration options
+- Lists with multiple selection
+- Contact lists and catalogs
+- Mobile interfaces and action lists
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const items = ref([
+  { text: 'List item 1', value: '1', selected: false },
+  { text: 'List item 2', value: '2', selected: true },
+  { text: 'List item 3', value: '3', selected: false }
+])
+
+const handleClick = (item) => {
+  item.selected = !item.selected
+  console.log('Item selected:', item.text)
+}
+</script>
+
+<template>
+  <List>
+    <ListItem
+      v-for="item in items"
+      :key="item.value"
+      :text="item.text"
+      :selected="item.selected"
+      @click="handleClick(item)"
+    >
+      <template #prefix>
+        <Icon name="check" v-if="item.selected" />
+      </template>
+    </ListItem>
+  </List>
+</template>
+```

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

@@ -1,18 +1,55 @@
-## Описание
+Компонент для создания интерактивных элементов списков с гибкой структурой контента и множественными областями отображения.
 
-Универсальный компонент элемента списка для отображения структурированного контента с метками, описаниями и дополнительными элементами. ListItem обеспечивает единообразное представление элементов в списках, меню и навигационных структурах.
+ListItem обеспечивает единообразное представление элементов в списках, меню и навигационных структурах. Компонент поддерживает метки, описания, иконки, значки состояния, интерактивные состояния (фокус, выбор, отключение), загрузку с прогрессом и скелетоном, а также эффект пульсации для улучшенной обратной связи.
 
-### Основные возможности
+**Основные возможности:**
 
-- Множественные области контента: метка, описание, префикс, суффикс, заголовок
+- Множественные области контента (метка, описание, префикс, суффикс, заголовок)
 - Поддержка иконок с гибким позиционированием и выравниванием
 - Интеграция значков для индикаторов статуса
-- Интерактивные состояния: фокус, выбранный, отключенный, только для чтения
+- Интерактивные состояния (фокус, выбранный, отключенный, только чтение)
 - Состояния загрузки с прогрессом и скелетоном
-- Эффект пульсации для улучшенной обратной связи
-- Гибкие варианты тегов: кнопка, ссылка, div, span
+- Эффект пульсации для визуальной обратной связи
+- Гибкие варианты тегов (button, link, div, span)
 - Встроенная поддержка доступности
 
-### Рекомендации
+**Типичные сценарии использования:**
 
-Используйте ListItem для создания элементов списков, пунктов меню, настроек и других интерфейсных элементов, где требуется структурированное отображение информации. Особенно эффективен в мобильных интерфейсах и списках с множественным выбором.
+- Элементы списков и меню навигации
+- Пункты настроек и конфигурации
+- Списки с множественным выбором
+- Контактные списки и каталоги
+- Мобильные интерфейсы и action lists
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const items = ref([
+  { text: 'Элемент списка 1', value: '1', selected: false },
+  { text: 'Элемент списка 2', value: '2', selected: true },
+  { text: 'Элемент списка 3', value: '3', selected: false }
+])
+
+const handleClick = (item) => {
+  item.selected = !item.selected
+  console.log('Элемент выбран:', item.text)
+}
+</script>
+
+<template>
+  <List>
+    <ListItem
+      v-for="item in items"
+      :key="item.value"
+      :text="item.text"
+      :selected="item.selected"
+      @click="handleClick(item)"
+    >
+      <template #prefix>
+        <Icon name="check" v-if="item.selected" />
+      </template>
+    </ListItem>
+  </List>
+</template>
+```

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

@@ -1,10 +1,24 @@
-### `fill`
+## Element fill color
 
-Property for setting a specific fill color of the list item element.
+The `fill` property defines the background color of the list item element, allowing precise control over the component's visual styling.
 
-- Accepts color values in any standard CSS format
-- Supports hex colors: `#FF0000`, `#ffffff`
-- Supports RGB: `rgb(255, 0, 0)`
-- Supports RGBA: `rgba(255, 0, 0, 0.5)`
-- Supports named colors: `red`, `blue`, `transparent`
-- Provides precise control over component background color
+**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,10 +1,24 @@
-### `fill`
+## Цвет заливки элемента
 
-Свойство для настройки конкретного цвета заливки элемента списка.
+Свойство `fill` определяет цвет фона элемента списка, позволяя точно контролировать визуальное оформление компонента.
 
-- Принимает значения цветов в любом стандартном CSS формате
-- Поддерживает hex цвета: `#FF0000`, `#ffffff`
-- Поддерживает RGB: `rgb(255, 0, 0)`
-- Поддерживает RGBA: `rgba(255, 0, 0, 0.5)`
-- Поддерживает именованные цвета: `red`, `blue`, `transparent`
-- Обеспечивает точный контроль над цветом фона компонента
+**Возможные значения:**
+
+- 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

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

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

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

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

@@ -4,10 +4,8 @@ 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 slotBodyEn from './slot.body.en.mdx'
-import slotBodyRu from './slot.body.ru.mdx'
-import slotTrailingEn from './slot.trailing.en.mdx'
-import slotTrailingRu from './slot.trailing.ru.mdx'
+import slotsEn from './slots.en.mdx'
+import slotsRu from './slots.ru.mdx'
 
 /**
  * MDX files for ListItem component
@@ -17,21 +15,17 @@ import slotTrailingRu from './slot.trailing.ru.mdx'
 export const wikiMdxListItem: StorybookComponentsMdxItem = {
   name: 'ListItem',
   descriptions: {
-    'basic': {
+    basic: {
       en: basicEn,
       ru: basicRu
     },
-    'fill': {
+    fill: {
       en: fillEn,
       ru: fillRu
     },
-    'slot.body': {
-      en: slotBodyEn,
-      ru: slotBodyRu
-    },
-    'slot.trailing': {
-      en: slotTrailingEn,
-      ru: slotTrailingRu
+    slots: {
+      en: slotsEn,
+      ru: slotsRu
     }
   }
 }

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

@@ -1,2 +1,63 @@
-The ListMenu component is an auxiliary component for the List component, designed to create nested menus and organize navigation elements with expandable structure. It provides hierarchical menu organization with open/close submenu functionality, supports nested menu levels, and integrates seamlessly with the List component ecosystem.
+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,2 +1,63 @@
-Компонент ListMenu представляет собой вспомогательный компонент для компонента List, предназначенный для создания вложенных меню и организации навигационных элементов с раскрывающейся структурой. Он обеспечивает иерархическую организацию меню с возможностью открытия/закрытия подменю, поддерживает вложенные уровни меню и интегрируется с экосистемой компонентов List.
+Компонент для создания вложенных меню и организации навигационных элементов с раскрывающейся структурой.
 
+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/Mask/basic.en.mdx

@@ -1,24 +1,76 @@
-The Mask component provides structured data input with real-time automatic formatting. Allows creating convenient fields for phones, dates, bank cards and other formatted data.
+A component for creating input fields with automatic data formatting according to a specified pattern in real-time.
 
-### Key features
+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.
 
-- **Automatic formatting**: Adds separators and symbols during typing
-- **Flexible templates**: Support for single and multiple masks with automatic selection
-- **Error prevention**: Restricts input to only allowed characters
-- **Validation integration**: Works together with the data validation system
-- **Data type support**: Built-in presets for numbers, currencies and dates
+**Key features:**
 
-### Usage
+- 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
 
-Use the component to create input fields with a defined structure: phone numbers, bank cards, dates, postal codes and any other data requiring a specific format.
+**Typical use cases:**
 
-### Recommendations
+- 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
 
-Keep templates short and clear for the user. When supporting multiple formats, use an array of masks — the component will automatically select the most suitable template as the user types.
+```html
+<script setup>
+import { ref } from 'vue'
 
-- Define a pattern with special characters for input groups
-- Literals are auto-inserted during typing
-- Multiple patterns can be provided; the best match is selected dynamically
-- Works with validation, number/currency formats, and date/time helpers
+const phone = ref('')
+const cardNumber = ref('')
+const date = ref('')
+const amount = ref('')
 
-Tip: keep patterns short and explicit to improve usability.
+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,17 +1,76 @@
-Компонент Mask обеспечивает структурированный ввод данных с автоматическим форматированием в реальном времени. Позволяет создавать удобные поля для телефонов, дат, банковских карт и других форматированных данных.
+Компонент для создания полей ввода с автоматическим форматированием данных по заданному шаблону в реальном времени.
 
-### Основные возможности
+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>
+```