@dxtmisha/wiki 0.24.2 → 0.25.1

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/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,14 @@
+### `control`
+- `onmouseout: function` — mouseout handler
+- `onmouseover: function` — mouseover handler
+- `onclick: function` — click handler
+- `class: string` — classes for styling
+**Properties of `binds`:**
+
+- `open: Ref<boolean>` — open state
+- `binds: object` — properties for the control element
+**Parameters:**
+
+Slot for the control element that triggers the tooltip.
+
+

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

@@ -0,0 +1,14 @@
+### `control`
+
+Слот для элемента управления, вызывающего подсказку.
+
+**Параметры:**
+- `binds: object` — свойства для элемента управления
+- `open: Ref<boolean>` — состояние открытия
+
+**Свойства `binds`:**
+- `class: string` — классы для стилизации
+- `onclick: function` — обработчик клика
+- `onmouseover: function` — обработчик наведения курсора
+- `onmouseout: function` — обработчик ухода курсора
+

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

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