@dxtmisha/wiki 0.39.1 → 0.39.2

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

@@ -1,100 +1,14 @@
-### `title`
-
-Slot for placing the menu window title.
-
-**Parameters:**
-- `props: MenuControlItem` — object with menu control data
-
-### `footer`
-
-Slot for placing content in the bottom part of the menu window (action buttons, information).
-
-**Parameters:**
-- `props: MenuControlItem` — object with menu control data
-
-### `contextTop`
-
-Slot for placing contextual area above the menu list (search, filters, hints).
-
-**Parameters:**
-- `props: MenuControlItem` — object with menu control data
-
-### `contextBottom`
-
-Slot for placing contextual area below the menu list (hints, final actions).
-
-**Parameters:**
-- `props: MenuControlItem` — object with menu control data
-
-```html
-<script setup>
-const handleSubmit = (values) => {
-  console.log('Selected values:', values)
-}
-</script>
-
-<template>
-  <Component>
-    <template #title="{ selectedList }">
-      <h3>Select Items</h3>
-      <span v-if="selectedList.length">
-        ({{ selectedList.length }})
-      </span>
-    </template>
-
-    <template #contextTop>
-      <input type="search" placeholder="Search items..." />
-    </template>
-
-    <template #footer="{ isSelected, selectedValues }">
-      <button @click="isOpen = false">Cancel</button>
-      <button
-        :disabled="!isSelected"
-        @click="handleSubmit(selectedValues)"
-      >
-        Apply
-      </button>
-    </template>
-  </Component>
-</template>
-```
-
-## MenuControlItem
-
-`MenuControlItem` — object passed to all Menu component slots, containing menu control data and selection information.
-
-### Type structure
-
-```typescript
-type MenuControlItem = MenuControlBasic & WindowControlItem
-
-type MenuControlBasic = ListExpose & {
-  /** Data loading state */
-  loading: Ref<boolean>
-}
-
-// Includes properties from ListExpose:
-// - isSelected: ComputedRef<boolean>
-// - selectedList: Ref<any[]>
-// - selectedNames: Ref<string[]>
-// - selectedValues: Ref<any[]>
-
-// And properties from WindowControlItem:
-// - classesWindow: WindowClassesList
-// - class: string
-// - open: Ref<boolean>
-// - onclick: (event: MouseEvent & TouchEvent) => Promise<void>
-// - oncontextmenu: (event: MouseEvent & TouchEvent) => Promise<void>
-// - binds: object
-```
-
-### Main properties
-
-- **`loading`** — reactive state of menu data loading
-- **`isSelected`** — computed property indicating presence of selected items
-- **`selectedList`** — reactive list of selected items
-- **`selectedNames`** — reactive list of labels of selected items
-- **`selectedValues`** — reactive array of values of selected items
-- **`open`** — reactive state of menu open/close
-- **`onclick`** — click handler for opening/closing menu
-
+- `title(props: MenuControlItem): any` — Slot for placing the menu window title.
+- `footer(props: MenuControlItem): any` — Slot for placing content in the bottom part of the menu window.
+- `contextTop(props: MenuControlItem): any` — Slot for placing contextual area above the menu list.
+- `contextBottom(props: MenuControlItem): any` — Slot for placing contextual area below the menu list.
+
+> **MenuControlItem:**
+> - `loading: Ref<boolean>` — reactive state of menu data loading.
+> - `open: Ref<boolean>` — reactive state of menu open/close.
+> - `isSelected: ComputedRef<boolean>` — presence of selected items.
+> - `selectedList: Ref<any[]>` — list of selected items.
+> - `selectedNames: Ref<string[]>` — labels of selected items.
+> - `selectedValues: Ref<any[]>` — values of selected items.
+> - `onclick: (event) => Promise<void>` — click handler for opening/closing menu.
+> - `oncontextmenu: (event) => Promise<void>` — context menu handler.

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

