@dxtmisha/wiki 0.24.2 → 0.25.1

package/src/media/mdx/List/list.en.mdx

@@ -1,22 +1,64 @@
-The List component is a powerful interactive list with support for hierarchical data, keyboard navigation, and search functionality. It is designed to display structured data with navigation capabilities, item selection, and interaction through keyboard and mouse.
+A component for creating interactive lists with support for hierarchical data, keyboard navigation, and search functionality.
 
-## Core Features
+List manages the display of structured data with navigation capabilities, item selection, and interaction through keyboard and mouse. The component supports various item types (regular items, groups, menus, dividers, subtitles, HTML content), automatically handles complex hierarchical structures, and provides intuitive navigation. The built-in search system works in real-time with match highlighting across the entire data hierarchy.
 
-List supports various item types: regular items, groups, menus, separators, and subtitles. The component automatically handles complex hierarchical structures and provides intuitive navigation between elements.
+**Key features:**
 
-## Keyboard Navigation
+- Various item types (item, group, menu, line, subtitle, html)
+- Hierarchical structure with nested groups and menus
+- Full keyboard navigation (↑/↓, Enter, →, ←)
+- Built-in real-time search with match highlighting
+- Item selection control via v-model:selected
+- Focus control via v-model:focus
+- Lightweight mode for large lists (lite)
+- Display axis configuration (x/y) and dividers
+- Click and menu close events
 
-The component supports full keyboard navigation:
-- **↑/↓** - navigate between items
-- **Enter/→** - open groups/menus or select item
-- **←** - close groups/menus
-- **Type text** - search through items
-- **Backspace** - clear search
+**Typical use cases:**
 
-## Search and Highlighting
+- Navigation menus and option lists
+- Dropdown lists with hierarchical structure
+- Product and category catalogs
+- Settings lists with grouping
+- Context menus with submenus
+- File and folder lists
+- Filters with multiple selection
 
-Built-in search functionality allows finding items in real-time with automatic highlighting of matches. Search works across the entire data hierarchy, including nested groups and menus.
+```html
+<script setup>
+import { ref } from 'vue'
 
-## Performance
+const selected = ref(['item2'])
+const focus = ref(null)
 
-For working with large datasets, the component provides a lightweight rendering mode that automatically activates when the specified threshold of item count is exceeded, ensuring high performance without losing functionality.
+const listData = ref([
+  { label: 'First item', value: 'item1' },
+  { label: 'Second item', value: 'item2' },
+  { type: 'line' },
+  { type: 'subtitle', label: 'Item group' },
+  {
+    label: 'Group with submenu',
+    value: 'group1',
+    type: 'group',
+    list: [
+      { label: 'Nested item 1', value: 'nested1' },
+      { label: 'Nested item 2', value: 'nested2' }
+    ]
+  }
+])
+
+const handleClick = (event) => {
+  console.log('Item clicked:', event.detail.value)
+}
+</script>
+
+<template>
+  <List
+    v-model:selected="selected"
+    v-model:focus="focus"
+    :list="listData"
+    highlight="text"
+    @click="handleClick"
+  />
+</template>
+```

package/src/media/mdx/List/list.ru.mdx

@@ -1,22 +1,64 @@
-Компонент List представляет собой мощный интерактивный список с поддержкой иерархических данных, клавиатурной навигации и функциональности поиска. Он предназначен для отображения структурированных данных с возможностью навигации, выбора элементов и взаимодействия через клавиатуру и мышь.
+Компонент для создания интерактивных списков с поддержкой иерархических данных, клавиатурной навигации и функциональности поиска.
 
-## Основные возможности
+List управляет отображением структурированных данных с возможностью навигации, выбора элементов и взаимодействия через клавиатуру и мышь. Компонент поддерживает различные типы элементов (обычные элементы, группы, меню, разделители, подзаголовки, HTML-контент), автоматически обрабатывает сложные иерархические структуры и предоставляет интуитивную навигацию. Встроенная система поиска работает в реальном времени с выделением совпадений по всей иерархии данных.
 
