@dxtmisha/wiki 0.39.2 → 0.39.4

package/src/media/mdx/Badge/badge.en.mdx

@@ -1,89 +0,0 @@
-## Description
-
-Compact visual indicator for displaying status, notification counts, or markers on interface elements with support for various display modes and automatic overflow management.
-
-Badge provides a universal solution for creating informative indicators with flexible content configuration, positioning, and appearance. The component supports displaying text, numbers with maximum value limits, icons, and dot indicators, automatically hides when content is absent, and integrates with the slot system for customization.
-
-**Key features:**
-
-- Multiple display modes (text, numbers, icons, dot indicator)
-- Automatic overflow management with maximum value configuration
-- Flexible positioning relative to parent elements (overlap, vertical, horizontal)
-- Automatic hiding when content is absent (dot, icon, label)
-- Integration with LabelNumberInclude for numeric value processing
-- Icon support through IconInclude
-- Color variants for different status types
-- Visibility control via hide property
-- Customization through slots for complete content control
-
-**Common use cases:**
-
-- Unread notification count indicators
-- Status markers on user avatars (online/offline)
-- Item counters in shopping carts or lists
-- New message indicators in chats
-- Status markers on product cards
-- Visual hints about available updates
-- Numeric indicators on tabs and menu items
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const cartCount = ref(5)
-const unreadMessages = ref(127)
-const isOnline = ref(true)
-
-const addToCart = () => {
-  cartCount.value++
-}
-</script>
-
-<template>
-  <div class="badge-examples">
-    <!-- Basic badge with number -->
-    <div style="position: relative; display: inline-block;">
-      <IconButton icon="shopping_cart" @click="addToCart"/>
-      <Badge :label="cartCount"/>
-    </div>
-
-    <!-- Badge with maximum value limit -->
-    <div style="position: relative; display: inline-block;">
-      <IconButton icon="notifications"/>
-      <Badge :label="unreadMessages" :label-max="99"/>
-    </div>
-
-    <!-- Dot status indicator -->
-    <div style="position: relative; display: inline-block;">
-      <Avatar src="/user-avatar.jpg"/>
-      <Badge
-        dot
-        :selected="isOnline"
-        overlap="circular"
-      />
-    </div>
-
-    <!-- Badge with icon and text -->
-    <div style="position: relative; display: inline-block;">
-      <Button>Profile</Button>
-      <Badge
-        icon="verified"
-        label="Pro"
-        overlap="static"
-      />
-    </div>
-
-    <!-- Badge with custom positioning -->
-    <div style="position: relative; display: inline-block;">
-      <Card>Content</Card>
-      <Badge
-        label="New"
-        vertical="bottom"
-        horizontal="left"
-      />
-    </div>
-  </div>
-</template>
-```
-
-> Badge is designed as a universal UI component for creating compact visual indicators with comprehensive support for various content types, automatic display management, and flexible positioning settings.

package/src/media/mdx/Badge/badge.ru.mdx

@@ -1,89 +0,0 @@
-## Описание
-
-Компактный визуальный индикатор для отображения статуса, количества уведомлений или маркеров на элементах интерфейса с поддержкой различных режимов отображения и автоматическим управлением переполнением.
-
-Badge предоставляет универсальное решение для создания информативных индикаторов с гибкой настройкой содержимого, позиционирования и внешнего вида. Компонент поддерживает отображение текста, чисел с ограничением максимального значения, иконок и точечных индикаторов, автоматически скрывается при отсутствии контента и интегрируется с системой слотов для кастомизации.
-
-**Основные возможности:**
-
-- Множественные режимы отображения (текст, числа, иконки, точечный индикатор)
-- Автоматическое управление переполнением с настройкой максимального значения
-- Гибкое позиционирование относительно родительских элементов (overlap, vertical, horizontal)
-- Автоматическое скрытие при отсутствии контента (dot, icon, label)
-- Интеграция с LabelNumberInclude для обработки числовых значений
-- Поддержка иконок через IconInclude
-- Цветовые варианты для различных типов статуса
-- Управление видимостью через свойство hide
-- Кастомизация через слоты для полного контроля над содержимым
-
-**Типичные сценарии использования:**
-
-- Индикаторы количества непрочитанных уведомлений
-- Маркеры статуса на аватарах пользователей (онлайн/оффлайн)
-- Счетчики элементов в корзине или списках
-- Индикаторы новых сообщений в чатах
-- Статусные маркеры на карточках товаров
-- Визуальные подсказки о наличии обновлений
-- Числовые индикаторы на вкладках и пунктах меню
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const cartCount = ref(5)
-const unreadMessages = ref(127)
-const isOnline = ref(true)
-
-const addToCart = () => {
-  cartCount.value++
-}
-</script>
-
-<template>
-  <div class="badge-examples">
-    <!-- Базовый бейдж с числом -->
-    <div style="position: relative; display: inline-block;">
-      <IconButton icon="shopping_cart" @click="addToCart"/>
-      <Badge :label="cartCount"/>
-    </div>
-
-    <!-- Бейдж с ограничением максимального значения -->
-    <div style="position: relative; display: inline-block;">
-      <IconButton icon="notifications"/>
-      <Badge :label="unreadMessages" :label-max="99"/>
-    </div>
-
-    <!-- Точечный индикатор статуса -->
-    <div style="position: relative; display: inline-block;">
-      <Avatar src="/user-avatar.jpg"/>
-      <Badge
-        dot
-        :selected="isOnline"
-        overlap="circular"
-      />
-    </div>
-
-    <!-- Бейдж с иконкой и текстом -->
-    <div style="position: relative; display: inline-block;">
-      <Button>Профиль</Button>
-      <Badge
-        icon="verified"
-        label="Pro"
-        overlap="static"
-      />
-    </div>
-
-    <!-- Бейдж с кастомным позиционированием -->
-    <div style="position: relative; display: inline-block;">
-      <Card>Контент</Card>
-      <Badge
-        label="Новое"
-        vertical="bottom"
-        horizontal="left"
-      />
-    </div>
-  </div>
-</template>
-```
-
-> Badge разработан как универсальный UI-компонент для создания компактных визуальных индикаторов с комплексной поддержкой различных типов контента, автоматическим управлением отображением и гибкими настройками позиционирования.

