@dxtmisha/wiki 0.39.3 → 0.39.5

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

@@ -0,0 +1,65 @@
+Компонент для создания модальных диалоговых окон с поддержкой иконок, заголовков и предустановленных кнопок действий.
+
+Dialog представляет собой специализированную обертку над компонентом Modal с дополнительными возможностями для отображения информационных сообщений, подтверждений и уведомлений. Компонент автоматически отображает информационный блок с иконкой, заголовком и описанием, а также предоставляет предустановленные кнопки OK и Закрыть. Поддерживает состояния успеха и ошибки с автоматическим переключением иконок, позиционирование изображения и полную кастомизацию контента.
+
+**Основные возможности:**
+
+- Модальное окно с центрированием и блокировкой фона
+- Поддержка иконок с автоматическим переключением для состояний успеха/ошибки
+- Информационный блок с иконкой, заголовком и описанием
+- Предустановленные кнопки OK и Закрыть с возможностью кастомизации
+- Позиционирование изображения сверху или слева
+- Интеграция с компонентами Window, Bars, Actions, Icon
+- Закрытие по ESC и клику на overlay
+- События ok и close для обработки действий пользователя
+- Поддержка слотов для кастомизации контента
+- Адаптивный дизайн для мобильных устройств
+
+**Типичные сценарии использования:**
+
+- Подтверждения действий пользователя
+- Уведомления об успехе или ошибке
+- Информационные сообщения
+- Предупреждения и алерты
+- Простые формы с минимальным количеством полей
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const isOpen = ref(false)
+const showSuccess = ref(false)
+
+const handleConfirm = () => {
+  console.log('Действие подтверждено')
+  isOpen.value = false
+  showSuccess.value = true
+}
+</script>
+
+<template>
+  <button @click="isOpen = true">Открыть диалог</button>
+
+  <Dialog
+    v-model:open="isOpen"
+    label="Подтверждение"
+    description="Вы уверены, что хотите выполнить это действие?"
+    @ok="handleConfirm"
+    @close="isOpen = false"
+  >
+    <template #default>
+      <div class="additional-info">
+        Дополнительная информация может быть размещена здесь.
+      </div>
+    </template>
+  </Dialog>
+
+  <Dialog
+    v-model:open="showSuccess"
+    :success="true"
+    label="Успешно"
+    description="Ваше действие выполнено успешно."
+    :buttonClose="null"
+  />
+</template>
+```

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

@@ -0,0 +1,63 @@
+
+### `ok`
+
+Event fires when the confirmation (OK) button in the dialog is clicked.
+
+**Parameters:**
+Event does not pass parameters.
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const showDialog = ref(false)
+
+const handleOk = () => {
+  console.log('User confirmed action')
+  showDialog.value = false
+  // Execute action after confirmation
+}
+</script>
+
+<template>
+  <Dialog
+    v-model:open="showDialog"
+    buttonOk="Confirm"
+    label="Delete file"
+    description="Are you sure you want to delete this file?"
+    @ok="handleOk"
+  />
+</template>
+```
+
+### `close`
+
+Event fires when the close button in the dialog is clicked.
+
+**Parameters:**
+Event does not pass parameters.
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const showDialog = ref(false)
+
+const handleClose = () => {
+  console.log('User cancelled action')
+  showDialog.value = false
+}
+</script>
+
+<template>
+  <Dialog
+    v-model:open="showDialog"
+    buttonClose="Cancel"
+    label="Confirmation"
+    @close="handleClose"
+  />
+</template>
+```
+
+> Buttons can be configured via `buttonOk` and `buttonClose` properties, or hidden by passing `null`.
+

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

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

@@ -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/Dummy/dummy.en.mdx

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

@@ -0,0 +1,35 @@
+Базовый компонент-заглушка (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

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

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

@@ -0,0 +1,91 @@
+## Навигация и стрелки
+
+Свойства `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

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