dxd-style-code 0.1.7 → 0.1.8

package/src/components/layout/DXSpacer/DXSpacer.stories.js

@@ -0,0 +1,187 @@
+import DXSpacer from './DXSpacer.vue';
+
+export default {
+  title: 'Layout/DXSpacer',
+  component: DXSpacer,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+Компонент для создания отступов между элементами с поддержкой различных размеров и направлений.
+
+## Назначение
+
+DXSpacer - вспомогательный layout компонент для создания пространства между элементами.
+Поддерживает как фиксированные размеры (строковые и числовые), так и динамическое заполнение пространства (flex-grow).
+
+## Архитектура
+
+### Использует
+- \`useClassComposition\` composable - для объединения классов
+
+### Используется в
+- Вертикальные и горизонтальные отступы между элементами
+- Flex контейнеры для распределения пространства
+- Формы и группы полей
+- Навигационные меню
+- Любые места, где требуется добавить пространство между элементами
+
+## Внутренняя логика
+
+### Система размеров
+Поддерживает два типа размеров:
+- **Строковые значения**: \`xs\`, \`sm\`, \`md\`, \`lg\`, \`xl\`, \`2xl\` - используют предопределенные Tailwind классы
+- **Числовые значения**: пиксели (например, \`size={24}\`) - используют inline стили
+
+### Направления
+- \`vertical\` - вертикальный отступ (высота)
+- \`horizontal\` - горизонтальный отступ (ширина)
+- \`both\` - отступ по обеим осям (высота и ширина)
+
+### Flex-grow режим
+При \`grow={true}\` компонент использует \`flex-grow\` для заполнения всего доступного пространства.
+В этом режиме размеры игнорируются.
+
+### Обработка размеров
+- **Строковые значения**: применяются через Tailwind классы (\`h-*\`, \`w-*\`)
+- **Числовые значения**: применяются через inline стили (\`height: Npx\`, \`width: Npx\`)
+- **Grow режим**: применяется только \`flex-grow\` класс
+
+## Особенности
+
+### Вертикальный отступ
+\`\`\`vue
+<div>
+  <div>Content above</div>
+  <DXSpacer size="lg" />
+  <div>Content below</div>
+</div>
+\`\`\`
+
+### Горизонтальный отступ
+\`\`\`vue
+<div class="flex">
+  <div>Left content</div>
+  <DXSpacer size="md" direction="horizontal" />
+  <div>Right content</div>
+</div>
+\`\`\`
+
+### Числовые размеры
+\`\`\`vue
+<DXSpacer :size="32" direction="vertical" />
+\`\`\`
+
+### Flex-grow
+\`\`\`vue
+<div class="flex">
+  <div>Start</div>
+  <DXSpacer grow />
+  <div>End</div>
+</div>
+\`\`\`
+
+## Ограничения
+
+- Строковые размеры ограничены предопределенными значениями
+- Для кастомных размеров используйте числовые значения (px)
+- Flex-grow работает только внутри flex контейнеров
+- Компонент имеет \`aria-hidden="true"\` для скринридеров (не является семантическим элементом)
+        `,
+      },
+    },
+  },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'],
+      description: 'Размер отступа. Поддерживает строковые значения (xs, sm, md, lg, xl, 2xl) для предопределенных размеров или числовые значения (в пикселях) для кастомных размеров.',
+      table: {
+        type: { summary: 'string | number' },
+        defaultValue: { summary: '"md"' },
+        category: 'Spacing',
+      },
+    },
+    direction: {
+      control: 'select',
+      options: ['vertical', 'horizontal', 'both'],
+      description: 'Направление отступа. Vertical создает вертикальный отступ (высота), horizontal - горизонтальный (ширина), both - по обеим осям.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '"vertical"' },
+        category: 'Layout',
+      },
+    },
+    grow: {
+      control: 'boolean',
+      description: 'Использовать flex-grow для заполнения всего доступного пространства. При true размеры игнорируются, и компонент заполняет все доступное пространство в flex контейнере.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Behavior',
+      },
+    },
+  },
+};
+
+export const Vertical = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Вертикальный отступ между элементами. Это наиболее распространенный вариант использования DXSpacer. Создает пространство между элементами, расположенными друг под другом.',
+      },
+    },
+  },
+  render: () => ({
+    components: { DXSpacer },
+    template: `
+      <div>
+        <div class="bg-slate-100 p-4 rounded">Above</div>
+        <DXSpacer size="lg" />
+        <div class="bg-slate-100 p-4 rounded">Below</div>
+      </div>
+    `,
+  }),
+};
+
+export const Horizontal = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Горизонтальный отступ между элементами. Используется внутри flex контейнеров для создания пространства между элементами, расположенными в ряд. Требует flex контейнер для корректной работы.',
+      },
+    },
+  },
+  render: () => ({
+    components: { DXSpacer },
+    template: `
+      <div class="flex">
+        <div class="bg-slate-100 p-4 rounded">Left</div>
+        <DXSpacer size="lg" direction="horizontal" />
+        <div class="bg-slate-100 p-4 rounded">Right</div>
+      </div>
+    `,
+  }),
+};
+
+export const FlexGrow = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'DXSpacer с flex-grow режимом. Заполняет все доступное пространство между элементами в flex контейнере. Полезен для создания макетов, где элементы должны быть по краям, а пространство между ними заполняется автоматически. В этом режиме размеры игнорируются.',
+      },
+    },
+  },
+  render: () => ({
+    components: { DXSpacer },
+    template: `
+      <div class="flex">
+        <div class="bg-slate-100 p-4 rounded">Start</div>
+        <DXSpacer grow />
+        <div class="bg-slate-100 p-4 rounded">End</div>
+      </div>
+    `,
+  }),
+};
+

