@dxtmisha/wiki 0.39.4 → 0.39.5

package/src/media/mdx/Checkbox/wikiMdxCheckbox.ts

@@ -0,0 +1,31 @@
+import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
+
+import checkboxEn from './checkbox.en.mdx'
+import checkboxRu from './checkbox.ru.mdx'
+import indeterminateEn from './indeterminate.en.mdx'
+import indeterminateRu from './indeterminate.ru.mdx'
+import valueEn from './value.en.mdx'
+import valueRu from './value.ru.mdx'
+
+/**
+ * MDX files for Checkbox component
+ *
+ * MDX файлы для компонента Checkbox
+ */
+export const wikiMdxCheckbox: StorybookComponentsMdxItem = {
+  name: 'Checkbox',
+  descriptions: {
+    checkbox: {
+      en: checkboxEn,
+      ru: checkboxRu
+    },
+    indeterminate: {
+      en: indeterminateEn,
+      ru: indeterminateRu
+    },
+    value: {
+      en: valueEn,
+      ru: valueRu
+    }
+  }
+}

package/src/media/mdx/Chip/assistive.en.mdx

@@ -0,0 +1,16 @@
+## Assistive chips (assistive)
+
+The Chip component supports assistive mode through the `assistive` property. In this mode, chips have a special visual style to help users complete tasks:
+
+- **Distinctive style** - visually stand out among other elements
+- **Hints and recommendations** - suggest action options or auto-completion
+- **User guidance** - help navigate the interface
+- **Icon support** - improve understanding of purpose through visual elements
+
+Assistive mode is especially useful for creating hint systems, recommendations, and helper actions that guide users to the right solutions without excessive visual noise.
+
+```html
+<Chip assistive icon="lightbulb">Recommendation</Chip>
+<Chip assistive icon="check">Hint</Chip>
+<Chip assistive>Auto-complete</Chip>
+```

package/src/media/mdx/Chip/assistive.ru.mdx

@@ -0,0 +1,16 @@
+## Вспомогательные чипы (assistive)
+
+Компонент Chip поддерживает вспомогательный режим через свойство `assistive`. В этом режиме чипы имеют специальный визуальный стиль для помощи пользователям в выполнении задач:
+
+- **Отличительный стиль** - визуально выделяются среди других элементов
+- **Подсказки и рекомендации** - предлагают варианты действий или автодополнения
+- **Направление пользователя** - помогают ориентироваться в интерфейсе
+- **Поддержка иконок** - улучшают понимание назначения через визуальные элементы
+
+Assistive режим особенно полезен для создания систем подсказок, рекомендаций и вспомогательных действий, которые направляют пользователя к нужным решениям без излишнего визуального шума.
+
+```html
+<Chip assistive icon="lightbulb">Рекомендация</Chip>
+<Chip assistive icon="check">Подсказка</Chip>
+<Chip assistive>Автодополнение</Chip>
+```

package/src/media/mdx/Chip/chip.en.mdx

