@dxtmisha/wiki 0.39.3 → 0.39.5

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

@@ -0,0 +1,56 @@
+Компонент для группировки и организации элементов списка со сворачиваемой структурой.
+
+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,2 @@
+- `head(open: boolean): any` — Slot for placing the header content with toggle functionality.
+- `list: any` — Slot for placing the list content.

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

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

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

@@ -0,0 +1,25 @@
+import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
+
+import listGroupEn from './listGroup.en.mdx'
+import listGroupRu from './listGroup.ru.mdx'
+import slotsEn from './slots.en.mdx'
+import slotsRu from './slots.ru.mdx'
+
+/**
+ * MDX files for ListGroup component
+ *
+ * MDX файлы для компонента ListGroup
+ */
+export const wikiMdxListGroup: StorybookComponentsMdxItem = {
+  name: 'ListGroup',
+  descriptions: {
+    listGroup: {
+      en: listGroupEn,
+      ru: listGroupRu
+    },
+    slots: {
+      en: slotsEn,
+      ru: slotsRu
+    }
+  }
+}

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

@@ -0,0 +1,55 @@
+Component for creating interactive list items with flexible content structure and multiple display areas.
+
+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:**
+
+- 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)
+- Loading states with progress and skeleton
+- Ripple effect for visual feedback
+- Flexible tag variants (button, link, div, span)
+- Built-in accessibility support
+
+**Common use cases:**
+
+- 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

@@ -0,0 +1,55 @@
+Компонент для создания интерактивных элементов списков с гибкой структурой контента и множественными областями отображения.
+
+ListItem обеспечивает единообразное представление элементов в списках, меню и навигационных структурах. Компонент поддерживает метки, описания, иконки, значки состояния, интерактивные состояния (фокус, выбор, отключение), загрузку с прогрессом и скелетоном, а также эффект пульсации для улучшенной обратной связи.
+
+**Основные возможности:**
+
+- Множественные области контента (метка, описание, префикс, суффикс, заголовок)
+- Поддержка иконок с гибким позиционированием и выравниванием
+- Интеграция значков для индикаторов статуса
+- Интерактивные состояния (фокус, выбранный, отключенный, только чтение)
+- Состояния загрузки с прогрессом и скелетоном
+- Эффект пульсации для визуальной обратной связи
+- Гибкие варианты тегов (button, link, div, span)
+- Встроенная поддержка доступности
+
+**Типичные сценарии использования:**
+
+- Элементы списков и меню навигации
+- Пункты настроек и конфигурации
+- Списки с множественным выбором
+- Контактные списки и каталоги
+- Мобильные интерфейсы и 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

@@ -0,0 +1,24 @@
+## 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

@@ -0,0 +1,24 @@
+## Цвет заливки элемента
+
+Свойство `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

@@ -0,0 +1,2 @@
+- `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

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

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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,63 @@
+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

@@ -0,0 +1,63 @@
+Компонент для создания вложенных меню и организации навигационных элементов с раскрывающейся структурой.
+
+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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,76 @@
+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

@@ -0,0 +1,76 @@
+Компонент для создания полей ввода с автоматическим форматированием данных по заданному шаблону в реальном времени.
+
+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

@@ -0,0 +1,38 @@
+## 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

@@ -0,0 +1,38 @@
+## Типы дат и времени
+
+Типы дат в 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" />
+```