@dxtmisha/wiki 0.24.3 → 0.25.1

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

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

@@ -0,0 +1,58 @@
+## Success and error states
+
+Properties `success`, `error`, `iconSuccess` and `iconError` are designed to control the visual state of the dialog and automatically display corresponding icons.
+
+**Properties:**
+
+- `success` — sets the dialog to success state with automatic icon
+- `error` — sets the dialog to error state with automatic icon
+- `iconSuccess` — sets the icon for success state (default 'check_circle')
+- `iconError` — sets the icon for error state (default 'error')
+
+Properties work together: if `success` or `error` are not set or equal to `false`, the dialog is displayed in a neutral state. When `success="true"` is activated, the component automatically displays the success icon from `iconSuccess`. When `error="true"` is activated, the error icon from `iconError` is displayed. Properties `iconSuccess` and `iconError` allow overriding standard icons with custom ones, providing flexibility in visual design of dialog messages.
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const showSuccess = ref(false)
+const showError = ref(false)
+</script>
+
+<template>
+  <!-- Success dialog -->
+  <Dialog
+    v-model:open="showSuccess"
+    :success="true"
+    label="Operation completed"
+    description="Your changes have been saved successfully."
+  />
+
+  <!-- Error dialog -->
+  <Dialog
+    v-model:open="showError"
+    :error="true"
+    label="Operation failed"
+    description="Unable to complete the operation. Please try again."
+  />
+
+  <!-- With custom icons -->
+  <Dialog
+    v-model:open="showSuccess"
+    :success="true"
+    iconSuccess="done_all"
+    label="All done"
+    description="Process completed successfully."
+  />
+
+  <!-- Error with custom icon -->
+  <Dialog
+    v-model:open="showError"
+    :error="true"
+    iconError="warning"
+    label="Warning"
+    description="Issues detected during data processing."
+  />
+</template>
+```
+

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

@@ -0,0 +1,57 @@
+## Состояния успеха и ошибки
+
+Свойства `success`, `error`, `iconSuccess` и `iconError` предназначены для управления визуальным состоянием диалога и автоматического отображения соответствующих иконок.
+
+**Свойства:**
+
+- `success` — переводит диалог в состояние успеха с автоматической иконкой
+- `error` — переводит диалог в состояние ошибки с автоматической иконкой
+- `iconSuccess` — задаёт иконку для состояния успеха (по умолчанию 'check_circle')
+- `iconError` — задаёт иконку для состояния ошибки (по умолчанию 'error')
+
+Свойства работают совместно: если `success` или `error` не заданы или равны `false`, диалог отображается в нейтральном состоянии. При активации `success="true"`, компонент автоматически отображает иконку успеха из `iconSuccess`. При активации `error="true"`, отображается иконка ошибки из `iconError`. Свойства `iconSuccess` и `iconError` позволяют переопределить стандартные иконки на пользовательские, обеспечивая гибкость визуального оформления диалоговых сообщений.
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const showSuccess = ref(false)
+const showError = ref(false)
+</script>
+
+<template>
+  <!-- Диалог успеха -->
+  <Dialog
+    v-model:open="showSuccess"
+    :success="true"
+    label="Операция выполнена"
+    description="Ваши изменения успешно сохранены."
+  />
+
+  <!-- Диалог ошибки -->
+  <Dialog
+    v-model:open="showError"
+    :error="true"
+    label="Ошибка выполнения"
+    description="Не удалось выполнить операцию. Попробуйте ещё раз."
+  />
+
+  <!-- С пользовательскими иконками -->
+  <Dialog
+    v-model:open="showSuccess"
+    :success="true"
+    iconSuccess="done_all"
+    label="Всё готово"
+    description="Процесс завершён успешно."
+  />
+
+  <!-- Ошибка с кастомной иконкой -->
+  <Dialog
+    v-model:open="showError"
+    :error="true"
+    iconError="warning"
+    label="Внимание"
+    description="Обнаружены проблемы при обработке данных."
+  />
+</template>
+```

