dxd-style-code 0.1.7 → 0.1.8

package/src/components/organisms/DXDashboardGrid/DXDashboardGrid.stories.js

@@ -0,0 +1,331 @@
+import { ref } from 'vue';
+import DXDashboardGrid from './DXDashboardGrid.vue';
+import DXStatCard from '../../molecules/DXStatCard/DXStatCard.vue';
+import DXCard from '../../atoms/DXCard/DXCard.vue';
+import DXButton from '../../atoms/DXButton/DXButton.vue';
+import { UserGroupIcon, ChartBarIcon, CurrencyDollarIcon } from '@heroicons/vue/24/outline';
+
+export default {
+  title: 'Organisms/DXDashboardGrid',
+  component: DXDashboardGrid,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXDashboardGrid
+
+Сетка для дашборда с поддержкой drag-and-drop для перестановки виджетов.
+
+## Назначение
+
+DXDashboardGrid предоставляет настраиваемую сетку для создания дашбордов с виджетами.
+Поддерживает перестановку виджетов через drag-and-drop и изменение их размеров.
+
+## Архитектура
+
+### Использует
+- \`vue-draggable-next\` - для drag-and-drop функциональности
+- \`DXStatCard\` - для карточек статистики (через slot)
+- \`useClassComposition\` composable - для стилей
+- \`useSpacing\` composable - для отступов
+
+### Используется в
+- Настраиваемые дашборды
+- Панели мониторинга
+- Аналитические панели
+
+## Внутренняя логика
+
+### Grid Layout
+Использует CSS Grid для размещения виджетов. Каждый виджет занимает определенное
+количество колонок (w) и строк (h).
+
+### Drag-and-Drop
+Виджеты можно перетаскивать за handle (иконка в правом верхнем углу).
+При перетаскивании вычисляется новая позиция виджета.
+
+### Размеры виджетов
+Каждый виджет имеет свойства w (ширина в колонках) и h (высота в строках).
+
+## Особенности
+
+### Редактируемый режим
+При \`editable={false}\` drag-and-drop отключается, виджеты становятся статичными.
+
+### Кастомные виджеты
+Используйте slot \`widget\` для кастомного отображения виджетов.
+
+### События
+Компонент эмитит события при перемещении, добавлении и удалении виджетов.
+        `,
+      },
+    },
+  },
+  argTypes: {
+    columns: {
+      control: 'number',
+      min: 1,
+      max: 12,
+      description: 'Количество колонок в сетке.',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '12' },
+        category: 'Layout',
+      },
+    },
+    rowHeight: {
+      control: 'number',
+      min: 50,
+      max: 200,
+      step: 10,
+      description: 'Высота строки в пикселях.',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '100' },
+        category: 'Layout',
+      },
+    },
+    editable: {
+      control: 'boolean',
+      description: 'Редактируемый режим (drag-and-drop включен).',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+        category: 'Behavior',
+      },
+    },
+  },
+};
+
+const defaultWidgets = [
+  {
+    id: 1,
+    w: 4,
+    h: 2,
+    type: 'stat',
+    title: 'Пользователи',
+    config: { title: 'Всего', value: 1250, icon: UserGroupIcon },
+  },
+  {
+    id: 2,
+    w: 4,
+    h: 2,
+    type: 'stat',
+    title: 'Продажи',
+    config: { title: 'Сегодня', value: 45230, icon: ChartBarIcon },
+  },
+  {
+    id: 3,
+    w: 4,
+    h: 2,
+    type: 'stat',
+    title: 'Доход',
+    config: { title: 'За месяц', value: 125000, icon: CurrencyDollarIcon },
+  },
+  {
+    id: 4,
+    w: 6,
+    h: 3,
+    type: 'chart',
+    title: 'График продаж',
+  },
+  {
+    id: 5,
+    w: 6,
+    h: 3,
+    type: 'table',
+    title: 'Последние заказы',
+  },
+];
+
+export const Default = {
+  args: {
+    columns: 12,
+    rowHeight: 100,
+    editable: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Базовый дашборд с виджетами. Перетаскивайте виджеты за иконку в правом верхнем углу.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXDashboardGrid, DXStatCard, DXCard },
+    setup() {
+      const widgets = ref([...defaultWidgets]);
+      return { args, widgets };
+    },
+    template: `
+      <DXDashboardGrid v-bind="args" v-model:widgets="widgets">
+        <template #widget="{ widget }">
+          <DXCard v-if="widget.type === 'stat'" class="h-full">
+            <DXStatCard
+              :title="widget.config.title"
+              :value="widget.config.value"
+              :icon="widget.config.icon"
+            />
+          </DXCard>
+          <DXCard v-else class="h-full p-4">
+            <h3 class="font-semibold mb-2">{{ widget.title }}</h3>
+            <p class="text-sm text-slate-600">Контент виджета {{ widget.type }}</p>
+          </DXCard>
+        </template>
+      </DXDashboardGrid>
+    `,
+  }),
+};
+
+export const WithStatCards = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Дашборд с карточками статистики. Использует DXStatCard для отображения метрик.',
+      },
+    },
+  },
+  render: () => ({
+    components: { DXDashboardGrid, DXStatCard, DXCard },
+    setup() {
+      const widgets = ref([
+        {
+          id: 1,
+          w: 3,
+          h: 2,
+          type: 'stat',
+          config: {
+            title: 'Всего пользователей',
+            value: 1250,
+            icon: UserGroupIcon,
+          },
+        },
+        {
+          id: 2,
+          w: 3,
+          h: 2,
+          type: 'stat',
+          config: {
+            title: 'Продажи',
+            value: 45230,
+            valueFormat: 'currency',
+            currency: 'USD',
+            trend: { value: 12.5, direction: 'up' },
+            icon: ChartBarIcon,
+          },
+        },
+        {
+          id: 3,
+          w: 3,
+          h: 2,
+          type: 'stat',
+          config: {
+            title: 'Конверсия',
+            value: 24.5,
+            valueFormat: 'percentage',
+            trend: { value: 3.2, direction: 'up' },
+            icon: CurrencyDollarIcon,
+            color: 'success',
+          },
+        },
+        {
+          id: 4,
+          w: 3,
+          h: 2,
+          type: 'stat',
+          config: {
+            title: 'Новые заказы',
+            value: 89,
+            icon: UserGroupIcon,
+            color: 'primary',
+          },
+        },
+      ]);
+      return { widgets };
+    },
+    template: `
+      <DXDashboardGrid :widgets="widgets" :columns="12" :row-height="120">
+        <template #widget="{ widget }">
+          <DXCard class="h-full">
+            <DXStatCard
+              :title="widget.config.title"
+              :value="widget.config.value"
+              :value-format="widget.config.valueFormat"
+              :currency="widget.config.currency"
+              :trend="widget.config.trend"
+              :icon="widget.config.icon"
+              :color="widget.config.color"
+            />
+          </DXCard>
+        </template>
+      </DXDashboardGrid>
+    `,
+  }),
+};
+
+export const ReadOnly = {
+  args: {
+    columns: 12,
+    rowHeight: 100,
+    editable: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Дашборд в режиме только для чтения. Drag-and-drop отключен.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXDashboardGrid, DXCard },
+    setup() {
+      const widgets = ref([...defaultWidgets]);
+      return { args, widgets };
+    },
+    template: `
+      <DXDashboardGrid v-bind="args" v-model:widgets="widgets">
+        <template #widget="{ widget }">
+          <DXCard class="h-full p-4">
+            <h3 class="font-semibold mb-2">{{ widget.title }}</h3>
+            <p class="text-sm text-slate-600">Виджет {{ widget.type }}</p>
+          </DXCard>
+        </template>
+      </DXDashboardGrid>
+    `,
+  }),
+};
+
+export const CustomSizes = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Дашборд с различными размерами виджетов. Виджеты имеют разные значения w и h.',
+      },
+    },
+  },
+  render: () => ({
+    components: { DXDashboardGrid, DXCard },
+    setup() {
+      const widgets = ref([
+        { id: 1, w: 6, h: 2, title: 'Большой виджет 1' },
+        { id: 2, w: 3, h: 2, title: 'Маленький виджет 1' },
+        { id: 3, w: 3, h: 2, title: 'Маленький виджет 2' },
+        { id: 4, w: 4, h: 4, title: 'Высокий виджет' },
+        { id: 5, w: 8, h: 2, title: 'Широкий виджет' },
+      ]);
+      return { widgets };
+    },
+    template: `
+      <DXDashboardGrid :widgets="widgets" :columns="12" :row-height="100">
+        <template #widget="{ widget }">
+          <DXCard class="h-full p-4">
+            <h3 class="font-semibold mb-2">{{ widget.title }}</h3>
+            <p class="text-sm text-slate-600">Размер: {{ widget.w }}x{{ widget.h }}</p>
+          </DXCard>
+        </template>
+      </DXDashboardGrid>
+    `,
+  }),
+};
+

