@dxtmisha/wiki 0.39.2 → 0.39.4

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

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

@@ -1,25 +0,0 @@
-## Линейный прогресс и связанные параметры
-
-Свойство `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

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

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

@@ -1,24 +0,0 @@
-## Управление значениями прогресса
-
-Свойства `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

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

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

@@ -1,42 +0,0 @@
-Компонент для создания анимированного эффекта волны при клике на элемент.
-
-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

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

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

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

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

@@ -1,38 +0,0 @@
-### `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,39 +0,0 @@
-Component for customizing scrollbar appearance and managing visual dividers at scrollable area boundaries.
-
-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>
-```

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

@@ -1,39 +0,0 @@
-Компонент для кастомизации внешнего вида полосы прокрутки и управления визуальными разделителями на границах прокручиваемой области.
-
-Scrollbar скрывает стандартную полосу прокрутки браузера и предоставляет визуальную обратную связь при достижении верхней или нижней границы контента через разделительные линии. Компонент автоматически определяет ширину скроллбара и адаптирует отображение для систем без видимых полос прокрутки (например, macOS с трекпадом).
-
-**Основные возможности:**
-
-- Скрытие стандартной полосы прокрутки браузера
-- Отображение разделителей при достижении границ контента
-- Независимое управление верхним и нижним разделителями
-- Инверсия логики отображения разделителей
-- События для отслеживания позиции скролла
-- Поддержка бесконечной прокрутки через события `reachBottom`
-
-**Типичные сценарии использования:**
-
-- Списки с подгрузкой данных при скролле
-- Модальные окна и выпадающие меню с прокручиваемым содержимым
-- Области с фиксированной высотой и вертикальной прокруткой
-- Визуальное разделение контента при прокрутке
-
-```html
-<script setup>
-const handleReachBottom = () => {
-  // Загрузка дополнительных данных
-  loadMoreItems()
-}
-</script>
-
-<template>
-  <Scrollbar
-    divider
-    @reach-bottom="handleReachBottom"
-  >
-    <div class="content">
-      <!-- Прокручиваемое содержимое -->
-    </div>
-  </Scrollbar>
-</template>
-```

package/src/media/mdx/Scrollbar/wikiMdxScrollbar.ts

@@ -1,31 +0,0 @@
-import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
-
-import emitsEn from './emits.en.mdx'
-import emitsRu from './emits.ru.mdx'
-import emitsIncludeEn from './emits-include.en.mdx'
-import emitsIncludeRu from './emits-include.ru.mdx'
-import scrollbarEn from './scrollbar.en.mdx'
-import scrollbarRu from './scrollbar.ru.mdx'
-
-/**
- * MDX files for Scrollbar component
- *
- * MDX файлы для компонента Scrollbar
- */
-export const wikiMdxScrollbar: StorybookComponentsMdxItem = {
-  name: 'Scrollbar',
-  descriptions: {
-    'emits': {
-      en: emitsEn,
-      ru: emitsRu
-    },
-    'emits-include': {
-      en: emitsIncludeEn,
-      ru: emitsIncludeRu
-    },
-    'scrollbar': {
-      en: scrollbarEn,
-      ru: scrollbarRu
-    }
-  }
-}