@dxtmisha/wiki 0.39.4 → 0.39.5

package/src/media/mdx/SnackbarItem/wikiMdxSnackbarItem.ts

@@ -0,0 +1,47 @@
+import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
+
+import snackbarItemEn from './snackbarItem.en.mdx'
+import snackbarItemRu from './snackbarItem.ru.mdx'
+
+import componentEn from './component.en.mdx'
+import componentRu from './component.ru.mdx'
+
+import htmlEn from './html.en.mdx'
+import htmlRu from './html.ru.mdx'
+
+import eventCloseEn from './event.close.en.mdx'
+import eventCloseRu from './event.close.ru.mdx'
+
+import roleEn from './role.en.mdx'
+import roleRu from './role.ru.mdx'
+
+/**
+ * MDX files for SnackbarItem component
+ *
+ * MDX файлы для компонента SnackbarItem
+ */
+export const wikiMdxSnackbarItem: StorybookComponentsMdxItem = {
+  name: 'SnackbarItem',
+  descriptions: {
+    snackbarItem: {
+      en: snackbarItemEn,
+      ru: snackbarItemRu
+    },
+    component: {
+      en: componentEn,
+      ru: componentRu
+    },
+    html: {
+      en: htmlEn,
+      ru: htmlRu
+    },
+    eventClose: {
+      en: eventCloseEn,
+      ru: eventCloseRu
+    },
+    role: {
+      en: roleEn,
+      ru: roleRu
+    }
+  }
+}

package/src/media/mdx/TabItem/tabItem.en.mdx

@@ -0,0 +1,52 @@
+A versatile component for creating tabs, menu items, and navigation links with icon and badge support.
+
+TabItem combines the functionality of a button, link, and list item. It supports various states (active, disabled), can display icons to the left and right of the text, and integrates with the Badge component to show notifications or counters. The component automatically manages ARIA attributes to ensure accessibility.
+
+**Key Features:**
+
+- Displaying a label and icons (icon, iconTrailing)
+- Built-in badge support for counters
+- Managing selection state (selected) and activity
+- Navigation support via href (link) or to (router-link)
+- Customizable root tag (button, a, div, li)
+- Ripple effect on click
+- Skeleton support for loading state
+
+**Typical Use Cases:**
+
+- Tabs in navigation bars
+- Dropdown menu items
+- Selection lists (select options)
+- Sidebar navigation menus
+- Links with icons and counters
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const activeTab = ref('home')
+</script>
+
+<template>
+  <div class="tabs">
+    <TabItem
+      label="Home"
+      icon="home"
+      :selected="activeTab === 'home'"
+      @click="activeTab = 'home'"
+    />
+    <TabItem
+      label="Messages"
+      icon="mail"
+      badge="5"
+      :selected="activeTab === 'messages'"
+      @click="activeTab = 'messages'"
+    />
+    <TabItem
+      label="Settings"
+      icon="settings"
+      disabled
+    />
+  </div>
+</template>
+```

package/src/media/mdx/TabItem/tabItem.ru.mdx

@@ -0,0 +1,38 @@
+Универсальный компонент для создания вкладок, элементов меню и навигационных ссылок с поддержкой иконок и бейджей.
+
+TabItem объединяет в себе функциональность кнопки, ссылки и элемента списка. Он поддерживает различные состояния (активное, отключенное), может отображать иконки слева и справа от текста, а также интегрируется с компонентом Badge для отображения уведомлений или счетчиков. Компонент автоматически управляет ARIA-атрибутами для обеспечения доступности.
+
+**Основные возможности:**
+
+- Отображение метки (label) и иконок (icon, iconTrailing)
+- Встроенная поддержка бейджа (badge) для счетчиков
+- Управление состоянием выбора (selected) и активности
+- Поддержка навигации через href (ссылка) или to (router-link)
+- Настраиваемый корневой тег (button, a, div, li)
+- Эффект ряби (ripple) при клике
+- Поддержка скелетона (skeleton) для состояния загрузки
+
+**Типичные сценарии использования:**
+
+- Вкладки в навигационных панелях
+- Элементы выпадающих меню
+- Списки выбора (select options)
+- Боковое меню навигации
+- Ссылки с иконками и счетчиками
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const activeTab = ref('home')
+</script>
+
+<template>
+  <TabItem
+      label="Главная"
+      icon="home"
+      :selected="activeTab === 'home'"
+      @click="activeTab = 'home'"
+    />
+</template>
+```

