@dxtmisha/wiki 0.39.3 → 0.39.5

package/src/media/mdx/Modal/differences.en.mdx

@@ -0,0 +1,130 @@
+## Differences between Modal, ActionSheet and Dialog
+
+All three components are built on top of **Window**, but have different purposes and behaviors:
+
+### Modal
+
+**Modal** — a modal window with centered positioning for content requiring immediate user attention.
+
+**Features:**
+- Uses `adaptive: 'modal'` Window mode
+- **Centered positioning** by default
+- Semi-transparent overlay blocks interaction with the main interface
+- Closes on ESC key and click outside (unless `persistent` is set)
+- Supports slots for title, content, and footer
+- Integrated with Bars and Actions components
+
+**Common use cases:**
+- Action confirmation dialogs
+- Create/edit record forms
+- Warnings and informational messages
+- Viewing detailed information
+
+---
+
+### ActionSheet
+
+**ActionSheet** — a modal panel with a set of actions appearing from the bottom of the screen (on mobile devices) or as a context menu.
+
+**Features:**
+- Uses `adaptive: 'actionSheet'` Window mode
+- **Bottom positioning** on mobile devices
+- **Swipe down gesture** support for closing (`touchClose`)
+- Automatically adds dividers between items (`divider: true`)
+- Adaptive behavior: can transform into modal on larger screens
+- Specialized for action lists
+
+**Common use cases:**
+- Action menus for objects (edit, delete, share)
+- Selecting an option from a list
+- Context menus on mobile devices
+- Actions requiring quick access
+
+---
+
+### Dialog
+
+**Dialog** — a component for dialog windows with simplified API.
+
+**Features:**
+- Usually an even more simplified wrapper over Modal
+- May have preset styles for system dialogs
+- Often used for simple confirmations (yes/no, OK/Cancel)
+
+**Common use cases:**
+- Simple confirmations (alert, confirm)
+- System notifications
+- Quick dialogs without complex content
+
+---
+
+### Choosing a component
+
+- **Use Modal** when you need to display a form, detailed information, or content requiring user attention
+- **Use ActionSheet** when you need to offer a list of actions, especially on mobile devices
+- **Use Dialog** when you need a simple confirmation or system notification
+## Разница между Modal, ActionSheet и Dialog
+
+Все три компонента построены на базе **Window**, но имеют различное назначение и поведение:
+
+### Modal
+
+**Modal** — модальное окно с центрированным позиционированием для контента, требующего немедленного внимания пользователя.
+
+**Особенности:**
+- Использует `adaptive: 'modal'` режим Window
+- **Центрированное позиционирование** по умолчанию
+- Полупрозрачный оверлей блокирует взаимодействие с основным интерфейсом
+- Закрывается по ESC и клику вне области (если не установлен `persistent`)
+- Поддерживает слоты для заголовка, контента и футера
+- Интегрирован с компонентами Bars и Actions
+
+**Типичные сценарии:**
+- Диалоги подтверждения действий
+- Формы создания/редактирования записей
+- Предупреждения и информационные сообщения
+- Просмотр детальной информации
+
+---
+
+### ActionSheet
+
+**ActionSheet** — модальная панель с набором действий, появляющаяся снизу экрана (на мобильных устройствах) или в виде контекстного меню.
+
+**Особенности:**
+- Использует `adaptive: 'actionSheet'` режим Window
+- **Позиционирование снизу** экрана на мобильных устройствах
+- Поддержка **жеста свайпа вниз** для закрытия (`touchClose`)
+- Автоматически добавляет разделители между элементами (`divider: true`)
+- Адаптивное поведение: может трансформироваться в modal на больших экранах
+- Специализирован для списков действий
+
+**Типичные сценарии:**
+- Меню действий с объектом (редактировать, удалить, поделиться)
+- Выбор опции из списка
+- Контекстные меню на мобильных устройствах
+- Действия, требующие быстрого доступа
+
+---
+
+### Dialog
+
+**Dialog** — компонент для диалоговых окон с упрощенным API (если реализован в вашей системе).
+
+**Особенности:**
+- Обычно является еще более упрощенной оберткой над Modal
+- Может иметь предустановленные стили для системных диалогов
+- Часто используется для простых подтверждений (да/нет, ОК/Отмена)
+
+**Типичные сценарии:**
+- Простые подтверждения (alert, confirm)
+- Системные уведомления
+- Быстрые диалоги без сложного контента
+
+---
+
+### Выбор компонента
+
+- **Используйте Modal**, когда нужно показать форму, детальную информацию или контент, требующий внимания пользователя
+- **Используйте ActionSheet**, когда нужно предложить список действий, особенно на мобильных устройствах
+- **Используйте Dialog**, когда нужно простое подтверждение или системное уведомление

