dxd-style-code 0.1.7 → 0.1.9

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

@@ -0,0 +1,271 @@
+import { ref } from 'vue';
+import DXDashboardWidget from './DXDashboardWidget.vue';
+import { ChartBarIcon, CurrencyDollarIcon } from '@heroicons/vue/24/solid';
+
+export default {
+  title: 'Organisms/DXDashboardWidget',
+  component: DXDashboardWidget,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXDashboardWidget
+
+Виджет для дашборда с настройками, обновлением данных и различными типами контента.
+
+## Назначение
+
+DXDashboardWidget предоставляет универсальный виджет для дашбордов с поддержкой
+различных типов контента (статистика, графики, таблицы, текст) и действий (редактирование, удаление, обновление).
+
+## Архитектура
+
+### Использует
+- \`DXCard\` - как базовый контейнер
+- \`DXStatCard\` - для статистики
+- \`DXChartContainer\` - для графиков
+- \`DXTable\` - для таблиц
+- \`DXButton\` - для действий
+- \`DXIcon\` - для иконок
+- \`useClassComposition\` composable - для стилей
+- \`useSize\` composable - для размеров
+
+### Используется в
+- \`DXDashboardGrid\` - для размещения виджетов
+- Дашборды с аналитикой
+- Настраиваемые панели мониторинга
+
+## Внутренняя логика
+
+### Типы виджетов
+- **stat**: Виджет статистики (использует DXStatCard)
+- **chart**: Виджет графика (использует DXChartContainer)
+- **table**: Виджет таблицы (использует DXTable)
+- **text**: Текстовый виджет
+
+### Конфигурация
+Каждый тип виджета имеет свою конфигурацию через prop \`config\`.
+
+### Действия
+Виджет поддерживает редактирование, удаление и обновление данных.
+
+## Особенности
+
+### Слоты
+- **header**: Кастомный заголовок
+- **content**: Кастомный контент
+- **chart**: Кастомный график (для type="chart")
+- **text**: Кастомный текст (для type="text")
+
+### Редактирование
+При \`editable={true}\` показываются кнопки действий в header.
+        `,
+      },
+    },
+  },
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['stat', 'chart', 'table', 'text'],
+      description: 'Тип виджета: stat (статистика) | chart (график) | table (таблица) | text (текст).',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'stat' },
+        category: 'Content',
+      },
+    },
+    editable: {
+      control: 'boolean',
+      description: 'Редактируемый виджет (показывает кнопки действий).',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Behavior',
+      },
+    },
+  },
+};
+
+export const StatWidget = {
+  args: {
+    id: 1,
+    type: 'stat',
+    title: 'Продажи',
+    config: {
+      title: 'Всего продаж',
+      value: 125000,
+      valueFormat: 'currency',
+      currency: 'USD',
+      trend: { direction: 'up', value: 12.5 },
+      icon: CurrencyDollarIcon,
+      color: 'primary',
+    },
+    editable: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Виджет статистики с трендом и иконкой.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXDashboardWidget },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="max-w-md">
+        <DXDashboardWidget v-bind="args" />
+      </div>
+    `,
+  }),
+};
+
+export const ChartWidget = {
+  args: {
+    id: 2,
+    type: 'chart',
+    title: 'График продаж',
+    config: {
+      chartType: 'line',
+      data: { labels: ['Янв', 'Фев', 'Мар'], datasets: [{ data: [100, 150, 200] }] },
+      legend: true,
+      legendData: [
+        { label: 'Продажи', color: 'bg-blue-500', visible: true },
+      ],
+      height: '300px',
+    },
+    editable: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Виджет графика с легендой.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXDashboardWidget },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="max-w-2xl">
+        <DXDashboardWidget v-bind="args">
+          <template #chart>
+            <div class="flex items-center justify-center h-full bg-slate-50 rounded-lg border-2 border-dashed border-slate-300">
+              <p class="text-slate-500 text-sm">График здесь</p>
+            </div>
+          </template>
+        </DXDashboardWidget>
+      </div>
+    `,
+  }),
+};
+
+export const TableWidget = {
+  args: {
+    id: 3,
+    type: 'table',
+    title: 'Последние заказы',
+    config: {
+      columns: [
+        { key: 'id', label: 'ID' },
+        { key: 'customer', label: 'Клиент' },
+        { key: 'amount', label: 'Сумма' },
+      ],
+      data: [
+        { id: 1, customer: 'John Doe', amount: '$100' },
+        { id: 2, customer: 'Jane Smith', amount: '$200' },
+        { id: 3, customer: 'Bob Johnson', amount: '$150' },
+      ],
+      paginated: false,
+    },
+    editable: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Виджет таблицы с данными.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXDashboardWidget },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="max-w-2xl">
+        <DXDashboardWidget v-bind="args" />
+      </div>
+    `,
+  }),
+};
+
+export const TextWidget = {
+  args: {
+    id: 4,
+    type: 'text',
+    title: 'Заметки',
+    config: {
+      text: 'Это текстовый виджет для отображения произвольного контента.',
+    },
+    editable: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Текстовый виджет для произвольного контента.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXDashboardWidget },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="max-w-md">
+        <DXDashboardWidget v-bind="args" />
+      </div>
+    `,
+  }),
+};
+
+export const AllTypes = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Демонстрация всех типов виджетов.',
+      },
+    },
+  },
+  render: () => ({
+    components: { DXDashboardWidget },
+    setup() {
+      return {};
+    },
+    template: `
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <DXDashboardWidget
+          :id="1"
+          type="stat"
+          title="Продажи"
+          :config="{ title: 'Всего', value: 125000, valueFormat: 'currency' }"
+          :editable="true"
+        />
+        <DXDashboardWidget
+          :id="2"
+          type="text"
+          title="Заметки"
+          :config="{ text: 'Текстовый виджет' }"
+          :editable="true"
+        />
+      </div>
+    `,
+  }),
+};
+

