dxd-style-code 0.1.7 → 0.1.8

package/src/components/utilities/DXPortal/DXPortal.stories.js

@@ -0,0 +1,267 @@
+import { ref, onMounted } from 'vue';
+import DXPortal from './DXPortal.vue';
+import DXModal from '../../organisms/DXModal/DXModal.vue';
+import DXTooltip from '../../atoms/DXTooltip/DXTooltip.vue';
+import DXButton from '../../atoms/DXButton/DXButton.vue';
+import DXCard from '../../atoms/DXCard/DXCard.vue';
+
+export default {
+  title: 'Utilities/DXPortal',
+  component: DXPortal,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXPortal
+
+Компонент-обертка над Vue Teleport для рендеринга контента вне текущей DOM-иерархии.
+
+## Назначение
+
+DXPortal позволяет рендерить контент в указанный контейнер (по умолчанию body), что необходимо для:
+- Модальных окон (чтобы они были поверх всего контента)
+- Tooltips и подсказок (чтобы они не обрезались родительскими overflow)
+- Выпадающих меню (чтобы они правильно позиционировались)
+- Уведомлений (чтобы они были поверх всего)
+
+## Архитектура
+
+### Использует
+- Vue 3 \`Teleport\` - встроенный компонент Vue для порталов
+
+### Используется в
+- \`DXModal\` - для рендеринга модальных окон в body
+- \`DXTooltip\` - для рендеринга подсказок в body
+- \`DXDropdown\` - для рендеринга выпадающих меню
+- \`DXToast\` - для рендеринга уведомлений
+
+## Внутренняя логика
+
+### Определение целевого контейнера
+Компонент автоматически определяет целевой контейнер:
+- \`"body"\` → рендеринг в body
+- \`"#selector"\` → поиск элемента по ID
+- \`".selector"\` → поиск элемента по классу
+- \`HTMLElement\` → использование элемента напрямую
+
+Если контейнер не найден, используется body как fallback.
+
+### Сохранение контекста Vue
+Teleport сохраняет контекст Vue (provide/inject, slots, события), поэтому все работает как обычно.
+
+## Особенности
+
+### Автоматическая очистка
+При размонтировании компонента контент автоматически удаляется из целевого контейнера благодаря Vue Teleport.
+
+### Несколько порталов
+Можно использовать несколько порталов одновременно, они будут рендериться в указанные контейнеры независимо.
+
+### Отключение портала
+С помощью prop \`disabled\` можно временно отключить портал и рендерить контент в текущем месте (полезно для тестирования).
+        `,
+      },
+    },
+  },
+  argTypes: {
+    to: {
+      control: 'text',
+      description: 'Целевой контейнер для рендеринга. Может быть "body", селектор (#id, .class) или HTMLElement.',
+      table: {
+        type: { summary: 'string | HTMLElement' },
+        defaultValue: { summary: 'body' },
+        category: 'Behavior',
+      },
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Отключить портал (рендерить в текущем месте).',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Behavior',
+      },
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    to: 'body',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Базовое использование портала для рендеринга в body. Контент будет отрендерен в body, но сохранит контекст Vue компонента.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXPortal, DXCard },
+    setup() { 
+      return { args }; 
+    },
+    template: `
+      <div class="p-4">
+        <p class="mb-4">Контент выше портала</p>
+        <DXPortal v-bind="args">
+          <DXCard class="p-4 bg-blue-50 border-blue-200">
+            <p>Этот контент рендерится в body через Portal</p>
+          </DXCard>
+        </DXPortal>
+        <p class="mt-4">Контент ниже портала</p>
+      </div>
+    `,
+  }),
+};
+
+export const WithModal = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Использование портала с модальным окном. Модальное окно рендерится в body, что позволяет ему быть поверх всего контента.',
+      },
+    },
+  },
+  render: () => ({
+    components: { DXPortal, DXModal, DXButton },
+    setup() {
+      const showModal = ref(false);
+      return { showModal };
+    },
+    template: `
+      <div class="p-4">
+        <DXButton @click="showModal = true">
+          Открыть модальное окно
+        </DXButton>
+        
+        <DXPortal to="body">
+          <DXModal 
+            v-if="showModal"
+            :open="showModal"
+            @close="showModal = false"
+          >
+            <h2>Модальное окно</h2>
+            <p>Это содержимое рендерится в body через Portal</p>
+          </DXModal>
+        </DXPortal>
+      </div>
+    `,
+  }),
+};
+
+export const CustomContainer = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Использование кастомного контейнера. Контент будет рендериться в указанный элемент по селектору.',
+      },
+    },
+  },
+  render: () => ({
+    components: { DXPortal, DXCard },
+    setup() {
+      onMounted(() => {
+        // Создаем кастомный контейнер если его нет
+        if (!document.getElementById('custom-portal')) {
+          const container = document.createElement('div');
+          container.id = 'custom-portal';
+          container.className = 'p-4 border-2 border-dashed border-blue-300 rounded-lg';
+          document.body.appendChild(container);
+        }
+      });
+      return {};
+    },
+    template: `
+      <div class="p-4">
+        <p class="mb-4">Контент в основном потоке</p>
+        <DXPortal to="#custom-portal">
+          <DXCard class="p-4 bg-green-50 border-green-200">
+            <p>Этот контент рендерится в кастомном контейнере</p>
+          </DXCard>
+        </DXPortal>
+      </div>
+    `,
+  }),
+};
+
+export const Disabled = {
+  args: {
+    to: 'body',
+    disabled: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Отключенный портал. Контент рендерится в текущем месте вместо целевого контейнера. Полезно для тестирования или условного рендеринга.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXPortal, DXCard },
+    setup() { 
+      return { args }; 
+    },
+    template: `
+      <div class="p-4">
+        <p class="mb-4">Контент выше портала</p>
+        <DXPortal v-bind="args">
+          <DXCard class="p-4 bg-yellow-50 border-yellow-200">
+            <p>Этот контент рендерится здесь (портал отключен)</p>
+          </DXCard>
+        </DXPortal>
+        <p class="mt-4">Контент ниже портала</p>
+      </div>
+    `,
+  }),
+};
+
+export const MultiplePortals = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Несколько порталов могут использоваться одновременно. Каждый портал независимо рендерит свой контент в указанный контейнер.',
+      },
+    },
+  },
+  render: () => ({
+    components: { DXPortal, DXCard },
+    setup() {
+      onMounted(() => {
+        // Создаем контейнеры если их нет
+        if (!document.getElementById('portal-1')) {
+          const container1 = document.createElement('div');
+          container1.id = 'portal-1';
+          container1.className = 'p-2 border border-blue-300 rounded mb-2';
+          document.body.appendChild(container1);
+        }
+        if (!document.getElementById('portal-2')) {
+          const container2 = document.createElement('div');
+          container2.id = 'portal-2';
+          container2.className = 'p-2 border border-green-300 rounded';
+          document.body.appendChild(container2);
+        }
+      });
+      return {};
+    },
+    template: `
+      <div class="p-4">
+        <p class="mb-4">Основной контент</p>
+        
+        <DXPortal to="#portal-1">
+          <DXCard class="p-2 bg-blue-50">
+            Портал 1
+          </DXCard>
+        </DXPortal>
+        
+        <DXPortal to="#portal-2">
+          <DXCard class="p-2 bg-green-50">
+            Портал 2
+          </DXCard>
+        </DXPortal>
+      </div>
+    `,
+  }),
+};
+

