@dxtmisha/wiki 0.24.1 → 0.24.3

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

@@ -1,22 +1,97 @@
-Bars is a top-level bar component for headers, toolbars, and contextual action bars. It provides a structured layout for titles, descriptions, back buttons, and interactive button sets with support for action mode for bulk operations.
+## Description
 
-### Purpose
+Versatile bar component for application headers, toolbars, and contextual action bars with support for navigation, action buttons, and bulk operation modes.
 
-- **Application headers** — Unified top bar for screens, sections, and pages with consistent navigation
-- **Toolbars** — Placement of primary actions and functional interface elements
-- **Contextual actions** — Special mode for bulk operations on selected items
-- **Structured navigation** — Standardized back button behavior and screen transitions
+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.
 
-### Core capabilities
+**Key features:**
 
-- **Text content** — Primary label and secondary description with dynamic update support
-- **Navigation button** — Configurable back button with hiding options and icon customization
-- **Action set** — Button array (bars) for right-side placement with flexible configuration
-- **Action mode** — Switching to action mode with separate labels, description, and button set
-- **Unified attributes** — Shared settings for all buttons via buttonAttrs with event support
+- 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
 
-### Integration
+**Typical use cases:**
 
-Bars is designed for creating consistent headers and toolbars in applications. Use it as a foundation for screens when you need standardized navigation, action placement, and support for contextual operations with selected elements.
+- 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
 
-> This is a top-level UI component intended for direct use in application interfaces and design systems.
+```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

@@ -1,22 +1,98 @@
-Bars — компонент панели верхнего уровня для заголовков, панелей инструментов и контекстных панелей действий. Обеспечивает структурированный макет для заголовка, описания, кнопки назад и набора интерактивных кнопок с поддержкой режима действий для массовых операций.
+## Описание
 
-### Назначение
+Универсальный компонент панели для заголовков приложений, панелей инструментов и контекстных панелей действий с поддержкой навигации, кнопок действий и режимов массовых операций.
 
-- **Заголовки приложений** — Единый верхний бар для экранов, разделов и страниц с консистентной навигацией
-- **Панели инструментов** — Размещение основных действий и функциональных элементов интерфейса
-- **Контекстные действия** — Специальный режим для массовых операций над выбранными элементами
-- **Структурированная навигация** — Стандартизированное поведение кнопки назад и переходов между экранами
+Bars предоставляет комплексное решение для создания согласованных элементов интерфейса верхнего уровня со структурированным макетом для заголовков, описаний, обратной навигации и интерактивных наборов кнопок. Компонент интегрирует переключение режима действий для контекстных операций, единую конфигурацию кнопок и состояния загрузки скелетонов для создания современных заголовков приложений и панелей инструментов.
 
-### Основные возможности
+**Основные возможности:**
 
-- **Текстовый контент** — Основная метка (label) и дополнительное описание (description) с поддержкой динамического обновления
-- **Навигационная кнопка** — Настраиваемая кнопка назад с возможностью скрытия и кастомизации иконок
-- **Набор действий** — Массив кнопок (bars) для размещения справа с гибкой конфигурацией
-- **Режим действий** — Переключение в action‑режим с отдельными метками, описанием и набором кнопок
-- **Единые атрибуты** — Общие настройки для всех кнопок через buttonAttrs с поддержкой событий
+- Структурированная текстовая иерархия (метка и описание с динамическим обновлением)
+- Настраиваемая кнопка назад с навигацией и переключением иконки закрытия
+- Гибкие массивы кнопок (bars) для основных действий справа
+- Режим действий с отдельным контентом и набором кнопок для массовых операций
+- Двусторонняя привязка (v-model:action) для синхронизации состояния
+- Единые атрибуты кнопок (buttonAttrs) для согласованной стилизации
+- Обработка событий для взаимодействий кликов и навигации
+- Интеграция системы скелетонов для состояний загрузки
+- Кастомизация иконок для кнопок назад и закрытия
 
-### Интеграция
+**Типичные сценарии использования:**
 
-Bars предназначен для создания консистентных заголовков и панелей инструментов в приложениях. Используйте его в качестве основы для экранов, когда нужна стандартизированная навигация, размещение действий и поддержка контекстных операций с выделенными элементами.
+- Заголовки экранов приложения с навигацией и действиями
+- Панели инструментов для разделов и страниц
+- Контекстные панели действий для операций с выбранными элементами
+- Заголовки поиска с элементами управления фильтрами и сортировкой
+- Экраны настроек с обратной навигацией
+- Заголовки списков с поддержкой массовых действий
+- Интерфейсы множественного выбора с режимом действий
+
+```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-компонент верхнего уровня для создания согласованных заголовков приложений, панелей инструментов и контекстных интерфейсов действий с комплексной поддержкой навигации, управления действиями и массовых операций.
 