package/src/media/mdx/Modal/differences.ru.mdx

@@ -0,0 +1,65 @@
+## Разница между Modal, ActionSheet и Dialog
+
+Все три компонента построены на базе **Window**, но имеют различное назначение и поведение:
+
+### Modal
+
+**Modal** — модальное окно с центрированным позиционированием для контента, требующего немедленного внимания пользователя.
+
+**Особенности:**
+- Использует `adaptive: 'modal'` режим Window
+- **Центрированное позиционирование** по умолчанию
+- Полупрозрачный оверлей блокирует взаимодействие с основным интерфейсом
+- Закрывается по ESC и клику вне области (если не установлен `persistent`)
+- Поддерживает слоты для заголовка, контента и футера
+- Интегрирован с компонентами Bars и Actions
+
+**Типичные сценарии:**
+- Диалоги подтверждения действий
+- Формы создания/редактирования записей
+- Предупреждения и информационные сообщения
+- Просмотр детальной информации
+
+---
+
+### ActionSheet
+
+**ActionSheet** — модальная панель с набором действий, появляющаяся снизу экрана (на мобильных устройствах) или в виде контекстного меню.
+
+**Особенности:**
+- Использует `adaptive: 'actionSheet'` режим Window
+- **Позиционирование снизу** экрана на мобильных устройствах
+- Поддержка **жеста свайпа вниз** для закрытия (`touchClose`)
+- Автоматически добавляет разделители между элементами (`divider: true`)
+- Адаптивное поведение: может трансформироваться в modal на больших экранах
+- Специализирован для списков действий
+
+**Типичные сценарии:**
+- Меню действий с объектом (редактировать, удалить, поделиться)
+- Выбор опции из списка
+- Контекстные меню на мобильных устройствах
+- Действия, требующие быстрого доступа
+
+---
+
+### Dialog
+
+**Dialog** — компонент для диалоговых окон с упрощенным API.
+
+**Особенности:**
+- Обычно является еще более упрощенной оберткой над Modal
+- Может иметь предустановленные стили для системных диалогов
+- Часто используется для простых подтверждений (да/нет, ОК/Отмена)
+
+**Типичные сценарии:**
+- Простые подтверждения (alert, confirm)
+- Системные уведомления
+- Быстрые диалоги без сложного контента
+
+---
+
+### Выбор компонента
+
+- **Используйте Modal**, когда нужно показать форму, детальную информацию или контент, требующий внимания пользователя
+- **Используйте ActionSheet**, когда нужно предложить список действий, особенно на мобильных устройствах
+- **Используйте Dialog**, когда нужно простое подтверждение или системное уведомление

package/src/media/mdx/Modal/modal.en.mdx

