@dxtmisha/wiki 0.39.2 → 0.39.3

package/src/media/descriptions/wikiDescriptionsWindow.ts

@@ -1,241 +0,0 @@
-import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
-
-/**
- * Descriptions for Window component properties
- *
- * Описания свойств компонента Window
- */
-export const wikiDescriptionsWindow: StorybookComponentsDescriptionItem = {
-  name: 'Window',
-  description: {
-    en: 'Flexible modal and popup window component with advanced positioning and animation capabilities',
-    ru: 'Гибкий компонент модального и всплывающего окна с расширенными возможностями позиционирования и анимации'
-  },
-  possibilities: {
-    en: [
-      'modal and contextual window display modes',
-      'intelligent positioning system with automatic collision detection',
-      'smooth opening and closing animations with customizable transitions',
-      'static mode for embedded window components',
-      'persistent window state management',
-      'automatic scroll handling and content overflow management',
-      'keyboard navigation and accessibility support',
-      'event-driven architecture with comprehensive lifecycle hooks',
-      'integration with scrollbar and image components',
-      'responsive design with mobile and desktop optimization'
-    ],
-    ru: [
-      'режимы отображения модальных и контекстных окон',
-      'интеллектуальная система позиционирования с автоматическим определением коллизий',
-      'плавные анимации открытия и закрытия с настраиваемыми переходами',
-      'статический режим для встроенных компонентов окон',
-      'управление постоянным состоянием окна',
-      'автоматическая обработка прокрутки и управление переполнением контента',
-      'навигация с клавиатуры и поддержка доступности',
-      'событийно-ориентированная архитектура с комплексными хуками жизненного цикла',
-      'интеграция с компонентами скроллбара и изображений',
-      'адаптивный дизайн с оптимизацией для мобильных устройств и десктопа'
-    ]
-  },
-  import: [
-    'import { ref } from \'vue\''
-  ],
-  render: `
-      <DesignComponent v-bind="args">
-        <template #control="{binds}">
-          <button class="wiki-storybook-button" v-bind="binds">Open Window</button>
-        </template>
-
-        <template #title>
-          <h3 class="wiki-storybook-item--padding">Window Component Demonstration</h3>
-        </template>
-
-        <template #default>
-          <div class="wiki-storybook-item--padding">
-            <h4>Advanced Window System</h4>
-            <p>This window component represents a sophisticated approach to modal and popup interfaces in modern web applications. It provides a comprehensive solution for displaying overlaid content with intelligent positioning, smooth animations, and extensive customization options.</p>
-
-            <p>The component automatically handles complex scenarios such as viewport boundaries, scroll positioning, and responsive behavior across different screen sizes. Whether used for modal dialogs, dropdown menus, tooltips, or contextual panels, the window component adapts to various use cases while maintaining consistent behavior and appearance.</p>
-
-            <h4>Key Features and Capabilities</h4>
-            <p>The window system includes advanced features such as automatic positioning algorithms that prevent content from appearing outside viewport boundaries, smooth transition animations that enhance user experience, and comprehensive event handling for various interaction patterns including keyboard navigation and focus management.</p>
-
-            <p>Integration with other components such as scrollbars and images is seamless, allowing for rich content presentation within window containers. The component supports both programmatic and declarative control patterns, making it suitable for different development approaches and architectural requirements.</p>
-
-            <h4>Technical Architecture</h4>
-            <p>Built with a modular composition-based architecture, the window component consists of multiple specialized subcomponents that handle specific aspects of functionality. This includes separate managers for positioning, events, styles, animations, and state persistence, ensuring maintainable and testable code.</p>
-
-            <p>The component follows modern Vue.js patterns with reactive state management, composable APIs, and TypeScript support throughout. Performance is optimized through intelligent rendering strategies and minimal DOM manipulation, ensuring smooth operation even in complex applications with multiple concurrent windows.</p>
-          </div>
-        </template>
-
-        <template #footer="{classesWindow}">
-          <div class="wiki-storybook-flex wiki-storybook-item--padding">
-            <button :class="classesWindow.close" class="wiki-storybook-button wiki-storybook-button--text">Cancel</button>
-            <button class="wiki-storybook-button">Confirm</button>
-          </div>
-        </template>
-      </DesignComponent>
-    `,
-  stories: [
-    {
-      id: 'WindowStaticMode',
-      name: {
-        en: 'Static Mode',
-        ru: 'Статический режим'
-      },
-      template: `
-        <DesignComponent :staticMode="true" adaptive="static">
-          <template #default>
-            <h4>Static Mode Window</h4>
-            <p>This window uses <code>staticMode: true</code>.</p>
-            <p>Content displays immediately without animations or modal positioning.</p>
-
-            <div class="wiki-storybook-info">
-              <strong>Static mode features:</strong>
-              <ul>
-                <li>No animations</li>
-                <li>Embedded in document flow</li>
-                <li>Always visible</li>
-              </ul>
-            </div>
-          </template>
-        </DesignComponent>
-      `
-    },
-    {
-      id: 'WindowAxis',
-      name: {
-        en: 'Axis positioning',
-        ru: 'Позиционирование по оси'
-      },
-      template: `
-        <div class="wiki-storybook-flex wiki-storybook-gap">
-          <!-- Axis: x -->
-          <DesignComponent axis="x" adaptive="menu" :indent="8">
-            <template #control="{binds}">
-              <button class="wiki-storybook-button" v-bind="binds">Open (axis: x)</button>
-            </template>
-            <template #default>
-              <div class="wiki-storybook-item--padding">
-                <strong>axis = x</strong>
-                <p>Window aligns horizontally (left/right) near the trigger.</p>
-              </div>
-            </template>
-          </DesignComponent>
-
-          <!-- Axis: y -->
-          <DesignComponent axis="y" adaptive="menu" :indent="8">
-            <template #control="{binds}">
-              <button class="wiki-storybook-button" v-bind="binds">Open (axis: y)</button>
-            </template>
-            <template #default>
-              <div class="wiki-storybook-item--padding">
-                <strong>axis = y</strong>
-                <p>Window aligns vertically (top/bottom) near the trigger.</p>
-              </div>
-            </template>
-          </DesignComponent>
-
-          <!-- Axis: on -->
-          <DesignComponent axis="on" adaptive="menu" overElement=".axis-on-target">
-            <template #control="{binds}">
-              <button class="wiki-storybook-button" v-bind="binds">Open (axis: on)</button>
-            </template>
-            <template #default>
-              <div class="wiki-storybook-item--padding">
-                <strong>axis = on</strong>
-                <p>Window positions over the target element; scroll adjusts to keep it visible.</p>
-                <ul style="max-height: 160px; overflow: auto; margin: 8px 0; padding-left: 20px;">
-                  <li>Item 1</li>
-                  <li>Item 2</li>
-                  <li>Item 3</li>
-                  <li>Item 4</li>
-                  <li class="axis-on-target"><strong>Focused item (target)</strong></li>
-                  <li>Item 6</li>
-                  <li>Item 7</li>
-                  <li>Item 8</li>
-                  <li>Item 9</li>
-                  <li>Item 10</li>
-                </ul>
-              </div>
-            </template>
-          </DesignComponent>
-        </div>
-      `
-    },
-    {
-      id: 'WindowVModel',
-      name: {
-        en: 'Two-way binding (v-model)',
-        ru: 'Двусторонняя привязка (v-model)'
-      },
-      setup: `
-      return {
-        open: ref(false)
-      }
-      `,
-      template: `
-        <button class="wiki-storybook-button" @click="open = true">Open via v-model ({{ open }})</button>
-
-        <DesignComponent v-model:open="open">
-          <div class="wiki-storybook-item--padding">Your content here</div>
-        </DesignComponent>
-      `
-    }
-  ],
-  documentation: {
-    body: `
-<StorybookDescriptions componentName={'Window'} type={'window'}/>
-<StorybookDescriptions componentName={'Window'} type={'classes'}/>
-<StorybookDescriptions componentName={'Window'} type={'staticMode'}/>
-<Canvas of={Component.WindowStaticMode}/>
-<StorybookDescriptions componentName={'Window'} type={'axis'}/>
-<Canvas of={Component.WindowAxis}/>
-<StorybookDescriptions componentName={'Window'} type={'v-model'}/>
-<Canvas of={Component.WindowVModel}/>
-<StorybookDescriptions componentName={'Window'} type={'hooks'}/>
-    `,
-    events: `
-<StorybookDescriptions componentName={'Window'} type={'event.window'}/>
-<StorybookDescriptions componentName={'Scrollbar'} type={'emits-include'}/>
-<StorybookDescriptions componentName={'Image'} type={'event.load'}/>
-    `,
-    expose: `
-<StorybookDescriptions componentName={'Window'} type={'expose'}/>
-    `,
-    slots: `
-<StorybookDescriptions componentName={'Window'} type={'slots'}/>
-    `
-  },
-  ai: {
-    render: `
-      <div :class="classDemo.item">
-        <Window embedded open v-bind="args">
-            <template #control="{ binds }">
-              <button v-bind="binds">Open Window</button>
-            </template>
-            <template #title>
-              <h3>Window Title</h3>
-            </template>
-            <template #default>
-              <p>Window content goes here. This is a demonstration of the window component capabilities.</p>
-              <p>It can contain text, images, forms, or any other content.</p>
-            </template>
-            <template #footer>
-              <div>
-                <button>Cancel</button>
-                <button>Save</button>
-              </div>
-            </template>
-          </Window>
-      </div>
-    `,
-    description: `
-Versatile high-performance container orchestration system for Modals, Popups, Dropdowns, and Cards. Automatically manages complex DOM interactions including z-index hierarchy, focus trapping, teleportation, and body scroll locking.
-Features an intelligent multi-axis positioning engine (vertical, horizontal, or overlay) with automated viewport collision detection and obstacle avoidance. Includes a full suite of lifecycle hooks, advanced animation management, and integrated support for Scrollbar and Image components within its content area.
-Controlled via the v-model:open prop and utilizing the #control, #title, #default, and #footer slots for modular layout. Use as a foundational building block for any overlaid or contextual interface requirement that exceeds the logic of standard Modal or Menu components.
-    `,
-    hide: true
-  }
-}

