@dxtmisha/wiki 0.39.3 → 0.39.5

package/src/media/mdx/TextareaAutosize/textarea-autosize.en.mdx

@@ -0,0 +1,65 @@
+Text field component that automatically adjusts its height based on content.
+
+TextareaAutosize provides a multi-line text field that dynamically changes its height depending on the amount of entered text. The component uses a hidden clone element for precise height calculation, taking into account all padding and styles of the original textarea. This ensures smooth and natural behavior when entering text without manual height adjustment.
+
+**Key features:**
+
+- Automatic height adjustment based on content
+- Precise size calculation considering padding and styles
+- Smooth height transitions on content change
+- Optional autosize toggle for fixed height
+- Support for all standard textarea attributes
+- Reactive value binding with input events
+- Optimized performance through requestAnimationFrame
+
+**Common use cases:**
+
+- Comment and review fields
+- Feedback forms with long texts
+- Description and notes editors
+- Chats and messengers
+- Forms with dynamic content
+- Multi-line fields in adaptive interfaces
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const message = ref('')
+
+const handleInput = (event) => {
+  console.log('Current value:', event.target.value)
+}
+</script>
+
+<template>
+  <div class="form">
+    <TextareaAutosize
+      v-model="message"
+      :inputAttrs="{
+        placeholder: 'Enter your message...',
+        maxlength: 500
+      }"
+      @input="handleInput"
+    />
+
+    <TextareaAutosize
+      value="Text field with fixed height"
+      :autosize="false"
+      :inputAttrs="{
+        placeholder: 'Height does not change',
+        rows: 3
+      }"
+    />
+
+    <TextareaAutosize
+      :inputAttrs="{
+        placeholder: 'Comment',
+        'aria-label': 'Comment field',
+        required: true
+      }"
+    />
+  </div>
+</template>
+```
+

package/src/media/mdx/TextareaAutosize/textarea-autosize.ru.mdx

@@ -0,0 +1,65 @@
+Компонент текстового поля с автоматической подстройкой высоты под содержимое.
+
+TextareaAutosize предоставляет многострочное текстовое поле, которое динамически изменяет свою высоту в зависимости от объёма введённого текста. Компонент использует скрытый элемент-клон для точного расчёта необходимой высоты, учитывая все отступы и стили исходного textarea. Это обеспечивает плавное и естественное поведение при вводе текста без ручной настройки высоты.
+
+**Основные возможности:**
+
+- Автоматическая подстройка высоты под содержимое
+- Точный расчёт размера с учётом padding и стилей
+- Плавные переходы высоты при изменении контента
+- Опциональное отключение autosize для фиксированной высоты
+- Поддержка всех стандартных атрибутов textarea
+- Реактивная привязка значения с событиями input
+- Оптимизированная производительность через requestAnimationFrame
+
+**Типичные сценарии использования:**
+
+- Поля для комментариев и отзывов
+- Формы обратной связи с длинными текстами
+- Редакторы описаний и заметок
+- Чаты и мессенджеры
+- Формы с динамическим контентом
+- Многострочные поля в адаптивных интерфейсах
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const message = ref('')
+
+const handleInput = (event) => {
+  console.log('Текущее значение:', event.target.value)
+}
+</script>
+
+<template>
+  <div class="form">
+    <TextareaAutosize
+      v-model="message"
+      :inputAttrs="{
+        placeholder: 'Введите ваше сообщение...',
+        maxlength: 500
+      }"
+      @input="handleInput"
+    />
+
+    <TextareaAutosize
+      value="Текстовое поле с фиксированной высотой"
+      :autosize="false"
+      :inputAttrs="{
+        placeholder: 'Высота не изменяется',
+        rows: 3
+      }"
+    />
+
+    <TextareaAutosize
+      :inputAttrs="{
+        placeholder: 'Комментарий',
+        'aria-label': 'Поле комментария',
+        required: true
+      }"
+    />
+  </div>
+</template>
+```
+

package/src/media/mdx/TextareaAutosize/wikiMdxTextareaAutosize.ts

@@ -0,0 +1,19 @@
+import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
+
+import textareaAutosizeEn from './textarea-autosize.en.mdx'
+import textareaAutosizeRu from './textarea-autosize.ru.mdx'
+
+/**
+ * MDX files for TextareaAutosize component
+ *
+ * MDX файлы для компонента TextareaAutosize
+ */
+export const wikiMdxTextareaAutosize: StorybookComponentsMdxItem = {
+  name: 'TextareaAutosize',
+  descriptions: {
+    'textarea-autosize': {
+      en: textareaAutosizeEn,
+      ru: textareaAutosizeRu
+    }
+  }
+}

