@dxtmisha/wiki 0.24.1 → 0.24.3

package/src/media/mdx/Chip/assistive.ru.mdx

@@ -1,18 +1,16 @@
-## Assistive чипы
+## Вспомогательные чипы (assistive)
 
-Assistive чипы предназначены для помощи пользователям в выполнении задач или предоставления дополнительной информации. Они имеют специальный внешний вид, который подчеркивает их вспомогательную роль в интерфейсе.
+Компонент Chip поддерживает вспомогательный режим через свойство `assistive`. В этом режиме чипы имеют специальный визуальный стиль для помощи пользователям в выполнении задач:
 
-### Особенности
+- **Отличительный стиль** - визуально выделяются среди других элементов
+- **Подсказки и рекомендации** - предлагают варианты действий или автодополнения
+- **Направление пользователя** - помогают ориентироваться в интерфейсе
+- **Поддержка иконок** - улучшают понимание назначения через визуальные элементы
 
-- Визуально отличаются от стандартных чипов
-- Используются для подсказок и рекомендаций
-- Помогают направлять пользователя к нужным действиям
-- Могут содержать иконки для лучшего понимания
+Assistive режим особенно полезен для создания систем подсказок, рекомендаций и вспомогательных действий, которые направляют пользователя к нужным решениям без излишнего визуального шума.
 
-### Применение
-
-Используйте assistive чипы для:
-- Предложения автодополнения
-- Рекомендаций системы
-- Подсказок по навигации
-- Вспомогательных действий в формах
+```html
+<Chip assistive icon="lightbulb">Рекомендация</Chip>
+<Chip assistive icon="check">Подсказка</Chip>
+<Chip assistive>Автодополнение</Chip>
+```

package/src/media/mdx/Chip/chip.en.mdx

@@ -1,15 +1,75 @@
 ## Description
 
-A compact element that represents an input, attribute, or action. Chips allow users to enter information, make selections, filter content, or trigger actions.
+Compact interactive element for representing input, attributes, actions, and filters in the user interface.
 
-### Key Features
+Chip provides a unified component for displaying discrete information in a compact format with support for selection states, icons, adaptive behavior, and various visual variants (input, assistive). Inherits Button functionality while adding specialized styling and semantics for working with tags, filters, statuses, and user input. Ensures a consistent API for creating interactive chips with support for clicks, disabled/selected states, and icon integration.
 
-- Display information in a compact format
-- Support for various states (selected, disabled)
-- Icon support capability
-- Adaptive behavior
-- Customizable styling
+**Core capabilities:**
 
-### Recommendations
+- Button inheritance (icons, progress, click events)
+- Visual variants (input, assistive) for different contexts
+- State management (selected, disabled, focus, readonly)
+- Adaptive behavior (adaptive, container) for different screen sizes
+- Customizable text alignment (textAlign: left/center/right)
+- Icon support (icon, iconTrailing) and progress indicator
+- Skeleton state integration for loading
+- Value and detail passing for element identification
 
