@dxtmisha/wiki 0.39.3 → 0.39.5

package/src/media/mdx/Button/outline.en.mdx

@@ -0,0 +1,16 @@
+## Outline buttons
+
+Button component supports outline mode through the `outline` property. In this mode, buttons have a minimalist visual style with transparent background and colored border:
+
+- **Minimalist design** - suitable for interfaces requiring reduced visual load
+- **Transparent background** - maintains clean appearance while remaining interactive
+- **Hover feedback** - background appears on hover for better user interaction
+- **Icon support** - works seamlessly with icons for enhanced clarity
+
+Outline mode is especially useful for creating tertiary actions, filter controls, and secondary options in cards or lists that need to be accessible without excessive visual noise.
+
+```html
+<Button outline icon="filter">Filter</Button>
+<Button outline icon="sort">Sort</Button>
+<Button outline>More options</Button>
+```

package/src/media/mdx/Button/outline.ru.mdx

@@ -0,0 +1,16 @@
+## Контурные кнопки (outline)
+
+Компонент Button поддерживает контурный режим через свойство `outline`. В этом режиме кнопки имеют минималистичный визуальный стиль с прозрачным фоном и цветной границей:
+
+- **Минималистичный дизайн** - подходит для интерфейсов, требующих сниженной визуальной нагрузки
+- **Прозрачный фон** - поддерживает чистый внешний вид, оставаясь интерактивными
+- **Обратная связь при наведении** - фон появляется при наведении для лучшего взаимодействия с пользователем
+- **Поддержка иконок** - бесшовно работает с иконками для улучшенной ясности
+
+Outline режим особенно полезен для создания третичных действий, элементов управления фильтрами и второстепенных опций в карточках или списках, которые должны быть доступны без излишнего визуального шума.
+
+```html
+<Button outline icon="filter">Фильтр</Button>
+<Button outline icon="sort">Сортировка</Button>
+<Button outline>Дополнительно</Button>
+```

package/src/media/mdx/Button/primary.en.mdx

@@ -0,0 +1,16 @@
+## Primary buttons
+
+Button component supports primary mode through the `primary` property. In this mode, buttons have a distinctive visual style for the most important actions:
+
+- **Visual emphasis** - stands out prominently among other interface elements
+- **Action hierarchy** - indicates the main or priority action on the page
+- **High contrast** - automatically applies high-contrast colors for better visibility
+- **Icon support** - enhances understanding of purpose through visual elements
+
+Primary mode is especially useful for creating main call-to-action buttons, form submissions, and confirmation actions that require user attention and should be immediately recognizable in the interface.
+
+```html
+<Button primary icon="send">Submit</Button>
+<Button primary icon="save">Save</Button>
+<Button primary>Confirm</Button>
+```

package/src/media/mdx/Button/primary.ru.mdx

@@ -0,0 +1,16 @@
+## Основные кнопки (primary)
+
+Компонент Button поддерживает основной режим через свойство `primary`. В этом режиме кнопки имеют выделяющийся визуальный стиль для самых важных действий:
+
+- **Визуальный акцент** - выделяются заметно среди других элементов интерфейса
+- **Иерархия действий** - указывают на основное или приоритетное действие на странице
+- **Высокая контрастность** - автоматически применяются высококонтрастные цвета для лучшей видимости
+- **Поддержка иконок** - улучшают понимание назначения через визуальные элементы
+
+Primary режим особенно полезен для создания основных кнопок призыва к действию, отправки форм и подтверждающих действий, которые требуют внимания пользователя и должны быть сразу узнаваемы в интерфейсе.
+
+```html
+<Button primary icon="send">Отправить</Button>
+<Button primary icon="save">Сохранить</Button>
+<Button primary>Подтвердить</Button>
+```

package/src/media/mdx/Button/secondary.en.mdx

