dxd-style-code 0.1.11 → 0.1.12

package/src/components/atoms/DXFlex/DXFlex.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="flexClasses" data-component="DXFlex">
+  <div :class="flexClasses" data-component="DXFlex" :data-height="height" :data-shrink="shrink">
     <slot />
   </div>
 </template>
@@ -22,6 +22,10 @@ const props = defineProps({
   gap: { type: String, default: "md" },
   /** Inline flex */
   inline: { type: Boolean, default: false },
+  /** Высота: full | auto | fit */
+  height: { type: String, default: null },
+  /** Flex shrink: 0 | 1 | auto */
+  shrink: { type: [String, Boolean], default: null },
 });
 
 const BASE_CLASSES = "";
@@ -125,12 +129,60 @@ const gapClass = computed(() => {
   return useSize(props.gap, 'spacing') || 'gap-4';
 });
 
+/**
+ * Классы высоты
+ * 
+ * @description
+ * Определяет высоту flex контейнера.
+ * Используется для растягивания контейнера на всю высоту родителя.
+ * 
+ * @returns {string|null} Tailwind CSS класс для высоты или null
+ */
+const heightClass = computed(() => {
+  if (!props.height) return null;
+  
+  const heightClasses = {
+    full: "h-full",
+    auto: "h-auto",
+    fit: "h-fit",
+  };
+  
+  return heightClasses[props.height] || null;
+});
+
+/**
+ * Классы flex-shrink
+ * 
+ * @description
+ * Определяет поведение сжатия элемента в flex контейнере.
+ * Используется для предотвращения сжатия элементов (shrink-0) или управления им.
+ * 
+ * @returns {string|null} Tailwind CSS класс для flex-shrink или null
+ */
+const shrinkClass = computed(() => {
+  if (props.shrink === null || props.shrink === undefined) return null;
+  
+  // Если передан boolean, true = shrink-0, false = shrink
+  if (typeof props.shrink === 'boolean') {
+    return props.shrink ? "shrink-0" : "shrink";
+  }
+  
+  // Если передан string
+  const shrinkClasses = {
+    "0": "shrink-0",
+    "1": "shrink",
+    auto: "shrink",
+  };
+  
+  return shrinkClasses[props.shrink] || null;
+});
+
 /**
  * Все классы для flex компонента
  * 
  * @description
  * Объединяет все классы flex контейнера (базовый класс, направление,
- * выравнивание, перенос, отступы) с использованием useClassComposition.
+ * выравнивание, перенос, отступы, высота, shrink) с использованием useClassComposition.
  * 
  * @returns {Array} Массив классов для применения к элементу
  */
@@ -142,7 +194,9 @@ const flexClasses = computed(() =>
     justifyClass.value,
     alignClass.value,
     wrapClass.value,
-    gapClass.value
+    gapClass.value,
+    heightClass.value,
+    shrinkClass.value
   )
 );
 </script>

package/src/components/atoms/DXFormLabel/DXFormLabel.stories.js