package/src/media/mdx/Accordion/accordion.en.mdx

@@ -1,59 +0,0 @@
-## Description
-
-Expandable container for organizing content with smooth opening and closing animations, simplifying information structuring in the interface.
-
-Accordion allows creating expandable sections with automatic animations, interactive header, and state management via v-model. The component supports padding configuration, visual dividers, and content customization through slots.
-
-**Key features:**
-
-- Smooth expand and collapse animations
-- Header with label, description, and icons
-- State management via v-model:open
-- Programmatic control (toggle, toOpen, toClose)
-- Internal padding configuration (padding)
-- Visual divider between sections
-- Customization via head and default slots
-
-**Common use cases:**
-
-- FAQ sections
-- Settings panels
-- Product filters
-- Information blocks
-- Menus with subsections
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const isOpen = ref(false)
-</script>
-
-<template>
-  <!-- Basic accordion -->
-  <Accordion label="Question 1">
-    <p>Answer to the question.</p>
-  </Accordion>
-
-  <!-- With state management -->
-  <Accordion
-    v-model:open="isOpen"
-    label="Settings"
-    icon="settings"
-  >
-    <p>Settings content.</p>
-  </Accordion>
-
-  <!-- With custom header -->
-  <Accordion>
-    <template #head>
-      <div>Custom header</div>
-    </template>
-    <template #default>
-      <p>Section content.</p>
-    </template>
-  </Accordion>
-</template>
-```
-
-> Accordion is a component for creating expandable sections with animation support, state management, and flexible customization.

package/src/media/mdx/Accordion/accordion.ru.mdx

@@ -1,59 +0,0 @@
-## Описание
-
-Раскрывающийся контейнер для организации контента с плавными анимациями открытия и закрытия, упрощающий структурирование информации в интерфейсе.
-
-Accordion позволяет создавать раскрывающиеся секции с автоматическими анимациями, интерактивным заголовком и возможностью управления через v-model. Компонент поддерживает настройку отступов, визуальных разделителей и кастомизацию содержимого через слоты.
-
-**Основные возможности:**
-
-- Плавные анимации раскрытия и сворачивания
-- Заголовок с меткой, описанием и иконками
-- Управление состоянием через v-model:open
-- Программное управление (toggle, toOpen, toClose)
-- Настройка внутренних отступов (padding)
-- Визуальный разделитель между секциями
-- Кастомизация через слоты head и default
-
-**Типичные сценарии использования:**
-
-- FAQ секции
-- Панели настроек
-- Фильтры товаров
-- Информационные блоки
-- Меню с подразделами
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const isOpen = ref(false)
-</script>
-
-<template>
-  <!-- Базовый аккордеон -->
-  <Accordion label="Вопрос 1">
-    <p>Ответ на вопрос.</p>
-  </Accordion>
-
-  <!-- С управлением состоянием -->
-  <Accordion
-    v-model:open="isOpen"
-    label="Настройки"
-    icon="settings"
-  >
-    <p>Содержимое настроек.</p>
-  </Accordion>
-
-  <!-- С кастомным заголовком -->
-  <Accordion>
-    <template #head>
-      <div>Свой заголовок</div>
-    </template>
-    <template #default>
-      <p>Содержимое секции.</p>
-    </template>
-  </Accordion>
-</template>
-```
-
-> Accordion — компонент для создания раскрывающихся секций с поддержкой анимаций, управления состоянием и гибкой кастомизации.