package/src/media/mdx/Tooltip/event.tooltip.en.mdx

@@ -0,0 +1,7 @@
+### `tooltip`
+
+The event is triggered when the visibility state changes (open/close).
+
+**Parameters:**
+- `open: boolean` — open state (`true` - open, `false` - closed)
+

package/src/media/mdx/Tooltip/event.tooltip.ru.mdx

@@ -0,0 +1,8 @@
+### `tooltip`
+
+Событие срабатывает при изменении состояния видимости (открытие/закрытие).
+
+**Параметры:**
+- `open: boolean` — состояние открытия (`true` - открыто, `false` - закрыто)
+
+

package/src/media/mdx/Tooltip/slot.control.en.mdx

@@ -0,0 +1,5 @@
+- `control(props: TooltipControlItem): any` — Slot for the control element that triggers the tooltip.
+
+> **TooltipControlItem:**
+> - `open: Ref<boolean>` — open state.
+> - `binds: object` — properties for the control element (class, onclick, onmouseover, onmouseout).

package/src/media/mdx/Tooltip/slot.control.ru.mdx

@@ -0,0 +1,5 @@
+- `control(props: TooltipControlItem): any` — Слот для элемента управления, вызывающего подсказку.
+
+> **TooltipControlItem:**
+> - `open: Ref<boolean>` — состояние открытия.
+> - `binds: object` — свойства для элемента управления (class, onclick, onmouseover, onmouseout).

package/src/media/mdx/Tooltip/tooltip.en.mdx

@@ -0,0 +1,34 @@
+Component for displaying pop-up tooltips that provide additional information about an element on hover or focus.
+
+Tooltip is automatically positioned relative to the target element and can contain a text description or custom content. The component supports configuring show and hide delays, and can be equipped with an indicator (arrow) for visual connection.
+
+**Key Features:**
+
+- Automatic positioning
+- Support for an indicator (arrow)
+- Configuration of delays (delay, delayHide)
+- Visibility control via properties or events
+- Slot support for content customization
+- Adaptability and accessibility
+
+**Typical Use Cases:**
+
+- Explanations for icons and buttons
+- Displaying full text for truncated elements
+- Contextual hints for input fields
+- Additional information in the interface
+
+```html
+<script setup>
+import { Tooltip } from 'dxt-ui'
+</script>
+
+<template>
+  <div class="p-4">
+    <Tooltip label="Tooltip text">
+      <button>Hover me</button>
+    </Tooltip>
+  </div>
+</template>
+```
+

package/src/media/mdx/Tooltip/tooltip.ru.mdx

@@ -0,0 +1,34 @@
+Компонент для отображения всплывающих подсказок, предоставляющих дополнительную информацию об элементе при наведении или фокусировке.
+
+Tooltip автоматически позиционируется относительно целевого элемента и может содержать текстовое описание или произвольный контент. Компонент поддерживает настройку задержек появления и скрытия, а также может быть оснащен указателем (стрелкой) для визуальной связи.
+
+**Основные возможности:**
+
+- Автоматическое позиционирование
+- Поддержка указателя (стрелки)
+- Настройка задержек (delay, delayHide)
+- Управление видимостью через свойства или события
+- Поддержка слотов для кастомизации контента
+- Адаптивность и доступность
+
+**Типичные сценарии использования:**
+
+- Пояснения к иконкам и кнопкам
+- Отображение полного текста для сокращенных элементов
+- Контекстные подсказки для полей ввода
+- Дополнительная информация в интерфейсе
+
+```html
+<script setup>
+import { Tooltip } from 'dxt-ui'
+</script>
+
+<template>
+  <div class="p-4">
+    <Tooltip label="Подсказка">
+      <button>Наведи на меня</button>
+    </Tooltip>
+  </div>
+</template>
+```
+

package/src/media/mdx/Tooltip/wikiMdxTooltip.ts

@@ -0,0 +1,31 @@
+import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
+
+import tooltipEn from './tooltip.en.mdx'
+import tooltipRu from './tooltip.ru.mdx'
+import eventTooltipEn from './event.tooltip.en.mdx'
+import eventTooltipRu from './event.tooltip.ru.mdx'
+import slotControlEn from './slot.control.en.mdx'
+import slotControlRu from './slot.control.ru.mdx'
+
+/**
+ * MDX files for Tooltip component
+ *
+ * MDX файлы для компонента Tooltip
+ */
+export const wikiMdxTooltip: StorybookComponentsMdxItem = {
+  name: 'Tooltip',
+  descriptions: {
+    'tooltip': {
+      en: tooltipEn,
+      ru: tooltipRu
+    },
+    'event.tooltip': {
+      en: eventTooltipEn,
+      ru: eventTooltipRu
+    },
+    'slot.control': {
+      en: slotControlEn,
+      ru: slotControlRu
+    }
+  }
+}

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