-List поддерживает различные типы элементов: обычные элементы, группы, меню, разделители и подзаголовки. Компонент автоматически обрабатывает сложные иерархические структуры и предоставляет интуитивную навигацию между элементами.
+**Основные возможности:**
 
-## Навигация с клавиатуры
+- Различные типы элементов (item, group, menu, line, subtitle, html)
+- Иерархическая структура с вложенными группами и меню
+- Полная клавиатурная навигация (↑/↓, Enter, →, ←)
+- Встроенный поиск в реальном времени с подсветкой совпадений
+- Управление выбором элементов через v-model:selected
+- Управление фокусом через v-model:focus
+- Облегченный режим для больших списков (lite)
+- Настройка осей отображения (x/y) и разделителей
+- События клика и закрытия меню
 
-Компонент поддерживает полную навигацию с клавиатуры:
-- **↑/↓** - перемещение между элементами
-- **Enter/→** - открытие групп/меню или выбор элемента
-- **←** - закрытие групп/меню
-- **Ввод текста** - поиск по элементам
-- **Backspace** - очистка поиска
+**Типичные сценарии использования:**
 
-## Поиск и выделение
+- Навигационные меню и списки опций
+- Выпадающие списки с иерархической структурой
+- Каталоги товаров и категорий
+- Списки настроек с группировкой
+- Контекстные меню с подменю
+- Списки файлов и папок
+- Фильтры с множественным выбором
 
-Встроенная функциональность поиска позволяет находить элементы в реальном времени с автоматическим выделением совпадений. Поиск работает по всей иерархии данных, включая вложенные группы и меню.
+```html
+<script setup>
+import { ref } from 'vue'
 
-## Производительность
+const selected = ref(['item2'])
+const focus = ref(null)
 
-Для работы с большими наборами данных компонент предоставляет облегченный режим рендеринга, который автоматически активируется при превышении заданного порога количества элементов, обеспечивая высокую производительность без потери функциональности.
+const listData = ref([
+  { label: 'Первый элемент', value: 'item1' },
+  { label: 'Второй элемент', value: 'item2' },
+  { type: 'line' },
+  { type: 'subtitle', label: 'Группа элементов' },
+  {
+    label: 'Группа с подменю',
+    value: 'group1',
+    type: 'group',
+    list: [
+      { label: 'Вложенный элемент 1', value: 'nested1' },
+      { label: 'Вложенный элемент 2', value: 'nested2' }
+    ]
+  }
+])
+
+const handleClick = (event) => {
+  console.log('Клик по элементу:', event.detail.value)
+}
+</script>
+
+<template>
+  <List
+    v-model:selected="selected"
+    v-model:focus="focus"
+    :list="listData"
+    highlight="text"
+    @click="handleClick"
+  />
+</template>
+```

package/src/media/mdx/List/lite.en.mdx

@@ -1,19 +1,24 @@
-## Lightweight list mode
+## Managing list performance
 
-The `lite` and `liteThreshold` properties control the simplified (lightweight) rendering mode of the list.
+The `lite` and `liteThreshold` properties work together to optimize rendering of large lists. They enable a lightweight display mode that reduces visual complexity and improves performance when the threshold number of items is exceeded.
 
-### Properties
+**Properties:**
 
-- **lite** — Enables the lightweight rendering mode
-- **liteThreshold** — Item count threshold that is applied when `lite` is enabled
+- `lite` — enables lightweight list display mode
+- `liteThreshold` — item count threshold for activating simplified mode, defaults to configuration value
 
-### Property relationship
+Display mode is determined automatically: when `lite=false`, the list always renders in full mode. When `lite=true`, the component compares the total item count with `liteThreshold`. If the item count does not exceed the threshold, full mode with extended visualization is used. When the threshold is exceeded, lightweight mode is activated to reduce rendering load. Use `lite` for working with dynamic data of variable size.
 
