@dxtmisha/wiki 0.24.2 → 0.24.3

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

@@ -1,24 +1,26 @@
-## Ширина (width)
+## Ширина поля
 
-Свойство для управления горизонтальным размером Field.
+Свойство `width` определяет горизонтальный размер контейнера Field.
 
-### Свойство
-- **width** (`string`) — Передавайте ЛЮБОЕ валидное CSS‑значение: `"320px"`, `"48rem"`, `"50%"`, `"min(100%,320px)"`, `"clamp(240px,40vw,480px)"`, либо дизайн‑токен (например `"sm"`, если поддержан системой). Значение `"custom"` — внутренняя тех. метка (обычно не использовать).
+**Возможные значения:**
 
-### Поведение
-- Не задано: ширина «резиновая» (зависит от контейнера).
-- С `block`: всегда 100%.
-- Любое конкретное значение: применяется напрямую без доп. обёрток.
+- любое валидное CSS-значение (`'320px'`, `'48rem'`, `'50%'`, `'min(100%,320px)'`, `'clamp(240px,40vw,480px)'`)
+- дизайн-токены системы (например, `'sm'`, `'md'`, `'lg'` при поддержке)
+- `'custom'` — внутренняя техническая метка (не используется напрямую)
 
-### Примеры
-```vue
-<DesignField label="auto" />
-<DesignField width="320px" label="320px" />
-<DesignField width="50%" label="50%" />
-<DesignField width="min(100%,320px)" label="min(...)" />
-```
+Контролирует фиксированную или относительную ширину поля, применяя значение напрямую без дополнительных обёрток. При отсутствии свойства ширина остаётся гибкой и зависит от родительского контейнера. При активном свойстве `block` (установлено в `true`) поле занимает 100% ширины независимо от заданного значения `width`, приоритет имеет блочный режим.
+
+```html
+<!-- Автоматическая ширина -->
+<Field label="auto" />
+
+<!-- Фиксированная ширина -->
+<Field width="320px" label="320px" />
 
-### Заметки
-- Предпочтительнее управлять адаптивностью через родительский layout (flex / grid) и использовать width точечно.
-- Сложные выражения (calc / min / clamp) поддерживаются, если валидны для CSS.
-- `block` может переопределить индивидуально заданную ширину при конфликте приоритетов стилей.
+<!-- Относительная ширина -->
+<Field width="50%" label="50%" />
+
+<!-- CSS-функции -->
+<Field width="min(100%, 320px)" label="min(...)" />
+<Field width="clamp(240px, 40vw, 480px)" label="clamp(...)" />
+```

package/src/media/mdx/Field/wikiMdxField.ts

@@ -6,16 +6,12 @@ import cancelEn from './cancel.en.mdx'
 import cancelRu from './cancel.ru.mdx'
 import arrowsEn from './arrows.en.mdx'
 import arrowsRu from './arrows.ru.mdx'
-import slotDefaultEn from './slot.default.en.mdx'
-import slotDefaultRu from './slot.default.ru.mdx'
-import slotLeadingEn from './slot.leading.en.mdx'
-import slotLeadingRu from './slot.leading.ru.mdx'
-import slotTrailingEn from './slot.trailing.en.mdx'
-import slotTrailingRu from './slot.trailing.ru.mdx'
 import valueEn from './value.en.mdx'
 import valueRu from './value.ru.mdx'
 import widthEn from './width.en.mdx'
 import widthRu from './width.ru.mdx'
+import slotsEn from './slots.en.mdx'
+import slotsRu from './slots.ru.mdx'
 
 /**
  * MDX files for Field component
@@ -25,35 +21,27 @@ import widthRu from './width.ru.mdx'
 export const wikiMdxField: StorybookComponentsMdxItem = {
   name: 'Field',
   descriptions: {
-    'field': {
-      en: fieldEn,
-      ru: fieldRu
-    },
-    'cancel': {
-      en: cancelEn,
-      ru: cancelRu
-    },
-    'arrows': {
+    arrows: {
       en: arrowsEn,
       ru: arrowsRu
     },
-    'slot.default': {
-      en: slotDefaultEn,
-      ru: slotDefaultRu
+    cancel: {
+      en: cancelEn,
+      ru: cancelRu
     },
-    'slot.leading': {
-      en: slotLeadingEn,
-      ru: slotLeadingRu
+    field: {
+      en: fieldEn,
+      ru: fieldRu
     },
-    'slot.trailing': {
-      en: slotTrailingEn,
-      ru: slotTrailingRu
+    slots: {
+      en: slotsEn,
+      ru: slotsRu
     },
-    'value': {
+    value: {
       en: valueEn,
       ru: valueRu
     },
-    'width': {
+    width: {
       en: widthEn,
       ru: widthRu
     }

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.