@dxtmisha/wiki 0.24.3 → 0.39.1

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/classes.ru.mdx

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

package/src/media/mdx/event/events.actions.en.mdx

@@ -0,0 +1,44 @@
+### `actions`
+
+Event fires when clicking on an action button in the Actions component, passing the original DOM event and click data.
+
+**Parameters:**
+- `event: MouseEvent` — original DOM mouse event
+- `value: EventClickValue` — object with click data
+
+**EventClickValue structure:**
+- `type: string` — action/button type (e.g., `'confirm'`, `'cancel'`)
+- `value: any` — arbitrary button value
+- `detail: Record<string, any> | undefined` — additional event data
+
+```html
+<script setup>
+const handleActions = (event, value) => {
+  console.log('DOM event:', event)
+  console.log('Action type:', value.type)
+  console.log('Value:', value.value)
+  console.log('Details:', value.detail)
+
+  if (value.type === 'confirm') {
+    console.log('Confirm button pressed')
+  }
+}
+</script>
+
+<template>
+  <Actions @actions="handleActions" :list="[
+    { text: 'Cancel', type: 'cancel' },
+    { text: 'Confirm', type: 'confirm' }
+  ]" />
+</template>
+```
+
+### `actionsLite`
+
+Event fires when clicking on an action button in the Actions component, passing only data without the original DOM event (lightweight version).
+
+**Parameters:**
+- `value: EventClickValue` — object with click data
+
+> Actions component can be hidden with `actionsHide` property.
+

package/src/media/mdx/event/events.actions.ru.mdx

@@ -0,0 +1,44 @@
+### `actions`
+
+Событие срабатывает при клике на кнопку действия в компоненте Actions, передавая оригинальное DOM событие и данные о клике.
+
+**Параметры:**
+- `event: MouseEvent` — оригинальное DOM событие мыши
+- `value: EventClickValue` — объект с данными о клике
+
+**Структура EventClickValue:**
+- `type: string` — тип действия/кнопки (например, `'confirm'`, `'cancel'`)
+- `value: any` — произвольное значение кнопки
+- `detail: Record<string, any> | undefined` — дополнительные данные события
+
+```html
+<script setup>
+const handleActions = (event, value) => {
+  console.log('DOM событие:', event)
+  console.log('Тип действия:', value.type)
+  console.log('Значение:', value.value)
+  console.log('Детали:', value.detail)
+
+  if (value.type === 'confirm') {
+    console.log('Нажата кнопка "Подтвердить"')
+  }
+}
+</script>
+
+<template>
+  <Actions @actions="handleActions" :list="[
+    { text: 'Отмена', type: 'cancel' },
+    { text: 'Подтвердить', type: 'confirm' }
+  ]" />
+</template>
+```
+
+### `actionsLite`
+
+Событие срабатывает при клике на кнопку действия в компоненте Actions, передавая только данные без оригинального DOM события (облегченная версия).
+
+**Параметры:**
+- `value: EventClickValue` — объект с данными о клике
+
+> Компонент Actions можно скрыть свойством `actionsHide`.
+

package/src/media/mdx/event/events.inputStandard.en.mdx

@@ -0,0 +1,6 @@
+### `input`
+
+Event fires when the value in the input field changes, passing the original DOM event.
+
+**Parameters:**
+- `event: InputEvent` — original DOM input event

package/src/media/mdx/event/events.inputStandard.ru.mdx

@@ -0,0 +1,6 @@
+### `input`
+
+Событие срабатывает при изменении значения в поле ввода, передавая оригинальное DOM событие.
+
+**Параметры:**
+- `event: InputEvent` — оригинальное DOM событие ввода

package/src/media/mdx/event/wikiMdxEvent.ts

@@ -1,5 +1,7 @@
 import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
 
