@dxtmisha/wiki 0.39.2 → 0.39.4

package/src/media/mdx/Input/number.ru.mdx

@@ -1,41 +0,0 @@
-## Работа с числами
-
-Свойства `type`, `fraction`, `language`, `min`, `max`, `step`, `arrow`, `arrowStep` и `align` предназначены для управления вводом и форматированием числовых значений с поддержкой локализации и интерактивных элементов управления.
-
-**Свойства:**
-
-- `type` — тип инпута (`number` или `number-format`)
-- `fraction` — количество знаков после запятой (число, `true` для динамической дробной части)
-- `language` — код локали для форматирования (например, `ru-RU`, `en-US`)
-- `min` — минимальное допустимое значение
-- `max` — максимальное допустимое значение
-- `step` — шаг изменения при клавиатурном вводе
-- `arrow` — тип управляющих стрелок (`auto`, `stepper`, `carousel`, `none`)
-- `arrowStep` — шаг изменения при нажатии на стрелки
-- `align` — расположение стрелок (`left`, `center`, `right`)
-
-Свойства работают совместно: `type` определяет базовый режим ввода, где `number` активирует простой числовой ввод с базовой валидацией без форматирования, а `number-format` включает автоматическое форматирование с разделителями тысяч и десятичными знаками в зависимости от локали. `language` определяет региональные правила для разделителей тысяч (пробел, запятая, точка) и десятичного разделителя (точка или запятая). Свойства `min` и `max` активируют встроенную валидацию диапазона. `step` определяет величину инкремента/декремента при использовании клавиш стрелок вверх/вниз и Page Up/Down. Свойства `arrow` и `arrowStep` добавляют визуальные элементы управления (кнопки ± или стрелки < >) с настраиваемым шагом изменения, где если `arrowStep` не указан, используется значение `step`. `align` управляет расположением стрелок в поле ввода.
-
-```html
-<script setup>
-import { ref } from 'vue'
-const value = ref('1234567.89')
-</script>
-
-<template>
-  <!-- Простой числовой ввод -->
-  <Input v-model="value" type="number" label="Число" />
-
-  <!-- Форматированное число с локалью -->
-  <Input v-model="value" type="number-format" language="ru-RU" label="Форматированное" />
-
-  <!-- С ограничениями диапазона -->
-  <Input v-model="value" type="number" :min="0" :max="100" label="От 0 до 100" />
-
-  <!-- С шагом и стрелками stepper -->
-  <Input v-model="value" type="number" arrow="stepper" :step="5" :arrow-step="10" label="Шаг 5/10" />
-
-  <!-- С выравниванием по центру -->
-  <Input v-model="value" type="number-format" align="center" :fraction="2" label="По центру" />
-</template>
-```

package/src/media/mdx/Input/type.en.mdx

@@ -1,26 +0,0 @@
-## Input Field Type
-
-The `type` property defines the type and behavior of the Input field.
-
-**Available values:**
-
-- `'text'` — standard text field (default value)
-- `'search'` — search field with quick clear functionality
-- `'number'` — numeric field with basic number validation
-- `'number-format'` — numeric field with formatting (thousands separators)
-- `'currency'` — field for currency input with currency formatting
-- `'email'` — field for email input with corresponding validation
-- `'password'` — field for password input (hides characters)
-- `'datetime'` — field for date and time input
-- `'date'` — field for date input
-- `'year-month'` — field for year and month input
-- `'time'` — field for time input
-- `'hour-minute'` — field for hours and minutes input
-- `'tel'` — field for telephone number input
-- `'url'` — field for web address input with URL validation
-- `'checkbox'` — checkbox (used for boolean values)
-- `'radio'` — radio button (used for selecting one option from a group)
-
-Each type activates corresponding validation, formatting, and input mechanisms. For the `password` type, a visibility toggle function is available through a special icon. Types `number`, `number-format`, and `currency` automatically enable formatting and restrict input to numeric values only. Types `email`, `tel`, and `url` apply built-in HTML5 validation and set the appropriate `inputMode` for mobile keyboards. Date and time related types (`datetime`, `date`, `year-month`, `time`, `hour-minute`) activate special input masks and value formatting.
-
-