@@ -0,0 +1,17 @@
+## Positioning Direction (axis)
+
+Controls the axis of window placement relative to the anchor element. Default: `y`.
+
+> Applies only in menu mode (`adaptive="menu"` or `adaptive="menuWindow"`).
+
+**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
+
+- 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

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

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

@@ -0,0 +1,11 @@
+## CSS Classes for Behavior Control
+
+- `*--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

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

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

@@ -0,0 +1,31 @@
+### `window`
+
+Event fires when the window state changes (open/close).
+
+**Parameters:**
+- `options: WindowEmitOptions` — object with window data
+
+**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>
+  <Component @window="handleWindow">
+    <template #default>
+      <p>Window content</p>
+    </template>
+  </Component>
+</template>
+```

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

@@ -0,0 +1,31 @@
+### `window`
+
+Событие срабатывает при изменении состояния окна (открытие/закрытие).
+
+**Параметры:**
+- `options: WindowEmitOptions` — объект с данными окна
+
+**Структура 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>
+  <Component @window="handleWindow">
+    <template #default>
+      <p>Содержимое окна</p>
+    </template>
+  </Component>
+</template>
+```

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

@@ -0,0 +1,17 @@
+- `id: string` — Unique identifier of the window.
+- `open: Ref<boolean>` — Reactive state of window visibility.
+- `control: WindowControlItem` — Control item data for window management.
+    
+> **WindowControlItem:**
+> - `open: Ref<boolean>` — reactive open state.
+> - `class: string` — window CSS class.
+> - `onclick: WindowEventClick` — click event handler.
+> - `onKeydown: WindowEventClick` — keydown event handler.
+> - `oncontextmenu: WindowEventClick` — context menu event handler.
+> - `classesWindow: WindowClassesList` — list of CSS classes for window styling.
+> - `binds: Record<string, any>` — binding properties for the control element.
+
+- `setOpen(open: boolean): Promise<void>` — Sets window open state.
+- `toOpen(): Promise<void>` — Transition to opening state.
+- `toClose(): Promise<void>` — Transition to closing state.
+- `toggle(): Promise<void>` — Toggles window visibility (opens if closed, closes if open).

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

@@ -0,0 +1,17 @@
+- `id: string` — Уникальный идентификатор окна.
+- `open: Ref<boolean>` — Реактивное состояние видимости окна.
+- `control: WindowControlItem` — Данные элемента управления для управления окном.
+    
+> **WindowControlItem:**
+> - `open: Ref<boolean>` — реактивное состояние открытия.
+> - `class: string` — CSS-класс окна.
+> - `onclick: WindowEventClick` — обработчик события клика.
+> - `onKeydown: WindowEventClick` — обработчик события нажатия клавиши.
+> - `oncontextmenu: WindowEventClick` — обработчик события контекстного меню.
+> - `classesWindow: WindowClassesList` — список CSS-классов для стилизации окна.
+> - `binds: Record<string, any>` — свойства привязки для элемента управления.
+
+- `setOpen(open: boolean): Promise<void>` — Устанавливает состояние открытия окна.
+- `toOpen(): Promise<void>` — Переход в состояние открытия окна.
+- `toClose(): Promise<void>` — Переход в состояние закрытия окна.
+- `toggle(): Promise<void>` — Переключает видимость окна (открывает, если закрыто, и закрывает, если открыто).

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

@@ -0,0 +1,31 @@
+## Lifecycle Hooks
+
+### `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

@@ -0,0 +1,31 @@
+## Хуки жизненного цикла
+
+### `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,29 @@
+- `control(props: WindowControlItem): any` — Slot for placing window control elements (close buttons, minimize, etc.).
+- `title(props: WindowControlItem): any` — Slot for placing window title in the header.
+- `footer(props: WindowControlItem): any` — Slot for placing content at the bottom of the window (action buttons, info, etc.).
+- `default(props: WindowControlItem): any` — Main slot for placing the primary window content.
+
+> **WindowControlItem:**
+> - `open: Ref<boolean>` — reactive open state.
+> - `class: string` — window CSS class.
+> - `onclick: WindowEventClick` — click event handler.
+> - `onKeydown: WindowEventClick` — keydown event handler.
+> - `oncontextmenu: WindowEventClick` — context menu event handler.
+> - `classesWindow: WindowClassesList` — list of CSS classes for window styling.
+> - `binds: Record<string, any>` — binding properties for the control element.
+
+> **WindowClassesList:**
+> - `block: string` — main block class.
+> - `blockChildren: string` — block children class.
+> - `blockOther: string` — block other windows class.
+> - `close: string` — close button class.
+> - `static: string` — static positioning class.
+> - `control: string` — control element class.
+> - `controlId: string` — control ID class.
+> - `controlStatic: string` — static control class.
+> - `controlOpenOnly: string` — open-only control class.
+> - `controlActive: string` — active control class.
+> - `persistent: string` — persistent window class.
+
+> **WindowEventClick:**
+> - `(event: MouseEvent & TouchEvent | KeyboardEvent) => Promise<void>` — window event click handler.

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

