@dxtmisha/wiki 0.24.2 → 0.25.1

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

@@ -2,55 +2,48 @@
 
 The `ajax`, `request`, and `cache` properties are designed for managing asynchronous loading and caching of menu data.
 
-### Properties
-
-- **ajax** — Enables remote data loading mode for the menu list (URL string or function)
-- **request** — Object of type `ApiFetch` with HTTP request settings
-- **cache** — Enables/configures caching of loaded menu items
-
-### Request Type
-
-The `request` parameter has type `ApiFetch` and accepts the following properties:
-
-```ts
-interface ApiFetch {
-  // Use base API URL
-  api?: boolean
-  // Relative request path
-  path?: string
-  // Full URL (ignores api)
-  pathFull?: string
-  // HTTP method
-  method?: 'GET' | 'POST' | 'PUT' | 'DELETE'
-  // Request data
-  request?: FormData | Record<string, any> | string
-  // Add authorization headers
-  auth?: boolean
-  // Custom headers
-  headers?: Record<string, string> | null
-  // Content-Type
-  type?: string
-  // Wrap response in data object
-  toData?: boolean
-  // Use global settings
-  global?: boolean
-  // Hide errors from user
-  hideError?: boolean
-  // Response handler
-  queryReturn?: (response: Response) => Promise<any>
-  // Additional fetch options
-  init?: RequestInit
-}
+**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>
 ```
-
-### Property Relationships
-
-The properties work together to provide efficient data loading:
-
-- If `ajax = false` (or not specified), the menu uses local data, and `request` and `cache` are ignored
-- If `ajax = true` or specified as a URL string, network loading is activated:
-  - `request` defines HTTP request parameters (method, headers, request body)
-  - `cache` manages saving and reusing received data
-  - When `cache` is enabled, subsequent menu openings use saved data instead of new requests
-
-This approach reduces server load, speeds up interface response, and allows flexible configuration of data loading strategies for different usage scenarios.

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

@@ -2,56 +2,48 @@
 
 Свойства `ajax`, `request` и `cache` предназначены для управления асинхронной загрузкой и кэшированием данных меню.
 
-### Свойства
-
-
-- **ajax** — Включает режим удалённой загрузки данных для списка меню (строка URL или функция)
-- **request** — Объект типа `ApiFetch` с настройками HTTP-запроса
-- **cache** — Включает/настраивает кэширование загруженных элементов меню
-
-### Тип request
-
-Параметр `request` имеет тип `ApiFetch` и принимает следующие свойства:
-
-```ts
-interface ApiFetch {
-  // Использовать базовый API URL
-  api?: boolean
-  // Относительный путь запроса
-  path?: string
-  // Полный URL (игнорирует api)
-  pathFull?: string
-  // HTTP метод
-  method?: 'GET' | 'POST' | 'PUT' | 'DELETE'
-  // Данные запроса
-  request?: FormData | Record<string, any> | string
-  // Добавить авторизационные заголовки
-  auth?: boolean
-  // Пользовательские заголовки
-  headers?: Record<string, string> | null
-  // Content-Type
-  type?: string
-  // Обернуть ответ в data объект
-  toData?: boolean
-  // Использовать глобальные настройки
-  global?: boolean
-  // Скрыть ошибки от пользователя
-  hideError?: boolean
-  // Обработчик ответа
-  queryReturn?: (response: Response) => Promise<any>
-  // Дополнительные опции fetch
-  init?: RequestInit
-}
+**Свойства:**
+
+- `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>
 ```
-
-### Взаимосвязь свойств
-
-Свойства работают совместно для обеспечения эффективной загрузки данных:
-
-- Если `ajax = false` (или не задан), меню использует локальные данные, а `request` и `cache` игнорируются
-- Если `ajax = true` или задан как строка URL, активируется сетевая загрузка:
-- `request` определяет параметры HTTP-запроса (метод, заголовки, тело запроса)
-- `cache` управляет сохранением и повторным использованием полученных данных
-- При включённом `cache` повторные открытия меню используют сохранённые данные вместо новых запросов
-
-Такой подход снижает нагрузку на сервер, ускоряет отклик интерфейса и позволяет гибко настраивать стратегию загрузки данных для разных сценариев использования.

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

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

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

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

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

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

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

@@ -1,2 +1,64 @@
-The Menu component is a popup menu for navigation and actions. It combines Window (container and positioning), Bars (action toolbar), and List (items, groups, and nested submenus), providing keyboard navigation, nested structure support, a lightweight rendering mode (lite with liteThreshold), and controlled open/close behavior.
+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 +1,64 @@
-Компонент Menu — всплывающее меню для навигации и действий. Он объединяет возможности Window (контейнер и позиционирование), Bars (панель действий) и List (пункты, группы и вложенные подменю), обеспечивая клавиатурную навигацию, поддержку вложенной структуры, лёгкий режим рендеринга (lite с порогом liteThreshold) и управляемое открытие/закрытие.
+Компонент для создания всплывающих меню, выпадающих списков и контекстных меню с поддержкой навигации и действий.
+
+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

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

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