@dxtmisha/wiki 0.24.3 → 0.25.1

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

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/expose.motionTransformElement.en.mdx

@@ -0,0 +1,13 @@
+### `motionTransformElement`
+
+Reactive reference to the nested MotionTransform component's expose API, providing programmatic access to control methods.
+
+**Type:** `Ref<ConstrBind<MotionTransformExpose> | undefined>`
+
+**Methods via motionTransformElement.value:**
+- `open` — reactive open state
+- `isShow` — computed visibility state
+- `setOpen(open: boolean)` — set open state
+- `toOpen()` — open component
+- `toClose()` — close component
+- `toggle()` — toggle state

package/src/media/mdx/MotionTransform/expose.motionTransformElement.ru.mdx

@@ -0,0 +1,14 @@
+### `motionTransformElement`
+
+Реактивная ссылка на expose API вложенного компонента MotionTransform, предоставляющая программный доступ к методам управления.
+
+**Тип:** `Ref<ConstrBind<MotionTransformExpose> | undefined>`
+
+**Методы через motionTransformElement.value:**
+- `open` — реактивное состояние открытия
+- `isShow` — вычисляемое состояние видимости
+- `setOpen(open: boolean)` — установить состояние открытия
+- `toOpen()` — открыть компонент
+- `toClose()` — закрыть компонент
+- `toggle()` — переключить состояние
+

package/src/media/mdx/MotionTransform/wikiMdxMotionTransform.ts

@@ -8,6 +8,8 @@ import eventsEn from './events.en.mdx'
 import eventsRu from './events.ru.mdx'
 import exposeIsShowEn from './expose.isShow.en.mdx'
 import exposeIsShowRu from './expose.isShow.ru.mdx'
+import exposeMotionTransformElementEn from './expose.motionTransformElement.en.mdx'
+import exposeMotionTransformElementRu from './expose.motionTransformElement.ru.mdx'
 import ignoreEn from './ignore.en.mdx'
 import ignoreRu from './ignore.ru.mdx'
 import motionTransformEn from './motionTransform.en.mdx'
@@ -41,6 +43,10 @@ export const wikiMdxMotionTransform: StorybookComponentsMdxItem = {
       en: exposeIsShowEn,
       ru: exposeIsShowRu
     },
