@dxtmisha/wiki 0.24.2 → 0.25.1

package/src/media/mdx/FieldCounter/fieldCounter.en.mdx

@@ -1,21 +1,59 @@
-FieldCounter is a component that displays character count for form fields. Shows current character count and input limits.
+Component for displaying character count and input limits in form fields with customizable formatting templates.
 
-### Purpose
+FieldCounter provides visual feedback about the number of entered characters, automatically formats display depending on the presence of a maximum limit, and supports flexible customization through templates with placeholders. The component integrates with text fields and text areas, providing users with information about restrictions and remaining input space.
 
-- **Character counting** — Display current input character count
-- **Input limits** — Show character restrictions
-- **Custom templates** — Flexible display formats
-- **Auto visibility** — Smart display management
+**Key features:**
 
-### Core capabilities
+- Display current number of entered characters
+- Automatic maximum limit display when present
+- Flexible formatting templates with [c] and [m] placeholders
+- Automatic format detection (50 / 100 or just 50)
+- Support for string and numeric counter and maxlength values
+- Smart visibility management via counterShow property
+- Compact display for space efficiency
 
-- **Real-time counting** — Instant counter updates
-- **Limit management** — Maximum character limit display
-- **Template rendering** — Customizable formats with [c] and [m] placeholders
-- **Flexible values** — Support for strings and numbers
+**Common use cases:**
 
-### Integration
+- Text fields with character count limits
+- Multi-line text areas (textarea) for descriptions
+- Comment input fields with limits
+- Forms with minimum/maximum length requirements
+- SMS editors with character counting
 
-Use FieldCounter with text inputs and textareas to display character count and limit information.
+```html
+<script setup>
+import { ref } from 'vue'
 
-> This component focuses on counter display and should be used alongside input fields.
+const message = ref('')
+const bio = ref('')
+</script>
+
+<template>
+  <!-- Counter only without limit -->
+  <FieldCounter :counter="message.length" />
+
+  <!-- Counter with maximum limit (format: 50 / 200) -->
+  <FieldCounter
+    :counter="message.length"
+    :maxlength="200"
+  />
+
+  <!-- Custom display template -->
+  <FieldCounter
+    :counter="bio.length"
+    :maxlength="500"
+    template="Characters: [c] of [m]"
+  />
+
+  <!-- HTML in template for styling -->
+  <FieldCounter
+    :counter="message.length"
+    :maxlength="160"
+    template="<b>[c]</b> / [m] characters"
+  />
+
+  <!-- Conditional display via counterShow -->
+  <FieldCounter
+    :counter="message.length"
+    :maxlength="100"
+    :counterShow="message.length > 0"

package/src/media/mdx/FieldCounter/fieldCounter.ru.mdx

@@ -1,21 +1,62 @@
-FieldCounter — компонент для отображения счетчика символов в полях форм. Показывает текущее количество символов и лимиты ввода.
+Компонент для отображения счетчика символов и лимитов ввода в полях форм с поддержкой настраиваемых шаблонов форматирования.
 
-### Назначение
+FieldCounter обеспечивает визуальную обратную связь о количестве введенных символов, автоматически форматирует отображение в зависимости от наличия максимального лимита и поддерживает гибкую настройку через шаблоны с плейсхолдерами. Компонент интегрируется с текстовыми полями и областями ввода, предоставляя пользователю информацию об ограничениях и оставшемся месте для ввода.
 
-- **Счетчик символов** — Отображение количества введенных символов
-- **Лимиты ввода** — Показ ограничений по количеству символов
-- **Настраиваемые шаблоны** — Гибкие форматы отображения
-- **Автоматическая видимость** — Умное управление отображением
+**Основные возможности:**
 
-### Основные возможности
+- Отображение текущего количества введенных символов
+- Автоматический показ максимального лимита при его наличии
+- Гибкие шаблоны форматирования с плейсхолдерами [c] и [m]
+- Автоматическое определение формата (50 / 100 или просто 50)
+- Поддержка строковых и числовых значений counter и maxlength
+- Умное управление видимостью через свойство counterShow
+- Компактное отображение для экономии пространства
 
-- **Подсчет в реальном времени** — Мгновенное обновление счетчика
-- **Управление лимитами** — Отображение максимальных ограничений
-- **Шаблоны отображения** — Настраиваемые форматы с заполнителями [c] и [m]
-- **Гибкие значения** — Поддержка строк и чисел
+**Типичные сценарии использования:**
 
-### Интеграция
+- Текстовые поля с ограничением по количеству символов
+- Многострочные текстовые области (textarea) для описаний
+- Поля ввода комментариев с лимитами
+- Формы с требованиями к минимальной/максимальной длине
+- SMS-редакторы с подсчетом символов
 
-Используйте FieldCounter с текстовыми полями и областями ввода для отображения информации о количестве символов и лимитах.
+```html
+<script setup>
+import { ref } from 'vue'
 
