@dxtmisha/wiki 0.24.2 → 0.25.1

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

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

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

@@ -0,0 +1,100 @@
+### `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`** — обработчик клика для открытия/закрытия меню
+

package/src/media/mdx/Menu/wikiMdxMenu.ts

@@ -2,19 +2,18 @@ import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
 
 import ajaxEn from './ajax.en.mdx'
 import ajaxRu from './ajax.ru.mdx'
+import eventUpdateValueEn from './event.updateValue.en.mdx'
+import eventUpdateValueRu from './event.updateValue.ru.mdx'
+import exposeNavigationEn from './expose.navigation.en.mdx'
+import exposeNavigationRu from './expose.navigation.ru.mdx'
 import menuEn from './menu.en.mdx'
 import menuRu from './menu.ru.mdx'
-
-import slotControlEn from './slot.control.en.mdx'
-import slotControlRu from './slot.control.ru.mdx'
-import slotTitleEn from './slot.title.en.mdx'
-import slotTitleRu from './slot.title.ru.mdx'
-import slotFooterEn from './slot.footer.en.mdx'
-import slotFooterRu from './slot.footer.ru.mdx'
-import slotContextTopEn from './slot.contextTop.en.mdx'
-import slotContextTopRu from './slot.contextTop.ru.mdx'
-import slotContextBottomEn from './slot.contextBottom.en.mdx'
-import slotContextBottomRu from './slot.contextBottom.ru.mdx'
+import navigationEn from './navigation.en.mdx'
+import navigationRu from './navigation.ru.mdx'
+import slotsEn from './slots.en.mdx'
+import slotsRu from './slots.ru.mdx'
+import slotsControlEn from './slots.control.en.mdx'
+import slotsControlRu from './slots.control.ru.mdx'
 
 /** MDX документация для компонента Menu */
 export const wikiMdxMenu: StorybookComponentsMdxItem = {
@@ -24,29 +23,29 @@ export const wikiMdxMenu: StorybookComponentsMdxItem = {
       en: ajaxEn,
       ru: ajaxRu
     },
+    'event.updateValue': {
+      en: eventUpdateValueEn,
+      ru: eventUpdateValueRu
+    },
+    'expose.navigation': {
+      en: exposeNavigationEn,
+      ru: exposeNavigationRu
+    },
     'menu': {
       en: menuEn,
       ru: menuRu
     },
-    'slot.control': {
-      en: slotControlEn,
-      ru: slotControlRu
-    },
-    'slot.title': {
-      en: slotTitleEn,
-      ru: slotTitleRu
-    },
-    'slot.footer': {
-      en: slotFooterEn,
-      ru: slotFooterRu
+    'navigation': {
+      en: navigationEn,
+      ru: navigationRu
     },
-    'slot.contextTop': {
-      en: slotContextTopEn,
-      ru: slotContextTopRu
+    'slots': {
+      en: slotsEn,
+      ru: slotsRu
     },
-    'slot.contextBottom': {
-      en: slotContextBottomEn,
-      ru: slotContextBottomRu
+    'slotsControl': {
+      en: slotsControlEn,
+      ru: slotsControlRu
     }
   }
 }

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/MotionTransform/animationHeadPosition.en.mdx

@@ -2,29 +2,17 @@
 
 The `animationHeadPosition` property controls how the Head area behaves during show/hide animations.
 
-```
-animationHeadPosition?: 'top' | 'toBottom'
-```
-
-### Values
-
-- **`top`** — Keeps the Head at the top during transition (default)
-- **`toBottom`** — Animates the Head toward the bottom together with content
+**Possible values:**
 
-### When to use
+- `'top'` — keeps the Head at the top during transition (default)
+- `'toBottom'` — animates the Head toward the bottom together with content
 
-- **Collapsing layouts** — When the header should travel with expanding/collapsing content
-- **Smooth transitions** — For creating more natural motion perception
-- **Content hierarchy** — When header position affects content flow understanding
+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.
 
-### Features
+```html
+<!-- Head stays at top -->
+<MotionTransform animationHeadPosition="top" />
 
-- **Motion coordination** — Synchronizes header movement with content animation
-- **Flexible positioning** — Adapts to different layout requirements
-- **Performance optimized** — Uses CSS transforms for smooth animations
-
-### Limitations
-
-- **When `section` is enabled** — If the `section` property is set to `true`, then `animationHeadPosition` is ignored and does not affect animation behavior
-
-> Combine with `animationShow` to fine‑tune the overall motion experience.
+<!-- Head moves down with content -->
+<MotionTransform animationHeadPosition="toBottom" />
+```