@dxtmisha/wiki 0.24.2 → 0.25.1

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

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

@@ -0,0 +1,92 @@
+```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,19 +1,28 @@
-## Two-way binding (v-model)
+## State Management via v-model
 
-The MotionTransform component supports two-way binding for the `open` state using the `v-model:open` directive.
+Two-way binding of component open state via `v-model:open`.
 
-### Usage
-
-This allows you to synchronize the component's visibility with a local data property in your parent component.
+**Parameters:**
+- `open: boolean` — component open state
 
 ```html
-<MotionTransform v-model:open="isOpen"/>
+<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>
 ```
-
-### How it works
-
-The `v-model:open` is a shorthand for binding the `open` prop and listening to the `update:open` event.
-
-- **`:open="isOpen"`**: The component's visibility is controlled by the `isOpen` ref.
-- **`@update:open="isOpen = $event"`**: When the component's internal state changes (e.g., by clicking the head), it emits an event to update the parent's `isOpen` ref.
-

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

@@ -1,19 +1,28 @@
-## Двусторонняя привязка (v-model)
+## Управление состоянием через v-model
 
-Компонент MotionTransform поддерживает двустороннюю привязку для состояния `open` с использованием директивы `v-model:open`.
+Двусторонняя привязка состояния открытия компонента через `v-model:open`.
 
-### Использование
-
-Это позволяет синхронизировать видимость компонента с локальным свойством данных в вашем родительском компоненте.
+**Параметры:**
+- `open: boolean` — состояние открытия компонента
 
 ```html
-<MotionTransform v-model:open="isOpen"/>
+<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>
 ```
-
-### Как это работает
-
-`v-model:open` является сокращением для привязки свойства `open` и прослушивания события `update:open`.
-
-- **`:open="isOpen"`**: Видимость компонента управляется `isOpen` ref.
-- **`@update:open="isOpen = $event"`**: Когда внутреннее состояние компонента изменяется (например, при клике на заголовок), он генерирует событие для обновления `isOpen` ref родительского компонента.
-

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

@@ -8,16 +8,14 @@ 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 slotBodyEn from './slot.body.en.mdx'
-import slotBodyRu from './slot.body.ru.mdx'
-import slotHeadEn from './slot.head.en.mdx'
-import slotHeadRu from './slot.head.ru.mdx'
-import slotParamsEn from './slot.params.en.mdx'
-import slotParamsRu from './slot.params.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'
 
@@ -45,6 +43,10 @@ export const wikiMdxMotionTransform: StorybookComponentsMdxItem = {
       en: exposeIsShowEn,
       ru: exposeIsShowRu
     },
+    'expose.motionTransformElement': {
+      en: exposeMotionTransformElementEn,
+      ru: exposeMotionTransformElementRu
+    },
     'ignore': {
       en: ignoreEn,
       ru: ignoreRu
@@ -53,17 +55,9 @@ export const wikiMdxMotionTransform: StorybookComponentsMdxItem = {
       en: motionTransformEn,
       ru: motionTransformRu
     },
-    'slot.body': {
-      en: slotBodyEn,
-      ru: slotBodyRu
-    },
-    'slot.head': {
-      en: slotHeadEn,
-      ru: slotHeadRu
-    },
-    'slot.params': {
-      en: slotParamsEn,
-      ru: slotParamsRu
+    'slots': {
+      en: slotsEn,
+      ru: slotsRu
     },
     'v-model': {
       en: vModelEn,

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

@@ -1,26 +1,13 @@
 ## Circular Progress and Related Parameters
 
-The `circular` property enables circular progress indicator display mode. For optimal control over the appearance and behavior of circular progress, it is recommended to use it together with additional styling properties.
+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
+**Properties:**
 
-- **circular** — Enables circular progress display mode as a ring indicator.
-- **dense** — Removes internal padding, allowing the indicator to be used in small elements where space is limited.
+- `circular` — enables circular progress display mode
+- `dense` — removes internal padding for compact placement in small elements
 
-### Description
-
-- 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.
-- Both properties work together to create a flexible and adaptive circular progress indicator.
-
-### Recommendations
-
-- Use `circular` to display progress in compact interfaces or when a central focus is needed.
-- Apply `dense` in small elements where space-saving is important and padding needs to be removed.
-- Combine properties depending on available space and design requirements.
-- Circular progress is particularly effective for displaying process completion.
-
-### Usage Example
+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 -->
@@ -29,9 +16,9 @@ The `circular` property enables circular progress indicator display mode. For op
 <!-- Compact circular progress -->
 <Progress circular dense />
 
-<!-- Circular progress with specific value -->
+<!-- With specific value -->
 <Progress circular :value="75" />
 
-<!-- Compact circular progress with value -->
+<!-- Compact with value -->
 <Progress circular dense :value="50" />
 ```

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

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

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