+import eventsActionsEn from './events.actions.en.mdx'
+import eventsActionsRu from './events.actions.ru.mdx'
 import eventsBarsEn from './events.bars.en.mdx'
 import eventsBarsRu from './events.bars.ru.mdx'
 import eventsBeforeinputEn from './events.beforeinput.en.mdx'
@@ -10,6 +12,8 @@ import eventsFocusEn from './events.focus.en.mdx'
 import eventsFocusRu from './events.focus.ru.mdx'
 import eventsInputEn from './events.input.en.mdx'
 import eventsInputRu from './events.input.ru.mdx'
+import eventsInputStandardEn from './events.inputStandard.en.mdx'
+import eventsInputStandardRu from './events.inputStandard.ru.mdx'
 import eventsKeyboardEn from './events.keyboard.en.mdx'
 import eventsKeyboardRu from './events.keyboard.ru.mdx'
 import eventsPasteEn from './events.paste.en.mdx'
@@ -20,35 +24,43 @@ import eventsResetRu from './events.reset.ru.mdx'
 export const wikiMdxEvent: StorybookComponentsMdxItem = {
   name: 'Event',
   descriptions: {
-    bars: {
+    'actions': {
+      en: eventsActionsEn,
+      ru: eventsActionsRu
+    },
+    'bars': {
       en: eventsBarsEn,
       ru: eventsBarsRu
     },
-    beforeinput: {
+    'beforeinput': {
       en: eventsBeforeinputEn,
       ru: eventsBeforeinputRu
     },
-    click: {
+    'click': {
       en: eventsClickEn,
       ru: eventsClickRu
     },
-    focus: {
+    'focus': {
       en: eventsFocusEn,
       ru: eventsFocusRu
     },
-    input: {
+    'input': {
       en: eventsInputEn,
       ru: eventsInputRu
     },
-    keyboard: {
+    'input-standard': {
+      en: eventsInputStandardEn,
+      ru: eventsInputStandardRu
+    },
+    'keyboard': {
       en: eventsKeyboardEn,
       ru: eventsKeyboardRu
     },
-    paste: {
+    'paste': {
       en: eventsPasteEn,
       ru: eventsPasteRu
     },
-    reset: {
+    'reset': {
       en: eventsResetEn,
       ru: eventsResetRu
     }

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

@@ -1,3 +1,3 @@
 ### `clear`
 
-Clears the component value to default and focuses the input field.
+Clears the component value by default and focuses the input field.

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

@@ -0,0 +1,6 @@
+### `descriptionId`
+
+Unique identifier for the description element. Used for accessibility attributes like `aria-describedby`.
+
+**Type:** `string`
+

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

@@ -0,0 +1,6 @@
+### `descriptionId`
+
+Уникальный идентификатор элемента описания. Используется для атрибутов доступности, таких как `aria-describedby`.
+
+**Тип:** `string`
+

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

@@ -0,0 +1,6 @@
+### `id`
+
+Unique identifier for the component element. Used as the DOM element's `id` attribute.
+
+**Type:** `string`
+

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

@@ -0,0 +1,6 @@
+### `id`
+
+Уникальный идентификатор элемента компонента. Используется в качестве атрибута `id` DOM-элемента.
+
+**Тип:** `string`
+

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

@@ -0,0 +1,6 @@
+### `labelId`
+
+Unique identifier for the label element. Used for accessibility attributes like `aria-labelledby`.
+
+**Type:** `string`
+

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

@@ -0,0 +1,6 @@
+### `labelId`
+
+Уникальный идентификатор элемента метки. Используется для атрибутов доступности, таких как `aria-labelledby`.
+
+**Тип:** `string`
+

package/src/media/mdx/expose/wikiMdxExpose.ts

@@ -2,8 +2,14 @@ import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
 
 import exposeClearEn from './expose.clear.en.mdx'
 import exposeClearRu from './expose.clear.ru.mdx'
+import exposeDescriptionIdEn from './expose.descriptionId.en.mdx'
+import exposeDescriptionIdRu from './expose.descriptionId.ru.mdx'
 import exposeDetailEn from './expose.detail.en.mdx'
 import exposeDetailRu from './expose.detail.ru.mdx'
+import exposeIdEn from './expose.id.en.mdx'
+import exposeIdRu from './expose.id.ru.mdx'
+import exposeLabelIdEn from './expose.labelId.en.mdx'
+import exposeLabelIdRu from './expose.labelId.ru.mdx'
 import exposeOpenEn from './expose.open.en.mdx'
 import exposeOpenRu from './expose.open.ru.mdx'
 import exposeSelectedEn from './expose.selected.en.mdx'
@@ -18,10 +24,22 @@ export const wikiMdxExpose: StorybookComponentsMdxItem = {
       en: exposeClearEn,
       ru: exposeClearRu
     },
+    descriptionId: {
+      en: exposeDescriptionIdEn,
+      ru: exposeDescriptionIdRu
+    },
     detail: {
       en: exposeDetailEn,
       ru: exposeDetailRu
     },
+    id: {
+      en: exposeIdEn,
+      ru: exposeIdRu
+    },
+    labelId: {
+      en: exposeLabelIdEn,
+      ru: exposeLabelIdRu
+    },
     open: {
       en: exposeOpenEn,
       ru: exposeOpenRu

package/src/media/mdx/slot/body.en.mdx

@@ -0,0 +1,6 @@
+### `body`
+**Returns:** `VNode` — content
+
+Slot for the main content of the component.
+
+

package/src/media/mdx/slot/body.ru.mdx

@@ -0,0 +1,6 @@
+### `body`
+
+Слот для основного содержимого компонента.
+
+**Возвращает:** `VNode` — содержимое
+

package/src/media/mdx/slot/headline.en.mdx

@@ -0,0 +1,7 @@
+### `headline`
+
+Slot for placing custom headline content.
+
+**Returns:** `VNode` — element with class `{className}__headline`
+
+

package/src/media/mdx/slot/headline.ru.mdx

@@ -0,0 +1,6 @@
+### `headline`
+
+Слот для размещения пользовательского содержимого заголовка.
+
+**Возвращает:** `VNode` — элемент с классом `{className}__headline`
+

package/src/media/mdx/slot/leading.en.mdx

@@ -0,0 +1,7 @@
+### `leading`
+
+Slot for placing content at the start of the interactive field area, before the main input element.
+
+**Parameters:**
+- `props: FieldControl` — object with data for binding
+

package/src/media/mdx/slot/leading.ru.mdx

@@ -0,0 +1,7 @@
+### `leading`
+
+Слот для размещения контента в начале интерактивной области поля, перед основным элементом ввода.
+
+**Параметры:**
+- `props: FieldControl` — объект с данными для связывания
+

package/src/media/mdx/slot/secondary.en.mdx

@@ -0,0 +1,5 @@
+### `secondary`
+
+Slot for placing secondary content or additional component elements.
+
+**Returns:** `VNode` — secondary component content

package/src/media/mdx/slot/secondary.ru.mdx

@@ -0,0 +1,5 @@
+### `secondary`
+
+Слот для размещения вторичного содержимого или дополнительных элементов компонента.
+
+**Возвращает:** `VNode` — вторичное содержимое компонента

package/src/media/mdx/slot/trailing.en.mdx

@@ -0,0 +1,7 @@
+### `trailing`
+
+Slot for placing content at the end of the interactive field area, after the main input element.
+
+**Parameters:**
+- `props: FieldControl` — object with data for binding
+

package/src/media/mdx/slot/trailing.ru.mdx

@@ -0,0 +1,7 @@
+### `trailing`
+
+Слот для размещения контента в конце интерактивной области поля, после основного элемента ввода.
+
+**Параметры:**
+- `props: FieldControl` — объект с данными для связывания
+