@dxtmisha/wiki 0.24.2 → 0.25.1

package/src/media/mdx/Dialog/states.en.mdx

@@ -0,0 +1,58 @@
+## Success and error states
+
+Properties `success`, `error`, `iconSuccess` and `iconError` are designed to control the visual state of the dialog and automatically display corresponding icons.
+
+**Properties:**
+
+- `success` — sets the dialog to success state with automatic icon
+- `error` — sets the dialog to error state with automatic icon
+- `iconSuccess` — sets the icon for success state (default 'check_circle')
+- `iconError` — sets the icon for error state (default 'error')
+
+Properties work together: if `success` or `error` are not set or equal to `false`, the dialog is displayed in a neutral state. When `success="true"` is activated, the component automatically displays the success icon from `iconSuccess`. When `error="true"` is activated, the error icon from `iconError` is displayed. Properties `iconSuccess` and `iconError` allow overriding standard icons with custom ones, providing flexibility in visual design of dialog messages.
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const showSuccess = ref(false)
+const showError = ref(false)
+</script>
+
+<template>
+  <!-- Success dialog -->
+  <Dialog
+    v-model:open="showSuccess"
+    :success="true"
+    label="Operation completed"
+    description="Your changes have been saved successfully."
+  />
+
+  <!-- Error dialog -->
+  <Dialog
+    v-model:open="showError"
+    :error="true"
+    label="Operation failed"
+    description="Unable to complete the operation. Please try again."
+  />
+
+  <!-- With custom icons -->
+  <Dialog
+    v-model:open="showSuccess"
+    :success="true"
+    iconSuccess="done_all"
+    label="All done"
+    description="Process completed successfully."
+  />
+
+  <!-- Error with custom icon -->
+  <Dialog
+    v-model:open="showError"
+    :error="true"
+    iconError="warning"
+    label="Warning"
+    description="Issues detected during data processing."
+  />
+</template>
+```
+

package/src/media/mdx/Dialog/states.ru.mdx

@@ -0,0 +1,57 @@
+## Состояния успеха и ошибки
+
+Свойства `success`, `error`, `iconSuccess` и `iconError` предназначены для управления визуальным состоянием диалога и автоматического отображения соответствующих иконок.
+
+**Свойства:**
+
+- `success` — переводит диалог в состояние успеха с автоматической иконкой
+- `error` — переводит диалог в состояние ошибки с автоматической иконкой
+- `iconSuccess` — задаёт иконку для состояния успеха (по умолчанию 'check_circle')
+- `iconError` — задаёт иконку для состояния ошибки (по умолчанию 'error')
+
+Свойства работают совместно: если `success` или `error` не заданы или равны `false`, диалог отображается в нейтральном состоянии. При активации `success="true"`, компонент автоматически отображает иконку успеха из `iconSuccess`. При активации `error="true"`, отображается иконка ошибки из `iconError`. Свойства `iconSuccess` и `iconError` позволяют переопределить стандартные иконки на пользовательские, обеспечивая гибкость визуального оформления диалоговых сообщений.
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const showSuccess = ref(false)
+const showError = ref(false)
+</script>
+
+<template>
+  <!-- Диалог успеха -->
+  <Dialog
+    v-model:open="showSuccess"
+    :success="true"
+    label="Операция выполнена"
+    description="Ваши изменения успешно сохранены."
+  />
+
+  <!-- Диалог ошибки -->
+  <Dialog
+    v-model:open="showError"
+    :error="true"
+    label="Ошибка выполнения"
+    description="Не удалось выполнить операцию. Попробуйте ещё раз."
+  />
+
+  <!-- С пользовательскими иконками -->
+  <Dialog
+    v-model:open="showSuccess"
+    :success="true"
+    iconSuccess="done_all"
+    label="Всё готово"
+    description="Процесс завершён успешно."
+  />
+
+  <!-- Ошибка с кастомной иконкой -->
+  <Dialog
+    v-model:open="showError"
+    :error="true"
+    iconError="warning"
+    label="Внимание"
+    description="Обнаружены проблемы при обработке данных."
+  />
+</template>
+```

package/src/media/mdx/Dialog/wikiMdxDialog.ts

@@ -0,0 +1,37 @@
+import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
+
+import dialogEn from './dialog.en.mdx'
+import dialogRu from './dialog.ru.mdx'
+import statesEn from './states.en.mdx'
+import statesRu from './states.ru.mdx'
+import buttonsEn from './buttons.en.mdx'
+import buttonsRu from './buttons.ru.mdx'
+import eventsEn from './events.en.mdx'
+import eventsRu from './events.ru.mdx'
+
+/**
+ * MDX files for Dialog component
+ *
+ * MDX файлы для компонента Dialog
+ */
+export const wikiMdxDialog: StorybookComponentsMdxItem = {
+  name: 'Dialog',
+  descriptions: {
+    dialog: {
+      en: dialogEn,
+      ru: dialogRu
+    },
+    states: {
+      en: statesEn,
+      ru: statesRu
+    },
+    buttons: {
+      en: buttonsEn,
+      ru: buttonsRu
+    },
+    events: {
+      en: eventsEn,
+      ru: eventsRu
+    }
+  }
+}

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

