@dxtmisha/wiki 0.24.3 → 0.39.1

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

@@ -0,0 +1,56 @@
+## Навигация по элементам меню
+
+Методы `previous()` и `next()` предназначены для программного перемещения по элементам меню на основе текущего выбора и свойства `step`.
+
+**Методы:**
+
+- `previous()` — перемещает выбор на предыдущий элемент (назад на `step` позиций)
+- `next()` — перемещает выбор на следующий элемент (вперед на `step` позиций)
+- `step` — количество элементов для пропуска при навигации (по умолчанию: 1)
+
+Методы работают совместно с реактивным состоянием `selected`: при вызове `previous()` или `next()` происходит автоматический расчёт новой позиции относительно текущего выделенного элемента. Если элемент не выбран, методы выбирают первый доступный элемент. При достижении границ списка (первый или последний элемент) навигация останавливается на граничном элементе, предотвращая выход за пределы списка.
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const menuRef = ref()
+const selected = ref('item2')
+</script>
+
+<template>
+  <!-- Вызов через ref -->
+  <button @click="menuRef?.previous()">Назад</button>
+  <button @click="menuRef?.next()">Вперед</button>
+
+  <Menu
+    ref="menuRef"
+    v-model:selected="selected"
+    :list="[
+      { label: 'Элемент 1', value: 'item1' },
+      { label: 'Элемент 2', value: 'item2' },
+      { label: 'Элемент 3', value: 'item3' }
+    ]"
+    :step="1"
+  />
+
+  <!-- Навигация в слоте control -->
+  <Menu v-model:selected="selected" :list="items">
+    <template #control="{ previous, next, selectedNames }">
+      <button @click="previous">◀</button>
+      <span>{{ selectedNames[0] }}</span>
+      <button @click="next">▶</button>
+    </template>
+  </Menu>
+
+  <!-- С пользовательским шагом -->
+  <Menu
+    ref="menuRef"
+    v-model:selected="selected"
+    :list="items"
+    :step="2"
+  />
+</template>
+```
+
+

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

@@ -0,0 +1,65 @@
+### `control`
+
+Slot for placing the menu control element (trigger).
+
+**Parameters:**
+- `props: MenuControlItem` — object with menu control data
+  - `onclick` — function to toggle menu open/close
+  - `isSelected` — computed boolean indicating if any item is selected
+  - `selectedNames` — computed array of selected item labels
+  - `selectedValues` — computed array of selected item values
+  - `selectedList` — computed array of selected list items
+  - `loading` — ref indicating AJAX loading state
+  - `previous()` — method to navigate to previous item(s)
+  - `next()` — method to navigate to next item(s)
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const isOpen = ref(false)
+const menuItems = ref([
+  { label: 'Item 1', value: '1' },
+  { label: 'Item 2', value: '2' },
+  { label: 'Item 3', value: '3' }
+])
+</script>
+
+<template>
+  <Menu v-model:open="isOpen" :list="menuItems">
+    <template #control="{ onclick, isSelected, selectedNames }">
+      <button @click="onclick">
+        {{ isSelected ? selectedNames.join(', ') : 'Select items' }}
+      </button>
+    </template>
+  </Menu>
+</template>
+```
+
+**Navigation Example:**
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const selected = ref('item1')
+const menuItems = ref([
+  { label: 'Item 1', value: 'item1' },
+  { label: 'Item 2', value: 'item2' },
+  { label: 'Item 3', value: 'item3' }
+])
+</script>
+
+<template>
+  <Menu v-model:selected="selected" :list="menuItems">
+    <template #control="{ previous, next, selectedNames }">
+      <div class="navigation-control">
+        <button @click="previous">◀</button>
+        <span>{{ selectedNames[0] }}</span>
+        <button @click="next">▶</button>
+      </div>
+    </template>
+  </Menu>
+</template>
+```
+

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

@@ -0,0 +1,65 @@
+### `control`
+
+Слот для размещения элемента управления (триггера) меню.
+
+**Параметры:**
+- `props: MenuControlItem` — объект с данными управления меню
+  - `onclick` — функция для переключения открытия/закрытия меню
+  - `isSelected` — computed boolean, указывающий, выбран ли какой-либо элемент
+  - `selectedNames` — computed массив меток выбранных элементов
+  - `selectedValues` — computed массив значений выбранных элементов
+  - `selectedList` — computed массив выбранных элементов списка
+  - `loading` — ref, указывающий на состояние загрузки AJAX
+  - `previous()` — метод для перехода к предыдущему элементу(ам)
+  - `next()` — метод для перехода к следующему элементу(ам)
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const isOpen = ref(false)
+const menuItems = ref([
+  { label: 'Элемент 1', value: '1' },
+  { label: 'Элемент 2', value: '2' },
+  { label: 'Элемент 3', value: '3' }
+])
+</script>
+
+<template>
+  <Menu v-model:open="isOpen" :list="menuItems">
+    <template #control="{ onclick, isSelected, selectedNames }">
+      <button @click="onclick">
+        {{ isSelected ? selectedNames.join(', ') : 'Выбрать элементы' }}
+      </button>
+    </template>
+  </Menu>
+</template>
+```
+
+**Пример навигации:**
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const selected = ref('item1')
+const menuItems = ref([
+  { label: 'Элемент 1', value: 'item1' },
+  { label: 'Элемент 2', value: 'item2' },
+  { label: 'Элемент 3', value: 'item3' }
+])
+</script>
+
+<template>
+  <Menu v-model:selected="selected" :list="menuItems">
+    <template #control="{ previous, next, selectedNames }">
+      <div class="navigation-control">
+        <button @click="previous">◀</button>
+        <span>{{ selectedNames[0] }}</span>
+        <button @click="next">▶</button>
+      </div>
+    </template>
+  </Menu>
+</template>
+```
+

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

@@ -1,10 +1,3 @@
-### `control`
-
-Slot for placing the menu control element (trigger).
-
-**Parameters:**
-- `props: MenuControlItem` — object with menu control data
-
 ### `title`
 
 Slot for placing the menu window title.
@@ -35,28 +28,13 @@ Slot for placing contextual area below the menu list (hints, final actions).
 
 ```html
 <script setup>
