@dxtmisha/wiki 0.39.2 → 0.39.4

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

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

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

@@ -1,23 +0,0 @@
-## Описание
-
-Компонент макета для создания сеточных структур с настраиваемыми колонками.
-
-**Основные возможности:**
-
-- Гибкая сеточная система (по умолчанию 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

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

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

@@ -1,27 +0,0 @@
-## Описание
-
-Отдельный элемент внутри компонента 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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,33 +0,0 @@
-## Выбранный элемент
-
-Свойство `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

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

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

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

package/src/media/mdx/Icon/icon.en.mdx

@@ -1,77 +0,0 @@
-## Icon State Management
-
-A component for displaying icons with support for active state, rotation, loading, and skeleton integration.
-
-Icon provides a unified interface for working with icons in the design system, supporting both the main icon and an alternative for the active state. The component automatically manages switching between icons, handles loading events, and integrates with the skeleton system to display loading states.
-
-**Key Features:**
-
-- Display of main and active icons with smooth transitions
-- Icon rotation at a specified angle
-- Disabled and hide states for visibility control
-- Image loading events for icons
-- Integration with Skeleton for loading states
-- Support within other components (Button, Cell, Chip, Field)
-
-**Typical Use Cases:**
-
-- Icons in buttons and navigation elements
-- Interactive icons with state changes
-- State indicators in forms and lists
-- Decorative interface elements with animation
-
-### Properties
-
-- **`icon`** — The main icon displayed by default.
-- **`iconActive`** — The icon that is displayed when the component is in an active state (`active` = `true`).
-- **`active`** — A boolean property that toggles the component's state between normal and active.
-
-### Description
-
-- The `icon` property is essential for displaying the icon.
-- If `iconActive` is not provided, there will be no visual change when the `active` state changes.
-- When `active` is set to `true`, the component will attempt to display the icon specified in `iconActive`.
-- The `active` property can be used to create toggles, indicators, and other interactive elements.
-
-### Recommendations
-
-- Use `iconActive` to provide visual feedback upon user interaction (e.g., on click or selection).
-- Ensure that `icon` and `iconActive` are visually distinct enough for the user to easily identify the state change.
-
-### Usage Example
-
-```html
-<script setup>
-import { ref } from 'vue'
-import { D1Icon } from '@dxtmisha/d1'
-
-const isActive = ref(false)
-</script>
-
-<template>
-  <!-- Normal icon -->
-  <D1Icon icon="home" />
-
-  <!-- Active icon -->
-  <!-- `favorite` will be displayed because active=true -->
-  <D1Icon icon="favorite_border" icon-active="favorite" :active="true" />
-
-  <!-- Dynamic state toggle -->
-  <D1Icon
-    icon="visibility"
-    icon-active="visibility_off"
-    :active="isVisible"
-    @click="isVisible = !isVisible"
-  />
-
-  <D1Icon
-    icon="home"
-    icon-active="favorite"
-    :active="isActive"
-    turn="90"
-    @load="onIconLoad"
-  />
-</template>
-```
-
-> The Icon component can be used both standalone and as part of other UI components through the `icon`, `icon-trailing`, and `icon-active` properties.

package/src/media/mdx/Icon/icon.ru.mdx

@@ -1,42 +0,0 @@
-## Icon
-
-Компонент для отображения иконок с поддержкой активного состояния, поворота, загрузки и интеграции со скелетоном.
-
-Icon предоставляет унифицированный интерфейс для работы с иконками в дизайн-системе, поддерживая как основную иконку, так и альтернативную для активного состояния. Компонент автоматически управляет переключением между иконками, обрабатывает события загрузки и интегрируется с системой скелетонов для отображения состояния загрузки.
-
-**Основные возможности:**
-
-- Отображение основной и активной иконки с плавным переключением
-- Поворот иконки на заданный угол
-- Состояния disabled и hide для управления видимостью
-- События загрузки изображений иконок
-- Интеграция со Skeleton для состояний загрузки
-- Поддержка в составе других компонентов (Button, Cell, Chip, Field)
-
-**Типичные сценарии использования:**
-
-- Иконки в кнопках и навигационных элементах
-- Интерактивные иконки с изменением состояния
-- Индикаторы состояния в формах и списках
-- Декоративные элементы интерфейса с анимацией
-
-```html
-<script setup>
-import { ref } from 'vue'
-import { D1Icon } from '@dxtmisha/d1'
-
-const isActive = ref(false)
-</script>
-
-<template>
-  <D1Icon
-    icon="home"
-    icon-active="favorite"
-    :active="isActive"
-    turn="90"
-    @load="onIconLoad"
-  />
-</template>
-```
-
-> Компонент Icon может использоваться как самостоятельно, так и в составе других UI-компонентов через свойства `icon`, `icon-trailing` и `icon-active`.

package/src/media/mdx/Icon/wikiMdxIcon.ts

@@ -1,21 +0,0 @@
-import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
-
-import iconEn from './icon.en.mdx'
-import iconRu from './icon.ru.mdx'
-
-import exposeIsActiveEn from './expose.isActive.en.mdx'
-import exposeIsActiveRu from './expose.isActive.ru.mdx'
-
-export const wikiMdxIcon: StorybookComponentsMdxItem = {
-  name: 'Icon',
-  descriptions: {
-    'icon': {
-      en: iconEn,
-      ru: iconRu
-    },
-    'expose.isActive': {
-      en: exposeIsActiveEn,
-      ru: exposeIsActiveRu
-    }
-  }
-}