@dxtmisha/wiki 0.24.2 → 0.24.3

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

@@ -0,0 +1,122 @@
+### `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.
+
+**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>
+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>
+
+    <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>
+  </Menu>
+</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,122 @@
+### `control`
+
+Слот для размещения элемента управления (триггера) меню.
+
+**Параметры:**
+- `props: MenuControlItem` — объект с данными управления меню
+
+### `title`
+
+Слот для размещения заголовка окна меню.
+
+**Параметры:**
+- `props: MenuControlItem` — объект с данными управления меню
+
+### `footer`
+
+Слот для размещения содержимого в нижней части окна меню (кнопки действий, информация).
+
+**Параметры:**
+- `props: MenuControlItem` — объект с данными управления меню
+
+### `contextTop`
+
+Слот для размещения контекстной области над списком меню (поиск, фильтры, подсказки).
+
+**Параметры:**
+- `props: MenuControlItem` — объект с данными управления меню
+
+### `contextBottom`
+
+Слот для размещения контекстной области под списком меню (подсказки, итоговые действия).
+
+**Параметры:**
+- `props: MenuControlItem` — объект с данными управления меню
+
+```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>
+
+    <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>
+  </Menu>
+</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

@@ -4,49 +4,24 @@ import ajaxEn from './ajax.en.mdx'
 import ajaxRu from './ajax.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 slotsEn from './slots.en.mdx'
+import slotsRu from './slots.ru.mdx'
 
 /** MDX документация для компонента Menu */
 export const wikiMdxMenu: StorybookComponentsMdxItem = {
   name: 'Menu',
   descriptions: {
-    'ajax': {
+    ajax: {
       en: ajaxEn,
       ru: ajaxRu
     },
-    'menu': {
+    menu: {
       en: menuEn,
       ru: menuRu
     },
-    'slot.control': {
-      en: slotControlEn,
-      ru: slotControlRu
-    },
-    'slot.title': {
-      en: slotTitleEn,
-      ru: slotTitleRu
-    },
-    'slot.footer': {
-      en: slotFooterEn,
-      ru: slotFooterRu
-    },
-    'slot.contextTop': {
-      en: slotContextTopEn,
-      ru: slotContextTopRu
-    },
-    'slot.contextBottom': {
-      en: slotContextBottomEn,
-      ru: slotContextBottomRu
+    slots: {
+      en: slotsEn,
+      ru: slotsRu
     }
   }
 }