@@ -3,7 +3,76 @@ import DXFormLabel from './DXFormLabel.vue';
 export default {
   title: 'Atoms/DXFormLabel',
   component: DXFormLabel,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:form'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXFormLabel
+
+Компонент обертки для полей форм с поддержкой лейбла, ошибок, вспомогательного текста и счетчика символов.
+
+## Назначение
+
+DXFormLabel предоставляет комплексную обертку для полей форм, объединяя лейбл, поле ввода,
+сообщения об ошибках, вспомогательный текст, сообщения об успехе и счетчик символов в единый компонент.
+
+## Архитектура
+
+### Использует
+- \`DXIcon\` - для иконок валидации (ошибка, успех)
+
+### Используется в
+- \`DXInput\` - обертка для полей ввода
+- \`DXSelect\` - обертка для выпадающих списков
+- \`DXTextarea\` - обертка для многострочных полей
+- Любые поля форм, требующие полную структуру с лейблом и сообщениями
+
+## Внутренняя логика
+
+### Структура
+Компонент состоит из:
+1. **Лейбл** - отображается над полем (если указан \`label\`)
+2. **Счетчик символов** - отображается справа от лейбла (если \`showCount={true}\`)
+3. **Поле** - слот для input/textarea/select
+4. **Сообщение об ошибке** - отображается под полем (если указан \`error\`)
+5. **Вспомогательный текст** - отображается под полем (если нет ошибки и указан \`helper\`)
+6. **Сообщение об успехе** - отображается под полем (если нет ошибки и указан \`success\`)
+
+### Приоритет сообщений
+Приоритет отображения сообщений:
+1. Ошибка (если есть) - всегда показывается
+2. Успех (если нет ошибки) - показывается вместо helper
+3. Helper (если нет ошибки и успеха) - показывается как вспомогательный текст
+
+### Счетчик символов
+При \`showCount={true}\` и указанном \`maxLength\`:
+- Отображается в формате "текущее / максимальное" (например, "150 / 500")
+- Показывается справа от лейбла
+
+### Иконки валидации
+При \`showValidationIcon={true}\` (по умолчанию):
+- Иконка ошибки (ExclamationCircleIcon) для сообщений об ошибке
+- Иконка успеха (CheckCircleIcon) для сообщений об успехе
+
+## Особенности
+
+### Обязательное поле
+При \`required={true}\` автоматически добавляется красная звездочка (*) справа от лейбла.
+
+### Валидация
+Компонент поддерживает три состояния валидации:
+- **error** - ошибка (красный цвет, иконка)
+- **success** - успех (зеленый цвет, иконка)
+- **helper** - вспомогательный текст (серый цвет)
+
+### Слоты
+- **default** - поле ввода (input/textarea/select)
+- **label** - кастомный лейбл (если нужно)
+        `,
+      },
+    },
+  },
   argTypes: {
     label: {
       control: 'text',

package/src/components/atoms/DXGrid/DXGrid.stories.js

@@ -3,7 +3,7 @@ import DXGrid from './DXGrid.vue';
 export default {
   title: 'Atoms/DXGrid',
   component: DXGrid,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:layout'],
   parameters: {
     docs: {
       description: {

package/src/components/atoms/DXHeading/DXHeading.stories.js

@@ -3,7 +3,96 @@ import DXHeading from './DXHeading.vue';
 export default {
   title: 'Atoms/DXHeading',
   component: DXHeading,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:typography'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXHeading
+
+Компонент заголовка с поддержкой уровней (h1-h6), размеров, весов и цветов.
+
+## Назначение
+
+DXHeading предоставляет стандартизированный способ создания заголовков с настраиваемыми параметрами
+типографики. Компонент автоматически рендерится как соответствующий HTML тег (h1-h6) для семантической
+правильности и SEO.
+
+## Архитектура
+
+### Использует
+- Динамический рендеринг HTML тегов - для семантической правильности
+- \`useSize\` composable - для унификации размеров (опционально)
+
+### Используется в
+- Заголовки страниц и разделов
+- Заголовки карточек
+- Заголовки форм
+- Любые места, требующие семантических заголовков
+
+## Внутренняя логика
+
+### Уровни заголовков
+Поддерживает 6 уровней через \`level\` prop:
+- **1** - h1 (самый важный, самый крупный)
+- **2** - h2
+- **3** - h3
+- **4** - h4
+- **5** - h5
+- **6** - h6 (наименее важный, самый маленький)
+
+### Размеры
+Поддерживает 8 размеров (независимо от level):
+- **xs** - очень маленький
+- **sm** - маленький
+- **md** - средний
+- **lg** - большой
+- **xl** - очень большой
+- **2xl** - extra large
+- **3xl** - 3x large
+- **4xl** - 4x large
+
+### Веса шрифта
+Поддерживает 4 веса:
+- **normal** - обычный вес
+- **medium** - средний вес
+- **semibold** - полужирный (по умолчанию для заголовков)
+- **bold** - жирный
+
+### Цвета
+Поддерживает 6 цветовых вариантов:
+- **default** - цвет по умолчанию (text-slate-900)
+- **muted** - приглушенный цвет (text-slate-600)
+- **primary** - основной цвет
+- **success** - зеленый цвет
+- **warning** - желтый цвет
+- **danger** - красный цвет
+
+## Особенности
+
+### Семантика
+Компонент автоматически рендерится как соответствующий HTML тег (h1-h6) на основе \`level\` prop:
+- \`level={1}\` → \`<h1>\`
+- \`level={2}\` → \`<h2>\`
+- И так далее
+
+Это важно для:
+- SEO (поисковые системы понимают иерархию заголовков)
+- Доступности (скринридеры используют заголовки для навигации)
+- Семантической правильности HTML
+
+### Независимость level и size
+Уровень заголовка (\`level\`) и его визуальный размер (\`size\`) независимы:
+- Можно использовать h1 с маленьким размером
+- Можно использовать h3 с большим размером
+- Это позволяет разделять семантику и визуальное представление
+
+### Кастомные классы
+Поддерживает \`class\` prop для добавления дополнительных CSS классов.
+        `,
+      },
+    },
+  },
   argTypes: {
     level: { control: { type: 'select' }, options: [1, 2, 3, 4, 5, 6] },
     size: { control: { type: 'select' }, options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'] },

package/src/components/atoms/DXIcon/DXIcon.stories.js

@@ -20,6 +20,80 @@ export default {
   title: 'Atoms/DXIcon',
   component: DXIcon,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXIcon
+
+Компонент иконки для отображения Heroicons с поддержкой размеров и анимаций.
+
+## Назначение
+
+DXIcon предоставляет стандартизированный способ отображения иконок из библиотеки Heroicons.
+Компонент поддерживает различные размеры, анимации при наведении и интеграцию с group-hover эффектами.
+
+## Архитектура
+
+### Использует
+- Heroicons компоненты - библиотека иконок (outline и solid варианты)
+- \`useSize\` composable - для унификации размеров (xs, sm, md, lg, xl)
+- \`useAnimation\` composable - для анимаций при hover
+
+### Используется в
+- \`DXButton\` - иконки в кнопках
+- \`DXInput\` - иконки в полях ввода
+- \`DXMenu\` - иконки в меню
+- \`DXBadge\` - иконки в бейджах
+- \`DXAvatar\` - иконки fallback
+- Любые места, требующие отображения иконок
+
+## Внутренняя логика
+
+### Размеры
+Поддерживает 5 размеров:
+- **xs** - очень маленький
+- **sm** - маленький
+- **md** - средний (по умолчанию)
+- **lg** - большой
+- **xl** - очень большой
+
+### Анимации
+Поддерживает 4 типа анимаций при hover:
+- **none** (по умолчанию) - без анимации
+- **wiggle** - тряска (wiggle animation)
+- **scale** - увеличение (scale 1.1)
+- **rotate** - поворот на 90 градусов
+
+### Group Hover
+При \`groupHover={true}\`:
+- Анимация срабатывает при наведении на родительский элемент с классом \`group\`
+- Полезно для анимации иконок в кнопках, ссылках и других интерактивных элементах
+
+## Особенности
+
+### Heroicons
+Компонент работает с Heroicons компонентами:
+- **Outline** - контурные иконки (24/outline)
+- **Solid** - закрашенные иконки (24/solid)
+
+### Кастомные классы
+Поддерживает \`class\` prop для добавления дополнительных CSS классов:
+- Цвета (text-blue-500, text-rose-500 и т.д.)
+- Позиционирование
+- Другие стили
+
+### Динамический рендеринг
+Использует \`<component :is="icon">\` для динамического рендеринга Heroicon компонента.
+
+### Производительность
+- Минимальный overhead
+- CSS анимации для плавности
+- Transition для плавных переходов
+        `,
+      },
+    },
+  },
   argTypes: {
     size: {
       control: 'select',

package/src/components/atoms/DXIconWrapper/DXIconWrapper.stories.js

@@ -5,6 +5,75 @@ export default {
   title: 'Atoms/DXIconWrapper',
   component: DXIconWrapper,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXIconWrapper
+
+Компонент обертки для позиционирования иконок внутри полей ввода и других элементов.
+
+## Назначение
+
+DXIconWrapper предоставляет стандартизированный способ позиционирования иконок внутри
+полей ввода, textarea и других элементов. Компонент автоматически размещает иконку
+слева или справа с правильными отступами и выравниванием.
+
+## Архитектура
+
+### Использует
+- \`DXIcon\` - для отображения иконок
+- \`useClassComposition\` composable - для объединения CSS классов
+- \`useCustomDataAttributes\` composable - для data-атрибутов
+
+### Используется в
+- \`DXInput\` - для иконок prefix/suffix
+- \`DXTextarea\` - для иконок prefix/suffix
+- \`DXSelect\` - для иконок prefix
+- Любые элементы, требующие иконки внутри
+
+## Внутренняя логика
+
+### Позиционирование
+- **left** (по умолчанию): Иконка слева (\`left-3\`)
+- **right**: Иконка справа (\`right-3\`)
+
+### Вертикальное выравнивание
+- **center** (по умолчанию): По центру (\`top-1/2 -translate-y-1/2\`)
+- **top**: По верху (\`top-3\`) - полезно для textarea
+
+### Размеры иконок
+Поддерживает 4 размера:
+- **xs** - очень маленький
+- **sm** - маленький (по умолчанию)
+- **md** - средний
+- **lg** - большой
+
+### Анимации
+Поддерживает те же анимации, что и DXIcon:
+- **none** (по умолчанию) - без анимации
+- **wiggle** - тряска
+- **scale** - масштабирование
+- **rotate** - вращение
+
+## Особенности
+
+### Абсолютное позиционирование
+Компонент использует абсолютное позиционирование, поэтому родительский элемент
+должен иметь \`position: relative\`.
+
+### Pointer events
+Использует \`pointer-events-none\` чтобы не блокировать взаимодействие с полем ввода.
+
+### Слоты
+Поддерживает default slot для кастомных элементов вместо иконки.
+
+### Кастомные классы
+Поддерживает \`iconClass\` prop для добавления дополнительных CSS классов к иконке.
+        `,
+      },
+    },
+  },
   argTypes: {
     position: {
       control: 'select',