@dxtmisha/wiki 0.24.2 → 0.25.1

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

@@ -1,9 +1,71 @@
-## Progress Indicator
+Component for visual representation of operation progress, data loading, and long-running processes.
 
-The `Progress` component is designed to display the progress of operations, data loading, or any other processes that require visual representation of completion status.
+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
+**Key Features:**
 
-The component supports various types of progress-display - linear and circular indicators, as well as point variants for minimal display. It can work with both determinate progress values and indeterminate states for operations with unknown execution time.
+- 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
 
-Provides flexible positioning and styling options, including compact and inverted display variants. Supports delay settings for smooth appearance and hiding of the indicator.
+**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

@@ -1,9 +1,71 @@
-## Индикатор прогресса
+Компонент для визуального отображения прогресса выполнения операций, загрузки данных и длительных процессов.
 
-Компонент `Progress` предназначен для отображения прогресса выполнения операций, загрузки данных или любых других процессов, требующих визуального отображения состояния выполнения.
+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

@@ -1,35 +1,13 @@
 ## Progress Value Management
 
-The `value` and `max` properties work closely together to determine the state of process execution. They establish the current value and upper limit, forming a system for calculating the completion percentage of an operation.
+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
+**Properties:**
 
-- **value** — Current progress value. Determines what portion of the process has been completed
-- **max** — Maximum progress value. Defaults to 100, serves as the reference point for percentage calculations
+- `value` — current progress value (what portion of the process has been completed)
+- `max` — maximum progress value, defaults to `100`
 
-### Property Relationship
-
-The `value` and `max` properties form a mathematical relationship to determine completion percentage: `(value / max) * 100`. This allows flexible adaptation of the component to various tasks and measurement scales.
-
-- Completion percentage is calculated automatically based on the value ratio
-- The `value` is automatically constrained to the range from 0 to `max`
-- When `max` changes, the percentage display is recalculated proportionally
-
-### Features
-
-- **Flexible scale** — Any numeric values can be used depending on the task
-- **Automatic normalization** — Values are automatically adjusted to the allowable range
-- **Dynamic updates** — Both properties can change in real-time
-- **Type compatibility** — Support numeric values and string representations of numbers
-
-### Recommendations
-
-- Use `max="100"` for percentage display (default value)
-- Set `max` equal to the actual number of steps in the process
-- Update `value` gradually to create smooth animation
-- Avoid zero and negative values for `max`
-
-### Usage Examples
+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 -->
@@ -38,7 +16,7 @@ The `value` and `max` properties form a mathematical relationship to determine c
 <!-- File loading progress -->
 <Progress :value="loadedFiles" :max="totalFiles" />
 
-<!-- Dynamic updates of both values -->
+<!-- Dynamic updates -->
 <Progress :value="currentStep" :max="totalSteps" />
 
 <!-- Custom scale -->

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

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

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

@@ -1,48 +1,42 @@
-## Ripple Wave Effect on Interaction
+Component for creating animated wave effect on element click.
 
-The `Ripple` component creates an animated wave effect when clicking on an element, similar to Material Design ripple effect. This enhances user experience by providing visual feedback during interaction.
+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.
 
-### How it Works
+**Key Features:**
 
-The component automatically tracks click events and creates an animated wave that expands from the touch point. The effect works by:
+- Automatic click event tracking
+- Wave animation from touch point
+- Control via `disabled` property
+- Automatic animation removal after completion
+- Support for any interactive elements
 
-- Detecting click coordinates relative to the element
-- Creating a temporary element with expansion animation
-- Automatically removing the element after animation completion
+**Common Use Cases:**
 
-### Integration
-
-The component should be placed inside an interactive element that needs the ripple effect. The parent element must have `position: relative` for correct effect positioning.
-
-### Properties
-
-- **disabled** — Disables the ripple effect when set to `true`
-
-### Recommendations
-
-- Use on buttons, cards, and other interactive elements
-- Ensure the parent element has `position: relative`
-- Avoid using on elements that frequently change size
-
-### Usage Example
+- Buttons and links
+- Cards and lists
+- Toggles and checkboxes
+- Menu and navigation elements
+- Interactive icons
 
 ```html
-<!-- 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>
+  <!-- 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

@@ -1,48 +1,42 @@
-## Эффект волны при взаимодействии
+Компонент для создания анимированного эффекта волны при клике на элемент.
 
-Компонент `Ripple` создает анимированный эффект волны при клике по элементу, аналогичный эффекту Material Design. Это улучшает пользовательский опыт, предоставляя визуальную обратную связь при взаимодействии.
+Ripple создает визуальную обратную связь при взаимодействии пользователя с интерактивными элементами, автоматически отслеживая клики и генерируя анимированную волну, расширяющуюся от точки касания. Эффект улучшает пользовательский опыт, делая интерфейс более отзывчивым и современным.
 
-### Принцип работы
+**Основные возможности:**
 
-Компонент автоматически отслеживает события клика и создает анимированную волну, которая расширяется от точки касания. Эффект работает путем:
+- Автоматическое отслеживание событий клика
+- Анимация волны от точки касания
+- Управление через свойство `disabled`
+- Автоматическое удаление анимации после завершения
+- Поддержка любых интерактивных элементов
 
-- Определения координат клика относительно элемента
-- Создания временного элемента с анимацией расширения
-- Автоматического удаления элемента после завершения анимации
+**Типичные сценарии использования:**
 
-### Интеграция
-
-Компонент должен быть размещен внутри интерактивного элемента, к которому нужно добавить эффект волны. Родительский элемент должен иметь `position: relative` для корректного позиционирования эффекта.
-
-### Свойства
-
-- **disabled** — Отключает эффект волны при установке в `true`
-
-### Рекомендации
-
-- Используйте на кнопках, карточках и других интерактивных элементах
-- Убедитесь, что родительский элемент имеет `position: relative`
-- Не используйте на элементах, которые часто изменяют размер
-
-### Пример использования
+- Кнопки и ссылки
+- Карточки и списки
+- Переключатели и чекбоксы
+- Элементы меню и навигации
+- Интерактивные иконки
 
 ```html
-<!-- Кнопка с эффектом волны -->
-<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>
+  <!-- Кнопка с эффектом волны -->
+  <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/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'` — тип границы, которая изменилась

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

@@ -1,3 +1,39 @@
-## Description
+Component for customizing scrollbar appearance and managing visual dividers at scrollable area boundaries.
 
-Component for customizing scrollbar appearance and adding divider lines.
+Scrollbar hides the browser's standard scrollbar and provides visual feedback when reaching the top or bottom of content through divider lines. The component automatically detects scrollbar width and adapts display for systems without visible scrollbars (e.g., macOS with trackpad).
+
+**Key features:**
+
+- Hide browser's standard scrollbar
+- Display dividers when reaching content boundaries
+- Independent control of top and bottom dividers
+- Inversion of divider display logic
+- Events for tracking scroll position
+- Support for infinite scroll via `reachBottom` events
+
+**Common use cases:**
+
+- Lists with data loading on scroll
+- Modal windows and dropdown menus with scrollable content
+- Fixed-height areas with vertical scrolling
+- Visual content separation during scrolling
+
+```html
+<script setup>
+const handleReachBottom = () => {
+  // Load more data
+  loadMoreItems()
+}
+</script>
+
+<template>
+  <Scrollbar
+    divider
+    @reach-bottom="handleReachBottom"
+  >
+    <div class="content">
+      <!-- Scrollable content -->
+    </div>
+  </Scrollbar>
+</template>
+```