@dxtmisha/wiki 0.39.3 → 0.39.5

package/src/media/mdx/Bars/action.ru.mdx

@@ -0,0 +1,84 @@
+## Режим действий
+
+Свойства `action`, `actionLabel`, `actionDescription` и `actionBars` предназначены для переключения Bars в контекстный режим действий при выборе элементов или выполнении массовых операций.
+
+**Свойства:**
+
+- `action` — активирует режим действий с полной заменой контента
+- `actionLabel` — основной заголовок для режима действий (обычно счётчик выбранных элементов)
+- `actionDescription` — дополнительное описание или инструкция для текущего действия
+- `actionBars` — массив кнопок действий для операций над выбранными элементами
+
+Свойства работают совместно: когда `action = true`, компонент заменяет стандартный контент (label, description, bars) на варианты для действий (actionLabel, actionDescription, actionBars). Кнопка назад автоматически трансформируется в кнопку выхода (iconClose) для возврата из режима действий. Все общие атрибуты кнопок из `buttonAttrs` применяются к `actionBars`, сохраняя согласованную стилизацию. Режим действий обычно контролируется внешним состоянием выбора и используется для временных фокусированных операций с возможностью выхода обратно в обычный вид.
+
+```html
+<script setup>
+import { ref, computed } from 'vue'
+
+const selectedItems = ref([])
+const actionMode = computed(() => selectedItems.value.length > 0)
+
+const handleSelect = (id) => {
+  const index = selectedItems.value.indexOf(id)
+  if (index > -1) {
+    selectedItems.value.splice(index, 1)
+  } else {
+    selectedItems.value.push(id)
+  }
+}
+
+const handleShare = () => {
+  console.log('Поделиться выбранными:', selectedItems.value)
+}
+
+const handleDelete = () => {
+  console.log('Удалить выбранные:', selectedItems.value)
+  selectedItems.value = []
+}
+</script>
+
+<template>
+  <!-- Стандартный режим с обычной навигацией -->
+  <Bars
+    :action="actionMode"
+    label="Контакты"
+    description="Управление контактами"
+    icon-back="arrow_back"
+    icon-close="close"
+    :bars="[
+      { icon: 'add', label: 'Добавить' },
+      { icon: 'search', label: 'Поиск' }
+    ]"
+    :action-label="`Выбрано: ${selectedItems.length}`"
+    action-description="Выберите действие"
+    :action-bars="[
+      { icon: 'share', onClick: handleShare },
+      { icon: 'delete', onClick: handleDelete }
+    ]"
+  />
+
+  <!-- Режим действий всегда активен -->
+  <Bars
+    action
+    action-label="Выбрано 5 элементов"
+    action-description="Выберите действие"
+    icon-close="close"
+    :action-bars="[
+      { icon: 'edit', label: 'Изменить' },
+      { icon: 'archive', label: 'Архивировать' },
+      { icon: 'delete', label: 'Удалить' }
+    ]"
+  />
+
+  <!-- С v-model для двусторонней привязки -->
+  <Bars
+    v-model:action="actionMode"
+    label="Сообщения"
+    :action-label="`Сообщений: ${selectedItems.length}`"
+    :action-bars="[
+      { icon: 'mark_email_read' },
+      { icon: 'delete' }
+    ]"
+  />
+</template>
+```

package/src/media/mdx/Bars/bars.en.mdx