package/src/media/mdx/Dialog/wikiMdxDialog.ts

@@ -0,0 +1,37 @@
+import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
+
+import dialogEn from './dialog.en.mdx'
+import dialogRu from './dialog.ru.mdx'
+import statesEn from './states.en.mdx'
+import statesRu from './states.ru.mdx'
+import buttonsEn from './buttons.en.mdx'
+import buttonsRu from './buttons.ru.mdx'
+import eventsEn from './events.en.mdx'
+import eventsRu from './events.ru.mdx'
+
+/**
+ * MDX files for Dialog component
+ *
+ * MDX файлы для компонента Dialog
+ */
+export const wikiMdxDialog: StorybookComponentsMdxItem = {
+  name: 'Dialog',
+  descriptions: {
+    dialog: {
+      en: dialogEn,
+      ru: dialogRu
+    },
+    states: {
+      en: statesEn,
+      ru: statesRu
+    },
+    buttons: {
+      en: buttonsEn,
+      ru: buttonsRu
+    },
+    events: {
+      en: eventsEn,
+      ru: eventsRu
+    }
+  }
+}

package/src/media/mdx/Field/arrows.en.mdx

@@ -1,16 +1,16 @@
 ## Navigation and arrows
 
-Properties `arrowCarousel`, `arrowStepper`, `disabledPrevious`, `disabledNext`, and `align` are designed to control built-in navigation elements and content alignment.
+Properties `arrowCarousel`, `arrowStepper`, `arrowAlign`, `disabledPrevious`, and `disabledNext` are designed to control built-in navigation elements.
 
 **Properties:**
 
 - `arrowCarousel` — enables navigation arrows (left/right) for switching elements
 - `arrowStepper` — enables numeric step buttons (minus/plus)
+- `arrowAlign` — controls horizontal position of navigation arrows (`left`, `center`, `right`)
 - `disabledPrevious` — disables the left button (back/minus)
 - `disabledNext` — disables the right button (forward/plus)
-- `align` — horizontal content alignment (`left`, `center`, `right`)
 
-Properties work together: only one arrow mode is active — if `arrowCarousel = true`, the `arrowStepper` mode is ignored and vice versa. When navigation mode is active, the clear button (`cancel`) is automatically hidden, as the control area takes priority. The `disabledPrevious` and `disabledNext` flags apply only to the currently active arrow mode. The `align` property affects text and content alignment inside the field, but does not change the position of the navigation buttons themselves.
+Properties work together: only one arrow mode is active — if `arrowCarousel = true`, the `arrowStepper` mode is ignored and vice versa. When navigation mode is active, the clear button (`cancel`) is automatically hidden, as the control area takes priority. The `disabledPrevious` and `disabledNext` flags apply only to the currently active arrow mode.
 
 ```html
 <script setup>
@@ -39,11 +39,10 @@ const count = ref(5)
     </template>
   </Field>
 
-  <!-- Numeric stepper with centering -->
+  <!-- Numeric stepper -->
   <Field
     label="Quantity"
     arrow-stepper
-    align="center"
     :disabled-previous="count <= 0"
     :disabled-next="count >= 99"
   >
@@ -57,10 +56,27 @@ const count = ref(5)
     </template>
   </Field>
 
-  <!-- Stepper without limits -->
+  <!-- Stepper with left-aligned arrows -->
   <Field
     label="Value"
     arrow-stepper
+    arrow-align="left"
+  >
+    <template #default="{ id, className }">
+      <input
+        :id="id"
+        :class="className"
+        :value="count"
+        readonly
+      />
+    </template>
+  </Field>
+
+  <!-- Stepper with centered arrows -->
+  <Field
+    label="Value"
+    arrow-stepper
+    arrow-align="center"
   >
     <template #default="{ id, className }">
       <input

package/src/media/mdx/Field/arrows.ru.mdx

@@ -1,16 +1,16 @@
 ## Навигация и стрелки
 
-Свойства `arrowCarousel`, `arrowStepper`, `disabledPrevious`, `disabledNext` и `align` предназначены для управления встроенными элементами навигации и выравнивания содержимого.
+Свойства `arrowCarousel`, `arrowStepper`, `arrowAlign`, `disabledPrevious` и `disabledNext` предназначены для управления встроенными элементами навигации.
 
 **Свойства:**
 
 - `arrowCarousel` — включает стрелки навигации (влево/вправо) для переключения элементов
 - `arrowStepper` — включает числовые шаговые кнопки (минус/плюс)
+- `arrowAlign` — управляет горизонтальным расположением стрелок навигации (`left`, `center`, `right`)
 - `disabledPrevious` — отключает левую кнопку (назад/минус)
 - `disabledNext` — отключает правую кнопку (вперёд/плюс)
-- `align` — горизонтальное выравнивание содержимого (`left`, `center`, `right`)
 
-Свойства работают совместно: активен только один режим стрелок — если `arrowCarousel = true`, режим `arrowStepper` игнорируется и наоборот. При активном режиме навигации кнопка очистки (`cancel`) автоматически скрывается, так как область управления имеет приоритет. Флаги `disabledPrevious` и `disabledNext` применяются только к текущему активному режиму стрелок. Свойство `align` влияет на выравнивание текста и содержимого внутри поля, но не изменяет позицию самих кнопок навигации.
+Свойства работают совместно: активен только один режим стрелок — если `arrowCarousel = true`, режим `arrowStepper` игнорируется и наоборот. При активном режиме навигации кнопка очистки (`cancel`) автоматически скрывается, так как область управления имеет приоритет. Флаги `disabledPrevious` и `disabledNext` применяются только к текущему активному режиму стрелок.
 
 ```html
 <script setup>
