@dxtmisha/wiki 0.24.3 → 0.25.1

package/src/media/mdx/Accordion/wikiMdxAccordion.ts

@@ -0,0 +1,25 @@
+import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
+
+import accordionEn from './accordion.en.mdx'
+import accordionRu from './accordion.ru.mdx'
+import slotsEn from './slots.en.mdx'
+import slotsRu from './slots.ru.mdx'
+
+/**
+ * MDX files for Accordion component
+ *
+ * MDX файлы для компонента Accordion
+ */
+export const wikiMdxAccordion: StorybookComponentsMdxItem = {
+  name: 'Accordion',
+  descriptions: {
+    accordion: {
+      en: accordionEn,
+      ru: accordionRu
+    },
+    slots: {
+      en: slotsEn,
+      ru: slotsRu
+    }
+  }
+}

package/src/media/mdx/ActionSheet/actionSheet.en.mdx

@@ -0,0 +1,61 @@
+Component for creating mobile-optimized action panels that slide up from the bottom of the screen with smooth animation.
+
+ActionSheet is a specialized wrapper over the Window component with a preset `actionSheet` adaptive mode. The component automatically positions itself at the bottom of the screen and slides up when opened, following iOS and Material Design mobile interface patterns. Supports swipe gestures for closing, integration with the Bars component for the header, and automatic focus management.
+
+**Key features:**
+
+- Positioning at the bottom of the screen with slide-up animation
+- Touch gesture support for closing by swiping down
+- Integration with Bars for header display
+- Automatic background blocking when opened
+- Closing by clicking on overlay or close button
+- Lifecycle events (opening, closing)
+- Slot support for content customization
+- Adaptive height based on content size
+
+**Common use cases:**
+
+- Action menus for mobile applications
+- Option and selection lists
+- Forms and filters on mobile devices
+- Context menus for touch interfaces
+- Confirmations and notifications
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const isOpen = ref(false)
+
+const handleAction = (action) => {
+  console.log('Selected action:', action)
+  isOpen.value = false
+}
+</script>
+
+<template>
+  <button @click="isOpen = true">Open Actions</button>
+
+  <ActionSheet
+    v-model:open="isOpen"
+    :touchClose="true"
+  >
+    <template #title>
+      <h3>Choose Action</h3>
+    </template>
+
+    <template #default>
+      <div class="action-list">
+        <button @click="handleAction('share')">Share</button>
+        <button @click="handleAction('copy')">Copy Link</button>
+        <button @click="handleAction('download')">Download</button>
+      </div>
+    </template>
+
+    <template #footer>
+      <button @click="isOpen = false">Cancel</button>
+    </template>
+  </ActionSheet>
+</template>
+```
+

package/src/media/mdx/ActionSheet/actionSheet.ru.mdx

@@ -0,0 +1,61 @@
+Компонент для создания мобильно-оптимизированных панелей действий, выдвигающихся снизу экрана с плавной анимацией.
+
+ActionSheet представляет собой специализированную обертку над компонентом Window с предустановленным адаптивным режимом `actionSheet`. Компонент автоматически позиционируется внизу экрана и выдвигается вверх при открытии, следуя паттернам мобильных интерфейсов iOS и Material Design. Поддерживает жесты свайпа для закрытия, интеграцию с компонентом Bars для заголовка и автоматическое управление фокусом.
+
+**Основные возможности:**
+
+- Позиционирование внизу экрана с анимацией выдвижения
+- Поддержка touch-жестов для закрытия свайпом вниз
+- Интеграция с Bars для отображения заголовка
+- Автоматическая блокировка фона при открытии
+- Закрытие по клику на overlay или кнопке закрытия
+- События жизненного цикла (открытие, закрытие)
+- Поддержка слотов для кастомизации контента
+- Адаптивная высота под размер контента
+
+**Типичные сценарии использования:**
+
+- Меню действий для мобильных приложений
+- Списки опций и выборов
+- Формы и фильтры на мобильных устройствах
+- Контекстные меню для touch-интерфейсов
+- Подтверждения и уведомления
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const isOpen = ref(false)
+
+const handleAction = (action) => {
+  console.log('Выбрано действие:', action)
+  isOpen.value = false
+}
+</script>
+
+<template>
+  <button @click="isOpen = true">Открыть действия</button>
+
+  <ActionSheet
+    v-model:open="isOpen"
+    :touchClose="true"
+  >
+    <template #title>
+      <h3>Выберите действие</h3>
+    </template>
+
+    <template #default>
+      <div class="action-list">
+        <button @click="handleAction('share')">Поделиться</button>
+        <button @click="handleAction('copy')">Копировать ссылку</button>
+        <button @click="handleAction('download')">Скачать</button>
+      </div>
+    </template>
+
+    <template #footer>
+      <button @click="isOpen = false">Отмена</button>
+    </template>
+  </ActionSheet>
+</template>
+```
+

