@dxtmisha/wiki 0.39.2 → 0.39.4

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

@@ -1,65 +0,0 @@
-## Разница между 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

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

@@ -1,63 +0,0 @@
-Упрощенная обертка над компонентом 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

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

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

@@ -1,18 +0,0 @@
-## Управление скроллом при анимации
-
-Компонент автоматически управляет видимостью скролла во время анимации перехода, чтобы предотвратить "скачки" контента.
-
-### Использование
-
-Для активации этой функции необходимо добавить класс `*__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

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

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

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

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

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

@@ -1,43 +0,0 @@
-Компонент для организации переходов между элементами (слайдами).
-
-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

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

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

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

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

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

@@ -1,30 +0,0 @@
-## Управление состоянием через v-model
-
-Двусторонняя привязка выбранного слайда через `v-model:selected`.
-
-**Параметры:**
-- `selected: string | number` — идентификатор выбранного слайда
-
-```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 v-model:selected="selected">
-    <template #slide1>
-      <div>Контент слайда 1</div>
-    </template>
-    <template #slide2>
-      <div>Контент слайда 2</div>
-    </template>
-  </MotionAxis>
-</template>
-```

package/src/media/mdx/MotionAxis/wikiMdxMotionAxis.ts

@@ -1,49 +0,0 @@
-import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
-
-import classesEn from './classes.en.mdx'
-import classesRu from './classes.ru.mdx'
-import eventEn from './event.en.mdx'
-import eventRu from './event.ru.mdx'
-import exposeEn from './expose.en.mdx'
-import exposeRu from './expose.ru.mdx'
-import motionAxisEn from './motionAxis.en.mdx'
-import motionAxisRu from './motionAxis.ru.mdx'
-import slotsEn from './slots.en.mdx'
-import slotsRu from './slots.ru.mdx'
-import vModelEn from './v-model.en.mdx'
-import vModelRu from './v-model.ru.mdx'
-
-/**
- * MDX files for MotionAxis component
- *
- * MDX файлы для компонента MotionAxis
- */
-export const wikiMdxMotionAxis: StorybookComponentsMdxItem = {
-  name: 'MotionAxis',
-  descriptions: {
-    'classes': {
-      en: classesEn,
-      ru: classesRu
-    },
-    'events': {
-      en: eventEn,
-      ru: eventRu
-    },
-    'expose': {
-      en: exposeEn,
-      ru: exposeRu
-    },
-    'motionAxis': {
-      en: motionAxisEn,
-      ru: motionAxisRu
-    },
-    'slots': {
-      en: slotsEn,
-      ru: slotsRu
-    },
-    'v-model': {
-      en: vModelEn,
-      ru: vModelRu
-    }
-  }
-}

package/src/media/mdx/MotionTransform/animationHeadPosition.en.mdx

@@ -1,18 +0,0 @@
-## Head position animation
-
-The `animationHeadPosition` property controls how the Head area behaves during show/hide animations.
-
-**Possible values:**
-
-- `'top'` — keeps the Head at the top during transition (default)
-- `'toBottom'` — animates the Head toward the bottom together with content
-
-Synchronizes header movement with content animation using CSS transforms for smooth transitions. Suitable for collapsing layouts when the header should travel with expanding content. When the `section` property is enabled (set to `true`), the `animationHeadPosition` parameter is ignored and does not affect animation behavior.
-
-```html
-<!-- Head stays at top -->
-<MotionTransform animationHeadPosition="top" />
-
-<!-- Head moves down with content -->
-<MotionTransform animationHeadPosition="toBottom" />
-```

package/src/media/mdx/MotionTransform/animationHeadPosition.ru.mdx

@@ -1,18 +0,0 @@
-## Анимация позиции заголовка
-
-Свойство `animationHeadPosition` определяет поведение области Head во время анимаций показа/скрытия.
-
-**Возможные значения:**
-
-- `'top'` — сохраняет Head вверху во время перехода (по умолчанию)
-- `'toBottom'` — анимирует Head вниз вместе с контентом
-
-Синхронизирует движение заголовка с анимацией контента, используя CSS-трансформации для плавных переходов. Подходит для сворачиваемых макетов, когда заголовок должен перемещаться вместе с разворачивающимся содержимым. При включенном свойстве `section` (установлено в `true`) параметр `animationHeadPosition` игнорируется и не влияет на поведение анимации.
-
-```html
-<!-- Head остается вверху -->
-<MotionTransform animationHeadPosition="top" />
-
-<!-- Head движется вниз с контентом -->
-<MotionTransform animationHeadPosition="toBottom" />
-```

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

@@ -1,25 +0,0 @@
-## CSS Classes for Behavior Control
-
-**State classes:**
-
-- `*--open` — component is fully open and its content is visible
-- `*--show` — component is visible or in the process of open/close animation
-- `*--window` — component operates in window mode (with teleportation)
-- `*--click` — added briefly on click for feedback effects
-
-**Control classes:**
-
-- `*--close` — applied to element to trigger MotionTransform closing on click
-- `*--none` — disables default behavior (open/close) for the element
-- `*--noneGlobal` — globally disables MotionTransform events
-
-**Element classes:**
-
-- `*__context` — class for context element for positioning
-- `*__head` — class for header area that acts as a trigger
-- `*__body` — class for content area that appears and disappears
-- `*__backdrop` — class for backdrop element to create overlay effect
-- `*__scrim` — class for scrim layer in modal modes
-- `*__clickNone` — class for element that ignores clicks
-
-Where `*` is the component class name (e.g., `d1-motion-transform`, `m3-motion-transform`).