-Use chips to display tags, filters, statuses, or other compact interface elements. They are particularly useful in lists, search forms, and filtering systems.
+**Typical use cases:**
+
+- Tags and labels for content categorization
+- Filters in search interfaces and catalogs
+- Displaying user-entered data (emails, contacts)
+- Statuses and state indicators
+- Assistive elements (hints, recommendations)
+- Selectable options in forms and lists
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const selectedFilters = ref(['active', 'verified'])
+const tags = ref(['Vue', 'TypeScript', 'UI'])
+
+const toggleFilter = (filter) => {
+  const index = selectedFilters.value.indexOf(filter)
+  if (index > -1) {
+    selectedFilters.value.splice(index, 1)
+  } else {
+    selectedFilters.value.push(filter)
+  }
+}
+</script>
+
+<template>
+  <!-- Basic chip -->
+  <Chip>Standard</Chip>
+
+  <!-- Input chip for user input -->
+  <Chip input icon="person">Contact</Chip>
+
+  <!-- Assistive chip for hints -->
+  <Chip assistive icon="lightbulb">Recommendation</Chip>
+
+  <!-- Filters with selection state -->
+  <Chip
+    v-for="filter in ['active', 'pending', 'verified']"
+    :key="filter"
+    :selected="selectedFilters.includes(filter)"
+    @click="toggleFilter(filter)"
+  >
+    {{ filter }}
+  </Chip>
+
+  <!-- With data passing -->
+  <Chip
+    value="filter-tag"
+    :detail="{ category: 'status', type: 'active' }"
+    @click="handleChipClick"
+  >
+    Active
+  </Chip>
+</template>
+```
+
+> Chip inherits all Button functionality, including events, icons, and progress indicators, while adding specialized styling for compact interface elements.

package/src/media/mdx/Chip/chip.ru.mdx

@@ -1,15 +1,75 @@
 ## Описание
 
-Компактный элемент, представляющий ввод, атрибут или действие. Чипы позволяют пользователям вводить информацию, делать выбор, фильтровать контент или запускать действия.
+Компактный интерактивный элемент для представления ввода, атрибутов, действий и фильтров в пользовательском интерфейсе.
 
-### Основные возможности
+Chip предоставляет унифицированный компонент для отображения дискретной информации в компактном формате с поддержкой состояний выбора, иконок, адаптивного поведения и различных визуальных вариантов (input, assistive). Наследует функциональность Button, добавляя специализированную стилизацию и семантику для работы с тегами, фильтрами, статусами и пользовательским вводом. Обеспечивает согласованный API для создания интерактивных чипов с поддержкой кликов, состояния disabled/selected и интеграцией иконок.
 
-- Отображение информации в компактном формате
-- Поддержка различных состояний (выбранный, отключенный)
-- Возможность добавления иконок
-- Адаптивное поведение
-- Настраиваемая стилизация
+**Основные возможности:**
 
-### Рекомендации
+- Наследование от Button (иконки, прогресс, события клика)
+- Визуальные варианты (input, assistive) для разных контекстов
+- Управление состояниями (selected, disabled, focus, readonly)
+- Адаптивное поведение (adaptive, container) для разных размеров экрана
+- Настраиваемое выравнивание текста (textAlign: left/center/right)
+- Поддержка иконок (icon, iconTrailing) и прогресс-индикатора
+- Интеграция скелетон-состояния для загрузки
+- Передача value и detail для идентификации элементов
 
-Используйте чипы для отображения тегов, фильтров, статусов или других компактных элементов интерфейса. Они особенно полезны в списках, формах поиска и системах фильтрации.
+**Типичные сценарии использования:**
+
+- Теги и метки для категоризации контента
+- Фильтры в поисковых интерфейсах и каталогах
+- Отображение введенных пользователем данных (email, контакты)
+- Статусы и индикаторы состояния
+- Вспомогательные элементы (подсказки, рекомендации)
+- Выбираемые опции в формах и списках
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const selectedFilters = ref(['active', 'verified'])
+const tags = ref(['Vue', 'TypeScript', 'UI'])
+
+const toggleFilter = (filter) => {
+  const index = selectedFilters.value.indexOf(filter)
+  if (index > -1) {
+    selectedFilters.value.splice(index, 1)
+  } else {
+    selectedFilters.value.push(filter)
+  }
+}
+</script>
+
+<template>
+  <!-- Базовый чип -->
+  <Chip>Стандарт</Chip>
+
+  <!-- Input чип для пользовательского ввода -->
+  <Chip input icon="person">Контакт</Chip>
+
+  <!-- Assistive чип для подсказок -->
+  <Chip assistive icon="lightbulb">Рекомендация</Chip>
+
+  <!-- Фильтры с состоянием выбора -->
+  <Chip
+    v-for="filter in ['active', 'pending', 'verified']"
+    :key="filter"
+    :selected="selectedFilters.includes(filter)"
+    @click="toggleFilter(filter)"
+  >
+    {{ filter }}
+  </Chip>
+
+  <!-- С передачей данных -->
+  <Chip
+    value="filter-tag"
+    :detail="{ category: 'status', type: 'active' }"
+    @click="handleChipClick"
+  >
+    Активный
+  </Chip>
+</template>
+```
+
+> Chip наследует всю функциональность Button, включая события, иконки и прогресс-индикаторы, добавляя специализированную стилизацию для компактных элементов интерфейса.