-> Компонент фокусируется на отображении счетчика и должен использоваться вместе с полями ввода.
+const message = ref('')
+const bio = ref('')
+</script>
+
+<template>
+  <!-- Только счетчик без лимита -->
+  <FieldCounter :counter="message.length" />
+
+  <!-- Счетчик с максимальным лимитом (формат: 50 / 200) -->
+  <FieldCounter
+    :counter="message.length"
+    :maxlength="200"
+  />
+
+  <!-- Кастомный шаблон отображения -->
+  <FieldCounter
+    :counter="bio.length"
+    :maxlength="500"
+    template="Символов: [c] из [m]"
+  />
+
+  <!-- HTML в шаблоне для стилизации -->
+  <FieldCounter
+    :counter="message.length"
+    :maxlength="160"
+    template="<b>[c]</b> / [m] символов"
+  />
+
+  <!-- Условное отображение через counterShow -->
+  <FieldCounter
+    :counter="message.length"
+    :maxlength="100"
+    :counterShow="message.length > 0"
+  />
+</template>
+```

package/src/media/mdx/FieldCounter/templates.en.mdx

@@ -1,13 +1,13 @@
-## Custom Templates
+## Custom Display Templates
 
-Use simple string templates with placeholders to format the counter.
+The `template` property allows you to customize the counter display format using placeholders.
 
-### Placeholders
+**Available placeholders:**
 
-- `[c]` - current character count
-- `[m]` - maximum character limit
+- `[c]` — current number of entered characters
+- `[m]` — maximum character limit
 
-### Examples
+Uses string interpolation to replace placeholders with actual counter values. Supports HTML markup inside the template for customizing styles of individual parts. When no template is provided, the component automatically determines the format: displays "50 / 100" when `maxlength` is present or just "50" when it's absent.
 
 ```html
 <!-- Descriptive format -->
@@ -16,4 +16,24 @@ Use simple string templates with placeholders to format the counter.
   :maxlength="150"
   template="Characters: [c] of [m]"
 />
+
+<!-- Compact format -->
+<FieldCounter
+  :counter="42"
+  :maxlength="100"
+  template="[c]/[m]"
+/>
+
+<!-- With HTML for styling -->
+<FieldCounter
+  :counter="75"
+  :maxlength="150"
+  template="<b>[c]</b> of <i>[m]</i> characters"
+/>
+
+<!-- Current counter only with text -->
+<FieldCounter
+  :counter="42"
+  template="Characters entered: [c]"
+/>
 ```

package/src/media/mdx/FieldCounter/templates.ru.mdx

@@ -1,13 +1,13 @@
-## Пользовательские шаблоны
+## Настраиваемые шаблоны отображения
 
-Используйте простые строковые шаблоны с плейсхолдерами для форматирования счетчика.
+Свойство `template` позволяет настроить формат отображения счетчика символов с использованием плейсхолдеров.
 
-### Плейсхолдеры
+**Доступные плейсхолдеры:**
 
-- `[c]` — текущее число символов
+- `[c]` — текущее количество введенных символов
 - `[m]` — максимальный лимит символов
 
-### Примеры
+Использует строковую интерполяцию для замены плейсхолдеров на актуальные значения счетчика. Поддерживает HTML-разметку внутри шаблона для кастомизации стилей отдельных частей. При отсутствии шаблона компонент автоматически определяет формат: отображает "50 / 100" при наличии `maxlength` или просто "50" при его отсутствии.
 
 ```html
 <!-- Описательный формат -->