@@ -1,100 +1,14 @@
-### `title`
-
-Слот для размещения заголовка окна меню.
-
-**Параметры:**
-- `props: MenuControlItem` — объект с данными управления меню
-
-### `footer`
-
-Слот для размещения содержимого в нижней части окна меню (кнопки действий, информация).
-
-**Параметры:**
-- `props: MenuControlItem` — объект с данными управления меню
-
-### `contextTop`
-
-Слот для размещения контекстной области над списком меню (поиск, фильтры, подсказки).
-
-**Параметры:**
-- `props: MenuControlItem` — объект с данными управления меню
-
-### `contextBottom`
-
-Слот для размещения контекстной области под списком меню (подсказки, итоговые действия).
-
-**Параметры:**
-- `props: MenuControlItem` — объект с данными управления меню
-
-```html
-<script setup>
-const handleSubmit = (values) => {
-  console.log('Выбранные значения:', values)
-}
-</script>
-
-<template>
-  <Component>
-    <template #title="{ selectedList }">
-      <h3>Выбор элементов</h3>
-      <span v-if="selectedList.length">
-        ({{ selectedList.length }})
-      </span>
-    </template>
-
-    <template #contextTop>
-      <input type="search" placeholder="Поиск элементов..." />
-    </template>
-
-    <template #footer="{ isSelected, selectedValues }">
-      <button @click="isOpen = false">Отмена</button>
-      <button
-        :disabled="!isSelected"
-        @click="handleSubmit(selectedValues)"
-      >
-        Применить
-      </button>
-    </template>
-  </Component>
-</template>
-```
-
-## MenuControlItem
-
-`MenuControlItem` — объект, передаваемый во все слоты компонента Menu, содержащий данные для управления меню и информацию о выборе.
-
-### Структура типа
-
-```typescript
-type MenuControlItem = MenuControlBasic & WindowControlItem
-
-type MenuControlBasic = ListExpose & {
-  /** Состояние загрузки данных */
-  loading: Ref<boolean>
-}
-
-// Включает свойства из ListExpose:
-// - isSelected: ComputedRef<boolean>
-// - selectedList: Ref<any[]>
-// - selectedNames: Ref<string[]>
-// - selectedValues: Ref<any[]>
-
-// И свойства из WindowControlItem:
-// - classesWindow: WindowClassesList
-// - class: string
-// - open: Ref<boolean>
-// - onclick: (event: MouseEvent & TouchEvent) => Promise<void>
-// - oncontextmenu: (event: MouseEvent & TouchEvent) => Promise<void>
-// - binds: object
-```
-
-### Основные свойства
-
-- **`loading`** — реактивное состояние загрузки данных меню
-- **`isSelected`** — вычисляемое свойство, указывающее наличие выбранных элементов
-- **`selectedList`** — реактивный список выбранных элементов
-- **`selectedNames`** — реактивный список меток выбранных элементов
-- **`selectedValues`** — реактивный массив значений выбранных элементов
-- **`open`** — реактивное состояние открытия меню
-- **`onclick`** — обработчик клика для открытия/закрытия меню
-
+- `title(props: MenuControlItem): any` — Слот для размещения заголовка окна меню.
+- `footer(props: MenuControlItem): any` — Слот для размещения содержимого в нижней части окна меню.
+- `contextTop(props: MenuControlItem): any` — Слот для размещения контекстной области над списком меню.
+- `contextBottom(props: MenuControlItem): any` — Слот для размещения контекстной области под списком меню.
+
+> **MenuControlItem:**
+> - `loading: Ref<boolean>` — состояние загрузки данных меню.
+> - `open: Ref<boolean>` — состояние открытия меню.
+> - `isSelected: ComputedRef<boolean>` — наличие выбранных элементов.
+> - `selectedList: Ref<any[]>` — список выбранных элементов.
+> - `selectedNames: Ref<string[]>` — метки выбранных элементов.
+> - `selectedValues: Ref<any[]>` — значения выбранных элементов.
+> - `onclick: (event) => Promise<void>` — обработчик клика для открытия/закрытия меню.
+> - `oncontextmenu: (event) => Promise<void>` — обработчик контекстного меню.

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

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

@@ -0,0 +1,30 @@
+## Управление состоянием через 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

@@ -0,0 +1,49 @@
+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/events.en.mdx

@@ -20,14 +20,14 @@ const handleTransform = (event, options) => {
 </script>
 
 <template>
-  <MotionTransform @transform="handleTransform">
+  <Component @transform="handleTransform">
     <template #head>
       <div>Header</div>
     </template>
     <template #body>
       <p>Content</p>
     </template>
-  </MotionTransform>
+  </Component>
 </template>
 ```
 

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

@@ -20,14 +20,14 @@ const handleTransform = (event, options) => {
 </script>
 
 <template>
-  <MotionTransform @transform="handleTransform">
+  <Component @transform="handleTransform">
     <template #head>
       <div>Заголовок</div>
     </template>
     <template #body>
       <p>Содержимое</p>
     </template>
-  </MotionTransform>
+  </Component>
 </template>
 ```
 

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

@@ -0,0 +1,6 @@
+- `open: Ref<boolean>` — reactive open state.
+- `isShow: ComputedRef<boolean>` — computed visibility state.
+- `setOpen(open: boolean): void` — sets the open state.
+- `toOpen(): void` — transitions to the open state.
+- `toClose(): void` — transitions to the close state.
+- `toggle(): void` — toggles the open state.