package/src/media/mdx/ActionSheet/touchClose.en.mdx

@@ -0,0 +1,21 @@
+## Touch Close Gesture
+
+The `touchClose` property enables closing the ActionSheet with a swipe-down gesture.
+
+**Possible values:**
+
+- `true` — enables closing by swiping down (default)
+- `false` — disables gesture closing
+
+When enabled, a special tab indicator (drag handle) is displayed in the header area, which users can pull down to close the panel. This follows iOS and Material Design mobile interface patterns, providing intuitive interaction on touch devices.
+
+```html
+<!-- With gesture closing enabled -->
+<ActionSheet :touchClose="true" />
+
+<!-- Without gesture closing -->
+<ActionSheet :touchClose="false" />
+```
+
+The closing gesture is triggered by swiping down in the header area. The component automatically manages touch events and closing animation, ensuring smooth follow-through with the user's finger movement.
+

package/src/media/mdx/ActionSheet/touchClose.ru.mdx

@@ -0,0 +1,21 @@
+## Закрытие жестом
+
+Свойство `touchClose` включает возможность закрытия ActionSheet жестом свайпа вниз.
+
+**Возможные значения:**
+
+- `true` — включает закрытие свайпом вниз (по умолчанию)
+- `false` — отключает закрытие жестом
+
+При включенном свойстве в области заголовка отображается специальная tab-полоска (индикатор перетаскивания), за которую пользователь может потянуть вниз для закрытия панели. Это следует паттернам мобильных интерфейсов iOS и Material Design, обеспечивая интуитивное взаимодействие на сенсорных устройствах.
+
+```html
+<!-- С возможностью закрытия жестом -->
+<ActionSheet :touchClose="true" />
+
+<!-- Без возможности закрытия жестом -->
+<ActionSheet :touchClose="false" />
+```
+
+Жест закрытия срабатывает при свайпе вниз в области заголовка. Компонент автоматически управляет touch-событиями и анимацией закрытия, обеспечивая плавное следование за пальцем пользователя.
+

package/src/media/mdx/ActionSheet/wikiMdxActionSheet.ts

@@ -0,0 +1,25 @@
+import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
+
+import actionSheetEn from './actionSheet.en.mdx'
+import actionSheetRu from './actionSheet.ru.mdx'
+import touchCloseEn from './touchClose.en.mdx'
+import touchCloseRu from './touchClose.ru.mdx'
+
+/**
+ * MDX files for ActionSheet component
+ *
+ * MDX файлы для компонента ActionSheet
+ */
+export const wikiMdxActionSheet: StorybookComponentsMdxItem = {
+  name: 'ActionSheet',
+  descriptions: {
+    actionSheet: {
+      en: actionSheetEn,
+      ru: actionSheetRu
+    },
+    touchClose: {
+      en: touchCloseEn,
+      ru: touchCloseRu
+    }
+  }
+}

package/src/media/mdx/Actions/actions.en.mdx