package/src/media/mdx/Badge/dot.en.mdx

@@ -1,21 +0,0 @@
-## Dot indicator
-
-The `dot` property transforms Badge into a compact circular indicator without text content, used for simple visual status notifications.
-
-**Possible values:**
-
-- `true` — displays Badge as a dot indicator
-- `false` — displays Badge in standard mode with content (default)
-
-Creates a minimalist visual marker for indicating states, activity, or notifications without displaying specific values. Ideal for user presence indicators (online/offline), unread notification markers, and status dots on interface elements. When the `dot` property is activated, any text content or numeric values are ignored, displaying only the color indicator.
-
-```html
-<!-- Standard Badge with content -->
-<Badge label="5" />
-
-<!-- Dot indicator -->
-<Badge dot />
-
-<!-- Dot indicator for online status -->
-<Badge dot :selected="isOnline" overlap="circular" />
-```

package/src/media/mdx/Badge/dot.ru.mdx

@@ -1,21 +0,0 @@
-## Точечный индикатор
-
-Свойство `dot` преобразует Badge в компактный круглый индикатор без текстового содержимого, используемый для простых визуальных уведомлений о статусе.
-
-**Возможные значения:**
-
-- `true` — отображает Badge как точечный индикатор
-- `false` — отображает Badge в стандартном режиме с контентом (по умолчанию)
-
-Создает минималистичный визуальный маркер для индикации состояний, активности или уведомлений без отображения конкретных значений. Идеально подходит для индикаторов присутствия пользователей (онлайн/оффлайн), маркеров непрочитанных уведомлений и статусных точек на элементах интерфейса. При активации свойства `dot` любое текстовое содержимое или числовые значения игнорируются, отображается только цветовой индикатор.
-
-```html
-<!-- Стандартный Badge с контентом -->
-<Badge label="5" />
-
-<!-- Точечный индикатор -->
-<Badge dot />
-
-<!-- Точечный индикатор статуса онлайн -->
-<Badge dot :selected="isOnline" overlap="circular" />
-```

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

@@ -1,16 +0,0 @@
-## Outline badges (outline)
-
-The Badge component supports outline mode via the `outline` property. In this mode, badges have a minimalist visual style with transparent background and colored border:
-
-- **Minimalist design** - suitable for interfaces requiring reduced visual load
-- **Transparent background** - maintains clean appearance when displaying secondary information
-- **Subtle presence** - less visually prominent than filled variants
-- **Flexible adaptation** - works well with various background colors and themes
-
-Outline mode is especially useful for creating secondary indicators, informational labels, and status markers that should be noticeable but not dominant in the interface's visual hierarchy.
-
-```html
-<Badge outline overlap="static">99+</Badge>
-<Badge outline overlap="static" icon="info">Info</Badge>
-<Badge outline dot overlap="static"/>
-```

