@dxtmisha/wiki 0.39.2 → 0.39.4

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

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

@@ -1,38 +0,0 @@
-## Описание
-
-Семантический компонент-контейнер, предназначенный для группировки связанного контента. По умолчанию использует тег `<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

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

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

@@ -1,69 +0,0 @@
-Компонент для создания выпадающих списков выбора с поддержкой поиска, фильтрации, множественного выбора и валидации.
-
-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

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

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

@@ -1,64 +0,0 @@
-Компонент для отображения выбранных значений в элементах управления выбором с поддержкой одиночного и множественного режимов.
-
-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

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

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

@@ -1,13 +0,0 @@
-## 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 +0,0 @@
-- `isActive: ComputedRef<boolean>` — Computed state indicating whether the skeleton background animation is active.

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

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

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

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

@@ -1,45 +0,0 @@
-Компонент для создания анимированных заглушек интерфейса во время загрузки контента.
-
-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>
-```

package/src/media/mdx/Skeleton/wikiMdxSkeleton.ts

@@ -1,28 +0,0 @@
-import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
-
-import skeletonEn from './skeleton.en.mdx'
-import skeletonRu from './skeleton.ru.mdx'
-
-import exposeIsActiveEn from './expose.isActive.en.mdx'
-import exposeIsActiveRu from './expose.isActive.ru.mdx'
-
-import classesEn from './classes.en.mdx'
-import classesRu from './classes.ru.mdx'
-
-export const wikiMdxSkeleton: StorybookComponentsMdxItem = {
-  name: 'Skeleton',
-  descriptions: {
-    'active': {
-      en: skeletonEn,
-      ru: skeletonRu
-    },
-    'expose.isActive': {
-      en: exposeIsActiveEn,
-      ru: exposeIsActiveRu
-    },
-    'classes': {
-      en: classesEn,
-      ru: classesRu
-    }
-  }
-}

package/src/media/mdx/Snackbar/adaptation.en.mdx

@@ -1,10 +0,0 @@
-## Adaptation and Behavior
-
-The `all`, `full`, and `limit` property group allows for fine-tuning notification behavior for different device types and data volumes.
-
-**Features:**
-- `all` — displays all active notifications without automatically hiding them in a stack.
-- `full` — enables full-screen or full-width display, which is a standard pattern for mobile devices.
-- `limit` — limits the maximum number of simultaneously visible notifications, preventing screen clutter.
-
-> These properties are intended solely for configuring behavior and adaptation for different screen sizes. It is recommended to define these values in the `properties.json` configuration file.

package/src/media/mdx/Snackbar/adaptation.ru.mdx

@@ -1,10 +0,0 @@
-## Адаптация и поведение
-
-Группа свойств `all`, `full` и `limit` позволяет тонко настроить поведение уведомлений для различных типов устройств и объемов данных.
-
-**Особенности:**
-- `all` — отображает все активные уведомления без автоматического скрытия их в стек.
-- `full` — включает полноэкранное или полноширинное отображение, что является стандартным паттерном для мобильных устройств.
-- `limit` — ограничивает максимальное количество одновременно видимых уведомлений, предотвращая загромождение экрана.
-
-> Данные свойства предназначены исключительно для настройки поведения и адаптации под различные экраны. Рекомендуется задавать эти значения в конфигурационном файле `properties.json`.

package/src/media/mdx/Snackbar/add.en.mdx

@@ -1,44 +0,0 @@
-## Adding Notifications
-
-The primary interaction with the `Snackbar` component occurs through the `add` method, which is used to dynamically push new messages into the queue.
-
-### Method add()
-
-The component instance (via `ref`) provides a `data` object containing the `add(item: SnackbarValue)` method. The `item` parameter determines the configuration and behavior of the new notification.
-
-```typescript
-snackbar.value?.data.add({
-  data: {
-    label: 'Notification Title',
-    description: 'Description of the occurring event'
-  }
-})
-```
-
-### SnackbarValue Structure
-
-The configuration object includes the following properties:
-
-- **`data`** (`SnackbarItemProps`) — Properties for the rendered component (by default `SnackbarItem`). This is where you pass information like `label`, `description`, `icon`, action buttons, and other visual data.
-- **`component`** (`any`) — Allows for passing a custom Vue component to be rendered instead of the standard `SnackbarItem`.
-- **`highPriority`** (`boolean`) — If `true`, the notification is displayed in a separate priority container (usually pinned to the top or the start of the list).
-- **`delay`** (`number`) — Individual lifespan of the notification in milliseconds. If omitted, the global `delay` value from the `Snackbar` settings is used.
-- **`value`** (`string`) — A unique key for the notification. If omitted, it is generated automatically. Used for manual removal of the message via the `remove(value)` method.
-
-### Custom Components
-
-For notifications with non-standard layouts, you can pass your own component via the `component` property. All properties specified in the `data` object will be passed to your component as `props`.
-
-```typescript
-import MyAlert from './MyAlert.vue'
-
-snackbar.value?.data.add({
-  component: MyAlert,
-  data: {
-    title: 'Warning!',
-    message: 'This is a message with custom styling'
-  }
-})
-```
-
-The `highPriority` property is recommended for critical system notifications or authorization errors, ensuring they reliably catch the user's attention and are displayed separately from the general message flow.