package/src/media/mdx/Chip/input.en.mdx

@@ -1,23 +1,16 @@
-## Input Chips
+## Input chips (input)
 
-Input chips represent discrete pieces of information entered by users, such as tags, contacts, or keywords. They have an appearance similar to input fields and are often used in form contexts.
+The Chip component supports input mode through the `input` property. In this mode, chips have an input field style and represent discrete information entered by the user:
 
-### Features
+- **Form-like appearance** - visually resemble input elements
+- **User data** - display tags, contacts, keywords
+- **Interactivity** - can be removed or edited
+- **Grouping** - often used in sets for multiple selections
 
-- Style reminiscent of form elements
-- Usually contains user input
-- Can be removed or edited
-- Often grouped in sets
+Input mode is especially useful for displaying data that users have actively entered or selected, making them visually distinct from static interface elements.
 
-### Usage
-
-Use input chips for:
-- Displaying entered tags
-- Lists of selected items
-- Contacts or recipients
-- User-applied filters
-- Search keywords
-
-### Recommendations
-
-Input chips work best for displaying data that users have actively entered or selected, making them interactive and editable.
+```html
+<Chip input icon="person">Contact</Chip>
+<Chip input icon="tag">Tag</Chip>
+<Chip input selected>Selected</Chip>
+```

package/src/media/mdx/Chip/input.ru.mdx

@@ -1,23 +1,16 @@
-## Input чипы
+## Input чипы (input)
 
-Input чипы представляют собой дискретную информацию, введенную пользователем, такую как теги, контакты или ключевые слова. Они имеют внешний вид, похожий на поля ввода, и часто используются в контексте форм.
+Компонент Chip поддерживает режим input через свойство `input`. В этом режиме чипы имеют стиль полей ввода и представляют дискретную информацию, введенную пользователем:
 
-### Особенности
+- **Внешний вид формы** - визуально напоминают элементы ввода
+- **Пользовательские данные** - отображают теги, контакты, ключевые слова
+- **Интерактивность** - могут быть удалены или отредактированы
+- **Группировка** - часто используются в наборах для множественного выбора
 
-- Стиль, напоминающий элементы формы
-- Обычно содержат пользовательский ввод
-- Могут быть удалены или отредактированы
-- Часто группируются в наборы
+Input режим особенно полезен для отображения данных, которые пользователь активно вводил или выбирал, делая их визуально отличимыми от статических элементов интерфейса.
 
-### Применение
-
-Используйте input чипы для:
-- Отображения введенных тегов
-- Списка выбранных элементов
-- Контактов или получателей
-- Фильтров, примененных пользователем
-- Ключевых слов для поиска
-
-### Рекомендации
-
-Input чипы лучше всего подходят для отображения данных, которые пользователь активно вводил или выбирал, делая их интерактивными и редактируемыми.
+```html
+<Chip input icon="person">Контакт</Chip>
+<Chip input icon="tag">Тег</Chip>
+<Chip input selected>Выбранный</Chip>
+```

package/src/media/mdx/Field/arrows.en.mdx

@@ -1,25 +1,75 @@
-## Navigation & alignment
+## Navigation and arrows
 
-The properties `arrowCarousel`, `arrowStepper`, `disabledPrevious`, `disabledNext`, and `align` control inline navigation controls and text alignment inside Field.
+Properties `arrowCarousel`, `arrowStepper`, `disabledPrevious`, `disabledNext`, and `align` are designed to control built-in navigation elements and content alignment.
 
-### Properties
+**Properties:**
 