@@ -39,11 +39,10 @@ const count = ref(5)
     </template>
   </Field>
 
-  <!-- Числовой степпер с центрированием -->
+  <!-- Числовой степпер -->
   <Field
     label="Количество"
     arrow-stepper
-    align="center"
     :disabled-previous="count <= 0"
     :disabled-next="count >= 99"
   >
@@ -57,10 +56,27 @@ const count = ref(5)
     </template>
   </Field>
 
-  <!-- Степпер без ограничений -->
+  <!-- Степпер со стрелками слева -->
   <Field
     label="Значение"
     arrow-stepper
+    arrow-align="left"
+  >
+    <template #default="{ id, className }">
+      <input
+        :id="id"
+        :class="className"
+        :value="count"
+        readonly
+      />
+    </template>
+  </Field>
+
+  <!-- Степпер с центрированными стрелками -->
+  <Field
+    label="Значение"
+    arrow-stepper
+    arrow-align="center"
   >
     <template #default="{ id, className }">
       <input

package/src/media/mdx/Field/slots.en.mdx

@@ -5,19 +5,6 @@ Slot for placing the main input element (input, select, textarea, etc.). Require
 **Parameters:**
 - `props: FieldControl` — object with data for binding the input element
 
-### `leading`
-
-Slot for placing content at the start of the interactive field area, before the main input element.
-
-**Parameters:**
-- `props: FieldControl` — object with data for binding
-
-### `trailing`
-
-Slot for placing content at the end of the interactive field area, after the main input element.
-
-**Parameters:**
-- `props: FieldControl` — object with data for binding
 
 ## FieldControl
 

package/src/media/mdx/Field/slots.ru.mdx

@@ -5,19 +5,6 @@
 **Параметры:**
 - `props: FieldControl` — объект с данными для связывания элемента ввода
 
-### `leading`
-
-Слот для размещения контента в начале интерактивной области поля, перед основным элементом ввода.
-
-**Параметры:**
-- `props: FieldControl` — объект с данными для связывания
-
-### `trailing`
-
-Слот для размещения контента в конце интерактивной области поля, после основного элемента ввода.
-
-**Параметры:**
-- `props: FieldControl` — объект с данными для связывания
 
 ## FieldControl