@@ -16,4 +16,24 @@
   :maxlength="150"
   template="Символов: [c] из [m]"
 />
+
+<!-- Компактный формат -->
+<FieldCounter
+  :counter="42"
+  :maxlength="100"
+  template="[c]/[m]"
+/>
+
+<!-- С HTML для стилизации -->
+<FieldCounter
+  :counter="75"
+  :maxlength="150"
+  template="<b>[c]</b> из <i>[m]</i> символов"
+/>
+
+<!-- Только текущий счетчик с текстом -->
+<FieldCounter
+  :counter="42"
+  template="Введено символов: [c]"
+/>
 ```

package/src/media/mdx/FieldLabel/fieldLabel.en.mdx

@@ -1,22 +1,64 @@
-FieldLabel is a component for displaying a field label and a required indicator.
+Component for displaying input field labels with support for required indicator, character counter, and progress indicator.
 
-### Purpose
+FieldLabel provides uniform display of form field captions, automatically integrates with FieldCounter for character counting and Progress for loading indication. The component supports skeleton loading, customizable slots, and ensures consistent visual styling of form elements.
 
-- **Field label** — A caption for the input control
-- **Required marker** — Shows a required state when needed
-- **Compatibility** — Works together with FieldCounter and Progress
-- **Consistent style** — Unified classes and spacing within form controls
+**Key features:**
 
-### Key features
+- Text label display for input fields
+- Required field indicator (required marker)
+- FieldCounter integration for character counting
+- Built-in Progress indicator support
+- Skeleton loading support for pending states
+- Flexible customization via slots (leading, trailing)
+- Consistent spacing and styles within forms
 
-- **Simple usage** — Just pass the `label` prop
-- **Required marker** — Enable via the `required` prop
-- **Character counter** — Renders when counter props (counter/maxlength) are provided
-- **Progress indicator** — Can display progress (e.g., loading)
+**Common use cases:**
 
-### Integration
+- Labels for text fields and textareas
+- Forms with required fields
+- Fields with character count limits
+- Forms with file upload progress indication
+- Dynamic forms with skeleton loading
 
-Use FieldLabel as a part of composite input controls. When needed, add FieldCounter and Progress via corresponding props to make forms more informative.
+```html
+<script setup>
+import { ref } from 'vue'
 
-> The component is responsible for rendering the label and does not affect input logic.
+const text = ref('')
+const maxLength = 100
+</script>
 
