@dxtmisha/wiki 0.39.3 → 0.39.5

package/src/media/mdx/FieldLabel/wikiMdxFieldLabel.ts

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

package/src/media/mdx/FieldMessage/fieldMessage.en.mdx

@@ -0,0 +1,38 @@
+Component for displaying helper and validation messages below form fields.
+
+FieldMessage centralizes management of text hints and error messages in forms. The component automatically determines display priority (validation errors take precedence over hints), supports forced display via forceShow, and integrates with input fields and character counters. It provides a flexible slot system for customization and works with both static and reactive values.
+
+**Key Features:**
+
+- Two message types: helper and validation
+- Message priority — validation message overrides helper message
+- Smart visibility — automatic display logic based on provided values
+- Forced display via forceShow property
+- Flexible sources — support for static and reactive values
+- Integration with FieldCounter for complex forms
+- Customizable rendering through design system and slots
+
+**Typical Use Cases:**
+
+- Helper hints below input fields
+- Displaying validation errors in forms
+- Dynamic messages with reactive content
+- Complex forms with counters and validation
+
+```html
+<template>
+  <!-- Helper message -->
+  <Component helper="Enter your name" />
+
+  <!-- Validation message -->
+  <Component validation="Minimum 3 characters" />
+
+  <!-- Slots -->
+  <Component>
+    <template #helper>💡 Hint</template>
+    <template #validation>⚠️ Error</template>
+  </Component>
+</template>
+```
+
+> The component focuses on text messages and should be used together with input control elements.

package/src/media/mdx/FieldMessage/fieldMessage.ru.mdx

@@ -0,0 +1,38 @@
+Компонент для отображения вспомогательных и валидационных сообщений под полями формы.
+
+FieldMessage централизует управление текстовыми подсказками и сообщениями об ошибках в формах. Компонент автоматически определяет приоритет отображения (ошибки валидации выше подсказок), поддерживает принудительное показ через forceShow и интегрируется с полями ввода и счетчиками символов. Предоставляет гибкую систему слотов для кастомизации и работает как со статическими, так и с реактивными значениями.
+
+**Основные возможности:**
+
+- Два типа сообщений: вспомогательное (helper) и валидационное (validation)
+- Приоритет сообщений — валидационное сообщение перекрывает вспомогательное
+- Умная видимость — автоматическая логика отображения на основе переданных значений
+- Принудительное отображение через свойство forceShow
+- Гибкие источники — поддержка статических и реактивных значений
+- Интеграция с FieldCounter для комплексных форм
+- Настраиваемый рендеринг через систему дизайна и слоты
+
+**Типичные сценарии использования:**
+
+- Вспомогательные подсказки под полями ввода
+- Отображение ошибок валидации в формах
+- Динамические сообщения с реактивным контентом
+- Комплексные формы с счетчиками и валидацией
+
+```html
+<template>
+  <!-- Подсказка -->
+  <Component helper="Введите ваше имя" />
+
+  <!-- Ошибка валидации -->
+  <Component validation="Минимум 3 символа" />
+
+  <!-- Слоты -->
+  <Component>
+    <template #helper>💡 Подсказка</template>
+    <template #validation>⚠️ Ошибка</template>
+  </Component>
+</template>
+```
+
+> Компонент фокусируется на текстовых сообщениях и должен использоваться совместно с элементами управления вводом.

package/src/media/mdx/FieldMessage/slots.en.mdx

@@ -0,0 +1,7 @@
+- `helper(props: FieldMessageSlot): any` — Slot for custom helper message content.
+- `validation(props: FieldMessageSlot): any` — Slot for custom validation message content.
+
+> **FieldMessageSlot:**
+> - `message: string` — current message (helper or validation).
+> - `helperMessage: string` — helper message text.
+> - `validationMessage: string` — validation message text.

package/src/media/mdx/FieldMessage/slots.ru.mdx

@@ -0,0 +1,7 @@
+- `helper(props: FieldMessageSlot): any` — Слот для пользовательского содержимого вспомогательного сообщения.
+- `validation(props: FieldMessageSlot): any` — Слот для пользовательского содержимого сообщения валидации.
+
+> **FieldMessageSlot:**
+> - `message: string` — текущее сообщение (вспомогательное или валидация).
+> - `helperMessage: string` — текст вспомогательного сообщения.
+> - `validationMessage: string` — текст сообщения валидации.

package/src/media/mdx/FieldMessage/wikiMdxFieldMessage.ts

