@dxtmisha/wiki 0.39.2 → 0.39.4

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

@@ -1,63 +0,0 @@
-
-### `ok`
-
-Событие срабатывает при клике на кнопку подтверждения (OK) в диалоговом окне.
-
-**Параметры:**
-Событие не передаёт параметров.
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const showDialog = ref(false)
-
-const handleOk = () => {
-  console.log('Пользователь подтвердил действие')
-  showDialog.value = false
-  // Выполнение действия после подтверждения
-}
-</script>
-
-<template>
-  <Dialog
-    v-model:open="showDialog"
-    buttonOk="Подтвердить"
-    label="Удаление файла"
-    description="Вы действительно хотите удалить этот файл?"
-    @ok="handleOk"
-  />
-</template>
-```
-
-### `close`
-
-Событие срабатывает при клике на кнопку закрытия в диалоговом окне.
-
-**Параметры:**
-Событие не передаёт параметров.
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const showDialog = ref(false)
-
-const handleClose = () => {
-  console.log('Пользователь отменил действие')
-  showDialog.value = false
-}
-</script>
-
-<template>
-  <Dialog
-    v-model:open="showDialog"
-    buttonClose="Отмена"
-    label="Подтверждение"
-    @close="handleClose"
-  />
-</template>
-```
-
-> Кнопки можно настроить через свойства `buttonOk` и `buttonClose`, либо скрыть, передав `null`.
-

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

@@ -1,58 +0,0 @@
-## 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

@@ -1,57 +0,0 @@
-## Состояния успеха и ошибки
-
-Свойства `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

@@ -1,37 +0,0 @@
-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/Dummy/dummy.en.mdx

@@ -1,35 +0,0 @@
-A basic Dummy placeholder component for interface prototyping and visual testing. Allows you to quickly create blocks of specific sizes and colors.
-
-Dummy is designed as a tool for developers to help structure views before actual components are implemented.
-
-**Key Features:**
-
-- Size customization via the size property
-- Color scheme configuration via the palette property
-- Use as a space filler in layouts
-
-**Typical Usage Scenarios:**
-
-- Prototyping grids and layouts
-- Visual testing of spacing and alignment
-- Placeholders for components not yet implemented
-
-```html
-<script setup>
-</script>
-
-<template>
-  <div class="dummy-examples" style="display: flex; gap: 16px; flex-direction: column;">
-    <!-- Basic Dummy -->
-    <Dummy />
-
-    <!-- Custom Size and Palette -->
-    <Dummy size="lg" palette="blue" />
-
-    <!-- Small Red Dummy -->
-    <Dummy size="sm" palette="red" />
-  </div>
-</template>
-```
-
-> Dummy is designed as a universal utility component for visual planning of interface structure.

package/src/media/mdx/Dummy/dummy.ru.mdx

@@ -1,35 +0,0 @@
-Базовый компонент-заглушка (Dummy) для прототипирования и визуального тестирования интерфейсов. Позволяет быстро создавать блоки определенных размеров и цветов.
-
-Dummy разработан как инструмент для разработчиков, помогающий структурировать интерфейсы до внедрения реальных компонентов.
-
-**Основные возможности:**
-
-- Настройка размеров через свойство size
-- Установка цветовых схем через свойство palette
-- Использование в качестве заполнителя пространства в макетах
-
-**Типичные сценарии использования:**
-
-- Прототипирование сеток и макетов
-- Визуальное тестирование отступов и выравнивания
-- Заглушки для еще не реализованных компонентов
-
-```html
-<script setup>
-</script>
-
-<template>
-  <div class="dummy-examples" style="display: flex; gap: 16px; flex-direction: column;">
-    <!-- Базовая заглушка -->
-    <Dummy />
-
-    <!-- Настройка размера и палитры -->
-    <Dummy size="lg" palette="blue" />
-
-    <!-- Маленькая красная заглушка -->
-    <Dummy size="sm" palette="red" />
-  </div>
-</template>
-```
-
-> Dummy разработан как универсальный вспомогательный компонент для визуального планирования структуры интерфейса.

package/src/media/mdx/Dummy/wikiMdxDummy.ts

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

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

@@ -1,91 +0,0 @@
-## Navigation and arrows
-
-Properties `arrowCarousel`, `arrowStepper`, `arrowAlign`, `disabledPrevious`, and `disabledNext` are designed to control built-in navigation elements.
-
-**Properties:**
-
-- `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)
-
-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.
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const currentIndex = ref(0)
-const items = ['Item 1', 'Item 2', 'Item 3']
-const count = ref(5)
-</script>
-
-<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,91 +0,0 @@
-## Навигация и стрелки
-
-Свойства `arrowCarousel`, `arrowStepper`, `arrowAlign`, `disabledPrevious` и `disabledNext` предназначены для управления встроенными элементами навигации.
-
-**Свойства:**
-
-- `arrowCarousel` — включает стрелки навигации (влево/вправо) для переключения элементов
-- `arrowStepper` — включает числовые шаговые кнопки (минус/плюс)
-- `arrowAlign` — управляет горизонтальным расположением стрелок навигации (`left`, `center`, `right`)
-- `disabledPrevious` — отключает левую кнопку (назад/минус)
-- `disabledNext` — отключает правую кнопку (вперёд/плюс)
-
-Свойства работают совместно: активен только один режим стрелок — если `arrowCarousel = true`, режим `arrowStepper` игнорируется и наоборот. При активном режиме навигации кнопка очистки (`cancel`) автоматически скрывается, так как область управления имеет приоритет. Флаги `disabledPrevious` и `disabledNext` применяются только к текущему активному режиму стрелок.
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const currentIndex = ref(0)
-const items = ['Item 1', 'Item 2', 'Item 3']
-const count = ref(5)
-</script>
-
-<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,54 +0,0 @@
-## Clear button
-
-Properties `cancel` and `cancelShow` are designed to control the display of the field clear icon.
-
-**Properties:**
-
-- `cancel` — clear button display mode (`auto` or `always`)
-- `cancelShow` — conditional visibility flag, used only in `auto` mode
-
-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.
-
-```html
-<script setup>
-import { ref, computed } from 'vue'
-
-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,54 +0,0 @@
-## Кнопка очистки
-
-Свойства `cancel` и `cancelShow` предназначены для управления отображением иконки очистки поля.
-
-**Свойства:**
-
-- `cancel` — режим отображения кнопки очистки (`auto` или `always`)
-- `cancelShow` — условный флаг видимости, используется только в режиме `auto`
-
-Свойства работают совместно: если `cancel` установлен в `auto`, иконка очистки отображается только при выполнении условий `cancelShow = true`, поле активно (не `disabled`/`readonly`) и не включён режим стрелок (`arrowCarousel`/`arrowStepper`). При `cancel = always` иконка отображается принудительно (кроме случаев `disabled`/`readonly` или активных стрелок), значение `cancelShow` игнорируется. Режимы стрелок имеют приоритет над кнопкой очистки — при активной навигации cancel скрывается независимо от настроек.
-
-```html
-<script setup>
-import { ref, computed } from 'vue'
-
-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,52 +0,0 @@
-Base container for form controls that composes label, messages, counter, icons, and progress into a unified structure.
-
-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.
-
-**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
-
-**Typical use cases:**
-
-- 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
-
-```html
-<script setup>
-import { ref } from 'vue'
-import { Field } from '@dxtmisha/constructor'
-
-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.