dxd-style-code 0.1.7 → 0.1.9

package/src/components/layout/DXBox/DXBox.vue

@@ -0,0 +1,198 @@
+<template>
+  <component :is="tag" :class="boxClasses" data-component="DXBox">
+    <slot />
+  </component>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useSpacing } from "@/composables/useSpacing";
+import { useClassComposition } from "@/composables/useClassComposition";
+
+const props = defineProps({
+  /** HTML тег */
+  tag: { type: String, default: "div" },
+  /** Padding: none | xs | sm | md | lg | xl */
+  p: { type: String, default: "" },
+  /** Padding X (horizontal) */
+  px: { type: String, default: "" },
+  /** Padding Y (vertical) */
+  py: { type: String, default: "" },
+  /** Margin: none | xs | sm | md | lg | xl | auto */
+  m: { type: String, default: "" },
+  /** Margin X (horizontal) */
+  mx: { type: String, default: "" },
+  /** Margin Y (vertical) */
+  my: { type: String, default: "" },
+  /** Скругление: none | sm | md | lg | xl | 2xl | full */
+  rounded: { type: String, default: "" },
+  /** Фон: white | slate | transparent */
+  bg: { type: String, default: "" },
+  /** Тень: none | sm | md | lg | xl */
+  shadow: { type: String, default: "" },
+  /** Рамка */
+  border: { type: Boolean, default: false },
+});
+
+/**
+ * Классы padding
+ * 
+ * @description
+ * Вычисляет классы для padding используя useSpacing composable.
+ * Поддерживает общий padding (p), горизонтальный (px) и вертикальный (py).
+ * 
+ * @returns {string|Object} Классы padding или объект для условных классов
+ */
+const paddingClasses = computed(() => {
+  const classes = {};
+  
+  if (props.p) {
+    const paddingClass = useSpacing(props.p, 'padding');
+    if (paddingClass) classes[paddingClass] = true;
+  }
+  
+  if (props.px) {
+    const paddingXClass = useSpacing(props.px, 'paddingX');
+    if (paddingXClass) classes[paddingXClass] = true;
+  }
+  
+  if (props.py) {
+    const paddingYClass = useSpacing(props.py, 'paddingY');
+    if (paddingYClass) classes[paddingYClass] = true;
+  }
+  
+  return Object.keys(classes).length > 0 ? classes : null;
+});
+
+/**
+ * Классы margin
+ * 
+ * @description
+ * Вычисляет классы для margin используя useSpacing composable.
+ * Поддерживает общий margin (m), горизонтальный (mx) и вертикальный (my).
+ * Для значения "auto" используется специальная обработка.
+ * 
+ * @returns {string|Object} Классы margin или объект для условных классов
+ */
+const marginClasses = computed(() => {
+  const classes = {};
+  
+  if (props.m) {
+    if (props.m === "auto") {
+      classes["m-auto"] = true;
+    } else {
+      const marginClass = useSpacing(props.m, 'margin');
+      if (marginClass) classes[marginClass] = true;
+    }
+  }
+  
+  if (props.mx) {
+    if (props.mx === "auto") {
+      classes["mx-auto"] = true;
+    } else {
+      const marginXClass = useSpacing(props.mx, 'marginX');
+      if (marginXClass) classes[marginXClass] = true;
+    }
+  }
+  
+  if (props.my) {
+    if (props.my === "auto") {
+      classes["my-auto"] = true;
+    } else {
+      const marginYClass = useSpacing(props.my, 'marginY');
+      if (marginYClass) classes[marginYClass] = true;
+    }
+  }
+  
+  return Object.keys(classes).length > 0 ? classes : null;
+});
+
+/**
+ * Классы скругления углов
+ * 
+ * @description
+ * Определяет классы для border-radius в зависимости от значения rounded prop.
+ * 
+ * @returns {string|null} Tailwind CSS класс для скругления или null
+ */
+const roundedClass = computed(() => {
+  if (!props.rounded) return null;
+  
+  const roundedClasses = {
+    none: "rounded-none",
+    sm: "rounded-sm",
+    md: "rounded-md",
+    lg: "rounded-lg",
+    xl: "rounded-xl",
+    "2xl": "rounded-2xl",
+    full: "rounded-full",
+  };
+  
+  return roundedClasses[props.rounded] || `rounded-${props.rounded}`;
+});
+
+/**
+ * Классы фона
+ * 
+ * @description
+ * Определяет классы для background-color в зависимости от значения bg prop.
+ * 
+ * @returns {string|null} Tailwind CSS класс для фона или null
+ */
+const bgClass = computed(() => {
+  if (!props.bg) return null;
+  
+  const bgClasses = {
+    white: "bg-white",
+    slate: "bg-slate-50",
+    transparent: "bg-transparent",
+  };
+  
+  return bgClasses[props.bg] || props.bg;
+});
+
+/**
+ * Классы тени
+ * 
+ * @description
+ * Определяет классы для box-shadow в зависимости от значения shadow prop.
+ * 
+ * @returns {string|null} Tailwind CSS класс для тени или null
+ */
+const shadowClass = computed(() => {
+  if (!props.shadow) return null;
+  
+  const shadowClasses = {
+    none: "shadow-none",
+    sm: "shadow-sm",
+    md: "shadow",
+    lg: "shadow-lg",
+    xl: "shadow-xl",
+  };
+  
+  return shadowClasses[props.shadow] || `shadow-${props.shadow}`;
+});
+
+/**
+ * Все классы для box компонента
+ * 
+ * @description
+ * Объединяет все классы стилизации (padding, margin, rounded, bg, shadow, border)
+ * с использованием useClassComposition для единообразного подхода.
+ * 
+ * @returns {Array} Массив классов для применения к элементу
+ */
+const boxClasses = computed(() =>
+  useClassComposition(
+    paddingClasses.value,
+    marginClasses.value,
+    roundedClass.value,
+    bgClass.value,
+    shadowClass.value,
+    {
+      "border border-slate-200": props.border,
+    }
+  )
+);
+</script>
+

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

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

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