package/src/media/mdx/Input/type.ru.mdx

@@ -1,26 +0,0 @@
-## Тип поля ввода
-
-Свойство `type` определяет тип и поведение поля ввода Input.
-
-**Возможные значения:**
-
-- `'text'` — обычное текстовое поле (значение по умолчанию)
-- `'search'` — поле для поиска с возможностью быстрой очистки
-- `'number'` — числовое поле с базовой валидацией чисел
-- `'number-format'` — числовое поле с форматированием (разделители тысяч)
-- `'currency'` — поле для ввода денежных значений с форматированием валюты
-- `'email'` — поле для ввода электронной почты с соответствующей валидацией
-- `'password'` — поле для ввода пароля (скрывает символы)
-- `'datetime'` — поле для ввода даты и времени
-- `'date'` — поле для ввода даты
-- `'year-month'` — поле для ввода года и месяца
-- `'time'` — поле для ввода времени
-- `'hour-minute'` — поле для ввода часов и минут
-- `'tel'` — поле для ввода телефонного номера
-- `'url'` — поле для ввода веб-адреса с валидацией URL
-- `'checkbox'` — чекбокс (используется для булевых значений)
-- `'radio'` — радиокнопка (используется для выбора одного варианта из группы)
-
-Каждый тип активирует соответствующие механизмы валидации, форматирования и ввода. Для типа `password` доступна функция переключения видимости через специальную иконку. Типы `number`, `number-format` и `currency` автоматически включают форматирование и ограничивают ввод только числовыми значениями. Типы `email`, `tel` и `url` применяют встроенную HTML5-валидацию и устанавливают соответствующий `inputMode` для мобильных клавиатур. Типы, связанные с датой и временем (`datetime`, `date`, `year-month`, `time`, `hour-minute`), активируют специальные маски ввода и форматирование значений.
-
-

package/src/media/mdx/Input/wikiMdxInput.ts

@@ -1,49 +0,0 @@
-import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
-
-import currencyEn from './currency.en.mdx'
-import currencyRu from './currency.ru.mdx'
-import dateEn from './date.en.mdx'
-import dateRu from './date.ru.mdx'
-import inputEn from './input.en.mdx'
-import inputRu from './input.ru.mdx'
-import maskEn from './mask.en.mdx'
-import maskRu from './mask.ru.mdx'
-import numberEn from './number.en.mdx'
-import numberRu from './number.ru.mdx'
-import typeEn from './type.en.mdx'
-import typeRu from './type.ru.mdx'
-
-/**
- * MDX files for Input component
- *
- * MDX файлы для компонента Input
- */
-export const wikiMdxInput: StorybookComponentsMdxItem = {
-  name: 'Input',
-  descriptions: {
-    currency: {
-      en: currencyEn,
-      ru: currencyRu
-    },
-    date: {
-      en: dateEn,
-      ru: dateRu
-    },
-    input: {
-      en: inputEn,
-      ru: inputRu
-    },
-    mask: {
-      en: maskEn,
-      ru: maskRu
-    },
-    number: {
-      en: numberEn,
-      ru: numberRu
-    },
-    type: {
-      en: typeEn,
-      ru: typeRu
-    }
-  }
-}

package/src/media/mdx/List/event.close.en.mdx

@@ -1,8 +0,0 @@
-### `close`
-
-Event fires when attempting to close the list after navigation has reached the root level.
-
-**When it fires:**
-- Pressing the **Escape** key at the root level of the list
-- Pressing the **←** (left arrow) key when there are no open submenus/groups
-- Attempting to navigate back when there are no nested items

package/src/media/mdx/List/event.close.ru.mdx

@@ -1,8 +0,0 @@
-### `close`
-
-Событие срабатывает при попытке закрыть список, когда навигация достигла корневого уровня.
-
-**Когда срабатывает:**
-- Нажатие клавиши **Escape** на корневом уровне списка
-- Нажатие клавиши **←** (стрелка влево), когда нет открытых подменю/групп
-- Попытка навигации назад при отсутствии вложенных элементов