+<template>
+  <!-- Simple label -->
+  <FieldLabel label="Username" />
+
+  <!-- Required field label -->
+  <FieldLabel
+    label="Email"
+    required
+  />
+
+  <!-- Label with character counter -->
+  <FieldLabel
+    label="Description"
+    :counter="text.length"
+    :maxlength="maxLength"
+  />
+
+  <!-- Label with progress indicator -->
+  <FieldLabel
+    label="File Upload"
+    :progress="45"
+  />
+
+  <!-- Label with slots -->
+  <FieldLabel label="Search">
+    <template #leading>
+      <Icon name="search" />
+    </template>
+    <template #trailing>
+      <Icon name="info" />
+    </template>
+  </FieldLabel>
+</template>
+```

package/src/media/mdx/FieldLabel/fieldLabel.ru.mdx

@@ -1,22 +1,64 @@
-FieldLabel — компонент для отображения текстовой метки поля и индикатора обязательности.
+Компонент для отображения меток полей ввода с поддержкой индикатора обязательности, счетчика символов и прогресс-индикатора.
 
-### Назначение
+FieldLabel предоставляет единообразное отображение подписей к полям форм, автоматически интегрируется с FieldCounter для подсчета символов и Progress для индикации загрузки. Компонент поддерживает скелетон-загрузку, настраиваемые слоты и обеспечивает согласованное визуальное оформление элементов формы.
 
-- **Метка поля** — Подпись к полю ввода
-- **Обязательность** — Отображение маркера required при необходимости
-- **Совместимость** — Используется вместе с FieldCounter и Progress
-- **Единый стиль** — Согласованные классы и отступы в составе формы
+**Основные возможности:**
 
-### Основные возможности
+- Отображение текстовой метки для полей ввода
+- Индикатор обязательности поля (required marker)
+- Интеграция со счетчиком символов FieldCounter
+- Встроенная поддержка прогресс-индикатора Progress
+- Поддержка скелетон-загрузки для состояния ожидания
+- Гибкая настройка через слоты (leading, trailing)
+- Единообразные отступы и стили в составе форм
 
-- **Простое подключение** — Достаточно передать свойство `label`
-- **Маркер обязательности** — Включается через свойство `required`
-- **Счетчик символов** — Отображается при наличии свойств счётчика (counter/maxlength)
-- **Индикатор процесса** — Может показывать прогресс (например, загрузки)
+**Типичные сценарии использования:**
 
-### Интеграция
+- Подписи к текстовым полям и textarea
+- Формы с обязательными полями
+- Поля с ограничением количества символов
+- Формы с индикацией процесса загрузки файлов
+- Динамические формы со скелетон-загрузкой
 
-Используйте FieldLabel как часть составных контролов ввода. При необходимости добавляйте FieldCounter и Progress через соответствующие свойства, чтобы сделать форму информативнее.
+```html
+<script setup>
+import { ref } from 'vue'
 
-> Компонент отвечает за отображение метки и не влияет на логику ввода данных.
+const text = ref('')
+const maxLength = 100
+</script>
 
+<template>
+  <!-- Простая метка -->
+  <FieldLabel label="Имя пользователя" />
+
+  <!-- Метка обязательного поля -->
+  <FieldLabel
+    label="Email"
+    required
+  />
+
+  <!-- Метка со счетчиком символов -->
+  <FieldLabel
+    label="Описание"
+    :counter="text.length"
+    :maxlength="maxLength"
+  />
+
+  <!-- Метка с прогресс-индикатором -->
+  <FieldLabel
+    label="Загрузка файла"
+    :progress="45"
+  />
+
+  <!-- Метка со слотами -->
+  <FieldLabel label="Поиск">
+    <template #leading>
+      <Icon name="search" />
+    </template>
+    <template #trailing>
+      <Icon name="info" />
+    </template>
+  </FieldLabel>
+</template>
+```

package/src/media/mdx/FieldMessage/fieldMessage.en.mdx

@@ -1,22 +1,66 @@
-FieldMessage is a component for displaying helper and validation messages below form fields.
+Component for displaying helper and validation messages below form fields.
 
-### Purpose
+FieldMessage centralizes management of text hints and error messages in forms. The component automatically determines display priority (validation errors take precedence over hints), supports forced display via forceShow, and integrates with input fields and character counters. It provides a flexible slot system for customization and works with both static and reactive values.
 
-- Helper message — a hint or guidance for the user under the field
-- Validation message — an error text shown on invalid input
-- Forced display — controlled via the forceShow property
-- Smart visibility — automatic logic based on provided values
+**Key Features:**
 
-### Key features
+- Two message types: helper and validation
+- Message priority — validation message overrides helper message
+- Smart visibility — automatic display logic based on provided values
+- Forced display via forceShow property
+- Flexible sources — support for static and reactive values
+- Integration with FieldCounter for complex forms
+- Customizable rendering through design system and slots
 
-- Message priority — validation message has priority over helper text
-- Flexible sources — supports both static and reactive values
-- Compatibility — works with input fields and character counter
-- Configurable rendering — via the design system and component attributes
+**Typical Use Cases:**
 
-### Integration
+- Helper hints below input fields
+- Displaying validation errors in forms
+- Dynamic messages with reactive content
+- Complex forms with counters and validation
 
-Use FieldMessage alongside input fields to show hints and errors, and together with FieldCounter for more informative forms.
+```html
+<script setup>
+import { ref } from 'vue'
+import { D1FieldMessage } from '@dxtmisha/d1'
 
