@dxtmisha/wiki 0.39.1 → 0.39.3

package/src/media/mdx/MotionTransform/expose.isShow.en.mdx

@@ -1,5 +0,0 @@
-### `isShow`
-
-Computed state indicating whether the component is displayed or being prepared for display (including animation state).
-
-**Type:** `ComputedRef<boolean>`

package/src/media/mdx/MotionTransform/expose.isShow.ru.mdx

@@ -1,5 +0,0 @@
-### `isShow`
-
-Вычисляемое состояние, указывающее отображается ли компонент или готовится к отображению (включая состояние анимации).
-
-**Тип:** `ComputedRef<boolean>`

package/src/media/mdx/MotionTransform/expose.motionTransformElement.en.mdx

@@ -1,13 +0,0 @@
-### `motionTransformElement`
-
-Reactive reference to the nested MotionTransform component's expose API, providing programmatic access to control methods.
-
-**Type:** `Ref<ConstrBind<MotionTransformExpose> | undefined>`
-
-**Methods via motionTransformElement.value:**
-- `open` — reactive open state
-- `isShow` — computed visibility state
-- `setOpen(open: boolean)` — set open state
-- `toOpen()` — open component
-- `toClose()` — close component
-- `toggle()` — toggle state

package/src/media/mdx/MotionTransform/expose.motionTransformElement.ru.mdx

@@ -1,14 +0,0 @@
-### `motionTransformElement`
-
-Реактивная ссылка на expose API вложенного компонента MotionTransform, предоставляющая программный доступ к методам управления.
-
-**Тип:** `Ref<ConstrBind<MotionTransformExpose> | undefined>`
-
-**Методы через motionTransformElement.value:**
-- `open` — реактивное состояние открытия
-- `isShow` — вычисляемое состояние видимости
-- `setOpen(open: boolean)` — установить состояние открытия
-- `toOpen()` — открыть компонент
-- `toClose()` — закрыть компонент
-- `toggle()` — переключить состояние
-

package/src/media/mdx/MotionTransform/ignore.en.mdx

@@ -1,32 +0,0 @@
-## Ignore zones
-
-Properties that exclude elements from outside-click checks and auto-close logic.
-
-**Properties:**
-
-- `ignore` — DOM element reference or CSS selector to exclude from outside-click detection
-- `ignoreSelector` — CSS selector to exclude multiple elements simultaneously
-
-Both properties work together during outside-click evaluation. `ignore` is more precise and faster for single elements, can reference a specific DOM element directly. `ignoreSelector` is more flexible, can match multiple elements with a single selector, better suited for dynamic content. Use for trigger buttons, helper controls, and nested interactive areas.
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const triggerButton = ref()
-</script>
-
-<template>
-  <!-- Ignoring specific element -->
-  <MotionTransform :ignore="triggerButton" />
-
-  <!-- Ignoring by selector -->
-  <MotionTransform ignoreSelector=".trigger-button" />
-
-  <!-- Combining both properties -->
-  <MotionTransform
-    :ignore="triggerButton"
-    ignoreSelector=".helper-controls"
-  />
-</template>
-```

package/src/media/mdx/MotionTransform/ignore.ru.mdx

@@ -1,32 +0,0 @@
-## Зоны игнорирования
-
-Свойства для исключения элементов из проверок клика снаружи и логики автозакрытия.
-
-**Свойства:**
-
-- `ignore` — ссылка на DOM-элемент или CSS-селектор для исключения из обнаружения внешних кликов
-- `ignoreSelector` — CSS-селектор для исключения нескольких элементов одновременно
-
-Оба свойства работают вместе при оценке внешних кликов. `ignore` более точный и быстрее для одиночных элементов, может ссылаться на конкретный DOM-элемент напрямую. `ignoreSelector` более гибкий, может соответствовать нескольким элементам одним селектором, лучше подходит для динамического контента. Используйте для кнопок-триггеров, вспомогательных элементов и вложенных интерактивных областей.
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const triggerButton = ref()
-</script>
-
-<template>
-  <!-- Игнорирование конкретного элемента -->
-  <MotionTransform :ignore="triggerButton" />
-
-  <!-- Игнорирование по селектору -->
-  <MotionTransform ignoreSelector=".trigger-button" />
-
-  <!-- Комбинация обоих свойств -->
-  <MotionTransform
-    :ignore="triggerButton"
-    ignoreSelector=".helper-controls"
-  />
-</template>
-```

