@dxtmisha/wiki 0.39.2 → 0.39.4

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

@@ -1,49 +0,0 @@
-## AJAX Menu Loading
-
-The `ajax`, `request`, and `cache` properties are designed for managing asynchronous loading and caching of menu data.
-
-**Properties:**
-
-- `ajax` — enables remote data loading mode (URL string or function)
-- `request` — object of type `ApiFetch` with HTTP request settings
-- `cache` — enables caching of loaded menu items
-
-Properties work together: if `ajax` is not specified or equals `false`, the menu uses local data. When `ajax` is activated (URL string or `true`), `request` defines HTTP request parameters (method, headers, body), and `cache` manages data persistence. When `cache` is enabled, repeated menu openings use saved data instead of new requests, reducing server load.
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const isOpen = ref(false)
-</script>
-
-<template>
-  <!-- Loading with URL -->
-  <Menu
-    v-model:open="isOpen"
-    ajax="/api/menu-items"
-    :cache="true"
-  />
-
-  <!-- With request settings -->
-  <Menu
-    v-model:open="isOpen"
-    ajax="/api/menu"
-    :request="{
-      method: 'POST',
-      headers: { 'X-Custom': 'value' },
-      auth: true
-    }"
-    :cache="true"
-  />
-
-  <!-- Loading function -->
-  <Menu
-    v-model:open="isOpen"
-    :ajax="async () => {
-      const response = await fetch('/api/menu')
-      return response.json()
-    }"
-  />
-</template>
-```

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

@@ -1,49 +0,0 @@
-## AJAX загрузка меню
-
-Свойства `ajax`, `request` и `cache` предназначены для управления асинхронной загрузкой и кэшированием данных меню.
-
-**Свойства:**
-
-- `ajax` — включает режим удалённой загрузки данных (строка URL или функция)
-- `request` — объект типа `ApiFetch` с настройками HTTP-запроса
-- `cache` — включает кэширование загруженных элементов меню
-
-Свойства работают совместно: если `ajax` не задан или равен `false`, меню использует локальные данные. При активации `ajax` (строка URL или `true`), `request` определяет параметры HTTP-запроса (метод, заголовки, тело), а `cache` управляет сохранением данных. При включённом `cache` повторные открытия меню используют сохранённые данные вместо новых запросов, снижая нагрузку на сервер.
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const isOpen = ref(false)
-</script>
-
-<template>
-  <!-- Загрузка с URL -->
-  <Menu
-    v-model:open="isOpen"
-    ajax="/api/menu-items"
-    :cache="true"
-  />
-
-  <!-- С настройками запроса -->
-  <Menu
-    v-model:open="isOpen"
-    ajax="/api/menu"
-    :request="{
-      method: 'POST',
-      headers: { 'X-Custom': 'value' },
-      auth: true
-    }"
-    :cache="true"
-  />
-
-  <!-- Функция загрузки -->
-  <Menu
-    v-model:open="isOpen"
-    :ajax="async () => {
-      const response = await fetch('/api/menu')
-      return response.json()
-    }"
-  />
-</template>
-```

package/src/media/mdx/Menu/event.updateValue.en.mdx

@@ -1,29 +0,0 @@
-### `updateValue`
-
-Event fires when the selected value in the menu changes.
-
-**Parameters:**
-- `value?: NumberOrStringOrBoolean` — new selected value
-
-```html
-<script setup>
-const handleUpdateValue = (value) => {
-  console.log('New value:', value)
-  console.log('Value type:', typeof value)
-}
-</script>
-
-<template>
-  <Menu
-    :isSelectedByValue="true"
-    @updateValue="handleUpdateValue"
-  >
-    <template #default>
-      <MenuItem value="item1">Menu Item 1</MenuItem>
-      <MenuItem value="item2">Menu Item 2</MenuItem>
-      <MenuItem value="item3">Menu Item 3</MenuItem>
-    </template>
-  </Menu>
-</template>
-```
-

package/src/media/mdx/Menu/event.updateValue.ru.mdx