@@ -0,0 +1,29 @@
+- `control(props: WindowControlItem): any` — Слот управления для размещения элементов управления окном (кнопки закрытия, сворачивания и т.д.).
+- `title(props: WindowControlItem): any` — Слот заголовка для размещения заголовка окна в шапке.
+- `footer(props: WindowControlItem): any` — Слот подвала для размещения содержимого в нижней части окна (кнопки действий, инфо и т.д.).
+- `default(props: WindowControlItem): any` — Основной слот для размещения главного содержимого окна.
+
+> **WindowControlItem:**
+> - `open: Ref<boolean>` — реактивное состояние открытия.
+> - `class: string` — CSS-класс окна.
+> - `onclick: WindowEventClick` — обработчик события клика.
+> - `onKeydown: WindowEventClick` — обработчик события нажатия клавиши.
+> - `oncontextmenu: WindowEventClick` — обработчик события контекстного меню.
+> - `classesWindow: WindowClassesList` — список CSS-классов для стилизации окна.
+> - `binds: Record<string, any>` — свойства привязки для элемента управления.
+
+> **WindowClassesList:**
+> - `block: string` — основной класс блока.
+> - `blockChildren: string` — класс дочерних элементов блока.
+> - `blockOther: string` — класс блокировки других окон.
+> - `close: string` — класс кнопки закрытия.
+> - `static: string` — класс статического позиционирования.
+> - `control: string` — класс элемента управления.
+> - `controlId: string` — класс ID управления.
+> - `controlStatic: string` — класс статического управления.
+> - `controlOpenOnly: string` — класс управления только для открытого состояния.
+> - `controlActive: string` — класс активного управления.
+> - `persistent: string` — класс постоянного окна.
+
+> **WindowEventClick:**
+> - `(event: MouseEvent & TouchEvent | KeyboardEvent) => Promise<void>` — обработчик события клика окна.

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

@@ -0,0 +1,10 @@
+## Static Mode (staticMode)
+
+The Window component supports static mode operation through the `staticMode` property. In this mode, the window works as an embedded component without modal behavior:
+
+- **Content displays immediately** - window is not hidden and doesn't require activation
+- **Animations disabled** - no appearance/disappearance effects
+- **Positioning disabled** - window is embedded in document flow
+- **Works with adaptive** - when `adaptive` property has one of static mode values (for example, `static`), static mode is enabled
+
+Static mode is especially useful for embedding window content directly into the interface without modal behavior.

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

@@ -0,0 +1,10 @@
+## Статический режим (staticMode)
+
+Компонент Window поддерживает статический режим работы через свойство `staticMode`. В этом режиме окно работает как встроенный компонент без модального поведения:
+
+- **Содержимое отображается сразу** - окно не скрывается и не требует активации
+- **Отключены анимации** - нет эффектов появления/исчезновения
+- **Отключено позиционирование** - окно встраивается в поток документа
+- **Работает с adaptive** - когда свойство `adaptive` имеет один из статичных режимов (например, `static`), включается статичный режим
+
+Статический режим особенно полезен для встраивания содержимого окна непосредственно в интерфейс без модального поведения.

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

@@ -0,0 +1,25 @@
+## State Management via v-model
+
+Two-way binding of window open state via `v-model:open`.
+
+**Parameters:**
+- `open: boolean` — window open state
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const isOpen = ref(false)
+</script>
+
+<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>
+```

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

@@ -0,0 +1,25 @@
+## Управление состоянием через v-model
+
+Двусторонняя привязка состояния открытия окна через `v-model:open`.
+
+**Параметры:**
+- `open: boolean` — состояние открытия окна
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const isOpen = ref(false)
+</script>
+
+<template>
+  <button @click="isOpen = true">Открыть</button>
+
+  <Window v-model:open="isOpen">
+    <template #default>
+      <p>Содержимое окна</p>
+      <button @click="isOpen = false">Закрыть</button>
+    </template>
+  </Window>
+</template>
+```