-The properties work together to decide when the simplified rendering should be applied:
+```html
+<!-- Automatic mode switching -->
+<List :list="items" :lite="true" :liteThreshold="50" />
 
-- If `lite = false` (or not set), the list always renders in full mode and `liteThreshold` is ignored
-- If `lite = true`, the component compares the total item count with `liteThreshold`
-  - When `count <= liteThreshold`, full mode is used (no simplification)
-  - When `count > liteThreshold`, lightweight mode turns on to reduce visual complexity and speed up rendering
+<!-- Always full mode -->
+<List :list="items" :lite="false" />
 
-This approach helps avoid unnecessary load with large datasets while keeping the familiar full rendering for short lists.
+<!-- Lightweight mode for large catalogs -->
+<List :list="products" :lite="true" :liteThreshold="100" />
+
+<!-- Custom threshold for mobile devices -->
+<List :list="data" :lite="true" :liteThreshold="30" />
+```

package/src/media/mdx/List/lite.ru.mdx

@@ -1,19 +1,24 @@
-## Облегчённый режим списка
+## Управление производительностью списка
 
-Свойства `lite` и `liteThreshold` предназначены для управления облегчённым (упрощённым) отображением списка.
+Свойства `lite` и `liteThreshold` работают в связке для оптимизации рендеринга больших списков. Они включают облегченный режим отображения, который снижает визуальную сложность и ускоряет производительность при превышении порогового количества элементов.
 
-### Свойства
+**Свойства:**
 
-- **lite** — Включает облегчённый режим отображения
-- **liteThreshold** — Порог количества элементов, при превышении которого активируется упрощённый режим (когда `lite` включён)
+- `lite` — включает облегченный режим отображения списка
+- `liteThreshold` — порог количества элементов для активации упрощенного режима, по умолчанию зависит от конфигурации
 
-### Взаимосвязь свойств
+Режим отображения определяется автоматически: при `lite=false` список всегда рендерится в полном режиме. При `lite=true` компонент сравнивает общее количество элементов с `liteThreshold`. Если количество элементов не превышает порог, используется полный режим с расширенной визуализацией. При превышении порога включается облегченный режим для снижения нагрузки на рендеринг. Используйте `lite` для работы с динамическими данными переменного размера.
 
-Свойства работают совместно и определяют, когда применять упрощённое отображение:
+```html
+<!-- Автоматическое переключение режима -->
+<List :list="items" :lite="true" :liteThreshold="50" />
 
-- Если `lite = false` (или не задан), список всегда рендерится в полном режиме, а `liteThreshold` игнорируется
-- Если `lite = true`, компонент сравнивает общее число элементов с `liteThreshold`
-  - При `count <= liteThreshold` используется полный режим (упрощение не требуется)
-  - При `count > liteThreshold` включается облегчённый режим для снижения визуальной сложности и ускорения рендера
+<!-- Всегда полный режим -->
+<List :list="items" :lite="false" />
 
-Такой подход предотвращает излишнюю нагрузку при больших объёмах данных и сохраняет привычное полное отображение для коротких списков.
+<!-- Облегченный режим для больших каталогов -->
+<List :list="products" :lite="true" :liteThreshold="100" />
+
+<!-- Пользовательский порог для мобильных устройств -->
+<List :list="data" :lite="true" :liteThreshold="30" />
+```

package/src/media/mdx/List/slot.html.en.mdx

@@ -1,31 +1,82 @@
-### `slot: html`
+### `html`
 
-List supports named slots for items with `type: 'html'`. The slot name must match the item's `value`.
+Dynamic slot for displaying arbitrary HTML content or Vue components in list items with type `html`.
 
-Usage rules
+List provides a flexible mechanism for rendering custom content through named slots. When a list item has `type: 'html'`, the component searches for a slot with a name matching the `value` field of that item. If a slot is found, its content is used for rendering the item. Otherwise, the component displays HTML from the `label` field via `innerHTML`.
 
-- The list item must have `type: 'html'` and a string `value` used as the slot key
-- If a slot with the same name exists, its content replaces the item rendering
-- If no slot exists, the component renders raw HTML from the item's `label` via `innerHTML`
+**Key features:**
 