+    'expose.motionTransformElement': {
+      en: exposeMotionTransformElementEn,
+      ru: exposeMotionTransformElementRu
+    },
     'ignore': {
       en: ignoreEn,
       ru: ignoreRu

package/src/media/mdx/Select/select.en.mdx

@@ -0,0 +1,69 @@
+Component for creating dropdown selection lists with search, filtering, multiple selection, and validation support.
+
+Select is a complete selection element that combines Field, Menu, SelectValue, and Input components to create an advanced selection interface. The component automatically displays selected values as text or chips (for multiple selection), provides built-in search and option filtering, supports AJAX data loading with caching. It integrates with all Field component features including validation, labels, counters, and messages.
+
+**Key features:**
+
+- Single or multiple value selection
+- Built-in search and real-time option filtering
+- AJAX data loading with caching support
+- Editable selected value mode (editValue)
+- Validation with standard Field features
+- Keyboard navigation and accessibility support
+- Automatic display of selected values (text or chips)
+- Maximum number of selected items limitation
+- Icon support for dropdown arrow and search
+- Auto-close control for multiple selection
+- Integration with Field, Menu, SelectValue, Input components
+- Customization via slots and attributes
+- Responsive design for mobile devices
+
+**Typical use cases:**
+
+- Selecting values from a predefined list of options
+- Filtering and searching in large data lists
+- Multiple item selection with quantity limitation
+- Selection with AJAX data loading from server
+- Forms with validation of selected values
+- Combo boxes with editing capability
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const selectedCountry = ref('us')
+const selectedLanguages = ref(['js', 'ts'])
+
+const countries = [
+  { label: 'Russia', value: 'ru' },
+  { label: 'USA', value: 'us' },
+  { label: 'Germany', value: 'de' }
+]
+
+const languages = [
+  { label: 'JavaScript', value: 'js' },
+  { label: 'TypeScript', value: 'ts' },
+  { label: 'Python', value: 'py' }
+]
+</script>
+
+<template>
+  <!-- Simple selection -->
+  <Select
+    v-model="selectedCountry"
+    label="Country"
+    placeholder="Choose a country"
+    :option="countries"
+  />
+
+  <!-- Multiple selection -->
+  <Select
+    v-model="selectedLanguages"
+    label="Programming languages"
+    :multiple="true"
+    :max="3"
+    helper-message="Select up to 3 languages"
+    :option="languages"
+  />
+</template>
+```

package/src/media/mdx/Select/select.ru.mdx

@@ -0,0 +1,69 @@
+Компонент для создания выпадающих списков выбора с поддержкой поиска, фильтрации, множественного выбора и валидации.
+
+Select представляет собой полнофункциональный элемент выбора, объединяющий компоненты Field, Menu, SelectValue и Input для создания продвинутого интерфейса выбора. Компонент автоматически отображает выбранные значения в виде текста или чипов (для множественного выбора), предоставляет встроенный поиск и фильтрацию опций, поддерживает AJAX загрузку данных с кешированием. Интегрируется со всеми возможностями компонента Field, включая валидацию, подписи, счётчики и сообщения.
+
+**Основные возможности:**
+
+- Одиночный или множественный выбор значений
+- Встроенный поиск и фильтрация опций в реальном времени
+- AJAX загрузка данных с поддержкой кеширования
+- Режим редактирования выбранного значения (editValue)
+- Валидация со стандартными функциями Field
+- Клавиатурная навигация и поддержка accessibility
+- Автоматическое отображение выбранных значений (текст или чипы)
+- Ограничение максимального количества выбранных элементов
+- Поддержка иконок для стрелки выпадающего списка и поиска
+- Управление автозакрытием для множественного выбора
+- Интеграция с компонентами Field, Menu, SelectValue, Input
+- Кастомизация через слоты и атрибуты
+- Адаптивный дизайн для мобильных устройств
+
+**Типичные сценарии использования:**
+
+- Выбор значений из предопределённого списка опций
+- Фильтрация и поиск в больших списках данных
+- Множественный выбор элементов с ограничением количества
+- Выбор с AJAX загрузкой данных с сервера
+- Формы с валидацией выбранных значений
+- Комбо-боксы с возможностью редактирования
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const selectedCountry = ref('ru')
+const selectedLanguages = ref(['js', 'ts'])
+
+const countries = [
+  { label: 'Россия', value: 'ru' },
+  { label: 'США', value: 'us' },
+  { label: 'Германия', value: 'de' }
+]
+
+const languages = [
+  { label: 'JavaScript', value: 'js' },
+  { label: 'TypeScript', value: 'ts' },
+  { label: 'Python', value: 'py' }
+]
+</script>
+
+<template>
+  <!-- Простой выбор -->
+  <Select
+    v-model="selectedCountry"
+    label="Страна"
+    placeholder="Выберите страну"
+    :option="countries"
+  />
+
+  <!-- Множественный выбор -->
+  <Select
+    v-model="selectedLanguages"
+    label="Языки программирования"
+    :multiple="true"
+    :max="3"
+    helper-message="Выберите до 3 языков"
+    :option="languages"
+  />
+</template>
+```

package/src/media/mdx/Select/wikiMdxSelect.ts

@@ -0,0 +1,19 @@
+import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
+
+import selectEn from './select.en.mdx'
+import selectRu from './select.ru.mdx'
+
+/**
+ * MDX files for Select component
+ *
+ * MDX файлы для компонента Select
+ */
+export const wikiMdxSelect: StorybookComponentsMdxItem = {
+  name: 'Select',
+  descriptions: {
+    select: {
+      en: selectEn,
+      ru: selectRu
+    }
+  }
+}