@dxtmisha/wiki 0.39.4 → 0.39.5

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

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

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

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

package/src/media/mdx/Section/section.en.mdx

@@ -0,0 +1,38 @@
+## Description
+
+A semantic container component designed for grouping related content. It uses the `<section>` tag by default.
+
+Section provides capabilities for displaying headlines, labels, descriptions, captions, and icons. The main purpose of the component is to designate thematic sections of a document, which improves the semantics and accessibility of the page. The headline is rendered as `<h2>` by default.
+
+**Key Features:**
+
+- Semantic content grouping (`<section>` tag)
+- Support for headlines (default `<h2>`), labels, descriptions, and captions
+- Support for icons
+- Customizable layout and spacing
+- Full support for slots for content customization
+
+**Typical Use Cases:**
+
+- Thematic page sections
+- Content grouping in articles
+- Information blocks with second-level headings
+- Landing page sections
+
+```html
+<script setup>
+import { ref } from 'vue'
+</script>
+
+<template>
+  <Section
+    headline="Section Headline"
+    label="Label"
+    description="Description of this section's content"
+  >
+    <p>Main section content...</p>
+  </Section>
+</template>
+```
+
+> Section is the semantically correct choice for dividing a page into large logical blocks.

package/src/media/mdx/Section/section.ru.mdx

@@ -0,0 +1,38 @@
+## Описание
+
+Семантический компонент-контейнер, предназначенный для группировки связанного контента. По умолчанию использует тег `<section>`.
+
+Section предоставляет возможности для отображения заголовков, меток, описаний, подписей и иконок. Основное назначение компонента — обозначение тематических разделов документа, что улучшает семантику и доступность страницы. Заголовок по умолчанию рендерится как `<h2>`.
+
+**Основные возможности:**
+
+- Семантическая группировка контента (тег `<section>`)
+- Поддержка заголовков (по умолчанию `<h2>`), меток, описаний и подписей
+- Поддержка иконок
+- Настраиваемый макет и отступы
+- Полная поддержка слотов для кастомизации контента
+
+**Типичные сценарии использования:**
+
+- Тематические разделы страницы
+- Группировка контента в статьях
+- Информационные блоки с заголовками второго уровня
+- Секции лэндингов
+
+```html
+<script setup>
+import { ref } from 'vue'
+</script>
+
+<template>
+  <Section
+    headline="Заголовок секции"
+    label="Метка"
+    description="Описание содержимого данной секции"
+  >
+    <p>Основной контент секции...</p>
+  </Section>
+</template>
+```
+
+> Section — это семантически верный выбор для разделения страницы на крупные логические блоки.

package/src/media/mdx/Section/wikiMdxSection.ts

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

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

@@ -0,0 +1 @@
+- `isActive: ComputedRef<boolean>` — Computed state indicating whether the skeleton background animation is active.

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

@@ -0,0 +1 @@
+- `isActive: ComputedRef<boolean>` — Вычисляемое состояние, указывающее активна ли фоновая анимация скелетона.

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

@@ -0,0 +1,45 @@
+Component for creating animated interface placeholders during content loading.
+
+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.
+
+**Key Features:**
+
+- 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
+
+**Common Use Cases:**
+
+- Product and user card placeholders
+- List and table skeletons
+- Image and avatar placeholders
+- Text blocks during loading
+- Complex forms with multiple fields
+
+```html
+<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>
+```

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

@@ -0,0 +1,45 @@
+Компонент для создания анимированных заглушек интерфейса во время загрузки контента.
+
+Skeleton обеспечивает плавный переход между состоянием загрузки и отображением реального контента. Компонент автоматически управляет видимостью дочерних элементов через свойство `active` и поддерживает систему CSS-классов для создания различных типов заглушек.
+
+**Основные возможности:**
+
+- Автоматическое управление видимостью контента
+- Поддержка специальных CSS-классов для заглушек
+- Работа с компонентами через флаг `isSkeleton`
+- Гибкая настройка типов заглушек (текст, фон, границы)
+- Анимированные эффекты загрузки
+
+**Типичные сценарии использования:**
+
+- Заглушки карточек товаров и пользователей
+- Скелетоны списков и таблиц
+- Заглушки изображений и аватаров
+- Текстовые блоки во время загрузки
+- Сложные формы с множественными полями
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const isLoading = ref(true)
+
+setTimeout(() => {
+  isLoading.value = false
+}, 2000)
+</script>
+
+<template>
+  <Skeleton :active="isLoading">
+    <!-- Заглушки, видимые во время загрузки -->
+    <div class="skeleton__background avatar"></div>
+    <div class="skeleton__text title"></div>
+    <div class="skeleton__textVariant subtitle"></div>
+
+    <!-- Реальный контент -->
+    <img src="/avatar.jpg" alt="Аватар пользователя" />
+    <h3>{{ user.name }}</h3>
+    <p>{{ user.description }}</p>
+  </Skeleton>
+</template>
+```