package/src/media/mdx/Badge/outline.ru.mdx

@@ -1,16 +0,0 @@
-## Контурные бейджи (outline)
-
-Компонент Badge поддерживает контурный режим через свойство `outline`. В этом режиме бейджи имеют минималистичный визуальный стиль с прозрачным фоном и цветной границей:
-
-- **Минималистичный дизайн** - подходит для интерфейсов, требующих сниженной визуальной нагрузки
-- **Прозрачный фон** - поддерживает чистый внешний вид при отображении второстепенной информации
-- **Тонкое присутствие** - менее визуально заметный, чем заполненные варианты
-- **Гибкая адаптация** - хорошо работает с различными цветами фона и темами
-
-Outline режим особенно полезен для создания второстепенных индикаторов, информационных меток и статусных маркеров, которые должны быть заметными, но не доминирующими в визуальной иерархии интерфейса.
-
-```html
-<Badge outline overlap="static">99+</Badge>
-<Badge outline overlap="static" icon="info">Инфо</Badge>
-<Badge outline dot overlap="static"/>
-```

package/src/media/mdx/Badge/primary.en.mdx

@@ -1,16 +0,0 @@
-## Primary badges (primary)
-
-The Badge component supports primary mode via the `primary` property. In this mode, badges have the most prominent visual style with bright brand colors:
-
-- **High contrast** - uses primary brand colors for maximum visibility
-- **Bold appearance** - draws attention to important information
-- **Enhanced visibility** - designed to stand out against various backgrounds
-- **Accessibility support** - strong contrast ratios for readability
-
-Primary mode is especially useful for creating critical notification indicators, active statuses, and high-priority markers that require immediate user attention in the interface.
-
-```html
-<Badge primary overlap="static">5</Badge>
-<Badge primary overlap="static" icon="warning">Important</Badge>
-<Badge primary dot overlap="static"/>
-```

package/src/media/mdx/Badge/primary.ru.mdx

@@ -1,16 +0,0 @@
-## Основные бейджи (primary)
-
-Компонент Badge поддерживает основной режим через свойство `primary`. В этом режиме бейджи имеют наиболее заметный визуальный стиль с яркими цветами бренда:
-
-- **Высокий контраст** - использует основные цвета бренда для максимальной видимости
-- **Яркий внешний вид** - привлекает внимание к важной информации
-- **Повышенная видимость** - разработан для выделения на различных фонах
-- **Поддержка доступности** - сильные контрастные соотношения для читаемости
-
-Primary режим особенно полезен для создания критических индикаторов уведомлений, активных статусов и высокоприоритетных маркеров, которые требуют немедленного внимания пользователя в интерфейсе.
-
-```html
-<Badge primary overlap="static">5</Badge>
-<Badge primary overlap="static" icon="warning">Важно</Badge>
-<Badge primary dot overlap="static"/>
-```

package/src/media/mdx/Badge/secondary.en.mdx

@@ -1,16 +0,0 @@
-## Secondary badges (secondary)
-
-The Badge component supports secondary mode via the `secondary` property. In this mode, badges have a balanced visual style between primary and outline variants:
-
-- **Moderate contrast** - balanced color treatment for noticeability without overwhelming
-- **Softer appearance** - less intense than primary while maintaining clear visibility
-- **Versatile styling** - works well in various interface contexts
-- **Content harmony** - complements primary elements without visual competition
-
-Secondary mode is especially useful for creating supporting information indicators, status updates, and categorical labels that are important but don't require critical attention in the visual hierarchy.
-
-```html
-<Badge secondary overlap="static">12</Badge>
-<Badge secondary overlap="static" icon="info">Updated</Badge>
-<Badge secondary dot overlap="static"/>
-```

package/src/media/mdx/Badge/secondary.ru.mdx

