@dxtmisha/wiki 0.39.3 → 0.39.5

package/src/media/mdx/Anchor/scroll.ru.mdx

@@ -0,0 +1,35 @@
+## Настройка прокрутки
+
+Свойства `behavior`, `block`, `inline` и `shift` управляют поведением прокрутки к элементу при переходе по якорю.
+
+**Свойства:**
+
+- `behavior` — определяет анимацию прокрутки (`auto`, `smooth`, `instant`)
+- `block` — вертикальное выравнивание элемента (`start`, `center`, `end`, `nearest`)
+- `inline` — горизонтальное выравнивание элемента (`start`, `center`, `end`, `nearest`)
+- `shift` — смещение прокрутки от верхнего края (в пикселях)
+
+> **Примечание:** Если задано свойство `shift`, компонент использует `window.scrollTo` вместо `element.scrollIntoView`. В этом случае свойства `block` и `inline` игнорируются, и прокрутка всегда выполняется к верхней границе элемента с учетом указанного смещения.
+
+Эти свойства позволяют настроить, как именно страница будет прокручиваться к целевому элементу. Например, можно сделать плавную прокрутку или изменить позиционирование элемента на экране после прокрутки.
+
+```html
+<template>
+  <Anchor
+    href="#target"
+    behavior="smooth"
+    block="center"
+    inline="nearest"
+  >
+    Перейти к элементу
+  </Anchor>
+
+  <Anchor
+    href="#target"
+    :shift="100"
+  >
+    Перейти со смещением
+  </Anchor>
+</template>
+```
+

package/src/media/mdx/Anchor/wikiMdxAnchor.ts

@@ -0,0 +1,43 @@
+import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
+
+import anchorEn from './anchor.en.mdx'
+import anchorRu from './anchor.ru.mdx'
+import exposeGoEn from './expose.go.en.mdx'
+import exposeGoRu from './expose.go.ru.mdx'
+import hideEn from './hide.en.mdx'
+import hideRu from './hide.ru.mdx'
+import isCopyEn from './isCopy.en.mdx'
+import isCopyRu from './isCopy.ru.mdx'
+import scrollEn from './scroll.en.mdx'
+import scrollRu from './scroll.ru.mdx'
+
+/**
+ * MDX files for Anchor component
+ *
+ * MDX файлы для компонента Anchor
+ */
+export const wikiMdxAnchor: StorybookComponentsMdxItem = {
+  name: 'Anchor',
+  descriptions: {
+    'anchor': {
+      en: anchorEn,
+      ru: anchorRu
+    },
+    'expose.go': {
+      en: exposeGoEn,
+      ru: exposeGoRu
+    },
+    'hide': {
+      en: hideEn,
+      ru: hideRu
+    },
+    'isCopy': {
+      en: isCopyEn,
+      ru: isCopyRu
+    },
+    'scroll': {
+      en: scrollEn,
+      ru: scrollRu
+    }
+  }
+}

package/src/media/mdx/Arrow/arrow.en.mdx

@@ -0,0 +1,33 @@
+Component for displaying a graphical indicator (arrow) used to visually link floating elements to their target.
+
+Arrow provides automatic or manual positioning of the indicator. It is often used within Tooltip, Popover, and Dropdown components to indicate the direction towards the trigger or target element. The component supports adaptation to various sizes and styles, and can dynamically update its position.
+
+**Key Features:**
+
+- Automatic and manual positioning (top, bottom, left, right)
+- Support for inverted style
+- Binding to a target element (elementTarget)
+- Dynamic position updates
+- Customizable SVG arrow graphics
+- Integration with positioning components
+
+**Typical Use Cases:**
+
+- Indicators in tooltips
+- Arrows in dropdown menus and popovers
+- Visual links in tour guides
+- Directional indicators in the interface
+
+```html
+<script setup>
+import { Arrow } from 'dxt-ui'
+</script>
+
+<template>
+  <div class="relative p-4 border rounded">
+    Content with arrow
+    <Arrow position="top" />
+  </div>
+</template>
+```
+

package/src/media/mdx/Arrow/arrow.ru.mdx

@@ -0,0 +1,33 @@
+Компонент для отображения графического указателя (стрелки), используемого для визуальной связи всплывающих элементов с их целью.
+
+Arrow обеспечивает автоматическое или ручное позиционирование указателя. Часто применяется в составе компонентов Tooltip, Popover и Dropdown для указания направления на триггер или целевой элемент. Компонент поддерживает адаптацию под различные размеры и стили, а также может динамически обновлять свое положение.
+
+**Основные возможности:**
+
+- Автоматическое и ручное позиционирование (top, bottom, left, right)
+- Поддержка инвертированного стиля
+- Привязка к целевому элементу (elementTarget)
+- Динамическое обновление положения
+- Настраиваемая SVG-графика стрелки
+- Интеграция с компонентами позиционирования
+
+**Типичные сценарии использования:**
+
+- Указатели во всплывающих подсказках
+- Стрелки в выпадающих меню и поповерах
+- Визуальные связи в пошаговых руководствах
+- Индикаторы направления в интерфейсе
+
+```html
+<script setup>
+import { Arrow } from 'dxt-ui'
+</script>
+
+<template>
+  <div class="relative p-4 border rounded">
+    Контент с указателем
+    <Arrow position="top" />
+  </div>
+</template>
+```
+

package/src/media/mdx/Arrow/wikiMdxArrow.ts

@@ -0,0 +1,19 @@
+import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
+
+import arrowEn from './arrow.en.mdx'
+import arrowRu from './arrow.ru.mdx'
+
+/**
+ * MDX files for Arrow component
+ *
+ * MDX файлы для компонента Arrow
+ */
+export const wikiMdxArrow: StorybookComponentsMdxItem = {
+  name: 'Arrow',
+  descriptions: {
+    arrow: {
+      en: arrowEn,
+      ru: arrowRu
+    }
+  }
+}

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

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

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

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

@@ -0,0 +1,21 @@
+## Точечный индикатор
+
+Свойство `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

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

@@ -0,0 +1,16 @@
+## Контурные бейджи (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

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

@@ -0,0 +1,16 @@
+## Основные бейджи (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

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

@@ -0,0 +1,16 @@
+## Второстепенные бейджи (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

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

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