-- **arrowCarousel** – Enables left/right navigation arrows (previous/next) using arrow icons.
-- **arrowStepper** – Enables numeric step control (minus / plus). Mutually exclusive with `arrowCarousel`.
-- **disabledPrevious** – Disables the left / minus control.
-- **disabledNext** – Disables the right / plus control.
-- **align** (`left | center | right`) – Horizontal alignment for the input/content zone.
+- `arrowCarousel` — enables navigation arrows (left/right) for switching elements
+- `arrowStepper` — enables numeric step buttons (minus/plus)
+- `disabledPrevious` — disables the left button (back/minus)
+- `disabledNext` — disables the right button (forward/plus)
+- `align` — horizontal content alignment (`left`, `center`, `right`)
 
-### Interaction rules
+Properties work together: only one arrow mode is active — if `arrowCarousel = true`, the `arrowStepper` mode is ignored and vice versa. When navigation mode is active, the clear button (`cancel`) is automatically hidden, as the control area takes priority. The `disabledPrevious` and `disabledNext` flags apply only to the currently active arrow mode. The `align` property affects text and content alignment inside the field, but does not change the position of the navigation buttons themselves.
 
-1. Only one mode is active: if `arrowCarousel` is true, stepper mode (`arrowStepper`) is ignored and vice‑versa.
-2. When an arrow mode is active, the cancel (clear) button is suppressed (takes priority space).
-3. `disabledPrevious` / `disabledNext` apply to the currently active arrow mode only.
-4. Alignment (`align`) affects the text/input area, not the arrow buttons (they stay at the edges defined by design).
+```html
+<script setup>
+import { ref } from 'vue'
 
-### Typical usage
+const currentIndex = ref(0)
+const items = ['Item 1', 'Item 2', 'Item 3']
+const count = ref(5)
+</script>
 
-- Carousel navigation between items: `arrowCarousel` + manage `disabledPrevious/disabledNext`.
-- Numeric increment/decrement: `arrowStepper` + internal value logic.
-- Centered value display with step controls: combine `arrowStepper` + `align="center"`.
+<template>
+  <!-- Carousel with navigation -->
+  <Field
+    label="Item"
+    arrow-carousel
+    :disabled-previous="currentIndex === 0"
+    :disabled-next="currentIndex === items.length - 1"
+  >
+    <template #default="{ id, className }">
+      <input
+        :id="id"
+        :class="className"
+        :value="items[currentIndex]"
+        readonly
+      />
+    </template>
+  </Field>
 
+  <!-- Numeric stepper with centering -->
+  <Field
+    label="Quantity"
+    arrow-stepper
+    align="center"
+    :disabled-previous="count <= 0"
+    :disabled-next="count >= 99"
+  >
+    <template #default="{ id, className }">
+      <input
+        :id="id"
+        :class="className"
+        :value="count"
+        readonly
+      />
+    </template>
+  </Field>
+
+  <!-- Stepper without limits -->
+  <Field
+    label="Value"
+    arrow-stepper
+  >
+    <template #default="{ id, className }">
+      <input
+        :id="id"
+        :class="className"
+        :value="count"
+        readonly
+      />
+    </template>
+  </Field>
+</template>
+```

package/src/media/mdx/Field/arrows.ru.mdx

@@ -1,25 +1,75 @@
-## Навигация и выравнивание
+## Навигация и стрелки
 
-Свойства `arrowCarousel`, `arrowStepper`, `disabledPrevious`, `disabledNext` и `align` управляют встроенными элементами навигации и горизонтальным выравниванием содержимого внутри Field.
+Свойства `arrowCarousel`, `arrowStepper`, `disabledPrevious`, `disabledNext` и `align` предназначены для управления встроенными элементами навигации и выравнивания содержимого.
 
-### Свойства
+**Свойства:**
 
-- **arrowCarousel** — Включает стрелки навигации (влево/вправо) для переключения элементов.
-- **arrowStepper** — Включает числовые шаговые кнопки (минус / плюс). Взаимоисключимо с `arrowCarousel`.
-- **disabledPrevious** — Отключает левую / минус кнопку.
-- **disabledNext** — Отключает правую / плюс кнопку.
-- **align** (`left | center | right`) — Горизонтальное выравнивание области ввода/контента.
+- `arrowCarousel` — включает стрелки навигации (влево/вправо) для переключения элементов
+- `arrowStepper` — включает числовые шаговые кнопки (минус/плюс)
+- `disabledPrevious` — отключает левую кнопку (назад/минус)
+- `disabledNext` — отключает правую кнопку (вперёд/плюс)
+- `align` — горизонтальное выравнивание содержимого (`left`, `center`, `right`)
 