@@ -0,0 +1,97 @@
+## Description
+
+Versatile bar component for application headers, toolbars, and contextual action bars with support for navigation, action buttons, and bulk operation modes.
+
+Bars provides a comprehensive solution for creating consistent top-level interface elements with structured layout for titles, descriptions, back navigation, and interactive button sets. The component integrates action mode switching for contextual operations, unified button configuration, and skeleton loading states for creating modern application headers and toolbars.
+
+**Key features:**
+
+- Structured text hierarchy (label and description with dynamic updates)
+- Configurable back button with navigation and close icon switching
+- Flexible button arrays (bars) for primary actions on the right side
+- Action mode with separate content and button set for bulk operations
+- Two-way binding (v-model:action) for state synchronization
+- Unified button attributes (buttonAttrs) for consistent styling
+- Event handling for click interactions and navigation
+- Skeleton system integration for loading states
+- Icon customization for back and close buttons
+
+**Typical use cases:**
+
+- Application screen headers with navigation and actions
+- Toolbar panels for sections and pages
+- Contextual action bars for selected item operations
+- Search headers with filter and sort controls
+- Settings screens with back navigation
+- List headers with bulk action support
+- Multi-selection interfaces with action mode
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const actionMode = ref(false)
+const selectedCount = ref(0)
+
+const handleSearch = () => {
+  console.log('Search clicked')
+}
+
+const handleFilter = () => {
+  console.log('Filter clicked')
+}
+
+const handleDelete = () => {
+  console.log('Delete selected items')
+  actionMode.value = false
+  selectedCount.value = 0
+}
+</script>
+
+<template>
+  <div class="app-layout">
+    <!-- Standard header with navigation and actions -->
+    <Bars
+      label="Messages"
+      description="Your conversations"
+      icon-back="arrow_back"
+      :bars="[
+        { icon: 'search', onClick: handleSearch },
+        { icon: 'filter_list', onClick: handleFilter },
+        { icon: 'more_vert' }
+      ]"
+    />
+
+    <!-- Header with action mode for bulk operations -->
+    <Bars
+      v-model:action="actionMode"
+      label="Contacts"
+      description="Manage your contacts"
+      :action-label="`${selectedCount} selected`"
+      action-description="Choose an action"
+      icon-back="arrow_back"
+      icon-close="close"
+      :bars="[
+        { icon: 'add' },
+        { icon: 'search' }
+      ]"
+      :action-bars="[
+        { icon: 'share' },
+        { icon: 'delete', onClick: handleDelete }
+      ]"
+    />
+
+    <!-- Toolbar with custom button attributes -->
+    <Bars
+      label="Settings"
+      :button-attrs="{ secondary: true }"
+      :bars="[
+        { icon: 'sync', label: 'Sync' },
+        { icon: 'info', label: 'Info' }
+      ]"
+    />
+  </div>
+</template>
+```
+
+> Bars is designed as a top-level UI component for creating consistent application headers, toolbars, and contextual action interfaces with comprehensive navigation, action management, and bulk operation support.

package/src/media/mdx/Bars/bars.ru.mdx

@@ -0,0 +1,98 @@
+## Описание
+
+Универсальный компонент панели для заголовков приложений, панелей инструментов и контекстных панелей действий с поддержкой навигации, кнопок действий и режимов массовых операций.
+
+Bars предоставляет комплексное решение для создания согласованных элементов интерфейса верхнего уровня со структурированным макетом для заголовков, описаний, обратной навигации и интерактивных наборов кнопок. Компонент интегрирует переключение режима действий для контекстных операций, единую конфигурацию кнопок и состояния загрузки скелетонов для создания современных заголовков приложений и панелей инструментов.
+
+**Основные возможности:**
+
+- Структурированная текстовая иерархия (метка и описание с динамическим обновлением)
+- Настраиваемая кнопка назад с навигацией и переключением иконки закрытия
+- Гибкие массивы кнопок (bars) для основных действий справа
+- Режим действий с отдельным контентом и набором кнопок для массовых операций
+- Двусторонняя привязка (v-model:action) для синхронизации состояния
+- Единые атрибуты кнопок (buttonAttrs) для согласованной стилизации
+- Обработка событий для взаимодействий кликов и навигации
+- Интеграция системы скелетонов для состояний загрузки
+- Кастомизация иконок для кнопок назад и закрытия
+
+**Типичные сценарии использования:**
+
+- Заголовки экранов приложения с навигацией и действиями
+- Панели инструментов для разделов и страниц
+- Контекстные панели действий для операций с выбранными элементами
+- Заголовки поиска с элементами управления фильтрами и сортировкой
+- Экраны настроек с обратной навигацией
+- Заголовки списков с поддержкой массовых действий
+- Интерфейсы множественного выбора с режимом действий
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const actionMode = ref(false)
+const selectedCount = ref(0)
+
+const handleSearch = () => {
+  console.log('Нажат поиск')
+}
+
+const handleFilter = () => {
+  console.log('Нажат фильтр')
+}
+
+const handleDelete = () => {
+  console.log('Удалить выбранные элементы')
+  actionMode.value = false
+  selectedCount.value = 0
+}
+</script>
+
+<template>
+  <div class="app-layout">
+    <!-- Стандартный заголовок с навигацией и действиями -->
+    <Bars
+      label="Сообщения"
+      description="Ваши беседы"
+      icon-back="arrow_back"
+      :bars="[
+        { icon: 'search', onClick: handleSearch },
+        { icon: 'filter_list', onClick: handleFilter },
+        { icon: 'more_vert' }
+      ]"
+    />
+
+    <!-- Заголовок с режимом действий для массовых операций -->
+    <Bars
+      v-model:action="actionMode"
+      label="Контакты"
+      description="Управление контактами"
+      :action-label="`Выбрано: ${selectedCount}`"
+      action-description="Выберите действие"
+      icon-back="arrow_back"
+      icon-close="close"
+      :bars="[
+        { icon: 'add' },
+        { icon: 'search' }
+      ]"
+      :action-bars="[
+        { icon: 'share' },
+        { icon: 'delete', onClick: handleDelete }
+      ]"
+    />
+
+    <!-- Панель инструментов с пользовательскими атрибутами кнопок -->
+    <Bars
+      label="Настройки"
+      :button-attrs="{ secondary: true }"
+      :bars="[
+        { icon: 'sync', label: 'Синхр.' },
+        { icon: 'info', label: 'Инфо' }
+      ]"
+    />
+  </div>
+</template>
+```
+
+> Bars разработан как UI-компонент верхнего уровня для создания согласованных заголовков приложений, панелей инструментов и контекстных интерфейсов действий с комплексной поддержкой навигации, управления действиями и массовых операций.
+

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

