@dxtmisha/wiki 0.39.5 → 0.39.6

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

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

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

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

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

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

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

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

@@ -1,50 +0,0 @@
-## Управление выбором
-
-Свойства `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

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

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

@@ -1,45 +0,0 @@
-## Кнопки действий
-
-Свойства `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

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

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

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