@dxtmisha/wiki 0.39.4 → 0.39.5

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

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

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

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

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

@@ -0,0 +1,24 @@
+## Progress Delay Management
+
+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:**
+
+- `delay` — delay before showing the indicator in milliseconds, defaults to `360`
+- `delayHide` — delay before hiding the indicator in milliseconds, defaults to `200`
+
+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 -->
+<Progress delay="100" delayHide="200" />
+
+<!-- Slow appearance -->
+<Progress delay="800" delayHide="300" />
+
+<!-- No delays -->
+<Progress delay="0" delayHide="0" />
+```

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

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

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

@@ -0,0 +1,25 @@
+## Linear Progress and Related Parameters
+
+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:**
+
+- `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
+
+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 />
+
+<!-- With bottom positioning -->
+<Progress linear position="bottom" />
+
+<!-- With point in static position -->
+<Progress linear position="static" point />
+
+<!-- With specific value -->
+<Progress linear position="top" point :value="65" />
+```

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

@@ -0,0 +1,25 @@
+## Линейный прогресс и связанные параметры
+
+Свойство `linear` включает режим линейного отображения индикатора прогресса в виде горизонтальной полосы. Для полного контроля над поведением и внешним видом рекомендуется использовать его совместно с дополнительными свойствами.
+
+**Свойства:**
+
+- `linear` — включает режим линейного отображения прогресса
+- `position` — определяет позицию индикатора (`'top'`, `'bottom'`, `'static'`), по умолчанию `'top'`
+- `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" />
+```

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

@@ -0,0 +1,71 @@
+Component for visual representation of operation progress, data loading, and long-running processes.
+
+Progress provides flexible options for indicating completion status: linear and circular progress bars, minimalist point indicators. The component automatically manages visibility with customizable appearance and hiding delays, supports both determinate progress values and indeterminate states for operations with unknown completion time.
+
+**Key Features:**
+
+- Linear and circular progress indicators
+- Point variants for minimal display
+- Determinate mode with specific values (0-100%)
+- Indeterminate mode for unknown execution time
+- Flexible positioning (top, bottom, static)
+- Customizable appearance and hiding delays
+- Compact and inverted display modes
+- Automatic visibility management
+
+**Typical Use Cases:**
+
+- Indicating data loading from server
+- Displaying file upload progress
+- Visualizing multi-step operation execution
+- Global page loading indicators
+- Progress bars in forms and wizards
+- Background process indication
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const progress = ref(0)
+const loading = ref(false)
+
+const startLoading = () => {
+  loading.value = true
+  progress.value = 0
+
+  const interval = setInterval(() => {
+    progress.value += 10
+    if (progress.value >= 100) {
+      clearInterval(interval)
+      loading.value = false
+    }
+  }, 500)
+}
+</script>
+
+<template>
+  <button @click="startLoading">Start Loading</button>
+
+  <!-- Linear indicator with determinate value -->
+  <Progress
+    :visible="loading"
+    :value="progress"
+    linear
+    position="top"
+  />
+
+  <!-- Circular indicator -->
+  <Progress
+    :visible="loading"
+    :value="progress"
+    circular
+  />
+
+  <!-- Indeterminate indicator -->
+  <Progress
+    :visible="loading"
+    linear
+    indeterminate="type1"
+  />
+</template>
+```

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