package/src/media/mdx/List/list.en.mdx

@@ -1,64 +0,0 @@
-A component for creating interactive lists with support for hierarchical data, keyboard navigation, and search functionality.
-
-List manages the display of structured data with navigation capabilities, item selection, and interaction through keyboard and mouse. The component supports various item types (regular items, groups, menus, dividers, subtitles, HTML content), automatically handles complex hierarchical structures, and provides intuitive navigation. The built-in search system works in real-time with match highlighting across the entire data hierarchy.
-
-**Key features:**
-
-- Various item types (item, group, menu, line, subtitle, html)
-- Hierarchical structure with nested groups and menus
-- Full keyboard navigation (↑/↓, Enter, →, ←)
-- Built-in real-time search with match highlighting
-- Item selection control via v-model:selected
-- Focus control via v-model:focus
-- Lightweight mode for large lists (lite)
-- Display axis configuration (x/y) and dividers
-- Click and menu close events
-
-**Typical use cases:**
-
-- Navigation menus and option lists
-- Dropdown lists with hierarchical structure
-- Product and category catalogs
-- Settings lists with grouping
-- Context menus with submenus
-- File and folder lists
-- Filters with multiple selection
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const selected = ref(['item2'])
-const focus = ref(null)
-
-const listData = ref([
-  { label: 'First item', value: 'item1' },
-  { label: 'Second item', value: 'item2' },
-  { type: 'line' },
-  { type: 'subtitle', label: 'Item group' },
-  {
-    label: 'Group with submenu',
-    value: 'group1',
-    type: 'group',
-    list: [
-      { label: 'Nested item 1', value: 'nested1' },
-      { label: 'Nested item 2', value: 'nested2' }
-    ]
-  }
-])
-
-const handleClick = (event) => {
-  console.log('Item clicked:', event.detail.value)
-}
-</script>
-
-<template>
-  <List
-    v-model:selected="selected"
-    v-model:focus="focus"
-    :list="listData"
-    highlight="text"
-    @click="handleClick"
-  />
-</template>
-```

package/src/media/mdx/List/list.ru.mdx

@@ -1,64 +0,0 @@
-Компонент для создания интерактивных списков с поддержкой иерархических данных, клавиатурной навигации и функциональности поиска.
-
-List управляет отображением структурированных данных с возможностью навигации, выбора элементов и взаимодействия через клавиатуру и мышь. Компонент поддерживает различные типы элементов (обычные элементы, группы, меню, разделители, подзаголовки, HTML-контент), автоматически обрабатывает сложные иерархические структуры и предоставляет интуитивную навигацию. Встроенная система поиска работает в реальном времени с выделением совпадений по всей иерархии данных.
-
-**Основные возможности:**
-
-- Различные типы элементов (item, group, menu, line, subtitle, html)
-- Иерархическая структура с вложенными группами и меню
-- Полная клавиатурная навигация (↑/↓, Enter, →, ←)
-- Встроенный поиск в реальном времени с подсветкой совпадений
-- Управление выбором элементов через v-model:selected
-- Управление фокусом через v-model:focus
-- Облегченный режим для больших списков (lite)
-- Настройка осей отображения (x/y) и разделителей
-- События клика и закрытия меню
-
-**Типичные сценарии использования:**
-
-- Навигационные меню и списки опций
-- Выпадающие списки с иерархической структурой
-- Каталоги товаров и категорий
-- Списки настроек с группировкой
-- Контекстные меню с подменю
-- Списки файлов и папок
-- Фильтры с множественным выбором
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const selected = ref(['item2'])
-const focus = ref(null)
-
-const listData = ref([
-  { label: 'Первый элемент', value: 'item1' },
-  { label: 'Второй элемент', value: 'item2' },
-  { type: 'line' },
-  { type: 'subtitle', label: 'Группа элементов' },
-  {
-    label: 'Группа с подменю',
-    value: 'group1',
-    type: 'group',
-    list: [
-      { label: 'Вложенный элемент 1', value: 'nested1' },
-      { label: 'Вложенный элемент 2', value: 'nested2' }
-    ]
-  }
-])
-
-const handleClick = (event) => {
-  console.log('Клик по элементу:', event.detail.value)
-}
-</script>
-
-<template>
-  <List
-    v-model:selected="selected"
-    v-model:focus="focus"
-    :list="listData"
-    highlight="text"
-    @click="handleClick"
-  />
-</template>
-```