@@ -0,0 +1,63 @@
+A simplified wrapper over the Window component for creating modal dialogs with preconfigured centered positioning settings.
+
+Modal is a specialized component that uses Window with a fixed `adaptive: 'modal'` mode. It is designed to display content that requires immediate user attention, blocking interaction with the main interface. The component automatically centers content, adds a semi-transparent backdrop (overlay), and manages focus.
+
+**Key features:**
+
+- Centered positioning by default
+- Semi-transparent overlay with background blocking
+- Control via v-model:open
+- Close on ESC key and click outside
+- Integration with Scrollbar for long content
+- Slots for title, content, and footer
+- Lifecycle events (preparation, opening, closing)
+- Close button with customizable icon
+
+**Differences from Window:**
+
+Modal is a Window with preset `adaptive: 'modal'`, which simplifies usage for standard dialog windows without explicitly specifying the adaptive mode.
+
+**Common use cases:**
+
+- Action confirmation dialogs
+- Create/edit forms
+- Warnings and informational messages
+- Viewing detailed information
+- Multi-step wizards
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const isModalOpen = ref(false)
+
+const handleBeforeClosing = async () => {
+  // Check before closing
+  return confirm('Close modal window?')
+}
+</script>
+
+<template>
+  <button @click="isModalOpen = true">Open Modal</button>
+
+  <Modal
+    v-model:open="isModalOpen"
+    :beforeClosing="handleBeforeClosing"
+    closeButton
+  >
+    <template #title>
+      <h2>Confirm Action</h2>
+    </template>
+
+    <template #default>
+      <p>Are you sure you want to perform this action?</p>
+      <p>This action cannot be undone.</p>
+    </template>
+
+    <template #footer="{ classesModal }">
+      <button :class="classesModal.close">Cancel</button>
+      <button @click="performAction">Confirm</button>
+    </template>
+  </Modal>
+</template>
+```

package/src/media/mdx/Modal/modal.ru.mdx

@@ -0,0 +1,63 @@
+Упрощенная обертка над компонентом Window для создания модальных диалогов с предустановленными настройками центрированного позиционирования.
+
+Modal является специализированным компонентом, который использует Window с фиксированным режимом `adaptive: 'modal'`. Он предназначен для отображения контента, требующего немедленного внимания пользователя, с блокировкой взаимодействия с основным интерфейсом. Компонент автоматически центрирует содержимое, добавляет полупрозрачный фон (overlay) и управляет фокусом.
+
+**Основные возможности:**
+
+- Центрированное позиционирование по умолчанию
+- Полупрозрачный оверлей с блокировкой фона
+- Управление через v-model:open
+- Закрытие по ESC и клику вне области
+- Интеграция со Scrollbar для длинного контента
+- Слоты для заголовка, содержимого и футера
+- События жизненного цикла (preparation, opening, closing)
+- Кнопка закрытия с настраиваемой иконкой
+
+**Отличия от Window:**
+
+Modal - это Window с предустановленным `adaptive: 'modal'`, что упрощает использование для стандартных диалоговых окон без необходимости явно указывать режим адаптивности.
+
+**Типичные сценарии использования:**
+
+- Диалоги подтверждения действий
+- Формы создания/редактирования
+- Предупреждения и информационные сообщения
+- Просмотр детальной информации
+- Многошаговые мастера (wizards)
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const isModalOpen = ref(false)
+
+const handleBeforeClosing = async () => {
+  // Проверка перед закрытием
+  return confirm('Закрыть модальное окно?')
+}
+</script>
+
+<template>
+  <button @click="isModalOpen = true">Открыть модальное окно</button>
+
+  <Modal
+    v-model:open="isModalOpen"
+    :beforeClosing="handleBeforeClosing"
+    closeButton
+  >
+    <template #title>
+      <h2>Подтверждение действия</h2>
+    </template>
+
+    <template #default>
+      <p>Вы уверены, что хотите выполнить это действие?</p>
+      <p>Это действие нельзя будет отменить.</p>
+    </template>
+
+    <template #footer="{ classesModal }">
+      <button :class="classesModal.close">Отмена</button>
+      <button @click="performAction">Подтвердить</button>
+    </template>
+  </Modal>
+</template>
+```

package/src/media/mdx/Modal/wikiMdxModal.ts

@@ -0,0 +1,25 @@
+import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
+
+import differencesEn from './differences.en.mdx'
+import differencesRu from './differences.ru.mdx'
+import modalEn from './modal.en.mdx'
+import modalRu from './modal.ru.mdx'
+
+/**
+ * MDX files for Modal component
+ *
+ * MDX файлы для компонента Modal
+ */
+export const wikiMdxModal: StorybookComponentsMdxItem = {
+  name: 'Modal',
+  descriptions: {
+    differences: {
+      en: differencesEn,
+      ru: differencesRu
+    },
+    modal: {
+      en: modalEn,
+      ru: modalRu
+    }
+  }
+}

package/src/media/mdx/MotionAxis/classes.en.mdx

@@ -0,0 +1,18 @@
+## Scroll Management during Animation
+
+The component automatically manages scroll visibility during transition animations to prevent content jumps.
+
+### Usage
+
+To enable this feature, add the `*__scroll` class to the parent container that has scrolling.
+
+1.  Wrap the component in a scrollable container.
+2.  Add the `*__scroll` class to this container (where `*` is the component class name, e.g., `d1-tabs__scroll`).
+
+```html
+<div class="d1-tabs__scroll">
+  <Tabs ... />
+</div>
+```
+
+During the animation, the component will automatically add the `*__scroll--hidden` class (which applies `overflow: hidden`) to this container, and remove it after the animation ends.

package/src/media/mdx/MotionAxis/classes.ru.mdx