@@ -2,28 +2,21 @@
 
 The `delay` and `delayHide` properties control timing parameters for showing and hiding the progress indicator. These properties allow creating a smoother user experience by avoiding flickers during fast operations.
 
-### Properties
+**Properties:**
 
-- **delay** — Delay before showing the progress indicator in milliseconds. Defaults to 360 ms.
-- **delayHide** — Delay before hiding the progress indicator in milliseconds. Defaults to 200 ms.
+- `delay` — delay before showing the indicator in milliseconds, defaults to `360`
+- `delayHide` — delay before hiding the indicator in milliseconds, defaults to `200`
 
-### Recommendations
-
-- Use the standard `delay="360"` value for most cases - it's been proven in practice.
-- Increase `delay` for rapid operations where the indicator might interfere with perception.
-- Decrease `delay` for long operations where users need immediate feedback.
-- Adjust `delayHide` based on context—for critical operations you can increase the value.
-
-### Usage Example
+The standard `delay="360"` value is proven in practice and suitable for most cases. Increase `delay` for rapid operations where the indicator might interfere with perception. Decrease for long operations where immediate feedback is important.
 
 ```html
 <!-- Standard delays -->
 <Progress delay="360" delayHide="200" />
 
-<!-- Fast appearance for long operations -->
+<!-- Fast appearance -->
 <Progress delay="100" delayHide="200" />
 
-<!-- Slow appearance for fast operations -->
+<!-- Slow appearance -->
 <Progress delay="800" delayHide="300" />
 
 <!-- No delays -->

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

@@ -2,28 +2,21 @@
 
 Свойства `delay` и `delayHide` контролируют временные параметры появления и скрытия индикатора прогресса. Эти свойства позволяют создавать более плавный пользовательский опыт, избегая мерцаний при быстрых операциях.
 
-### Свойства
+**Свойства:**
 
-- **delay** — Задержка перед показом индикатора прогресса в миллисекундах. По умолчанию 360 мс.
-- **delayHide** — Задержка перед скрытием индикатора прогресса в миллисекундах. По умолчанию 200 мс.
+- `delay` — задержка перед показом индикатора в миллисекундах, по умолчанию `360`
+- `delayHide` — задержка перед скрытием индикатора в миллисекундах, по умолчанию `200`
 
-### Рекомендации
-
-- Используйте стандартное значение `delay="360"` для большинства случаев - оно проверено на практике.
-- Увеличивайте `delay` для очень быстрых операций, где индикатор может помешать восприятию.
-- Уменьшайте `delay` для долгих операций, где пользователю важно видеть немедленную обратную связь.
-- Настраивайте `delayHide` в зависимости от контекста - для критичных операций можно увеличить значение.
-
-### Пример использования
+Стандартное значение `delay="360"` проверено на практике и подходит для большинства случаев. Увеличивайте `delay` для очень быстрых операций, где индикатор может помешать восприятию. Уменьшайте для долгих операций, где важна немедленная обратная связь.
 
 ```html
 <!-- Стандартные задержки -->
 <Progress delay="360" delayHide="200" />
 
-<!-- Быстрое появление для долгих операций -->
+<!-- Быстрое появление -->
 <Progress delay="100" delayHide="200" />
 
-<!-- Медленное появление для быстрых операций -->
+<!-- Медленное появление -->
 <Progress delay="800" delayHide="300" />
 
 <!-- Без задержек -->

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

@@ -1,39 +1,25 @@
 ## Linear Progress and Related Parameters
 
-The `linear` property enables linear progress indicator display mode. For complete control over the behavior and appearance of linear progress, it is recommended to use it together with additional positioning and styling properties.
+The `linear` property enables linear progress indicator display mode as a horizontal bar. For complete control over behavior and appearance, it is recommended to use it together with additional properties.
 
-### Properties
+**Properties:**
 
-- **linear** — Enables linear progress display mode as a horizontal bar.
-- **position** — Defines the position of the linear indicator (`top`, `bottom`, `static`). Defaults to `top`.
-- **point** — Adds a point at the end of the progress indicator to emphasize the current position.
+- `linear` — enables linear progress display mode
+- `position` — defines the indicator position (`'top'`, `'bottom'`, `'static'`), defaults to `'top'`
+- `point` — adds a point at the end of the indicator to emphasize the current position
 