package/src/media/mdx/List/lite.en.mdx

@@ -1,24 +0,0 @@
-## Managing list performance
-
-The `lite` and `liteThreshold` properties work together to optimize rendering of large lists. They enable a lightweight display mode that reduces visual complexity and improves performance when the threshold number of items is exceeded.
-
-**Properties:**
-
-- `lite` — enables lightweight list display mode
-- `liteThreshold` — item count threshold for activating simplified mode, defaults to configuration value
-
-Display mode is determined automatically: when `lite=false`, the list always renders in full mode. When `lite=true`, the component compares the total item count with `liteThreshold`. If the item count does not exceed the threshold, full mode with extended visualization is used. When the threshold is exceeded, lightweight mode is activated to reduce rendering load. Use `lite` for working with dynamic data of variable size.
-
-```html
-<!-- Automatic mode switching -->
-<List :list="items" :lite="true" :liteThreshold="50" />
-
-<!-- Always full mode -->
-<List :list="items" :lite="false" />
-
-<!-- Lightweight mode for large catalogs -->
-<List :list="products" :lite="true" :liteThreshold="100" />
-
-<!-- Custom threshold for mobile devices -->
-<List :list="data" :lite="true" :liteThreshold="30" />
-```

package/src/media/mdx/List/lite.ru.mdx

@@ -1,24 +0,0 @@
-## Управление производительностью списка
-
-Свойства `lite` и `liteThreshold` работают в связке для оптимизации рендеринга больших списков. Они включают облегченный режим отображения, который снижает визуальную сложность и ускоряет производительность при превышении порогового количества элементов.
-
-**Свойства:**
-
-- `lite` — включает облегченный режим отображения списка
-- `liteThreshold` — порог количества элементов для активации упрощенного режима, по умолчанию зависит от конфигурации
-
-Режим отображения определяется автоматически: при `lite=false` список всегда рендерится в полном режиме. При `lite=true` компонент сравнивает общее количество элементов с `liteThreshold`. Если количество элементов не превышает порог, используется полный режим с расширенной визуализацией. При превышении порога включается облегченный режим для снижения нагрузки на рендеринг. Используйте `lite` для работы с динамическими данными переменного размера.
-
-```html
-<!-- Автоматическое переключение режима -->
-<List :list="items" :lite="true" :liteThreshold="50" />
-
-<!-- Всегда полный режим -->
-<List :list="items" :lite="false" />
-
-<!-- Облегченный режим для больших каталогов -->
-<List :list="products" :lite="true" :liteThreshold="100" />
-
-<!-- Пользовательский порог для мобильных устройств -->
-<List :list="data" :lite="true" :liteThreshold="30" />
-```

package/src/media/mdx/List/slot.html.en.mdx

@@ -1 +0,0 @@
-- `[value]: any` — Dynamic slot for rendering custom content (Vue components or HTML) when item `type` is `'html'`. Item's `value` is used as slot name.

package/src/media/mdx/List/slot.html.ru.mdx

@@ -1 +0,0 @@
-- `[value]: any` — Динамический слот для рендеринга пользовательского контента (Vue-компонентов или HTML), когда `type` элемента равен `'html'`. Поле `value` элемента используется как имя слота.

package/src/media/mdx/List/wikiMdxList.ts

