@dxtmisha/wiki 0.39.3 → 0.39.5

package/src/media/mdx/Mask/visible.en.mdx

@@ -0,0 +1,40 @@
+## Mask visibility control
+
+The `visible` and `visiblePartly` properties are designed for managing the display of mask placeholder characters and overall component visibility.
+
+**Properties:**
+
+- `visible` — controls complete visibility of the mask component
+- `visiblePartly` — controls partial visibility of placeholder characters
+
+Properties work together: when `visible: false`, the mask component is completely hidden, including all placeholder characters. When `visiblePartly: true` is activated, only filled mask positions are displayed, hiding empty placeholder characters. If `visible` is set to `false`, the `visiblePartly` property is ignored. Visibility changes don't affect validation logic and data processing, allowing creation of adaptive interfaces with conditional or abbreviated mask display.
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const showMask = ref(true)
+const compactMode = ref(false)
+</script>
+
+<template>
+  <!-- Complete mask hiding -->
+  <Mask
+    mask="+1 (***) ***-****"
+    :visible="false"
+  />
+
+  <!-- Show only filled positions -->
+  <Mask
+    mask="+1 (***) ***-****"
+    :visiblePartly="true"
+  />
+
+  <!-- Conditional display with partial visibility -->
+  <Mask
+    mask="+1 (***) ***-****"
+    :visible="showMask"
+    :visiblePartly="compactMode"
+  />
+</template>
+```

package/src/media/mdx/Mask/visible.ru.mdx

@@ -0,0 +1,40 @@
+## Управление видимостью маски
+
+Свойства `visible` и `visiblePartly` предназначены для управления отображением символов-заполнителей маски и видимостью компонента в целом.
+
+**Свойства:**
+
+- `visible` — управляет полной видимостью компонента маски
+- `visiblePartly` — управляет частичной видимостью символов-заполнителей
+
+Свойства работают совместно: при `visible: false` компонент маски полностью скрыт, включая все символы-заполнители. При активации `visiblePartly: true` отображаются только заполненные позиции маски, скрывая пустые символы-заполнители. Если `visible` установлен в `false`, то свойство `visiblePartly` игнорируется. Изменение видимости не влияет на логику валидации и обработку данных, позволяя создавать адаптивные интерфейсы с условным или сокращённым отображением маски.
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const showMask = ref(true)
+const compactMode = ref(false)
+</script>
+
+<template>
+  <!-- Полное скрытие маски -->
+  <Mask
+    mask="+7 (***) ***-**-**"
+    :visible="false"
+  />
+
+  <!-- Показ только заполненных позиций -->
+  <Mask
+    mask="+7 (***) ***-**-**"
+    :visiblePartly="true"
+  />
+
+  <!-- Условное отображение с частичной видимостью -->
+  <Mask
+    mask="+7 (***) ***-**-**"
+    :visible="showMask"
+    :visiblePartly="compactMode"
+  />
+</template>
+```

package/src/media/mdx/Mask/wikiMdxMask.ts

@@ -0,0 +1,79 @@
+import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
+
+import basicEn from './basic.en.mdx'
+import basicRu from './basic.ru.mdx'
+import dateTypesEn from './dateTypes.en.mdx'
+import dateTypesRu from './dateTypes.ru.mdx'
+import exposeEn from './expose.en.mdx'
+import exposeRu from './expose.ru.mdx'
+import groupSaveEn from './groupSave.en.mdx'
+import groupSaveRu from './groupSave.ru.mdx'
+import maskEn from './mask.en.mdx'
+import maskRu from './mask.ru.mdx'
+import matchEn from './match.en.mdx'
+import matchRu from './match.ru.mdx'
+import numberTypesEn from './numberTypes.en.mdx'
+import numberTypesRu from './numberTypes.ru.mdx'
+import patternEn from './pattern.en.mdx'
+import patternRu from './pattern.ru.mdx'
+import specialEn from './special.en.mdx'
+import specialRu from './special.ru.mdx'
+import typeEn from './type.en.mdx'
+import typeRu from './type.ru.mdx'
+import visibleEn from './visible.en.mdx'
+import visibleRu from './visible.ru.mdx'
+
+/**
+ * MDX files for Mask component
+ *
+ * MDX файлы для компонента Mask
+ */
+export const wikiMdxMask: StorybookComponentsMdxItem = {
+  name: 'Mask',
+  descriptions: {
+    basic: {
+      en: basicEn,
+      ru: basicRu
+    },
+    dateTypes: {
+      en: dateTypesEn,
+      ru: dateTypesRu
+    },
+    expose: {
+      en: exposeEn,
+      ru: exposeRu
+    },
+    groupSave: {
+      en: groupSaveEn,
+      ru: groupSaveRu
+    },
+    mask: {
+      en: maskEn,
+      ru: maskRu
+    },
+    match: {
+      en: matchEn,
+      ru: matchRu
+    },
+    numberTypes: {
+      en: numberTypesEn,
+      ru: numberTypesRu
+    },
+    pattern: {
+      en: patternEn,
+      ru: patternRu
+    },
+    special: {
+      en: specialEn,
+      ru: specialRu
+    },
+    type: {
+      en: typeEn,
+      ru: typeRu
+    },
+    visible: {
+      en: visibleEn,
+      ru: visibleRu
+    }
+  }
+}

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

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

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

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

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

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

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

@@ -0,0 +1,64 @@
+Компонент для создания всплывающих меню, выпадающих списков и контекстных меню с поддержкой навигации и действий.
+
+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 @@
+- `control(props: MenuControlItem): any` — Slot for placing the menu control element (trigger).

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

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

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

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

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

@@ -0,0 +1,51 @@
+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
+    }
+  }
+}