dxd-style-code 0.1.7 → 0.1.9

package/src/components/layout/DXFlex/DXFlex.vue

@@ -0,0 +1,149 @@
+<template>
+  <div :class="flexClasses" data-component="DXFlex">
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useSize } from "@/composables/useSize";
+import { useClassComposition } from "@/composables/useClassComposition";
+
+const props = defineProps({
+  /** Направление: row | row-reverse | col | col-reverse */
+  direction: { type: String, default: "row" },
+  /** Выравнивание по главной оси: start | center | end | between | around | evenly */
+  justify: { type: String, default: "start" },
+  /** Выравнивание по поперечной оси: start | center | end | stretch | baseline */
+  align: { type: String, default: "center" },
+  /** Перенос: nowrap | wrap | wrap-reverse */
+  wrap: { type: String, default: "nowrap" },
+  /** Отступ между элементами: none | xs | sm | md | lg | xl */
+  gap: { type: String, default: "md" },
+  /** Inline flex */
+  inline: { type: Boolean, default: false },
+});
+
+const BASE_CLASSES = "";
+
+/**
+ * Базовый класс flex (inline-flex или flex)
+ * 
+ * @description
+ * Определяет, будет ли flex контейнер inline или block элементом.
+ * 
+ * @returns {string} Tailwind CSS класс для flex контейнера
+ */
+const flexBaseClass = computed(() => {
+  return props.inline ? "inline-flex" : "flex";
+});
+
+/**
+ * Классы направления flex
+ * 
+ * @description
+ * Определяет направление главной оси flex контейнера.
+ * 
+ * @returns {string} Tailwind CSS класс для направления
+ */
+const directionClass = computed(() => {
+  const directionClasses = {
+    row: "flex-row",
+    "row-reverse": "flex-row-reverse",
+    col: "flex-col",
+    "col-reverse": "flex-col-reverse",
+  };
+  return directionClasses[props.direction] || directionClasses.row;
+});
+
+/**
+ * Классы выравнивания по главной оси
+ * 
+ * @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",
+    evenly: "justify-evenly",
+  };
+  return justifyClasses[props.justify] || justifyClasses.start;
+});
+
+/**
+ * Классы выравнивания по поперечной оси
+ * 
+ * @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",
+    baseline: "items-baseline",
+  };
+  return alignClasses[props.align] || alignClasses.center;
+});
+
+/**
+ * Классы переноса элементов
+ * 
+ * @description
+ * Определяет, будут ли элементы переноситься на новую строку (flex-wrap).
+ * 
+ * @returns {string} Tailwind CSS класс для flex-wrap
+ */
+const wrapClass = computed(() => {
+  const wrapClasses = {
+    nowrap: "flex-nowrap",
+    wrap: "flex-wrap",
+    "wrap-reverse": "flex-wrap-reverse",
+  };
+  return wrapClasses[props.wrap] || wrapClasses.nowrap;
+});
+
+/**
+ * Классы отступа между элементами
+ * 
+ * @description
+ * Использует useSize composable для вычисления gap между элементами.
+ * Gap в flex контейнере работает как spacing между элементами.
+ * 
+ * @returns {string} Tailwind CSS класс для gap
+ */
+const gapClass = computed(() => {
+  return useSize(props.gap, 'spacing') || 'gap-4';
+});
+
+/**
+ * Все классы для flex компонента
+ * 
+ * @description
+ * Объединяет все классы flex контейнера (базовый класс, направление,
+ * выравнивание, перенос, отступы) с использованием useClassComposition.
+ * 
+ * @returns {Array} Массив классов для применения к элементу
+ */
+const flexClasses = computed(() =>
+  useClassComposition(
+    BASE_CLASSES,
+    flexBaseClass.value,
+    directionClass.value,
+    justifyClass.value,
+    alignClass.value,
+    wrapClass.value,
+    gapClass.value
+  )
+);
+</script>
+

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

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

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