-Example
+- Dynamic slot binding by `value` field
+- Support for Vue components and interactive elements in slots
+- Fallback rendering via `innerHTML` when slot is absent
+- Integration into hierarchical list structure
+- Automatic class and style management
+
+**Typical use cases:**
+
+- Advertisement and promo blocks within lists
+- Custom cards with interactive content
+- Embedded forms and controls
+- Dynamically loaded components
+- Special dividers with additional logic
+
+**How it works:**
+
+1. List item must have `type: 'html'`
+2. The `value` field is used as the slot name (lookup key)
+3. If a slot with that name exists — its content is rendered
+4. If no slot exists — HTML from the `label` field is displayed
 
 ```html
-<List
-  :list="[
-    { type: 'html', value: 'promoBlock', label: '<strong>Fallback HTML</strong>' },
-    { label: 'Regular item', value: 'item1' }
-  ]"
->
-  <template #promoBlock>
-    <div class="custom-promo">Custom slot content</div>
-  </template>
-</List>
-```
+<script setup>
+import { ref } from 'vue'
+
+const listData = ref([
+  { label: 'Regular item', value: 'item1' },
+  {
+    type: 'html',
+    value: 'promoBlock',
+    label: '<strong>Fallback HTML (if slot is not defined)</strong>'
+  },
+  { label: 'Another item', value: 'item2' },
+  {
+    type: 'html',
+    value: 'customCard',
+    label: '<div>Fallback content</div>'
+  }
+])
 
-Notes
+const handlePromoClick = () => {
+  console.log('Promo block clicked')
+}
+</script>
 
-- The slot receives no props; use static content or app state
-- Prefer slots for Vue-rendered content; use `label` with HTML only for simple, trusted markup
+<template>
+  <List :list="listData">
+    <!-- Slot for promo block -->
+    <template #promoBlock>
+      <div class="custom-promo" @click="handlePromoClick">
+        <h3>Special Offer</h3>
+        <p>Custom Vue component with full capabilities</p>
+        <button>Learn More</button>
+      </div>
+    </template>
+
+    <!-- Slot for custom card -->
+    <template #customCard>
+      <div class="card">
+        <img src="/image.jpg" alt="Image">
+        <span>Interactive content</span>
+      </div>
+    </template>
+  </List>
+</template>
+```
 
+**Important notes:**
 
+- The slot does not receive props automatically; use external state or composables to pass data
+- For interactive content, prefer slots over `innerHTML`
+- Use `label` with HTML only for simple and trusted markup
+- Slot name must exactly match the `value` field
+- HTML from `label` is inserted via `innerHTML` — ensure the content is safe

package/src/media/mdx/List/slot.html.ru.mdx

@@ -1,31 +1,82 @@
-### `slot: html`
+### `html`
 
-Компонент List поддерживает именованные слоты для элементов с `type: 'html'`. Имя слота должно совпадать со значением поля `value` у элемента.
+Динамический слот для отображения произвольного HTML-контента или Vue-компонентов в элементах списка с типом `html`.
 
-Правила использования
+List предоставляет гибкий механизм рендеринга пользовательского контента через именованные слоты. Когда элемент списка имеет `type: 'html'`, компонент ищет слот с именем, соответствующим значению поля `value` этого элемента. Если слот найден, его содержимое используется для рендеринга элемента. В противном случае компонент отобразит HTML из поля `label` через `innerHTML`.
 
-- Элемент списка должен иметь `type: 'html'` и строковое поле `value`, которое используется как ключ слота
-- Если слот с таким именем существует, его содержимое заменяет рендеринг элемента
-- Если слота нет, компонент рендерит HTML из поля `label` через `innerHTML`
+**Основные возможности:**
 
-Пример
+- Динамическое связывание слотов по значению поля `value`
+- Поддержка Vue-компонентов и интерактивных элементов в слотах
+- Резервный рендеринг через `innerHTML` при отсутствии слота
+- Интеграция в иерархическую структуру списка
+- Автоматическое управление классами и стилями
+
+**Типичные сценарии использования:**
+
+- Рекламные и промо-блоки внутри списков
+- Кастомные карточки с интерактивным контентом
+- Встроенные формы и элементы управления
+- Динамически загружаемые компоненты
+- Специальные разделители с дополнительной логикой
+
+**Принцип работы:**
+
+1. Элемент списка должен иметь `type: 'html'`
+2. Поле `value` используется как имя слота (ключ для поиска)
+3. Если слот с таким именем существует — рендерится его содержимое
+4. Если слота нет — отображается HTML из поля `label`
 
 ```html