package/src/components/organisms/DXDashboardWidget/DXDashboardWidget.vue

@@ -0,0 +1,260 @@
+<template>
+  <DXCard
+    :class="widgetClasses"
+    :variant="cardVariant"
+    :padding="padding"
+    data-component="DXDashboardWidget"
+    :data-type="type"
+    :data-editable="editable"
+  >
+    <!-- Header -->
+    <div v-if="title || $slots.header || editable" :class="headerClasses">
+      <slot name="header">
+        <div class="flex items-center justify-between">
+          <h3 v-if="title" class="text-lg font-semibold text-slate-900">
+            {{ title }}
+          </h3>
+          <div v-if="editable" class="flex items-center gap-2">
+            <DXButton
+              v-if="refreshable"
+              variant="ghost"
+              size="sm"
+              @click="handleRefresh"
+            >
+              <template #icon>
+                <DXIcon :icon="ArrowPathIcon" size="sm" />
+              </template>
+            </DXButton>
+            <DXButton
+              variant="ghost"
+              size="sm"
+              @click="handleEdit"
+            >
+              <template #icon>
+                <DXIcon :icon="Cog6ToothIcon" size="sm" />
+              </template>
+            </DXButton>
+            <DXButton
+              v-if="deletable"
+              variant="ghost"
+              size="sm"
+              @click="handleDelete"
+            >
+              <template #icon>
+                <DXIcon :icon="XMarkIcon" size="sm" />
+              </template>
+            </DXButton>
+          </div>
+        </div>
+      </slot>
+    </div>
+
+    <!-- Content -->
+    <div :class="contentClasses">
+      <slot name="content">
+        <!-- Статистика -->
+        <DXStatCard
+          v-if="type === 'stat'"
+          :title="config?.title"
+          :value="config?.value"
+          :description="config?.description"
+          :trend="config?.trend"
+          :icon="config?.icon"
+          :color="config?.color || 'primary'"
+          :size="config?.size || 'md'"
+        />
+
+        <!-- График -->
+        <DXChartContainer
+          v-else-if="type === 'chart'"
+          :title="config?.title"
+          :type="config?.chartType || 'line'"
+          :data="config?.data"
+          :options="config?.options"
+          :legend="config?.legend !== false"
+          :legend-data="config?.legendData"
+          :controls="config?.controls"
+          :height="config?.height || '300px'"
+        >
+          <template #chart>
+            <slot name="chart" :config="config" />
+          </template>
+        </DXChartContainer>
+
+        <!-- Таблица -->
+        <DXTable
+          v-else-if="type === 'table'"
+          :columns="config?.columns || []"
+          :data="config?.data || []"
+          :paginated="config?.paginated !== false"
+          :size="config?.size || 'sm'"
+        />
+
+        <!-- Текст -->
+        <div v-else-if="type === 'text'" :class="textClasses">
+          <p v-if="config?.text" class="text-slate-700">
+            {{ config.text }}
+          </p>
+          <slot name="text" :config="config" />
+        </div>
+
+        <!-- Кастомный контент -->
+        <slot v-else :type="type" :config="config" />
+      </slot>
+    </div>
+  </DXCard>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useClassComposition } from "@/composables/useClassComposition";
+import { useSize } from "@/composables/useSize";
+import DXCard from "../../atoms/DXCard/DXCard.vue";
+import DXButton from "../../atoms/DXButton/DXButton.vue";
+import DXIcon from "../../atoms/DXIcon/DXIcon.vue";
+import DXStatCard from "../../molecules/DXStatCard/DXStatCard.vue";
+import DXChartContainer from "../DXChartContainer/DXChartContainer.vue";
+import DXTable from "../DXTable/DXTable.vue";
+import {
+  ArrowPathIcon,
+  Cog6ToothIcon,
+  XMarkIcon,
+} from "@heroicons/vue/24/outline";
+
+const props = defineProps({
+  /**
+   * ID виджета
+   */
+  id: { type: [String, Number], required: true },
+  /**
+   * Тип виджета: stat | chart | table | text
+   * @default 'stat'
+   */
+  type: {
+    type: String,
+    default: "stat",
+    validator: (v) => ["stat", "chart", "table", "text"].includes(v),
+  },
+  /**
+   * Заголовок виджета
+   */
+  title: { type: String, default: "" },
+  /**
+   * Конфигурация виджета (зависит от типа)
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+  /**
+   * Редактируемый виджет
+   * @default false
+   */
+  editable: { type: Boolean, default: false },
+  /**
+   * Можно ли удалять виджет
+   * @default true
+   */
+  deletable: { type: Boolean, default: true },
+  /**
+   * Можно ли обновлять данные
+   * @default true
+   */
+  refreshable: { type: Boolean, default: true },
+  /**
+   * Вариант DXCard
+   * @default 'default'
+   */
+  cardVariant: {
+    type: String,
+    default: "default",
+    validator: (v) => ["default", "bordered", "elevated", "flat"].includes(v),
+  },
+  /**
+   * Padding для DXCard
+   * @default 'md'
+   */
+  padding: {
+    type: String,
+    default: "md",
+    validator: (v) => ["none", "xs", "sm", "md", "lg", "xl"].includes(v),
+  },
+});
+
+const emit = defineEmits(["edit", "delete", "refresh"]);
+
+/**
+ * Классы для виджета
+ * 
+ * @description
+ * Базовые классы для виджета дашборда.
+ * 
+ * @returns {Array} Массив классов
+ */
+const widgetClasses = computed(() => useClassComposition("w-full h-full"));
+
+/**
+ * Классы для header
+ * 
+ * @description
+ * Классы для секции заголовка.
+ * 
+ * @returns {Array} Массив классов
+ */
+const headerClasses = computed(() =>
+  useClassComposition("mb-4 pb-4 border-b border-slate-200")
+);
+
+/**
+ * Классы для контента
+ * 
+ * @description
+ * Классы для секции контента.
+ * 
+ * @returns {Array} Массив классов
+ */
+const contentClasses = computed(() => useClassComposition("w-full"));
+
+/**
+ * Классы для текстового контента
+ * 
+ * @description
+ * Классы для текстового типа виджета.
+ * 
+ * @returns {Array} Массив классов
+ */
+const textClasses = computed(() =>
+  useClassComposition("text-slate-700")
+);
+
+/**
+ * Обработчик редактирования
+ * 
+ * @description
+ * Эмитит событие редактирования виджета.
+ */
+function handleEdit() {
+  emit("edit", props.id);
+}
+
+/**
+ * Обработчик удаления
+ * 
+ * @description
+ * Эмитит событие удаления виджета.
+ */
+function handleDelete() {
+  emit("delete", props.id);
+}
+
+/**
+ * Обработчик обновления
+ * 
+ * @description
+ * Эмитит событие обновления данных виджета.
+ */
+function handleRefresh() {
+  emit("refresh", props.id);
+}
+</script>
+

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

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