@@ -0,0 +1,16 @@
+## Secondary buttons
+
+Button component supports secondary mode through the `secondary` property. In this mode, buttons have a less prominent visual style for alternative or supporting actions:
+
+- **Moderate emphasis** - less intrusive than primary buttons while remaining clear
+- **Action alternatives** - provides users with alternative choices without overwhelming them
+- **Balanced contrast** - uses colors with moderate contrast for better visual hierarchy
+- **Icon support** - maintains consistency with other button variants through visual elements
+
+Secondary mode is especially useful for creating cancel buttons, reset actions, and alternative choices that support the main flow without competing for primary attention in the interface.
+
+```html
+<Button secondary icon="close">Cancel</Button>
+<Button secondary icon="refresh">Reset</Button>
+<Button secondary>Skip</Button>
+```

package/src/media/mdx/Button/secondary.ru.mdx

@@ -0,0 +1,16 @@
+## Второстепенные кнопки (secondary)
+
+Компонент Button поддерживает второстепенный режим через свойство `secondary`. В этом режиме кнопки имеют менее заметный визуальный стиль для альтернативных или поддерживающих действий:
+
+- **Умеренный акцент** - менее навязчивы чем основные кнопки, оставаясь при этом понятными
+- **Альтернативные действия** - предоставляют пользователям альтернативный выбор без перегрузки
+- **Сбалансированная контрастность** - используют цвета с умеренным контрастом для лучшей визуальной иерархии
+- **Поддержка иконок** - поддерживают согласованность с другими вариантами кнопок через визуальные элементы
+
+Secondary режим особенно полезен для создания кнопок отмены, действий сброса и альтернативных вариантов выбора, которые поддерживают основной поток без конкуренции за первичное внимание в интерфейсе.
+
+```html
+<Button secondary icon="close">Отмена</Button>
+<Button secondary icon="refresh">Сброс</Button>
+<Button secondary>Пропустить</Button>
+```

package/src/media/mdx/Button/text.en.mdx

@@ -0,0 +1,16 @@
+## Text buttons
+
+Button component supports text mode through the `text` property. In this mode, buttons have a minimalist text-only style resembling links for the most unobtrusive actions:
+
+- **Unobtrusive design** - looks like plain text while remaining interactive
+- **No background or border** - maintains clean appearance without visual weight
+- **Hover feedback** - subtle background appears on hover for better interaction clarity
+- **Icon support** - seamlessly integrates icons while maintaining minimal visual impact
+
+Text mode is especially useful for creating tertiary actions, inline navigation links, and supplementary options within text content or footers that need to be accessible without drawing excessive attention.
+
+```html
+<Button text icon="info">Learn more</Button>
+<Button text icon="help">Help</Button>
+<Button text>Read details</Button>
+```

package/src/media/mdx/Button/text.ru.mdx

@@ -0,0 +1,16 @@
+## Текстовые кнопки (text)
+
+Компонент Button поддерживает текстовый режим через свойство `text`. В этом режиме кнопки имеют минималистичный текстовый стиль, напоминающий ссылки, для самых ненавязчивых действий:
+
+- **Ненавязчивый дизайн** - выглядит как обычный текст, оставаясь интерактивным
+- **Без фона и рамки** - поддерживает чистый внешний вид без визуальной нагрузки
+- **Обратная связь при наведении** - тонкий фон появляется при наведении для лучшей ясности взаимодействия
+- **Поддержка иконок** - бесшовно интегрирует иконки, сохраняя минимальное визуальное воздействие
+
+Text режим особенно полезен для создания третичных действий, встроенных навигационных ссылок и дополнительных опций внутри текстового контента или футеров, которые должны быть доступны без привлечения чрезмерного внимания.
+
+```html
+<Button text icon="info">Узнать больше</Button>
+<Button text icon="help">Справка</Button>
+<Button text>Читать детали</Button>
+```

package/src/media/mdx/Button/wikiMdxButton.ts