package/src/media/mdx/TabItem/wikiMdxTabItem.ts

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

package/src/media/mdx/Tabs/tabs.en.mdx

@@ -0,0 +1,44 @@
+Component for creating tabs with navigation and animated content switching.
+
+Tabs combines a navigation bar (TabsNavigation) and a content area (MotionAxis), ensuring synchronized switching between tabs. The component supports horizontal scrolling of headers, various display styles, and content transition animations.
+
+**Key Features:**
+
+- Automatic synchronization of the selected tab and content
+- Horizontal scrolling support for a large number of tabs
+- Animated transitions between content panels
+- Flexible customization of tab appearance (icons, labels)
+- State management via v-model:selected
+
+**Typical Use Cases:**
+
+- Organizing page content by categories
+- Switching between different data views
+- Navigation within modal windows or cards
+- Creating step-by-step wizards
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const selected = ref('tab1')
+const tabs = [
+  { text: 'Tab 1', value: 'tab1' },
+  { text: 'Tab 2', value: 'tab2' },
+  { text: 'Tab 3', value: 'tab3' }
+]
+</script>
+
+<template>
+  <Tabs
+    v-model:selected="selected"
+    :list="tabs"
+  >
+    <template #default="{ item }">
+      <div class="p-4">
+        Content for {{ item.text }}
+      </div>
+    </template>
+  </Tabs>
+</template>
+```

package/src/media/mdx/Tabs/tabs.ru.mdx

@@ -0,0 +1,44 @@
+Компонент для создания вкладок с навигацией и анимированным переключением контента.
+
+Tabs объединяет навигационную панель (TabsNavigation) и область контента (MotionAxis), обеспечивая синхронизированное переключение между вкладками. Компонент поддерживает горизонтальную прокрутку заголовков, различные стили отображения и анимацию смены содержимого.
+
+**Основные возможности:**
+
+- Автоматическая синхронизация выбранной вкладки и контента
+- Поддержка горизонтальной прокрутки для большого количества вкладок
+- Анимированные переходы между панелями контента
+- Гибкая настройка внешнего вида вкладок (иконки, метки)
+- Управление состоянием через v-model:selected
+
+**Типичные сценарии использования:**
+
+- Организация контента на странице по категориям
+- Переключение между различными видами данных
+- Навигация внутри модальных окон или карточек
+- Создание пошаговых мастеров (wizards)
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const selected = ref('tab1')
+const tabs = [
+  { text: 'Вкладка 1', value: 'tab1' },
+  { text: 'Вкладка 2', value: 'tab2' },
+  { text: 'Вкладка 3', value: 'tab3' }
+]
+</script>
+
+<template>
+  <Tabs
+    v-model:selected="selected"
+    :list="tabs"
+  >
+    <template #default="{ item }">
+      <div class="p-4">
+        Контент для {{ item.text }}
+      </div>
+    </template>
+  </Tabs>
+</template>
+```

package/src/media/mdx/Tabs/v-model.en.mdx

