dxd-style-code 0.1.10 → 0.1.12

package/src/components/molecules/DXCopyField/DXCopyField.vue

@@ -3,28 +3,30 @@
     <p v-if="label" class="text-[11px] uppercase tracking-wide text-slate-500 font-semibold">
       {{ label }}
     </p>
-    <div class="flex items-center justify-between gap-2 rounded-lg border border-slate-200 bg-white px-3 py-3">
-      <p class="text-base font-semibold text-slate-900 break-all flex-1 text-center">
+    <div :class="containerClasses">
+      <p 
+        class="font-semibold text-slate-900 break-all flex-1 text-center"
+        :class="textSize"
+      >
         {{ value || "—" }}
       </p>
       <button
         type="button"
-        class="h-9 w-9 inline-flex items-center justify-center rounded-xl border border-slate-200 text-slate-700 hover:border-slate-300 bg-white transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2"
-        :class="{ 'border-emerald-300 bg-emerald-50': copied }"
+        :class="buttonClasses"
         :aria-label="`Скопировать ${label || 'значение'}`"
         @click="copyToClipboard"
       >
         <DXIcon
           v-if="copied"
           :icon="CheckIcon"
-          size="sm"
+          :size="iconSize"
           :animation="copiedIconAnimation"
           class="text-emerald-600"
         />
         <DXIcon
           v-else
           :icon="copyIcon"
-          size="sm"
+          :size="iconSize"
           :animation="copyIconAnimation"
         />
       </button>
@@ -33,7 +35,9 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, computed } from "vue";
+import { useSize } from "../../../composables/useSize";
+import { useClassComposition } from "../../../composables/useClassComposition";
 import DXIcon from "../../atoms/DXIcon/DXIcon.vue";
 import { ClipboardDocumentIcon, ClipboardDocumentCheckIcon, CheckIcon } from "@heroicons/vue/24/outline";
 