@@ -1,30 +0,0 @@
-### `updateValue`
-
-Событие срабатывает при изменении выбранного значения в меню.
-
-**Параметры:**
-- `value?: NumberOrStringOrBoolean` — новое выбранное значение
-
-```html
-<script setup>
-const handleUpdateValue = (value) => {
-  console.log('Новое значение:', value)
-  console.log('Тип значения:', typeof value)
-}
-</script>
-
-<template>
-  <Menu
-    :isSelectedByValue="true"
-    @updateValue="handleUpdateValue"
-  >
-    <template #default>
-      <MenuItem value="item1">Пункт меню 1</MenuItem>
-      <MenuItem value="item2">Пункт меню 2</MenuItem>
-      <MenuItem value="item3">Пункт меню 3</MenuItem>
-    </template>
-  </Menu>
-</template>
-```
-
-

package/src/media/mdx/Menu/expose.navigation.en.mdx

@@ -1,2 +0,0 @@
-- `previous(): void` — Moves selection to the previous menu item based on the `step` property value.
-- `next(): void` — Moves selection to the next menu item based on the `step` property value.

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

@@ -1,2 +0,0 @@
-- `previous(): void` — Перемещает выбор на предыдущий элемент меню на основе значения свойства `step`.
-- `next(): void` — Перемещает выбор на следующий элемент меню на основе значения свойства `step`.

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

@@ -1,64 +0,0 @@
-Component for creating popup menus, dropdown lists, and context menus with navigation and action support.
-
-Menu combines the functionality of Window (positioning and visibility management), Bars (action and tool panel), and List (displaying items, groups, and nested submenus). The component provides keyboard navigation, nested structure support, asynchronous data loading, optimized rendering mode for large lists, and full control over open/close state.
-
-**Key Features:**
-
-- Integration of Window, Bars, and List components
-- Keyboard navigation through menu items
-- Nested submenus with unlimited depth
-- Asynchronous data loading via AJAX
-- Lite mode for optimizing large lists (liteThreshold)
-- Search and filtering of menu items
-- Management of selected items (selected)
-- Flexible positioning relative to anchor
-
-**Typical Use Cases:**
-
-- Navigation dropdown menus
-- Right-click context menus
-- Action and operation menus
-- Selectors with search and filtering
-- Multi-level navigation menus
-- Menus with dynamic data loading
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const isOpen = ref(false)
-const menuItems = ref([
-  { label: 'Create', value: 'create', icon: 'add' },
-  { label: 'Edit', value: 'edit', icon: 'edit' },
-  { label: 'Delete', value: 'delete', icon: 'delete' },
-  {
-    label: 'Export',
-    value: 'export',
-    children: [
-      { label: 'PDF', value: 'pdf' },
-      { label: 'Excel', value: 'excel' },
-      { label: 'CSV', value: 'csv' }
-    ]
-  }
-])
-
-const handleClick = (value) => {
-  console.log('Selected item:', value)
-  isOpen.value = false
-}
-</script>
-
-<template>
-  <button @click="isOpen = true">Open menu</button>
-
-  <Menu
-    v-model:open="isOpen"
-    :list="menuItems"
-    @click="handleClick"
-  >
-    <template #control="{ onclick }">
-      <button @click="onclick">Actions</button>
-    </template>
-  </Menu>
-</template>
-```

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

@@ -1,64 +0,0 @@
-Компонент для создания всплывающих меню, выпадающих списков и контекстных меню с поддержкой навигации и действий.
-
-Menu объединяет функциональность Window (позиционирование и управление видимостью), Bars (панель действий и инструментов) и List (отображение пунктов, групп и вложенных подменю). Компонент обеспечивает клавиатурную навигацию, поддержку вложенной структуры, асинхронную загрузку данных, режим оптимизированного рендеринга для больших списков и полный контроль над состоянием открытия/закрытия.
-
-**Основные возможности:**
-
-- Интеграция Window, Bars и List компонентов
-- Клавиатурная навигация по пунктам меню
-- Вложенные подменю с неограниченной глубиной
-- Асинхронная загрузка данных через AJAX
-- Режим lite для оптимизации больших списков (liteThreshold)
-- Поиск и фильтрация пунктов меню
-- Управление выбранными элементами (selected)
-- Гибкое позиционирование относительно якоря
-
-**Типичные сценарии использования:**
-
-- Выпадающие меню навигации
-- Контекстные меню по правому клику
-- Меню действий и операций
-- Селекторы с поиском и фильтрацией
-- Многоуровневые навигационные меню
-- Меню с динамической загрузкой данных
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const isOpen = ref(false)
-const menuItems = ref([
-  { label: 'Создать', value: 'create', icon: 'add' },
-  { label: 'Редактировать', value: 'edit', icon: 'edit' },
-  { label: 'Удалить', value: 'delete', icon: 'delete' },
-  {
-    label: 'Экспорт',
-    value: 'export',
-    children: [
-      { label: 'PDF', value: 'pdf' },
-      { label: 'Excel', value: 'excel' },
-      { label: 'CSV', value: 'csv' }
-    ]
-  }
-])
-
-const handleClick = (value) => {
-  console.log('Выбран пункт:', value)
-  isOpen.value = false
-}
-</script>
-
-<template>
-  <button @click="isOpen = true">Открыть меню</button>
-
-  <Menu
-    v-model:open="isOpen"
-    :list="menuItems"
-    @click="handleClick"
-  >
-    <template #control="{ onclick }">
-      <button @click="onclick">Действия</button>
-    </template>
-  </Menu>
-</template>
-```

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