@@ -0,0 +1,48 @@
+Container for organizing action buttons with support for primary and secondary grouping, various alignment modes, and adaptive behavior.
+
+Actions centralizes the management of interactive button placement in dialogs, forms, and panels, automatically distributes space between groups, supports flexible adaptation to available space, and provides a unified API for creating consistent action sets. It serves as a fundamental component for building user interfaces with clear button hierarchy.
+
+**Core capabilities:**
+
+- Button grouping (primary group via list, secondary via listSecondary)
+- Alignment control (left, right, center, block, none)
+- Adaptive behavior through flexible property (adaptive/container)
+- Automatic spacer between button groups
+- Separate attribute configuration (buttonAttrs, buttonSecondaryAttrs)
+- Slot support for custom content (default, secondary)
+- Integration with Button component with all its features
+- Flexible layout with automatic transition to block mode
+
+**Typical use cases:**
+
+- Action panels in dialogs and modal windows
+- Button sets in forms (cancel, save, apply)
+- Control panels with primary and auxiliary actions
+- Adaptive interfaces with automatic restructuring on mobile devices
+
+```html
+<script setup>
+import { ref } from 'vue'
+import { Actions } from '@dxtmisha/constructor'
+
+const isLoading = ref(false)
+
+const handleSave = async () => {
+  isLoading.value = true
+  await saveData()
+  isLoading.value = false
+}
+</script>
+
+<template>
+  <Actions
+    align="right"
+    :list="[
+      { label: 'Cancel' },
+      { label: 'Save', primary: true, loading: isLoading }
+    ]"
+  />
+</template>
+```
+
+> Actions is a smart container: it automatically manages button placement, adapts to screen size, and provides visual hierarchy between primary and secondary actions.

package/src/media/mdx/Actions/actions.ru.mdx

@@ -0,0 +1,48 @@
+Контейнер для организации кнопок действий с поддержкой основной и вторичной группировки, различных режимов выравнивания и адаптивного поведения.
+
+Actions централизует управление расположением интерактивных кнопок в диалогах, формах и панелях, автоматически распределяет пространство между группами, поддерживает гибкую адаптацию к доступному месту и предоставляет единый API для создания консистентных наборов действий. Является фундаментальным компонентом для построения пользовательских интерфейсов с четкой иерархией кнопок.
+
+**Основные возможности:**
+
+- Группировка кнопок (основная группа через list, вторичная через listSecondary)
+- Управление выравниванием (left, right, center, block, none)
+- Адаптивное поведение через свойство flexible (adaptive/container)
+- Автоматический спейсер между группами кнопок
+- Раздельная настройка атрибутов (buttonAttrs, buttonSecondaryAttrs)
+- Поддержка слотов для кастомного контента (default, secondary)
+- Интеграция с компонентом Button со всеми его возможностями
+- Гибкая раскладка с автоматическим переходом в блочный режим
+
+**Типичные сценарии использования:**
+
+- Панели действий в диалоговых окнах и модальных окнах
+- Наборы кнопок в формах (отмена, сохранение, применение)
+- Панели управления с основными и дополнительными действиями
+- Адаптивные интерфейсы с автоматической перестройкой на мобильных устройствах
+
+```html
+<script setup>
+import { ref } from 'vue'
+import { Actions } from '@dxtmisha/constructor'
+
+const isLoading = ref(false)
+
+const handleSave = async () => {
+  isLoading.value = true
+  await saveData()
+  isLoading.value = false
+}
+</script>
+
+<template>
+  <Actions
+    align="right"
+    :list="[
+      { label: 'Отмена' },
+      { label: 'Сохранить', primary: true, loading: isLoading }
+    ]"
+  />
+</template>
+```
+
+> Actions — это умный контейнер: он автоматически управляет расположением кнопок, адаптируется к размеру экрана и обеспечивает визуальную иерархию между основными и вторичными действиями.

package/src/media/mdx/Actions/flexible.en.mdx

@@ -0,0 +1,19 @@
+## Adaptive layout behavior
+
+The `flexible` property determines automatic switching to block mode when space is limited.
+
+**Possible values:**
+
+- `'adaptive'` — uses media queries to determine breakpoint
+- `'container'` — uses container queries to adapt to parent size
+
+Automatically applies `align="block"` property when available space becomes smaller than a defined breakpoint. With `adaptive` it tracks screen width through media queries, with `container` it adapts to parent container size. Suitable for creating adaptive interfaces that display correctly on both desktop and mobile devices without additional code.
+
+```html
+<!-- Automatic transition on narrow screens -->
+<Actions flexible="adaptive" :list="[...]" />
+
+<!-- Adapts to parent size -->
+<Actions flexible="container" :list="[...]" />
+```
+