@@ -0,0 +1,75 @@
+## Description
+
+Compact interactive element for representing input, attributes, actions, and filters in the user interface.
+
+Chip provides a unified component for displaying discrete information in a compact format with support for selection states, icons, adaptive behavior, and various visual variants (input, assistive). Inherits Button functionality while adding specialized styling and semantics for working with tags, filters, statuses, and user input. Ensures a consistent API for creating interactive chips with support for clicks, disabled/selected states, and icon integration.
+
+**Core capabilities:**
+
+- Button inheritance (icons, progress, click events)
+- Visual variants (input, assistive) for different contexts
+- State management (selected, disabled, focus, readonly)
+- Adaptive behavior (adaptive, container) for different screen sizes
+- Customizable text alignment (textAlign: left/center/right)
+- Icon support (icon, iconTrailing) and progress indicator
+- Skeleton state integration for loading
+- Value and detail passing for element identification
+
+**Typical use cases:**
+
+- Tags and labels for content categorization
+- Filters in search interfaces and catalogs
+- Displaying user-entered data (emails, contacts)
+- Statuses and state indicators
+- Assistive elements (hints, recommendations)
+- Selectable options in forms and lists
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const selectedFilters = ref(['active', 'verified'])
+const tags = ref(['Vue', 'TypeScript', 'UI'])
+
+const toggleFilter = (filter) => {
+  const index = selectedFilters.value.indexOf(filter)
+  if (index > -1) {
+    selectedFilters.value.splice(index, 1)
+  } else {
+    selectedFilters.value.push(filter)
+  }
+}
+</script>
+
+<template>
+  <!-- Basic chip -->
+  <Chip>Standard</Chip>
+
+  <!-- Input chip for user input -->
+  <Chip input icon="person">Contact</Chip>
+
+  <!-- Assistive chip for hints -->
+  <Chip assistive icon="lightbulb">Recommendation</Chip>
+
+  <!-- Filters with selection state -->
+  <Chip
+    v-for="filter in ['active', 'pending', 'verified']"
+    :key="filter"
+    :selected="selectedFilters.includes(filter)"
+    @click="toggleFilter(filter)"
+  >
+    {{ filter }}
+  </Chip>
+
+  <!-- With data passing -->
+  <Chip
+    value="filter-tag"
+    :detail="{ category: 'status', type: 'active' }"
+    @click="handleChipClick"
+  >
+    Active
+  </Chip>
+</template>
+```
+
+> Chip inherits all Button functionality, including events, icons, and progress indicators, while adding specialized styling for compact interface elements.

package/src/media/mdx/Chip/chip.ru.mdx

@@ -0,0 +1,75 @@
+## Описание
+
+Компактный интерактивный элемент для представления ввода, атрибутов, действий и фильтров в пользовательском интерфейсе.
+
+Chip предоставляет унифицированный компонент для отображения дискретной информации в компактном формате с поддержкой состояний выбора, иконок, адаптивного поведения и различных визуальных вариантов (input, assistive). Наследует функциональность Button, добавляя специализированную стилизацию и семантику для работы с тегами, фильтрами, статусами и пользовательским вводом. Обеспечивает согласованный API для создания интерактивных чипов с поддержкой кликов, состояния disabled/selected и интеграцией иконок.
+
+**Основные возможности:**
+
+- Наследование от Button (иконки, прогресс, события клика)
+- Визуальные варианты (input, assistive) для разных контекстов
+- Управление состояниями (selected, disabled, focus, readonly)
+- Адаптивное поведение (adaptive, container) для разных размеров экрана
+- Настраиваемое выравнивание текста (textAlign: left/center/right)
+- Поддержка иконок (icon, iconTrailing) и прогресс-индикатора
+- Интеграция скелетон-состояния для загрузки
+- Передача value и detail для идентификации элементов
+
+**Типичные сценарии использования:**
+
+- Теги и метки для категоризации контента
+- Фильтры в поисковых интерфейсах и каталогах
+- Отображение введенных пользователем данных (email, контакты)
+- Статусы и индикаторы состояния
+- Вспомогательные элементы (подсказки, рекомендации)
+- Выбираемые опции в формах и списках
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const selectedFilters = ref(['active', 'verified'])
+const tags = ref(['Vue', 'TypeScript', 'UI'])
+
+const toggleFilter = (filter) => {
+  const index = selectedFilters.value.indexOf(filter)
+  if (index > -1) {
+    selectedFilters.value.splice(index, 1)
+  } else {
+    selectedFilters.value.push(filter)
+  }
+}
+</script>
+
+<template>
+  <!-- Базовый чип -->
+  <Chip>Стандарт</Chip>
+
+  <!-- Input чип для пользовательского ввода -->
+  <Chip input icon="person">Контакт</Chip>
+
+  <!-- Assistive чип для подсказок -->
+  <Chip assistive icon="lightbulb">Рекомендация</Chip>
+
+  <!-- Фильтры с состоянием выбора -->
+  <Chip
+    v-for="filter in ['active', 'pending', 'verified']"
+    :key="filter"
+    :selected="selectedFilters.includes(filter)"
+    @click="toggleFilter(filter)"
+  >
+    {{ filter }}
+  </Chip>
+
+  <!-- С передачей данных -->
+  <Chip
+    value="filter-tag"
+    :detail="{ category: 'status', type: 'active' }"
+    @click="handleChipClick"
+  >
+    Активный
+  </Chip>
+</template>
+```
+
+> Chip наследует всю функциональность Button, включая события, иконки и прогресс-индикаторы, добавляя специализированную стилизацию для компактных элементов интерфейса.

package/src/media/mdx/Chip/input.en.mdx

@@ -0,0 +1,16 @@
+## Input chips (input)
+
+The Chip component supports input mode through the `input` property. In this mode, chips have an input field style and represent discrete information entered by the user:
+
+- **Form-like appearance** - visually resemble input elements
+- **User data** - display tags, contacts, keywords
+- **Interactivity** - can be removed or edited
+- **Grouping** - often used in sets for multiple selections
+
+Input mode is especially useful for displaying data that users have actively entered or selected, making them visually distinct from static interface elements.
+
+```html
+<Chip input icon="person">Contact</Chip>
+<Chip input icon="tag">Tag</Chip>
+<Chip input selected>Selected</Chip>
+```

package/src/media/mdx/Chip/input.ru.mdx