package/src/components/layout/DXSpacer/DXSpacer.vue

@@ -0,0 +1,102 @@
+<template>
+  <div :class="spacerClasses" :style="spacerStyle" data-component="DXSpacer" aria-hidden="true" />
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useClassComposition } from "@/composables/useClassComposition";
+
+const props = defineProps({
+  /** Размер: xs | sm | md | lg | xl или число в пикселях */
+  size: { type: [String, Number], default: "md" },
+  /** Направление: vertical | horizontal | both */
+  direction: { type: String, default: "vertical" },
+  /** Занять всё доступное пространство (flex-grow) */
+  grow: { type: Boolean, default: false },
+});
+
+/**
+ * Классы размера для строковых значений
+ * 
+ * @description
+ * Определяет классы размера для предопределенных строковых значений.
+ * Используется только для строковых значений, числовые значения обрабатываются через inline стили.
+ * 
+ * @returns {Object} Объект с классами для вертикального и горизонтального направления
+ */
+const sizeClasses = {
+  xs: { v: "h-1", h: "w-1" },
+  sm: { v: "h-2", h: "w-2" },
+  md: { v: "h-4", h: "w-4" },
+  lg: { v: "h-8", h: "w-8" },
+  xl: { v: "h-12", h: "w-12" },
+};
+
+/**
+ * Классы размера spacer
+ * 
+ * @description
+ * Вычисляет классы размера на основе props.size и props.direction.
+ * Если grow=true, возвращает flex-grow класс.
+ * Для строковых значений использует предопределенные классы.
+ * Для числовых значений возвращает пустой массив (размер задается через inline стили).
+ * 
+ * @returns {Array|string} Массив классов или строка для применения к элементу
+ */
+const spacerClasses = computed(() => {
+  // Если grow, используем flex-grow
+  if (props.grow) {
+    return useClassComposition("flex-grow");
+  }
+  
+  // Для числовых значений классы не нужны, размер задается через inline стили
+  if (typeof props.size === "number") {
+    return useClassComposition();
+  }
+  
+  // Для строковых значений используем предопределенные классы
+  const sizes = sizeClasses[props.size];
+  if (sizes) {
+    if (props.direction === "horizontal") {
+      return useClassComposition(sizes.h);
+    }
+    if (props.direction === "both") {
+      return useClassComposition(sizes.v, sizes.h);
+    }
+    return useClassComposition(sizes.v);
+  }
+  
+  return useClassComposition();
+});
+
+/**
+ * Inline стили для spacer
+ * 
+ * @description
+ * Вычисляет inline стили для числовых значений размера.
+ * Если grow=true, стили не нужны.
+ * Для строковых значений стили не нужны (используются классы).
+ * 
+ * @returns {Object} Объект со стилями или пустой объект
+ */
+const spacerStyle = computed(() => {
+  // Если grow, стили не нужны
+  if (props.grow) return {};
+  
+  // Для числовых значений задаем размер через inline стили
+  if (typeof props.size === "number") {
+    const px = `${props.size}px`;
+    if (props.direction === "horizontal") {
+      return { width: px };
+    }
+    if (props.direction === "both") {
+      return { height: px, width: px };
+    }
+    return { height: px };
+  }
+  
+  // Для строковых значений стили не нужны
+  return {};
+});
+</script>
+