@@ -1,16 +0,0 @@
-## Второстепенные бейджи (secondary)
-
-Компонент Badge поддерживает второстепенный режим через свойство `secondary`. В этом режиме бейджи имеют сбалансированный визуальный стиль между primary и outline вариантами:
-
-- **Умеренный контраст** - сбалансированная цветовая обработка для заметности без подавления
-- **Более мягкий внешний вид** - менее интенсивный, чем primary, сохраняя четкую видимость
-- **Универсальная стилизация** - хорошо работает в различных контекстах интерфейса
-- **Гармония контента** - дополняет основные элементы без визуальной конкуренции
-
-Secondary режим особенно полезен для создания поддерживающих индикаторов информации, статусных обновлений и категориальных меток, которые важны, но не требуют критического внимания в визуальной иерархии.
-
-```html
-<Badge secondary overlap="static">12</Badge>
-<Badge secondary overlap="static" icon="info">Обновлено</Badge>
-<Badge secondary dot overlap="static"/>
-```

package/src/media/mdx/Badge/wikiMdxBadge.ts

@@ -1,43 +0,0 @@
-import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
-
-import badgeEn from './badge.en.mdx'
-import badgeRu from './badge.ru.mdx'
-import dotEn from './dot.en.mdx'
-import dotRu from './dot.ru.mdx'
-import outlineEn from './outline.en.mdx'
-import outlineRu from './outline.ru.mdx'
-import primaryEn from './primary.en.mdx'
-import primaryRu from './primary.ru.mdx'
-import secondaryEn from './secondary.en.mdx'
-import secondaryRu from './secondary.ru.mdx'
-
-/**
- * MDX files for Badge component
- *
- * MDX файлы для компонента Badge
- */
-export const wikiMdxBadge: StorybookComponentsMdxItem = {
-  name: 'Badge',
-  descriptions: {
-    badge: {
-      en: badgeEn,
-      ru: badgeRu
-    },
-    dot: {
-      en: dotEn,
-      ru: dotRu
-    },
-    outline: {
-      en: outlineEn,
-      ru: outlineRu
-    },
-    primary: {
-      en: primaryEn,
-      ru: primaryRu
-    },
-    secondary: {
-      en: secondaryEn,
-      ru: secondaryRu
-    }
-  }
-}

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

@@ -1,84 +0,0 @@
-## Action mode
-
-Properties `action`, `actionLabel`, `actionDescription`, and `actionBars` are designed for switching Bars into contextual action mode when selecting items or performing bulk operations.
-
-**Properties:**
-
-- `action` — activates action mode with full content replacement
-- `actionLabel` — primary title for action mode (typically count of selected items)
-- `actionDescription` — additional description or instruction for current action
-- `actionBars` — array of action buttons for operations on selected elements
-
-Properties work together: when `action = true`, the component replaces standard content (label, description, bars) with action variants (actionLabel, actionDescription, actionBars). The back button automatically transforms into an exit button (iconClose) for leaving action mode. All shared button attributes from `buttonAttrs` apply to `actionBars`, maintaining consistent styling. Action mode is typically controlled by external selection state and is used for temporary focused operations with the ability to exit back to normal view.
-
-```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('Share selected:', selectedItems.value)
-}
-
-const handleDelete = () => {
-  console.log('Delete selected:', selectedItems.value)
-  selectedItems.value = []
-}
-</script>
-
-<template>
-  <!-- Standard mode with regular navigation -->
-  <Bars
-    :action="actionMode"
-    label="Contacts"
-    description="Manage your contacts"
-    icon-back="arrow_back"
-    icon-close="close"
-    :bars="[
-      { icon: 'add', label: 'Add' },
-      { icon: 'search', label: 'Search' }
-    ]"
-    :action-label="`${selectedItems.length} selected`"
-    action-description="Choose an action to apply"
-    :action-bars="[
-      { icon: 'share', onClick: handleShare },
-      { icon: 'delete', onClick: handleDelete }
-    ]"
-  />
-
-  <!-- Action mode always active -->
-  <Bars
-    action
-    action-label="5 items selected"
-    action-description="Select an action"
-    icon-close="close"
-    :action-bars="[
-      { icon: 'edit', label: 'Edit' },
-      { icon: 'archive', label: 'Archive' },
-      { icon: 'delete', label: 'Delete' }
-    ]"
-  />
-
-  <!-- With v-model for two-way binding -->
-  <Bars
-    v-model:action="actionMode"
-    label="Messages"
-    :action-label="`${selectedItems.length} messages`"
-    :action-bars="[
-      { icon: 'mark_email_read' },
-      { icon: 'delete' }
-    ]"
-  />
-</template>
-```

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

@@ -1,84 +0,0 @@
-## Режим действий
-
-Свойства `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

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