@dxtmisha/wiki 0.39.5 → 0.39.7

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

@@ -1,52 +0,0 @@
-Базовый контейнер для полей формы, который композирует метку, сообщения, счётчик, иконки и прогресс в единую структуру.
-
-Field централизует управление визуальным представлением полей ввода, обрабатывает состояния фокуса и валидации, координирует расположение вспомогательных элементов и предоставляет согласованный API для построения любых типов инпутов. Является фундаментальной основой для создания консистентных форм с поддержкой слотов, иконок управления и интеграцией подкомпонентов.
-
-**Основные возможности:**
-
-- Композиция подкомпонентов (FieldLabel, FieldMessage, FieldCounter, Progress)
-- Управление состояниями (focus, disabled, readonly, selected, block)
-- Координация слотов (caption, prefix, suffix, leading, trailing)
-- Подсветка валидации на основе validationMessage и forceShowMessage
-- Иконки управления с настраиваемой видимостью (cancel, arrows)
-- Гибкое позиционирование счётчика через counterTop
-- Встроенные помощники для размеров и иконок (FieldSize, FieldIcons)
-- Интеграция прогресса загрузки и скелетон-состояния
-
-**Типичные сценарии использования:**
-
-- Базовый контейнер для Input, Select, Textarea и других полей ввода
-- Построение кастомных компонентов форм с единым стилем
-- Создание полей с валидацией и счётчиками символов
-- Разработка библиотек компонентов с консистентным UI
-
-```html
-<script setup>
-import { ref } from 'vue'
-import { Field } from '@dxtmisha/constructor'
-
-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 — это контейнер-конструктор: он не обрабатывает ввод данных напрямую, а организует структуру, классы и отображение вспомогательных элементов для любых типов полей ввода.

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

@@ -1,10 +0,0 @@
-- `default(props: FieldControl): any` — Default slot for the main input element.
-- `leading(props: FieldControl): any` — Slot for displaying content before the input area.
-- `trailing(props: FieldControl): any` — Slot for displaying content after the input area.
-
-> **FieldControl:**
-> - `id: string` — unique identifier for binding label and input.
-> - `className: string` — CSS classes for the visible input area.
-> - `classHidden: string` — CSS classes for the hidden native input element.
-> - `classForFocus: string` — CSS classes applied when the field is focused.
-> - `binds: Record<string, any>` — properties bound to the input element.

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

@@ -1,10 +0,0 @@
-- `default(props: FieldControl): any` — Слот по умолчанию для основного элемента ввода (input, select, textarea).
-- `leading(props: FieldControl): any` — Слот для отображения контента перед областью ввода.
-- `trailing(props: FieldControl): any` — Слот для отображения контента после области ввода.
-
-> **FieldControl:**
-> - `id: string` — уникальный идентификатор элемента для связывания label и input.
-> - `className: string` — CSS-классы для видимой зоны ввода.
-> - `classHidden: string` — CSS-классы для скрытого нативного элемента ввода.
-> - `classForFocus: string` — CSS-классы, применяемые при фокусировке на поле.
-> - `binds: Record<string, any>` — свойства, привязанные к элементу ввода.

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

@@ -1,49 +0,0 @@
-## Value state
-
-Properties `value` and `isValue` are designed to control the visual filled state of the field independently of the actual content.
-
-**Properties:**
-
-- `value` — actual field content (string/number) passed to the inner element via slot
-- `isValue` — forcibly activates the visual "filled" state even when the value is empty
-
-Properties work together: `Field` reads `value` reactively through `focusValue` for visual purposes (displaying text in scoreboard, caption handling), but does not manage it directly or validate it. If the real value is non-empty, the field automatically receives the visual "filled" state regardless of `isValue`. When the value is empty, the `isValue = true` flag forcibly activates the visual filled mode (floating label, corresponding classes), which is useful for preloads, masks, or delayed data insertion.
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const value = ref('')
-const isLoading = ref(true)
-</script>
-
-<template>
-  <!-- Normal behavior -->
-  <Field label="Name">
-    <template #default="{ id, className }">
-      <input :id="id" :class="className" v-model="value" />
-    </template>
-  </Field>
-
-  <!-- Forced "filled" state -->
-  <Field
-    label="Email"
-    :value="value"
-    :is-value="true"
-  >
-    <template #default="{ id, className }">
-      <input :id="id" :class="className" v-model="value" />
-    </template>
-  </Field>
-
-  <!-- Preload with visual state -->
-  <Field
-    label="Data"
-    :is-value="isLoading"
-  >
-    <template #default="{ id, className }">
-      <input :id="id" :class="className" v-model="value" />
-    </template>
-  </Field>
-</template>
-```

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