@@ -0,0 +1,2 @@
+- `bars: any` — Slot for placing action buttons in regular mode.
+- `actionBars: any` — Slot for placing buttons in action mode.

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

@@ -0,0 +1,2 @@
+- `bars: any` — Слот для размещения кнопок панели действий в обычном режиме.
+- `actionBars: any` — Слот для размещения кнопок в режиме действий (action mode).

package/src/media/mdx/Bars/v-model.en.mdx

@@ -0,0 +1,28 @@
+## State management via v-model
+
+Two-way binding of action mode state via `v-model:action`.
+
+**Parameters:**
+- `action: boolean` — action mode state of the bar
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const isAction = ref(false)
+</script>
+
+<template>
+  <button @click="isAction = true">Enable action mode</button>
+
+  <Bars v-model:action="isAction">
+    <template #bars>
+      <Button>Regular button</Button>
+    </template>
+    <template #actionBars>
+      <Button>Action button</Button>
+      <Button @click="isAction = false">Close</Button>
+    </template>
+  </Bars>
+</template>
+```

package/src/media/mdx/Bars/v-model.ru.mdx

@@ -0,0 +1,28 @@
+## Управление состоянием через v-model
+
+Двусторонняя привязка состояния action-режима через `v-model:action`.
+
+**Параметры:**
+- `action: boolean` — состояние action-режима панели
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const isAction = ref(false)
+</script>
+
+<template>
+  <button @click="isAction = true">Включить action-режим</button>
+
+  <Bars v-model:action="isAction">
+    <template #bars>
+      <Button>Обычная кнопка</Button>
+    </template>
+    <template #actionBars>
+      <Button>Action-кнопка</Button>
+      <Button @click="isAction = false">Закрыть</Button>
+    </template>
+  </Bars>
+</template>
+```