package/src/media/mdx/Accordion/slots.en.mdx

@@ -1,9 +0,0 @@
-- `default(props: MotionTransformControlItem): any` — Slot for placing the main accordion content that appears when the section is expanded.
-
-> **MotionTransformControlItem:**
-> - `isOpen: ComputedRef<boolean>` — reactive open state.
-> - `isShow: ComputedRef<boolean>` — visible or preparing to show.
-> - `classes: MotionTransformClassList` — helper CSS classes.
-> - `idControl: string` — identifier for the control element.
-> - `idBody: string` — identifier for the body element.
-> - `binds: AriaRoleControlPropsInclude` — binding attributes for accessibility.

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

@@ -1,9 +0,0 @@
-- `default(props: MotionTransformControlItem): any` — Слот для размещения основного содержимого аккордеона, которое появляется при раскрытии секции.
-
-> **MotionTransformControlItem:**
-> - `isOpen: ComputedRef<boolean>` — реактивное состояние открытия.
-> - `isShow: ComputedRef<boolean>` — видим либо готовится к показу.
-> - `classes: MotionTransformClassList` — вспомогательные CSS‑классы.
-> - `idControl: string` — идентификатор элемента управления.
-> - `idBody: string` — идентификатор элемента тела.
-> - `binds: AriaRoleControlPropsInclude` — атрибуты привязки для доступности.

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

@@ -1,25 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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

@@ -1,61 +0,0 @@
-Компонент для создания мобильно-оптимизированных панелей действий, выдвигающихся снизу экрана с плавной анимацией.
-
-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

@@ -1,21 +0,0 @@
-## 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

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

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

@@ -1,25 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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.