@@ -1,49 +0,0 @@
-## Состояние значения
-
-Свойства `value` и `isValue` предназначены для управления визуальным состоянием заполненности поля независимо от фактического содержимого.
-
-**Свойства:**
-
-- `value` — фактическое содержимое поля (строка/число), передаваемое во внутренний элемент через слот
-- `isValue` — принудительно активирует визуальное состояние "заполнено" даже при пустом значении
-
-Свойства работают совместно: `Field` считывает `value` реактивно через `focusValue` для визуальных целей (отображение текста в scoreboard, работа с caption), но не управляет им напрямую и не валидирует. Если реальное значение непустое, поле автоматически получает визуальное состояние "заполнено" независимо от `isValue`. При пустом значении флаг `isValue = true` принудительно активирует визуальный режим заполненности (плавающая метка, соответствующие классы), что полезно для прелоадов, масок или отложенной подстановки данных.
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const value = ref('')
-const isLoading = ref(true)
-</script>
-
-<template>
-  <!-- Обычное поведение -->
-  <Field label="Имя">
-    <template #default="{ id, className }">
-      <input :id="id" :class="className" v-model="value" />
-    </template>
-  </Field>
-
-  <!-- Принудительное состояние "заполнено" -->
-  <Field
-    label="Email"
-    :value="value"
-    :is-value="true"
-  >
-    <template #default="{ id, className }">
-      <input :id="id" :class="className" v-model="value" />
-    </template>
-  </Field>
-
-  <!-- Прелоад с визуальным состоянием -->
-  <Field
-    label="Данные"
-    :is-value="isLoading"
-  >
-    <template #default="{ id, className }">
-      <input :id="id" :class="className" v-model="value" />
-    </template>
-  </Field>
-</template>
-```

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

@@ -1,28 +0,0 @@
-````markdown
-## Field width
-
-Property `width` defines the horizontal size of the Field container.
-
-**Possible values:**
-
-- any valid CSS value (`'320px'`, `'48rem'`, `'50%'`, `'min(100%,320px)'`, `'clamp(240px,40vw,480px)'`)
-- design system tokens (e.g., `'sm'`, `'md'`, `'lg'` if supported)
-- `'custom'` — internal technical marker (not used directly)
-
-Controls the fixed or relative width of the field, applying the value directly without additional wrappers. When the property is not set, the width remains flexible and depends on the parent container. When the `block` property is active (set to `true`), the field takes 100% width regardless of the specified `width` value, with block mode taking priority.
-
-```html
-<!-- Automatic width -->
-<Field label="auto" />
-
-<!-- Fixed width -->
-<Field width="320px" label="320px" />
-
-<!-- Relative width -->
-<Field width="50%" label="50%" />
-
-<!-- CSS functions -->
-<Field width="min(100%, 320px)" label="min(...)" />
-<Field width="clamp(240px, 40vw, 480px)" label="clamp(...)" />
-```
-````

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

@@ -1,26 +0,0 @@
-## Ширина поля
-
-Свойство `width` определяет горизонтальный размер контейнера Field.
-
-**Возможные значения:**
-
-- любое валидное CSS-значение (`'320px'`, `'48rem'`, `'50%'`, `'min(100%,320px)'`, `'clamp(240px,40vw,480px)'`)
-- дизайн-токены системы (например, `'sm'`, `'md'`, `'lg'` при поддержке)
-- `'custom'` — внутренняя техническая метка (не используется напрямую)
-
-Контролирует фиксированную или относительную ширину поля, применяя значение напрямую без дополнительных обёрток. При отсутствии свойства ширина остаётся гибкой и зависит от родительского контейнера. При активном свойстве `block` (установлено в `true`) поле занимает 100% ширины независимо от заданного значения `width`, приоритет имеет блочный режим.
-
-```html
-<!-- Автоматическая ширина -->
-<Field label="auto" />
-
-<!-- Фиксированная ширина -->
-<Field width="320px" label="320px" />
-
-<!-- Относительная ширина -->
-<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

