@dxtmisha/wiki 0.24.3 → 0.25.1

package/src/media/mdx/Anchor/isCopy.en.mdx

@@ -0,0 +1,23 @@
+## Copy link
+
+The `isCopy` property switches the component to anchor link copying mode to clipboard.
+
+**Properties:**
+
+- `isCopy` — enables link copying mode (default `false`)
+- `iconTag` — icon displayed in copy mode
+- `iconContentCopy` — icon shown after successful copy
+- `delayHide` — delay before hiding notification in milliseconds (default `3072`)
+
+When `isCopy` is enabled, clicking the component doesn't scroll to the anchor but copies the full link (including origin and pathname) to clipboard. After copying, a Tooltip with notification automatically opens and closes after the time specified in `delayHide`. The icon changes from `iconTag` to `iconContentCopy` for visual confirmation of the action.
+
+```html
+<template>
+  <!-- Basic mode -->
+  <Anchor name="section" text="Copy link" isCopy />
+
+  <!-- With custom icons -->
+  <Anchor name="heading" isCopy iconTag="share" iconContentCopy="check" />
+</template>
+```
+

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

@@ -0,0 +1,23 @@
+## Копирование ссылки
+
+Свойство `isCopy` переключает компонент в режим копирования ссылки на якорь в буфер обмена.
+
+**Свойства:**
+
+- `isCopy` — включает режим копирования ссылки (по умолчанию `false`)
+- `iconTag` — иконка, отображаемая в режиме копирования
+- `iconContentCopy` — иконка, показываемая после успешного копирования
+- `delayHide` — задержка перед скрытием уведомления в миллисекундах (по умолчанию `3072`)
+
+При включённом `isCopy` клик по компоненту не выполняет прокрутку к якорю, а копирует полную ссылку (включая origin и pathname) в буфер обмена. После копирования автоматически открывается Tooltip с уведомлением, который закрывается через время, указанное в `delayHide`. Иконка меняется с `iconTag` на `iconContentCopy` для визуального подтверждения действия.
+
+```html
+<template>
+  <!-- Базовый режим -->
+  <Anchor name="section" text="Скопировать ссылку" isCopy />
+
+  <!-- С кастомными иконками -->
+  <Anchor name="heading" isCopy iconTag="share" iconContentCopy="check" />
+</template>
+```
+

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

@@ -0,0 +1,34 @@
+## Scroll Settings
+
+The `behavior`, `block`, `inline`, and `shift` properties control the scrolling behavior to the element when navigating via an anchor.
+
+**Properties:**
+
+- `behavior` — defines the scroll transition animation (`auto`, `smooth`, `instant`)
+- `block` — vertical alignment of the element (`start`, `center`, `end`, `nearest`)
+- `inline` — horizontal alignment of the element (`start`, `center`, `end`, `nearest`)
+- `shift` — scroll offset from the top edge (in pixels)
+
+> **Note:** If the `shift` property is set, the component uses `window.scrollTo` instead of `element.scrollIntoView`. In this case, the `block` and `inline` properties are ignored, and scrolling is always aligned to the top edge of the element with the specified offset.
+
+These properties allow you to customize exactly how the page scrolls to the target element. For example, you can enable smooth scrolling or change the positioning of the element on the screen after scrolling.
+
+```html
+<template>
+  <Anchor
+    href="#target"
+    behavior="smooth"
+    block="center"
+    inline="nearest"
+  >
+    Go to element
+  </Anchor>
+
+  <Anchor
+    href="#target"
+    :shift="100"
+  >
+    Go with offset
+  </Anchor>
+</template>
+```

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/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/wikiMdxBlock.ts

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

package/src/media/mdx/ChipGroup/chipGroup.en.mdx