-> Это UI‑компонент верхнего уровня, предназначенный для прямого использования в интерфейсах приложений и дизайн‑системах.

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

@@ -0,0 +1,33 @@
+```html
+<Bars>
+  <template #bars>
+    <Button icon="search" />
+    <Button icon="refresh" />
+    <Button icon="more_vert" />
+  </template>
+
+  <template #actionBars>
+    <Button icon="share" />
+    <Button icon="edit" />
+    <Button icon="delete" />
+  </template>
+</Bars>
+```
+
+### `bars`
+
+Slot for placing action buttons in regular mode.
+
+Allows you to fully override the composition, order, and appearance of buttons positioned to the right of the label and description. The `bars` area is right-aligned and inherits sizing/spacing from the base Bars component styles.
+
+**Parameters:**
+- Slot does not pass parameters (static slot)
+
+### `actionBars`
+
+Slot for placing buttons in action mode.
+
+Allows you to fully redefine specialized actions displayed when item selection mode is active. The `actionBars` area is shown instead of regular `bars` when action mode is enabled (via `v-model:action` or the `action` property).
+
+**Parameters:**
+- Slot does not pass parameters (static slot)

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

@@ -0,0 +1,33 @@
+```html
+<Bars>
+  <template #bars>
+    <Button icon="search" />
+    <Button icon="refresh" />
+    <Button icon="more_vert" />
+  </template>
+
+  <template #actionBars>
+    <Button icon="share" />
+    <Button icon="edit" />
+    <Button icon="delete" />
+  </template>
+</Bars>
+```
+
+### `bars`
+
+Слот для размещения кнопок панели действий в обычном режиме.
+
+Позволяет полностью переопределить состав, порядок и внешний вид кнопок, которые располагаются справа от заголовка и описания. Область `bars` выравнивается по правому краю панели и наследует размеры/отступы от базового стиля компонента Bars.
+
+**Параметры:**
+- Слот не передает параметры (статический слот)
+
+### `actionBars`
+
+Слот для размещения кнопок в режиме действий (action mode).
+
+Позволяет полностью переопределить специализированные действия, которые отображаются при активированном режиме выбора элементов. Область `actionBars` отображается вместо обычного `bars`, когда включён action-режим (через `v-model:action` или свойство `action`).
+
+**Параметры:**
+- Слот не передает параметры (статический слот)

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

@@ -1,19 +1,28 @@
-## Two-way binding (v-model)
+## State management via v-model
 
-The Bars component supports two-way binding for the `action` state using the `v-model:action` directive.
+Two-way binding of action mode state via `v-model:action`.
 
-### Usage
-
-This allows you to synchronize the action mode of the bar with a local data property in your parent component.
+**Parameters:**
+- `action: boolean` — action mode state of the bar
 
 ```html
-<Bars v-model:action="isAction"/>
+<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>
 ```