package/src/media/mdx/MotionTransform/motionTransform.en.mdx

@@ -1,51 +0,0 @@
-Low-level utility for managing element transforms, state transitions, and interaction flows in components with window-like behavior.
-
-MotionTransform centralizes management of open/show/teleport states, measures element sizes, updates CSS variables, and coordinates events to create smooth and predictable animations. Provides unified API for component visibility control, click handling, and automatic closing with support for ignore zones.
-
-**Key Features:**
-
-- Centralized state management (open, show, teleport)
-- Click event and auto-close coordination
-- Size measurement and CSS variable updates
-- DOM helpers for working with refs, portals, and classes
-- Programmatic control through imperative methods
-- Configurable event ignore zones
-- Optimized DOM manipulation
-
-**Typical Use Cases:**
-
-- Base utility for Window, Menu, Dialog components
-- Managing open/close animations
-- State coordination in popup elements
-- Component library development with window-like behavior
-
-```html
-<script setup>
-import { ref } from 'vue'
-import { MotionTransform } from '@dxtmisha/constructor'
-
-const element = ref()
-const elementContext = ref()
-
-const motion = new MotionTransform(
-  { open: false, autoClose: true },
-  // ...other params
-)
-
-// Programmatic control
-motion.go.toOpen()
-motion.go.toClose()
-
-// State access
-const isOpen = motion.state.isOpen
-const isShow = motion.state.isShow
-</script>
-
-<template>
-  <div ref="element">
-    <!-- Content with managed transform -->
-  </div>
-</template>
-```
-
-> This is a low-level utility for component library development, not intended for direct use in applications.

package/src/media/mdx/MotionTransform/motionTransform.ru.mdx

@@ -1,51 +0,0 @@
-Низкоуровневая утилита для управления трансформациями элементов, переходами состояний и потоками взаимодействия в компонентах с оконным поведением.
-
-MotionTransform централизует управление состояниями открытия/отображения/телепортации, измеряет размеры элементов, обновляет CSS-переменные и координирует события для создания плавных и предсказуемых анимаций. Предоставляет единый API для работы с видимостью компонентов, обработки кликов и автоматического закрытия с поддержкой игнорируемых зон.
-
-**Основные возможности:**
-
-- Централизованное управление состояниями (open, show, teleport)
-- Координация событий кликов и автозакрытия
-- Измерение размеров и обновление CSS-переменных
-- DOM-хелперы для работы с refs, порталами и классами
-- Программное управление через императивные методы
-- Настраиваемые зоны игнорирования событий
-- Оптимизированная работа с DOM
-
-**Типичные сценарии использования:**
-
-- Базовая утилита для компонентов Window, Menu, Dialog
-- Управление анимациями открытия/закрытия
-- Координация состояний в всплывающих элементах
-- Разработка библиотек компонентов с оконным поведением
-
-```html
-<script setup>
-import { ref } from 'vue'
-import { MotionTransform } from '@dxtmisha/constructor'
-
-const element = ref()
-const elementContext = ref()
-
-const motion = new MotionTransform(
-  { open: false, autoClose: true },
-  // ...other params
-)
-
-// Программное управление
-motion.go.toOpen()
-motion.go.toClose()
-
-// Доступ к состояниям
-const isOpen = motion.state.isOpen
-const isShow = motion.state.isShow
-</script>
-
-<template>
-  <div ref="element">
-    <!-- Контент с управляемой трансформацией -->
-  </div>
-</template>
-```
-
-> Это низкоуровневая утилита для разработки библиотек компонентов, не предназначенная для прямого использования в приложениях.

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