@@ -0,0 +1,238 @@
+import DXGrid from './DXGrid.vue';
+
+export default {
+  title: 'Layout/DXGrid',
+  component: DXGrid,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXGrid
+
+CSS Grid контейнер с адаптивными колонками и гибкой системой отступов.
+
+## Назначение
+
+DXGrid - layout компонент для создания grid макетов с использованием CSS Grid.
+Предоставляет простой API для управления количеством колонок, адаптивностью и отступами между элементами.
+
+## Архитектура
+
+### Использует
+- \`useSize\` composable - для унификации общего gap между элементами
+- \`useSpacing\` composable - для унификации раздельных gapX и gapY
+- \`useClassComposition\` composable - для объединения классов
+
+### Используется в
+- Галереи изображений
+- Карточки товаров и продуктов
+- Сетки контента
+- Адаптивные макеты страниц
+- Любые места, требующие grid структуры
+
+## Внутренняя логика
+
+### Система колонок
+Поддерживает фиксированное количество колонок от 1 до 12:
+- \`cols={1}\` → \`grid-cols-1\`
+- \`cols={12}\` → \`grid-cols-12\`
+- \`cols="auto"\` → автоматический размер с минимальной шириной 250px
+
+### Адаптивные колонки
+Поддерживает адаптивные колонки для различных breakpoints:
+- \`colsSm\` - количество колонок на sm экранах (≥640px)
+- \`colsMd\` - количество колонок на md экранах (≥768px)
+- \`colsLg\` - количество колонок на lg экранах (≥1024px)
+
+### Система gap
+Поддерживает три варианта отступов:
+- \`gap\` - общий отступ для всех направлений (использует \`useSize\` с типом \`spacing\`)
+- \`gapX\` - горизонтальный отступ (между колонками, использует \`useSpacing\`)
+- \`gapY\` - вертикальный отступ (между рядами, использует \`useSpacing\`)
+
+Если указаны \`gapX\` или \`gapY\`, они имеют приоритет над общим \`gap\`.
+Для общего gap используется \`useSize\` для единообразия с другими layout компонентами.
+
+### Auto-fit режим
+При \`cols="auto"\` используется CSS Grid \`auto-fit\` с минимальной шириной элемента 250px.
+Элементы автоматически подстраиваются под доступное пространство.
+
+## Особенности
+
+### Фиксированные колонки
+\`\`\`vue
+<DXGrid cols={3} gap="md">
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+</DXGrid>
+\`\`\`
+
+### Адаптивные колонки
+\`\`\`vue
+<DXGrid cols={1} colsSm={2} colsMd={3} colsLg={4} gap="lg">
+  <!-- Элементы -->
+</DXGrid>
+\`\`\`
+
+### Auto-fit
+\`\`\`vue
+<DXGrid cols="auto" gap="md">
+  <!-- Элементы автоматически подстраиваются -->
+</DXGrid>
+\`\`\`
+
+### Раздельные отступы
+\`\`\`vue
+<DXGrid cols={3} gapX="lg" gapY="md">
+  <!-- Больше отступ по горизонтали, меньше по вертикали -->
+</DXGrid>
+\`\`\`
+
+## Ограничения
+
+- Максимальное количество колонок: 12 (стандарт Tailwind)
+- Auto-fit использует фиксированную минимальную ширину 250px
+- Для более сложных grid макетов используйте CSS классы через \`class\` prop
+- Gap использует предопределенные значения из \`useSpacing\` (none, xs, sm, md, lg, xl)
+        `,
+      },
+    },
+  },
+  argTypes: {
+    cols: {
+      control: 'select',
+      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 'auto'],
+      description: 'Количество колонок в grid. Поддерживает значения от 1 до 12 или "auto" для автоматического размера с минимальной шириной 250px.',
+      table: {
+        type: { summary: 'number | string' },
+        defaultValue: { summary: '12' },
+        category: 'Layout',
+      },
+    },
+    colsSm: {
+      control: 'select',
+      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+      description: 'Количество колонок на sm экранах (≥640px). Используется для создания адаптивных grid макетов.',
+      table: {
+        type: { summary: 'number | string' },
+        defaultValue: { summary: '""' },
+        category: 'Layout',
+      },
+    },
+    colsMd: {
+      control: 'select',
+      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+      description: 'Количество колонок на md экранах (≥768px). Используется для создания адаптивных grid макетов.',
+      table: {
+        type: { summary: 'number | string' },
+        defaultValue: { summary: '""' },
+        category: 'Layout',
+      },
+    },
+    colsLg: {
+      control: 'select',
+      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+      description: 'Количество колонок на lg экранах (≥1024px). Используется для создания адаптивных grid макетов.',
+      table: {
+        type: { summary: 'number | string' },
+        defaultValue: { summary: '""' },
+        category: 'Layout',
+      },
+    },
+    gap: {
+      control: 'select',
+      options: ['none', 'xs', 'sm', 'md', 'lg', 'xl'],
+      description: 'Общий отступ между элементами grid (и по горизонтали, и по вертикали). Используется, если не указаны gapX или gapY.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '"md"' },
+        category: 'Spacing',
+      },
+    },
+    gapX: {
+      control: 'select',
+      options: ['none', 'xs', 'sm', 'md', 'lg', 'xl'],
+      description: 'Горизонтальный отступ между колонками. Имеет приоритет над общим gap для горизонтального направления.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '""' },
+        category: 'Spacing',
+      },
+    },
+    gapY: {
+      control: 'select',
+      options: ['none', 'xs', 'sm', 'md', 'lg', 'xl'],
+      description: 'Вертикальный отступ между рядами. Имеет приоритет над общим gap для вертикального направления.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '""' },
+        category: 'Spacing',
+      },
+    },
+  },
+};
+
+const gridItem = '<div class="bg-slate-100 rounded-lg p-4 text-center">Item</div>';
+
+export const Default = {
+  args: { cols: 3, gap: 'md' },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Базовый grid с 3 колонками и средним отступом. Это стандартная конфигурация для создания сетки элементов. Элементы равномерно распределяются по 3 колонкам.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXGrid },
+    setup() { return { args }; },
+    template: `
+      <DXGrid v-bind="args">
+        ${Array(6).fill(gridItem).join('')}
+      </DXGrid>
+    `,
+  }),
+};
+
+export const Responsive = {
+  args: { cols: 1, colsSm: 2, colsMd: 3, colsLg: 4 },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Адаптивный grid с разным количеством колонок на разных экранах. На мобильных (по умолчанию) - 1 колонка, на sm (≥640px) - 2 колонки, на md (≥768px) - 3 колонки, на lg (≥1024px) - 4 колонки. Это типичный паттерн для адаптивных макетов.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXGrid },
+    setup() { return { args }; },
+    template: `
+      <DXGrid v-bind="args">
+        ${Array(8).fill(gridItem).join('')}
+      </DXGrid>
+    `,
+  }),
+};
+
+export const AutoFit = {
+  args: { cols: 'auto', gap: 'md' },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Grid с автоматическим количеством колонок (auto-fit). Элементы автоматически подстраиваются под доступное пространство с минимальной шириной 250px. Полезен для галерей и карточек, где количество колонок должно зависеть от ширины экрана.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXGrid },
+    setup() { return { args }; },
+    template: `
+      <DXGrid v-bind="args">
+        ${Array(5).fill(gridItem).join('')}
+      </DXGrid>
+    `,
+  }),
+};
+

