@dxtmisha/wiki 0.24.2 → 0.25.1

package/src/media/mdx/Window/event.window.ru.mdx

@@ -1,13 +1,31 @@
 ### `window`
 
-Событие, которое срабатывает при изменении состояния окна (открытие/закрытие).
+Событие срабатывает при изменении состояния окна (открытие/закрытие).
 
-```ts
-function onWindow (options: WindowEmitOptions) {
-    // обработка изменения состояния окна
-}
-```
+**Параметры:**
+- `options: WindowEmitOptions` — объект с данными окна
 
-Параметры:
-- `options` — `WindowEmitOptions` — данные окна: id, элементы и флаг `open`
+**Структура WindowEmitOptions:**
+- `id: string` — уникальный идентификатор окна
+- `element: HTMLDivElement` — DOM элемент окна
+- `control: HTMLElement` — DOM элемент управления
+- `open: boolean` — состояние открытия окна (`true` - открыто, `false` - закрыто)
 
+```html
+<script setup>
+const handleWindow = (options) => {
+  console.log('ID окна:', options.id)
+  console.log('Окно открыто:', options.open)
+  console.log('Элемент окна:', options.element)
+  console.log('Элемент управления:', options.control)
+}
+</script>
+
+<template>
+  <Window @window="handleWindow">
+    <template #default>
+      <p>Содержимое окна</p>
+    </template>
+  </Window>
+</template>
+```

package/src/media/mdx/Window/expose.en.mdx

@@ -0,0 +1,44 @@
+### `id`
+
+Unique identifier of the window.
+
+**Type:** `string`
+
+### `open`
+
+Reactive state of window visibility.
+
+**Type:** `Ref<boolean>`
+
+### `control`
+
+Control item data for window management.
+
+**Type:** `WindowControlItem`
+
+### `setOpen`
+
+Sets window open state.
+
+**Parameters:**
+- `open: boolean` — new window visibility state
+
+**Returns:** `Promise<void>`
+
+### `toOpen`
+
+Transition to opening state.
+
+**Returns:** `Promise<void>`
+
+### `toClose`
+
+Transition to closing state.
+
+**Returns:** `Promise<void>`
+
+### `toggle`
+
+Toggles window visibility (opens if closed, closes if open).
+
+**Returns:** `Promise<void>`

package/src/media/mdx/Window/expose.ru.mdx

@@ -0,0 +1,44 @@
+### `id`
+
+Уникальный идентификатор окна.
+
+**Тип:** `string`
+
+### `open`
+
+Реактивное состояние видимости окна.
+
+**Тип:** `Ref<boolean>`
+
+### `control`
+
+Данные элемента управления для управления окном.
+
+**Тип:** `WindowControlItem`
+
+### `setOpen`
+
+Устанавливает состояние открытия окна.
+
+**Параметры:**
+- `open: boolean` — новое состояние видимости окна
+
+**Возвращает:** `Promise<void>`
+
+### `toOpen`
+
+Переход в состояние открытия окна.
+
+**Возвращает:** `Promise<void>`
+
+### `toClose`
+
+Переход в состояние закрытия окна.
+
+**Возвращает:** `Promise<void>`
+
+### `toggle`
+
+Переключает видимость окна (открывает, если закрыто, и закрывает, если открыто).
+
+**Возвращает:** `Promise<void>`

package/src/media/mdx/Window/hooks.en.mdx

@@ -1,52 +1,31 @@
 ## Lifecycle Hooks
 