package/src/components/utilities/DXPortal/DXPortal.vue

@@ -0,0 +1,69 @@
+<template>
+  <Teleport :to="target" :disabled="disabled">
+    <slot />
+  </Teleport>
+</template>
+
+<script setup>
+import { computed, onMounted, onBeforeUnmount } from "vue";
+
+const props = defineProps({
+  /** 
+   * Целевой контейнер для рендеринга
+   * Может быть строкой (селектор или 'body') или DOM элементом
+   * @default 'body'
+   */
+  to: {
+    type: [String, Object],
+    default: "body",
+    validator: (value) => {
+      if (typeof value === "string") {
+        return value === "body" || value.startsWith("#") || value.startsWith(".");
+      }
+      return value instanceof HTMLElement;
+    },
+  },
+  /** Отключить портал (рендерить в текущем месте) */
+  disabled: { type: Boolean, default: false },
+});
+
+/**
+ * Вычисляет целевой контейнер для Teleport
+ * 
+ * @description
+ * Обрабатывает различные форматы целевого контейнера:
+ * - Строка "body" → рендеринг в body
+ * - Строка-селектор (например, "#app" или ".portal-container") → поиск элемента
+ * - DOM элемент → использование напрямую
+ * 
+ * Если контейнер не найден, возвращает "body" как fallback.
+ * 
+ * @returns {string|HTMLElement} Целевой контейнер для Teleport
+ */
+const target = computed(() => {
+  // Если это строка "body", возвращаем как есть
+  if (props.to === "body") {
+    return "body";
+  }
+
+  // Если это строка-селектор, пытаемся найти элемент
+  if (typeof props.to === "string") {
+    const element = document.querySelector(props.to);
+    if (element) {
+      return element;
+    }
+    // Если элемент не найден, возвращаем body как fallback
+    console.warn(`DXPortal: Контейнер "${props.to}" не найден, используется body`);
+    return "body";
+  }
+
+  // Если это DOM элемент, возвращаем его
+  if (props.to instanceof HTMLElement) {
+    return props.to;
+  }
+
+  // Fallback на body
+  return "body";
+});
+</script>
+