@@ -0,0 +1,25 @@
+import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
+
+import fieldMessageEn from './fieldMessage.en.mdx'
+import fieldMessageRu from './fieldMessage.ru.mdx'
+import slotsEn from './slots.en.mdx'
+import slotsRu from './slots.ru.mdx'
+
+/**
+ * MDX files for FieldMessage component
+ *
+ * MDX файлы для компонента FieldMessage
+ */
+export const wikiMdxFieldMessage: StorybookComponentsMdxItem = {
+  name: 'FieldMessage',
+  descriptions: {
+    fieldMessage: {
+      en: fieldMessageEn,
+      ru: fieldMessageRu
+    },
+    slots: {
+      en: slotsEn,
+      ru: slotsRu
+    }
+  }
+}

package/src/media/mdx/Grid/grid.en.mdx

@@ -0,0 +1,21 @@
+Layout component for creating grid structures with customizable columns.
+
+**Key Features:**
+
+- Flexible grid system (defaults to 12 columns)
+- Gap customization
+- Responsive layout building
+
+```html
+<script setup>
+</script>
+
+<template>
+  <Grid>
+    <GridItem columnBase="6">Item 1</GridItem>
+    <GridItem columnBase="6">Item 2</GridItem>
+  </Grid>
+</template>
+```
+
+> Grid is the foundation for creating aligned and structured layouts across different screen sizes.

package/src/media/mdx/Grid/grid.ru.mdx

@@ -0,0 +1,23 @@
+## Описание
+
+Компонент макета для создания сеточных структур с настраиваемыми колонками.
+
+**Основные возможности:**
+
+- Гибкая сеточная система (по умолчанию 12 колонок)
+- Настройка отступов между элементами
+- Создание адаптивных интерфейсов
+
+```html
+<script setup>
+</script>
+
+<template>
+  <Grid>
+    <GridItem columnBase="6">Элемент 1</GridItem>
+    <GridItem columnBase="6">Элемент 2</GridItem>
+  </Grid>
+</template>
+```
+
+> Grid является основой для создания упорядоченных и структурированных макетов для различных размеров экранов.

package/src/media/mdx/Grid/wikiMdxGrid.ts

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

package/src/media/mdx/GridItem/gridItem.en.mdx

@@ -0,0 +1,25 @@
+Individual item within a Grid component. Controls how many columns the element should take across different screen sizes.
+
+**Key Features:**
+
+- Customizable column span (1 to 12)
+- Built-in responsive support for all major breakpoints
+- Granular control over layout density
+
+```html
+<script setup>
+</script>
+
+<template>
+  <Grid>
+    <!-- Full width on mobile, half on desktop -->
+    <GridItem base="12" md="6">Item 1</GridItem>
+    <GridItem base="12" md="6">Item 2</GridItem>
+
+    <!-- Different spans for different screen sizes -->
+    <GridItem base="12" sm="6" lg="3">Responsive item</GridItem>
+  </Grid>
+</template>
+```
+
+> GridItem allows for granular control over element sizing within a Grid container, enabling complex responsive layouts with zero custom CSS.

package/src/media/mdx/GridItem/gridItem.ru.mdx

@@ -0,0 +1,27 @@
+## Описание
+
+Отдельный элемент внутри компонента Grid. Управляет тем, сколько колонок должен занимать элемент на различных размерах экрана.
+
+**Основные возможности:**
+
+- Настраиваемый охват колонок (от 1 до 12)
+- Встроенная поддержка адаптивности для всех основных брейкпоинтов
+- Детальный контроль над плотностью макета
+
+```html
+<script setup>
+</script>
+
+<template>
+  <Grid>
+    <!-- Полная ширина на мобильных, половина на десктопе -->
+    <GridItem base="12" md="6">Элемент 1</GridItem>
+    <GridItem base="12" md="6">Элемент 2</GridItem>
+
+    <!-- Различный охват для разных размеров экрана -->
+    <GridItem base="12" sm="6" lg="3">Адаптивный элемент</GridItem>
+  </Grid>
+</template>
+```
+
+> GridItem обеспечивает детальный контроль над размером элементов внутри контейнера Grid, позволяя создавать сложные адаптивные макеты без написания дополнительного CSS.

package/src/media/mdx/GridItem/wikiMdxGridItem.ts

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

package/src/media/mdx/Group/group.en.mdx

@@ -0,0 +1,40 @@
+## Description
+
+A structural component designed to group related content with support for headers, descriptions, and flexible layout options. It is a semantic alias for the Block component, with a default header level of h4.
+
+Group provides a standardized way to organize information within a page or another component, ensuring a consistent visual hierarchy. It inherits all the capabilities of the Block component, including support for icons, captions, and slot-based customization.
+
+**Key Features:**
+
+- Standardized grouping of content using `<div>` tag
+- Support for titles (`h4` by default), labels, descriptions, and captions
+- Icon support
+- Fully inherits Block component capabilities
+- Flexible layout for content organization
+
+**Typical Use Cases:**
+
+- Subsections within a page
+- Grouping elements within a card or modal
+- Organizing complex forms into thematic areas
+- Creating structured content blocks with smaller headers
+
+```html
+<script setup>
+import { ref } from 'vue'
+</script>
+
+<template>
+  <Group
+    headline="Group Headline"
+    label="Group Label"
+    description="Detailed description for the group content"
+    caption="Auxiliary text"
+    icon="folder"
+  >
+    Main group content goes here
+  </Group>
+</template>
+```
+
+> Group is an ideal choice for creating semantic sub-structures within your application.