package/src/media/mdx/Bars/wikiMdxBars.ts

@@ -0,0 +1,37 @@
+import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
+
+import barsEn from './bars.en.mdx'
+import barsRu from './bars.ru.mdx'
+import actionEn from './action.en.mdx'
+import actionRu from './action.ru.mdx'
+import slotsEn from './slots.en.mdx'
+import slotsRu from './slots.ru.mdx'
+import vModelEn from './v-model.en.mdx'
+import vModelRu from './v-model.ru.mdx'
+
+/**
+ * MDX files for Bars component
+ *
+ * MDX файлы для компонента Bars
+ */
+export const wikiMdxBars: StorybookComponentsMdxItem = {
+  name: 'Bars',
+  descriptions: {
+    'bars': {
+      en: barsEn,
+      ru: barsRu
+    },
+    'action': {
+      en: actionEn,
+      ru: actionRu
+    },
+    'slots': {
+      en: slotsEn,
+      ru: slotsRu
+    },
+    'v-model': {
+      en: vModelEn,
+      ru: vModelRu
+    }
+  }
+}

package/src/media/mdx/Block/block.en.mdx

@@ -0,0 +1,42 @@
+## Description
+
+A versatile structural component that serves as a container with support for labels, descriptions, captions, icons, and headlines.
+
+Block provides a flexible foundation for building complex interface components, allowing you to combine various information elements into a single unit. The component supports HTML tag customization and provides slots for content customization.
+
+**Key Features:**
+
+- Display of headline, label, description, and caption
+- Icon support
+- Customizable HTML tag
+- Flexible layout for content organization
+- Slot support for functionality extension
+
+**Typical Use Cases:**
+
+- Content cards
+- List items
+- Information blocks
+- Sections with headers and descriptions
+- Basic building block for other components
+
+```html
+<script setup>
+import { ref } from 'vue'
+</script>
+
+<template>
+  <Block
+    headline="Block Headline"
+    label="Label"
+    description="Block description with detailed information"
+    caption="Caption"
+    icon="info"
+  >
+    Main block content
+  </Block>
+</template>
+```
+
+> Block is a fundamental component for creating structured interfaces.
+

package/src/media/mdx/Block/block.ru.mdx

@@ -0,0 +1,42 @@
+## Описание
+
+Универсальный структурный компонент, служащий контейнером с поддержкой меток, описаний, подписей, иконок и заголовков.
+
+Block обеспечивает гибкую основу для построения сложных компонентов интерфейса, позволяя комбинировать различные информационные элементы в едином блоке. Компонент поддерживает настройку HTML-тега и предоставляет слоты для кастомизации контента.
+
+**Основные возможности:**
+
+- Отображение заголовка, метки, описания и подписи
+- Поддержка иконок
+- Настраиваемый HTML-тег
+- Гибкая компоновка для организации контента
+- Поддержка слотов для расширения функциональности
+
+**Типичные сценарии использования:**
+
+- Карточки контента
+- Элементы списков
+- Информационные блоки
+- Секции с заголовками и описаниями
+- Базовый строительный блок для других компонентов
+
+```html
+<script setup>
+import { ref } from 'vue'
+</script>
+
+<template>
+  <Block
+    headline="Заголовок блока"
+    label="Метка"
+    description="Описание блока с подробной информацией"
+    caption="Подпись"
+    icon="info"
+  >
+    Основной контент блока
+  </Block>
+</template>
+```
+
+> Block является фундаментальным компонентом для создания структурированных интерфейсов.
+

package/src/media/mdx/Block/differences.en.mdx