-The Window component provides a lifecycle hooks system for managing various stages of the window lifecycle.
-
-### Opening Hooks
-
-**`preparation`** - Called during the window preparation phase before opening.
-Allows executing preliminary setup and data initialization.
-
-**`beforeOpening`** - Called immediately before the window opening process begins.
-Returning `false` prevents the window from opening.
-
-**`opening`** - Called during the window opening process while animation is running.
-Returning `false` interrupts the window opening process.
-
-### Closing Hooks
-
-**`beforeClosing`** - Called immediately before the window closing process begins.
-Returning `false` prevents the window from closing.
-
-**`closing`** - Called during the window closing process while animation is running.
-Returning `false` interrupts the window closing process.
-
-### Usage
-
-All hooks are asynchronous functions and can return `Promise<boolean>` or `boolean`. Returning `false` stops the execution of the corresponding action.
-
-```typescript
-{
-  preparation: async () => {
-    // Data preparation
-    await loadData()
-  },
-  beforeOpening: () => {
-    // Condition checking
-    return userCanOpenWindow()
-  },
-  opening: () => {
-    // Logic during opening
-    return true
-  },
-  beforeClosing: () => {
-    // Check before closing
-    return confirmClose()
-  },
-  closing: () => {
-    // Cleanup on closing
-    cleanup()
-    return true
-  }
-}
-```
+### `preparation`
+
+Called before the opening/closing process begins. Used for preparing elements and data.
+
+**Type:** `() => void | Promise<void>`
+
+### `beforeOpening`
+
+Called before opening the window. Returning `false` cancels opening.
+
+**Type:** `() => boolean | Promise<boolean>`
+
+### `beforeClosing`
+
+Called before closing the window. Returning `false` cancels closing.
+
+**Type:** `() => boolean | Promise<boolean>`
+
+### `opening`
+
+Called after the window finishes opening (after animation).
+
+**Type:** `() => boolean | Promise<boolean>`
+
+### `closing`
+
+Called after the window finishes closing (after animation).
+
+**Type:** `() => boolean | Promise<boolean>`

package/src/media/mdx/Window/hooks.ru.mdx

@@ -1,52 +1,31 @@
-## Lifecycle хуки
-
-Компонент Window предоставляет систему lifecycle-хуков для управления различными этапами жизненного цикла окна.
-
-### Хуки открытия
-
-**`preparation`** - Вызывается на этапе подготовки окна перед открытием.
-Позволяет выполнить предварительные настройки и инициализацию данных.
-
-**`beforeOpening`** - Вызывается непосредственно перед началом процесса открытия окна.
-Возврат `false` предотвращает открытие окна.
-
-**`opening`** - Вызывается в процессе открытия окна во время анимации.
-Возврат `false` прерывает процесс открытия окна.
-
-### Хуки закрытия
-
-**`beforeClosing`** - Вызывается непосредственно перед началом процесса закрытия окна.
-Возврат `false` предотвращает закрытие окна.
-
-**`closing`** - Вызывается в процессе закрытия окна во время анимации.
-Возврат `false` прерывает процесс закрытия окна.
-
-### Использование
-
-Все хуки являются асинхронными функциями и могут возвращать `Promise<boolean>` или `boolean`. Возврат `false` останавливает выполнение соответствующего действия.
-
-```typescript
-{
-  preparation: async () => {
-    // Подготовка данных
-    await loadData()
-  },
-  beforeOpening: () => {
-    // Проверка условий
-    return userCanOpenWindow()
-  },
-  opening: () => {
-    // Логика во время открытия
-    return true
-  },
-  beforeClosing: () => {
-    // Проверка перед закрытием
-    return confirmClose()
-  },
-  closing: () => {
-    // Очистка при закрытии
-    cleanup()
-    return true
-  }
-}
-```
+## Хуки жизненного цикла
+
+### `preparation`
+
+Вызывается перед началом процесса открытия/закрытия. Используется для подготовки элементов и данных.
+
+**Тип:** `() => void | Promise<void>`
+
+### `beforeOpening`
+
+Вызывается перед открытием окна. Возврат `false` отменяет открытие.
+
+**Тип:** `() => boolean | Promise<boolean>`
+
+### `beforeClosing`
+
+Вызывается перед закрытием окна. Возврат `false` отменяет закрытие.
+
+**Тип:** `() => boolean | Promise<boolean>`
+
+### `opening`
+
+Вызывается после завершения открытия окна (после анимации).
+
+**Тип:** `() => boolean | Promise<boolean>`
+
+### `closing`
+
+Вызывается после завершения закрытия окна (после анимации).
+
+**Тип:** `() => boolean | Promise<boolean>`

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