@@ -0,0 +1,18 @@
+## Управление скроллом при анимации
+
+Компонент автоматически управляет видимостью скролла во время анимации перехода, чтобы предотвратить "скачки" контента.
+
+### Использование
+
+Для активации этой функции необходимо добавить класс `*__scroll` родительскому контейнеру, который имеет прокрутку.
+
+1.  Оберните компонент в контейнер с прокруткой.
+2.  Добавьте этому контейнеру класс `*__scroll` (где `*` — имя класса компонента, например `d1-tabs__scroll`).
+
+```html
+<div class="d1-tabs__scroll">
+  <Tabs ... />
+</div>
+```
+
+Во время анимации компонент автоматически добавит класс `*__scroll--hidden` (который применяет `overflow: hidden`) к этому контейнеру, а после завершения анимации удалит его.

package/src/media/mdx/MotionAxis/event.en.mdx

@@ -0,0 +1,53 @@
+### `start`
+
+Event triggered at the beginning of the transition animation.
+
+**Parameters:**
+- `selected: string | number` — identifier of the slide to which the transition starts
+
+### `end`
+
+Event triggered after the transition animation completes.
+
+**Parameters:**
+- `selected: string | number` — identifier of the slide on which the transition ended
+
+### `motionAxis`
+
+Event triggered at the beginning and end of the transition animation.
+
+**Parameters:**
+- `options: MotionAxisEmitOptions` — object with event parameters
+
+**Structure MotionAxisEmitOptions:**
+- `type: 'start' | 'end'` — event type
+- `selected: string | number` — identifier of the selected slide
+- `previous: string | number` — identifier of the previous slide
+- `preparation: string | number` — identifier of the slide being prepared
+- `active: string | number` — identifier of the active slide
+
+```html
+<script setup>
+const handleStart = (selected) => {
+  console.log('Animation started to slide:', selected)
+}
+
+const handleEnd = (selected) => {
+  console.log('Animation ended on slide:', selected)
+}
+
+const handleMotionAxis = (options) => {
+  console.log('MotionAxis event:', options)
+}
+</script>
+
+<template>
+  <MotionAxis
+    @start="handleStart"
+    @end="handleEnd"
+    @motionAxis="handleMotionAxis"
+  >
+    <!-- Slides -->
+  </MotionAxis>
+</template>
+```

package/src/media/mdx/MotionAxis/event.ru.mdx

@@ -0,0 +1,53 @@
+### `start`
+
+Событие срабатывает в начале анимации перехода.
+
+**Параметры:**
+- `selected: string | number` — идентификатор слайда, к которому начинается переход
+
+### `end`
+
+Событие срабатывает после завершения анимации перехода.
+
+**Параметры:**
+- `selected: string | number` — идентификатор слайда, на котором завершился переход
+
+### `motionAxis`
+
+Событие срабатывает в начале и в конце анимации перехода.
+
+**Параметры:**
+- `options: MotionAxisEmitOptions` — объект с параметрами события
+
+**Структура MotionAxisEmitOptions:**
+- `type: 'start' | 'end'` — тип события
+- `selected: string | number` — идентификатор выбранного слайда
+- `previous: string | number` — идентификатор предыдущего слайда
+- `preparation: string | number` — идентификатор подготавливаемого слайда
+- `active: string | number` — идентификатор активного слайда
+
+```html
+<script setup>
+const handleStart = (selected) => {
+  console.log('Начало анимации к слайду:', selected)
+}
+
+const handleEnd = (selected) => {
+  console.log('Завершение анимации на слайде:', selected)
+}
+
+const handleMotionAxis = (options) => {
+  console.log('Событие MotionAxis:', options)
+}
+</script>
+
+<template>
+  <MotionAxis
+    @start="handleStart"
+    @end="handleEnd"
+    @motionAxis="handleMotionAxis"
+  >
+    <!-- Слайды -->
+  </MotionAxis>
+</template>
+```

package/src/media/mdx/MotionAxis/expose.en.mdx

@@ -0,0 +1,9 @@
+- `back(): void` — Transition to the previous slide.
+- `next(): void` — Transition to the next slide.
+- `to(selected: string | number): void` — Transition to the specified slide.
+- `top(selected: string | number): void` — Transition to the slide with animation from the top.
+- `right(selected: string | number): void` — Transition to the slide with animation from the right.
+- `bottom(selected: string | number): void` — Transition to the slide with animation from the bottom.
+- `left(selected: string | number): void` — Transition to the slide with animation from the left.
+- `down(selected: string | number): void` — Transition to the slide with animation downwards.
+- `up(selected: string | number): void` — Transition to the slide with animation upwards.

package/src/media/mdx/MotionAxis/expose.ru.mdx