@@ -1,92 +0,0 @@
-```html
-<script setup>
-import { ref } from 'vue'
-
-const isOpen = ref(false)
-</script>
-
-<template>
-  <MotionTransform v-model:open="isOpen">
-    <template #head="{ isOpen, classes }">
-      <div :class="classes.click">
-        <h3>{{ isOpen ? '▲' : '▼' }} Header</h3>
-      </div>
-    </template>
-
-    <template #body="{ isShow, classes }">
-      <div v-if="isShow" :class="classes.open">
-        <p>Main content</p>
-        <button :class="classes.close">Close</button>
-      </div>
-    </template>
-  </MotionTransform>
-</template>
-````
-
-### `head`
-
-Slot for placing the header area that serves as a trigger for opening/closing the component.
-
-**Parameters:**
-- `props: MotionTransformControlItem` — object with component control data
-
-### `body`
-
-Slot for placing the main content area that appears when the component is opened.
-
-**Parameters:**
-- `props: MotionTransformControlItem` — object with component control data
-
-## MotionTransformControlItem
-
-`MotionTransformControlItem` — object passed to all MotionTransform component slots, containing state control data.
-
-### Type structure
-
-```typescript
-type MotionTransformControlItem = {
-  /** Component open state */
-  isOpen: ComputedRef<boolean>
-
-  /** Visible or preparing to be shown */
-  isShow: ComputedRef<boolean>
-
-  /** Helper CSS classes for state styling */
-  classes: MotionTransformClassList
-}
-```
-
-### Properties
-
-- **`isOpen`** — computed property indicating whether the component is open
-- **`isShow`** — computed property, `true` when the component is visible or in the preparation/transition phase
-- **`classes`** — object with CSS classes to control states and behavior
-
-### MotionTransformClassList
-
-Available CSS classes for styling and controlling behavior:
-
-```typescript
-type MotionTransformClassList = {
-  /** Component visibility class */
-  show: string
-
-  /** Open state class */
-  open: string
-
-  /** Window mode class */
-  window: string
-
-  /** Click class */
-  click: string
-
-  /** Behavior disabling class */
-  none: string
-
-  /** Global disabling class */
-  noneGlobal: string
-
-  /** Close class */
-  close: string
-}
-```

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

@@ -1,92 +0,0 @@
-```html
-<script setup>
-import { ref } from 'vue'
-
-const isOpen = ref(false)
-</script>
-
-<template>
-  <MotionTransform v-model:open="isOpen">
-    <template #head="{ isOpen, classes }">
-      <div :class="classes.click">
-        <h3>{{ isOpen ? '▲' : '▼' }} Заголовок</h3>
-      </div>
-    </template>
-
-    <template #body="{ isShow, classes }">
-      <div v-if="isShow" :class="classes.open">
-        <p>Основное содержимое</p>
-        <button :class="classes.close">Закрыть</button>
-      </div>
-    </template>
-  </MotionTransform>
-</template>
-````
-
-### `head`
-
-Слот для размещения области заголовка, которая служит триггером для открытия/закрытия компонента.
-
-**Параметры:**
-- `props: MotionTransformControlItem` — объект с данными управления компонентом
-
-### `body`
-
-Слот для размещения основной области содержимого, которая появляется при открытии компонента.
-
-**Параметры:**
-- `props: MotionTransformControlItem` — объект с данными управления компонентом
-
-## MotionTransformControlItem
-
-`MotionTransformControlItem` — объект, передаваемый во все слоты компонента MotionTransform, содержащий данные для управления состоянием.
-
-### Структура типа
-
-```typescript
-type MotionTransformControlItem = {
-  /** Состояние открытия компонента */
-  isOpen: ComputedRef<boolean>
-
-  /** Видимость или подготовка к показу */
-  isShow: ComputedRef<boolean>
-
-  /** Набор вспомогательных CSS-классов для стилизации состояний */
-  classes: MotionTransformClassList
-}
-```
-
-### Свойства
-
-- **`isOpen`** — вычисляемое свойство, указывающее открыт ли компонент
-- **`isShow`** — вычисляемое свойство, `true` если компонент видим или находится в подготовке к показу (анимация)
-- **`classes`** — объект с CSS-классами для управления состояниями и поведением
-
-### MotionTransformClassList
-
-Список доступных CSS-классов для стилизации и управления поведением:
-
-```typescript
-type MotionTransformClassList = {
-  /** Класс видимости компонента */
-  show: string
-
-  /** Класс открытого состояния */
-  open: string
-
-  /** Класс режима окна */
-  window: string
-
-  /** Класс клика */
-  click: string
-
-  /** Класс отключения поведения */
-  none: string
-
-  /** Класс глобального отключения */
-  noneGlobal: string
-
-  /** Класс закрытия */
-  close: string
-}
-```