@@ -0,0 +1,147 @@
+import DXContainer from './DXContainer.vue';
+
+export default {
+  title: 'Layout/DXContainer',
+  component: DXContainer,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXContainer
+
+Контейнер с ограниченной шириной для центрирования контента на странице.
+
+## Назначение
+
+DXContainer - layout компонент для создания контейнеров с ограниченной максимальной шириной.
+Автоматически центрирует контент на больших экранах, обеспечивая оптимальную читаемость и структуру страницы.
+
+## Архитектура
+
+### Использует
+- \`useSpacing\` composable - для унификации горизонтальных отступов (padding-x)
+- \`useClassComposition\` composable - для объединения классов
+
+### Используется в
+- Основные layout страниц и разделов
+- \`DXAppLayout\` - для контентной области
+- Блоги и статьи
+- Формы и модальные окна
+- Любые места, где требуется ограничение ширины контента
+
+## Внутренняя логика
+
+### Адаптивные размеры
+Компонент использует Tailwind классы \`max-w-screen-*\` для ограничения ширины:
+- \`sm\` → \`max-w-screen-sm\` (640px)
+- \`md\` → \`max-w-screen-md\` (768px)
+- \`lg\` → \`max-w-screen-lg\` (1024px)
+- \`xl\` → \`max-w-screen-xl\` (1280px)
+- \`2xl\` → \`max-w-screen-2xl\` (1536px)
+- \`full\` → \`max-w-full\` (100%)
+
+### Автоматическое центрирование
+По умолчанию контейнер центрируется через \`mx-auto\` (margin: 0 auto).
+Это можно отключить через prop \`center={false}\`.
+
+### Горизонтальные отступы
+Компонент применяет горизонтальные отступы (padding-x) для создания пространства
+от краев экрана на мобильных устройствах. Использует систему spacing из \`useSpacing\`.
+
+## Особенности
+
+### Адаптивная ширина
+\`\`\`vue
+<DXContainer size="lg">Content</DXContainer>
+\`\`\`
+
+### Без центрирования
+\`\`\`vue
+<DXContainer size="xl" :center="false">Left-aligned</DXContainer>
+\`\`\`
+
+### Кастомные отступы
+\`\`\`vue
+<DXContainer size="lg" padding="lg">Content with large padding</DXContainer>
+\`\`\`
+
+## Ограничения
+
+- Размеры привязаны к Tailwind breakpoints
+- Вертикальные отступы не управляются компонентом (используйте DXBox или CSS)
+- Для кастомной максимальной ширины используйте CSS классы через \`class\` prop
+        `,
+      },
+    },
+  },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg', 'xl', '2xl', 'full'],
+      description: 'Максимальная ширина контейнера. Определяет максимальную ширину контента на больших экранах. Использует Tailwind классы max-w-screen-*.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '"lg"' },
+        category: 'Layout',
+      },
+    },
+    center: {
+      control: 'boolean',
+      description: 'Автоматически центрировать контейнер. При true применяет mx-auto для горизонтального центрирования.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+        category: 'Behavior',
+      },
+    },
+    padding: {
+      control: 'select',
+      options: ['none', 'xs', 'sm', 'md', 'lg', 'xl'],
+      description: 'Горизонтальные отступы (padding-x) контейнера. Создает пространство от краев экрана на мобильных устройствах. Использует систему spacing из useSpacing.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '"md"' },
+        category: 'Spacing',
+      },
+    },
+  },
+};
+
+export const Default = {
+  args: { size: 'lg' },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Базовый контейнер с размером lg. Автоматически центрируется и ограничивает ширину контента для оптимальной читаемости.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXContainer },
+    setup() { return { args }; },
+    template: '<DXContainer v-bind="args" class="bg-slate-100 py-8"><div class="bg-white p-4 rounded">Content inside container</div></DXContainer>',
+  }),
+};
+
+export const Sizes = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Все доступные размеры контейнера. Размер определяет максимальную ширину контента на больших экранах. На мобильных устройствах контейнер занимает всю ширину с учетом padding.',
+      },
+    },
+  },
+  render: () => ({
+    components: { DXContainer },
+    template: `
+      <div class="space-y-4">
+        <DXContainer size="sm" class="bg-blue-100 py-4"><div class="bg-white p-2 rounded">Small</div></DXContainer>
+        <DXContainer size="md" class="bg-green-100 py-4"><div class="bg-white p-2 rounded">Medium</div></DXContainer>
+        <DXContainer size="lg" class="bg-yellow-100 py-4"><div class="bg-white p-2 rounded">Large</div></DXContainer>
+        <DXContainer size="xl" class="bg-red-100 py-4"><div class="bg-white p-2 rounded">Extra Large</div></DXContainer>
+      </div>
+    `,
+  }),
+};
+