package/src/components/layout/DXGrid/DXGrid.vue

@@ -0,0 +1,167 @@
+<template>
+  <div :class="gridClasses" :style="gridStyle" data-component="DXGrid">
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useSize } from "@/composables/useSize";
+import { useSpacing } from "@/composables/useSpacing";
+import { useClassComposition } from "@/composables/useClassComposition";
+
+const props = defineProps({
+  /** Количество колонок: 1-12 или auto */
+  cols: { type: [Number, String], default: 12 },
+  /** Количество колонок на sm */
+  colsSm: { type: [Number, String], default: "" },
+  /** Количество колонок на md */
+  colsMd: { type: [Number, String], default: "" },
+  /** Количество колонок на lg */
+  colsLg: { type: [Number, String], default: "" },
+  /** Отступ между элементами: none | xs | sm | md | lg | xl */
+  gap: { type: String, default: "md" },
+  /** Горизонтальный отступ */
+  gapX: { type: String, default: "" },
+  /** Вертикальный отступ */
+  gapY: { type: String, default: "" },
+});
+
+const BASE_CLASSES = "grid";
+
+/**
+ * Классы количества колонок
+ * 
+ * @description
+ * Определяет количество колонок в grid контейнере.
+ * Поддерживает значения от 1 до 12 или "auto" для автоматического размера.
+ * 
+ * @returns {string} Tailwind CSS класс для grid-cols
+ */
+const colsClass = computed(() => {
+  const colsClasses = {
+    1: "grid-cols-1",
+    2: "grid-cols-2",
+    3: "grid-cols-3",
+    4: "grid-cols-4",
+    5: "grid-cols-5",
+    6: "grid-cols-6",
+    7: "grid-cols-7",
+    8: "grid-cols-8",
+    9: "grid-cols-9",
+    10: "grid-cols-10",
+    11: "grid-cols-11",
+    12: "grid-cols-12",
+    auto: "grid-cols-[repeat(auto-fit,minmax(250px,1fr))]",
+  };
+  
+  return colsClasses[props.cols] || `grid-cols-${props.cols}`;
+});
+
+/**
+ * Классы адаптивных колонок
+ * 
+ * @description
+ * Определяет количество колонок для различных брейкпоинтов (sm, md, lg).
+ * Используется для создания адаптивных grid макетов.
+ * 
+ * @returns {Object} Объект с классами для условного применения
+ */
+const responsiveColsClasses = computed(() => {
+  const classes = {};
+  
+  if (props.colsSm) {
+    classes[`sm:grid-cols-${props.colsSm}`] = true;
+  }
+  
+  if (props.colsMd) {
+    classes[`md:grid-cols-${props.colsMd}`] = true;
+  }
+  
+  if (props.colsLg) {
+    classes[`lg:grid-cols-${props.colsLg}`] = true;
+  }
+  
+  return Object.keys(classes).length > 0 ? classes : null;
+});
+
+/**
+ * Классы отступов между элементами
+ * 
+ * @description
+ * Использует useSize для общего gap и useSpacing для раздельных gapX/gapY.
+ * Поддерживает общий gap, а также раздельные gapX и gapY.
+ * 
+ * @returns {string|Object} Классы gap или объект для условных классов
+ */
+const gapClasses = computed(() => {
+  // Если указаны gapX или gapY, используем их вместо общего gap
+  if (props.gapX || props.gapY) {
+    const classes = {};
+    
+    if (props.gapX) {
+      // Извлекаем значение из useSpacing и формируем gap-x класс
+      const spacingClass = useSpacing(props.gapX, 'padding');
+      const match = spacingClass ? spacingClass.match(/-(\d+)$/) : null;
+      if (match) {
+        classes[`gap-x-${match[1]}`] = true;
+      } else if (props.gapX === "none") {
+        classes["gap-x-0"] = true;
+      } else {
+        classes[`gap-x-${props.gapX}`] = true;
+      }
+    }
+    
+    if (props.gapY) {
+      // Извлекаем значение из useSpacing и формируем gap-y класс
+      const spacingClass = useSpacing(props.gapY, 'padding');
+      const match = spacingClass ? spacingClass.match(/-(\d+)$/) : null;
+      if (match) {
+        classes[`gap-y-${match[1]}`] = true;
+      } else if (props.gapY === "none") {
+        classes["gap-y-0"] = true;
+      } else {
+        classes[`gap-y-${props.gapY}`] = true;
+      }
+    }
+    
+    return Object.keys(classes).length > 0 ? classes : null;
+  }
+  
+  // Используем useSize для общего gap
+  return useSize(props.gap, 'spacing') || 'gap-4';
+});
+
+/**
+ * Все классы для grid компонента
+ * 
+ * @description
+ * Объединяет все классы grid контейнера (базовый класс, колонки,
+ * адаптивные колонки, отступы) с использованием useClassComposition.
+ * 
+ * @returns {Array} Массив классов для применения к элементу
+ */
+const gridClasses = computed(() =>
+  useClassComposition(
+    BASE_CLASSES,
+    colsClass.value,
+    responsiveColsClasses.value,
+    gapClasses.value
+  )
+);
+
+/**
+ * Инлайн стили для grid
+ * 
+ * @description
+ * В настоящее время не используется, но оставлен для будущих расширений,
+ * например, для кастомных grid шаблонов.
+ * 
+ * @returns {Object} Объект со стилями или пустой объект
+ */
+const gridStyle = computed(() => {
+  if (props.cols === "auto") return {};
+  return {};
+});
+</script>
+

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

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