-> The component focuses on text messages and should be used with input controls.
+const validationError = ref('')
 
+const validateInput = (value) => {
+  if (value.length < 3) {
+    validationError.value = 'Minimum 3 characters'
+  } else {
+    validationError.value = ''
+  }
+}
+</script>
+
+<template>
+  <!-- Helper message -->
+  <D1FieldMessage helper="Enter your name" />
+
+  <!-- Validation message -->
+  <D1FieldMessage
+    helper="Minimum 3 characters"
+    :validation="validationError"
+  />
+
+  <!-- Forced display -->
+  <D1FieldMessage
+    helper="Always visible message"
+    forceShow
+  />
+
+  <!-- With custom content via slots -->
+  <D1FieldMessage>
+    <template #helper>
+      <span class="custom-hint">💡 Hint</span>
+    </template>
+    <template #validation>
+      <span class="custom-error">⚠️ Error</span>
+    </template>
+  </D1FieldMessage>
+</template>
+```
+
+> The component focuses on text messages and should be used together with input control elements.

package/src/media/mdx/FieldMessage/fieldMessage.ru.mdx

@@ -1,22 +1,66 @@
-FieldMessage — компонент для отображения вспомогательных и валидационных сообщений под полями формы.
+Компонент для отображения вспомогательных и валидационных сообщений под полями формы.
 
-### Назначение
+FieldMessage централизует управление текстовыми подсказками и сообщениями об ошибках в формах. Компонент автоматически определяет приоритет отображения (ошибки валидации выше подсказок), поддерживает принудительное показ через forceShow и интегрируется с полями ввода и счетчиками символов. Предоставляет гибкую систему слотов для кастомизации и работает как со статическими, так и с реактивными значениями.
 
-- **Вспомогательное сообщение** — Подсказка пользователю под полем
-- **Сообщение валидации** — Текст ошибки при некорректном вводе
-- **Принудительное отображение** — Управление показом через свойство forceShow
-- **Автоматическая видимость** — Умное управление отображением
+**Основные возможности:**
 
-### Основные возможности
+- Два типа сообщений: вспомогательное (helper) и валидационное (validation)
+- Приоритет сообщений — валидационное сообщение перекрывает вспомогательное
+- Умная видимость — автоматическая логика отображения на основе переданных значений
+- Принудительное отображение через свойство forceShow
+- Гибкие источники — поддержка статических и реактивных значений
+- Интеграция с FieldCounter для комплексных форм
+- Настраиваемый рендеринг через систему дизайна и слоты
 
-- **Приоритет сообщений** — Сообщение об ошибке имеет приоритет над подсказкой
-- **Гибкость источников** — Поддержка статических и реактивных значений
-- **Совместимость** — Используется с полями ввода и счетчиком символов
-- **Настраиваемый вывод** — Через дизайн‑систему и атрибуты компонента
+**Типичные сценарии использования:**
 
-### Интеграция
+- Вспомогательные подсказки под полями ввода
+- Отображение ошибок валидации в формах
+- Динамические сообщения с реактивным контентом
+- Комплексные формы с счетчиками и валидацией
 
-Используйте FieldMessage вместе с полями ввода для вывода подсказок и ошибок, а также в сочетании с FieldCounter для информативных форм.
+```html
+<script setup>
+import { ref } from 'vue'
+import { D1FieldMessage } from '@dxtmisha/d1'
 