-<List
-  :list="[
-    { type: 'html', value: 'promoBlock', label: '<strong>Запасной HTML</strong>' },
-    { label: 'Обычный элемент', value: 'item1' }
-  ]"
->
-  <template #promoBlock>
-    <div class="custom-promo">Пользовательский контент слота</div>
-  </template>
-</List>
-```
+<script setup>
+import { ref } from 'vue'
+
+const listData = ref([
+  { label: 'Обычный элемент', value: 'item1' },
+  {
+    type: 'html',
+    value: 'promoBlock',
+    label: '<strong>Запасной HTML (если слот не определён)</strong>'
+  },
+  { label: 'Другой элемент', value: 'item2' },
+  {
+    type: 'html',
+    value: 'customCard',
+    label: '<div>Резервный контент</div>'
+  }
+])
 
-Заметки
+const handlePromoClick = () => {
+  console.log('Промо-блок нажат')
+}
+</script>
 
-- Слот не получает пропсы; используйте статический контент или состояние приложения
-- Предпочитайте слоты для Vue-контента; используйте `label` с HTML только для простого и доверенного разметки
+<template>
+  <List :list="listData">
+    <!-- Слот для промо-блока -->
+    <template #promoBlock>
+      <div class="custom-promo" @click="handlePromoClick">
+        <h3>Специальное предложение</h3>
+        <p>Пользовательский Vue-компонент со всеми возможностями</p>
+        <button>Подробнее</button>
+      </div>
+    </template>
+
+    <!-- Слот для кастомной карточки -->
+    <template #customCard>
+      <div class="card">
+        <img src="/image.jpg" alt="Изображение">
+        <span>Интерактивный контент</span>
+      </div>
+    </template>
+  </List>
+</template>
+```
 
+**Важные замечания:**
 
+- Слот не получает props автоматически; используйте внешнее состояние или композабли для передачи данных
+- Для интерактивного контента предпочитайте слоты, а не `innerHTML`
+- Используйте `label` с HTML только для простой и доверенной разметки
+- Имя слота должно точно совпадать со значением поля `value`
+- HTML из `label` вставляется через `innerHTML` — убедитесь, что контент безопасен

package/src/media/mdx/ListGroup/listGroup.en.mdx

@@ -1,2 +1,56 @@
-The ListGroup component is an auxiliary component for the List component, designed to group and organize list items with a collapsible structure. It provides hierarchical content organization with expand/collapse functionality, supports nested groups, and integrates seamlessly with the List component ecosystem.
+Component for grouping and organizing list items with collapsible structure.
 
