dxd-style-code 0.1.11 → 0.1.13

package/src/components/atoms/DXButton/DXButton.vue

@@ -2,7 +2,7 @@
   <component
     :is="componentTag"
     :type="componentTag === 'button' ? type : undefined"
-    :disabled="disabled"
+    :disabled="effectiveDisabled"
     :to="to"
     :href="href"
     :target="target"
@@ -10,17 +10,19 @@
     :class="allClasses"
     data-component="DXButton"
     :data-variant="variant"
-    :data-size="size"
-    :data-disabled="disabled"
+    :data-size="effectiveSize"
+    :data-disabled="effectiveDisabled"
     :data-icon-only="iconOnly"
     :data-block="block"
+    :data-in-group="!!buttonGroup"
+    @click="handleClick"
   >
     <slot />
   </component>
 </template>
 
 <script setup>
-import { computed } from "vue";
+import { computed, inject, onMounted, onUnmounted } from "vue";
 import { useSize } from "../../../composables/useSize";
 import { useVariantButton } from "../../../composables/useVariant";
 import { useClassComposition } from "../../../composables/useClassComposition";
@@ -46,6 +48,60 @@ const props = defineProps({
   target: { type: String, default: null },
   /** Rel для ссылки */
   rel: { type: String, default: null },
+  /** Значение для использования в DXButtonGroup */
+  value: { type: [String, Number], default: null },
+});
+
+const buttonGroup = inject("buttonGroup", null);
+
+// Генерируем уникальный ID для регистрации
+const componentId = Date.now() + Math.random();
+
+onMounted(() => {
+  if (buttonGroup?.registerComponent) {
+    buttonGroup.registerComponent('button', componentId);
+  }
+});
+
+onUnmounted(() => {
+  if (buttonGroup?.unregisterComponent) {
+    buttonGroup.unregisterComponent(componentId);
+  }
+});
+
+// Получаем информацию о позиции кнопки в группе
+const buttonPosition = computed(() => {
+  if (!buttonGroup?.getComponentPosition) {
+    return { isFirst: false, isLast: false, isMiddle: false };
+  }
+  return buttonGroup.getComponentPosition(componentId);
+});
+
+// Эффективный размер: используем размер группы, если кнопка в группе
+const effectiveSize = computed(() => {
+  if (buttonGroup) {
+    // Маппинг размеров группы на размеры кнопки
+    const sizeMap = {
+      sm: 'sm',
+      md: 'md',
+      lg: 'lg',
+    };
+    return sizeMap[buttonGroup.size] || 'md';
+  }
+  return props.size;
+});
+
+// Эффективное состояние disabled: учитываем состояние группы
+const effectiveDisabled = computed(() => {
+  return props.disabled || (buttonGroup?.disabled ?? false);
+});
+
+// Проверяем, выбрана ли кнопка
+const isSelected = computed(() => {
+  if (!buttonGroup || props.value === null || props.value === undefined) {
+    return false;
+  }
+  return buttonGroup.isSelected(props.value);
 });
 
 const BASE_CLASSES = "btn group inline-flex items-center justify-center gap-2 rounded-xl font-semibold transition focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-60";