@@ -1,37 +0,0 @@
-import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
-
-import listEn from './list.en.mdx'
-import listRu from './list.ru.mdx'
-import liteEn from './lite.en.mdx'
-import liteRu from './lite.ru.mdx'
-import eventCloseEn from './event.close.en.mdx'
-import eventCloseRu from './event.close.ru.mdx'
-import slotHtmlEn from './slot.html.en.mdx'
-import slotHtmlRu from './slot.html.ru.mdx'
-
-/**
- * MDX documentation for List component
- *
- * MDX документация для компонента List
- */
-export const wikiMdxList: StorybookComponentsMdxItem = {
-  name: 'List',
-  descriptions: {
-    'list': {
-      en: listEn,
-      ru: listRu
-    },
-    'lite': {
-      en: liteEn,
-      ru: liteRu
-    },
-    'event.close': {
-      en: eventCloseEn,
-      ru: eventCloseRu
-    },
-    'slot.html': {
-      en: slotHtmlEn,
-      ru: slotHtmlRu
-    }
-  }
-}

package/src/media/mdx/ListGroup/listGroup.en.mdx

@@ -1,56 +0,0 @@
-Component for grouping and organizing list items with collapsible structure.
-
-ListGroup is an auxiliary component for List, managing hierarchical content organization with expand/collapse functionality. The component integrates with MotionTransform for smooth animations, supports unlimited nesting levels, and provides convenient navigation through structured data.
-
-**Key features:**
-
-- Hierarchical content organization with unlimited nesting
-- Expand/collapse animations via MotionTransform
-- State management via props or internal state
-- Automatic group content visibility control
-- Integration with List component ecosystem
-- Customization support via head and list slots
-- Group state change events
-
-**Common use cases:**
-
-- Grouping list items by categories
-- Creating tree-like navigation structures
-- Organizing settings and options by sections
-- Multi-level menus and catalogs
-- FAQ sections with expandable answers
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const items = [
-  { text: 'Item 1', value: '1' },
-  { text: 'Item 2', value: '2' },
-  { text: 'Item 3', value: '3' }
-]
-
-const isOpen = ref(true)
-</script>
-
-<template>
-  <List>
-    <ListGroup v-model:open="isOpen">
-      <template #head="{ open }">
-        <div class="group-header">
-          <span>{{ open ? '▼' : '▶' }}</span>
-          <span>Group Items</span>
-        </div>
-      </template>
-
-      <template #list>
-        <ListItem
-          v-for="item in items"
-          :key="item.value"
-          :text="item.text"
-        />
-      </template>
-    </ListGroup>
-  </List>
-</template>
-```

package/src/media/mdx/ListGroup/listGroup.ru.mdx

@@ -1,56 +0,0 @@
-Компонент для группировки и организации элементов списка со сворачиваемой структурой.
-
-ListGroup является вспомогательным компонентом для List, управляющим иерархической организацией контента с возможностью разворачивания/сворачивания групп. Компонент интегрируется с MotionTransform для плавных анимаций, поддерживает неограниченную вложенность групп и обеспечивает удобную навигацию по структурированным данным.
-
-**Основные возможности:**
-
-- Иерархическая организация контента с неограниченной вложенностью
-- Анимации разворачивания/сворачивания групп через MotionTransform
-- Управление состоянием открытия через props или внутренний state
-- Автоматическое управление видимостью содержимого группы
-- Интеграция с экосистемой компонентов List
-- Поддержка кастомизации через слоты head и list
-- События изменения состояния группы
-
-**Типичные сценарии использования:**
-
-- Группировка элементов списка по категориям
-- Создание древовидных структур навигации
-- Организация настроек и опций по разделам
-- Многоуровневые меню и каталоги
-- FAQ секции с раскрывающимися ответами
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const items = [
-  { text: 'Элемент 1', value: '1' },
-  { text: 'Элемент 2', value: '2' },
-  { text: 'Элемент 3', value: '3' }
-]
-
-const isOpen = ref(true)
-</script>
-
-<template>
-  <List>
-    <ListGroup v-model:open="isOpen">
-      <template #head="{ open }">
-        <div class="group-header">
-          <span>{{ open ? '▼' : '▶' }}</span>
-          <span>Группа элементов</span>
-        </div>
-      </template>
-
-      <template #list>
-        <ListItem
-          v-for="item in items"
-          :key="item.value"
-          :text="item.text"
-        />
-      </template>
-    </ListGroup>
-  </List>
-</template>
-```

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