package/src/media/mdx/Group/group.ru.mdx

@@ -0,0 +1,40 @@
+## Описание
+
+Структурный компонент, предназначенный для группировки связанного контента с поддержкой заголовков, описаний и гибких настроек макета. Это семантический псевдоним компонента Block с уровнем заголовка h4 по умолчанию.
+
+Group обеспечивает стандартизированный способ организации информации внутри страницы или другого компонента, гарантируя согласованную визуальную иерархию. Он наследует все возможности компонента Block, включая поддержку иконок, подписей и кастомизацию на основе слотов.
+
+**Основные возможности:**
+
+- Стандартизированная группировка контента с использованием тега `<div>`
+- Поддержка заголовков (`h4` по умолчанию), меток, описаний и подписей
+- Поддержка иконок
+- Полностью наследует возможности компонента Block
+- Гибкая компоновка для организации контента
+
+**Типичные сценарии использования:**
+
+- Подразделы внутри страницы
+- Группировка элементов внутри карточки или модального окна
+- Организация сложных форм в тематические области
+- Создание структурированных блоков контента с заголовками меньшего уровня
+
+```html
+<script setup>
+import { ref } from 'vue'
+</script>
+
+<template>
+  <Group
+    headline="Заголовок группы"
+    label="Метка группы"
+    description="Подробное описание для содержимого группы"
+    caption="Вспомогательный текст"
+    icon="folder"
+  >
+    Основной контент группы располагается здесь
+  </Group>
+</template>
+```
+
+> Group является идеальным выбором для создания семантических подструктур в вашем приложении.

package/src/media/mdx/Group/wikiMdxGroup.ts

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

package/src/media/mdx/HorizontalScroll/expose.toSelected.en.mdx

@@ -0,0 +1 @@
+- `toSelected(): void` — A method for programmatically scrolling the container to the selected element.

package/src/media/mdx/HorizontalScroll/expose.toSelected.ru.mdx

@@ -0,0 +1 @@
+- `toSelected(): void` — Метод для программной прокрутки контейнера к выбранному элементу.

package/src/media/mdx/HorizontalScroll/horizontalScroll.en.mdx

