@dxtmisha/wiki 0.24.2 → 0.25.1

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

@@ -1,23 +1,16 @@
-## Input Chips
+## Input chips (input)
 
-Input chips represent discrete pieces of information entered by users, such as tags, contacts, or keywords. They have an appearance similar to input fields and are often used in form contexts.
+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:
 
-### Features
+- **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
 
-- Style reminiscent of form elements
-- Usually contains user input
-- Can be removed or edited
-- Often grouped in sets
+Input mode is especially useful for displaying data that users have actively entered or selected, making them visually distinct from static interface elements.
 
-### Usage
-
-Use input chips for:
-- Displaying entered tags
-- Lists of selected items
-- Contacts or recipients
-- User-applied filters
-- Search keywords
-
-### Recommendations
-
-Input chips work best for displaying data that users have actively entered or selected, making them interactive and editable.
+```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

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

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

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

@@ -0,0 +1,65 @@
+Компонент для создания модальных диалоговых окон с поддержкой иконок, заголовков и предустановленных кнопок действий.
+
+Dialog представляет собой специализированную обертку над компонентом Modal с дополнительными возможностями для отображения информационных сообщений, подтверждений и уведомлений. Компонент автоматически отображает информационный блок с иконкой, заголовком и описанием, а также предоставляет предустановленные кнопки OK и Закрыть. Поддерживает состояния успеха и ошибки с автоматическим переключением иконок, позиционирование изображения и полную кастомизацию контента.
+
+**Основные возможности:**
+
+- Модальное окно с центрированием и блокировкой фона
+- Поддержка иконок с автоматическим переключением для состояний успеха/ошибки
+- Информационный блок с иконкой, заголовком и описанием
+- Предустановленные кнопки OK и Закрыть с возможностью кастомизации
+- Позиционирование изображения сверху или слева
+- Интеграция с компонентами Window, Bars, Actions, Icon
+- Закрытие по ESC и клику на overlay
+- События ok и close для обработки действий пользователя
+- Поддержка слотов для кастомизации контента
+- Адаптивный дизайн для мобильных устройств
+
+**Типичные сценарии использования:**
+
+- Подтверждения действий пользователя
+- Уведомления об успехе или ошибке
+- Информационные сообщения
+- Предупреждения и алерты
+- Простые формы с минимальным количеством полей
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const isOpen = ref(false)
+const showSuccess = ref(false)
+
+const handleConfirm = () => {
+  console.log('Действие подтверждено')
+  isOpen.value = false
+  showSuccess.value = true
+}
+</script>
+
+<template>
+  <button @click="isOpen = true">Открыть диалог</button>
+
+  <Dialog
+    v-model:open="isOpen"
+    label="Подтверждение"
+    description="Вы уверены, что хотите выполнить это действие?"
+    @ok="handleConfirm"
+    @close="isOpen = false"
+  >
+    <template #default>
+      <div class="additional-info">
+        Дополнительная информация может быть размещена здесь.
+      </div>
+    </template>
+  </Dialog>
+
+  <Dialog
+    v-model:open="showSuccess"
+    :success="true"
+    label="Успешно"
+    description="Ваше действие выполнено успешно."
+    :buttonClose="null"
+  />
+</template>
+```

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

@@ -0,0 +1,63 @@
+
+### `ok`
+
+Event fires when the confirmation (OK) button in the dialog is clicked.
+
+**Parameters:**
+Event does not pass parameters.
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const showDialog = ref(false)
+
+const handleOk = () => {
+  console.log('User confirmed action')
+  showDialog.value = false
+  // Execute action after confirmation
+}
+</script>
+
+<template>
+  <Dialog
+    v-model:open="showDialog"
+    buttonOk="Confirm"
+    label="Delete file"
+    description="Are you sure you want to delete this file?"
+    @ok="handleOk"
+  />
+</template>
+```
+
+### `close`
+
+Event fires when the close button in the dialog is clicked.
+
+**Parameters:**
+Event does not pass parameters.
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const showDialog = ref(false)
+
+const handleClose = () => {
+  console.log('User cancelled action')
+  showDialog.value = false
+}
+</script>
+
+<template>
+  <Dialog
+    v-model:open="showDialog"
+    buttonClose="Cancel"
+    label="Confirmation"
+    @close="handleClose"
+  />
+</template>
+```
+
+> Buttons can be configured via `buttonOk` and `buttonClose` properties, or hidden by passing `null`.
+

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

@@ -0,0 +1,63 @@
+
+### `ok`
+
+Событие срабатывает при клике на кнопку подтверждения (OK) в диалоговом окне.
+
+**Параметры:**
+Событие не передаёт параметров.
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const showDialog = ref(false)
+
+const handleOk = () => {
+  console.log('Пользователь подтвердил действие')
+  showDialog.value = false
+  // Выполнение действия после подтверждения
+}
+</script>
+
+<template>
+  <Dialog
+    v-model:open="showDialog"
+    buttonOk="Подтвердить"
+    label="Удаление файла"
+    description="Вы действительно хотите удалить этот файл?"
+    @ok="handleOk"
+  />
+</template>
+```
+
+### `close`
+
+Событие срабатывает при клике на кнопку закрытия в диалоговом окне.
+
+**Параметры:**
+Событие не передаёт параметров.
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const showDialog = ref(false)
+
+const handleClose = () => {
+  console.log('Пользователь отменил действие')
+  showDialog.value = false
+}
+</script>
+
+<template>
+  <Dialog
+    v-model:open="showDialog"
+    buttonClose="Отмена"
+    label="Подтверждение"
+    @close="handleClose"
+  />
+</template>
+```
+
+> Кнопки можно настроить через свойства `buttonOk` и `buttonClose`, либо скрыть, передав `null`.
+