@dxtmisha/wiki 0.24.3 → 0.39.1

package/src/media/mdx/Modal/wikiMdxModal.ts

@@ -0,0 +1,25 @@
+import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
+
+import differencesEn from './differences.en.mdx'
+import differencesRu from './differences.ru.mdx'
+import modalEn from './modal.en.mdx'
+import modalRu from './modal.ru.mdx'
+
+/**
+ * MDX files for Modal component
+ *
+ * MDX файлы для компонента Modal
+ */
+export const wikiMdxModal: StorybookComponentsMdxItem = {
+  name: 'Modal',
+  descriptions: {
+    differences: {
+      en: differencesEn,
+      ru: differencesRu
+    },
+    modal: {
+      en: modalEn,
+      ru: modalRu
+    }
+  }
+}

package/src/media/mdx/MotionTransform/expose.motionTransformElement.en.mdx

@@ -0,0 +1,13 @@
+### `motionTransformElement`
+
+Reactive reference to the nested MotionTransform component's expose API, providing programmatic access to control methods.
+
+**Type:** `Ref<ConstrBind<MotionTransformExpose> | undefined>`
+
+**Methods via motionTransformElement.value:**
+- `open` — reactive open state
+- `isShow` — computed visibility state
+- `setOpen(open: boolean)` — set open state
+- `toOpen()` — open component
+- `toClose()` — close component
+- `toggle()` — toggle state

package/src/media/mdx/MotionTransform/expose.motionTransformElement.ru.mdx

@@ -0,0 +1,14 @@
+### `motionTransformElement`
+
+Реактивная ссылка на expose API вложенного компонента MotionTransform, предоставляющая программный доступ к методам управления.
+
+**Тип:** `Ref<ConstrBind<MotionTransformExpose> | undefined>`
+
+**Методы через motionTransformElement.value:**
+- `open` — реактивное состояние открытия
+- `isShow` — вычисляемое состояние видимости
+- `setOpen(open: boolean)` — установить состояние открытия
+- `toOpen()` — открыть компонент
+- `toClose()` — закрыть компонент
+- `toggle()` — переключить состояние
+

package/src/media/mdx/MotionTransform/wikiMdxMotionTransform.ts

@@ -8,6 +8,8 @@ import eventsEn from './events.en.mdx'
 import eventsRu from './events.ru.mdx'
 import exposeIsShowEn from './expose.isShow.en.mdx'
 import exposeIsShowRu from './expose.isShow.ru.mdx'
+import exposeMotionTransformElementEn from './expose.motionTransformElement.en.mdx'
+import exposeMotionTransformElementRu from './expose.motionTransformElement.ru.mdx'
 import ignoreEn from './ignore.en.mdx'
 import ignoreRu from './ignore.ru.mdx'
 import motionTransformEn from './motionTransform.en.mdx'
@@ -41,6 +43,10 @@ export const wikiMdxMotionTransform: StorybookComponentsMdxItem = {
       en: exposeIsShowEn,
       ru: exposeIsShowRu
     },
+    'expose.motionTransformElement': {
+      en: exposeMotionTransformElementEn,
+      ru: exposeMotionTransformElementRu
+    },
     'ignore': {
       en: ignoreEn,
       ru: ignoreRu

package/src/media/mdx/Page/page.en.mdx

@@ -0,0 +1,38 @@
+## Description
+
+A top-level semantic container component designed to wrap the main content of a page. It uses the `<main>` tag by default.
+
+Page provides capabilities for displaying main headlines, labels, descriptions, captions, and icons. The main purpose of the component is to designate the unique part of the document's content, which is critical for accessibility and SEO. The headline is rendered as `<h1>` by default.
+
+**Key Features:**
+
+- Semantic wrapper for main content (`<main>` tag)
+- Support for main headlines (default `<h1>`), labels, descriptions, and captions
+- Support for icons
+- Customizable layout and spacing
+- Full support for slots for content customization
+
+**Typical Use Cases:**
+
+- Wrapper for unique page content
+- Main application screen
+- Article or documentation page
+- Root element for routed components (views)
+
+```html
+<script setup>
+import { ref } from 'vue'
+</script>
+
+<template>
+  <Page
+    headline="Main Page Title"
+    label="Category"
+    description="Brief description of the page content"
+  >
+    <p>Unique page content...</p>
+  </Page>
+</template>
+```
+
+> Page should be used once per page (or per active view) and should not include repeated navigation elements.

package/src/media/mdx/Page/page.ru.mdx

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

package/src/media/mdx/Page/wikiMdxPage.ts

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

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/TextareaAutosize/textarea-autosize.en.mdx

@@ -0,0 +1,65 @@
+Text field component that automatically adjusts its height based on content.
+
+TextareaAutosize provides a multi-line text field that dynamically changes its height depending on the amount of entered text. The component uses a hidden clone element for precise height calculation, taking into account all padding and styles of the original textarea. This ensures smooth and natural behavior when entering text without manual height adjustment.
+
+**Key features:**
+
+- Automatic height adjustment based on content
+- Precise size calculation considering padding and styles
+- Smooth height transitions on content change
+- Optional autosize toggle for fixed height
+- Support for all standard textarea attributes
+- Reactive value binding with input events
+- Optimized performance through requestAnimationFrame
+
+**Common use cases:**
+
+- Comment and review fields
+- Feedback forms with long texts
+- Description and notes editors
+- Chats and messengers
+- Forms with dynamic content
+- Multi-line fields in adaptive interfaces
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const message = ref('')
+
+const handleInput = (event) => {
+  console.log('Current value:', event.target.value)
+}
+</script>
+
+<template>
+  <div class="form">
+    <TextareaAutosize
+      v-model="message"
+      :inputAttrs="{
+        placeholder: 'Enter your message...',
+        maxlength: 500
+      }"
+      @input="handleInput"
+    />
+
+    <TextareaAutosize
+      value="Text field with fixed height"
+      :autosize="false"
+      :inputAttrs="{
+        placeholder: 'Height does not change',
+        rows: 3
+      }"
+    />
+
+    <TextareaAutosize
+      :inputAttrs="{
+        placeholder: 'Comment',
+        'aria-label': 'Comment field',
+        required: true
+      }"
+    />
+  </div>
+</template>
+```
+