@@ -0,0 +1,168 @@
+```html
+<Window>
+  <template #control="{ binds }">
+    <button v-bind="binds">Toggle Window</button>
+  </template>
+
+  <template #title>
+    <h2>Window Title</h2>
+  </template>
+
+  <template #default>
+    <p>Main window content goes here</p>
+  </template>
+
+  <template #footer="{ onclick }">
+    <button @click="onclick">Close</button>
+  </template>
+</Window>
+```
+
+### `control`
+
+Slot for placing window control elements (close buttons, minimize, etc.).
+
+**Parameters:**
+- `props: WindowControlItem` — object with window control data
+
+### `title`
+
+Slot for placing window title in the header.
+
+**Parameters:**
+- `props: WindowControlItem` — object with window control data
+
+### `footer`
+
+Slot for placing content at the bottom of the window (action buttons, info, etc.).
+
+**Parameters:**
+- `props: WindowControlItem` — object with window control data
+
+### `default`
+
+Main slot for placing the primary window content.
+
+**Parameters:**
+- `props: WindowControlItem` — object with window control data
+
+## WindowControlItem
+
+`WindowControlItem` — object passed to all Window component slots, containing data for window management.
+
+### Type Structure
+
+```typescript
+type WindowControlItem = {
+  /** Window CSS classes list */
+  classesWindow: WindowClassesList
+
+  /** CSS class string for control element */
+  class: string
+
+  /** Reactive window open state */
+  open: Ref<boolean>
+
+  /** Click event handler */
+  onclick: (event: MouseEvent & TouchEvent) => Promise<void>
+
+  /** Context menu event handler */
+  oncontextmenu: (event: MouseEvent & TouchEvent) => Promise<void>
+
+  /** Binding properties for elements */
+  binds: {
+    class: string
+    onclick: (event: MouseEvent & TouchEvent) => Promise<void>
+    oncontextmenu: (event: MouseEvent & TouchEvent) => Promise<void>
+  }
+}
+```
+
+### Properties
+
+#### `classesWindow`
+
+Object with CSS classes for different window states:
+
+- `block` — interaction blocking
+- `blockChildren` — block child elements
+- `blockOther` — block other windows
+- `close` — close window class
+- `static` — static positioning
+- `control` — control element class
+- `controlId` — control ID class
+- `controlStatic` — static control
+- `controlOpenOnly` — control only when open
+- `controlActive` — active control
+- `persistent` — persistent window
+
+#### `class`
+
+CSS class string to apply to the control element.
+
+#### `open`
+
+Reactive variable (`Ref<boolean>`) containing the current window visibility state.
+
+```html
+<template #control="{ open }">
+  <span>{{ open ? 'Open' : 'Closed' }}</span>
+</template>
+```
+
+#### `onclick`
+
+Click handler function for managing window open/close.
+
+```html
+<template #control="{ onclick }">
+  <button @click="onclick">Toggle</button>
+</template>
+```
+
+#### `oncontextmenu`
+
+Right-click (context menu) handler function for window management.
+
+```html
+<template #control="{ oncontextmenu }">
+  <button @contextmenu="oncontextmenu">Context Menu</button>
+</template>
+```
+
+#### `binds`
+
+Object with properties for binding to elements:
+
+```html
+<template #control="{ binds }">
+  <button v-bind="binds">Window Control</button>
+</template>
+```
+
+### Usage Example
+
+```html
+<Window>
+  <template #control="{ classesWindow, open, onclick }">
+    <div :class="classesWindow.control">
+      <button @click="onclick">
+        {{ open ? 'Close' : 'Open' }}
+      </button>
+    </div>
+  </template>
+
+  <template #title="{ open }">
+    <h2>Window Title ({{ open ? 'open' : 'closed' }})</h2>
+  </template>
+
+  <template #default>
+    <p>Main window content</p>
+  </template>
+
+  <template #footer="{ onclick }">
+    <button @click="onclick">Close Window</button>
+  </template>
+</Window>
+```
+

package/src/media/mdx/Window/slots.ru.mdx

