@dxtmisha/wiki 0.24.1 → 0.24.3

package/src/media/mdx/Scrollbar/wikiMdxScrollbar.ts

@@ -1,23 +1,12 @@
 import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
 
+import emitsEn from './emits.en.mdx'
+import emitsRu from './emits.ru.mdx'
+import emitsIncludeEn from './emits-include.en.mdx'
+import emitsIncludeRu from './emits-include.ru.mdx'
 import scrollbarEn from './scrollbar.en.mdx'
 import scrollbarRu from './scrollbar.ru.mdx'
 
-import eventBottomEn from './event.bottom.en.mdx'
-import eventBottomRu from './event.bottom.ru.mdx'
-import eventEdgeEn from './event.edge.en.mdx'
-import eventEdgeRu from './event.edge.ru.mdx'
-import eventLeaveBottomEn from './event.leaveBottom.en.mdx'
-import eventLeaveBottomRu from './event.leaveBottom.ru.mdx'
-import eventLeaveTopEn from './event.leaveTop.en.mdx'
-import eventLeaveTopRu from './event.leaveTop.ru.mdx'
-import eventReachBottomEn from './event.reachBottom.en.mdx'
-import eventReachBottomRu from './event.reachBottom.ru.mdx'
-import eventReachTopEn from './event.reachTop.en.mdx'
-import eventReachTopRu from './event.reachTop.ru.mdx'
-import eventTopEn from './event.top.en.mdx'
-import eventTopRu from './event.top.ru.mdx'
-
 /**
  * MDX files for Scrollbar component
  *
@@ -26,37 +15,17 @@ import eventTopRu from './event.top.ru.mdx'
 export const wikiMdxScrollbar: StorybookComponentsMdxItem = {
   name: 'Scrollbar',
   descriptions: {
+    'emits': {
+      en: emitsEn,
+      ru: emitsRu
+    },
+    'emits-include': {
+      en: emitsIncludeEn,
+      ru: emitsIncludeRu
+    },
     'scrollbar': {
       en: scrollbarEn,
       ru: scrollbarRu
-    },
-    'event.top': {
-      en: eventTopEn,
-      ru: eventTopRu
-    },
-    'event.reachTop': {
-      en: eventReachTopEn,
-      ru: eventReachTopRu
-    },
-    'event.leaveTop': {
-      en: eventLeaveTopEn,
-      ru: eventLeaveTopRu
-    },
-    'event.bottom': {
-      en: eventBottomEn,
-      ru: eventBottomRu
-    },
-    'event.reachBottom': {
-      en: eventReachBottomEn,
-      ru: eventReachBottomRu
-    },
-    'event.leaveBottom': {
-      en: eventLeaveBottomEn,
-      ru: eventLeaveBottomRu
-    },
-    'event.edge': {
-      en: eventEdgeEn,
-      ru: eventEdgeRu
     }
   }
 }

package/src/media/mdx/Skeleton/classes.en.mdx

@@ -0,0 +1,13 @@
+## CSS Classes for Display Control
+
+- `*__text` — main class for text skeleton
+- `*__textVariant` — text class variant for additional styling
+- `*__background` — main background class for skeleton
+- `*__backgroundAfter` — background class for `::after` pseudo-element
+- `*__backgroundBefore` — background class for `::before` pseudo-element
+- `*__backgroundVariant` — background class variant
+- `*__border` — class for skeleton border styling
+- `*__borderVariant` — border class variant
+- `*__none` — class to disable skeleton display
+
+Where `*` is the component class name (e.g., `d1-skeleton`, `m3-skeleton`).

package/src/media/mdx/Skeleton/classes.ru.mdx

@@ -0,0 +1,13 @@
+## CSS классы для управления отображением
+
+- `*__text` — основной класс для текстового скелета
+- `*__textVariant` — вариант текстового класса для дополнительной стилизации
+- `*__background` — основной фоновый класс скелета
+- `*__backgroundAfter` — фоновый класс для псевдоэлемента `::after`
+- `*__backgroundBefore` — фоновый класс для псевдоэлемента `::before`
+- `*__backgroundVariant` — вариант фонового класса
+- `*__border` — класс для стилизации границ скелета
+- `*__borderVariant` — вариант класса границ
+- `*__none` — класс для отключения отображения скелета
+
+Где `*` — название класса компонента (например, `d1-skeleton`, `m3-skeleton`).

package/src/media/mdx/Skeleton/expose.isActive.en.mdx

@@ -1,32 +1,18 @@
 ### `isActive`
 
-The `Skeleton` component exports a computed property `isActive` that provides access to the current activation state of the skeleton.
+Computed property that provides access to the current activation state of the skeleton.
 
-#### Description
+**Type:** `ComputedRef<boolean>`
 
-- **isActive** — A computed property of type `ComputedRef<boolean>` that reflects the current state of the component's `active` property.
-
-#### Purpose
-
-The exported `isActive` value provides external access to the skeleton's activation state. This is useful for:
-
-- Synchronizing state with parent components
-- Creating dependent computations in the parent component
-- Programmatically controlling behavior of other elements based on skeleton state
-
-#### Usage
-
-Access the exported value through a template reference:
+**Purpose:** Reflects the current state of the component's `active` property. Useful for synchronizing state with parent components and programmatically controlling behavior of other elements.
 
 ```html
 <template>
-  <div>
-    <Skeleton ref="skeletonRef" :active="isLoading">
-      <div class="skeleton__text">Loading content</div>
-    </Skeleton>
+  <Skeleton ref="skeletonRef" :active="isLoading">
+    <div class="skeleton__text">Loading content</div>
+  </Skeleton>
 
-    <p v-if="skeletonRef?.isActive">Loading...</p>
-  </div>
+  <p v-if="skeletonRef?.isActive">Loading...</p>
 </template>
 
 <script setup>
@@ -34,12 +20,5 @@ import { ref } from 'vue'
 
 const skeletonRef = ref()
 const isLoading = ref(true)
-
-// Programmatic state access
-const checkSkeletonState = () => {
-  if (skeletonRef.value?.isActive) {
-    console.log('Skeleton is active')
-  }
-}
 </script>
 ```

package/src/media/mdx/Skeleton/expose.isActive.ru.mdx

@@ -1,32 +1,18 @@
 ### `isActive`
 
-Компонент `Skeleton` экспортирует вычисляемое свойство `isActive`, которое позволяет получить текущее состояние активности скелетона.
+Вычисляемое свойство, которое предоставляет доступ к текущему состоянию активности скелетона.
 
-#### Описание
+**Тип:** `ComputedRef<boolean>`
 
-- **isActive** — Вычисляемое свойство типа `ComputedRef<boolean>`, которое отражает текущее состояние свойства `active` компонента.
-
-#### Назначение
-
-Экспортируемое значение `isActive` предоставляет доступ к состоянию активности скелетона извне компонента. Это полезно для:
-
-- Синхронизации состояния с родительскими компонентами
-- Создания зависимых вычислений в родительском компоненте
-- Программного контроля поведения других элементов в зависимости от состояния скелетона
-
-#### Использование
-
-Получить доступ к экспортируемому значению можно через шаблонную ссылку:
+**Назначение:** Отражает текущее состояние свойства `active` компонента. Полезно для синхронизации состояния с родительскими компонентами и программного управления поведением других элементов.
 
 ```html
 <template>
-  <div>
-    <Skeleton ref="skeletonRef" :active="isLoading">
-      <div class="skeleton__text">Загружаемый контент</div>
-    </Skeleton>
+  <Skeleton ref="skeletonRef" :active="isLoading">
+    <div class="skeleton__text">Загрузка контента</div>
+  </Skeleton>
 
-    <p v-if="skeletonRef?.isActive">Идет загрузка...</p>
-  </div>
+  <p v-if="skeletonRef?.isActive">Загрузка...</p>
 </template>
 
 <script setup>
@@ -34,12 +20,5 @@ import { ref } from 'vue'
 
 const skeletonRef = ref()
 const isLoading = ref(true)
-
-// Программное получение состояния
-const checkSkeletonState = () => {
-  if (skeletonRef.value?.isActive) {
-    console.log('Скелетон активен')
-  }
-}
 </script>
 ```

package/src/media/mdx/Skeleton/skeleton.en.mdx

@@ -1,44 +1,45 @@
-## Skeleton State Management
+Component for creating animated interface placeholders during content loading.
 
-The `Skeleton` component is used to display placeholders during content loading. The `active` property controls the visibility of all child elements within the component.
+Skeleton provides smooth transitions between loading state and real content display. The component automatically manages child element visibility through the `active` property and supports a CSS class system for creating various types of placeholders.
 
-### Properties
+**Key Features:**
 
-- **active** — Boolean property that activates skeleton mode and controls the visibility of child elements.
+- Automatic content visibility management
+- Support for special CSS classes for placeholders
+- Component integration via `isSkeleton` flag
+- Flexible placeholder types (text, background, borders)
+- Animated loading effects
 
-### How it works
+**Common Use Cases:**
 
-When `active` is set to `true`, the Skeleton component hides all its child elements, **except**:
-
-1. **Elements with special skeleton CSS classes:**
-   - `skeleton__text` — for text placeholders
-   - `skeleton__textVariant` — alternative variant of text placeholders
-   - `skeleton__background` — for background placeholders
-   - `skeleton__backgroundAfter` — background placeholder via ::after pseudo-element
-   - `skeleton__backgroundBefore` — background placeholder via ::before pseudo-element
-   - `skeleton__backgroundVariant` — alternative variant of background placeholders
-   - `skeleton__border` — for border placeholders
-   - `skeleton__borderVariant` — alternative variant of border placeholders
-   - `skeleton__none` — elements that are always hidden in skeleton mode (even if they have other special classes)
-
-2. **Components with `isSkeleton=true` property**
-
-When `active` is set to `false`, all child elements are displayed in normal mode.
-
-### Recommendations
-
-- Use the component to improve user experience during data loading
-- Apply special skeleton classes to elements that should display as placeholders
-- Place placeholders where real content will appear
-
-### Usage example
+- Product and user card placeholders
+- List and table skeletons
+- Image and avatar placeholders
+- Text blocks during loading
+- Complex forms with multiple fields
 
 ```html
-<!-- Active skeleton -->
-<Skeleton :active="true">
-  <div class="skeleton__text">Visible text placeholder</div>
-  <div class="skeleton__background">Visible background placeholder</div>
-  <div>Hidden element</div>
-  <ComponentWithSkeleton isSkeleton="true">Visible component</ComponentWithSkeleton>
-</Skeleton>
+<script setup>
+import { ref } from 'vue'
+
+const isLoading = ref(true)
+
+setTimeout(() => {
+  isLoading.value = false
+}, 2000)
+</script>
+
+<template>
+  <Skeleton :active="isLoading">
+    <!-- Placeholders visible during loading -->
+    <div class="skeleton__background avatar"></div>
+    <div class="skeleton__text title"></div>
+    <div class="skeleton__textVariant subtitle"></div>
+
+    <!-- Real content -->
+    <img src="/avatar.jpg" alt="User avatar" />
+    <h3>{{ user.name }}</h3>
+    <p>{{ user.description }}</p>
+  </Skeleton>
+</template>
 ```

package/src/media/mdx/Skeleton/skeleton.ru.mdx

@@ -1,44 +1,45 @@
-## Управление состоянием скелетона
+Компонент для создания анимированных заглушек интерфейса во время загрузки контента.
 
-Компонент `Skeleton` используется для отображения заглушки во время загрузки контента. Свойство `active` управляет видимостью всех дочерних элементов компонента.
+Skeleton обеспечивает плавный переход между состоянием загрузки и отображением реального контента. Компонент автоматически управляет видимостью дочерних элементов через свойство `active` и поддерживает систему CSS-классов для создания различных типов заглушек.
 
-### Свойства
+**Основные возможности:**
 
-- **active** — Булево свойство, которое активирует режим скелетона и управляет видимостью дочерних элементов.
+- Автоматическое управление видимостью контента
+- Поддержка специальных CSS-классов для заглушек
+- Работа с компонентами через флаг `isSkeleton`
+- Гибкая настройка типов заглушек (текст, фон, границы)
+- Анимированные эффекты загрузки
 
-### Принцип работы
+**Типичные сценарии использования:**
 
-Когда `active` установлено в `true`, компонент Skeleton скрывает все свои дочерние элементы, **кроме**:
-
-1. **Элементов со специальными CSS-классами скелетона:**
-   - `skeleton__text` — для текстовых заглушек
-   - `skeleton__textVariant` — альтернативный вариант текстовых заглушек
-   - `skeleton__background` — для фоновых заглушек
-   - `skeleton__backgroundAfter` — фоновая заглушка через псевдоэлемент::after
-   - `skeleton__backgroundBefore` — фоновая заглушка через псевдоэлемент::before
-   - `skeleton__backgroundVariant` — альтернативный вариант фоновых заглушек
-   - `skeleton__border` — для границ заглушек
-   - `skeleton__borderVariant` — альтернативный вариант границ заглушек
-   - `skeleton__none` — элементы, которые всегда скрыты в режиме скелетона (даже если у них есть другие специальные классы)
-
-2. **Компонентов со свойством `isSkeleton=true`**
-
-Когда `active` установлено в `false`, все дочерние элементы отображаются в обычном режиме.
-
-### Рекомендации
-
-- Используйте компонент для улучшения пользовательского опыта во время загрузки данных
-- Применяйте специальные классы скелетона к элементам, которые должны отображаться как заглушки
-- Размещайте заглушки в местах, где будет появляться реальный контент
-
-### Пример использования
+- Заглушки карточек товаров и пользователей
+- Скелетоны списков и таблиц
+- Заглушки изображений и аватаров
+- Текстовые блоки во время загрузки
+- Сложные формы с множественными полями
 
 ```html
-<!-- Активный скелетон -->
-<Skeleton :active="true">
-  <div class="skeleton__text">Видимая текстовая заглушка</div>
-  <div class="skeleton__background">Видимая фоновая заглушка</div>
-  <div>Скрытый элемент</div>
-  <ComponentWithSkeleton isSkeleton="true">Видимый компонент</ComponentWithSkeleton>
-</Skeleton>
+<script setup>
+import { ref } from 'vue'
+
+const isLoading = ref(true)
+
+setTimeout(() => {
+  isLoading.value = false
+}, 2000)
+</script>
+
+<template>
+  <Skeleton :active="isLoading">
+    <!-- Заглушки, видимые во время загрузки -->
+    <div class="skeleton__background avatar"></div>
+    <div class="skeleton__text title"></div>
+    <div class="skeleton__textVariant subtitle"></div>
+
+    <!-- Реальный контент -->
+    <img src="/avatar.jpg" alt="Аватар пользователя" />
+    <h3>{{ user.name }}</h3>
+    <p>{{ user.description }}</p>
+  </Skeleton>
+</template>
 ```

package/src/media/mdx/Skeleton/wikiMdxSkeleton.ts

@@ -6,6 +6,9 @@ import skeletonRu from './skeleton.ru.mdx'
 import exposeIsActiveEn from './expose.isActive.en.mdx'
 import exposeIsActiveRu from './expose.isActive.ru.mdx'
 
+import classesEn from './classes.en.mdx'
+import classesRu from './classes.ru.mdx'
+
 export const wikiMdxSkeleton: StorybookComponentsMdxItem = {
   name: 'Skeleton',
   descriptions: {
@@ -16,6 +19,10 @@ export const wikiMdxSkeleton: StorybookComponentsMdxItem = {
     'expose.isActive': {
       en: exposeIsActiveEn,
       ru: exposeIsActiveRu
+    },
+    'classes': {
+      en: classesEn,
+      ru: classesRu
     }
   }
 }

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

@@ -1,25 +1,17 @@
-## Positioning direction
+## Positioning Direction (axis)
 
-The `axis` property defines the primary guide for placing the window relative to the anchor element (`overElement`) or the invocation area.
-Default value: `y`.
+Controls the axis of window placement relative to the anchor element. Default: `y`.
 
-> Works only in menu mode (`adaptive="menu"`).
+> Applies only in menu mode (`adaptive="menu"` or `adaptive="menuWindow"`).
 
-### Values
-
-- `x` — Horizontal: places the window to the left or right of the anchor/cursor. The `indent` is applied horizontally.
-- `y` — Vertical: places the window above or below the anchor/cursor. The `indent` is applied vertically.
-- `on` — Over element: overlays the selected element/area and aligns to its center. When needed, internal scrolling adapts to keep the selected element visible.
+**Possible values:**
+- `'x'` — horizontal axis (left or right of anchor)
+- `'y'` — vertical axis (top or bottom of anchor)
+- `'on'` — over anchor (window centers on element)
 
 ### Behavior
 
-- Automatic side selection (left/right for `x`, top/bottom for `y`) based on available space. If space is limited on both sides, the window is centered in the available area.
-- Along the perpendicular direction the window fits into the viewport to avoid overflow.
-- Context menu mode (`contextmenu = true`) uses cursor coordinates instead of the anchor’s bounding box.
-- Respects viewport constraints and container paddings.
-
-### Recommendations
-
-- `x` — side menus, tooltips, and panels next to an element.
-- `y` — dropdowns, menus, and hints opening above/below.
-- `on` — popovers that overlay and focus a specific element in the content.
+- Component automatically selects the placement side with the most available space
+- When using context menu (`contextmenu`), positioning occurs from cursor coordinates
+- Window always stays within visible screen area (viewport)
+- Indent from anchor is set via `indent` property (default 4px)

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

@@ -1,25 +1,17 @@
-## Направление позиционирования
+## Направление позиционирования (axis)
 
-Свойство `axis` управляет основной направляющей для размещения окна относительно элемента‑якоря (`overElement`) или области вызова.
-Значение по умолчанию: `y`.
+Управляет осью размещения окна относительно элемента-якоря. По умолчанию: `y`.
 
-> Работает только в режиме меню (`adaptive="menu"`).
+> Применяется только в режиме меню (`adaptive="menu"` или `adaptive="menuWindow"`).
 
-### Значения
-
-- `x` — Горизонтально: окно располагается слева или справа от якоря/курсора. Отступ `indent` применяется по горизонтали.
-- `y` — Вертикально: окно располагается сверху или снизу от якоря/курсора. Отступ `indent` применяется по вертикали.
-- `on` — Поверх элемента: окно перекрывает выбранный элемент/область и ориентируется по его центру. При необходимости прокрутка содержимого подстраивается, чтобы выбранный элемент оставался видимым.
+**Возможные значения:**
+- `'x'` — горизонтальная ось (слева или справа от якоря)
+- `'y'` — вертикальная ось (сверху или снизу от якоря)
+- `'on'` — поверх якоря (окно центрируется над элементом)
 
 ### Поведение
 
-- Автовыбор стороны (слева/справа для `x`, сверху/снизу для `y`) в зависимости от доступного пространства. При нехватке места окно центрируется в доступной области.
-- По перпендикулярному направлению окно вписывается во вьюпорт и не выходит за его пределы.
-- Режим контекстного меню (`contextmenu = true`) использует координаты курсора вместо прямоугольника якоря.
-- Учитываются ограничения вьюпорта и внутренние отступы контейнера.
-
-### Рекомендации
-
-- `x` — боковые меню, панели рядом с элементом, тултипы по бокам.
-- `y` — выпадающие списки, меню и подсказки сверху/снизу.
-- `on` — поповеры, перекрывающие и фокусирующие конкретный элемент.
+- Компонент автоматически выбирает сторону размещения с наибольшим доступным пространством
+- При использовании контекстного меню (`contextmenu`) позиционирование происходит от координат курсора
+- Окно всегда остается в пределах видимой области экрана (viewport)
+- Отступ от якоря задается через свойство `indent` (по умолчанию 4px)

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

@@ -1,28 +1,11 @@
 ## CSS Classes for Behavior Control
 
-The Window component uses a system of helper CSS classes to manage various window states and behaviors.
-
-### Blocking Classes
-
-**`*--block`** - Class prevents the window from closing when clicking outside its boundaries.
-Can be added to any element that is outside the current window.
-
-**`*--blockChildren`** - Class prevents the current window from closing.
-Can be added to any element that is inside the current window.
-
-**`*--blockOther`** - Class prevents other windows from closing until the current one is closed.
-Can be added to any element that is inside the current window.
-
-### Control Classes
-
-**`*--close`** - Class applies to elements for closing the window (e.g., close button).
-Can be added to any close control element.
-
-**`*--controlOpenOnly`** - Class applies to control elements that only open the window and never close it.
-Can be added to any open control element.
-
-**`*--controlStatic`** - Class applies to control elements in static mode, preventing any actions.
-Can be added to any control element that should remain static.
-
-**`*--static`** - Class applies to elements inside the window, canceling all actions.
-Can be added to any element within the window.
+- `*--block` — prevents window from closing when clicking outside its boundaries
+- `*--blockChildren` — prevents current window from closing
+- `*--blockOther` — prevents other windows from closing until current one is closed
+- `*--close` — applies to elements for closing the window
+- `*--controlOpenOnly` — applies to control elements that only open the window
+- `*--controlStatic` — applies to control elements in static mode
+- `*--static` — applies to elements inside window, canceling all actions
+
+Where `*` is the component class name (e.g., `d1-window`, `m3-window`).

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

@@ -1,28 +1,11 @@
 ## CSS классы для управления поведением
 
-Компонент Window использует систему вспомогательных CSS классов для управления различными состояниями и поведением окна.
-
-### Классы блокировки
-
-**`*--block`** - Класс предотвращает закрытие окна при клике за его пределами.
-Класс можно добавить к любому элементу, который находится за пределами текущего окна.
-
-**`*--blockChildren`** - Класс предотвращает закрытие текущего окна.
-Класс можно добавить к любому элементу, который находится внутри текущего окна.
-
-**`*--blockOther`** - Класс предотвращает закрытие других окон, пока не закрыто текущее.
-Класс можно добавить к любому элементу, который находится внутри текущего окна.
-
-### Классы управления
-
-**`*--close`** - Класс применяется к элементам для закрытия окна.
-Класс можно добавить к любому элементу управления закрытием окна (например, кнопке закрытия).
-
-**`*--controlOpenOnly`** - Класс применяется к элементам управления, которые только открывают окно и не закрывают его.
-Класс можно добавить к любому элементу, отвечающему за открытие окна.
-
-**`*--controlStatic`** - Класс применяется к элементам управления в статическом режиме, предотвращая любые действия.
-Класс можно добавить к любому элементу управления, который должен оставаться статическим.
-
-**`*--static`** - Класс применяется к элементам внутри окна, отменяя все действия.
-Класс можно добавить к любому элементу внутри окна.
+- `*--block` — предотвращает закрытие окна при клике вне его границ
+- `*--blockChildren` — предотвращает закрытие текущего окна
+- `*--blockOther` — предотвращает закрытие других окон до закрытия текущего
+- `*--close` — применяется к элементам для закрытия окна
+- `*--controlOpenOnly` — применяется к элементам управления, которые только открывают окно
+- `*--controlStatic` — применяется к элементам управления в статическом режим��
+- `*--static` — применяется к элементам внутри окна, отменяя все действия
+
+Где `*` — название класса компонента (например, `d1-window`, `m3-window`).

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

@@ -1,13 +1,31 @@
 ### `window`
 
-Event that triggers when the window state changes (open/close).
+Event fires when the window state changes (open/close).
 
-```ts
-function onWindow (options: WindowEmitOptions) {
-    // handle window state change
-}
-```
+**Parameters:**
+- `options: WindowEmitOptions` — object with window data
 
-Parameters:
-- `options` — `WindowEmitOptions` — window data: id, elements, and the `open` flag
+**WindowEmitOptions structure:**
+- `id: string` — unique window identifier
+- `element: HTMLDivElement` — window DOM element
+- `control: HTMLElement` — control DOM element
+- `open: boolean` — window open state (`true` - open, `false` - closed)
 
+```html
+<script setup>
+const handleWindow = (options) => {
+  console.log('Window ID:', options.id)
+  console.log('Window is open:', options.open)
+  console.log('Window element:', options.element)
+  console.log('Control element:', options.control)
+}
+</script>
+
+<template>
+  <Window @window="handleWindow">
+    <template #default>
+      <p>Window content</p>
+    </template>
+  </Window>
+</template>
+```

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