@@ -1,25 +1,91 @@
-## 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`, `arrowAlign`, `disabledPrevious`, and `disabledNext` are designed to control built-in navigation elements.
 
-### 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)
+- `arrowAlign` — controls horizontal position of navigation arrows (`left`, `center`, `right`)
+- `disabledPrevious` — disables the left button (back/minus)
+- `disabledNext` — disables the right button (forward/plus)
 
-### 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.
 
-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 -->
+  <Field
+    label="Quantity"
+    arrow-stepper
+    :disabled-previous="count <= 0"
+    :disabled-next="count >= 99"
+  >
+    <template #default="{ id, className }">
+      <input
+        :id="id"
+        :class="className"
+        :value="count"
+        readonly
+      />
+    </template>
+  </Field>
+
+  <!-- Stepper with left-aligned arrows -->
+  <Field
+    label="Value"
+    arrow-stepper
+    arrow-align="left"
+  >
+    <template #default="{ id, className }">
+      <input
+        :id="id"
+        :class="className"
+        :value="count"
+        readonly
+      />
+    </template>
+  </Field>
+
+  <!-- Stepper with centered arrows -->
+  <Field
+    label="Value"
+    arrow-stepper
+    arrow-align="center"
+  >
+    <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,91 @@
-## Навигация и выравнивание
+## Навигация и стрелки
 
-Свойства `arrowCarousel`, `arrowStepper`, `disabledPrevious`, `disabledNext` и `align` управляют встроенными элементами навигации и горизонтальным выравниванием содержимого внутри Field.
+Свойства `arrowCarousel`, `arrowStepper`, `arrowAlign`, `disabledPrevious` и `disabledNext` предназначены для управления встроенными элементами навигации.
 
-### Свойства
+**Свойства:**
 
-- **arrowCarousel** — Включает стрелки навигации (влево/вправо) для переключения элементов.
-- **arrowStepper** — Включает числовые шаговые кнопки (минус / плюс). Взаимоисключимо с `arrowCarousel`.
-- **disabledPrevious** — Отключает левую / минус кнопку.
-- **disabledNext** — Отключает правую / плюс кнопку.
-- **align** (`left | center | right`) — Горизонтальное выравнивание области ввода/контента.
+- `arrowCarousel` — включает стрелки навигации (влево/вправо) для переключения элементов
+- `arrowStepper` — включает числовые шаговые кнопки (минус/плюс)
+- `arrowAlign` — управляет горизонтальным расположением стрелок навигации (`left`, `center`, `right`)
+- `disabledPrevious` — отключает левую кнопку (назад/минус)
+- `disabledNext` — отключает правую кнопку (вперёд/плюс)
 
-### Правила взаимодействия
+Свойства работают совместно: активен только один режим стрелок — если `arrowCarousel = true`, режим `arrowStepper` игнорируется и наоборот. При активном режиме навигации кнопка очистки (`cancel`) автоматически скрывается, так как область управления имеет приоритет. Флаги `disabledPrevious` и `disabledNext` применяются только к текущему активному режиму стрелок.
 
-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
+    :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
+    arrow-align="left"
+  >
+    <template #default="{ id, className }">
+      <input
+        :id="id"
+        :class="className"
+        :value="count"
+        readonly
+      />
+    </template>
+  </Field>
+
+  <!-- Степпер с центрированными стрелками -->
+  <Field
+    label="Значение"
+    arrow-stepper
+    arrow-align="center"
+  >
+    <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>
+```

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

@@ -1,22 +1,52 @@
-Field is the base container for form controls that composes label, messages, counter, icons, and progress. It provides a unified skeleton and classes for consistent layout.
+Base container for form controls that composes label, messages, counter, icons, and progress into a unified structure.
 
-### Purpose
+Field centralizes the visual representation management of input fields, handles focus and validation states, coordinates auxiliary element positioning, and provides a consistent API for building any type of inputs. It serves as the fundamental foundation for creating consistent forms with slot support, control icons, and subcomponent integration.
 
-- **Composition of subcomponents** — FieldLabel, FieldMessage, FieldCounter, Progress, icons
-- **Unified scaffold** — Wrapper template for the input area and helper zones (caption/prefix/suffix)
-- **State styles** — Manages focus, disabled, readonly, selected, block
-- **Slot support** — Integrates caption, prefix, suffix at the container level
+**Core capabilities:**
 
-### Core capabilities
+- Subcomponent composition (FieldLabel, FieldMessage, FieldCounter, Progress)
+- State management (focus, disabled, readonly, selected, block)
+- Slot coordination (caption, prefix, suffix, leading, trailing)
+- Validation highlighting based on validationMessage and forceShowMessage
+- Control icons with customizable visibility (cancel, arrows)
+- Flexible counter positioning via counterTop
+- Built-in helpers for sizing and icons (FieldSize, FieldIcons)
+- Loading progress integration and skeleton state
 
-- **Validation highlighting** — Based on `validationMessage` and a force show flag
-- **Character counter** — Position toggle via `counterTop`
-- **Control icons** — Cancel and navigation (arrows) with visibility flags
-- **Sizing helpers** — Built-in FieldSize and FieldIcons
-- **Progress integration** — Compact static progress for loading/status
+**Typical use cases:**
 
-### Integration
+- Base container for Input, Select, Textarea, and other form controls
+- Building custom form components with unified styling
+- Creating fields with validation and character counters
+- Developing component libraries with consistent UI
 
-Use Field as a foundation for constructing any input fields. It easily integrates labels, icons, messages, and progress. The component handles markup, classes, and consistency; concrete inputs provide the input logic.
+```html
+<script setup>
+import { ref } from 'vue'
+import { Field } from '@dxtmisha/constructor'
 