package/src/components/utilities/DXPortal/index.js

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

package/src/components/utilities/DXStaggeredAnimation/DXStaggeredAnimation.stories.js

@@ -0,0 +1,339 @@
+import { ref } from 'vue';
+import DXStaggeredAnimation from './DXStaggeredAnimation.vue';
+import DXCard from '../../atoms/DXCard/DXCard.vue';
+import DXButton from '../../atoms/DXButton/DXButton.vue';
+import DXList from '../../molecules/DXList/DXList.vue';
+
+export default {
+  title: 'Utilities/DXStaggeredAnimation',
+  component: DXStaggeredAnimation,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXStaggeredAnimation
+
+Компонент для последовательных анимаций элементов с задержкой между ними.
+
+## Назначение
+
+DXStaggeredAnimation применяет анимацию к дочерним элементам с последовательной задержкой,
+создавая эффект каскадного появления. Используется для эффектных анимаций списков, сеток и карточек.
+
+## Архитектура
+
+### Использует
+- CSS transitions - для анимаций
+- \`useClassComposition\` composable - для стилей
+- JavaScript setTimeout - для задержек
+
+### Используется в
+- \`DXDashboardGrid\` - для анимации виджетов
+- \`DXList\` - для эффектного появления элементов
+- Любые компоненты со списками элементов
+
+## Внутренняя логика
+
+### Направления анимации
+- **top-to-bottom**: Элементы появляются сверху вниз
+- **left-to-right**: Элементы появляются слева направо
+- **right-to-left**: Элементы появляются справа налево
+- **bottom-to-top**: Элементы появляются снизу вверх
+
+### Типы transition
+- **fade**: Плавное появление
+- **fade-slide**: Появление со скольжением
+- **scale**: Появление с масштабированием
+
+### Задержка
+Каждый элемент анимируется с задержкой относительно предыдущего.
+
+## Особенности
+
+### Автоматическое применение
+Анимация применяется автоматически при монтировании (если \`animateOnMount={true}\`).
+
+### Оптимизация
+Таймеры очищаются при размонтировании для предотвращения утечек памяти.
+        `,
+      },
+    },
+  },
+  argTypes: {
+    delay: {
+      control: 'number',
+      min: 0,
+      max: 500,
+      step: 10,
+      description: 'Задержка между элементами в миллисекундах.',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '100' },
+        category: 'Animation',
+      },
+    },
+    direction: {
+      control: 'select',
+      options: ['top-to-bottom', 'left-to-right', 'right-to-left', 'bottom-to-top'],
+      description: 'Направление анимации.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'top-to-bottom' },
+        category: 'Animation',
+      },
+    },
+    transition: {
+      control: 'select',
+      options: ['fade', 'fade-slide', 'scale'],
+      description: 'Тип transition.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'fade' },
+        category: 'Animation',
+      },
+    },
+    duration: {
+      control: 'number',
+      min: 100,
+      max: 1000,
+      step: 50,
+      description: 'Длительность анимации в миллисекундах.',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '300' },
+        category: 'Animation',
+      },
+    },
+  },
+};
+
+const defaultItems = [
+  { id: 1, name: 'Элемент 1' },
+  { id: 2, name: 'Элемент 2' },
+  { id: 3, name: 'Элемент 3' },
+  { id: 4, name: 'Элемент 4' },
+  { id: 5, name: 'Элемент 5' },
+];
+
+export const Default = {
+  args: {
+    delay: 100,
+    direction: 'top-to-bottom',
+    transition: 'fade',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Базовая последовательная анимация списка элементов. Элементы появляются сверху вниз с задержкой.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXStaggeredAnimation, DXCard },
+    setup() {
+      return { args, defaultItems };
+    },
+    template: `
+      <DXStaggeredAnimation v-bind="args">
+        <DXCard
+          v-for="item in defaultItems"
+          :key="item.id"
+          class="p-4 mb-2"
+        >
+          {{ item.name }}
+        </DXCard>
+      </DXStaggeredAnimation>
+    `,
+  }),
+};
+
+export const LeftToRight = {
+  args: {
+    delay: 100,
+    direction: 'left-to-right',
+    transition: 'fade-slide',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Анимация слева направо. Элементы появляются последовательно с левой стороны.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXStaggeredAnimation, DXCard },
+    setup() {
+      return { args, defaultItems };
+    },
+    template: `
+      <DXStaggeredAnimation v-bind="args">
+        <DXCard
+          v-for="item in defaultItems"
+          :key="item.id"
+          class="p-4 mb-2"
+        >
+          {{ item.name }}
+        </DXCard>
+      </DXStaggeredAnimation>
+    `,
+  }),
+};
+
+export const WithScale = {
+  args: {
+    delay: 150,
+    direction: 'top-to-bottom',
+    transition: 'scale',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Анимация с масштабированием. Элементы появляются с увеличением масштаба.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXStaggeredAnimation, DXCard },
+    setup() {
+      return { args, defaultItems };
+    },
+    template: `
+      <DXStaggeredAnimation v-bind="args">
+        <DXCard
+          v-for="item in defaultItems"
+          :key="item.id"
+          class="p-4 mb-2"
+        >
+          {{ item.name }}
+        </DXCard>
+      </DXStaggeredAnimation>
+    `,
+  }),
+};
+
+export const GridLayout = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Анимация элементов в сетке. Карточки появляются последовательно в grid layout.',
+      },
+    },
+  },
+  render: () => ({
+    components: { DXStaggeredAnimation, DXCard },
+    setup() {
+      const gridItems = ref([
+        { id: 1, title: 'Карточка 1' },
+        { id: 2, title: 'Карточка 2' },
+        { id: 3, title: 'Карточка 3' },
+        { id: 4, title: 'Карточка 4' },
+        { id: 5, title: 'Карточка 5' },
+        { id: 6, title: 'Карточка 6' },
+      ]);
+      return { gridItems };
+    },
+    template: `
+      <DXStaggeredAnimation delay="100" direction="left-to-right" transition="fade-slide">
+        <div class="grid grid-cols-3 gap-4">
+          <DXCard
+            v-for="item in gridItems"
+            :key="item.id"
+            class="p-4"
+          >
+            <h3 class="font-semibold">{{ item.title }}</h3>
+          </DXCard>
+        </div>
+      </DXStaggeredAnimation>
+    `,
+  }),
+};
+
+export const WithButton = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Анимация с кнопкой для повторного запуска. Нажмите кнопку, чтобы увидеть анимацию снова.',
+      },
+    },
+  },
+  render: () => ({
+    components: { DXStaggeredAnimation, DXCard, DXButton },
+    setup() {
+      const key = ref(0);
+      const items = ref(defaultItems);
+      
+      const restartAnimation = () => {
+        key.value++;
+      };
+      
+      return { key, items, restartAnimation };
+    },
+    template: `
+      <div class="space-y-4">
+        <DXButton @click="restartAnimation">Запустить анимацию</DXButton>
+        <DXStaggeredAnimation
+          :key="key"
+          delay="100"
+          direction="top-to-bottom"
+          transition="fade-slide"
+        >
+          <DXCard
+            v-for="item in items"
+            :key="item.id"
+            class="p-4 mb-2"
+          >
+            {{ item.name }}
+          </DXCard>
+        </DXStaggeredAnimation>
+      </div>
+    `,
+  }),
+};
+
+export const AllDirections = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Демонстрация всех направлений анимации.',
+      },
+    },
+  },
+  render: () => ({
+    components: { DXStaggeredAnimation, DXCard },
+    setup() {
+      const directions = [
+        { name: 'top-to-bottom', label: 'Сверху вниз' },
+        { name: 'left-to-right', label: 'Слева направо' },
+        { name: 'right-to-left', label: 'Справа налево' },
+        { name: 'bottom-to-top', label: 'Снизу вверх' },
+      ];
+      return { directions, defaultItems };
+    },
+    template: `
+      <div class="space-y-8">
+        <div
+          v-for="dir in directions"
+          :key="dir.name"
+          class="space-y-2"
+        >
+          <h3 class="font-semibold">{{ dir.label }}</h3>
+          <DXStaggeredAnimation
+            :direction="dir.name"
+            delay="100"
+            transition="fade-slide"
+          >
+            <DXCard
+              v-for="item in defaultItems.slice(0, 3)"
+              :key="item.id"
+              class="p-4 mb-2"
+            >
+              {{ item.name }}
+            </DXCard>
+          </DXStaggeredAnimation>
+        </div>
+      </div>
+    `,
+  }),
+};
+