-### Правила взаимодействия
+Свойства работают совместно: активен только один режим стрелок — если `arrowCarousel = true`, режим `arrowStepper` игнорируется и наоборот. При активном режиме навигации кнопка очистки (`cancel`) автоматически скрывается, так как область управления имеет приоритет. Флаги `disabledPrevious` и `disabledNext` применяются только к текущему активному режиму стрелок. Свойство `align` влияет на выравнивание текста и содержимого внутри поля, но не изменяет позицию самих кнопок навигации.
 
-1. Активен только один режим: если `arrowCarousel = true`, режим `arrowStepper` игнорируется и наоборот.
-2. При активном режиме стрелок кнопка очистки (cancel) скрывается (приоритет области управления).
-3. Флаги `disabledPrevious` / `disabledNext` относятся только к текущему активному режиму.
-4. `align` влияет на текст/контент, но не смещает сами кнопки навигации.
+```html
+<script setup>
+import { ref } from 'vue'
 
-### Типовые сценарии
+const currentIndex = ref(0)
+const items = ['Item 1', 'Item 2', 'Item 3']
+const count = ref(5)
+</script>
 
-- Переключение записей/экранов: `arrowCarousel` + управление `disabledPrevious/disabledNext`.
-- Инкремент/декремент числа: `arrowStepper` + логика значения.
-- Центрированное значение со степперами: `arrowStepper` + `align="center"`.
+<template>
+  <!-- Карусель с навигацией -->
+  <Field
+    label="Элемент"
+    arrow-carousel
+    :disabled-previous="currentIndex === 0"
+    :disabled-next="currentIndex === items.length - 1"
+  >
+    <template #default="{ id, className }">
+      <input
+        :id="id"
+        :class="className"
+        :value="items[currentIndex]"
+        readonly
+      />
+    </template>
+  </Field>
 
+  <!-- Числовой степпер с центрированием -->
+  <Field
+    label="Количество"
+    arrow-stepper
+    align="center"
+    :disabled-previous="count <= 0"
+    :disabled-next="count >= 99"
+  >
+    <template #default="{ id, className }">
+      <input
+        :id="id"
+        :class="className"
+        :value="count"
+        readonly
+      />
+    </template>
+  </Field>
+
+  <!-- Степпер без ограничений -->
+  <Field
+    label="Значение"
+    arrow-stepper
+  >
+    <template #default="{ id, className }">
+      <input
+        :id="id"
+        :class="className"
+        :value="count"
+        readonly
+      />
+    </template>
+  </Field>
+</template>
+```

package/src/media/mdx/Field/cancel.en.mdx

@@ -1,17 +1,54 @@
-## Cancel / clear mode
+## Clear button
 
-The `cancel` and `cancelShow` properties control when a clear (cancel) icon is displayed.
+Properties `cancel` and `cancelShow` are designed to control the display of the field clear icon.
 
-### Properties
+**Properties:**
 
-- **cancel** — Display mode: `auto` or `always`.
-- **cancelShow** — Condition flag used only in `auto` mode.
+- `cancel` — clear button display mode (`auto` or `always`)
+- `cancelShow` — conditional visibility flag, used only in `auto` mode
 
-### Behaviour
+Properties work together: if `cancel` is set to `auto`, the clear icon is displayed only when the conditions `cancelShow = true` are met, the field is active (not `disabled`/`readonly`), and arrow mode (`arrowCarousel`/`arrowStepper`) is not enabled. When `cancel = always`, the icon is displayed forcibly (except for `disabled`/`readonly` or active arrows), the `cancelShow` value is ignored. Arrow modes take priority over the clear button — when navigation is active, cancel is hidden regardless of settings.
 
