dxd-style-code 0.1.11 → 0.1.12

package/src/components/atoms/DXLink/DXLink.vue

@@ -12,12 +12,13 @@
     :data-variant="variant"
     :data-size="size"
     :data-disabled="disabled"
+    :data-inactive="inactive"
     :data-external="isExternal"
     @click="handleClick"
   >
     <slot />
     <DXIcon
-      v-if="showExternalIcon && isExternal && !disabled"
+      v-if="showExternalIcon && isExternal && !disabled && !inactive"
       :icon="ArrowTopRightOnSquareIcon"
       :size="iconSize"
       class="ml-0.5"
@@ -49,6 +50,8 @@ const props = defineProps({
   size: { type: String, default: "md" },
   /** Отключенное состояние */
   disabled: { type: Boolean, default: false },
+  /** Неактивное состояние (визуально приглушенная, но кликабельная) */
+  inactive: { type: Boolean, default: false },
   /** Кастомный aria-label */
   ariaLabel: { type: String, default: null },
   /** Показывать иконку для внешних ссылок */
@@ -161,16 +164,69 @@ const textSizeClass = computed(() => {
   return useSize(props.size, "text");
 });
 
+/**
+ * Классы padding для вариантов (кроме link)
+ */
+const variantPaddingClass = computed(() => {
+  if (props.variant === "link") return "";
+  
+  // Небольшие отступы в зависимости от размера
+  const paddingMap = {
+    xs: "px-1 py-0.5",
+    sm: "px-1.5 py-0.5",
+    md: "px-2 py-0.5",
+    lg: "px-2.5 py-1",
+    xl: "px-3 py-1",
+  };
+  return paddingMap[props.size] || paddingMap.md;
+});
+
+/**
+ * Классы для неактивного состояния
+ */
+const inactiveVariantClass = computed(() => {
+  if (props.variant === "link") {
+    return "text-slate-600 no-underline cursor-default";
+  }
+  
+  // Для остальных вариантов - базовые цвета без hover, с меньшей opacity для яркости
+  const baseColors = {
+    primary: "bg-slate-800 text-white",
+    secondary: "bg-slate-200 text-slate-700",
+    ghost: "text-slate-600 bg-transparent",
+    outline: "border border-slate-200 text-slate-600 bg-white",
+    success: "bg-emerald-600 text-white",
+    warning: "bg-amber-600 text-white",
+    danger: "bg-rose-600 text-white",
+    info: "bg-blue-600 text-white",
+    soft: "bg-slate-50 text-slate-600",
+  };
+  
+  return useClassComposition(
+    baseColors[props.variant] || baseColors.primary,
+    variantPaddingClass.value,
+    "rounded-lg opacity-75"
+  );
+});
+
 /**
  * Классы варианта стилизации
  */
 const variantClass = computed(() => {
+  if (props.inactive) {
+    return inactiveVariantClass.value;
+  }
+  
   if (props.variant === "link") {
     // Кастомные классы для варианта link
     return "text-blue-600 hover:text-blue-700 underline-offset-2 hover:underline";
   }
-  // Для остальных вариантов используем useVariantButton
-  return useVariantButton(props.variant);
+  // Для остальных вариантов используем useVariantButton + padding + border-radius
+  return useClassComposition(
+    useVariantButton(props.variant),
+    variantPaddingClass.value,
+    "rounded-lg"
+  );
 });
 
 /**

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

@@ -3,7 +3,82 @@ import DXList from './DXList.vue';
 export default {
   title: 'Atoms/DXList',
   component: DXList,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:typography'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXList
+
+Компонент списка с поддержкой упорядоченных и неупорядоченных списков, различных стилей маркеров и размеров.
+
+## Назначение
+
+DXList предоставляет стандартизированный способ создания списков с настраиваемыми параметрами
+типографики. Компонент автоматически рендерится как \`<ul>\` или \`<ol>\` для семантической правильности.
+
+## Архитектура
+
+### Использует
+- Динамический рендеринг HTML тегов - для семантической правильности
+
+### Используется в
+- Списки элементов
+- Навигационные меню
+- Оглавления
+- Любые места, требующие структурированных списков
+
+## Внутренняя логика
+
+### Типы списков
+- **unordered** (по умолчанию): Неупорядоченный список (\`<ul>\`)
+- **ordered**: Упорядоченный список (\`<ol>\`) - при \`ordered={true}\`
+
+### Стили маркеров
+Поддерживает различные стили маркеров:
+- **disc** - заполненные круги (по умолчанию для ul)
+- **circle** - пустые круги
+- **square** - квадраты
+- **decimal** - числа (по умолчанию для ol)
+- **none** - без маркеров
+
+### Размеры
+Поддерживает 3 размера текста:
+- **sm** - маленький текст
+- **md** - средний текст (по умолчанию)
+- **lg** - большой текст
+
+### Отступы между элементами
+Поддерживает 4 варианта отступов:
+- **none** - без отступов
+- **sm** - маленькие отступы (по умолчанию)
+- **md** - средние отступы
+- **lg** - большие отступы
+
+## Особенности
+
+### Семантика
+Компонент использует семантически правильные HTML теги:
+- \`<ul>\` для неупорядоченных списков
+- \`<ol>\` для упорядоченных списков
+
+Это важно для:
+- SEO (поисковые системы понимают структуру)
+- Доступности (скринридеры используют списки для навигации)
+- Семантической правильности HTML
+
+### Элементы списка
+Элементы списка должны быть обернуты в \`<li>\` теги через slot:
+\`\`\`vue
+<DXList>
+  <li>Первый элемент</li>
+  <li>Второй элемент</li>
+</DXList>
+\`\`\`
+        `,
+      },
+    },
+  },
 };
 
 export const Unordered = {

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

@@ -3,7 +3,81 @@ import DXLoader from './DXLoader.vue';
 export default {
   title: 'Atoms/DXLoader',
   component: DXLoader,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:feedback'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXLoader
+
+Компонент индикатора загрузки с поддержкой различных размеров, цветов и текста.
+
+## Назначение
+
+DXLoader предоставляет стандартизированный способ отображения состояния загрузки.
+Компонент поддерживает различные размеры, цвета и возможность отображения текста рядом с индикатором.
+
+## Архитектура
+
+### Использует
+- \`useSize\` composable - для унификации размеров (xs, sm, md, lg, xl)
+- \`useVariantLoader\` composable - для цветовых вариантов
+
+### Используется в
+- Загрузка данных
+- Обработка запросов
+- Состояния ожидания
+- Любые места, требующие индикации загрузки
+
+## Внутренняя логика
+
+### Размеры
+Поддерживает 5 размеров:
+- **xs** - очень маленький (8×8px)
+- **sm** - маленький
+- **md** - средний (по умолчанию)
+- **lg** - большой
+- **xl** - очень большой
+
+### Цвета
+Поддерживает 7 цветовых вариантов:
+- **default** (по умолчанию) - стандартный цвет
+- **primary** - основной цвет
+- **success** - зеленый цвет
+- **warning** - желтый цвет
+- **danger** - красный цвет
+- **info** - синий цвет
+- **slate** - серый цвет
+
+### Текст
+Поддерживает отображение текста рядом с индикатором:
+- Через \`text\` prop
+- Через default slot
+- Управляется через \`showText\` prop
+
+## Особенности
+
+### Анимация
+Использует CSS анимацию \`animate-spin\` для вращения индикатора.
+
+### Отображение текста
+Логика отображения текста:
+- Если \`showText\` явно указан → используется его значение
+- Если есть default slot → текст показывается
+- Если есть \`text\` prop → текст показывается
+- Иначе → текст не показывается
+
+### Визуальное оформление
+- Круглый индикатор с границей
+- Вращающаяся анимация
+- Цветная верхняя граница для визуального эффекта
+
+### Слоты
+- **default** - кастомный текст (если нужно)
+        `,
+      },
+    },
+  },
   argTypes: {
     size: {
       control: 'select',

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

@@ -0,0 +1,236 @@
+import DXNav from './DXNav.vue';
+import DXLink from '../DXLink/DXLink.vue';
+import DXButton from '../DXButton/DXButton.vue';
+
+export default {
+  title: 'Atoms/DXNav',
+  component: DXNav,
+  tags: ['autodocs', 'category:navigation'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXNav
+
+Универсальный компонент для обертки навигационных элементов с автоматическим управлением accessibility.
+
+## Назначение
+
+DXNav - атомарный компонент для создания семантически правильных навигационных элементов.
+Автоматически добавляет правильные \`aria-label\` атрибуты на основе типа навигации,
+что улучшает accessibility и соответствие стандартам.
+
+## Архитектура
+
+### Используется в
+- \`DXBreadcrumb\` - для хлебных крошек
+- \`DXPagination\` - для пагинации
+- \`DXMenu\` - для навигационных меню
+- \`DXSidebarMenu\` - для боковых меню
+- \`DXHeaderBar\` - для основной навигации в шапке
+- Любые другие компоненты, требующие навигации
+
+## Внутренняя логика
+
+### Автоматические aria-label
+Компонент автоматически добавляет \`aria-label\` на основе типа:
+- \`breadcrumb\` → \`aria-label="Breadcrumb"\`
+- \`pagination\` → \`aria-label="Pagination"\`
+- \`menu\` → \`aria-label="Navigation menu"\`
+- \`main\` → \`aria-label="Main navigation"\`
+- \`custom\` → без автоматического label (требует \`ariaLabel\` prop)
+
+### Приоритет aria-label
+1. Если передан \`ariaLabel\` prop → используется он (переопределяет тип)
+2. Если \`type !== 'custom'\` → используется автоматический label
+3. Если \`type === 'custom'\` и нет \`ariaLabel\` → aria-label не добавляется
+
+### Передача атрибутов
+Все атрибуты (кроме \`class\` и \`aria-label\`) автоматически передаются через \`$attrs\`:
+- HTML атрибуты (id, data-*, и т.д.)
+- События (@click, @input, и т.д.)
+
+## Особенности
+
+### Типы навигации
+- **breadcrumb**: Для хлебных крошек (показывает путь к текущей странице)
+- **pagination**: Для пагинации (навигация по страницам)
+- **menu**: Для навигационных меню (боковые панели, выпадающие меню)
+- **main**: Для основной навигации (главное меню сайта)
+- **custom**: Для кастомных случаев (требует явного \`ariaLabel\`)
+
+### Accessibility
+Компонент автоматически обеспечивает правильную семантику и accessibility:
+- Семантический \`<nav>\` тег
+- Правильные \`aria-label\` для screen readers
+- Поддержка всех стандартных HTML атрибутов
+- Совместимость с клавиатурной навигацией
+
+## Ограничения
+
+- Для \`custom\` типа рекомендуется всегда указывать \`ariaLabel\` для accessibility
+- Компонент не добавляет стили - используйте \`class\` prop для стилизации
+- Все атрибуты передаются как есть (кроме \`class\` и \`aria-label\`)
+        `,
+      },
+    },
+  },
+  argTypes: {
+    type: {
+      control: { type: 'select' },
+      options: ['breadcrumb', 'pagination', 'menu', 'main', 'custom'],
+      description: 'Тип навигации',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'main' },
+      },
+    },
+    ariaLabel: {
+      control: { type: 'text' },
+      description: 'Кастомный aria-label (переопределяет автоматический)',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'null' },
+      },
+    },
+    class: {
+      control: { type: 'text' },
+      description: 'Дополнительные CSS классы',
+      table: {
+        type: { summary: 'string | array | object' },
+        defaultValue: { summary: 'null' },
+      },
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    type: 'main',
+  },
+  render: (args) => ({
+    components: { DXNav, DXLink },
+    setup() {
+      return { args };
+    },
+    template: `
+      <DXNav v-bind="args" class="flex gap-4">
+        <DXLink href="/">Home</DXLink>
+        <DXLink href="/about">About</DXLink>
+        <DXLink href="/contact">Contact</DXLink>
+      </DXNav>
+    `,
+  }),
+};
+
+export const Breadcrumb = {
+  args: {
+    type: 'breadcrumb',
+  },
+  render: (args) => ({
+    components: { DXNav, DXLink },
+    setup() {
+      return { args };
+    },
+    template: `
+      <DXNav v-bind="args" class="flex items-center gap-2">
+        <DXLink href="/">Home</DXLink>
+        <span class="text-slate-400">/</span>
+        <DXLink href="/products">Products</DXLink>
+        <span class="text-slate-400">/</span>
+        <DXLink href="/products/current" inactive>Current Page</DXLink>
+      </DXNav>
+    `,
+  }),
+};
+
+export const Pagination = {
+  args: {
+    type: 'pagination',
+  },
+  render: (args) => ({
+    components: { DXNav, DXButton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <DXNav v-bind="args" class="flex items-center gap-1">
+        <DXButton variant="ghost" size="sm">Previous</DXButton>
+        <DXButton variant="primary" size="sm">1</DXButton>
+        <DXButton variant="ghost" size="sm">2</DXButton>
+        <DXButton variant="ghost" size="sm">3</DXButton>
+        <DXButton variant="ghost" size="sm">Next</DXButton>
+      </DXNav>
+    `,
+  }),
+};
+
+export const Menu = {
+  args: {
+    type: 'menu',
+  },
+  render: (args) => ({
+    components: { DXNav, DXLink },
+    setup() {
+      return { args };
+    },
+    template: `
+      <DXNav v-bind="args" class="flex flex-col gap-1">
+        <DXLink href="/dashboard" variant="ghost">Dashboard</DXLink>
+        <DXLink href="/settings" variant="ghost">Settings</DXLink>
+        <DXLink href="/profile" variant="ghost">Profile</DXLink>
+      </DXNav>
+    `,
+  }),
+};
+
+export const CustomAriaLabel = {
+  args: {
+    type: 'custom',
+    ariaLabel: 'Site navigation',
+  },
+  render: (args) => ({
+    components: { DXNav, DXLink },
+    setup() {
+      return { args };
+    },
+    template: `
+      <DXNav v-bind="args" class="flex gap-4">
+        <DXLink href="/">Home</DXLink>
+        <DXLink href="/about">About</DXLink>
+        <DXLink href="/contact">Contact</DXLink>
+      </DXNav>
+      <p class="text-sm text-slate-600 mt-4">
+        Используется кастомный aria-label: "Site navigation"
+      </p>
+    `,
+  }),
+};
+
+export const WithAttributes = {
+  args: {
+    type: 'main',
+  },
+  render: (args) => ({
+    components: { DXNav, DXLink },
+    setup() {
+      return { args };
+    },
+    template: `
+      <DXNav 
+        v-bind="args" 
+        id="main-nav"
+        class="flex gap-4 p-4 bg-slate-50 rounded-lg"
+        data-testid="navigation"
+      >
+        <DXLink href="/">Home</DXLink>
+        <DXLink href="/about">About</DXLink>
+        <DXLink href="/contact">Contact</DXLink>
+      </DXNav>
+      <p class="text-sm text-slate-600 mt-4">
+        Все атрибуты (id, data-testid, class) передаются корректно
+      </p>
+    `,
+  }),
+};
+

package/src/components/atoms/DXNav/DXNav.vue

@@ -0,0 +1,114 @@
+<template>
+  <nav 
+    :aria-label="computedAriaLabel"
+    :class="computedClass"
+    data-component="DXNav"
+    :data-type="type"
+    v-bind="navAttrs"
+  >
+    <slot />
+  </nav>
+</template>
+
+<script setup>
+import { computed, useAttrs } from "vue";
+
+const props = defineProps({
+  /** Тип навигации: breadcrumb | pagination | menu | main | custom */
+  type: {
+    type: String,
+    default: "main",
+    validator: (value) => ["breadcrumb", "pagination", "menu", "main", "custom"].includes(value),
+  },
+  /** Кастомный aria-label (переопределяет автоматический label для типа) */
+  ariaLabel: {
+    type: String,
+    default: null,
+  },
+  /** Дополнительные CSS классы */
+  class: {
+    type: [String, Array, Object],
+    default: null,
+  },
+});
+
+const attrs = useAttrs();
+
+/**
+ * Атрибуты для передачи на nav элемент (исключая class и aria-label, которые обрабатываются отдельно)
+ * 
+ * @description
+ * В Vue 3 с <script setup>, props определенные через defineProps автоматически
+ * не попадают в $attrs. Исключаем class и aria-label, так как они обрабатываются отдельно.
+ */
+const navAttrs = computed(() => {
+  const { class: _, "aria-label": __, ...rest } = attrs;
+  return rest;
+});
+
+/**
+ * Автоматические aria-label для типов навигации
+ * 
+ * @description
+ * Маппинг типов навигации на стандартные aria-label значения
+ * для улучшения accessibility.
+ */
+const typeAriaLabels = {
+  breadcrumb: "Breadcrumb",
+  pagination: "Pagination",
+  menu: "Navigation menu",
+  main: "Main navigation",
+};
+
+/**
+ * Вычисляет aria-label для nav элемента
+ * 
+ * @description
+ * Приоритет:
+ * 1. Если передан ariaLabel prop → используем его
+ * 2. Если type !== 'custom' → используем автоматический label из typeAriaLabels
+ * 3. Если type === 'custom' и нет ariaLabel → возвращаем null (не добавляем aria-label)
+ * 
+ * @returns {string|null} Значение aria-label или null
+ */
+const computedAriaLabel = computed(() => {
+  // Если передан кастомный aria-label, используем его
+  if (props.ariaLabel) {
+    return props.ariaLabel;
+  }
+  
+  // Если тип не custom, используем автоматический label
+  if (props.type !== "custom") {
+    return typeAriaLabels[props.type] || null;
+  }
+  
+  // Для custom типа без ariaLabel не добавляем aria-label
+  return null;
+});
+
+/**
+ * Вычисляет классы для nav элемента
+ * 
+ * @description
+ * Объединяет prop class с любыми классами из $attrs.class.
+ * 
+ * @returns {string|Array|Object|null} Классы для применения к элементу
+ */
+const computedClass = computed(() => {
+  const classes = [];
+  
+  // Добавляем класс из prop class
+  if (props.class) {
+    classes.push(props.class);
+  }
+  
+  // Добавляем класс из $attrs.class если есть
+  if (attrs.class) {
+    classes.push(attrs.class);
+  }
+  
+  // Возвращаем массив если есть несколько классов, иначе одно значение или null
+  return classes.length > 1 ? classes : classes[0] || null;
+});
+</script>
+

package/src/components/atoms/DXNav/index.js

@@ -0,0 +1,2 @@
+export { default } from './DXNav.vue';
+