@@ -0,0 +1,27 @@
+## State Management via v-model
+
+Two-way binding of the selected tab via `v-model:selected`.
+
+**Parameters:**
+- `selected: any` — the value of the selected tab
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const selectedTab = ref('home')
+</script>
+
+<template>
+  <Tabs
+    v-model:selected="selectedTab"
+    :tabs="[
+      { label: 'Home', value: 'home' },
+      { label: 'Profile', value: 'profile' }
+    ]"
+  >
+    <template #home>Home Content</template>
+    <template #profile>Profile Content</template>
+  </Tabs>
+</template>
+```

package/src/media/mdx/Tabs/v-model.ru.mdx

@@ -0,0 +1,27 @@
+## Управление состоянием через v-model
+
+Двусторонняя привязка выбранной вкладки через `v-model:selected`.
+
+**Параметры:**
+- `selected: any` — значение выбранной вкладки
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const selectedTab = ref('home')
+</script>
+
+<template>
+  <Tabs
+    v-model:selected="selectedTab"
+    :tabs="[
+      { label: 'Home', value: 'home' },
+      { label: 'Profile', value: 'profile' }
+    ]"
+  >
+    <template #home>Home Content</template>
+    <template #profile>Profile Content</template>
+  </Tabs>
+</template>
+```

package/src/media/mdx/Tabs/wikiMdxTabs.ts

@@ -0,0 +1,25 @@
+import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
+
+import tabsEn from './tabs.en.mdx'
+import tabsRu from './tabs.ru.mdx'
+import vModelEn from './v-model.en.mdx'
+import vModelRu from './v-model.ru.mdx'
+
+/**
+ * MDX files for Tabs component
+ *
+ * MDX файлы для компонента Tabs
+ */
+export const wikiMdxTabs: StorybookComponentsMdxItem = {
+  name: 'Tabs',
+  descriptions: {
+    'tabs': {
+      en: tabsEn,
+      ru: tabsRu
+    },
+    'v-model': {
+      en: vModelEn,
+      ru: vModelRu
+    }
+  }
+}

package/src/media/mdx/TabsNavigation/tabsNavigation.en.mdx

@@ -0,0 +1,40 @@
+Component for creating horizontal navigation with tabs.
+
+TabsNavigation manages a list of tabs, their selection, and scrolling. It supports various display styles, keyboard control, and responsiveness.
+
+**Key Features:**
+
+- Horizontal scrolling of tabs
+- Management of the selected tab via `v-model:selected`
+- Support for various data types (array of objects or object)
+- Customization of appearance (tags, attributes, dividers)
+- Keyboard navigation support (arrows, Enter, Space)
+- Animation of the active tab indicator
+
+**Typical Usage Scenarios:**
+
+- Navigation between page sections
+- Switching data display views
+- Content filtering by categories
+- Main application menu (tab style)
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const selectedTab = ref('home')
+const tabs = [
+  { label: 'Home', value: 'home', icon: 'home' },
+  { label: 'Profile', value: 'profile', icon: 'person' },
+  { label: 'Settings', value: 'settings', icon: 'settings' }
+]
+</script>
+
+<template>
+  <TabsNavigation
+    v-model:selected="selectedTab"
+    :list="tabs"
+    horizontal-scroll-align="center"
+  />
+</template>
+```

package/src/media/mdx/TabsNavigation/tabsNavigation.ru.mdx

@@ -0,0 +1,40 @@
+Компонент для создания горизонтальной навигации с вкладками.
+
+TabsNavigation управляет списком вкладок, их выбором и прокруткой. Поддерживает различные стили отображения, управление с клавиатуры и адаптивность.
+
+**Основные возможности:**
+
+- Горизонтальная прокрутка вкладок
+- Управление выбранной вкладкой через `v-model:selected`
+- Поддержка различных типов данных (массив объектов или объект)
+- Настройка внешнего вида (теги, атрибуты, разделители)
+- Поддержка клавиатурной навигации (стрелки, Enter, Пробел)
+- Анимация индикатора активной вкладки
+
+**Типичные сценарии использования:**
+
+- Навигация между разделами страницы
+- Переключение видов отображения данных
+- Фильтрация контента по категориям
+- Главное меню приложения (в стиле вкладок)
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const selectedTab = ref('home')
+const tabs = [
+  { label: 'Главная', value: 'home', icon: 'home' },
+  { label: 'Профиль', value: 'profile', icon: 'person' },
+  { label: 'Настройки', value: 'settings', icon: 'settings' }
+]
+</script>
+
+<template>
+  <TabsNavigation
+    v-model:selected="selectedTab"
+    :list="tabs"
+    horizontal-scroll-align="center"
+  />
+</template>
+```