package/src/components/organisms/DXDashboardGrid/DXDashboardGrid.vue

@@ -0,0 +1,309 @@
+<template>
+  <div
+    :class="gridClasses"
+    :style="gridStyles"
+    data-component="DXDashboardGrid"
+    :data-columns="columns"
+    :data-editable="editable"
+  >
+    <vuedraggable
+      v-model="internalWidgets"
+      :animation="200"
+      :disabled="!editable"
+      handle=".drag-handle"
+      :group="{ name: 'widgets', pull: false, put: false }"
+      item-key="id"
+      @start="handleDragStart"
+      @end="handleDragEnd"
+      @change="handleDragChange"
+    >
+      <template #item="{ element: widget }">
+        <div
+          :class="widgetClasses"
+          :style="widgetStyles(widget)"
+        >
+          <div v-if="editable" class="drag-handle absolute top-2 right-2 z-10 cursor-move">
+            <DXIcon
+              :icon="Bars3Icon"
+              size="sm"
+              class="text-slate-400 hover:text-slate-600"
+            />
+          </div>
+          <slot name="widget" :widget="widget">
+            <div class="p-4 bg-white border border-slate-200 rounded-lg h-full">
+              <h3 class="font-semibold mb-2">{{ widget.title || `Виджет ${widget.id}` }}</h3>
+              <p class="text-sm text-slate-600">Используйте slot widget для кастомного контента</p>
+            </div>
+          </slot>
+        </div>
+      </template>
+    </vuedraggable>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from "vue";
+import { useClassComposition } from "@/composables/useClassComposition";
+import { useSpacing } from "@/composables/useSpacing";
+import { VueDraggableNext as vuedraggable } from "vue-draggable-next";
+import DXIcon from "../../atoms/DXIcon/DXIcon.vue";
+import { Bars3Icon } from "@heroicons/vue/24/outline";
+
+const props = defineProps({
+  /**
+   * Массив виджетов (v-model)
+   * Формат: [{ id, x, y, w, h, type, title?, config? }]
+   */
+  widgets: {
+    type: Array,
+    required: true,
+    default: () => [],
+  },
+  /**
+   * Количество колонок в сетке
+   * @default 12
+   */
+  columns: { type: Number, default: 12 },
+  /**
+   * Высота строки в пикселях
+   * @default 100
+   */
+  rowHeight: { type: Number, default: 100 },
+  /**
+   * Редактируемый режим (drag-and-drop включен)
+   * @default true
+   */
+  editable: { type: Boolean, default: true },
+  /**
+   * Отступ между виджетами: none | xs | sm | md | lg | xl
+   * @default 'md'
+   */
+  gap: {
+    type: String,
+    default: "md",
+    validator: (v) => ["none", "xs", "sm", "md", "lg", "xl"].includes(v),
+  },
+});
+
+const emit = defineEmits([
+  "update:widgets",
+  "widget-move",
+  "widget-resize",
+  "widget-add",
+  "widget-remove",
+]);
+
+const internalWidgets = ref([...props.widgets]);
+const isDragging = ref(false);
+
+/**
+ * Классы для grid контейнера
+ * 
+ * @description
+ * Вычисляет классы для grid контейнера с использованием CSS Grid.
+ * 
+ * @returns {Array} Массив классов
+ */
+const gridClasses = computed(() =>
+  useClassComposition("relative w-full")
+);
+
+/**
+ * Стили для grid контейнера
+ * 
+ * @description
+ * Вычисляет стили для grid контейнера с количеством колонок и отступами.
+ * 
+ * @returns {Object} Объект со стилями
+ */
+const gridStyles = computed(() => ({
+  display: "grid",
+  gridTemplateColumns: `repeat(${props.columns}, 1fr)`,
+  gridAutoRows: `${props.rowHeight}px`,
+  gap: gapValue.value,
+}));
+
+/**
+ * Стили для grid контейнера
+ * 
+ * @description
+ * Вычисляет стили для grid контейнера с количеством колонок.
+ * 
+ * @returns {Object} Объект со стилями
+ */
+/**
+ * Значение gap для CSS
+ * 
+ * @description
+ * Преобразует gap prop в значение для CSS.
+ * 
+ * @returns {string} Значение gap
+ */
+const gapValue = computed(() => {
+  const gapMap = {
+    none: "0px",
+    xs: "4px",
+    sm: "8px",
+    md: "16px",
+    lg: "24px",
+    xl: "32px",
+  };
+  return gapMap[props.gap] || gapMap.md;
+});
+
+/**
+ * Классы для виджета
+ * 
+ * @description
+ * Вычисляет классы для каждого виджета.
+ * 
+ * @returns {Array} Массив классов
+ */
+const widgetClasses = computed(() =>
+  useClassComposition(
+    "relative transition-all",
+    {
+      "cursor-move": props.editable && isDragging.value,
+      "cursor-default": !props.editable,
+    }
+  )
+);
+
+/**
+ * Стили для виджета
+ * 
+ * @description
+ * Вычисляет стили для позиционирования виджета в grid.
+ * 
+ * @param {Object} widget - Виджет
+ * @returns {Object} Объект со стилями
+ */
+function widgetStyles(widget) {
+  return {
+    gridColumn: `span ${widget.w || 4}`,
+    gridRow: `span ${widget.h || 2}`,
+  };
+}
+
+/**
+ * Обработчик начала перетаскивания
+ * 
+ * @description
+ * Вызывается при начале перетаскивания виджета.
+ * 
+ * @param {Object} event - Событие drag
+ */
+function handleDragStart(event) {
+  isDragging.value = true;
+}
+
+/**
+ * Обработчик окончания перетаскивания
+ * 
+ * @description
+ * Вызывается при окончании перетаскивания виджета.
+ * 
+ * @param {Object} event - Событие drag
+ */
+function handleDragEnd(event) {
+  isDragging.value = false;
+  
+  // Вычисляем новую позицию виджета
+  const widget = internalWidgets.value[event.newIndex];
+  if (widget) {
+    // Обновляем позицию на основе нового индекса
+    const newPosition = calculatePosition(event.newIndex);
+    emit("widget-move", widget.id, newPosition);
+  }
+}
+
+/**
+ * Обработчик изменения при перетаскивании
+ * 
+ * @description
+ * Вызывается при изменении порядка виджетов.
+ * 
+ * @param {Object} event - Событие изменения
+ */
+function handleDragChange(event) {
+  if (event.added) {
+    // Виджет добавлен
+    const widget = event.added.element;
+    emit("widget-add", widget);
+  } else if (event.removed) {
+    // Виджет удален
+    const widget = event.removed.element;
+    emit("widget-remove", widget);
+  } else if (event.moved) {
+    // Виджет перемещен
+    const widget = event.moved.element;
+    const newPosition = calculatePosition(event.moved.newIndex);
+    emit("widget-move", widget.id, newPosition);
+  }
+}
+
+/**
+ * Вычисление позиции виджета
+ * 
+ * @description
+ * Вычисляет позицию (x, y) виджета на основе его индекса в grid.
+ * 
+ * @param {number} index - Индекс виджета
+ * @returns {Object} Объект с позицией { x, y }
+ */
+function calculatePosition(index) {
+  // Упрощенная логика: вычисляем позицию на основе индекса
+  // В реальной реализации нужно учитывать размеры виджетов
+  let currentX = 0;
+  let currentY = 0;
+  let currentRowHeight = 0;
+
+  for (let i = 0; i < index; i++) {
+    const widget = internalWidgets.value[i];
+    const widgetW = widget.w || 4;
+    const widgetH = widget.h || 2;
+
+    if (currentX + widgetW > props.columns) {
+      // Переход на новую строку
+      currentX = 0;
+      currentY += currentRowHeight;
+      currentRowHeight = widgetH;
+    } else {
+      currentX += widgetW;
+      currentRowHeight = Math.max(currentRowHeight, widgetH);
+    }
+  }
+
+  return { x: currentX, y: currentY };
+}
+
+// Синхронизация с prop widgets
+watch(
+  () => props.widgets,
+  (newWidgets) => {
+    internalWidgets.value = [...newWidgets];
+  },
+  { deep: true }
+);
+
+// Синхронизация изменений с родителем
+watch(
+  internalWidgets,
+  (newWidgets) => {
+    emit("update:widgets", newWidgets);
+  },
+  { deep: true }
+);
+</script>
+
+<style scoped>
+/* Стили для drag-and-drop */
+:deep(.sortable-ghost) {
+  opacity: 0.3;
+}
+
+:deep(.sortable-drag) {
+  opacity: 0.5;
+}
+</style>
+

package/src/components/organisms/DXDashboardGrid/index.js

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