package/src/components/layout/DXContainer/DXContainer.vue

@@ -0,0 +1,83 @@
+<template>
+  <div 
+    :class="containerClasses" 
+    data-component="DXContainer" 
+    :data-size="size"
+    :data-padding="padding"
+    :data-center="center"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useSpacing } from "@/composables/useSpacing";
+import { useClassComposition } from "@/composables/useClassComposition";
+
+const props = defineProps({
+  /** Максимальная ширина: sm | md | lg | xl | 2xl | full */
+  size: { type: String, default: "lg" },
+  /** Центрировать контейнер */
+  center: { type: Boolean, default: true },
+  /** Горизонтальные отступы: none | xs | sm | md | lg | xl */
+  padding: { type: String, default: "md" },
+});
+
+const BASE_CLASSES = "w-full";
+
+/**
+ * Классы максимальной ширины контейнера
+ * 
+ * @description
+ * Определяет максимальную ширину контейнера в зависимости от размера экрана.
+ * Используется для ограничения ширины контента на больших экранах.
+ * 
+ * @returns {string} Tailwind CSS класс для максимальной ширины
+ */
+const sizeClass = computed(() => {
+  const sizeClasses = {
+    sm: "max-w-screen-sm",
+    md: "max-w-screen-md",
+    lg: "max-w-screen-lg",
+    xl: "max-w-screen-xl",
+    "2xl": "max-w-screen-2xl",
+    full: "max-w-full",
+  };
+  return sizeClasses[props.size] || sizeClasses.lg;
+});
+
+/**
+ * Классы горизонтальных отступов
+ * 
+ * @description
+ * Использует useSpacing composable для унификации отступов.
+ * Применяет горизонтальные отступы (padding-x) к контейнеру.
+ * 
+ * @returns {string} Tailwind CSS класс для горизонтальных отступов
+ */
+const paddingClass = computed(() => {
+  return useSpacing(props.padding, 'paddingX');
+});
+
+/**
+ * Все классы для контейнера
+ * 
+ * @description
+ * Объединяет базовые классы, размер, отступы и центрирование
+ * с использованием useClassComposition для единообразного подхода.
+ * 
+ * @returns {Array} Массив классов для применения к элементу
+ */
+const containerClasses = computed(() =>
+  useClassComposition(
+    BASE_CLASSES,
+    sizeClass.value,
+    paddingClass.value,
+    {
+      "mx-auto": props.center,
+    }
+  )
+);
+</script>
+

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

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

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