package/src/media/mdx/TabsNavigation/v-model.en.mdx

@@ -0,0 +1,27 @@
+## State Management via v-model
+
+Two-way binding of the selected tab via `v-model:selected`.
+
+**Parameters:**
+- `selected: string | number | array` — value of the selected tab (or tabs)
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const selectedTab = ref('home')
+const tabs = [
+  { label: 'Home', value: 'home' },
+  { label: 'Profile', value: 'profile' }
+]
+</script>
+
+<template>
+  <p>Selected: {{ selectedTab }}</p>
+
+  <TabsNavigation
+    v-model:selected="selectedTab"
+    :list="tabs"
+  />
+</template>
+```

package/src/media/mdx/TabsNavigation/v-model.ru.mdx

@@ -0,0 +1,27 @@
+## Управление состоянием через v-model
+
+Двусторонняя привязка выбранной вкладки через `v-model:selected`.
+
+**Параметры:**
+- `selected: string | number | array` — значение выбранной вкладки (или вкладок)
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const selectedTab = ref('home')
+const tabs = [
+  { label: 'Главная', value: 'home' },
+  { label: 'Профиль', value: 'profile' }
+]
+</script>
+
+<template>
+  <p>Выбрано: {{ selectedTab }}</p>
+
+  <TabsNavigation
+    v-model:selected="selectedTab"
+    :list="tabs"
+  />
+</template>
+```

package/src/media/mdx/TabsNavigation/wikiMdxTabsNavigation.ts

@@ -0,0 +1,25 @@
+import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
+
+import tabsNavigationEn from './tabsNavigation.en.mdx'
+import tabsNavigationRu from './tabsNavigation.ru.mdx'
+import vModelEn from './v-model.en.mdx'
+import vModelRu from './v-model.ru.mdx'
+
+/**
+ * MDX files for TabsNavigation component
+ *
+ * MDX файлы для компонента TabsNavigation
+ */
+export const wikiMdxTabsNavigation: StorybookComponentsMdxItem = {
+  name: 'TabsNavigation',
+  descriptions: {
+    'tabsNavigation': {
+      en: tabsNavigationEn,
+      ru: tabsNavigationRu
+    },
+    'v-model': {
+      en: vModelEn,
+      ru: vModelRu
+    }
+  }
+}

package/src/media/mdx/Textarea/autosize.en.mdx

@@ -0,0 +1,35 @@
+## Automatic Resizing
+
+The `autosize` property controls the automatic resizing of the textarea height based on its content.
+
+**Properties:**
+
+- `autosize` — enables automatic resizing mode (default is `true`).
+- `rows` — number of visible rows (HTML attribute).
+
+When `autosize` is enabled, the `Textarea` will dynamically adjust its height to fit all entered text.
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const text = ref('')
+</script>
+
+<template>
+  <!-- Default automatic resizing -->
+  <Textarea
+    v-model="text"
+    label="Comment"
+    placeholder="Enter text..."
+  />
+
+  <!-- Disabled auto-resizing -->
+  <Textarea
+    v-model="text"
+    label="Fixed size"
+    :autosize="false"
+    rows="5"
+  />
+</template>
+```

package/src/media/mdx/Textarea/autosize.ru.mdx

@@ -0,0 +1,35 @@
+## Автоматическое изменение размера
+
+Свойство `autosize` управляет автоматическим изменением высоты текстового поля в зависимости от содержимого.
+
+**Свойства:**
+
+- `autosize` — включает режим автоматического изменения размера (по умолчанию `true`).
+- `rows` — количество видимых строк (атрибут HTML).
+
+Когда `autosize` включен, `Textarea` будет динамически изменять свою высоту, чтобы вместить весь введенный текст.
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const text = ref('')
+</script>
+
+<template>
+  <!-- Автоматическое изменение размера по умолчанию -->
+  <Textarea
+    v-model="text"
+    label="Комментарий"
+    placeholder="Введите текст..."
+  />
+
+  <!-- Отключенное авто-изменение размера -->
+  <Textarea
+    v-model="text"
+    label="Фиксированный размер"
+    :autosize="false"
+    rows="5"
+  />
+</template>
+```