@@ -1,49 +0,0 @@
-import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
-
-import fieldEn from './field.en.mdx'
-import fieldRu from './field.ru.mdx'
-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 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
- *
- * MDX файлы для компонента Field
- */
-export const wikiMdxField: StorybookComponentsMdxItem = {
-  name: 'Field',
-  descriptions: {
-    arrows: {
-      en: arrowsEn,
-      ru: arrowsRu
-    },
-    cancel: {
-      en: cancelEn,
-      ru: cancelRu
-    },
-    field: {
-      en: fieldEn,
-      ru: fieldRu
-    },
-    slots: {
-      en: slotsEn,
-      ru: slotsRu
-    },
-    value: {
-      en: valueEn,
-      ru: valueRu
-    },
-    width: {
-      en: widthEn,
-      ru: widthRu
-    }
-  }
-}

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

@@ -1,34 +0,0 @@
-Component for displaying character count and input limits in form fields with customizable formatting templates.
-
-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.
-
-**Key features:**
-
-- 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
-
-**Common use cases:**
-
-- 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
-
-```html
-<template>
-  <!-- Basic counter -->
-  <Component :counter="10" />
-
-  <!-- With limit -->
-  <Component :counter="10" :maxlength="100" />
-
-  <!-- Custom template -->
-  <Component :counter="5" :maxlength="50" template="[c] of [m]" />
-</template>
-```

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

@@ -1,34 +0,0 @@
-Компонент для отображения счетчика символов и лимитов ввода в полях форм с поддержкой настраиваемых шаблонов форматирования.
-
-FieldCounter обеспечивает визуальную обратную связь о количестве введенных символов, автоматически форматирует отображение в зависимости от наличия максимального лимита и поддерживает гибкую настройку через шаблоны с плейсхолдерами. Компонент интегрируется с текстовыми полями и областями ввода, предоставляя пользователю информацию об ограничениях и оставшемся месте для ввода.
-
-**Основные возможности:**
-
-- Отображение текущего количества введенных символов
-- Автоматический показ максимального лимита при его наличии
-- Гибкие шаблоны форматирования с плейсхолдерами [c] и [m]
-- Автоматическое определение формата (50 / 100 или просто 50)
-- Поддержка строковых и числовых значений counter и maxlength
-- Умное управление видимостью через свойство counterShow
-- Компактное отображение для экономии пространства
-
-**Типичные сценарии использования:**
-
-- Текстовые поля с ограничением по количеству символов
-- Многострочные текстовые области (textarea) для описаний
-- Поля ввода комментариев с лимитами
-- Формы с требованиями к минимальной/максимальной длине
-- SMS-редакторы с подсчетом символов
-
-```html
-<template>
-  <!-- Базовый счетчик -->
-  <Component :counter="10" />
-
-  <!-- С лимитом -->
-  <Component :counter="10" :maxlength="100" />
-
-  <!-- Кастомный шаблон -->
-  <Component :counter="5" :maxlength="50" template="[c] / [m]" />
-</template>
-```

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