@@ -1,56 +0,0 @@
-## Menu item navigation
-
-Methods `previous()` and `next()` are designed for programmatic movement through menu items based on current selection and the `step` property.
-
-**Methods:**
-
-- `previous()` — moves selection to the previous item (backwards by `step` positions)
-- `next()` — moves selection to the next item (forwards by `step` positions)
-- `step` — number of items to skip during navigation (default: 1)
-
-The methods work together with reactive `selected` state: calling `previous()` or `next()` automatically calculates the new position relative to the currently selected item. If no item is selected, the methods select the first available item. When reaching list boundaries (first or last item), navigation stops at the boundary item, preventing overflow beyond the list.
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const menuRef = ref()
-const selected = ref('item2')
-</script>
-
-<template>
-  <!-- Call via ref -->
-  <button @click="menuRef?.previous()">Previous</button>
-  <button @click="menuRef?.next()">Next</button>
-
-  <Menu
-    ref="menuRef"
-    v-model:selected="selected"
-    :list="[
-      { label: 'Item 1', value: 'item1' },
-      { label: 'Item 2', value: 'item2' },
-      { label: 'Item 3', value: 'item3' }
-    ]"
-    :step="1"
-  />
-
-  <!-- Navigation in control slot -->
-  <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>
-
-  <!-- With custom step -->
-  <Menu
-    ref="menuRef"
-    v-model:selected="selected"
-    :list="items"
-    :step="2"
-  />
-</template>
-```
-
-

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

@@ -1,56 +0,0 @@
-## Навигация по элементам меню
-
-Методы `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

@@ -1 +0,0 @@
-- `control(props: MenuControlItem): any` — Slot for placing the menu control element (trigger).

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

@@ -1 +0,0 @@
-- `control(props: MenuControlItem): any` — Слот для размещения элемента управления (триггера) меню.

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

@@ -1,14 +0,0 @@
-- `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,14 +0,0 @@
-- `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/Menu/wikiMdxMenu.ts

@@ -1,51 +0,0 @@
-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': {
-      en: ajaxEn,
-      ru: ajaxRu
-    },
-    'event.updateValue': {
-      en: eventUpdateValueEn,
-      ru: eventUpdateValueRu
-    },
-    'expose.navigation': {
-      en: exposeNavigationEn,
-      ru: exposeNavigationRu
-    },
-    'menu': {
-      en: menuEn,
-      ru: menuRu
-    },
-    'navigation': {
-      en: navigationEn,
-      ru: navigationRu
-    },
-    'slots': {
-      en: slotsEn,
-      ru: slotsRu
-    },
-    'slotsControl': {
-      en: slotsControlEn,
-      ru: slotsControlRu
-    }
-  }
-}

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

@@ -1,130 +0,0 @@
-## 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**, когда нужно простое подтверждение или системное уведомление