@@ -0,0 +1,168 @@
+```html
+<Window>
+  <template #control="{ binds }">
+    <button v-bind="binds">Переключить окно</button>
+  </template>
+
+  <template #title>
+    <h2>Заголовок окна</h2>
+  </template>
+
+  <template #default>
+    <p>Основное содержимое окна</p>
+  </template>
+
+  <template #footer="{ onclick }">
+    <button @click="onclick">Закрыть</button>
+  </template>
+</Window>
+```
+
+### `control`
+
+Слот для размещения элементов управления окном (кнопки закрытия, минимизации и т.д.).
+
+**Параметры:**
+- `props: WindowControlItem` — объект с данными управления окном
+
+### `title`
+
+Слот для размещения заголовка окна в шапке.
+
+**Параметры:**
+- `props: WindowControlItem` — объект с данными управления окном
+
+### `footer`
+
+Слот для размещения содержимого в нижней части окна (кнопки действий, информация и т.д.).
+
+**Параметры:**
+- `props: WindowControlItem` — объект с данными управления окном
+
+### `default`
+
+Основной слот для размещения главного содержимого окна.
+
+**Параметры:**
+- `props: WindowControlItem` — объект с данными управления окном
+
+## WindowControlItem
+
+`WindowControlItem` — объект, передаваемый во все слоты компонента Window, содержащий данные для управления окном.
+
+### Структура типа
+
+```typescript
+type WindowControlItem = {
+  /** Список CSS классов окна */
+  classesWindow: WindowClassesList
+
+  /** Строка CSS класса для элемента управления */
+  class: string
+
+  /** Реактивное состояние открытия окна */
+  open: Ref<boolean>
+
+  /** Обработчик события клика */
+  onclick: (event: MouseEvent & TouchEvent) => Promise<void>
+
+  /** Обработчик события контекстного меню */
+  oncontextmenu: (event: MouseEvent & TouchEvent) => Promise<void>
+
+  /** Свойства привязки для элементов */
+  binds: {
+    class: string
+    onclick: (event: MouseEvent & TouchEvent) => Promise<void>
+    oncontextmenu: (event: MouseEvent & TouchEvent) => Promise<void>
+  }
+}
+```
+
+### Свойства
+
+#### `classesWindow`
+
+Объект с CSS классами для различных состояний окна:
+
+- `block` — блокировка взаимодействия
+- `blockChildren` — блокировка дочерних элементов
+- `blockOther` — блокировка других окон
+- `close` — класс для закрытия окна
+- `static` — статическое позиционирование
+- `control` — класс элемента управления
+- `controlId` — класс ID управления
+- `controlStatic` — статическое управление
+- `controlOpenOnly` — управление только когда открыто
+- `controlActive` — активное управление
+- `persistent` — постоянное окно
+
+#### `class`
+
+Строка CSS класса для применения к элементу управления.
+
+#### `open`
+
+Реактивная переменная (`Ref<boolean>`), содержащая текущее состояние видимости окна.
+
+```html
+<template #control="{ open }">
+  <span>{{ open ? 'Открыто' : 'Закрыто' }}</span>
+</template>
+```
+
+#### `onclick`
+
+Функция-обработчик клика для управления открытием/закрытием окна.
+
+```html
+<template #control="{ onclick }">
+  <button @click="onclick">Переключить</button>
+</template>
+```
+
+#### `oncontextmenu`
+
+Функция-обработчик правого клика (контекстного меню) для управления окном.
+
+```html
+<template #control="{ oncontextmenu }">
+  <button @contextmenu="oncontextmenu">Контекстное меню</button>
+</template>
+```
+
+#### `binds`
+
+Объект со свойствами для привязки к элементам:
+
+```html
+<template #control="{ binds }">
+  <button v-bind="binds">Управление окном</button>
+</template>
+```
+
+### Пример использования
+
+```html
+<Window>
+  <template #control="{ classesWindow, open, onclick }">
+    <div :class="classesWindow.control">
+      <button @click="onclick">
+        {{ open ? 'Закрыть' : 'Открыть' }}
+      </button>
+    </div>
+  </template>
+
+  <template #title="{ open }">
+    <h2>Заголовок окна ({{ open ? 'открыто' : 'закрыто' }})</h2>
+  </template>
+
+  <template #default>
+    <p>Основное содержимое окна</p>
+  </template>
+
+  <template #footer="{ onclick }">
+    <button @click="onclick">Закрыть окно</button>
+  </template>
+</Window>
+```
+

package/src/media/mdx/Window/v-model.en.mdx

@@ -1,16 +1,25 @@
-## Two-way binding (v-model)
+## State Management via v-model
 
-The Window component supports two-way binding of the open state via the `v-model` directive.
+Two-way binding of window open state via `v-model:open`.
 
-### Props and events
-
-- `open: boolean` — window visibility state
-- `update:open(boolean)` — update event emitted when the state changes
+**Parameters:**
+- `open: boolean` — window open state
 
 ```html
-<Window v-model:open="isOpen"/>
-```
+<script setup>
+import { ref } from 'vue'
+
+const isOpen = ref(false)
+</script>
 
-### Notes
-- Programmatic control remains available via expose methods (`open`/`toggle`/`setOpen`) and corresponding events.
-- If you need a static, always-mounted window (that ignores v-model), see the `staticMode` section.
+<template>
+  <button @click="isOpen = true">Open</button>
+
+  <Window v-model:open="isOpen">
+    <template #default>
+      <p>Window content</p>
+      <button @click="isOpen = false">Close</button>
+    </template>
+  </Window>
+</template>
+```