@@ -0,0 +1,47 @@
+## Differences between Page, Section, Block, and Group
+
+All components are built on top of **Block** and differ in semantics and header levels:
+
+### Page
+This is the root structural component that serves as the main wrapper for all page content. Its primary purpose is to define the main theme and semantically link content to the first-level heading. Its main difference is its uniqueness (used once per page); therefore, choose it as the primary container when creating a new page (`<main>`, `h1`).
+
+### Section
+A container for major thematic division of the page into independent semantic blocks. It is needed for logical partitioning of content into parts like "About Us" or "Services". Unlike Block and Group, it carries higher semantic weight, so use it to form the page structure and highlight its main sections (`<section>`, `h2`).
+
+### Block
+A universal and highly flexible building block for grouping any related content. It is the base element for creating independent functional units, cards, or informational inserts. Use it in any scenario where you need to organize content without strict adherence to global page divisions (`<div>`, `h3`).
+
+### Group
+An auxiliary component for combining small thematic elements into logical groups. Its main goal is to structure details, such as form fields or sub-sections within a card. It ranks at the bottom of the hierarchy and is used for fine-tuning content structure within larger blocks or sections (`<div>`, `h4`).
+
+### Hierarchy Example
+
+```html
+<Page headline="User Account">
+  <Section label="User Profile" description="Manage personal data" icon="person">
+    <Block label="Basic Information">
+      <p>Configure your display name and bio for other users.</p>
+      
+      <Group label="Contact Details">
+        <p>Email: user@example.com</p>
+        <p>Phone: +7 (999) 000-00-00</p>
+      </Group>
+    </Block>
+    
+    <Block label="Security" description="Password and authentication settings">
+      <p>Regular password updates improve your account security.</p>
+    </Block>
+  </Section>
+
+  <Section label="Notifications" icon="notifications">
+    <Block label="Subscriptions">
+      <Group label="Email">
+        <p>Weekly news and promotions.</p>
+      </Group>
+      <Group label="SMS">
+        <p>Critical system messages only.</p>
+      </Group>
+    </Block>
+  </Section>
+</Page>
+```

package/src/media/mdx/Block/differences.ru.mdx

@@ -0,0 +1,47 @@
+## Различия между Page, Section, Block и Group
+
+Все компоненты построены на базе **Block** и различаются семантикой и уровнями заголовков:
+
+### Page
+Это корневой структурный компонент, который служит главной оберткой для всего контента страницы. Он предназначен для определения основной темы и семантической привязки содержимого к заголовку первого уровня. Его главное отличие — уникальность (используется один раз), поэтому выбирайте его как основной контейнер при создании новой страницы (`<main>`, `h1`).
+
+### Section
+Раздел для крупного тематического деления страницы на независимые смысловые блоки. Он нужен для логического разграничения контента на такие части, как «О нас» или «Услуги». В отличие от Block и Group, имеет более высокую семантическую значимость, поэтому используйте его для формирования скелета страницы и выделения её основных разделов (`<section>`, `h2`).
+
+### Block
+Универсальный и максимально гибкий строительный блок для группировки любого связанного контента. Это базовый элемент для создания независимых функциональных единиц, карточек или информационных вставок. Используйте его в любых сценариях, где требуется организовать контент без строгой привязки к глобальным разделам страницы (`<div>`, `h3`).
+
+### Group
+Вспомогательный компонент для объединения мелких тематических элементов в логические группы. Его основная цель — структурирование деталей, таких как поля формы или подразделы внутри карточки. Он находится внизу иерархии и применяется для тонкой настройки структуры контента внутри более крупных блоков или секций (`<div>`, `h4`).
+
+### Пример иерархии
+
+```html
+<Page headline="Личный кабинет">
+  <Section label="Профиль пользователя" description="Управление персональными данными" icon="person">
+    <Block label="Основная информация">
+      <p>Настройте свое отображаемое имя и биографию для других пользователей.</p>
+      
+      <Group label="Контактные данные">
+        <p>Email: user@example.com</p>
+        <p>Телефон: +7 (999) 000-00-00</p>
+      </Group>
+    </Block>
+    
+    <Block label="Безопасность" description="Настройки пароля и аутентификации">
+      <p>Регулярное обновление пароля повышает защищенность вашего аккаунта.</p>
+    </Block>
+  </Section>
+
+  <Section label="Уведомления" icon="notifications">
+    <Block label="Рассылки">
+      <Group label="Email">
+        <p>Еженедельные новости и акции.</p>
+      </Group>
+      <Group label="SMS">
+        <p>Только критические системные сообщения.</p>
+      </Group>
+    </Block>
+  </Section>
+</Page>
+```

