@dxtmisha/wiki 0.24.3 → 0.25.1

package/src/media/mdx/SelectValue/selectValue.en.mdx

@@ -0,0 +1,64 @@
+Component for displaying selected values in selection controls with support for single and multiple modes.
+
+SelectValue manages the visualization of selected items, automatically switching between text display for single selection and chips for multiple selection. The component integrates with the event system to handle user actions, supports icon display, placeholders, and cancel buttons for selections.
+
+**Key features:**
+
+- Automatic switching between single and multiple selection modes
+- Chip rendering with customizable appearance for multiple selections
+- Placeholder support for empty state
+- Icon display in selected items
+- Cancel buttons for removing individual selections
+- Integration with Chip component for element styling
+- Handling disabled and readonly states
+
+**Typical use cases:**
+
+- Displaying selected options in selects and comboboxes
+- Visualizing multiple selections in lists
+- Showing active filters with removal capability
+- Displaying tags and categories
+- Representing selected elements in forms
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const selectedSingle = ref([
+  { label: 'JavaScript', value: 'js', icon: 'code', index: '1' }
+])
+
+const selectedMultiple = ref([
+  { label: 'React', value: 'react', icon: 'favorite', index: '1' },
+  { label: 'Vue.js', value: 'vue', icon: 'star', index: '2' }
+])
+
+const handleClick = (event) => {
+  console.log('Element clicked:', event)
+}
+</script>
+
+<template>
+  <!-- Single selection -->
+  <SelectValue
+    :value="selectedSingle"
+    :icon-show="true"
+    @click="handleClick"
+  />
+
+  <!-- Multiple selection with chips -->
+  <SelectValue
+    :value="selectedMultiple"
+    :multiple="true"
+    :icon-show="true"
+    icon-cancel="close"
+    @click="handleClick"
+  />
+
+  <!-- With placeholder -->
+  <SelectValue
+    placeholder="Select a value"
+  />
+</template>
+```
+

package/src/media/mdx/SelectValue/selectValue.ru.mdx

@@ -0,0 +1,64 @@
+Компонент для отображения выбранных значений в элементах управления выбором с поддержкой одиночного и множественного режимов.
+
+SelectValue управляет визуализацией выбранных элементов, автоматически переключаясь между текстовым отображением для одиночного выбора и чипами для множественного. Компонент интегрируется с системой событий для обработки действий пользователя, поддерживает отображение иконок, плейсхолдеров и кнопок отмены выбора.
+
+**Основные возможности:**
+
+- Автоматическое переключение между режимами одиночного и множественного выбора
+- Рендеринг чипов с настраиваемым внешним видом для множественного выбора
+- Поддержка плейсхолдера для пустого состояния
+- Отображение иконок в выбранных элементах
+- Кнопки отмены для удаления отдельных выборов
+- Интеграция с Chip компонентом для стилизации элементов
+- Обработка состояний disabled и readonly
+
+**Типичные сценарии использования:**
+
+- Отображение выбранных опций в селектах и комбобоксах
+- Визуализация множественного выбора в списках
+- Показ активных фильтров с возможностью удаления
+- Отображение тегов и категорий
+- Представление выбранных элементов в формах
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const selectedSingle = ref([
+  { label: 'JavaScript', value: 'js', icon: 'code', index: '1' }
+])
+
+const selectedMultiple = ref([
+  { label: 'React', value: 'react', icon: 'favorite', index: '1' },
+  { label: 'Vue.js', value: 'vue', icon: 'star', index: '2' }
+])
+
+const handleClick = (event) => {
+  console.log('Клик по элементу:', event)
+}
+</script>
+
+<template>
+  <!-- Одиночный выбор -->
+  <SelectValue
+    :value="selectedSingle"
+    :icon-show="true"
+    @click="handleClick"
+  />
+
+  <!-- Множественный выбор с чипами -->
+  <SelectValue
+    :value="selectedMultiple"
+    :multiple="true"
+    :icon-show="true"
+    icon-cancel="close"
+    @click="handleClick"
+  />
+
+  <!-- С плейсхолдером -->
+  <SelectValue
+    placeholder="Выберите значение"
+  />
+</template>
+```
+

package/src/media/mdx/SelectValue/wikiMdxSelectValue.ts

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

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