-> Компонент фокусируется на отображении текстовых сообщений и должен использоваться совместно с контролами ввода.
+const validationError = ref('')
 
+const validateInput = (value) => {
+  if (value.length < 3) {
+    validationError.value = 'Минимум 3 символа'
+  } else {
+    validationError.value = ''
+  }
+}
+</script>
+
+<template>
+  <!-- Вспомогательное сообщение -->
+  <D1FieldMessage helper="Введите ваше имя" />
+
+  <!-- Сообщение валидации -->
+  <D1FieldMessage
+    helper="Минимум 3 символа"
+    :validation="validationError"
+  />
+
+  <!-- Принудительное отображение -->
+  <D1FieldMessage
+    helper="Всегда видимое сообщение"
+    forceShow
+  />
+
+  <!-- С кастомным контентом через слоты -->
+  <D1FieldMessage>
+    <template #helper>
+      <span class="custom-hint">💡 Подсказка</span>
+    </template>
+    <template #validation>
+      <span class="custom-error">⚠️ Ошибка</span>
+    </template>
+  </D1FieldMessage>
+</template>
+```
+
+> Компонент фокусируется на текстовых сообщениях и должен использоваться совместно с элементами управления вводом.

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

@@ -0,0 +1,45 @@
+### `helper`
+
+Slot for placing helper message. Displays only when validation message is absent.
+
+**Parameters:**
+- `props: FieldMessageSlot` — object with message data
+
+### `validation`
+
+Slot for placing validation message. Has priority over helper message.
+
+**Parameters:**
+- `props: FieldMessageSlot` — object with message data
+
+## FieldMessageSlot
+
+`FieldMessageSlot` — object passed to FieldMessage component slots, containing data for displaying messages.
+
+### Type Structure
+
+```typescript
+type FieldMessageSlot = {
+  /** Current displayed message */
+  message?: string
+
+  /** Helper message text */
+  helperMessage?: string
+
+  /** Validation message text */
+  validationMessage?: string
+}
+```
+
+### Properties
+
+- **`message`** — current message to display (validation or helper, depending on active slot)
+- **`helperMessage`** — helper message text from component property
+- **`validationMessage`** — validation message text from component property
+
+### Display Priority
+
+Component shows only one slot at a time:
+
+1. **Validation** — if `validationMessage` is provided or `validation` slot is defined
+2. **Helper** — if validation is absent, but `helperMessage` is provided or `helper` slot is defined

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

@@ -0,0 +1,45 @@
+### `helper`
+
+Слот для размещения вспомогательного сообщения. Отображается только когда отсутствует сообщение валидации.
+
+**Параметры:**
+- `props: FieldMessageSlot` — объект с данными сообщений
+
+### `validation`
+
+Слот для размещения сообщения валидации. Имеет приоритет над вспомогательным сообщением.
+
+**Параметры:**
+- `props: FieldMessageSlot` — объект с данными сообщений
+
+## FieldMessageSlot
+
+`FieldMessageSlot` — объект, передаваемый в слоты компонента FieldMessage, содержащий данные для отображения сообщений.
+
+### Структура типа
+
+```typescript
+type FieldMessageSlot = {
+  /** Текущее отображаемое сообщение */
+  message?: string
+
+  /** Текст вспомогательного сообщения */
+  helperMessage?: string
+
+  /** Текст сообщения валидации */
+  validationMessage?: string
+}
+```
+
+### Свойства
+
+- **`message`** — текущее сообщение для отображения (validation или helper, в зависимости от активного слота)
+- **`helperMessage`** — текст вспомогательного сообщения из свойства компонента
+- **`validationMessage`** — текст сообщения валидации из свойства компонента
+
+### Приоритет отображения
+
+Компонент показывает только один слот за раз:
+
+1. **Validation** — если передано `validationMessage` или определён слот `validation`
+2. **Helper** — если validation отсутствует, но передано `helperMessage` или определён слот `helper`