@@ -0,0 +1,43 @@
+import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
+
+import buttonEn from './button.en.mdx'
+import buttonRu from './button.ru.mdx'
+import primaryEn from './primary.en.mdx'
+import primaryRu from './primary.ru.mdx'
+import secondaryEn from './secondary.en.mdx'
+import secondaryRu from './secondary.ru.mdx'
+import outlineEn from './outline.en.mdx'
+import outlineRu from './outline.ru.mdx'
+import textEn from './text.en.mdx'
+import textRu from './text.ru.mdx'
+
+/**
+ * MDX files for Button component
+ *
+ * MDX файлы для компонента Button
+ */
+export const wikiMdxButton: StorybookComponentsMdxItem = {
+  name: 'Button',
+  descriptions: {
+    button: {
+      en: buttonEn,
+      ru: buttonRu
+    },
+    primary: {
+      en: primaryEn,
+      ru: primaryRu
+    },
+    secondary: {
+      en: secondaryEn,
+      ru: secondaryRu
+    },
+    outline: {
+      en: outlineEn,
+      ru: outlineRu
+    },
+    text: {
+      en: textEn,
+      ru: textRu
+    }
+  }
+}

package/src/media/mdx/Cell/cell.en.mdx

@@ -0,0 +1,57 @@
+## Description
+
+Universal container component for displaying structured content with labels, descriptions, and interactive actions in lists and interface elements.
+
+Cell provides a consistent way to represent information blocks with support for text hierarchy (label, description, caption), interactive states, icons, and progress indicators. The component integrates ripple effects, skeleton states, and flexible content positioning for creating modern interface lists.
+
+**Key features:**
+
+- Structured content hierarchy (label, description, caption)
+- Interactive states (focus, selected, disabled, readonly)
+- Built-in icon and progress indicator support
+- Ripple effect integration for tactile feedback
+- Skeleton system for loading states
+- Customizable dividers and dynamic behavior
+- Flexible slot system for custom content
+- Optimized for list and menu interfaces
+
+**Typical use cases:**
+
+- List items in navigation menus and settings
+- Contact cards and profile entries
+- Action sheets and selection lists
+- Settings panels and configuration items
+- Data tables and structured information displays
+- Mobile-first interface components
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const selected = ref(false)
+const loading = ref(false)
+
+const handleClick = () => {
+  console.log('Cell clicked')
+  selected.value = !selected.value
+}
+</script>
+
+<template>
+  <Cell
+    label="Notification Settings"
+    description="Manage how you receive notifications"
+    caption="Updated today"
+    icon="notifications"
+    :selected="selected"
+    :skeleton="loading"
+    @click="handleClick"
+  >
+    <template #trailing>
+      <Icon name="chevron_right" />
+    </template>
+  </Cell>
+</template>
+```
+
+> Cell is designed as a universal building block for creating consistent list-based interfaces with rich content and interactive states.

package/src/media/mdx/Cell/cell.ru.mdx

@@ -0,0 +1,57 @@
+## Описание
+
+Универсальный контейнерный компонент для отображения структурированного контента с метками, описаниями и интерактивными действиями в списках и элементах интерфейса.
+
+Cell обеспечивает единообразное представление информационных блоков с поддержкой текстовой иерархии (метка, описание, подпись), интерактивных состояний, иконок и индикаторов прогресса. Компонент интегрирует эффекты ripple, состояния скелетонов и гибкое позиционирование контента для создания современных интерфейсных списков.
+
+**Основные возможности:**
+
+- Структурированная иерархия контента (метка, описание, подпись)
+- Интерактивные состояния (focus, selected, disabled, readonly)
+- Встроенная поддержка иконок и индикаторов прогресса
+- Интеграция эффекта ripple для тактильной обратной связи
+- Система скелетонов для состояний загрузки
+- Настраиваемые разделители и динамическое поведение
+- Гибкая система слотов для пользовательского контента
+- Оптимизирован для списковых и меню интерфейсов
+
+**Типичные сценарии использования:**
+
+- Элементы списков в меню навигации и настройках
+- Карточки контактов и профильные записи
+- Списки действий и выбора элементов
+- Панели настроек и элементы конфигурации
+- Таблицы данных и структурированные информационные блоки
+- Компоненты интерфейса mobile-first
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const selected = ref(false)
+const loading = ref(false)
+
+const handleClick = () => {
+  console.log('Ячейка нажата')
+  selected.value = !selected.value
+}
+</script>
+
+<template>
+  <Cell
+    label="Настройки уведомлений"
+    description="Управление способами получения уведомлений"
+    caption="Обновлено сегодня"
+    icon="notifications"
+    :selected="selected"
+    :skeleton="loading"
+    @click="handleClick"
+  >
+    <template #trailing>
+      <Icon name="chevron_right" />
+    </template>
+  </Cell>
+</template>
+```
+
+> Cell разработан как универсальный строительный блок для создания единообразных списковых интерфейсов с богатым контентом и интерактивными состояниями.

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