@@ -0,0 +1,71 @@
+Компонент для визуального отображения прогресса выполнения операций, загрузки данных и длительных процессов.
+
+Progress предоставляет гибкие варианты индикации состояния выполнения: линейные и круговые прогресс-бары, минималистичные точечные индикаторы. Компонент автоматически управляет видимостью с настраиваемыми задержками появления и скрытия, поддерживает как определенные значения прогресса, так и неопределенные состояния для операций с неизвестным временем завершения.
+
+**Основные возможности:**
+
+- Линейные и круговые индикаторы прогресса
+- Точечные варианты для минимального отображения
+- Детерминированный режим с конкретными значениями (0-100%)
+- Индетерминированный режим для неизвестного времени выполнения
+- Гибкое позиционирование (top, bottom, static)
+- Настройка задержек появления и скрытия
+- Компактный и инвертированный режимы отображения
+- Автоматическое управление видимостью
+
+**Типичные сценарии использования:**
+
+- Индикация загрузки данных с сервера
+- Отображение прогресса загрузки файлов
+- Визуализация выполнения многоэтапных операций
+- Глобальные индикаторы загрузки страницы
+- Прогресс-бары в формах и мастерах
+- Индикация фоновых процессов
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const progress = ref(0)
+const loading = ref(false)
+
+const startLoading = () => {
+  loading.value = true
+  progress.value = 0
+
+  const interval = setInterval(() => {
+    progress.value += 10
+    if (progress.value >= 100) {
+      clearInterval(interval)
+      loading.value = false
+    }
+  }, 500)
+}
+</script>
+
+<template>
+  <button @click="startLoading">Начать загрузку</button>
+
+  <!-- Линейный индикатор с определенным значением -->
+  <Progress
+    :visible="loading"
+    :value="progress"
+    linear
+    position="top"
+  />
+
+  <!-- Круговой индикатор -->
+  <Progress
+    :visible="loading"
+    :value="progress"
+    circular
+  />
+
+  <!-- Неопределенный индикатор -->
+  <Progress
+    :visible="loading"
+    linear
+    indeterminate="type1"
+  />
+</template>
+```

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

@@ -0,0 +1,24 @@
+## Progress Value Management
+
+The `value` and `max` properties work together to determine the state of process execution. They establish the current value and upper limit for calculating the completion percentage of an operation.
+
+**Properties:**
+
+- `value` — current progress value (what portion of the process has been completed)
+- `max` — maximum progress value, defaults to `100`
+
+Completion percentage is calculated automatically: `(value / max) * 100`. The `value` is automatically constrained to the range from 0 to `max`. When `max` changes, the percentage display is recalculated proportionally. Use `max="100"` for percentage display or set it equal to the actual number of steps in the process.
+
+```html
+<!-- Standard percentage scale -->
+<Progress :value="75" :max="100" />
+
+<!-- File loading progress -->
+<Progress :value="loadedFiles" :max="totalFiles" />
+
+<!-- Dynamic updates -->
+<Progress :value="currentStep" :max="totalSteps" />
+
+<!-- Custom scale -->
+<Progress :value="completedTasks" :max="1000" />
+```

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

@@ -0,0 +1,24 @@
+## Управление значениями прогресса
+
+Свойства `value` и `max` работают в связке для определения состояния выполнения процесса. Они устанавливают текущее значение и верхний предел для расчета процента завершения операции.
+
+**Свойства:**
+
+- `value` — текущее значение прогресса (какая часть процесса выполнена)
+- `max` — максимальное значение прогресса, по умолчанию `100`
+
+Процент выполнения рассчитывается автоматически: `(value / max) * 100`. Значение `value` автоматически ограничивается диапазоном от 0 до `max`. При изменении `max` процентное отображение пересчитывается пропорционально. Используйте `max="100"` для процентного отображения или устанавливайте равным реальному количеству шагов в процессе.
+
+```html
+<!-- Стандартная процентная шкала -->
+<Progress :value="75" :max="100" />
+
+<!-- Прогресс загрузки файлов -->
+<Progress :value="loadedFiles" :max="totalFiles" />
+
+<!-- Динамическое обновление -->
+<Progress :value="currentStep" :max="totalSteps" />
+
+<!-- Пользовательская шкала -->
+<Progress :value="completedTasks" :max="1000" />
+```

package/src/media/mdx/Progress/wikiMdxProgress.ts

@@ -0,0 +1,38 @@
+import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
+
+import circularEn from './circular.en.mdx'
+import circularRu from './circular.ru.mdx'
+import delaysEn from './delays.en.mdx'
+import delaysRu from './delays.ru.mdx'
+import linearEn from './linear.en.mdx'
+import linearRu from './linear.ru.mdx'
+import progressEn from './progress.en.mdx'
+import progressRu from './progress.ru.mdx'
+import valuesEn from './values.en.mdx'
+import valuesRu from './values.ru.mdx'
+
+export const wikiMdxProgress: StorybookComponentsMdxItem = {
+  name: 'Progress',
+  descriptions: {
+    circular: {
+      en: circularEn,
+      ru: circularRu
+    },
+    delays: {
+      en: delaysEn,
+      ru: delaysRu
+    },
+    linear: {
+      en: linearEn,
+      ru: linearRu
+    },
+    progress: {
+      en: progressEn,
+      ru: progressRu
+    },
+    values: {
+      en: valuesEn,
+      ru: valuesRu
+    }
+  }
+}

package/src/media/mdx/Ripple/ripple.en.mdx

@@ -0,0 +1,42 @@
+Component for creating animated wave effect on element click.
+
+Ripple provides visual feedback during user interaction with interactive elements, automatically tracking clicks and generating an animated wave expanding from the touch point. The effect enhances user experience by making the interface more responsive and modern.
+
+**Key Features:**
+
+- Automatic click event tracking
+- Wave animation from touch point
+- Control via `disabled` property
+- Automatic animation removal after completion
+- Support for any interactive elements
+
+**Common Use Cases:**
+
+- Buttons and links
+- Cards and lists
+- Toggles and checkboxes
+- Menu and navigation elements
+- Interactive icons
+
+```html
+<template>
+  <!-- Button with ripple effect -->
+  <button style="position: relative;">
+    Click me
+    <Ripple />
+  </button>
+
+  <!-- Disabled effect -->
+  <button style="position: relative;">
+    No effect
+    <Ripple :disabled="true" />
+  </button>
+
+  <!-- Card with effect -->
+  <div class="card" style="position: relative; cursor: pointer;">
+    <h3>Interactive card</h3>
+    <p>Card content</p>
+    <Ripple />
+  </div>
+</template>
+```

package/src/media/mdx/Ripple/ripple.ru.mdx

@@ -0,0 +1,42 @@
+Компонент для создания анимированного эффекта волны при клике на элемент.
+
+Ripple создает визуальную обратную связь при взаимодействии пользователя с интерактивными элементами, автоматически отслеживая клики и генерируя анимированную волну, расширяющуюся от точки касания. Эффект улучшает пользовательский опыт, делая интерфейс более отзывчивым и современным.
+
+**Основные возможности:**
+
+- Автоматическое отслеживание событий клика
+- Анимация волны от точки касания
+- Управление через свойство `disabled`
+- Автоматическое удаление анимации после завершения
+- Поддержка любых интерактивных элементов
+
+**Типичные сценарии использования:**
+
+- Кнопки и ссылки
+- Карточки и списки
+- Переключатели и чекбоксы
+- Элементы меню и навигации
+- Интерактивные иконки
+
+```html
+<template>
+  <!-- Кнопка с эффектом волны -->
+  <button style="position: relative;">
+    Нажми меня
+    <Ripple />
+  </button>
+
+  <!-- Отключенный эффект -->
+  <button style="position: relative;">
+    Без эффекта
+    <Ripple :disabled="true" />
+  </button>
+
+  <!-- Карточка с эффектом -->
+  <div class="card" style="position: relative; cursor: pointer;">
+    <h3>Интерактивная карточка</h3>
+    <p>Содержимое карточки</p>
+    <Ripple />
+  </div>
+</template>
+```

package/src/media/mdx/Ripple/wikiMdxRipple.ts

@@ -0,0 +1,14 @@
+import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
+
+import rippleEn from './ripple.en.mdx'
+import rippleRu from './ripple.ru.mdx'
+
+export const wikiMdxRipple: StorybookComponentsMdxItem = {
+  name: 'Ripple',
+  descriptions: {
+    ripple: {
+      en: rippleEn,
+      ru: rippleRu
+    }
+  }
+}

package/src/media/mdx/Scrollbar/emits-include.en.mdx

@@ -0,0 +1,38 @@
+### `scrollbarTop`
+
+Event fires when the top scroll boundary state changes (for use in parent components).
+
+**Parameters:**
+- `isTop: boolean` — `true` if scroll is at the top position
+
+### `scrollbarReachTop`
+
+Event fires when the top scroll boundary is reached (for use in parent components).
+
+### `scrollbarLeaveTop`
+
+Event fires when leaving the top scroll boundary (for use in parent components).
+
+### `scrollbarBottom`
+
+Event fires when the bottom scroll boundary state changes (for use in parent components).
+
+**Parameters:**
+- `isBottom: boolean` — `true` if scroll is at the bottom position
+
+### `scrollbarReachBottom`
+
+Event fires when the bottom scroll boundary is reached (for use in parent components).
+
+### `scrollbarLeaveBottom`
+
+Event fires when leaving the bottom scroll boundary (for use in parent components).
+
+### `scrollbarEdge`
+
+Event fires when any scroll boundary state changes (for use in parent components).
+
+**Parameters:**
+- `isTop: boolean` — `true` if scroll is at the top position
+- `isBottom: boolean` — `true` if scroll is at the bottom position
+- `edge: 'top' | 'bottom'` — type of boundary that changed

package/src/media/mdx/Scrollbar/emits-include.ru.mdx

@@ -0,0 +1,38 @@
+### `scrollbarTop`
+
+Событие срабатывает при изменении состояния достижения верхней границы скролла (для использования в родительских компонентах).
+
+**Параметры:**
+- `isTop: boolean` — `true`, если скролл находится в верхней позиции
+
+### `scrollbarReachTop`
+
+Событие срабатывает при достижении верхней границы скролла (для использования в родительских компонентах).
+
+### `scrollbarLeaveTop`
+
+Событие срабатывает при покидании верхней границы скролла (для использования в родительских компонентах).
+
+### `scrollbarBottom`
+
+Событие срабатывает при изменении состояния достижения нижней границы скролла (для использования в родительских компонентах).
+
+**Параметры:**
+- `isBottom: boolean` — `true`, если скролл находится в нижней позиции
+
+### `scrollbarReachBottom`
+
+Событие срабатывает при достижении нижней границы скролла (для использования в родительских компонентах).
+
+### `scrollbarLeaveBottom`
+
+Событие срабатывает при покидании нижней границы скролла (для использования в родительских компонентах).
+
+### `scrollbarEdge`
+
+Событие срабатывает при изменении состояния любой из границ скролла (для использования в родительских компонентах).
+
+**Параметры:**
+- `isTop: boolean` — `true`, если скролл находится в верхней позиции
+- `isBottom: boolean` — `true`, если скролл находится в нижней позиции
+- `edge: 'top' | 'bottom'` — тип границы, которая изменилась

package/src/media/mdx/Scrollbar/emits.en.mdx

@@ -0,0 +1,38 @@
+### `top`
+
+Event fires when the top scroll boundary state changes.
+
+**Parameters:**
+- `isTop: boolean` — `true` if scroll is at the top position
+
+### `reachTop`
+
+Event fires when the top scroll boundary is reached.
+
+### `leaveTop`
+
+Event fires when leaving the top scroll boundary.
+
+### `bottom`
+
+Event fires when the bottom scroll boundary state changes.
+
+**Parameters:**
+- `isBottom: boolean` — `true` if scroll is at the bottom position
+
+### `reachBottom`
+
+Event fires when the bottom scroll boundary is reached.
+
+### `leaveBottom`
+
+Event fires when leaving the bottom scroll boundary.
+
+### `edge`
+
+Event fires when any scroll boundary state changes.
+
+**Parameters:**
+- `isTop: boolean` — `true` if scroll is at the top position
+- `isBottom: boolean` — `true` if scroll is at the bottom position
+- `edge: 'top' | 'bottom'` — type of boundary that changed

package/src/media/mdx/Scrollbar/emits.ru.mdx

@@ -0,0 +1,38 @@
+### `top`
+
+Событие срабатывает при изменении состояния достижения верхней границы скролла.
+
+**Параметры:**
+- `isTop: boolean` — `true`, если скролл находится в верхней позиции
+
+### `reachTop`
+
+Событие срабатывает при достижении верхней границы скролла.
+
+### `leaveTop`
+
+Событие срабатывает при покидании верхней границы скролла.
+
+### `bottom`
+
+Событие срабатывает при изменении состояния достижения нижней границы скролла.
+
+**Параметры:**
+- `isBottom: boolean` — `true`, если скролл находится в нижней позиции
+
+### `reachBottom`
+
+Событие срабатывает при достижении нижней границы скролла.
+
+### `leaveBottom`
+
+Событие срабатывает при покидании нижней границы скролла.
+
+### `edge`
+
+Событие срабатывает при изменении состояния любой из границ скролла.
+
+**Параметры:**
+- `isTop: boolean` — `true`, если скролл находится в верхней позиции
+- `isBottom: boolean` — `true`, если скролл находится в нижней позиции
+- `edge: 'top' | 'bottom'` — тип границы, которая изменилась