package/src/components/layout/DXSpacer/index.js

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

package/src/components/layout/DXStack/DXStack.stories.js

@@ -0,0 +1,199 @@
+import DXStack from './DXStack.vue';
+
+export default {
+  title: 'Layout/DXStack',
+  component: DXStack,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXStack
+
+Вертикальный или горизонтальный стек элементов с единообразными отступами и поддержкой разделителей.
+
+## Назначение
+
+DXStack - упрощенный layout компонент для создания стеков элементов (вертикальных или горизонтальных).
+Предоставляет более простой API по сравнению с DXFlex, фокусируясь на типичных случаях использования стеков.
+
+## Архитектура
+
+### Использует
+- \`useSize\` composable - для унификации отступов между элементами (gap)
+- \`useClassComposition\` composable - для объединения классов
+
+### Используется в
+- Списки элементов и карточек
+- Формы и группы полей
+- Навигационные меню
+- Комментарии и отзывы
+- Любые места, где требуется стек элементов с единообразными отступами
+
+## Внутренняя логика
+
+### Упрощенное направление
+В отличие от DXFlex, использует упрощенные значения:
+- \`vertical\` → \`flex-col\` (вертикальный стек)
+- \`horizontal\` → \`flex-row\` (горизонтальный стек)
+
+### Расширенный gap
+Использует \`useSize\` с типом \`spacing\` для стандартных значений gap (none, xs, sm, md, lg, xl).
+Поддерживает дополнительное значение \`2xl\` для больших отступов (gap-12),
+которое обрабатывается специально, так как не входит в стандартную размерную сетку.
+
+### Разделители (dividers)
+Автоматически добавляет разделители между элементами:
+- Для \`vertical\` → горизонтальные разделители (\`divide-y\`)
+- Для \`horizontal\` → вертикальные разделители (\`divide-x\`)
+
+### Упрощенное выравнивание
+Предоставляет только основные варианты выравнивания:
+- \`start\`, \`center\`, \`end\`, \`stretch\`
+
+## Особенности
+
+### Вертикальный стек
+\`\`\`vue
+<DXStack direction="vertical" gap="md">
+  <div>Item 1</div>
+  <div>Item 2</div>
+</DXStack>
+\`\`\`
+
+### Горизонтальный стек
+\`\`\`vue
+<DXStack direction="horizontal" gap="lg" align="center">
+  <div>Item 1</div>
+  <div>Item 2</div>
+</DXStack>
+\`\`\`
+
+### С разделителями
+\`\`\`vue
+<DXStack direction="vertical" gap="md" dividers>
+  <div>Item 1</div>
+  <div>Item 2</div>
+</DXStack>
+\`\`\`
+
+## Отличия от DXFlex
+
+- **Упрощенный API**: меньше props, более понятные значения
+- **Семантические названия**: \`vertical\`/\`horizontal\` вместо \`col\`/\`row\`
+- **Расширенный gap**: поддержка \`2xl\`
+- **Встроенные разделители**: опция \`dividers\` для автоматических разделителей
+- **Меньше опций**: фокус на типичных случаях использования
+
+## Ограничения
+
+- Не поддерживает \`row-reverse\` и \`col-reverse\` (используйте DXFlex)
+- Ограниченный набор вариантов justify (используйте DXFlex для полного контроля)
+- Для сложных flex макетов используйте DXFlex
+        `,
+      },
+    },
+  },
+  argTypes: {
+    direction: {
+      control: 'select',
+      options: ['vertical', 'horizontal'],
+      description: 'Направление стека элементов. Vertical располагает элементы вертикально (друг под другом), horizontal - горизонтально (в ряд).',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '"vertical"' },
+        category: 'Layout',
+      },
+    },
+    gap: {
+      control: 'select',
+      options: ['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'],
+      description: 'Отступ между элементами стека. Поддерживает расширенное значение 2xl для больших отступов, которое не доступно в стандартном useSpacing.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '"md"' },
+        category: 'Spacing',
+      },
+    },
+    align: {
+      control: 'select',
+      options: ['start', 'center', 'end', 'stretch'],
+      description: 'Выравнивание элементов по поперечной оси. Определяет, как элементы выравниваются перпендикулярно направлению стека.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '"stretch"' },
+        category: 'Alignment',
+      },
+    },
+    justify: {
+      control: 'select',
+      options: ['start', 'center', 'end', 'between', 'around'],
+      description: 'Распределение элементов по главной оси. Управляет распределением пространства между элементами вдоль направления стека.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '"start"' },
+        category: 'Alignment',
+      },
+    },
+    dividers: {
+      control: 'boolean',
+      description: 'Добавлять разделители между элементами. Для vertical стека добавляет горизонтальные разделители, для horizontal - вертикальные.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Behavior',
+      },
+    },
+  },
+};
+
+const item = '<div class="bg-slate-100 p-4 rounded-lg">Stack Item</div>';
+
+export const Vertical = {
+  args: { direction: 'vertical', gap: 'md' },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Вертикальный стек элементов. Это наиболее распространенный вариант использования DXStack. Элементы располагаются друг под другом с единообразными отступами.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXStack },
+    setup() { return { args }; },
+    template: `<DXStack v-bind="args">${item.repeat(4)}</DXStack>`,
+  }),
+};
+
+export const Horizontal = {
+  args: { direction: 'horizontal', gap: 'md' },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Горизонтальный стек элементов. Элементы располагаются в ряд (слева направо) с единообразными отступами между ними. Полезен для создания горизонтальных списков и групп элементов.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXStack },
+    setup() { return { args }; },
+    template: `<DXStack v-bind="args">${item.repeat(4)}</DXStack>`,
+  }),
+};
+
+export const WithDividers = {
+  args: { direction: 'vertical', gap: 'md', dividers: true },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Стек с разделителями между элементами. Автоматически добавляет визуальные разделители (горизонтальные для vertical стека, вертикальные для horizontal). Используется для четкого визуального разделения элементов.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXStack },
+    setup() { return { args }; },
+    template: `<DXStack v-bind="args">${item.repeat(3)}</DXStack>`,
+  }),
+};
+