@@ -0,0 +1,8 @@
+- `trailing(props: CellClassesSub): any` — Slot for placing control elements or indicators at the end of the cell (icons, switches, buttons).
+- `body(props: CellClassesSub): any` — Slot for placing additional content at the bottom of the cell (metadata, secondary actions, details).
+
+> **CellClassesSub:**
+> - `label: string` — CSS class for the label element (`{className}__label`).
+> - `description: string` — CSS class for the description element (`{className}__description`).
+> - `caption: string` — CSS class for the caption element (`{className}__caption`).
+> - `trailing: string` — CSS class for the trailing area element (`{className}__trailing`).

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

@@ -0,0 +1,8 @@
+- `trailing(props: CellClassesSub): any` — Слот для размещения элементов управления или индикаторов в конце ячейки (иконки, переключатели, кнопки).
+- `body(props: CellClassesSub): any` — Слот для размещения дополнительного контента в нижней части ячейки (метаданные, вторичные действия, детали).
+
+> **CellClassesSub:**
+> - `label: string` — CSS-класс для элемента метки (`{className}__label`).
+> - `description: string` — CSS-класс для элемента описания (`{className}__description`).
+> - `caption: string` — CSS-класс для элемента подписи (`{className}__caption`).
+> - `trailing: string` — CSS-класс для элемента области trailing (`{className}__trailing`).

package/src/media/mdx/Cell/wikiMdxCell.ts

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

package/src/media/mdx/Checkbox/checkbox.en.mdx

@@ -0,0 +1,22 @@
+Component for creating interactive checkboxes with support for multiple selection, validation, and state customization.
+
+Checkbox manages the selection state of elements (checked, unchecked, indeterminate state), supports validation, form integration, customizable icons, and transition animations. The component automatically handles state changes, focus management, and event generation during user interaction.
+
+**Key features:**
+
+- Three states: checked, unchecked, indeterminate
+- Built-in validation with custom error messages
+- Support for labels and descriptions
+- Customizable icons for different states
+- Form integration via name and value attributes
+- Disabled, loading, and skeleton states
+- Ripple effect on interaction
+- Adaptive layout and styling
+
+**Common use cases:**
+
+- Agreement with terms and policies
+- Multiple item selection from lists
+- Settings and feature toggles
+- Forms with checkboxes for confirmation
+- Group selection with parent indeterminate state

package/src/media/mdx/Checkbox/checkbox.ru.mdx

@@ -0,0 +1,22 @@
+Компонент для создания интерактивных чекбоксов с поддержкой множественного выбора, валидации и настройки состояний.
+
+Checkbox управляет состоянием выбора элементов (отмечен, не отмечен, неопределённое состояние), поддерживает валидацию, интеграцию с формами, настраиваемые иконки и анимацию переходов. Компонент автоматически обрабатывает изменение состояний, управление фокусом и генерацию событий при взаимодействии пользователя.
+
+**Основные возможности:**
+
+- Три состояния: отмечен, не отмечен, неопределённое (indeterminate)
+- Встроенная валидация с пользовательскими сообщениями об ошибках
+- Поддержка меток (label) и описания (description)
+- Настраиваемые иконки для разных состояний
+- Интеграция с формами через name и value
+- Состояния disabled, loading и skeleton
+- Эффект ripple при взаимодействии
+- Адаптивная раскладка и стилизация
+
+**Типичные сценарии использования:**
+
+- Согласие с условиями и политиками
+- Множественный выбор элементов из списка
+- Настройки и переключение функций
+- Формы с чекбоксами для подтверждения
+- Групповой выбор с родительским indeterminate состоянием

package/src/media/mdx/Checkbox/indeterminate.en.mdx