package/src/media/mdx/MotionTransform/v-model.en.mdx

@@ -1,28 +0,0 @@
-## State Management via v-model
-
-Two-way binding of component open state via `v-model:open`.
-
-**Parameters:**
-- `open: boolean` — component open state
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const isOpen = ref(false)
-</script>
-
-<template>
-  <button @click="isOpen = true">Open</button>
-
-  <MotionTransform v-model:open="isOpen">
-    <template #head>
-      <div>Header</div>
-    </template>
-    <template #body>
-      <p>Component content</p>
-      <button @click="isOpen = false">Close</button>
-    </template>
-  </MotionTransform>
-</template>
-```

package/src/media/mdx/MotionTransform/v-model.ru.mdx

@@ -1,28 +0,0 @@
-## Управление состоянием через v-model
-
-Двусторонняя привязка состояния открытия компонента через `v-model:open`.
-
-**Параметры:**
-- `open: boolean` — состояние открытия компонента
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const isOpen = ref(false)
-</script>
-
-<template>
-  <button @click="isOpen = true">Открыть</button>
-
-  <MotionTransform v-model:open="isOpen">
-    <template #head>
-      <div>Заголовок</div>
-    </template>
-    <template #body>
-      <p>Содержимое компонента</p>
-      <button @click="isOpen = false">Закрыть</button>
-    </template>
-  </MotionTransform>
-</template>
-```

package/src/media/mdx/MotionTransform/wikiMdxMotionTransform.ts

@@ -1,67 +0,0 @@
-import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
-
-import animationHeadPositionEn from './animationHeadPosition.en.mdx'
-import animationHeadPositionRu from './animationHeadPosition.ru.mdx'
-import classesEn from './classes.en.mdx'
-import classesRu from './classes.ru.mdx'
-import eventsEn from './events.en.mdx'
-import eventsRu from './events.ru.mdx'
-import exposeIsShowEn from './expose.isShow.en.mdx'
-import exposeIsShowRu from './expose.isShow.ru.mdx'
-import exposeMotionTransformElementEn from './expose.motionTransformElement.en.mdx'
-import exposeMotionTransformElementRu from './expose.motionTransformElement.ru.mdx'
-import ignoreEn from './ignore.en.mdx'
-import ignoreRu from './ignore.ru.mdx'
-import motionTransformEn from './motionTransform.en.mdx'
-import motionTransformRu from './motionTransform.ru.mdx'
-import slotsEn from './slots.en.mdx'
-import slotsRu from './slots.ru.mdx'
-import vModelEn from './v-model.en.mdx'
-import vModelRu from './v-model.ru.mdx'
-
-/**
- * MDX files for MotionTransform component
- *
- * MDX файлы для компонента MotionTransform
- */
-export const wikiMdxMotionTransform: StorybookComponentsMdxItem = {
-  name: 'MotionTransform',
-  descriptions: {
-    'animationHeadPosition': {
-      en: animationHeadPositionEn,
-      ru: animationHeadPositionRu
-    },
-    'classes': {
-      en: classesEn,
-      ru: classesRu
-    },
-    'events': {
-      en: eventsEn,
-      ru: eventsRu
-    },
-    'expose.isShow': {
-      en: exposeIsShowEn,
-      ru: exposeIsShowRu
-    },
-    'expose.motionTransformElement': {
-      en: exposeMotionTransformElementEn,
-      ru: exposeMotionTransformElementRu
-    },
-    'ignore': {
-      en: ignoreEn,
-      ru: ignoreRu
-    },
-    'motionTransform': {
-      en: motionTransformEn,
-      ru: motionTransformRu
-    },
-    'slots': {
-      en: slotsEn,
-      ru: slotsRu
-    },
-    'v-model': {
-      en: vModelEn,
-      ru: vModelRu
-    }
-  }
-}

package/src/media/mdx/Page/page.en.mdx