@@ -0,0 +1,210 @@
+import DXFlex from './DXFlex.vue';
+
+export default {
+  title: 'Layout/DXFlex',
+  component: DXFlex,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXFlex
+
+Flexbox контейнер с полным контролем над направлением, выравниванием и отступами.
+
+## Назначение
+
+DXFlex - мощный layout компонент для создания гибких макетов с использованием CSS Flexbox.
+Предоставляет полный контроль над всеми аспектами flex контейнера: направлением, выравниванием, переносом и отступами.
+
+## Архитектура
+
+### Использует
+- \`useSize\` composable - для унификации отступов между элементами (gap)
+- \`useClassComposition\` composable - для объединения классов
+
+### Используется в
+- Навигационные панели и меню
+- Карточки и списки элементов
+- Формы и группы полей
+- Заголовки и футеры
+- Любые места, требующие гибкого расположения элементов
+
+## Внутренняя логика
+
+### Направление (direction)
+Определяет главную ось flex контейнера:
+- \`row\` - горизонтально (слева направо)
+- \`row-reverse\` - горизонтально (справа налево)
+- \`col\` - вертикально (сверху вниз)
+- \`col-reverse\` - вертикально (снизу вверх)
+
+### Выравнивание по главной оси (justify)
+Управляет распределением элементов по главной оси:
+- \`start\`, \`center\`, \`end\` - выравнивание
+- \`between\` - пространство между элементами
+- \`around\` - пространство вокруг элементов
+- \`evenly\` - равномерное распределение
+
+### Выравнивание по поперечной оси (align)
+Управляет выравниванием элементов по поперечной оси:
+- \`start\`, \`center\`, \`end\` - выравнивание
+- \`stretch\` - растягивание на всю высоту/ширину
+- \`baseline\` - выравнивание по базовой линии текста
+
+### Gap система
+Использует \`useSize\` с типом \`spacing\` для вычисления gap между элементами.
+Это обеспечивает единообразный подход к размерам gap во всех layout компонентах.
+
+## Особенности
+
+### Inline flex
+\`\`\`vue
+<DXFlex inline justify="center" align="center">
+  Inline flex container
+</DXFlex>
+\`\`\`
+
+### Полный контроль над flex
+\`\`\`vue
+<DXFlex 
+  direction="row" 
+  justify="between" 
+  align="center" 
+  wrap="wrap" 
+  gap="lg"
+>
+  Flexible content
+</DXFlex>
+\`\`\`
+
+### Вертикальный layout
+\`\`\`vue
+<DXFlex direction="col" gap="md" align="stretch">
+  <div>Item 1</div>
+  <div>Item 2</div>
+</DXFlex>
+\`\`\`
+
+## Ограничения
+
+- Gap использует предопределенные значения из \`useSpacing\` (none, xs, sm, md, lg, xl)
+- Для кастомных gap значений используйте CSS классы через \`class\` prop
+- Для упрощенного API используйте \`DXStack\` компонент
+        `,
+      },
+    },
+  },
+  argTypes: {
+    direction: {
+      control: 'select',
+      options: ['row', 'row-reverse', 'col', 'col-reverse'],
+      description: 'Направление главной оси flex контейнера. Определяет, как элементы располагаются: горизонтально (row) или вертикально (col).',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '"row"' },
+        category: 'Layout',
+      },
+    },
+    justify: {
+      control: 'select',
+      options: ['start', 'center', 'end', 'between', 'around', 'evenly'],
+      description: 'Выравнивание элементов по главной оси (justify-content). Управляет распределением пространства между элементами.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '"start"' },
+        category: 'Alignment',
+      },
+    },
+    align: {
+      control: 'select',
+      options: ['start', 'center', 'end', 'stretch', 'baseline'],
+      description: 'Выравнивание элементов по поперечной оси (align-items). Определяет, как элементы выравниваются перпендикулярно главной оси.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '"center"' },
+        category: 'Alignment',
+      },
+    },
+    wrap: {
+      control: 'select',
+      options: ['nowrap', 'wrap', 'wrap-reverse'],
+      description: 'Перенос элементов на новую строку (flex-wrap). Определяет, будут ли элементы переноситься, если не помещаются в одну строку.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '"nowrap"' },
+        category: 'Behavior',
+      },
+    },
+    gap: {
+      control: 'select',
+      options: ['none', 'xs', 'sm', 'md', 'lg', 'xl'],
+      description: 'Отступ между элементами (gap). Использует систему spacing из useSpacing для унификации отступов.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '"md"' },
+        category: 'Spacing',
+      },
+    },
+    inline: {
+      control: 'boolean',
+      description: 'Использовать inline-flex вместо flex. Делает контейнер inline элементом, позволяя ему располагаться в строке с другими элементами.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Behavior',
+      },
+    },
+  },
+};
+
+const box = '<div class="w-16 h-16 bg-slate-200 rounded-lg flex items-center justify-center">Box</div>';
+
+export const Default = {
+  args: { justify: 'start', gap: 'md' },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Базовый flex контейнер с горизонтальным направлением (row), выравниванием по началу и средним отступом между элементами. Это стандартная конфигурация для большинства случаев.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXFlex },
+    setup() { return { args }; },
+    template: `<DXFlex v-bind="args">${box.repeat(4)}</DXFlex>`,
+  }),
+};
+
+export const JustifyBetween = {
+  args: { justify: 'between', gap: 'md' },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Flex контейнер с justify="between". Распределяет элементы с максимальным пространством между ними. Часто используется для навигационных панелей, где элементы должны быть по краям.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXFlex },
+    setup() { return { args }; },
+    template: `<DXFlex v-bind="args">${box.repeat(3)}</DXFlex>`,
+  }),
+};
+
+export const Column = {
+  args: { direction: 'col', gap: 'sm' },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Вертикальный flex контейнер (direction="col"). Элементы располагаются друг под другом. Используется для создания вертикальных списков, форм и стеков элементов.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXFlex },
+    setup() { return { args }; },
+    template: `<DXFlex v-bind="args">${box.repeat(3)}</DXFlex>`,
+  }),
+};
+