@@ -0,0 +1,61 @@
+## Indeterminate state
+
+The `indeterminate` property controls the third checkbox state — indeterminate (partially selected). This state is visually displayed as a horizontal line instead of a checkmark.
+
+**Properties:**
+
+- `indeterminate` — enables the indeterminate state of the checkbox
+- `iconIndeterminate` — custom icon for the indeterminate state
+- `value` — remains `null` or a special value in the indeterminate state
+
+The indeterminate state is typically used for parent checkboxes in a group when only some child elements are selected.
+
+```html
+<script setup>
+import { ref, computed } from 'vue'
+
+const items = ref([
+  { id: 1, label: 'Item 1', checked: true },
+  { id: 2, label: 'Item 2', checked: false },
+  { id: 3, label: 'Item 3', checked: true }
+])
+
+const allChecked = computed({
+  get: () => items.value.every(item => item.checked),
+  set: (value) => {
+    items.value.forEach(item => item.checked = value)
+  }
+})
+
+const indeterminate = computed(() => {
+  const checkedCount = items.value.filter(item => item.checked).length
+  return checkedCount > 0 && checkedCount < items.value.length
+})
+</script>
+
+<template>
+  <!-- Parent checkbox with partial selection indicator -->
+  <Checkbox
+    v-model="allChecked"
+    :indeterminate="indeterminate"
+    label="Select all"
+  />
+
+  <!-- Child checkboxes -->
+  <div style="margin-left: 24px">
+    <Checkbox
+      v-for="item in items"
+      :key="item.id"
+      v-model="item.checked"
+      :label="item.label"
+    />
+  </div>
+
+  <!-- Using with custom icon -->
+  <Checkbox
+    indeterminate
+    iconIndeterminate="remove"
+    label="Partially selected"
+  />
+</template>
+```

package/src/media/mdx/Checkbox/indeterminate.ru.mdx

@@ -0,0 +1,61 @@
+## Неопределённое состояние
+
+Свойство `indeterminate` управляет третьим состоянием чекбокса — неопределённым (частично выбранным). Это состояние визуально отображается как горизонтальная линия вместо галочки.
+
+**Свойства:**
+
+- `indeterminate` — включает неопределённое состояние чекбокса
+- `iconIndeterminate` — пользовательская иконка для неопределённого состояния
+- `value` — остается `null` или специальное значение в неопределённом состоянии
+
+Неопределённое состояние обычно используется для родительских чекбоксов в группе, когда выбраны только некоторые дочерние элементы.
+
+```html
+<script setup>
+import { ref, computed } from 'vue'
+
+const items = ref([
+  { id: 1, label: 'Пункт 1', checked: true },
+  { id: 2, label: 'Пункт 2', checked: false },
+  { id: 3, label: 'Пункт 3', checked: true }
+])
+
+const allChecked = computed({
+  get: () => items.value.every(item => item.checked),
+  set: (value) => {
+    items.value.forEach(item => item.checked = value)
+  }
+})
+
+const indeterminate = computed(() => {
+  const checkedCount = items.value.filter(item => item.checked).length
+  return checkedCount > 0 && checkedCount < items.value.length
+})
+</script>
+
+<template>
+  <!-- Родительский чекбокс с индикатором частичного выбора -->
+  <Checkbox
+    v-model="allChecked"
+    :indeterminate="indeterminate"
+    label="Выбрать все"
+  />
+
+  <!-- Дочерние чекбоксы -->
+  <div style="margin-left: 24px">
+    <Checkbox
+      v-for="item in items"
+      :key="item.id"
+      v-model="item.checked"
+      :label="item.label"
+    />
+  </div>
+
+  <!-- Использование с пользовательской иконкой -->
+  <Checkbox
+    indeterminate
+    iconIndeterminate="remove"
+    label="Частично выбрано"
+  />
+</template>
+```

package/src/media/mdx/Checkbox/value.en.mdx