package/src/media/mdx/Actions/flexible.ru.mdx

@@ -0,0 +1,19 @@
+## Адаптивное поведение раскладки
+
+Свойство `flexible` определяет автоматическое переключение раскладки в блочный режим при нехватке места.
+
+**Возможные значения:**
+
+- `'adaptive'` — использует медиа-запросы для определения точки перехода
+- `'container'` — использует container queries для адаптации к размеру родителя
+
+Автоматически применяет свойство `align="block"` когда доступное пространство становится меньше определенного брейкпоинта. При `adaptive` отслеживает ширину экрана через медиа-запросы, при `container` адаптируется к размеру родительского контейнера. Подходит для создания адаптивных интерфейсов, которые корректно отображаются как на десктопе, так и на мобильных устройствах без дополнительного кода.
+
+```html
+<!-- Автоматический переход на узких экранах -->
+<Actions flexible="adaptive" :list="[...]" />
+
+<!-- Адаптация к размеру родителя -->
+<Actions flexible="container" :list="[...]" />
+```
+

package/src/media/mdx/Actions/list.en.mdx

@@ -0,0 +1,50 @@
+## Managing action button groups
+
+The `list` and `listSecondary` properties work together to organize buttons in the Actions container. They manage the rendering of primary and secondary button groups with automatic attribute application and visual separation.
+
+**Properties:**
+
+- `list` — array of configurations for primary action buttons (Cancel, Save, Apply)
+- `listSecondary` — array of configurations for secondary buttons (Delete, Reset, Export)
+
+Each array element represents an object with button configuration, supporting all Button component properties (label, icon, disabled, primary, loading, and others). The component automatically applies base attributes from `buttonAttrs` to primary buttons and from `buttonSecondaryAttrs` to secondary ones. Secondary buttons are positioned separately with an automatic spacer and are hidden in `align="center"` and `align="block"` modes. Use `list` for primary actions and `listSecondary` for destructive or less important operations.
+
+```html
+<!-- Primary buttons -->
+<Actions
+  :list="[
+    { label: 'Cancel', onClick: () => close() },
+    { label: 'Save', primary: true, onClick: () => save() }
+  ]"
+/>
+
+<!-- Primary and secondary buttons -->
+<Actions
+  :list="[
+    { label: 'Cancel' },
+    { label: 'Save', primary: true }
+  ]"
+  :list-secondary="[
+    { label: 'Delete', text: true, icon: 'delete', palette: 'error' }
+  ]"
+/>
+
+<!-- Buttons with dynamic state -->
+<Actions
+  :list="[
+    { label: 'Cancel', disabled: isProcessing },
+    { label: 'Save', primary: true, loading: isLoading }
+  ]"
+  :button-attrs="{ size: 'medium' }"
+/>
+
+<!-- Secondary buttons with settings -->
+<Actions
+  :list="[{ label: 'Close' }]"
+  :list-secondary="[
+    { label: 'Export', icon: 'download' },
+    { label: 'Help', icon: 'help' }
+  ]"
+  :button-secondary-attrs="{ size: 'small', text: true }"
+/>
+```

package/src/media/mdx/Actions/list.ru.mdx