@@ -1,2 +0,0 @@
-- `head(open: boolean): any` — Slot for placing the header content with toggle functionality.
-- `list: any` — Slot for placing the list content.

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

@@ -1,2 +0,0 @@
-- `head(open: boolean): any` — Слот для размещения содержимого заголовка с функциональностью переключения.
-- `list: any` — Слот для размещения содержимого списка.

package/src/media/mdx/ListGroup/wikiMdxListGroup.ts

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

package/src/media/mdx/ListItem/basic.en.mdx

@@ -1,55 +0,0 @@
-Component for creating interactive list items with flexible content structure and multiple display areas.
-
-ListItem provides uniform presentation of items in lists, menus, and navigation structures. The component supports labels, descriptions, icons, status badges, interactive states (focus, selection, disabled), loading with progress and skeleton, and ripple effect for enhanced feedback.
-
-**Key features:**
-
-- Multiple content areas (label, description, prefix, suffix, caption)
-- Icon support with flexible positioning and alignment
-- Badge integration for status indicators
-- Interactive states (focus, selected, disabled, readonly)
-- Loading states with progress and skeleton
-- Ripple effect for visual feedback
-- Flexible tag variants (button, link, div, span)
-- Built-in accessibility support
-
-**Common use cases:**
-
-- List items and navigation menus
-- Settings and configuration options
-- Lists with multiple selection
-- Contact lists and catalogs
-- Mobile interfaces and action lists
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const items = ref([
-  { text: 'List item 1', value: '1', selected: false },
-  { text: 'List item 2', value: '2', selected: true },
-  { text: 'List item 3', value: '3', selected: false }
-])
-
-const handleClick = (item) => {
-  item.selected = !item.selected
-  console.log('Item selected:', item.text)
-}
-</script>
-
-<template>
-  <List>
-    <ListItem
-      v-for="item in items"
-      :key="item.value"
-      :text="item.text"
-      :selected="item.selected"
-      @click="handleClick(item)"
-    >
-      <template #prefix>
-        <Icon name="check" v-if="item.selected" />
-      </template>
-    </ListItem>
-  </List>
-</template>
-```

package/src/media/mdx/ListItem/basic.ru.mdx

@@ -1,55 +0,0 @@
-Компонент для создания интерактивных элементов списков с гибкой структурой контента и множественными областями отображения.
-
-ListItem обеспечивает единообразное представление элементов в списках, меню и навигационных структурах. Компонент поддерживает метки, описания, иконки, значки состояния, интерактивные состояния (фокус, выбор, отключение), загрузку с прогрессом и скелетоном, а также эффект пульсации для улучшенной обратной связи.
-
-**Основные возможности:**
-
-- Множественные области контента (метка, описание, префикс, суффикс, заголовок)
-- Поддержка иконок с гибким позиционированием и выравниванием
-- Интеграция значков для индикаторов статуса
-- Интерактивные состояния (фокус, выбранный, отключенный, только чтение)
-- Состояния загрузки с прогрессом и скелетоном
-- Эффект пульсации для визуальной обратной связи
-- Гибкие варианты тегов (button, link, div, span)
-- Встроенная поддержка доступности
-
-**Типичные сценарии использования:**
-
-- Элементы списков и меню навигации
-- Пункты настроек и конфигурации
-- Списки с множественным выбором
-- Контактные списки и каталоги
-- Мобильные интерфейсы и action lists
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const items = ref([
-  { text: 'Элемент списка 1', value: '1', selected: false },
-  { text: 'Элемент списка 2', value: '2', selected: true },
-  { text: 'Элемент списка 3', value: '3', selected: false }
-])
-
-const handleClick = (item) => {
-  item.selected = !item.selected
-  console.log('Элемент выбран:', item.text)
-}
-</script>
-
-<template>
-  <List>
-    <ListItem
-      v-for="item in items"
-      :key="item.value"
-      :text="item.text"
-      :selected="item.selected"
-      @click="handleClick(item)"
-    >
-      <template #prefix>
-        <Icon name="check" v-if="item.selected" />
-      </template>
-    </ListItem>
-  </List>
-</template>
-```