-import { ref } from 'vue'
-
-const isOpen = ref(false)
-const menuItems = ref([
-  { label: 'Item 1', value: '1' },
-  { label: 'Item 2', value: '2' },
-  { label: 'Item 3', value: '3' }
-])
-
 const handleSubmit = (values) => {
   console.log('Selected values:', values)
 }
 </script>
 
 <template>
-  <Menu v-model:open="isOpen" :list="menuItems">
-    <template #control="{ onclick, isSelected, selectedNames }">
-      <button @click="onclick">
-        {{ isSelected ? selectedNames.join(', ') : 'Select items' }}
-      </button>
-    </template>
-
+  <Component>
     <template #title="{ selectedList }">
       <h3>Select Items</h3>
       <span v-if="selectedList.length">
@@ -77,7 +55,7 @@ const handleSubmit = (values) => {
         Apply
       </button>
     </template>
-  </Menu>
+  </Component>
 </template>
 ```
 

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

@@ -1,10 +1,3 @@
-### `control`
-
-Слот для размещения элемента управления (триггера) меню.
-
-**Параметры:**
-- `props: MenuControlItem` — объект с данными управления меню
-
 ### `title`
 
 Слот для размещения заголовка окна меню.
@@ -35,28 +28,13 @@
 
 ```html
 <script setup>
-import { ref } from 'vue'
-
-const isOpen = ref(false)
-const menuItems = ref([
-  { label: 'Элемент 1', value: '1' },
-  { label: 'Элемент 2', value: '2' },
-  { label: 'Элемент 3', value: '3' }
-])
-
 const handleSubmit = (values) => {
   console.log('Выбранные значения:', values)
 }
 </script>
 
 <template>
-  <Menu v-model:open="isOpen" :list="menuItems">
-    <template #control="{ onclick, isSelected, selectedNames }">
-      <button @click="onclick">
-        {{ isSelected ? selectedNames.join(', ') : 'Выбрать элементы' }}
-      </button>
-    </template>
-
+  <Component>
     <template #title="{ selectedList }">
       <h3>Выбор элементов</h3>
       <span v-if="selectedList.length">
@@ -77,7 +55,7 @@ const handleSubmit = (values) => {
         Применить
       </button>
     </template>
-  </Menu>
+  </Component>
 </template>
 ```
 

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

@@ -2,26 +2,50 @@ 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 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 = {
   name: 'Menu',
   descriptions: {
-    ajax: {
+    'ajax': {
       en: ajaxEn,
       ru: ajaxRu
     },
-    menu: {
+    'event.updateValue': {
+      en: eventUpdateValueEn,
+      ru: eventUpdateValueRu
+    },
+    'expose.navigation': {
+      en: exposeNavigationEn,
+      ru: exposeNavigationRu
+    },
+    'menu': {
       en: menuEn,
       ru: menuRu
     },
-    slots: {
+    'navigation': {
+      en: navigationEn,
+      ru: navigationRu
+    },
+    'slots': {
       en: slotsEn,
       ru: slotsRu
+    },
+    '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>
+```