@@ -1,38 +0,0 @@
-## Description
-
-A top-level semantic container component designed to wrap the main content of a page. It uses the `<main>` tag by default.
-
-Page provides capabilities for displaying main headlines, labels, descriptions, captions, and icons. The main purpose of the component is to designate the unique part of the document's content, which is critical for accessibility and SEO. The headline is rendered as `<h1>` by default.
-
-**Key Features:**
-
-- Semantic wrapper for main content (`<main>` tag)
-- Support for main headlines (default `<h1>`), labels, descriptions, and captions
-- Support for icons
-- Customizable layout and spacing
-- Full support for slots for content customization
-
-**Typical Use Cases:**
-
-- Wrapper for unique page content
-- Main application screen
-- Article or documentation page
-- Root element for routed components (views)
-
-```html
-<script setup>
-import { ref } from 'vue'
-</script>
-
-<template>
-  <Page
-    headline="Main Page Title"
-    label="Category"
-    description="Brief description of the page content"
-  >
-    <p>Unique page content...</p>
-  </Page>
-</template>
-```
-
-> Page should be used once per page (or per active view) and should not include repeated navigation elements.

package/src/media/mdx/Page/page.ru.mdx

@@ -1,38 +0,0 @@
-## Описание
-
-Семантический компонент-контейнер верхнего уровня, предназначенный для обертки основного содержимого страницы. По умолчанию использует тег `<main>`.
-
-Page предоставляет возможности для отображения главных заголовков, меток, описаний, подписей и иконок. Основное назначение компонента — обозначение уникальной части содержимого документа, что критически важно для доступности (accessibility) и SEO. Заголовок по умолчанию рендерится как `<h1>`.
-
-**Основные возможности:**
-
-- Семантическая обертка основного контента (тег `<main>`)
-- Поддержка главных заголовков (по умолчанию `<h1>`), меток, описаний и подписей
-- Поддержка иконок
-- Настраиваемый макет и отступы
-- Полная поддержка слотов для кастомизации контента
-
-**Типичные сценарии использования:**
-
-- Обертка для уникального контента страницы
-- Главный экран приложения
-- Страница статьи или документации
-- Корневой элемент для маршрутизируемых компонентов (views)
-
-```html
-<script setup>
-import { ref } from 'vue'
-</script>
-
-<template>
-  <Page
-    headline="Главный заголовок страницы"
-    label="Категория"
-    description="Краткое описание содержимого страницы"
-  >
-    <p>Уникальный контент страницы...</p>
-  </Page>
-</template>
-```
-
-> Page должен использоваться один раз на странице (или в активном view) и не должен включать повторяющиеся элементы навигации.

package/src/media/mdx/Page/wikiMdxPage.ts

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

package/src/media/mdx/Progress/circular.en.mdx

@@ -1,24 +0,0 @@
-## Circular Progress and Related Parameters
-
-The `circular` property enables circular progress indicator display mode as a ring indicator. For optimal control over appearance and behavior, it is recommended to use it together with additional properties.
-
-**Properties:**
-
-- `circular` — enables circular progress display mode
-- `dense` — removes internal padding for compact placement in small elements
-
-The `circular` property activates a ring progress indicator that fills around the circumference proportionally to the current value. `dense` removes padding, making the indicator more compact for placement in limited space.
-
-```html
-<!-- Basic circular progress -->
-<Progress circular />
-
-<!-- Compact circular progress -->
-<Progress circular dense />
-
-<!-- With specific value -->
-<Progress circular :value="75" />
-
-<!-- Compact with value -->
-<Progress circular dense :value="50" />
-```

package/src/media/mdx/Progress/circular.ru.mdx

@@ -1,24 +0,0 @@
-## Круглый прогресс и связанные параметры
-
-Свойство `circular` включает режим круглого отображения индикатора прогресса в виде кольцевого индикатора. Для оптимального контроля над внешним видом и поведением рекомендуется использовать его совместно с дополнительными свойствами.
-
-**Свойства:**
-
-- `circular` — включает режим круглого отображения прогресса
-- `dense` — убирает внутренние отступы для компактного размещения в маленьких элементах
-
-Свойство `circular` активирует кольцевой индикатор прогресса, который заполняется по окружности пропорционально текущему значению. `dense` убирает padding, делая индикатор более компактным для размещения в ограниченном пространстве.
-
-```html
-<!-- Базовый круглый прогресс -->
-<Progress circular />
-
-<!-- Компактный круглый прогресс -->
-<Progress circular dense />
-
-<!-- С определенным значением -->
-<Progress circular :value="75" />
-
-<!-- Компактный со значением -->
-<Progress circular dense :value="50" />
-```