@@ -0,0 +1,51 @@
+Component for managing a collection of chips with selection functionality and flexible data binding.
+
+ChipGroup renders multiple Chip components from a data array, handles single or multiple selection states, and provides customization options for each chip. The component supports dynamic list rendering, conditional icon display based on selection, and flexible data structure mapping through key properties.
+
+**Key features:**
+
+- Single or multiple item selection
+- Dynamic list rendering from data array
+- Customizable chip appearance through chipAttrs
+- Conditional icon display based on selection state
+- Flexible data binding with keyLabel and keyValue
+- Event handling for user interactions
+- Support for complex data structures
+
+**Common use cases:**
+
+- Filter chips for search and filtering
+- Tag selection in forms
+- Category selection interfaces
+- Multiple choice options
+- Status or type selectors
+- Dynamic lists with selection
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const selected = ref(['option1'])
+
+const options = [
+  { value: 'option1', label: 'Option 1', icon: 'star' },
+  { value: 'option2', label: 'Option 2', icon: 'favorite' },
+  { value: 'option3', label: 'Option 3', icon: 'bookmark' }
+]
+
+const handleClick = (event) => {
+  console.log('Chip clicked:', event)
+}
+</script>
+
+<template>
+  <ChipGroup
+    v-model:selected="selected"
+    :list="options"
+    key-value="value"
+    key-label="label"
+    :icon-when-selected="true"
+    @click="handleClick"
+  />
+</template>
+```

package/src/media/mdx/ChipGroup/chipGroup.ru.mdx

@@ -0,0 +1,51 @@
+Компонент для управления коллекцией чипов с функциональностью выбора и гибким связыванием данных.
+
+ChipGroup отображает множество компонентов Chip из массива данных, управляет одиночным или множественным выбором и предоставляет возможности настройки каждого чипа. Компонент поддерживает динамический рендеринг списка, условное отображение иконок в зависимости от выбора и гибкое сопоставление структуры данных через ключевые свойства.
+
+**Основные возможности:**
+
+- Одиночный или множественный выбор элементов
+- Динамический рендеринг списка из массива данных
+- Настраиваемый внешний вид чипов через chipAttrs
+- Условное отображение иконок в зависимости от состояния выбора
+- Гибкое связывание данных через keyLabel и keyValue
+- Обработка событий для взаимодействия пользователя
+- Поддержка сложных структур данных
+
+**Типичные сценарии использования:**
+
+- Фильтр-чипы для поиска и фильтрации
+- Выбор тегов в формах
+- Интерфейсы выбора категорий
+- Варианты множественного выбора
+- Селекторы статусов или типов
+- Динамические списки с выбором
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const selected = ref(['option1'])
+
+const options = [
+  { value: 'option1', label: 'Опция 1', icon: 'star' },
+  { value: 'option2', label: 'Опция 2', icon: 'favorite' },
+  { value: 'option3', label: 'Опция 3', icon: 'bookmark' }
+]
+
+const handleClick = (event) => {
+  console.log('Чип нажат:', event)
+}
+</script>
+
+<template>
+  <ChipGroup
+    v-model:selected="selected"
+    :list="options"
+    key-value="value"
+    key-label="label"
+    :icon-when-selected="true"
+    @click="handleClick"
+  />
+</template>
+```

package/src/media/mdx/ChipGroup/selected.en.mdx