+ListGroup is an auxiliary component for List, managing hierarchical content organization with expand/collapse functionality. The component integrates with MotionTransform for smooth animations, supports unlimited nesting levels, and provides convenient navigation through structured data.
+
+**Key features:**
+
+- Hierarchical content organization with unlimited nesting
+- Expand/collapse animations via MotionTransform
+- State management via props or internal state
+- Automatic group content visibility control
+- Integration with List component ecosystem
+- Customization support via head and list slots
+- Group state change events
+
+**Common use cases:**
+
+- Grouping list items by categories
+- Creating tree-like navigation structures
+- Organizing settings and options by sections
+- Multi-level menus and catalogs
+- FAQ sections with expandable answers
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const items = [
+  { text: 'Item 1', value: '1' },
+  { text: 'Item 2', value: '2' },
+  { text: 'Item 3', value: '3' }
+]
+
+const isOpen = ref(true)
+</script>
+
+<template>
+  <List>
+    <ListGroup v-model:open="isOpen">
+      <template #head="{ open }">
+        <div class="group-header">
+          <span>{{ open ? '▼' : '▶' }}</span>
+          <span>Group Items</span>
+        </div>
+      </template>
+
+      <template #list>
+        <ListItem
+          v-for="item in items"
+          :key="item.value"
+          :text="item.text"
+        />
+      </template>
+    </ListGroup>
+  </List>
+</template>
+```

package/src/media/mdx/ListGroup/listGroup.ru.mdx

@@ -1,2 +1,56 @@
-Компонент ListGroup представляет собой вспомогательный компонент для компонента List, предназначенный для группировки и организации элементов списка со сворачиваемой структурой. Он обеспечивает иерархическую организацию контента с возможностью сворачивания/разворачивания групп, поддерживает вложенные группы и интегрируется с экосистемой компонентов List.
+Компонент для группировки и организации элементов списка со сворачиваемой структурой.
 
+ListGroup является вспомогательным компонентом для List, управляющим иерархической организацией контента с возможностью разворачивания/сворачивания групп. Компонент интегрируется с MotionTransform для плавных анимаций, поддерживает неограниченную вложенность групп и обеспечивает удобную навигацию по структурированным данным.
+
+**Основные возможности:**
+
+- Иерархическая организация контента с неограниченной вложенностью
+- Анимации разворачивания/сворачивания групп через MotionTransform
+- Управление состоянием открытия через props или внутренний state
+- Автоматическое управление видимостью содержимого группы
+- Интеграция с экосистемой компонентов List
+- Поддержка кастомизации через слоты head и list
+- События изменения состояния группы
+
+**Типичные сценарии использования:**
+
+- Группировка элементов списка по категориям
+- Создание древовидных структур навигации
+- Организация настроек и опций по разделам
+- Многоуровневые меню и каталоги
+- FAQ секции с раскрывающимися ответами
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const items = [
+  { text: 'Элемент 1', value: '1' },
+  { text: 'Элемент 2', value: '2' },
+  { text: 'Элемент 3', value: '3' }
+]
+
+const isOpen = ref(true)
+</script>
+
+<template>
+  <List>
+    <ListGroup v-model:open="isOpen">
+      <template #head="{ open }">
+        <div class="group-header">
+          <span>{{ open ? '▼' : '▶' }}</span>
+          <span>Группа элементов</span>
+        </div>
+      </template>
+
+      <template #list>
+        <ListItem
+          v-for="item in items"
+          :key="item.value"
+          :text="item.text"
+        />
+      </template>
+    </ListGroup>
+  </List>
+</template>
+```

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

@@ -0,0 +1,10 @@
+### `head`
+
+Slot for placing the header content with toggle functionality.
+
+**Parameters:**
+- `open: boolean` — current open/close state
+
+### `list`
+
+Slot for placing the list content.

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

@@ -0,0 +1,10 @@
+### `head`
+
+Слот для размещения содержимого заголовка с функциональностью переключения.
+
+**Параметры:**
+- `open: boolean` — текущее состояние открытия/закрытия
+
+### `list`
+
+Слот для размещения содержимого списка.

package/src/media/mdx/ListGroup/wikiMdxListGroup.ts

@@ -2,10 +2,8 @@ import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
 
 import listGroupEn from './listGroup.en.mdx'
 import listGroupRu from './listGroup.ru.mdx'
-import slotHeadEn from './slot.head.en.mdx'
-import slotHeadRu from './slot.head.ru.mdx'
-import slotListEn from './slot.list.en.mdx'
-import slotListRu from './slot.list.ru.mdx'
+import slotsEn from './slots.en.mdx'
+import slotsRu from './slots.ru.mdx'
 
 /**
  * MDX files for ListGroup component
@@ -15,17 +13,13 @@ import slotListRu from './slot.list.ru.mdx'
 export const wikiMdxListGroup: StorybookComponentsMdxItem = {
   name: 'ListGroup',
   descriptions: {
-    'listGroup': {
+    listGroup: {
       en: listGroupEn,
       ru: listGroupRu
     },
-    'slot.head': {
-      en: slotHeadEn,
-      ru: slotHeadRu
-    },
-    'slot.list': {
-      en: slotListEn,
-      ru: slotListRu
+    slots: {
+      en: slotsEn,
+      ru: slotsRu
     }
   }
 }