@@ -0,0 +1,64 @@
+## Value Management
+
+The `value`, `valueVariant`, and `valueVariantHide` properties are designed for managing checkbox values during form submission and two-way data binding.
+
+**Properties:**
+
+- `value` — current checkbox state (true/false or custom values)
+- `valueVariant` — value passed when checkbox is checked
+- `valueVariantHide` — value passed when checkbox is unchecked (default: "0")
+
+Properties work together: `value` determines the current checkbox state and works with `v-model` for two-way binding. `valueVariant` allows setting a custom value for the checked state (e.g., "yes", "1", "active"), which will be passed during form submission. `valueVariantHide` automatically creates a hidden input field with the specified value, which is submitted when the checkbox is unchecked, ensuring data presence in the form even with an inactive checkbox.
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const agreed = ref(false)
+const formData = ref({})
+
+const handleSubmit = () => {
+  console.log('Form data:', formData.value)
+}
+</script>
+
+<template>
+  <!-- Standard usage with boolean -->
+  <Checkbox
+    v-model="agreed"
+    name="terms"
+    label="I agree to the terms"
+  />
+  <!-- value: true/false -->
+
+  <!-- Custom values for form -->
+  <Checkbox
+    name="subscribe"
+    label="Subscribe to newsletter"
+    valueVariant="yes"
+    valueVariantHide="no"
+  />
+  <!-- When checked sends: subscribe=yes -->
+  <!-- When unchecked sends: subscribe=no -->
+
+  <!-- Numeric values -->
+  <Checkbox
+    name="notification"
+    label="Enable notifications"
+    valueVariant="1"
+    valueVariantHide="0"
+  />
+  <!-- When checked sends: notification=1 -->
+  <!-- When unchecked sends: notification=0 -->
+
+  <!-- Without hidden value -->
+  <Checkbox
+    name="optional"
+    label="Optional setting"
+    valueVariant="enabled"
+    :valueVariantHide="null"
+  />
+  <!-- Only sent when checked: optional=enabled -->
+  <!-- When unchecked field is not sent -->
+</template>
+```

package/src/media/mdx/Checkbox/value.ru.mdx

@@ -0,0 +1,64 @@
+## Управление значениями
+
+Свойства `value`, `valueVariant` и `valueVariantHide` предназначены для управления значениями чекбокса при отправке форм и работе с двусторонней привязкой данных.
+
+**Свойства:**
+
+- `value` — текущее состояние чекбокса (true/false или пользовательские значения)
+- `valueVariant` — значение, которое передаётся при отмеченном чекбоксе
+- `valueVariantHide` — значение, которое передаётся при неотмеченном чекбоксе (по умолчанию: "0")
+
+Свойства работают совместно: `value` определяет текущее состояние чекбокса и работает с `v-model` для двусторонней привязки. `valueVariant` позволяет установить пользовательское значение для отмеченного состояния (например, "yes", "1", "active"), которое будет передано при отправке формы. `valueVariantHide` автоматически создаёт скрытое поле input с указанным значением, которое отправляется, когда чекбокс не отмечен, обеспечивая наличие данных в форме даже при неактивном чекбоксе.
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const agreed = ref(false)
+const formData = ref({})
+
+const handleSubmit = () => {
+  console.log('Form data:', formData.value)
+}
+</script>
+
+<template>
+  <!-- Стандартное использование с boolean -->
+  <Checkbox
+    v-model="agreed"
+    name="terms"
+    label="Согласен с условиями"
+  />
+  <!-- value: true/false -->
+
+  <!-- Пользовательские значения для формы -->
+  <Checkbox
+    name="subscribe"
+    label="Подписаться на рассылку"
+    valueVariant="yes"
+    valueVariantHide="no"
+  />
+  <!-- При отметке отправит: subscribe=yes -->
+  <!-- Без отметки отправит: subscribe=no -->
+
+  <!-- Числовые значения -->
+  <Checkbox
+    name="notification"
+    label="Включить уведомления"
+    valueVariant="1"
+    valueVariantHide="0"
+  />
+  <!-- При отметке отправит: notification=1 -->
+  <!-- Без отметки отправит: notification=0 -->
+
+  <!-- Без скрытого значения -->
+  <Checkbox
+    name="optional"
+    label="Опциональная настройка"
+    valueVariant="enabled"
+    :valueVariantHide="null"
+  />
+  <!-- Отправляется только при отметке: optional=enabled -->
+  <!-- Без отметки поле не отправляется -->
+</template>
+```