@@ -0,0 +1,50 @@
+## Selection Management
+
+Properties `selected` and `iconWhenSelected` are designed for managing chip selection state.
+
+**Properties:**
+
+- `selected` — identifier(s) of selected item (string, number, array of strings/numbers, or `undefined`)
+- `iconWhenSelected` — shows chip icons only when item is selected (default: icons always visible)
+
+The `selected` property determines which chips will be highlighted. Accepts a single value for single selection or an array of values for multiple selection. Values are matched with list items by their index or value if the list contains simple data types.
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const selected = ref(['option1'])
+</script>
+
+<template>
+  <!-- Simple array selection -->
+  <ChipGroup
+    v-model:selected="selected"
+    :list="['Option 1', 'Option 2']"
+  />
+
+  <!-- Object array with keys -->
+  <ChipGroup
+    v-model:selected="selected"
+    :list="[
+      { id: 'option1', name: 'First Option' },
+      { id: 'option2', name: 'Second Option' }
+    ]"
+    key-value="id"
+    key-label="name"
+  />
+
+  <!-- Icons only when selected -->
+  <ChipGroup
+    v-model:selected="selected"
+    :list="[
+      { id: 'option1', name: 'Option 1', icon: 'check' },
+      { id: 'option2', name: 'Option 2', icon: 'check' }
+    ]"
+    key-value="id"
+    key-label="name"
+    :icon-when-selected="true"
+  />
+</template>
+```
+

package/src/media/mdx/ChipGroup/selected.ru.mdx

@@ -0,0 +1,50 @@
+## Управление выбором
+
+Свойства `selected` и `iconWhenSelected` предназначены для управления состоянием выбора чипов.
+
+**Свойства:**
+
+- `selected` — идентификатор(ы) выбранного элемента (строка, число, массив строк/чисел или `undefined`)
+- `iconWhenSelected` — показывает иконки чипов только при выборе элемента (по умолчанию: иконки всегда видимы)
+
+Свойство `selected` определяет, какие чипы будут выделены. Принимает одно значение для единичного выбора или массив значений для множественного выбора. Значения сопоставляются с элементами списка по их индексу или значению, если список содержит простые типы данных.
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const selected = ref(['option1'])
+</script>
+
+<template>
+  <!-- Выбор из простого массива -->
+  <ChipGroup
+    v-model:selected="selected"
+    :list="['Опция 1', 'Опция 2']"
+  />
+
+  <!-- Массив объектов с ключами -->
+  <ChipGroup
+    v-model:selected="selected"
+    :list="[
+      { id: 'option1', name: 'Первая опция' },
+      { id: 'option2', name: 'Вторая опция' }
+    ]"
+    key-value="id"
+    key-label="name"
+  />
+
+  <!-- Иконки только при выборе -->
+  <ChipGroup
+    v-model:selected="selected"
+    :list="[
+      { id: 'option1', name: 'Опция 1', icon: 'check' },
+      { id: 'option2', name: 'Опция 2', icon: 'check' }
+    ]"
+    key-value="id"
+    key-label="name"
+    :icon-when-selected="true"
+  />
+</template>
+```
+

package/src/media/mdx/ChipGroup/wikiMdxChipGroup.ts

@@ -0,0 +1,25 @@
+import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
+
+import chipGroupEn from './chipGroup.en.mdx'
+import chipGroupRu from './chipGroup.ru.mdx'
+import selectedEn from './selected.en.mdx'
+import selectedRu from './selected.ru.mdx'
+
+/**
+ * MDX files for ChipGroup component
+ *
+ * MDX файлы для компонента ChipGroup
+ */
+export const wikiMdxChipGroup: StorybookComponentsMdxItem = {
+  name: 'ChipGroup',
+  descriptions: {
+    chipGroup: {
+      en: chipGroupEn,
+      ru: chipGroupRu
+    },
+    selected: {
+      en: selectedEn,
+      ru: selectedRu
+    }
+  }
+}

package/src/media/mdx/Dialog/buttons.en.mdx

@@ -0,0 +1,45 @@
+## Action buttons
+
+Properties `buttonOk`, `buttonClose`, and `actionsList` control action buttons in the dialog window through the built-in Actions component.
+
+**Properties:**
+
+- `buttonOk` — confirmation button
+- `buttonClose` — close button
+- `clickOkAndClose` — automatic dialog closing when OK button is clicked
+- `actionsList` — direct access to the Actions component button list
+
+With `clickOkAndClose="true"` OK button automatically closes the dialog after clicking.
+
+```html
+<script setup>
+import { ref } from 'vue'
+</script>
+
+<template>
+  <!-- Basic usage -->
+  <Dialog
+    buttonOk="Confirm"
+    buttonClose="Cancel"
+    label="Delete file"
+    @ok="handleDelete"
+  />
+
+  <!-- Hide close button -->
+  <Dialog
+    buttonOk="Got it"
+    :buttonClose="null"
+    label="Information"
+  />
+
+  <!-- Using actionsList -->
+  <Dialog
+    :actionsList="[
+      { label: 'Save', onClick: handleSave },
+      { label: 'Cancel', outline: true, onClick: handleCancel }
+    ]"
+    label="Save"
+  />
+</template>
+```
+