@@ -1,39 +0,0 @@
-## Custom Display Templates
-
-The `template` property allows you to customize the counter display format using placeholders.
-
-**Available placeholders:**
-
-- `[c]` — current number of entered characters
-- `[m]` — maximum character limit
-
-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 -->
-<FieldCounter
-  :counter="75"
-  :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,39 +0,0 @@
-## Настраиваемые шаблоны отображения
-
-Свойство `template` позволяет настроить формат отображения счетчика символов с использованием плейсхолдеров.
-
-**Доступные плейсхолдеры:**
-
-- `[c]` — текущее количество введенных символов
-- `[m]` — максимальный лимит символов
-
-Использует строковую интерполяцию для замены плейсхолдеров на актуальные значения счетчика. Поддерживает HTML-разметку внутри шаблона для кастомизации стилей отдельных частей. При отсутствии шаблона компонент автоматически определяет формат: отображает "50 / 100" при наличии `maxlength` или просто "50" при его отсутствии.
-
-```html
-<!-- Описательный формат -->
-<FieldCounter
-  :counter="75"
-  :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/FieldCounter/wikiMdxFieldCounter.ts

@@ -1,25 +0,0 @@
-import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
-
-import fieldCounterEn from './fieldCounter.en.mdx'
-import fieldCounterRu from './fieldCounter.ru.mdx'
-import templatesEn from './templates.en.mdx'
-import templatesRu from './templates.ru.mdx'
-
-/**
- * MDX files for FieldCounter component
- *
- * MDX файлы для компонента FieldCounter
- */
-export const wikiMdxFieldCounter: StorybookComponentsMdxItem = {
-  name: 'FieldCounter',
-  descriptions: {
-    fieldCounter: {
-      en: fieldCounterEn,
-      ru: fieldCounterRu
-    },
-    templates: {
-      en: templatesEn,
-      ru: templatesRu
-    }
-  }
-}

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

@@ -1,39 +0,0 @@
-Component for displaying input field labels with support for required indicator, character counter, and progress indicator.
-
-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.
-
-**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
-
-**Common use cases:**
-
-- 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
-
-```html
-<template>
-  <!-- Basic label -->
-  <Component label="Username" />
-
-  <!-- Required field label -->
-  <Component label="Email" required />
-
-  <!-- With progress and counter -->
-  <Component
-    label="Loading"
-    :progress="45"
-    :counter="10"
-    :maxlength="100"
-  />
-</template>
-```

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

@@ -1,39 +0,0 @@
-Компонент для отображения меток полей ввода с поддержкой индикатора обязательности, счетчика символов и прогресс-индикатора.
-
-FieldLabel предоставляет единообразное отображение подписей к полям форм, автоматически интегрируется с FieldCounter для подсчета символов и Progress для индикации загрузки. Компонент поддерживает скелетон-загрузку, настраиваемые слоты и обеспечивает согласованное визуальное оформление элементов формы.
-
-**Основные возможности:**
-
-- Отображение текстовой метки для полей ввода
-- Индикатор обязательности поля (required marker)
-- Интеграция со счетчиком символов FieldCounter
-- Встроенная поддержка прогресс-индикатора Progress
-- Поддержка скелетон-загрузки для состояния ожидания
-- Гибкая настройка через слоты (leading, trailing)
-- Единообразные отступы и стили в составе форм
-
-**Типичные сценарии использования:**
-
-- Подписи к текстовым полям и textarea
-- Формы с обязательными полями
-- Поля с ограничением количества символов
-- Формы с индикацией процесса загрузки файлов
-- Динамические формы со скелетон-загрузкой
-
-```html
-<template>
-  <!-- Базовая метка -->
-  <Component label="Username" />
-
-  <!-- Обязательное поле -->
-  <Component label="Email" required />
-
-  <!-- С прогрессом и счетчиком -->
-  <Component
-    label="Загрузка"
-    :progress="45"
-    :counter="10"
-    :maxlength="100"
-  />
-</template>
-```

package/src/media/mdx/FieldLabel/wikiMdxFieldLabel.ts

@@ -1,19 +0,0 @@
-import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
-
-import fieldLabelEn from './fieldLabel.en.mdx'
-import fieldLabelRu from './fieldLabel.ru.mdx'
-
-/**
- * MDX files for FieldLabel component
- *
- * MDX файлы для компонента FieldLabel
- */
-export const wikiMdxFieldLabel: StorybookComponentsMdxItem = {
-  name: 'FieldLabel',
-  descriptions: {
-    fieldLabel: {
-      en: fieldLabelEn,
-      ru: fieldLabelRu
-    }
-  }
-}

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

@@ -1,38 +0,0 @@
-Component for displaying helper and validation messages below form fields.
-
-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.
-
-**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
-
-**Typical Use Cases:**
-
-- Helper hints below input fields
-- Displaying validation errors in forms
-- Dynamic messages with reactive content
-- Complex forms with counters and validation
-
-```html
-<template>
-  <!-- Helper message -->
-  <Component helper="Enter your name" />
-
-  <!-- Validation message -->
-  <Component validation="Minimum 3 characters" />
-
-  <!-- Slots -->
-  <Component>
-    <template #helper>💡 Hint</template>
-    <template #validation>⚠️ Error</template>
-  </Component>
-</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,38 +0,0 @@
-Компонент для отображения вспомогательных и валидационных сообщений под полями формы.
-
-FieldMessage централизует управление текстовыми подсказками и сообщениями об ошибках в формах. Компонент автоматически определяет приоритет отображения (ошибки валидации выше подсказок), поддерживает принудительное показ через forceShow и интегрируется с полями ввода и счетчиками символов. Предоставляет гибкую систему слотов для кастомизации и работает как со статическими, так и с реактивными значениями.
-
-**Основные возможности:**
-
-- Два типа сообщений: вспомогательное (helper) и валидационное (validation)
-- Приоритет сообщений — валидационное сообщение перекрывает вспомогательное
-- Умная видимость — автоматическая логика отображения на основе переданных значений
-- Принудительное отображение через свойство forceShow
-- Гибкие источники — поддержка статических и реактивных значений
-- Интеграция с FieldCounter для комплексных форм
-- Настраиваемый рендеринг через систему дизайна и слоты
-
-**Типичные сценарии использования:**
-
-- Вспомогательные подсказки под полями ввода
-- Отображение ошибок валидации в формах
-- Динамические сообщения с реактивным контентом
-- Комплексные формы с счетчиками и валидацией
-
-```html
-<template>
-  <!-- Подсказка -->
-  <Component helper="Введите ваше имя" />
-
-  <!-- Ошибка валидации -->
-  <Component validation="Минимум 3 символа" />
-
-  <!-- Слоты -->
-  <Component>
-    <template #helper>💡 Подсказка</template>
-    <template #validation>⚠️ Ошибка</template>
-  </Component>
-</template>
-```
-
-> Компонент фокусируется на текстовых сообщениях и должен использоваться совместно с элементами управления вводом.

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

@@ -1,7 +0,0 @@
-- `helper(props: FieldMessageSlot): any` — Slot for custom helper message content.
-- `validation(props: FieldMessageSlot): any` — Slot for custom validation message content.
-
-> **FieldMessageSlot:**
-> - `message: string` — current message (helper or validation).
-> - `helperMessage: string` — helper message text.
-> - `validationMessage: string` — validation message text.

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

@@ -1,7 +0,0 @@
-- `helper(props: FieldMessageSlot): any` — Слот для пользовательского содержимого вспомогательного сообщения.
-- `validation(props: FieldMessageSlot): any` — Слот для пользовательского содержимого сообщения валидации.
-
-> **FieldMessageSlot:**
-> - `message: string` — текущее сообщение (вспомогательное или валидация).
-> - `helperMessage: string` — текст вспомогательного сообщения.
-> - `validationMessage: string` — текст сообщения валидации.