package/src/media/mdx/Block/wikiMdxBlock.ts

@@ -0,0 +1,25 @@
+import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
+
+import blockEn from './block.en.mdx'
+import blockRu from './block.ru.mdx'
+import differencesEn from './differences.en.mdx'
+import differencesRu from './differences.ru.mdx'
+
+/**
+ * MDX files for Block component
+ *
+ * MDX файлы для компонента Block
+ */
+export const wikiMdxBlock: StorybookComponentsMdxItem = {
+  name: 'Block',
+  descriptions: {
+    block: {
+      en: blockEn,
+      ru: blockRu
+    },
+    differences: {
+      en: differencesEn,
+      ru: differencesRu
+    }
+  }
+}

package/src/media/mdx/Button/button.en.mdx

@@ -0,0 +1,29 @@
+## Description
+
+Interactive button component for triggering user actions with support for multiple visual variants, states, and accessibility features.
+
+Button provides a comprehensive solution for creating consistent, accessible action elements with built-in support for icons, loading states, ripple effects, and skeleton placeholders. The component integrates visual variants (primary, secondary, outline, text), state management (focus, hover, disabled, selected), and adaptive behavior for responsive interfaces.
+
+**Key features:**
+
+- Multiple visual variants (primary, secondary, outline, text)
+- Comprehensive state support (focus, hover, active, disabled, selected, readonly)
+- Built-in icon positioning (leading and trailing)
+- Progress indicator integration for loading states
+- Ripple effect for tactile feedback
+- Skeleton system for loading placeholders
+- Adaptive and responsive behavior options
+- Full accessibility support (ARIA, keyboard navigation)
+- Customizable through design tokens
+
+**Typical use cases:**
+
+- Primary actions in forms and dialogs
+- Navigation and menu items
+- Toolbars and action bars
+- Call-to-action elements
+- Icon-only action buttons
+- Loading state indicators
+- Confirmation and cancellation actions
+
+> Button is designed as a universal interactive element with comprehensive state management, visual variants, and accessibility features for creating consistent action interfaces.

package/src/media/mdx/Button/button.ru.mdx

@@ -0,0 +1,29 @@
+## Описание
+
+Интерактивный компонент кнопки для инициирования действий пользователя с поддержкой множественных визуальных вариантов, состояний и функций доступности.
+
+Button предоставляет комплексное решение для создания согласованных, доступных элементов действий со встроенной поддержкой иконок, состояний загрузки, эффектов ripple и плейсхолдеров-скелетонов. Компонент интегрирует визуальные варианты (primary, secondary, outline, text), управление состояниями (focus, hover, disabled, selected) и адаптивное поведение для отзывчивых интерфейсов.
+
+**Основные возможности:**
+
+- Множественные визуальные варианты (primary, secondary, outline, text)
+- Комплексная поддержка состояний (focus, hover, active, disabled, selected, readonly)
+- Встроенное позиционирование иконок (в начале и в конце)
+- Интеграция индикатора прогресса для состояний загрузки
+- Эффект ripple для тактильной обратной связи
+- Система скелетонов для плейсхолдеров загрузки
+- Опции адаптивного и отзывчивого поведения
+- Полная поддержка доступности (ARIA, клавиатурная навигация)
+- Настройка через токены дизайна
+
+**Типичные сценарии использования:**
+
+- Основные действия в формах и диалогах
+- Элементы навигации и меню
+- Панели инструментов и действий
+- Элементы призыва к действию
+- Кнопки только с иконками
+- Индикаторы состояния загрузки
+- Действия подтверждения и отмены
+
+> Button разработан как универсальный интерактивный элемент с комплексным управлением состояниями, визуальными вариантами и функциями доступности для создания согласованных интерфейсов действий.