@@ -0,0 +1,50 @@
+## Управление группами кнопок действий
+
+Свойства `list` и `listSecondary` работают в связке для организации кнопок в контейнере Actions. Они управляют рендерингом основной и вторичной групп кнопок с автоматическим применением атрибутов и визуальным разделением.
+
+**Свойства:**
+
+- `list` — массив конфигураций для основных кнопок действий (Отмена, Сохранить, Применить)
+- `listSecondary` — массив конфигураций для вторичных кнопок (Удалить, Сбросить, Экспорт)
+
+Каждый элемент массива представляет собой объект с конфигурацией кнопки, поддерживающий все свойства компонента Button (label, icon, disabled, primary, loading и другие). Компонент автоматически применяет базовые атрибуты из `buttonAttrs` к основным кнопкам и из `buttonSecondaryAttrs` к вторичным. Вторичные кнопки располагаются отдельно с автоматическим спейсером и скрываются в режимах `align="center"` и `align="block"`. Используйте `list` для основных действий и `listSecondary` для деструктивных или менее важных операций.
+
+```html
+<!-- Основные кнопки -->
+<Actions
+  :list="[
+    { label: 'Отмена', onClick: () => close() },
+    { label: 'Сохранить', primary: true, onClick: () => save() }
+  ]"
+/>
+
+<!-- Основные и вторичные кнопки -->
+<Actions
+  :list="[
+    { label: 'Отмена' },
+    { label: 'Сохранить', primary: true }
+  ]"
+  :list-secondary="[
+    { label: 'Удалить', text: true, icon: 'delete', palette: 'error' }
+  ]"
+/>
+
+<!-- Кнопки с динамическим состоянием -->
+<Actions
+  :list="[
+    { label: 'Отмена', disabled: isProcessing },
+    { label: 'Сохранить', primary: true, loading: isLoading }
+  ]"
+  :button-attrs="{ size: 'medium' }"
+/>
+
+<!-- Вторичные кнопки с настройками -->
+<Actions
+  :list="[{ label: 'Закрыть' }]"
+  :list-secondary="[
+    { label: 'Экспорт', icon: 'download' },
+    { label: 'Справка', icon: 'help' }
+  ]"
+  :button-secondary-attrs="{ size: 'small', text: true }"
+/>
+```

package/src/media/mdx/Actions/wikiMdxActions.ts

@@ -0,0 +1,31 @@
+import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
+
+import actionsEn from './actions.en.mdx'
+import actionsRu from './actions.ru.mdx'
+import flexibleEn from './flexible.en.mdx'
+import flexibleRu from './flexible.ru.mdx'
+import listEn from './list.en.mdx'
+import listRu from './list.ru.mdx'
+
+/**
+ * MDX files for Actions component
+ *
+ * MDX файлы для компонента Actions
+ */
+export const wikiMdxActions: StorybookComponentsMdxItem = {
+  name: 'Actions',
+  descriptions: {
+    actions: {
+      en: actionsEn,
+      ru: actionsRu
+    },
+    flexible: {
+      en: flexibleEn,
+      ru: flexibleRu
+    },
+    list: {
+      en: listEn,
+      ru: listRu
+    }
+  }
+}

package/src/media/mdx/Anchor/anchor.en.mdx

@@ -0,0 +1,34 @@
+Component for creating anchor links with smooth scrolling and URL copying capabilities.
+
+Anchor provides interactive anchor links for navigating through page sections. The component automatically handles clicks, updates the URL address, supports smooth scrolling with customizable offset, and integrates with Tooltip for displaying copy notifications. It can work both in regular navigation mode and in link copying mode to clipboard.
+
+**Key features:**
+
+- Smooth scrolling to target element with configurable parameters
+- Automatic navigation on page load based on URL hash
+- Copy mode for copying full link to clipboard
+- Tooltip integration for copy notifications
+- Icon support for visual styling
+- Hidden anchors for creating invisible navigation points
+- URL updates via history API without page reload
+
+**Typical use cases:**
+
+- Navigation through documentation sections and long pages
+- Anchors for headings with copy link button
+- Table of contents and page navigation menu
+- "Share link to section" buttons
+- Creating invisible anchor points for programmatic navigation
+
+```html
+<template>
+  <!-- Regular anchor -->
+  <Anchor name="section-1" text="Go to section" />
+
+  <!-- With copy mode -->
+  <Anchor name="section-2" text="Copy link" isCopy />
+
+  <!-- Hidden anchor -->
+  <Anchor name="section-3" hide />
+</template>
+```

package/src/media/mdx/Anchor/anchor.ru.mdx