-> Field is a constructor wrapper: it doesn’t input data by itself, it organizes structure and auxiliary visuals.
+const value = ref('')
+
+// Field provides structure and management
+</script>
+
+<template>
+  <Field
+    label="Username"
+    helper-message="Enter your name"
+    :counter="value.length"
+    counter-max="50"
+  >
+    <template #default="{ id, className }">
+      <input
+        :id="id"
+        :class="className"
+        v-model="value"
+        maxlength="50"
+      />
+    </template>
+  </Field>
+</template>
+```
+
+> Field is a constructor container: it does not handle data input directly, but organizes structure, classes, and auxiliary element display for any type of input fields.

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

@@ -1,22 +1,52 @@
-Field — базовый контейнер для полей формы, который собирает метку, сообщения, счётчик, иконки и прогресс. Обеспечивает единый каркас и классы для консистентной верстки.
+Базовый контейнер для полей формы, который композирует метку, сообщения, счётчик, иконки и прогресс в единую структуру.
 
-### Назначение
+Field централизует управление визуальным представлением полей ввода, обрабатывает состояния фокуса и валидации, координирует расположение вспомогательных элементов и предоставляет согласованный API для построения любых типов инпутов. Является фундаментальной основой для создания консистентных форм с поддержкой слотов, иконок управления и интеграцией подкомпонентов.
 
-- **Композиция подкомпонентов** — FieldLabel, FieldMessage, FieldCounter, Progress, иконки
-- **Единый каркас** — Шаблон обёртки для поля ввода и вспомогательных зон (caption/prefix/suffix)
-- **Стили состояния** — Управление состояниями: focus, disabled, readonly, selected, block
-- **Поддержка слотов** — Встраивание caption, prefix, suffix на уровне контейнера
+**Основные возможности:**
 
-### Основные возможности
+- Композиция подкомпонентов (FieldLabel, FieldMessage, FieldCounter, Progress)
+- Управление состояниями (focus, disabled, readonly, selected, block)
+- Координация слотов (caption, prefix, suffix, leading, trailing)
+- Подсветка валидации на основе validationMessage и forceShowMessage
+- Иконки управления с настраиваемой видимостью (cancel, arrows)
+- Гибкое позиционирование счётчика через counterTop
+- Встроенные помощники для размеров и иконок (FieldSize, FieldIcons)
+- Интеграция прогресса загрузки и скелетон-состояния
 
-- **Подсветка валидации** — На основе validationMessage и флага принудительного показа
-- **Счетчик символов** — Переключение позиции счётчика через `counterTop`
-- **Иконки управления** — Отмена и навигация (стрелки) с флагами видимости
-- **Интеграция размеров** — Встроенные помощники FieldSize и FieldIcons
-- **Интеграция прогресса** — Компактный статичный прогресс для загрузок/состояний
+**Типичные сценарии использования:**
 
-### Интеграция
+- Базовый контейнер для Input, Select, Textarea и других полей ввода
+- Построение кастомных компонентов форм с единым стилем
+- Создание полей с валидацией и счётчиками символов
+- Разработка библиотек компонентов с консистентным UI
 
-Используйте Field как основу для конструирования любых полей ввода. В него легко интегрируются подписи, иконки, сообщения и прогресс. Компонент отвечает за разметку, классы и согласованность, а логику ввода реализуют конкретные инпуты.
+```html
+<script setup>
+import { ref } from 'vue'
+import { Field } from '@dxtmisha/constructor'
 
-> Field — это оболочка-конструктор: он не вводит данные сам по себе, а организует структуру и отображение вспомогательных элементов.
+const value = ref('')
+
+// Field предоставляет структуру и управление
+</script>
+
+<template>
+  <Field
+    label="Имя пользователя"
+    helper-message="Введите ваше имя"
+    :counter="value.length"
+    counter-max="50"
+  >
+    <template #default="{ id, className }">
+      <input
+        :id="id"
+        :class="className"
+        v-model="value"
+        maxlength="50"
+      />
+    </template>
+  </Field>
+</template>
+```
+
+> Field — это контейнер-конструктор: он не обрабатывает ввод данных напрямую, а организует структуру, классы и отображение вспомогательных элементов для любых типов полей ввода.