@@ -0,0 +1,9 @@
+- `back(): void` — Переход к предыдущему слайду.
+- `next(): void` — Переход к следующему слайду.
+- `to(selected: string | number): void` — Переход к указанному слайду.
+- `top(selected: string | number): void` — Переход к слайду с анимацией сверху.
+- `right(selected: string | number): void` — Переход к слайду с анимацией справа.
+- `bottom(selected: string | number): void` — Переход к слайду с анимацией снизу.
+- `left(selected: string | number): void` — Переход к слайду с анимацией слева.
+- `down(selected: string | number): void` — Переход к слайду с анимацией вниз.
+- `up(selected: string | number): void` — Переход к слайду с анимацией вверх.

package/src/media/mdx/MotionAxis/motionAxis.en.mdx

@@ -0,0 +1,43 @@
+Component for organizing transitions between elements (slides).
+
+MotionAxis allows animating content changes along X, Y, Z axes with slide effects. Supports automatic animation direction detection, container height management, and lazy loading (DOM).
+
+**Key Features:**
+
+- Slide transition animation along X, Y, Z axes
+- Automatic or manual direction control (next/back)
+- Smooth container height animation to fit content
+- Slide lifecycle management in DOM (inDom, inDomSlide)
+- Slot support for each slide
+
+**Typical Use Cases:**
+
+- Sliders and carousels
+- Step-by-step forms (wizards)
+- Tab switching with animation
+- Image galleries
+- Onboarding screens
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const selected = ref('slide1')
+</script>
+
+<template>
+  <div class="buttons">
+    <button @click="selected = 'slide1'">Slide 1</button>
+    <button @click="selected = 'slide2'">Slide 2</button>
+  </div>
+
+  <MotionAxis :selected="selected">
+    <template #slide1>
+      <div class="slide">Slide 1 Content</div>
+    </template>
+    <template #slide2>
+      <div class="slide">Slide 2 Content</div>
+    </template>
+  </MotionAxis>
+</template>
+```

package/src/media/mdx/MotionAxis/motionAxis.ru.mdx

@@ -0,0 +1,43 @@
+Компонент для организации переходов между элементами (слайдами).
+
+MotionAxis позволяет анимировать смену контента по осям X, Y, Z с эффектами сдвига. Поддерживает автоматическое определение направления анимации, управление высотой контейнера и ленивую загрузку (DOM).
+
+**Основные возможности:**
+
+- Анимация смены слайдов по осям X, Y, Z
+- Автоматическое или ручное управление направлением (вперед/назад)
+- Плавная анимация высоты контейнера под контент
+- Управление жизненным циклом слайдов в DOM (inDom, inDomSlide)
+- Поддержка слотов для каждого слайда
+
+**Типичные сценарии использования:**
+
+- Слайдеры и карусели
+- Пошаговые формы (wizards)
+- Переключение вкладок с анимацией
+- Галереи изображений
+- Онбординг экраны
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const selected = ref('slide1')
+</script>
+
+<template>
+  <div class="buttons">
+    <button @click="selected = 'slide1'">Слайд 1</button>
+    <button @click="selected = 'slide2'">Слайд 2</button>
+  </div>
+
+  <MotionAxis :selected="selected">
+    <template #slide1>
+      <div class="slide">Контент слайда 1</div>
+    </template>
+    <template #slide2>
+      <div class="slide">Контент слайда 2</div>
+    </template>
+  </MotionAxis>
+</template>
+```

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

@@ -0,0 +1 @@
+- `[name]: any` — Slot for slide content. The slot name corresponds to the value passed to the `selected` property.

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

@@ -0,0 +1 @@
+- `[name]: any` — Слот для содержимого слайда. Имя слота соответствует значению, передаваемому в свойство `selected`.

package/src/media/mdx/MotionAxis/v-model.en.mdx

@@ -0,0 +1,30 @@
+## State Management via v-model
+
+Two-way binding of the selected slide via `v-model:selected`.
+
+**Parameters:**
+- `selected: string | number` — identifier of the selected slide
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const selected = ref('slide1')
+</script>
+
+<template>
+  <div class="buttons">
+    <button @click="selected = 'slide1'">Slide 1</button>
+    <button @click="selected = 'slide2'">Slide 2</button>
+  </div>
+
+  <MotionAxis v-model:selected="selected">
+    <template #slide1>
+      <div>Slide 1 Content</div>
+    </template>
+    <template #slide2>
+      <div>Slide 2 Content</div>
+    </template>
+  </MotionAxis>
+</template>
+```