package/src/components/layout/DXStack/DXStack.vue

@@ -0,0 +1,140 @@
+<template>
+  <div 
+    :class="stackClasses" 
+    data-component="DXStack" 
+    :data-direction="direction"
+    :data-gap="gap"
+    :data-align="align"
+    :data-justify="justify"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useSize } from "@/composables/useSize";
+import { useClassComposition } from "@/composables/useClassComposition";
+
+const props = defineProps({
+  /** Направление: vertical | horizontal */
+  direction: { type: String, default: "vertical" },
+  /** Отступ между элементами: none | xs | sm | md | lg | xl | 2xl */
+  gap: { type: String, default: "md" },
+  /** Выравнивание: start | center | end | stretch */
+  align: { type: String, default: "stretch" },
+  /** Распределение: start | center | end | between | around */
+  justify: { type: String, default: "start" },
+  /** Разделители между элементами */
+  dividers: { type: Boolean, default: false },
+});
+
+const BASE_CLASSES = "flex";
+
+/**
+ * Класс направления stack
+ * 
+ * @description
+ * Определяет направление элементов в stack (вертикальное или горизонтальное).
+ * 
+ * @returns {string} Tailwind CSS класс для направления flex
+ */
+const directionClass = computed(() => {
+  return props.direction === "horizontal" ? "flex-row" : "flex-col";
+});
+
+/**
+ * Классы отступа между элементами
+ * 
+ * @description
+ * Использует useSize composable для вычисления gap между элементами stack.
+ * Поддерживает расширенные значения включая 2xl (специальная обработка).
+ * 
+ * @returns {string} Tailwind CSS класс для gap
+ */
+const gapClass = computed(() => {
+  // Для 2xl используем специальную обработку, так как useSize не поддерживает это значение в размерной сетке
+  if (props.gap === "2xl") {
+    return "gap-12";
+  }
+  
+  // Используем useSize для стандартных значений (none, xs, sm, md, lg, xl)
+  return useSize(props.gap, 'spacing') || 'gap-4';
+});
+
+/**
+ * Классы выравнивания элементов
+ * 
+ * @description
+ * Определяет выравнивание элементов по поперечной оси (align-items).
+ * 
+ * @returns {string} Tailwind CSS класс для align-items
+ */
+const alignClass = computed(() => {
+  const alignClasses = {
+    start: "items-start",
+    center: "items-center",
+    end: "items-end",
+    stretch: "items-stretch",
+  };
+  return alignClasses[props.align] || alignClasses.stretch;
+});
+
+/**
+ * Классы распределения элементов
+ * 
+ * @description
+ * Определяет распределение элементов по главной оси (justify-content).
+ * 
+ * @returns {string} Tailwind CSS класс для justify-content
+ */
+const justifyClass = computed(() => {
+  const justifyClasses = {
+    start: "justify-start",
+    center: "justify-center",
+    end: "justify-end",
+    between: "justify-between",
+    around: "justify-around",
+  };
+  return justifyClasses[props.justify] || justifyClasses.start;
+});
+
+/**
+ * Классы разделителей
+ * 
+ * @description
+ * Определяет, будут ли добавлены разделители между элементами.
+ * Разделители зависят от направления: горизонтальные для vertical stack,
+ * вертикальные для horizontal stack.
+ * 
+ * @returns {string|null} Tailwind CSS классы для разделителей или null
+ */
+const dividersClass = computed(() => {
+  if (!props.dividers) return null;
+  
+  return props.direction === "horizontal"
+    ? "divide-x divide-slate-200"
+    : "divide-y divide-slate-200";
+});
+
+/**
+ * Все классы для stack компонента
+ * 
+ * @description
+ * Объединяет все классы stack контейнера (базовый класс, направление,
+ * отступы, выравнивание, распределение, разделители) с использованием useClassComposition.
+ * 
+ * @returns {Array} Массив классов для применения к элементу
+ */
+const stackClasses = computed(() =>
+  useClassComposition(
+    BASE_CLASSES,
+    directionClass.value,
+    gapClass.value,
+    alignClass.value,
+    justifyClass.value,
+    dividersClass.value
+  )
+);
+</script>
+

package/src/components/layout/DXStack/index.js

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

package/src/components/layout/index.js

@@ -0,0 +1,8 @@
+// Layout components
+export { default as DXContainer } from './DXContainer';
+export { default as DXGrid } from './DXGrid';
+export { default as DXFlex } from './DXFlex';
+export { default as DXStack } from './DXStack';
+export { default as DXSpacer } from './DXSpacer';
+export { default as DXBox } from './DXBox';
+