@@ -0,0 +1,16 @@
+## Input чипы (input)
+
+Компонент Chip поддерживает режим input через свойство `input`. В этом режиме чипы имеют стиль полей ввода и представляют дискретную информацию, введенную пользователем:
+
+- **Внешний вид формы** - визуально напоминают элементы ввода
+- **Пользовательские данные** - отображают теги, контакты, ключевые слова
+- **Интерактивность** - могут быть удалены или отредактированы
+- **Группировка** - часто используются в наборах для множественного выбора
+
+Input режим особенно полезен для отображения данных, которые пользователь активно вводил или выбирал, делая их визуально отличимыми от статических элементов интерфейса.
+
+```html
+<Chip input icon="person">Контакт</Chip>
+<Chip input icon="tag">Тег</Chip>
+<Chip input selected>Выбранный</Chip>
+```

package/src/media/mdx/Chip/wikiMdxChip.ts

@@ -0,0 +1,31 @@
+import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
+
+import chipEn from './chip.en.mdx'
+import chipRu from './chip.ru.mdx'
+import assistiveEn from './assistive.en.mdx'
+import assistiveRu from './assistive.ru.mdx'
+import inputEn from './input.en.mdx'
+import inputRu from './input.ru.mdx'
+
+/**
+ * MDX files for Chip component
+ *
+ * MDX файлы для компонента Chip
+ */
+export const wikiMdxChip: StorybookComponentsMdxItem = {
+  name: 'Chip',
+  descriptions: {
+    chip: {
+      en: chipEn,
+      ru: chipRu
+    },
+    assistive: {
+      en: assistiveEn,
+      ru: assistiveRu
+    },
+    input: {
+      en: inputEn,
+      ru: inputRu
+    }
+  }
+}

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>
+```
+

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

@@ -0,0 +1,45 @@
+## Кнопки действий
+
+Свойства `buttonOk`, `buttonClose` и `actionsList` управляют кнопками действий в диалоговом окне через встроенный компонент Actions.
+
+**Свойства:**
+
+- `buttonOk` — кнопка подтверждения
+- `buttonClose` — кнопка закрытия
+- `clickOkAndClose` — автоматическое закрытие диалога при нажатии кнопки OK
+- `actionsList` — прямой доступ к списку кнопок компонента Actions
+
+При `clickOkAndClose="true"` кнопка OK автоматически закрывает диалог после нажатия.
+
+```html
+<script setup>
+import { ref } from 'vue'
+</script>
+
+<template>
+  <!-- Базовое использование -->
+  <Dialog
+    buttonOk="Подтвердить"
+    buttonClose="Отмена"
+    label="Удаление файла"
+    @ok="handleDelete"
+  />
+
+  <!-- Скрытие кнопки закрытия -->
+  <Dialog
+    buttonOk="Понятно"
+    :buttonClose="null"
+    label="Информация"
+  />
+
+  <!-- Использование actionsList -->
+  <Dialog
+    :actionsList="[
+      { label: 'Сохранить', onClick: handleSave },
+      { label: 'Отмена', outline: true, onClick: handleCancel }
+    ]"
+    label="Сохранение"
+  />
+</template>
+```
+

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

@@ -0,0 +1,66 @@
+Component for creating modal dialog windows with icon support, titles, and predefined action buttons.
+
+Dialog is a specialized wrapper over the Modal component with additional capabilities for displaying informational messages, confirmations, and notifications. The component automatically displays an information block with icon, title, and description, and provides predefined OK and Close buttons. Supports success and error states with automatic icon switching, image positioning, and full content customization.
+
+**Key features:**
+
+- Modal window with centering and background blocking
+- Icon support with automatic switching for success/error states
+- Information block with icon, title, and description
+- Predefined OK and Close buttons with customization options
+- Image positioning at top or left
+- Integration with Window, Bars, Actions, Icon components
+- Closing by ESC key and overlay click
+- ok and close events for handling user actions
+- Slot support for content customization
+- Responsive design for mobile devices
+
+**Common use cases:**
+
+- User action confirmations
+- Success or error notifications
+- Informational messages
+- Warnings and alerts
+- Simple forms with minimal fields
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const isOpen = ref(false)
+const showSuccess = ref(false)
+
+const handleConfirm = () => {
+  console.log('Action confirmed')
+  isOpen.value = false
+  showSuccess.value = true
+}
+</script>
+
+<template>
+  <button @click="isOpen = true">Open Dialog</button>
+
+  <Dialog
+    v-model:open="isOpen"
+    label="Confirmation"
+    description="Are you sure you want to perform this action?"
+    @ok="handleConfirm"
+    @close="isOpen = false"
+  >
+    <template #default>
+      <div class="additional-info">
+        Additional information can be placed here.
+      </div>
+    </template>
+  </Dialog>
+
+  <Dialog
+    v-model:open="showSuccess"
+    :success="true"
+    label="Success"
+    description="Your action has been completed successfully."
+    :buttonClose="null"
+  />
+</template>
+```
+