@@ -0,0 +1,62 @@
+Component for creating a horizontally scrollable container with support for smooth scrolling and automatic positioning.
+
+HorizontalScroll provides a convenient way to display content that exceeds the screen width, such as image galleries, card lists, or navigation menus. The component supports automatic scrolling to the selected element upon initialization and provides methods for programmatic scroll control.
+
+**Key Features:**
+
+- Horizontal content scrolling
+- Smooth scrolling
+- Automatic scrolling to the active element on load
+- Support for custom container tags
+- Slot with bindings (binds) for child elements
+- Scrollbar visibility control (flush mode)
+
+**Typical Use Cases:**
+
+- Image and media galleries
+- Horizontal product card lists
+- Scrollable navigation menus (tabs)
+- Tag or category lists
+- Timelines and step sequences
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const items = ref([
+  { id: 1, title: 'Item 1' },
+  { id: 2, title: 'Item 2' },
+  { id: 3, title: 'Item 3' },
+  { id: 4, title: 'Item 4' },
+  { id: 5, title: 'Item 5' }
+])
+</script>
+
+<template>
+  <HorizontalScroll>
+    <template #default="{ binds }">
+      <div
+        v-for="item in items"
+        :key="item.id"
+        v-bind="binds"
+        class="scroll-item"
+      >
+        {{ item.title }}
+      </div>
+    </template>
+  </HorizontalScroll>
+</template>
+
+<style scoped>
+.scroll-item {
+  min-width: 150px;
+  height: 100px;
+  margin-right: 16px;
+  background: #f5f5f5;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>
+```

package/src/media/mdx/HorizontalScroll/horizontalScroll.ru.mdx

@@ -0,0 +1,62 @@
+Компонент для создания горизонтально прокручиваемого контейнера с поддержкой плавного скролла и автоматического позиционирования.
+
+HorizontalScroll предоставляет удобный способ отображения контента, который не помещается по ширине экрана, например, галерей изображений, списков карточек или навигационных меню. Компонент поддерживает автоматическую прокрутку к выбранному элементу при инициализации и предоставляет методы для программного управления скроллом.
+
+**Основные возможности:**
+
+- Горизонтальная прокрутка контента
+- Плавный скролл (smooth scrolling)
+- Автоматическая прокрутка к активному элементу при загрузке
+- Поддержка пользовательских тегов для контейнера
+- Слот с передачей привязок (binds) для дочерних элементов
+- Управление видимостью скроллбара (flush режим)
+
+**Типичные сценарии использования:**
+
+- Галереи изображений и медиа-контента
+- Горизонтальные списки карточек товаров
+- Навигационные меню с прокруткой (табы)
+- Списки тегов или категорий
+- Таймлайны и последовательности шагов
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const items = ref([
+  { id: 1, title: 'Элемент 1' },
+  { id: 2, title: 'Элемент 2' },
+  { id: 3, title: 'Элемент 3' },
+  { id: 4, title: 'Элемент 4' },
+  { id: 5, title: 'Элемент 5' }
+])
+</script>
+
+<template>
+  <HorizontalScroll>
+    <template #default="{ binds }">
+      <div
+        v-for="item in items"
+        :key="item.id"
+        v-bind="binds"
+        class="scroll-item"
+      >
+        {{ item.title }}
+      </div>
+    </template>
+  </HorizontalScroll>
+</template>
+
+<style scoped>
+.scroll-item {
+  min-width: 150px;
+  height: 100px;
+  margin-right: 16px;
+  background: #f5f5f5;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>
+```

package/src/media/mdx/HorizontalScroll/selected.en.mdx

@@ -0,0 +1,33 @@
+## Selected Element
+
+The `selected` property allows you to control the visual state of the component, indicating that it is in a selected or active state.
+
+**Properties:**
+
+- `selected` — a boolean value determining whether the element is selected
+
+When the `selected` property is set to `true`, a special class (usually `--selected`) is added to the component, which changes its appearance (e.g., background color, border, or text) to highlight it among other elements. This is useful for implementing selection lists, active input fields, or other interactive elements where it is necessary to visually indicate the user's current choice.
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const isSelected = ref(true)
+</script>
+
+<template>
+  <!-- Selected state -->
+  <Textarea
+    v-model="value"
+    :selected="isSelected"
+    label="Active field"
+  />
+
+  <!-- Normal state -->
+  <Textarea
+    v-model="value2"
+    :selected="false"
+    label="Normal field"
+  />
+</template>
+```

package/src/media/mdx/HorizontalScroll/selected.ru.mdx

@@ -0,0 +1,33 @@
+## Выбранный элемент
+
+Свойство `selected` позволяет управлять визуальным состоянием компонента, указывая, что он находится в выбранном или активном состоянии.
+
+**Свойства:**
+
+- `selected` — булево значение, определяющее, выбран ли элемент
+
+Когда свойство `selected` установлено в `true`, к компоненту добавляется специальный класс (обычно `--selected`), который изменяет его внешний вид (например, цвет фона, границы или текста), чтобы выделить его среди других элементов. Это полезно для реализации списков выбора, активных полей ввода или других интерактивных элементов, где необходимо визуально обозначить текущий выбор пользователя.
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const isSelected = ref(true)
+</script>
+
+<template>
+  <!-- Выбранное состояние -->
+  <Textarea
+    v-model="value"
+    :selected="isSelected"
+    label="Активное поле"
+  />
+
+  <!-- Обычное состояние -->
+  <Textarea
+    v-model="value2"
+    :selected="false"
+    label="Обычное поле"
+  />
+</template>
+```

package/src/media/mdx/HorizontalScroll/wikiMdxHorizontalScroll.ts

@@ -0,0 +1,31 @@
+import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
+
+import exposeToSelectedEn from './expose.toSelected.en.mdx'
+import exposeToSelectedRu from './expose.toSelected.ru.mdx'
+import horizontalScrollEn from './horizontalScroll.en.mdx'
+import horizontalScrollRu from './horizontalScroll.ru.mdx'
+import selectedEn from './selected.en.mdx'
+import selectedRu from './selected.ru.mdx'
+
+/**
+ * MDX files for HorizontalScroll component
+ *
+ * MDX файлы для компонента HorizontalScroll
+ */
+export const wikiMdxHorizontalScroll: StorybookComponentsMdxItem = {
+  name: 'HorizontalScroll',
+  descriptions: {
+    'expose.toSelected': {
+      en: exposeToSelectedEn,
+      ru: exposeToSelectedRu
+    },
+    'horizontalScroll': {
+      en: horizontalScrollEn,
+      ru: horizontalScrollRu
+    },
+    'selected': {
+      en: selectedEn,
+      ru: selectedRu
+    }
+  }
+}

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

@@ -0,0 +1 @@
+- `isActive: ComputedRef<boolean>` — Computed state indicating whether the alternative representation is active (when both `active` and `iconActive` are set).

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

@@ -0,0 +1 @@
+- `isActive: ComputedRef<boolean>` — Вычисляемое состояние, указывающее активно ли альтернативное представление (когда одновременно установлены `active` и `iconActive`).