@dxtmisha/wiki 0.24.2 → 0.25.1

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

@@ -1,3 +1,39 @@
-## Описание
+Компонент для кастомизации внешнего вида полосы прокрутки и управления визуальными разделителями на границах прокручиваемой области.
 
-Компонент для кастомизации внешнего вида скроллбара и добавления разделительных линий.
+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,23 +1,12 @@
 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'
 
-import eventBottomEn from './event.bottom.en.mdx'
-import eventBottomRu from './event.bottom.ru.mdx'
-import eventEdgeEn from './event.edge.en.mdx'
-import eventEdgeRu from './event.edge.ru.mdx'
-import eventLeaveBottomEn from './event.leaveBottom.en.mdx'
-import eventLeaveBottomRu from './event.leaveBottom.ru.mdx'
-import eventLeaveTopEn from './event.leaveTop.en.mdx'
-import eventLeaveTopRu from './event.leaveTop.ru.mdx'
-import eventReachBottomEn from './event.reachBottom.en.mdx'
-import eventReachBottomRu from './event.reachBottom.ru.mdx'
-import eventReachTopEn from './event.reachTop.en.mdx'
-import eventReachTopRu from './event.reachTop.ru.mdx'
-import eventTopEn from './event.top.en.mdx'
-import eventTopRu from './event.top.ru.mdx'
-
 /**
  * MDX files for Scrollbar component
  *
@@ -26,37 +15,17 @@ import eventTopRu from './event.top.ru.mdx'
 export const wikiMdxScrollbar: StorybookComponentsMdxItem = {
   name: 'Scrollbar',
   descriptions: {
+    'emits': {
+      en: emitsEn,
+      ru: emitsRu
+    },
+    'emits-include': {
+      en: emitsIncludeEn,
+      ru: emitsIncludeRu
+    },
     'scrollbar': {
       en: scrollbarEn,
       ru: scrollbarRu
-    },
-    'event.top': {
-      en: eventTopEn,
-      ru: eventTopRu
-    },
-    'event.reachTop': {
-      en: eventReachTopEn,
-      ru: eventReachTopRu
-    },
-    'event.leaveTop': {
-      en: eventLeaveTopEn,
-      ru: eventLeaveTopRu
-    },
-    'event.bottom': {
-      en: eventBottomEn,
-      ru: eventBottomRu
-    },
-    'event.reachBottom': {
-      en: eventReachBottomEn,
-      ru: eventReachBottomRu
-    },
-    'event.leaveBottom': {
-      en: eventLeaveBottomEn,
-      ru: eventLeaveBottomRu
-    },
-    'event.edge': {
-      en: eventEdgeEn,
-      ru: eventEdgeRu
     }
   }
 }

package/src/media/mdx/Select/select.en.mdx

@@ -0,0 +1,69 @@
+Component for creating dropdown selection lists with search, filtering, multiple selection, and validation support.
+
+Select is a complete selection element that combines Field, Menu, SelectValue, and Input components to create an advanced selection interface. The component automatically displays selected values as text or chips (for multiple selection), provides built-in search and option filtering, supports AJAX data loading with caching. It integrates with all Field component features including validation, labels, counters, and messages.
+
+**Key features:**
+
+- Single or multiple value selection
+- Built-in search and real-time option filtering
+- AJAX data loading with caching support
+- Editable selected value mode (editValue)
+- Validation with standard Field features
+- Keyboard navigation and accessibility support
+- Automatic display of selected values (text or chips)
+- Maximum number of selected items limitation
+- Icon support for dropdown arrow and search
+- Auto-close control for multiple selection
+- Integration with Field, Menu, SelectValue, Input components
+- Customization via slots and attributes
+- Responsive design for mobile devices
+
+**Typical use cases:**
+
+- Selecting values from a predefined list of options
+- Filtering and searching in large data lists
+- Multiple item selection with quantity limitation
+- Selection with AJAX data loading from server
+- Forms with validation of selected values
+- Combo boxes with editing capability
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const selectedCountry = ref('us')
+const selectedLanguages = ref(['js', 'ts'])
+
+const countries = [
+  { label: 'Russia', value: 'ru' },
+  { label: 'USA', value: 'us' },
+  { label: 'Germany', value: 'de' }
+]
+
+const languages = [
+  { label: 'JavaScript', value: 'js' },
+  { label: 'TypeScript', value: 'ts' },
+  { label: 'Python', value: 'py' }
+]
+</script>
+
+<template>
+  <!-- Simple selection -->
+  <Select
+    v-model="selectedCountry"
+    label="Country"
+    placeholder="Choose a country"
+    :option="countries"
+  />
+
+  <!-- Multiple selection -->
+  <Select
+    v-model="selectedLanguages"
+    label="Programming languages"
+    :multiple="true"
+    :max="3"
+    helper-message="Select up to 3 languages"
+    :option="languages"
+  />
+</template>
+```

package/src/media/mdx/Select/select.ru.mdx

@@ -0,0 +1,69 @@
+Компонент для создания выпадающих списков выбора с поддержкой поиска, фильтрации, множественного выбора и валидации.
+
+Select представляет собой полнофункциональный элемент выбора, объединяющий компоненты Field, Menu, SelectValue и Input для создания продвинутого интерфейса выбора. Компонент автоматически отображает выбранные значения в виде текста или чипов (для множественного выбора), предоставляет встроенный поиск и фильтрацию опций, поддерживает AJAX загрузку данных с кешированием. Интегрируется со всеми возможностями компонента Field, включая валидацию, подписи, счётчики и сообщения.
+
+**Основные возможности:**
+
+- Одиночный или множественный выбор значений
+- Встроенный поиск и фильтрация опций в реальном времени
+- AJAX загрузка данных с поддержкой кеширования
+- Режим редактирования выбранного значения (editValue)
+- Валидация со стандартными функциями Field
+- Клавиатурная навигация и поддержка accessibility
+- Автоматическое отображение выбранных значений (текст или чипы)
+- Ограничение максимального количества выбранных элементов
+- Поддержка иконок для стрелки выпадающего списка и поиска
+- Управление автозакрытием для множественного выбора
+- Интеграция с компонентами Field, Menu, SelectValue, Input
+- Кастомизация через слоты и атрибуты
+- Адаптивный дизайн для мобильных устройств
+
+**Типичные сценарии использования:**
+
+- Выбор значений из предопределённого списка опций
+- Фильтрация и поиск в больших списках данных
+- Множественный выбор элементов с ограничением количества
+- Выбор с AJAX загрузкой данных с сервера
+- Формы с валидацией выбранных значений
+- Комбо-боксы с возможностью редактирования
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const selectedCountry = ref('ru')
+const selectedLanguages = ref(['js', 'ts'])
+
+const countries = [
+  { label: 'Россия', value: 'ru' },
+  { label: 'США', value: 'us' },
+  { label: 'Германия', value: 'de' }
+]
+
+const languages = [
+  { label: 'JavaScript', value: 'js' },
+  { label: 'TypeScript', value: 'ts' },
+  { label: 'Python', value: 'py' }
+]
+</script>
+
+<template>
+  <!-- Простой выбор -->
+  <Select
+    v-model="selectedCountry"
+    label="Страна"
+    placeholder="Выберите страну"
+    :option="countries"
+  />
+
+  <!-- Множественный выбор -->
+  <Select
+    v-model="selectedLanguages"
+    label="Языки программирования"
+    :multiple="true"
+    :max="3"
+    helper-message="Выберите до 3 языков"
+    :option="languages"
+  />
+</template>
+```

package/src/media/mdx/Select/wikiMdxSelect.ts

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

package/src/media/mdx/SelectValue/selectValue.en.mdx

@@ -0,0 +1,64 @@
+Component for displaying selected values in selection controls with support for single and multiple modes.
+
+SelectValue manages the visualization of selected items, automatically switching between text display for single selection and chips for multiple selection. The component integrates with the event system to handle user actions, supports icon display, placeholders, and cancel buttons for selections.
+
+**Key features:**
+
+- Automatic switching between single and multiple selection modes
+- Chip rendering with customizable appearance for multiple selections
+- Placeholder support for empty state
+- Icon display in selected items
+- Cancel buttons for removing individual selections
+- Integration with Chip component for element styling
+- Handling disabled and readonly states
+
+**Typical use cases:**
+
+- Displaying selected options in selects and comboboxes
+- Visualizing multiple selections in lists
+- Showing active filters with removal capability
+- Displaying tags and categories
+- Representing selected elements in forms
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const selectedSingle = ref([
+  { label: 'JavaScript', value: 'js', icon: 'code', index: '1' }
+])
+
+const selectedMultiple = ref([
+  { label: 'React', value: 'react', icon: 'favorite', index: '1' },
+  { label: 'Vue.js', value: 'vue', icon: 'star', index: '2' }
+])
+
+const handleClick = (event) => {
+  console.log('Element clicked:', event)
+}
+</script>
+
+<template>
+  <!-- Single selection -->
+  <SelectValue
+    :value="selectedSingle"
+    :icon-show="true"
+    @click="handleClick"
+  />
+
+  <!-- Multiple selection with chips -->
+  <SelectValue
+    :value="selectedMultiple"
+    :multiple="true"
+    :icon-show="true"
+    icon-cancel="close"
+    @click="handleClick"
+  />
+
+  <!-- With placeholder -->
+  <SelectValue
+    placeholder="Select a value"
+  />
+</template>
+```
+

package/src/media/mdx/SelectValue/selectValue.ru.mdx

@@ -0,0 +1,64 @@
+Компонент для отображения выбранных значений в элементах управления выбором с поддержкой одиночного и множественного режимов.
+
+SelectValue управляет визуализацией выбранных элементов, автоматически переключаясь между текстовым отображением для одиночного выбора и чипами для множественного. Компонент интегрируется с системой событий для обработки действий пользователя, поддерживает отображение иконок, плейсхолдеров и кнопок отмены выбора.
+
+**Основные возможности:**
+
+- Автоматическое переключение между режимами одиночного и множественного выбора
+- Рендеринг чипов с настраиваемым внешним видом для множественного выбора
+- Поддержка плейсхолдера для пустого состояния
+- Отображение иконок в выбранных элементах
+- Кнопки отмены для удаления отдельных выборов
+- Интеграция с Chip компонентом для стилизации элементов
+- Обработка состояний disabled и readonly
+
+**Типичные сценарии использования:**
+
+- Отображение выбранных опций в селектах и комбобоксах
+- Визуализация множественного выбора в списках
+- Показ активных фильтров с возможностью удаления
+- Отображение тегов и категорий
+- Представление выбранных элементов в формах
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const selectedSingle = ref([
+  { label: 'JavaScript', value: 'js', icon: 'code', index: '1' }
+])
+
+const selectedMultiple = ref([
+  { label: 'React', value: 'react', icon: 'favorite', index: '1' },
+  { label: 'Vue.js', value: 'vue', icon: 'star', index: '2' }
+])
+
+const handleClick = (event) => {
+  console.log('Клик по элементу:', event)
+}
+</script>
+
+<template>
+  <!-- Одиночный выбор -->
+  <SelectValue
+    :value="selectedSingle"
+    :icon-show="true"
+    @click="handleClick"
+  />
+
+  <!-- Множественный выбор с чипами -->
+  <SelectValue
+    :value="selectedMultiple"
+    :multiple="true"
+    :icon-show="true"
+    icon-cancel="close"
+    @click="handleClick"
+  />
+
+  <!-- С плейсхолдером -->
+  <SelectValue
+    placeholder="Выберите значение"
+  />
+</template>
+```
+

package/src/media/mdx/SelectValue/wikiMdxSelectValue.ts

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

package/src/media/mdx/Skeleton/classes.en.mdx

@@ -0,0 +1,13 @@
+## CSS Classes for Display Control
+
+- `*__text` — main class for text skeleton
+- `*__textVariant` — text class variant for additional styling
+- `*__background` — main background class for skeleton
+- `*__backgroundAfter` — background class for `::after` pseudo-element
+- `*__backgroundBefore` — background class for `::before` pseudo-element
+- `*__backgroundVariant` — background class variant
+- `*__border` — class for skeleton border styling
+- `*__borderVariant` — border class variant
+- `*__none` — class to disable skeleton display
+
+Where `*` is the component class name (e.g., `d1-skeleton`, `m3-skeleton`).

package/src/media/mdx/Skeleton/classes.ru.mdx

@@ -0,0 +1,13 @@
+## CSS классы для управления отображением
+
+- `*__text` — основной класс для текстового скелета
+- `*__textVariant` — вариант текстового класса для дополнительной стилизации
+- `*__background` — основной фоновый класс скелета
+- `*__backgroundAfter` — фоновый класс для псевдоэлемента `::after`
+- `*__backgroundBefore` — фоновый класс для псевдоэлемента `::before`
+- `*__backgroundVariant` — вариант фонового класса
+- `*__border` — класс для стилизации границ скелета
+- `*__borderVariant` — вариант класса границ
+- `*__none` — класс для отключения отображения скелета
+
+Где `*` — название класса компонента (например, `d1-skeleton`, `m3-skeleton`).

package/src/media/mdx/Skeleton/expose.isActive.en.mdx

@@ -1,32 +1,18 @@
 ### `isActive`
 
-The `Skeleton` component exports a computed property `isActive` that provides access to the current activation state of the skeleton.
+Computed property that provides access to the current activation state of the skeleton.
 
-#### Description
+**Type:** `ComputedRef<boolean>`
 
-- **isActive** — A computed property of type `ComputedRef<boolean>` that reflects the current state of the component's `active` property.
-
-#### Purpose
-
-The exported `isActive` value provides external access to the skeleton's activation state. This is useful for:
-
-- Synchronizing state with parent components
-- Creating dependent computations in the parent component
-- Programmatically controlling behavior of other elements based on skeleton state
-
-#### Usage
-
-Access the exported value through a template reference:
+**Purpose:** Reflects the current state of the component's `active` property. Useful for synchronizing state with parent components and programmatically controlling behavior of other elements.
 
 ```html
 <template>
-  <div>
-    <Skeleton ref="skeletonRef" :active="isLoading">
-      <div class="skeleton__text">Loading content</div>
-    </Skeleton>
+  <Skeleton ref="skeletonRef" :active="isLoading">
+    <div class="skeleton__text">Loading content</div>
+  </Skeleton>
 
-    <p v-if="skeletonRef?.isActive">Loading...</p>
-  </div>
+  <p v-if="skeletonRef?.isActive">Loading...</p>
 </template>
 
 <script setup>
@@ -34,12 +20,5 @@ import { ref } from 'vue'
 
 const skeletonRef = ref()
 const isLoading = ref(true)
-
-// Programmatic state access
-const checkSkeletonState = () => {
-  if (skeletonRef.value?.isActive) {
-    console.log('Skeleton is active')
-  }
-}
 </script>
 ```

package/src/media/mdx/Skeleton/expose.isActive.ru.mdx

@@ -1,32 +1,18 @@
 ### `isActive`
 
-Компонент `Skeleton` экспортирует вычисляемое свойство `isActive`, которое позволяет получить текущее состояние активности скелетона.
+Вычисляемое свойство, которое предоставляет доступ к текущему состоянию активности скелетона.
 
-#### Описание
+**Тип:** `ComputedRef<boolean>`
 
-- **isActive** — Вычисляемое свойство типа `ComputedRef<boolean>`, которое отражает текущее состояние свойства `active` компонента.
-
-#### Назначение
-
-Экспортируемое значение `isActive` предоставляет доступ к состоянию активности скелетона извне компонента. Это полезно для:
-
-- Синхронизации состояния с родительскими компонентами
-- Создания зависимых вычислений в родительском компоненте
-- Программного контроля поведения других элементов в зависимости от состояния скелетона
-
-#### Использование
-
-Получить доступ к экспортируемому значению можно через шаблонную ссылку:
+**Назначение:** Отражает текущее состояние свойства `active` компонента. Полезно для синхронизации состояния с родительскими компонентами и программного управления поведением других элементов.
 
 ```html
 <template>
-  <div>
-    <Skeleton ref="skeletonRef" :active="isLoading">
-      <div class="skeleton__text">Загружаемый контент</div>
-    </Skeleton>
+  <Skeleton ref="skeletonRef" :active="isLoading">
+    <div class="skeleton__text">Загрузка контента</div>
+  </Skeleton>
 
-    <p v-if="skeletonRef?.isActive">Идет загрузка...</p>
-  </div>
+  <p v-if="skeletonRef?.isActive">Загрузка...</p>
 </template>
 
 <script setup>
@@ -34,12 +20,5 @@ import { ref } from 'vue'
 
 const skeletonRef = ref()
 const isLoading = ref(true)
-
-// Программное получение состояния
-const checkSkeletonState = () => {
-  if (skeletonRef.value?.isActive) {
-    console.log('Скелетон активен')
-  }
-}
 </script>
 ```

package/src/media/mdx/Skeleton/skeleton.en.mdx

@@ -1,44 +1,45 @@
-## Skeleton State Management
+Component for creating animated interface placeholders during content loading.
 
-The `Skeleton` component is used to display placeholders during content loading. The `active` property controls the visibility of all child elements within the component.
+Skeleton provides smooth transitions between loading state and real content display. The component automatically manages child element visibility through the `active` property and supports a CSS class system for creating various types of placeholders.
 
-### Properties
+**Key Features:**
 
-- **active** — Boolean property that activates skeleton mode and controls the visibility of child elements.
+- Automatic content visibility management
+- Support for special CSS classes for placeholders
+- Component integration via `isSkeleton` flag
+- Flexible placeholder types (text, background, borders)
+- Animated loading effects
 
-### How it works
+**Common Use Cases:**
 
-When `active` is set to `true`, the Skeleton component hides all its child elements, **except**:
-
-1. **Elements with special skeleton CSS classes:**
-   - `skeleton__text` — for text placeholders
-   - `skeleton__textVariant` — alternative variant of text placeholders
-   - `skeleton__background` — for background placeholders
-   - `skeleton__backgroundAfter` — background placeholder via ::after pseudo-element
-   - `skeleton__backgroundBefore` — background placeholder via ::before pseudo-element
-   - `skeleton__backgroundVariant` — alternative variant of background placeholders
-   - `skeleton__border` — for border placeholders
-   - `skeleton__borderVariant` — alternative variant of border placeholders
-   - `skeleton__none` — elements that are always hidden in skeleton mode (even if they have other special classes)
-
-2. **Components with `isSkeleton=true` property**
-
-When `active` is set to `false`, all child elements are displayed in normal mode.
-
-### Recommendations
-
-- Use the component to improve user experience during data loading
-- Apply special skeleton classes to elements that should display as placeholders
-- Place placeholders where real content will appear
-
-### Usage example
+- Product and user card placeholders
+- List and table skeletons
+- Image and avatar placeholders
+- Text blocks during loading
+- Complex forms with multiple fields
 
 ```html
-<!-- Active skeleton -->
-<Skeleton :active="true">
-  <div class="skeleton__text">Visible text placeholder</div>
-  <div class="skeleton__background">Visible background placeholder</div>
-  <div>Hidden element</div>
-  <ComponentWithSkeleton isSkeleton="true">Visible component</ComponentWithSkeleton>
-</Skeleton>
+<script setup>
+import { ref } from 'vue'
+
+const isLoading = ref(true)
+
+setTimeout(() => {
+  isLoading.value = false
+}, 2000)
+</script>
+
+<template>
+  <Skeleton :active="isLoading">
+    <!-- Placeholders visible during loading -->
+    <div class="skeleton__background avatar"></div>
+    <div class="skeleton__text title"></div>
+    <div class="skeleton__textVariant subtitle"></div>
+
+    <!-- Real content -->
+    <img src="/avatar.jpg" alt="User avatar" />
+    <h3>{{ user.name }}</h3>
+    <p>{{ user.description }}</p>
+  </Skeleton>
+</template>
 ```