@@ -63,22 +119,100 @@ const componentTag = computed(() => {
  * Классы размера
  */
 const sizeClass = computed(() => {
-  return useSize(props.size, props.iconOnly ? 'buttonIcon' : 'button');
+  if (buttonGroup && !props.iconOnly) {
+    // В группе используем только padding и размер текста, высоту контролирует группа
+    const fullSizeClass = useSize(effectiveSize.value, 'button');
+    // Извлекаем только padding и text размер, убираем height
+    return fullSizeClass.replace(/\bh-\d+\b/g, '').trim();
+  }
+  return useSize(effectiveSize.value, props.iconOnly ? 'buttonIcon' : 'button');
 });
 
+/**
+ * Классы border-radius для кнопки в группе
+ */
+const getBorderRadiusClasses = () => {
+  if (!buttonGroup) {
+    return 'rounded-xl';
+  }
+  
+  if (buttonPosition.value.isFirst) {
+    return 'rounded-l-xl rounded-r-none';
+  } else if (buttonPosition.value.isLast) {
+    return 'rounded-l-none rounded-r-xl';
+  } else {
+    return 'rounded-none';
+  }
+};
+
+/**
+ * Обработчик клика
+ */
+const handleClick = (event) => {
+  // Если кнопка в группе и имеет value, обрабатываем через группу
+  if (buttonGroup && props.value !== null && props.value !== undefined) {
+    event.preventDefault();
+    event.stopPropagation();
+    buttonGroup.handleSelect(props.value);
+    return;
+  }
+  
+  // Если это router-link или обычная ссылка, не предотвращаем стандартное поведение
+  if (props.to || props.href) {
+    return;
+  }
+  
+  // Для обычной кнопки стандартное поведение
+};
+
 /**
  * Все классы для кнопки
  */
-const allClasses = computed(() => 
-  useClassComposition(
-    BASE_CLASSES,
-    useVariantButton(props.variant),
+const allClasses = computed(() => {
+  const baseClasses = buttonGroup 
+    ? BASE_CLASSES.replace('rounded-xl', getBorderRadiusClasses())
+    : BASE_CLASSES;
+  
+  // В группе: выбранная кнопка - темная, невыбранная - светлая
+  // Вне группы: используем стандартные варианты
+  let variantClasses;
+  if (buttonGroup) {
+    if (isSelected.value) {
+      variantClasses = 'bg-slate-900 text-white hover:bg-slate-800';
+    } else {
+      variantClasses = 'bg-white text-slate-700 hover:bg-slate-50';
+    }
+  } else {
+    variantClasses = useVariantButton(props.variant);
+  }
+  
+  // Классы для разделителей в группе
+  const dividerClasses = computed(() => {
+    if (!buttonGroup) return {};
+    // divide-x добавляет border-left ко всем элементам кроме первого
+    // Но для надежности добавляем явно
+    return {
+      'border-l border-slate-200': !buttonPosition.value.isFirst,
+    };
+  });
+
+  return useClassComposition(
+    baseClasses,
+    variantClasses,
     sizeClass.value,
     {
       'w-full': props.block,
       'px-0 py-0': props.iconOnly,
+      // В группе не применяем border-0, чтобы divide-x мог добавить разделители
+      // Варианты кнопок в группе уже не содержат границ (переопределены выше)
+      // В группе высота контролируется группой
+      'h-full': buttonGroup && !props.iconOnly,
+      // В группе используем flex-1 для равномерного распределения
+      'flex-1': buttonGroup && !props.iconOnly,
+      // Явно добавляем разделители
+      ...dividerClasses.value,
     }
-  )
-);
+  );
+});
 </script>
 

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

@@ -3,11 +3,79 @@ import DXCard from './DXCard.vue';
 export default {
   title: 'Atoms/DXCard',
   component: DXCard,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:data-display'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXCard
+
+Универсальный компонент карточки с различными вариантами оформления и настраиваемым padding.
+
+## Назначение
+
+DXCard предоставляет стандартизированный контейнер для группировки контента. Компонент поддерживает
+различные варианты визуального оформления (bordered, elevated, flat) и гибкую систему padding для
+создания карточек с различной плотностью контента.
+
+## Архитектура
+
+### Использует
+- \`useSpacing\` composable - для унификации padding (none, xs, sm, md, lg, xl)
+
+### Используется в
+- \`DXStatCard\` - карточки статистики
+- \`DXDashboardWidget\` - виджеты дашборда
+- \`DXUserProfileCard\` - карточки профиля
+- \`DXMenu\` - контейнеры меню
+- Любые места, где требуется визуальное выделение контента
+
+## Внутренняя логика
+
+### Варианты оформления
+- **bordered** (по умолчанию): Карточка с рамкой 2px (\`border-1 border-slate-200\`), без тени
+- **elevated**: Карточка с большой тенью (\`shadow-lg\`) и тонкой рамкой для эффекта "плавающей" карточки
+- **flat**: Минимальное оформление, только фон и скругление, без рамки и тени
+
+### Система padding
+Поддерживает 6 уровней padding через \`useSpacing\` composable:
+- **none** - без отступов
+- **xs** - минимальные отступы
+- **sm** - маленькие отступы (p-3)
+- **md** - средние отступы (p-5, по умолчанию)
+- **lg** - большие отступы (p-8)
+- **xl** - очень большие отступы
+
+### Скругление
+Все карточки имеют скругление \`rounded-2xl\` для единообразного внешнего вида.
+
+## Особенности
+
+### Базовые стили
+- Белый фон (\`bg-white\`)
+- Скругление углов (\`rounded-2xl\`)
+- Варианты оформления через \`variant\` prop
+
+### Гибкость контента
+Компонент использует slot для контента, что позволяет размещать внутри любые элементы:
+- Заголовки и текст
+- Изображения
+- Формы и интерактивные элементы
+- Другие компоненты
+
+### Использование в композиции
+DXCard часто используется как базовый контейнер для более сложных компонентов:
+- Карточки статистики с иконками и метриками
+- Виджеты дашборда с графиками
+- Карточки профиля с аватарами и информацией
+        `,
+      },
+    },
+  },
   argTypes: {
     variant: {
       control: 'select',
-      options: ['default', 'bordered', 'elevated', 'flat'],
+      options: ['bordered', 'elevated', 'flat'],
       description: 'Card variant style'
     },
     padding: {
@@ -20,7 +88,7 @@ export default {
 
 export const Default = {
   args: {
-    variant: 'default',
+    variant: 'bordered',
     padding: 'md',
   },
   render: (args) => ({
@@ -46,17 +114,7 @@ export const Variants = {
     template: `
       <div class="space-y-4">
         <div>
-          <p class="text-sm font-medium text-slate-700 mb-2">Default (border + shadow)</p>
-          <DXCard variant="default">
-            <h3 class="text-lg font-semibold text-slate-900 mb-2">Default Card</h3>
-            <p class="text-sm text-slate-600">
-              Subtle border and shadow for a clean, modern look.
-            </p>
-          </DXCard>
-        </div>
-        
-        <div>
-          <p class="text-sm font-medium text-slate-700 mb-2">Bordered (2px border, no shadow)</p>
+          <p class="text-sm font-medium text-slate-700 mb-2">Bordered (2px border, no shadow) - Default</p>
           <DXCard variant="bordered">
             <h3 class="text-lg font-semibold text-slate-900 mb-2">Bordered Card</h3>
             <p class="text-sm text-slate-600">

package/src/components/atoms/DXCard/DXCard.vue

@@ -14,11 +14,11 @@ import { computed } from "vue";
 import { useSpacing } from "../../../composables/useSpacing";
 
 const props = defineProps({
-  /** Вариант: default | bordered | elevated | flat */
+  /** Вариант: bordered | elevated | flat */
   variant: {
     type: String,
-    default: "default",
-    validator: (value) => ['default', 'bordered', 'elevated', 'flat'].includes(value)
+    default: "bordered",
+    validator: (value) => ['bordered', 'elevated', 'flat'].includes(value)
   },
   /** Padding: none | xs | sm | md | lg | xl */
   padding: {
@@ -31,7 +31,6 @@ const props = defineProps({
 const BASE_CLASSES = "bg-white rounded-2xl";
 
 const VARIANT_CLASSES = {
-  default: "border border-slate-100 shadow-sm",
   bordered: "border-1 border-slate-200",
   elevated: "shadow-lg border border-slate-50",
   flat: "border-0",

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

@@ -12,7 +12,91 @@ import {
 export default {
   title: 'Atoms/DXCheckbox',
   component: DXCheckbox,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:form'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXCheckbox
+
+Компонент чекбокса с поддержкой двух вариантов (нативный и кастомный), различных размеров, цветов и иконок.
+
+## Назначение
+
+DXCheckbox предоставляет стандартизированный чекбокс для выбора одного или нескольких значений.
+Компонент поддерживает два варианта оформления (нативный и кастомный), различные размеры, цвета,
+иконки и работу как с boolean значениями, так и с массивами.
+
+## Архитектура
+
+### Использует
+- \`DXIcon\` - для отображения иконок в кастомном варианте
+- \`useSize\` composable - для унификации размеров (xs, sm, md, lg, xl)
+- \`useVariantCheckbox\` composable - для вариантов оформления кастомного чекбокса
+- \`Transition\` - для анимации иконок
+
+### Используется в
+- Формы с выбором опций
+- Списки с множественным выбором
+- Согласия и подтверждения
+- Фильтры и настройки
+- Любые места, требующие выбора true/false или множественного выбора
+
+## Внутренняя логика
+
+### Варианты
+- **default** (по умолчанию): Нативный HTML checkbox с кастомной стилизацией
+- **custom**: Кастомный чекбокс с иконками и настраиваемыми цветами
+
+### Режимы работы
+- **Boolean режим**: При \`modelValue\` - Boolean, чекбокс работает как переключатель
+- **Array режим**: При \`modelValue\` - Array и указан \`value\`, чекбокс добавляет/удаляет значение из массива
+
+### Кастомный вариант
+При \`variant="custom"\`:
+- Поддерживает различные формы: \`square\` (квадрат), \`circle\` (круг)
+- Поддерживает различные цвета: \`slate\`, \`primary\`, \`success\`, \`danger\`, \`warning\`, \`info\`
+- Иконки для checked/unchecked состояний (по умолчанию CheckIcon для checked)
+- Анимации иконок: \`none\`, \`scale\`, \`wiggle\`
+
+### Размеры
+Поддерживает 5 размеров:
+- **xs** - очень маленький
+- **sm** - маленький
+- **md** - средний (по умолчанию)
+- **lg** - большой
+- **xl** - очень большой
+
+## Особенности
+
+### v-model
+Полностью поддерживает двустороннее связывание через \`v-model\`:
+- Для boolean: \`v-model="checked"\` где checked - Boolean
+- Для массива: \`v-model="selected"\` где selected - Array, и указан \`value\` prop
+
+### Лейбл
+- Текст лейбла через \`label\` prop
+- Лейбл кликабелен и переключает чекбокс
+
+### Состояния
+- **disabled** - отключает чекбокс
+- **checked** - отмеченное состояние
+- **unchecked** - неотмеченное состояние
+
+### Доступность
+- Нативный checkbox: полная поддержка нативной доступности
+- Кастомный checkbox: использует \`role="checkbox"\`, \`aria-checked\`, \`aria-disabled\`
+- Поддержка клавиатурной навигации (Space для переключения)
+
+### Иконки
+В кастомном варианте:
+- **checkedIcon**: Иконка для отмеченного состояния (по умолчанию CheckIcon)
+- **uncheckedIcon**: Иконка для неотмеченного состояния (опционально)
+- Размер иконки автоматически адаптируется к размеру чекбокса
+        `,
+      },
+    },
+  },
   argTypes: {
     variant: {
       control: 'select',

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

@@ -3,7 +3,73 @@ import DXCode from './DXCode.vue';
 export default {
   title: 'Atoms/DXCode',
   component: DXCode,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:typography'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXCode
+
+Компонент для отображения кода с поддержкой inline и block режимов.
+
+## Назначение
+
+DXCode предоставляет стандартизированный способ отображения кода в документации, статьях и интерфейсах.
+Компонент поддерживает два режима: inline (для кода внутри текста) и block (для блоков кода).
+
+## Архитектура
+
+### Использует
+- Динамический рендеринг HTML тегов - для семантической правильности
+
+### Используется в
+- Документация и статьи
+- Примеры кода
+- Технические описания
+- Любые места, требующие отображения кода
+
+## Внутренняя логика
+
+### Режимы
+- **inline** (по умолчанию): Код внутри текста, использует \`<code>\` тег
+- **block**: Блок кода, использует \`<pre><code>\` теги
+
+### Размеры
+Поддерживает 3 размера:
+- **xs** - очень маленький текст
+- **sm** - маленький текст (по умолчанию)
+- **md** - средний текст
+
+### Визуальное оформление
+- **inline**: Светлый фон (bg-slate-100), темный текст, небольшой padding
+- **block**: Темный фон (bg-slate-900), светлый текст, padding, скругление, прокрутка при переполнении
+
+## Особенности
+
+### Inline режим
+Используется для кода внутри текста:
+\`\`\`vue
+<DXCode>npm install</DXCode>
+\`\`\`
+
+### Block режим
+Используется для блоков кода:
+\`\`\`vue
+<DXCode block>
+const greeting = "Hello World";
+console.log(greeting);
+</DXCode>
+\`\`\`
+
+### Моноширинный шрифт
+Всегда использует моноширинный шрифт (\`font-mono\`) для правильного отображения кода.
+
+### Прокрутка
+В block режиме при переполнении появляется горизонтальная прокрутка (\`overflow-x-auto\`).
+        `,
+      },
+    },
+  },
 };
 
 export const Inline = {

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

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

package/src/components/atoms/DXContainer/DXContainer.vue

@@ -5,6 +5,7 @@
     :data-size="size"
     :data-padding="padding"
     :data-center="center"
+    :data-position="position"
   >
     <slot />
   </div>
@@ -22,6 +23,8 @@ const props = defineProps({
   center: { type: Boolean, default: true },
   /** Горизонтальные отступы: none | xs | sm | md | lg | xl */
   padding: { type: String, default: "md" },
+  /** Позиционирование: static | relative | absolute | fixed | sticky */
+  position: { type: String, default: null },
 });
 
 const BASE_CLASSES = "w-full";
@@ -60,11 +63,34 @@ const paddingClass = computed(() => {
   return useSpacing(props.padding, 'paddingX');
 });
 
+/**
+ * Классы позиционирования
+ * 
+ * @description
+ * Определяет CSS position для контейнера.
+ * Используется для создания контекста позиционирования для абсолютно позиционированных дочерних элементов.
+ * 
+ * @returns {string|null} Tailwind CSS класс для позиционирования или null
+ */
+const positionClass = computed(() => {
+  if (!props.position) return null;
+  
+  const positionClasses = {
+    static: "static",
+    relative: "relative",
+    absolute: "absolute",
+    fixed: "fixed",
+    sticky: "sticky",
+  };
+  
+  return positionClasses[props.position] || null;
+});
+
 /**
  * Все классы для контейнера
  * 
  * @description
- * Объединяет базовые классы, размер, отступы и центрирование
+ * Объединяет базовые классы, размер, отступы, центрирование и позиционирование
  * с использованием useClassComposition для единообразного подхода.
  * 
  * @returns {Array} Массив классов для применения к элементу
@@ -74,6 +100,7 @@ const containerClasses = computed(() =>
     BASE_CLASSES,
     sizeClass.value,
     paddingClass.value,
+    positionClass.value,
     {
       "mx-auto": props.center,
     }

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

@@ -3,7 +3,90 @@ import DXDivider from './DXDivider.vue';
 export default {
   title: 'Atoms/DXDivider',
   component: DXDivider,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:feedback'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXDivider
+
+Компонент разделителя для визуального разделения контента с поддержкой горизонтальной и вертикальной ориентации.
+
+## Назначение
+
+DXDivider предоставляет стандартизированный способ визуального разделения контента на странице.
+Компонент поддерживает горизонтальную и вертикальную ориентацию, различные цвета, толщины и отступы.
+
+## Архитектура
+
+### Использует
+- \`useSpacing\` composable - для унификации отступов
+- \`useVariantDividerBorder\` composable - для вариантов границ
+
+### Используется в
+- Разделение секций контента
+- Разделение элементов в списках
+- Разделение групп в формах
+- Любые места, требующие визуального разделения
+
+## Внутренняя логика
+
+### Ориентация
+- **horizontal** (по умолчанию): Горизонтальный разделитель
+- **vertical**: Вертикальный разделитель
+
+### Цвета
+Поддерживает 3 цветовых варианта:
+- **light** - светлый цвет (для темных фонов)
+- **default** - стандартный цвет (по умолчанию)
+- **dark** - темный цвет (для светлых фонов)
+
+### Толщина
+Поддерживает 3 варианта толщины:
+- **thin** - тонкая линия
+- **default** - стандартная толщина (по умолчанию)
+- **thick** - толстая линия
+
+### Отступы
+Поддерживает отступы через \`spacing\` prop:
+- **none** - без отступов
+- **xs**, **sm**, **md**, **lg**, **xl** - различные размеры отступов
+
+### Текст в разделителе
+Можно добавить текст в горизонтальный разделитель через default slot:
+- Текст отображается по центру
+- Линии автоматически размещаются по бокам
+
+## Особенности
+
+### Горизонтальный разделитель
+Используется для разделения контента по вертикали:
+\`\`\`vue
+<div>
+  <p>Content above</p>
+  <DXDivider />
+  <p>Content below</p>
+</div>
+\`\`\`
+
+### Вертикальный разделитель
+Используется для разделения контента по горизонтали:
+\`\`\`vue
+<div class="flex">
+  <div>Left content</div>
+  <DXDivider orientation="vertical" />
+  <div>Right content</div>
+</div>
+\`\`\`
+
+### С текстом
+\`\`\`vue
+<DXDivider>OR</DXDivider>
+\`\`\`
+        `,
+      },
+    },
+  },
   argTypes: {
     orientation: { 
       control: { type: 'select' }, 

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

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