-
-### How it works
-
-The `v-model:action` is a shorthand for binding the `action` prop and listening to the `update:action` event.
-
-- **`:action=\"isAction\"`** — The action mode is controlled by the `isAction` ref.
-- **`@update:action=\"isAction = $event\"`** — When the internal state changes, the component emits an event to update the parent’s `isAction` ref.
-

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

@@ -1,19 +1,28 @@
-## Двусторонняя привязка (v-model)
+## Управление состоянием через v-model
 
-Компонент Bars поддерживает двустороннюю привязку для состояния `action` с использованием директивы `v-model:action`.
+Двусторонняя привязка состояния action-режима через `v-model:action`.
 
-### Использование
-
-Это позволяет синхронизировать режим действий панели с локальным свойством данных родительского компонента.
+**Параметры:**
+- `action: boolean` — состояние action-режима панели
 
 ```html
-<Bars v-model:action="isAction"/>
+<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>
 ```
-
-### Как это работает
-
-`v-model:action` — это сокращение для привязки свойства `action` и прослушивания события `update:action`.
-
-- **`:action="isAction"`** — Режим действий управляется ref `isAction`.
-- **`@update:action="isAction = $event"`** — Когда внутреннее состояние меняется, компонент генерирует событие для обновления `isAction` у родителя.
-

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

@@ -4,10 +4,8 @@ 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 slotBarsEn from './slot.bars.en.mdx'
-import slotBarsRu from './slot.bars.ru.mdx'
-import slotActionBarsEn from './slot.actionBars.en.mdx'
-import slotActionBarsRu from './slot.actionBars.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'
 
@@ -27,13 +25,9 @@ export const wikiMdxBars: StorybookComponentsMdxItem = {
       en: actionEn,
       ru: actionRu
     },