package/src/media/mdx/Textarea/textarea.en.mdx

@@ -0,0 +1,39 @@
+Multi-line text input component with support for auto-sizing, validation, and advanced styling.
+
+Textarea provides a convenient interface for entering large amounts of text. The component automatically adjusts its height to fit the content, supports character limits, icons, labels, and helper messages. Integrates with the form validation system.
+
+**Key Features:**
+
+- Automatic height adjustment (autosize)
+- Validation support and error display
+- Built-in character counter
+- Support for icons, prefixes, and suffixes
+- Floating or static label
+- States: active, disabled, read-only, loading
+- Theme and size customization
+
+**Typical Use Cases:**
+
+- Comment and feedback fields
+- Contact forms
+- Description or biography editors
+- Address or note input
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const comment = ref('')
+</script>
+
+<template>
+  <Textarea
+    v-model="comment"
+    label="Your comment"
+    placeholder="Enter text..."
+    autosize
+    counter
+    :maxlength="500"
+  />
+</template>
+```

package/src/media/mdx/Textarea/textarea.ru.mdx

@@ -0,0 +1,39 @@
+Компонент многострочного ввода текста с поддержкой автоматического изменения размера, валидации и расширенной стилизации.
+
+Textarea предоставляет удобный интерфейс для ввода больших объемов текста. Компонент автоматически подстраивает высоту под содержимое, поддерживает ограничение количества символов, отображение иконок, меток и вспомогательных сообщений. Интегрируется с системой валидации форм.
+
+**Основные возможности:**
+
+- Автоматическое изменение высоты (autosize)
+- Поддержка валидации и отображение ошибок
+- Встроенный счетчик символов
+- Поддержка иконок, префиксов и суффиксов
+- Плавающая или статическая метка (label)
+- Состояния: активное, отключенное, только для чтения, загрузка
+- Настройка темы и размеров
+
+**Типичные сценарии использования:**
+
+- Поля для комментариев и отзывов
+- Формы обратной связи
+- Редакторы описания или биографии
+- Ввод адреса или заметок
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const comment = ref('')
+</script>
+
+<template>
+  <Textarea
+    v-model="comment"
+    label="Ваш комментарий"
+    placeholder="Введите текст..."
+    autosize
+    counter
+    :maxlength="500"
+  />
+</template>
+```

package/src/media/mdx/Textarea/wikiMdxTextarea.ts

@@ -0,0 +1,25 @@
+import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
+
+import autosizeEn from './autosize.en.mdx'
+import autosizeRu from './autosize.ru.mdx'
+import textareaEn from './textarea.en.mdx'
+import textareaRu from './textarea.ru.mdx'
+
+/**
+ * MDX files for Textarea component
+ *
+ * MDX файлы для компонента Textarea
+ */
+export const wikiMdxTextarea: StorybookComponentsMdxItem = {
+  name: 'Textarea',
+  descriptions: {
+    autosize: {
+      en: autosizeEn,
+      ru: autosizeRu
+    },
+    textarea: {
+      en: textareaEn,
+      ru: textareaRu
+    }
+  }
+}