-- `cancel = auto`: Shown only if `cancelShow` is true, field is active (not disabled / readonly) and no arrow mode (carousel / stepper) is enabled.
-- `cancel = always`: Forced display (still hidden if disabled / readonly or arrows active).
-- In `always` mode `cancelShow` is ignored.
+```html
+<script setup>
+import { ref, computed } from 'vue'
 
-Typical usage: bind `cancelShow` to a computed "has value" state.
+const value = ref('')
+const hasValue = computed(() => value.value.length > 0)
+</script>
 
+<template>
+  <!-- Automatic mode with condition -->
+  <Field
+    label="Search"
+    cancel="auto"
+    :cancel-show="hasValue"
+  >
+    <template #default="{ id, className }">
+      <input :id="id" :class="className" v-model="value" />
+    </template>
+  </Field>
+
+  <!-- Forced display -->
+  <Field
+    label="Filter"
+    cancel="always"
+  >
+    <template #default="{ id, className }">
+      <input :id="id" :class="className" v-model="value" />
+    </template>
+  </Field>
+
+  <!-- With event handler -->
+  <Field
+    label="Input"
+    cancel="auto"
+    :cancel-show="hasValue"
+    @click="value = ''"
+  >
+    <template #default="{ id, className }">
+      <input :id="id" :class="className" v-model="value" />
+    </template>
+  </Field>
+</template>
+```

package/src/media/mdx/Field/cancel.ru.mdx

@@ -1,17 +1,54 @@
-## Режим кнопки очистки (cancel)
+## Кнопка очистки
 
-Свойства `cancel` и `cancelShow` управляют отображением иконки очистки (cancel).
+Свойства `cancel` и `cancelShow` предназначены для управления отображением иконки очистки поля.
 
-### Свойства
+**Свойства:**
 
-- **cancel** — Режим отображения: `auto` или `always`.
-- **cancelShow** — Условный флаг, используется только в режиме `auto`.
+- `cancel` — режим отображения кнопки очистки (`auto` или `always`)
+- `cancelShow` — условный флаг видимости, используется только в режиме `auto`
 
-### Поведение
+Свойства работают совместно: если `cancel` установлен в `auto`, иконка очистки отображается только при выполнении условий `cancelShow = true`, поле активно (не `disabled`/`readonly`) и не включён режим стрелок (`arrowCarousel`/`arrowStepper`). При `cancel = always` иконка отображается принудительно (кроме случаев `disabled`/`readonly` или активных стрелок), значение `cancelShow` игнорируется. Режимы стрелок имеют приоритет над кнопкой очистки — при активной навигации cancel скрывается независимо от настроек.
 
-- `cancel = auto`: Показ только если `cancelShow = true`, поле активно (не disabled / readonly) и не включён режим стрелок (carousel / stepper).
-- `cancel = always`: Принудительный показ (кроме случаев disabled / readonly или активных стрелок).
-- В режиме `always` значение `cancelShow` игнорируется.
+```html
+<script setup>
+import { ref, computed } from 'vue'
 
-Типичный сценарий: привязать `cancelShow` к вычисляемому состоянию "есть значение".
+const value = ref('')
+const hasValue = computed(() => value.value.length > 0)
+</script>
 
+<template>
+  <!-- Автоматический режим с условием -->
+  <Field
+    label="Поиск"
+    cancel="auto"
+    :cancel-show="hasValue"
+  >
+    <template #default="{ id, className }">
+      <input :id="id" :class="className" v-model="value" />
+    </template>
+  </Field>
+
+  <!-- Принудительный показ -->
+  <Field
+    label="Фильтр"
+    cancel="always"
+  >
+    <template #default="{ id, className }">
+      <input :id="id" :class="className" v-model="value" />
+    </template>
+  </Field>
+
+  <!-- С обработчиком события -->
+  <Field
+    label="Ввод"
+    cancel="auto"
+    :cancel-show="hasValue"
+    @click="value = ''"
+  >
+    <template #default="{ id, className }">
+      <input :id="id" :class="className" v-model="value" />
+    </template>
+  </Field>
+</template>
+```