-    'slot.bars': {
-      en: slotBarsEn,
-      ru: slotBarsRu
-    },
-    'slot.actionBars': {
-      en: slotActionBarsEn,
-      ru: slotActionBarsRu
+    'slots': {
+      en: slotsEn,
+      ru: slotsRu
     },
     'v-model': {
       en: vModelEn,

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

@@ -1,3 +1,91 @@
 ## Description
 
-The Button component is an interactive element for user actions. It supports various visual styles, sizes, and states to create a consistent user interface.
+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
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const loading = ref(false)
+const selected = ref(false)
+
+const handleClick = async () => {
+  loading.value = true
+  // Simulate async operation
+  await new Promise(resolve => setTimeout(resolve, 2000))
+  loading.value = false
+  selected.value = !selected.value
+}
+</script>
+
+<template>
+  <div class="actions">
+    <!-- Primary button with loading state -->
+    <Button
+      primary
+      :progress="loading"
+      @click="handleClick"
+    >
+      Submit
+    </Button>
+
+    <!-- Secondary button with icon -->
+    <Button
+      secondary
+      icon="settings"
+    >
+      Settings
+    </Button>
+
+    <!-- Outline button with trailing icon -->
+    <Button
+      outline
+      icon-trailing="arrow_forward"
+    >
+      Next
+    </Button>
+
+    <!-- Text button with selected state -->
+    <Button
+      text
+      :selected="selected"
+      @click="selected = !selected"
+    >
+      Toggle
+    </Button>
+
+    <!-- Icon-only button -->
+    <Button
+      primary
+      icon="favorite"
+      adaptive="iconAlways"
+    />
+  </div>
+</template>
+```
+
+> 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

@@ -1,3 +1,91 @@
 ## Описание
 
-Компонент Button представляет собой интерактивный элемент для выполнения действий пользователя. Он поддерживает различные визуальные стили, размеры и состояния для создания согласованного пользовательского интерфейса.
+Интерактивный компонент кнопки для инициирования действий пользователя с поддержкой множественных визуальных вариантов, состояний и функций доступности.
+
+Button предоставляет комплексное решение для создания согласованных, доступных элементов действий со встроенной поддержкой иконок, состояний загрузки, эффектов ripple и плейсхолдеров-скелетонов. Компонент интегрирует визуальные варианты (primary, secondary, outline, text), управление состояниями (focus, hover, disabled, selected) и адаптивное поведение для отзывчивых интерфейсов.
+
+**Основные возможности:**
+
+- Множественные визуальные варианты (primary, secondary, outline, text)
+- Комплексная поддержка состояний (focus, hover, active, disabled, selected, readonly)
+- Встроенное позиционирование иконок (в начале и в конце)
+- Интеграция индикатора прогресса для состояний загрузки
+- Эффект ripple для тактильной обратной связи
+- Система скелетонов для плейсхолдеров загрузки
+- Опции адаптивного и отзывчивого поведения
+- Полная поддержка доступности (ARIA, клавиатурная навигация)
+- Настройка через токены дизайна
+
+**Типичные сценарии использования:**
+
+- Основные действия в формах и диалогах
+- Элементы навигации и меню
+- Панели инструментов и действий
+- Элементы призыва к действию
+- Кнопки только с иконками
+- Индикаторы состояния загрузки
+- Действия подтверждения и отмены
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const loading = ref(false)
+const selected = ref(false)
+
+const handleClick = async () => {
+  loading.value = true
+  // Имитация асинхронной операции
+  await new Promise(resolve => setTimeout(resolve, 2000))
+  loading.value = false
+  selected.value = !selected.value
+}
+</script>
+
+<template>
+  <div class="actions">
+    <!-- Основная кнопка с состоянием загрузки -->
+    <Button
+      primary
+      :progress="loading"
+      @click="handleClick"
+    >
+      Отправить
+    </Button>
+
+    <!-- Второстепенная кнопка с иконкой -->
+    <Button
+      secondary
+      icon="settings"
+    >
+      Настройки
+    </Button>
+
+    <!-- Контурная кнопка с иконкой справа -->
+    <Button
+      outline
+      icon-trailing="arrow_forward"
+    >
+      Далее
+    </Button>
+
+    <!-- Текстовая кнопка с выбранным состоянием -->
+    <Button
+      text
+      :selected="selected"
+      @click="selected = !selected"
+    >
+      Переключить
+    </Button>
+
+    <!-- Кнопка только с иконкой -->
+    <Button
+      primary
+      icon="favorite"
+      adaptive="iconAlways"
+    />
+  </div>
+</template>
+```
+
+> Button разработан как универсальный интерактивный элемент с комплексным управлением состояниями, визуальными вариантами и функциями доступности для создания согласованных интерфейсов действий.

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

@@ -1,18 +1,16 @@
-## Outline Button Style
+## Outline buttons
 
-The `outline` property applies an outline style to the button. This style is typically used for actions that should be less prominent than `secondary` but still accessible.
+Button component supports outline mode through the `outline` property. In this mode, buttons have a minimalist visual style with transparent background and colored border:
 
-### Purpose
+- **Minimalist design** - suitable for interfaces requiring reduced visual load
+- **Transparent background** - maintains clean appearance while remaining interactive
+- **Hover feedback** - background appears on hover for better user interaction
+- **Icon support** - works seamlessly with icons for enhanced clarity
 
-- **Additional actions** — For actions that are not primary or secondary.
-- **Minimalist design** — Suitable for interfaces where minimal visual load is required.
+Outline mode is especially useful for creating tertiary actions, filter controls, and secondary options in cards or lists that need to be accessible without excessive visual noise.
 
-### Usage
-
-- Filter reset buttons.
-- Secondary actions in cards or lists.
-
-### Features
-
-- **Transparent background** — The button has a transparent background and a colored border.
-- **Hover contrast** — The background appears on hover for better feedback.
+```html
+<Button outline icon="filter">Filter</Button>
+<Button outline icon="sort">Sort</Button>
+<Button outline>More options</Button>
+```