@@ -42,6 +46,12 @@ const props = defineProps({
   label: { type: String, default: "" },
   /** Значение для копирования */
   value: { type: String, default: "" },
+  /** Размер: sm | md | lg */
+  size: {
+    type: String,
+    default: "md",
+    validator: (value) => ["sm", "md", "lg"].includes(value),
+  },
   /** Иконка для копирования */
   copyIcon: { type: [Object, Function], default: () => ClipboardDocumentIcon },
   /** Иконка успешного копирования */
@@ -58,6 +68,49 @@ const emit = defineEmits(["copied"]);
 
 const copied = ref(false);
 
+// Базовые классы контейнера
+const BASE_CONTAINER_CLASSES = "flex items-center justify-between gap-2 rounded-xl border border-slate-200 bg-white";
+
+// Извлекаем padding из useSize для контейнера (без высоты)
+const containerClasses = computed(() => {
+  const fullSizeClass = useSize(props.size, 'input');
+  // Извлекаем только padding классы (px-* и py-*), убираем высоту и размер текста
+  const paddingClasses = fullSizeClass
+    .split(' ')
+    .filter(c => c.startsWith('px-') || c.startsWith('py-'))
+    .join(' ');
+  
+  return useClassComposition(BASE_CONTAINER_CLASSES, paddingClasses);
+});
+
+// Размер текста из useSize
+const textSize = computed(() => useSize(props.size, 'text'));
+
+// Базовые классы кнопки
+const BASE_BUTTON_CLASSES = "inline-flex items-center justify-center rounded-xl border border-slate-200 text-slate-700 hover:border-slate-300 bg-white transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2";
+
+// Размер кнопки из useSize (только высота и ширина, без padding и text)
+const buttonClasses = computed(() => {
+  const fullSizeClass = useSize(props.size, 'buttonIcon');
+  // Извлекаем только размеры (h-* и w-*), убираем padding и text
+  const sizeClasses = fullSizeClass
+    .split(' ')
+    .filter(c => c.startsWith('h-') || c.startsWith('w-'))
+    .join(' ');
+  
+  return useClassComposition(
+    BASE_BUTTON_CLASSES,
+    sizeClasses,
+    { 'border-emerald-300 bg-emerald-50': copied.value }
+  );
+});
+
+// Размер иконки (маппинг размера компонента на размер иконки)
+const iconSize = computed(() => {
+  const sizeMap = { sm: 'xs', md: 'sm', lg: 'md' };
+  return sizeMap[props.size] || 'sm';
+});
+
 const copyToClipboard = async () => {
   if (!props.value) return;
   try {

package/src/components/molecules/DXDataFilter/DXDataFilter.vue

@@ -7,9 +7,9 @@
     <!-- Заголовок -->
     <div v-if="title || $slots.header" :class="headerClasses">
       <slot name="header">
-        <h3 v-if="title" class="text-lg font-semibold text-slate-900">
+        <DXHeading v-if="title" level="3" size="lg" weight="semibold" color="default">
           {{ title }}
-        </h3>
+        </DXHeading>
       </slot>
     </div>
 
@@ -52,9 +52,9 @@
 
             <!-- Определение фильтра -->
             <div class="flex-1">
-              <label class="block text-sm font-medium text-slate-700 mb-1">
+              <DXText tag="label" size="sm" weight="medium" color="default" class="block mb-1">
                 {{ filter.label || filterDefinitions[filter.id]?.label }}
-              </label>
+              </DXText>
 
               <!-- Текстовый фильтр -->
               <DXInput
@@ -104,9 +104,9 @@
                 :filter="filter"
                 :filter-definition="filterDefinitions[filter.id]"
               >
-                <p class="text-sm text-slate-500">
+                <DXText tag="p" size="sm" color="muted">
                   Используйте slot filter-{{ filter.type }} для кастомного фильтра
-                </p>
+                </DXText>
               </slot>
             </div>
           </div>
@@ -133,6 +133,8 @@ import DXSelect from "../DXSelect/DXSelect.vue";
 import DXDatePicker from "../DXDatePicker/DXDatePicker.vue";
 import DXButton from "../../atoms/DXButton/DXButton.vue";
 import DXIcon from "../../atoms/DXIcon/DXIcon.vue";
+import DXHeading from "../../atoms/DXHeading/DXHeading.vue";
+import DXText from "../../atoms/DXText/DXText.vue";
 import { XMarkIcon } from "@heroicons/vue/24/outline";
 
 const props = defineProps({

package/src/components/molecules/DXDatePicker/DXDatePicker.stories.js

@@ -5,6 +5,64 @@ export default {
   title: 'Molecules/DXDatePicker',
   component: DXDatePicker,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXDatePicker
+
+Компонент выбора даты с поддержкой одиночной даты и диапазона дат.
+
+## Назначение
+
+DXDatePicker предоставляет стандартизированный способ выбора даты или диапазона дат.
+Компонент использует нативный input type="date" для одиночной даты и кастомный интерфейс
+для выбора диапазона.
+
+## Архитектура
+
+### Использует
+- Нативный input type="date" - для одиночной даты
+- Кастомный интерфейс - для диапазона дат
+
+### Используется в
+- Формы с датами
+- Фильтры по датам
+- Календари событий
+- Любые места, требующие выбор даты
+
+## Внутренняя логика
+
+### Режимы
+- **single** (по умолчанию): Выбор одной даты
+- **range**: Выбор диапазона дат (от и до)
+
+### Формат значений
+- **single**: Строка в формате YYYY-MM-DD
+- **range**: Объект \`{ start: 'YYYY-MM-DD', end: 'YYYY-MM-DD' }\`
+
+### Отображение диапазона
+При range режиме:
+- Отображается форматированная строка "DD.MM.YYYY - DD.MM.YYYY"
+- При клике открывается календарь с двумя полями (от/до)
+- Кнопки "Применить" и "Отмена" для подтверждения выбора
+
+## Особенности
+
+### v-model
+Полностью поддерживает двустороннее связывание через \`v-model\`:
+- Для single: String (YYYY-MM-DD)
+- Для range: Object ({ start, end })
+
+### Форматирование
+Даты форматируются в локализованном формате (ru-RU) для отображения.
+
+### Иконка календаря
+Отображается иконка календаря справа от поля для визуальной индикации.
+        `,
+      },
+    },
+  },
 };
 
 export const Default = {

package/src/components/molecules/DXFileUpload/DXFileUpload.stories.js

@@ -5,6 +5,72 @@ export default {
   title: 'Molecules/DXFileUpload',
   component: DXFileUpload,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXFileUpload
+
+Компонент загрузки файлов с поддержкой drag & drop, предпросмотра и множественного выбора.
+
+## Назначение
+
+DXFileUpload предоставляет полнофункциональный компонент для загрузки файлов с поддержкой
+перетаскивания, предпросмотра изображений, множественного выбора и валидации типов/размеров.
+
+## Архитектура
+
+### Использует
+- \`DXIcon\` - для иконок загрузки и удаления
+- Нативный input type="file" - для выбора файлов
+
+### Используется в
+- Загрузка документов
+- Загрузка изображений
+- Множественная загрузка файлов
+- Любые места, требующие загрузку файлов
+
+## Внутренняя логика
+
+### Drag & Drop
+Поддерживает перетаскивание файлов:
+- Визуальная индикация при наведении (scale, изменение цвета)
+- Обработка событий dragenter, dragover, dragleave, drop
+
+### Предпросмотр
+Для изображений:
+- Автоматически создается preview через FileReader
+- Отображается миниатюра 48×48px
+- Для других файлов отображается иконка документа
+
+### Множественный выбор
+При \`multiple={true}\`:
+- Можно выбрать несколько файлов
+- Отображается кнопка "Добавить ещё" для добавления дополнительных файлов
+
+### Валидация
+- \`accept\` - ограничение типов файлов (например, "image/*", ".pdf")
+- \`maxSize\` - максимальный размер файла (отображается в подсказке)
+
+## Особенности
+
+### v-model
+Полностью поддерживает двустороннее связывание через \`v-model\`:
+- Для single: File объект или null
+- Для multiple: Array файлов
+
+### События
+- \`@change\` - эмитится при изменении файлов
+
+### Удаление файлов
+Каждый файл имеет кнопку удаления для удаления из списка.
+
+### Форматирование размера
+Размер файла автоматически форматируется в читаемый формат (KB, MB).
+        `,
+      },
+    },
+  },
 };
 
 export const Default = {

package/src/components/molecules/DXFilterGroup/DXFilterGroup.stories.js

@@ -5,6 +5,67 @@ export default {
   title: 'Molecules/DXFilterGroup',
   component: DXFilterGroup,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXFilterGroup
+
+Компонент группы фильтров для выбора одного значения из списка опций с поддержкой счетчиков.
+
+## Назначение
+
+DXFilterGroup предоставляет простой способ создания группы фильтров с кнопками-переключателями.
+Компонент поддерживает счетчики для каждой опции и возможность сброса выбранного значения.
+
+## Архитектура
+
+### Использует
+- Нативные HTML элементы - для простоты и доступности
+
+### Используется в
+- Фильтры списков и таблиц
+- Переключение режимов отображения
+- Категории и теги
+- Любые места, требующие выбор одного значения из группы
+
+## Внутренняя логика
+
+### Структура опций
+Опции передаются через массив объектов:
+\`\`\`
+[{ value: 'all', label: 'All', count?: 50 }]
+\`\`\`
+
+Каждая опция может содержать:
+- \`value\` - значение опции (обязательно)
+- \`label\` - текст опции (обязательно)
+- \`count\` - счетчик (опционально)
+
+### Счетчики
+При наличии \`count\` в опции, счетчик отображается рядом с текстом.
+
+### Сброс
+При \`clearable={true}\` (по умолчанию) и выбранном значении:
+- Отображается кнопка "Сбросить"
+- При клике значение сбрасывается в \`null\`
+
+## Особенности
+
+### v-model
+Полностью поддерживает двустороннее связывание через \`v-model\` для String или Boolean значений.
+
+### Визуальное оформление
+- Активная опция: темный фон (\`bg-slate-800\`), белый текст
+- Неактивные опции: белый фон, серый текст, hover эффект
+- Кнопка сброса: желтый фон (\`bg-amber-50\`), желтый текст
+
+### Лейбл
+Поддерживает опциональный \`label\` prop для отображения заголовка группы.
+        `,
+      },
+    },
+  },
 };
 
 const filters = [

package/src/components/molecules/DXFormControl/DXFormControl.stories.js

@@ -5,6 +5,82 @@ export default {
   title: 'Molecules/DXFormControl',
   component: DXFormControl,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXFormControl
+
+Компонент обертки для полей форм с поддержкой лейбла, валидации, иконок и счетчика символов.
+
+## Назначение
+
+DXFormControl предоставляет комплексную обертку для полей форм, объединяя лейбл, поле ввода,
+иконки валидации, сообщения об ошибках и вспомогательный текст в единый компонент. Компонент
+поддерживает различные состояния валидации и автоматически управляет отступами для иконок.
+
+## Архитектура
+
+### Использует
+- \`DXText\` - для лейбла, ошибок и вспомогательного текста
+- \`DXIcon\` - для иконки-префикса
+- \`DXValidationIcon\` - для иконки валидации (успех/ошибка)
+
+### Используется в
+- Обертка для любых полей форм
+- Кастомные поля ввода
+- Интеграция с нативными input элементами
+- Любые места, требующие полную структуру поля формы
+
+## Внутренняя логика
+
+### Структура
+Компонент состоит из:
+1. **Лейбл** - отображается над полем (если указан \`label\`)
+2. **Счетчик символов** - отображается справа от лейбла (если \`showCount={true}\`)
+3. **Поле** - слот для input/textarea/select
+4. **Иконка-префикс** - слева от поля (если указан \`prefixIcon\` или слот \`prefix\`)
+5. **Иконка валидации** - справа от поля (если \`validationState\` установлен)
+6. **Сообщение об ошибке** - отображается под полем (если указан \`error\`)
+7. **Вспомогательный текст** - отображается под полем (если нет ошибки и указан \`helper\`)
+
+### Состояния валидации
+Поддерживает три состояния:
+- **success** - успешная валидация (зеленая иконка)
+- **error** - ошибка валидации (красная иконка)
+- **""** (пустая строка) - нет валидации
+
+### Отступы для иконок
+Автоматически управляет отступами:
+- При наличии префикс-иконки: \`pl-11\` (padding-left)
+- При наличии иконки валидации: \`pr-10\` (padding-right)
+
+### Счетчик символов
+При \`showCount={true}\` и указанном \`maxLength\`:
+- Отображается в формате "текущее / максимальное" (например, "150 / 500")
+- Показывается справа от лейбла
+
+## Особенности
+
+### Слоты
+- **default** - поле ввода (input/textarea/select)
+- **prefix** - кастомная префикс-иконка или элемент
+
+### Обязательное поле
+При \`required={true}\` автоматически добавляется красная звездочка (*) справа от лейбла.
+
+### Валидация
+Компонент поддерживает визуальную индикацию валидации:
+- Иконка валидации справа от поля
+- Цветные сообщения об ошибках/успехе
+- Автоматическое скрытие helper при наличии ошибки
+
+### Интеграция
+Компонент предназначен для обертки любых полей ввода, включая нативные HTML элементы.
+        `,
+      },
+    },
+  },
 };
 
 export const Default = {

package/src/components/molecules/DXFormControl/DXFormControl.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="w-full" data-component="DXFormControl">
     <div class="flex items-center justify-between mb-1">
-      <label v-if="label" class="text-sm font-medium text-slate-700">
+      <DXText v-if="label" tag="label" size="sm" weight="medium" color="default">
         {{ label }}
-        <span v-if="required" class="text-rose-500">*</span>
-      </label>
-      <span v-if="maxLength && showCount" class="text-xs text-slate-500">
+        <DXText v-if="required" tag="span" color="danger">*</DXText>
+      </DXText>
+      <DXText v-if="maxLength && showCount" tag="span" size="xs" color="muted">
         {{ currentLength }} / {{ maxLength }}
-      </span>
+      </DXText>
     </div>
     
     <div class="relative">
@@ -31,17 +31,18 @@
       </div>
     </div>
     
-    <p v-if="error" class="mt-1 text-xs text-rose-500 flex items-center gap-1">
+    <DXText v-if="error" tag="p" size="xs" color="danger" class="mt-1 flex items-center gap-1">
       <DXValidationIcon state="error" size="xs" />
       {{ error }}
-    </p>
-    <p v-else-if="helper" class="mt-1 text-xs text-slate-500">{{ helper }}</p>
+    </DXText>
+    <DXText v-else-if="helper" tag="p" size="xs" color="muted" class="mt-1">{{ helper }}</DXText>
   </div>
 </template>
 
 <script setup>
 import { computed } from "vue";
 import DXIcon from "../../atoms/DXIcon/DXIcon.vue";
+import DXText from "../../atoms/DXText/DXText.vue";
 import DXValidationIcon from "../DXValidationIcon/DXValidationIcon.vue";
 
 const props = defineProps({

package/src/components/molecules/DXInput/DXInput.stories.js

@@ -18,7 +18,106 @@ import {
 export default {
   title: 'Molecules/DXInput',
   component: DXInput,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:form'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXInput
+
+Компонент поля ввода с поддержкой иконок, валидации и интеграции с группами полей.
+
+## Назначение
+
+DXInput предоставляет стандартизированное поле ввода с поддержкой различных типов (text, email, number, tel, url),
+иконок слева и справа, валидации, состояний ошибок и автоматической адаптации при использовании внутри DXInputGroup.
+
+## Архитектура
+
+### Использует
+- \`DXFormLabel\` - для отображения лейбла, ошибок и вспомогательного текста
+- \`DXIconWrapper\` - для отображения иконок слева и справа
+- \`useSize\` composable - для унификации размеров (sm, md, lg)
+- \`useClassComposition\` composable - для объединения CSS классов
+- \`provide/inject\` - для интеграции с DXInputGroup
+
+### Используется в
+- \`DXInputGroup\` - группы полей с аддонами
+- \`DXFormControl\` - контроль форм
+- \`DXAuthenticationForm\` - формы аутентификации
+- Любые формы, требующие текстового ввода
+
+## Внутренняя логика
+
+### Интеграция с DXInputGroup
+При использовании внутри \`DXInputGroup\`:
+- Поле автоматически регистрируется в группе через \`provide/inject\`
+- Размер синхронизируется с размером группы
+- Состояние \`disabled\` наследуется от группы
+- Состояние \`error\` синхронизируется с группой
+- Border-radius адаптируется в зависимости от наличия аддонов слева/справа:
+  - Оба аддона → \`rounded-none\`
+  - Только слева → \`rounded-l-none rounded-r-xl\`
+  - Только справа → \`rounded-l-xl rounded-r-none\`
+  - Нет аддонов → \`rounded-xl\`
+
+### Иконки
+Поддерживает иконки через:
+- \`prefixIcon\` prop - иконка слева (Heroicon компонент)
+- \`suffixIcon\` prop - иконка справа (Heroicon компонент)
+- Слоты \`prefix\` и \`suffix\` - для кастомных элементов
+
+Размер иконки автоматически адаптируется к размеру поля:
+- sm → sm
+- md → md
+- lg → lg
+
+Padding для текста автоматически увеличивается при наличии иконок:
+- sm: pl-10 / pr-10
+- md: pl-11 / pr-11
+- lg: pl-12 / pr-12
+
+### Валидация
+- При наличии \`error\` prop, поле получает красную рамку (\`border-rose-300\`)
+- Текст ошибки отображается через \`DXFormLabel\`
+- Состояние ошибки синхронизируется с \`DXInputGroup\`
+
+### Размеры
+Поддерживает три размера:
+- **sm** - компактный размер
+- **md** - средний размер (по умолчанию)
+- **lg** - крупный размер
+
+## Особенности
+
+### v-model
+Полностью поддерживает двустороннее связывание через \`v-model\` для String или Number значений.
+
+### Типы полей
+Поддерживает стандартные HTML типы:
+- \`text\` - обычный текст (по умолчанию)
+- \`email\` - email адрес
+- \`number\` - число
+- \`tel\` - телефон
+- \`url\` - URL адрес
+- И другие стандартные типы input
+
+### Состояния
+- **disabled** - отключает поле (opacity-60, cursor-not-allowed, bg-slate-50)
+- **error** - визуально выделяет ошибку (красная рамка)
+- **required** - отмечает поле как обязательное (через DXFormLabel)
+
+### Лейбл и вспомогательный текст
+- \`label\` - отображается над полем
+- \`helper\` - вспомогательный текст под полем
+- \`error\` - текст ошибки (заменяет helper при наличии)
+
+### Кастомные классы
+Поддерживает \`inputClass\` prop для добавления дополнительных CSS классов к input элементу.
+        `,
+      },
+    },
+  },
   argTypes: {
     size: {
       control: 'select',