-### Description
-
-- The `linear` property activates a horizontal progress bar that fills proportionally to the current value.
-- `position` controls the indicator placement: `top` places it at the top of the container, `bottom` at the bottom, `static` in the normal document flows.
-- `point` adds a visual marker at the end of the filled portion, making the current position more noticeable.
-- All properties work together to create a flexible and informative progress indicator.
-
-### Recommendations
-
-- Use `position="top"` or `position="bottom"` to overlay progress on top of content.
-- Apply `position="static"` when the indicator should take space in the document flow.
-- Add `point` for better visualization of current progress, especially with small values.
-- Combine properties depending on usage context and interface design.
-
-### Usage Example
+The `linear` property activates a horizontal progress bar that fills proportionally to the current value. `position` controls the placement: `'top'` places it at the top of the container, `'bottom'` at the bottom, `'static'` in the normal document flow. `point` adds a visual marker at the end of the filled portion.
 
 ```html
 <!-- Basic linear progress -->
 <Progress linear />
 
-<!-- Linear progress with bottom positioning -->
+<!-- With bottom positioning -->
 <Progress linear position="bottom" />
 
-<!-- Linear progress with point in static position -->
+<!-- With point in static position -->
 <Progress linear position="static" point />
 
-<!-- Full configuration with specific value -->
+<!-- With specific value -->
 <Progress linear position="top" point :value="65" />
 ```

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

@@ -1,39 +1,25 @@
 ## Линейный прогресс и связанные параметры
 
-Свойство `linear` включает режим линейного отображения индикатора прогресса. Для полного контроля над поведением и внешним видом линейного прогресса рекомендуется использовать его совместно с дополнительными свойствами позиционирования и стилизации.
+Свойство `linear` включает режим линейного отображения индикатора прогресса в виде горизонтальной полосы. Для полного контроля над поведением и внешним видом рекомендуется использовать его совместно с дополнительными свойствами.
 
-### Свойства
+**Свойства:**
 
-- **linear** — Включает режим линейного отображения прогресса в виде горизонтальной полосы.
-- **position** — Определяет позицию линейного индикатора (`top`, `bottom`, `static`). По умолчанию `top`.
-- **point** — Добавляет точку в конце индикатора прогресса для акцентирования текущего положения.
+- `linear` — включает режим линейного отображения прогресса
+- `position` — определяет позицию индикатора (`'top'`, `'bottom'`, `'static'`), по умолчанию `'top'`
+- `point` — добавляет точку в конце индикатора для акцентирования текущего положения
 
-### Описание
-
-- Свойство `linear` активирует горизонтальную полосу прогресса, которая заполняется пропорционально текущему значению.
-- `position` управляет расположением индикатора: `top` размещает его в верхней части контейнера, `bottom` — в нижней, `static` — в обычном потоке документа.
-- `point` добавляет визуальный маркер на конце заполненной части, делая текущую позицию более заметной.
-- Все свойства работают совместно для создания гибкого и информативного индикатора прогресса.
-
-### Рекомендации
-
-- Используйте `position="top"` или `position="bottom"` для наложения прогресса поверх контента.
-- Применяйте `position="static"` когда индикатор должен занимать место в потоке документа.
-- Добавляйте `point` для лучшей визуализации текущего прогресса, особенно при небольших значениях.
-- Комбинируйте свойства в зависимости от контекста использования и дизайна интерфейса.
-
-### Пример использования
+Свойство `linear` активирует горизонтальную полосу прогресса, которая заполняется пропорционально текущему значению. `position` управляет расположением: `'top'` размещает индикатор в верхней части контейнера, `'bottom'` — в нижней, `'static'` — в обычном потоке документа. `point` добавляет визуальный маркер на конце заполненной части.
 
 ```html
 <!-- Базовый линейный прогресс -->
 <Progress linear />
 
-<!-- Линейный прогресс с позиционированием снизу -->
+<!-- С позиционированием снизу -->
 <Progress linear position="bottom" />
 
-<!-- Линейный прогресс с точкой в статичной позиции -->
+<!-- С точкой в статичной позиции -->
 <Progress linear position="static" point />
 
-<!-- Полная настройка с определенным значением -->
+<!-- С определенным значением -->
 <Progress linear position="top" point :value="65" />
 ```