@@ -0,0 +1,34 @@
+Компонент для создания якорных ссылок с плавной прокруткой и возможностью копирования URL.
+
+Anchor предоставляет интерактивные якорные ссылки для навигации по разделам страницы. Компонент автоматически обрабатывает клики, обновляет URL-адрес, поддерживает плавную прокрутку с настраиваемым отступом и интегрируется с Tooltip для отображения уведомлений при копировании. Может работать как в режиме обычной навигации, так и в режиме копирования ссылки в буфер обмена.
+
+**Основные возможности:**
+
+- Плавная прокрутка к целевому элементу с настройкой параметров
+- Автоматическая навигация при загрузке страницы по хешу в URL
+- Режим копирования полной ссылки в буфер обмена
+- Интеграция с Tooltip для уведомлений о копировании
+- Поддержка иконок для визуального оформления
+- Скрытые якоря для создания невидимых точек навигации
+- Обновление URL через history API без перезагрузки страницы
+
+**Типичные сценарии использования:**
+
+- Навигация по разделам документации и длинных страниц
+- Якоря для заголовков с кнопкой копирования ссылки
+- Оглавление и меню навигации по странице
+- Кнопки "Поделиться ссылкой на раздел"
+- Создание невидимых якорных точек для программной навигации
+
+```html
+<template>
+  <!-- Обычный якорь -->
+  <Anchor name="section-1" text="Перейти к разделу" />
+
+  <!-- С копированием -->
+  <Anchor name="section-2" text="Скопировать ссылку" isCopy />
+
+  <!-- Скрытый якорь -->
+  <Anchor name="section-3" hide />
+</template>
+```

package/src/media/mdx/Anchor/expose.go.en.mdx

@@ -0,0 +1,6 @@
+### `go`
+
+Method for scrolling the page to the current anchor element. Uses scroll settings (`behavior`, `block`, `inline`, `shift`) and updates the page URL.
+
+**Type:** `() => void`
+

package/src/media/mdx/Anchor/expose.go.ru.mdx

@@ -0,0 +1,6 @@
+### `go`
+**Тип:** `() => void`
+
+Метод для прокрутки страницы к текущему элементу якоря. Использует настройки прокрутки (`behavior`, `block`, `inline`, `shift`) и обновляет URL страницы.
+
+

package/src/media/mdx/Anchor/hide.en.mdx

@@ -0,0 +1,28 @@
+## Hidden anchors
+
+The `hide` property creates an invisible anchor point for programmatic navigation without visual representation.
+
+**Properties:**
+
+- `hide` — hides the visual representation of the component (default `false`)
+- `name` — anchor name for navigation (required property)
+
+When `hide` is enabled, the component renders as a hidden `<a name="...">` element without text, icons, or styling. This is useful for creating invisible navigation points that can be programmatically scrolled to or used as target elements for other anchors. The hidden anchor remains in the DOM and is accessible for navigation via URL hash or scroll methods.
+
+```html
+<template>
+  <!-- Hidden anchor in section -->
+  <section>
+    <Anchor name="section-start" hide />
+    <h2>Section heading</h2>
+  </section>
+
+  <!-- Combination of hidden and visible -->
+  <h3>
+    <Anchor name="heading" hide />
+    Heading
+    <Anchor name="heading" isCopy iconTag="link" />
+  </h3>
+</template>
+```
+

package/src/media/mdx/Anchor/hide.ru.mdx

@@ -0,0 +1,28 @@
+## Скрытые якоря
+
+Свойство `hide` создаёт невидимую якорную точку для программной навигации без визуального представления.
+
+**Свойства:**
+
+- `hide` — скрывает визуальное представление компонента (по умолчанию `false`)
+- `name` — имя якоря для навигации (обязательное свойство)
+
+При включённом `hide` компонент рендерится как скрытый элемент `<a name="...">` без текста, иконок и стилей оформления. Это полезно для создания невидимых точек навигации, к которым можно программно прокручивать страницу или использовать их как целевые элементы для других якорей. Скрытый якорь остаётся в DOM и доступен для навигации через URL хеш или методы прокрутки.
+
+```html
+<template>
+  <!-- Скрытый якорь в секции -->
+  <section>
+    <Anchor name="section-start" hide />
+    <h2>Заголовок раздела</h2>
+  </section>
+
+  <!-- Комбинация скрытого и видимого -->
+  <h3>
+    <Anchor name="heading" hide />
+    Заголовок
+    <Anchor name="heading" isCopy iconTag="link" />
+  </h3>
+</template>
+```
+