dxd-style-code 0.1.7 → 0.1.8

package/src/components/utilities/DXStaggeredAnimation/DXStaggeredAnimation.vue

@@ -0,0 +1,155 @@
+<template>
+  <div
+    ref="containerRef"
+    :class="containerClasses"
+    data-component="DXStaggeredAnimation"
+    :data-direction="direction"
+    :data-transition="transition"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, watch, nextTick, ref, onBeforeUnmount } from "vue";
+import { useClassComposition } from "@/composables/useClassComposition";
+
+const props = defineProps({
+  /**
+   * Задержка между элементами в миллисекундах
+   * @default 100
+   */
+  delay: { type: Number, default: 100 },
+  /**
+   * Направление анимации: top-to-bottom | left-to-right | right-to-left | bottom-to-top
+   * @default 'top-to-bottom'
+   */
+  direction: {
+    type: String,
+    default: "top-to-bottom",
+    validator: (v) =>
+      [
+        "top-to-bottom",
+        "left-to-right",
+        "right-to-left",
+        "bottom-to-top",
+      ].includes(v),
+  },
+  /**
+   * Тип transition: fade | fade-slide | scale
+   * @default 'fade'
+   */
+  transition: {
+    type: String,
+    default: "fade",
+    validator: (v) => ["fade", "fade-slide", "scale"].includes(v),
+  },
+  /**
+   * Длительность анимации в миллисекундах
+   * @default 300
+   */
+  duration: { type: Number, default: 300 },
+  /**
+   * Анимировать при монтировании
+   * @default true
+   */
+  animateOnMount: { type: Boolean, default: true },
+});
+
+const emit = defineEmits(["animation-complete"]);
+
+/**
+ * Классы для контейнера
+ * 
+ * @description
+ * Базовые классы для контейнера анимации.
+ * 
+ * @returns {Array} Массив классов
+ */
+const containerClasses = computed(() => useClassComposition("w-full"));
+
+/**
+ * Применение анимации к дочерним элементам
+ * 
+ * @description
+ * Применяет анимацию с задержкой к каждому дочернему элементу.
+ */
+function applyStaggeredAnimation() {
+  nextTick(() => {
+    const container = document.querySelector(
+      '[data-component="DXStaggeredAnimation"]'
+    );
+    if (!container) return;
+
+    const children = Array.from(container.children);
+    let completedCount = 0;
+
+    children.forEach((child, index) => {
+      const delay = index * props.delay;
+      const childElement = child;
+
+      // Устанавливаем начальное состояние
+      childElement.style.opacity = "0";
+      childElement.style.transition = `all ${props.duration}ms ease-out`;
+
+      // Применяем начальные стили в зависимости от направления
+      switch (props.direction) {
+        case "top-to-bottom":
+          childElement.style.transform = "translateY(-20px)";
+          break;
+        case "bottom-to-top":
+          childElement.style.transform = "translateY(20px)";
+          break;
+        case "left-to-right":
+          childElement.style.transform = "translateX(-20px)";
+          break;
+        case "right-to-left":
+          childElement.style.transform = "translateX(20px)";
+          break;
+      }
+
+      if (props.transition === "scale") {
+        childElement.style.transform += " scale(0.95)";
+      }
+
+      // Применяем анимацию с задержкой
+      setTimeout(() => {
+        childElement.style.opacity = "1";
+        childElement.style.transform = "translate(0, 0) scale(1)";
+
+        // Отслеживаем завершение анимации
+        setTimeout(() => {
+          completedCount++;
+          if (completedCount === children.length) {
+            emit("animation-complete");
+          }
+        }, props.duration);
+      }, delay);
+    });
+  });
+}
+
+// Применение анимации при монтировании
+onMounted(() => {
+  if (props.animateOnMount) {
+    applyStaggeredAnimation();
+  }
+});
+
+// Очистка при размонтировании (таймеры очищаются автоматически при размонтировании компонента)
+
+// Реакция на изменение delay или direction
+watch(
+  [() => props.delay, () => props.direction, () => props.transition],
+  () => {
+    if (props.animateOnMount) {
+      applyStaggeredAnimation();
+    }
+  }
+);
+</script>
+
+<style scoped>
+/* CSS переменные для анимации применяются через inline стили */
+</style>
+

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

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

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

@@ -0,0 +1,327 @@
+import { ref, inject } from 'vue';
+import DXThemeProvider from './DXThemeProvider.vue';
+import DXCard from '../../atoms/DXCard/DXCard.vue';
+import DXButton from '../../atoms/DXButton/DXButton.vue';
+
+export default {
+  title: 'Utilities/DXThemeProvider',
+  component: DXThemeProvider,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXThemeProvider
+
+Провайдер для управления темами и цветовыми схемами приложения.
+
+## Назначение
+
+DXThemeProvider предоставляет систему управления темами через provide/inject и CSS переменные.
+Позволяет переключаться между темами, сохранять выбор пользователя и использовать системную тему.
+
+## Архитектура
+
+### Использует
+- Vue provide/inject - для доступа к теме в компонентах
+- CSS переменные - для применения цветов темы
+- localStorage - для сохранения выбранной темы (опционально)
+- prefers-color-scheme - для определения системной темы (опционально)
+
+### Используется в
+- Корневой компонент приложения
+- Любые компоненты, требующие доступа к теме
+
+## Внутренняя логика
+
+### CSS переменные
+Цвета темы применяются как CSS переменные с префиксом \`--color-\`:
+- \`--color-primary\`
+- \`--color-background\`
+- \`--color-text\`
+- И другие цвета из объекта темы
+
+### Provide/Inject
+Компоненты могут получить доступ к теме через inject:
+\`\`\`javascript
+const theme = inject('theme');
+theme.setTheme('dark');
+\`\`\`
+
+### Сохранение темы
+Если \`persist={true}\`, тема сохраняется в localStorage и восстанавливается при загрузке.
+
+## Особенности
+
+### Системная тема
+При \`useSystemTheme={true}\` автоматически определяется системная тема через \`prefers-color-scheme\`.
+
+### Динамическое переключение
+Тема может быть изменена динамически, все CSS переменные обновляются автоматически.
+        `,
+      },
+    },
+  },
+  argTypes: {
+    theme: {
+      control: 'text',
+      description: 'Текущая тема.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'light' },
+        category: 'Theme',
+      },
+    },
+    persist: {
+      control: 'boolean',
+      description: 'Сохранять тему в localStorage.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Behavior',
+      },
+    },
+    useSystemTheme: {
+      control: 'boolean',
+      description: 'Использовать системную тему (prefers-color-scheme).',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Behavior',
+      },
+    },
+  },
+};
+
+const defaultThemes = {
+  light: {
+    name: 'Светлая',
+    colors: {
+      primary: '#007bff',
+      background: '#ffffff',
+      text: '#000000',
+      border: '#e5e7eb',
+      surface: '#f9fafb',
+    },
+  },
+  dark: {
+    name: 'Темная',
+    colors: {
+      primary: '#0d6efd',
+      background: '#1a1a1a',
+      text: '#ffffff',
+      border: '#374151',
+      surface: '#2d2d2d',
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    theme: 'light',
+    themes: defaultThemes,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Базовое использование провайдера тем с переключением между светлой и темной темой.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXThemeProvider, DXCard, DXButton },
+    setup() {
+      const theme = ref(args.theme);
+      const themes = ref(args.themes);
+      
+      const toggleTheme = () => {
+        theme.value = theme.value === 'light' ? 'dark' : 'light';
+      };
+      
+      return { theme, themes, toggleTheme };
+    },
+    template: `
+      <DXThemeProvider :theme="theme" :themes="themes">
+        <div class="min-h-screen p-8" style="background-color: var(--color-background, #ffffff); color: var(--color-text, #000000);">
+          <div class="space-y-4">
+            <DXButton @click="toggleTheme">
+              Переключить тему ({{ theme === 'light' ? 'Темная' : 'Светлая' }})
+            </DXButton>
+            <DXCard class="p-4" style="background-color: var(--color-surface, #f9fafb); border-color: var(--color-border, #e5e7eb);">
+              <h2 class="text-xl font-semibold mb-2">Текущая тема: {{ theme }}</h2>
+              <p>Этот контент использует цвета текущей темы через CSS переменные.</p>
+              <div class="mt-4 p-3 rounded" style="background-color: var(--color-primary, #007bff); color: white;">
+                Primary цвет темы
+              </div>
+            </DXCard>
+          </div>
+        </div>
+      </DXThemeProvider>
+    `,
+  }),
+};
+
+export const WithPersistence = {
+  args: {
+    theme: 'light',
+    themes: defaultThemes,
+    persist: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Провайдер с сохранением темы в localStorage. Тема сохраняется и восстанавливается при перезагрузке.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXThemeProvider, DXCard, DXButton },
+    setup() {
+      const theme = ref(args.theme);
+      const themes = ref(args.themes);
+      
+      const toggleTheme = () => {
+        theme.value = theme.value === 'light' ? 'dark' : 'light';
+      };
+      
+      return { theme, themes, toggleTheme };
+    },
+    template: `
+      <DXThemeProvider :theme="theme" :themes="themes" :persist="true">
+        <div class="min-h-screen p-8" style="background-color: var(--color-background, #ffffff); color: var(--color-text, #000000);">
+          <div class="space-y-4">
+            <DXCard class="p-4" style="background-color: var(--color-surface, #f9fafb);">
+              <p class="mb-2">Тема сохраняется в localStorage</p>
+              <p class="text-sm text-slate-500">Перезагрузите страницу, чтобы увидеть сохранение</p>
+            </DXCard>
+            <DXButton @click="toggleTheme">
+              Переключить тему ({{ theme === 'light' ? 'Темная' : 'Светлая' }})
+            </DXButton>
+          </div>
+        </div>
+      </DXThemeProvider>
+    `,
+  }),
+};
+
+export const WithInject = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Использование темы через inject в дочерних компонентах.',
+      },
+    },
+  },
+  render: () => ({
+    components: { DXThemeProvider, DXCard, DXButton },
+    setup() {
+      const themes = ref(defaultThemes);
+      
+      // Компонент, использующий inject
+      const ThemedComponent = {
+        setup() {
+          const theme = inject('theme');
+          return { theme };
+        },
+        template: `
+          <DXCard class="p-4" style="background-color: var(--color-surface, #f9fafb);">
+            <h3 class="font-semibold mb-2">Доступ к теме через inject</h3>
+            <p class="mb-2">Текущая тема: {{ theme.currentTheme.value }}</p>
+            <p class="mb-2">Доступные темы: {{ theme.availableThemes.value.join(', ') }}</p>
+            <DXButton @click="theme.setTheme()" size="sm">
+              Переключить тему
+            </DXButton>
+          </DXCard>
+        `,
+      };
+      
+      return { themes, ThemedComponent };
+    },
+    template: `
+      <DXThemeProvider :themes="themes">
+        <div class="min-h-screen p-8" style="background-color: var(--color-background, #ffffff); color: var(--color-text, #000000);">
+          <ThemedComponent />
+        </div>
+      </DXThemeProvider>
+    `,
+  }),
+};
+
+export const CustomThemes = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Кастомные темы с дополнительными цветами.',
+      },
+    },
+  },
+  render: () => ({
+    components: { DXThemeProvider, DXCard, DXButton },
+    setup() {
+      const theme = ref('blue');
+      const themes = ref({
+        blue: {
+          name: 'Синяя',
+          colors: {
+            primary: '#3b82f6',
+            background: '#eff6ff',
+            text: '#1e3a8a',
+            border: '#93c5fd',
+            surface: '#dbeafe',
+          },
+        },
+        green: {
+          name: 'Зеленая',
+          colors: {
+            primary: '#10b981',
+            background: '#ecfdf5',
+            text: '#065f46',
+            border: '#6ee7b7',
+            surface: '#d1fae5',
+          },
+        },
+        purple: {
+          name: 'Фиолетовая',
+          colors: {
+            primary: '#8b5cf6',
+            background: '#f5f3ff',
+            text: '#5b21b6',
+            border: '#c4b5fd',
+            surface: '#e9d5ff',
+          },
+        },
+      });
+      
+      const setTheme = (themeName) => {
+        theme.value = themeName;
+      };
+      
+      return { theme, themes, setTheme };
+    },
+    template: `
+      <DXThemeProvider :theme="theme" :themes="themes">
+        <div class="min-h-screen p-8" style="background-color: var(--color-background, #ffffff); color: var(--color-text, #000000);">
+          <div class="space-y-4">
+            <div class="flex gap-2">
+              <DXButton
+                v-for="(themeData, themeName) in themes"
+                :key="themeName"
+                :variant="theme === themeName ? 'primary' : 'ghost'"
+                @click="setTheme(themeName)"
+              >
+                {{ themeData.name }}
+              </DXButton>
+            </div>
+            <DXCard class="p-4" style="background-color: var(--color-surface, #f9fafb); border-color: var(--color-border, #e5e7eb);">
+              <h2 class="text-xl font-semibold mb-2">Текущая тема: {{ theme }}</h2>
+              <div class="mt-4 p-3 rounded" style="background-color: var(--color-primary, #007bff); color: white;">
+                Primary цвет темы
+              </div>
+            </DXCard>
+          </div>
+        </div>
+      </DXThemeProvider>
+    `,
+  }),
+};
+

package/src/components/utilities/DXThemeProvider/DXThemeProvider.vue

@@ -0,0 +1,227 @@
+<template>
+  <div
+    :class="providerClasses"
+    :data-theme="currentTheme"
+    data-component="DXThemeProvider"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, provide, onMounted } from "vue";
+import { useClassComposition } from "@/composables/useClassComposition";
+
+const props = defineProps({
+  /**
+   * Текущая тема
+   * @default 'light'
+   */
+  theme: {
+    type: String,
+    default: "light",
+  },
+  /**
+   * Объект с доступными темами
+   * Формат: { themeName: { name, colors: { primary, background, text, ... } } }
+   * @default {}
+   */
+  themes: {
+    type: Object,
+    default: () => ({}),
+  },
+  /**
+   * Сохранять тему в localStorage
+   * @default false
+   */
+  persist: { type: Boolean, default: false },
+  /**
+   * Ключ для сохранения в localStorage
+   * @default 'dx-theme'
+   */
+  storageKey: { type: String, default: "dx-theme" },
+  /**
+   * Использовать системную тему (prefers-color-scheme)
+   * @default false
+   */
+  useSystemTheme: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(["theme-change"]);
+
+const currentTheme = ref(props.theme);
+
+/**
+ * Классы для провайдера
+ * 
+ * @description
+ * Базовые классы для контейнера провайдера тем.
+ * 
+ * @returns {Array} Массив классов
+ */
+const providerClasses = computed(() => useClassComposition("w-full h-full"));
+
+/**
+ * Текущая тема с учетом системной
+ * 
+ * @description
+ * Возвращает текущую тему, учитывая системную тему если useSystemTheme включен.
+ * 
+ * @returns {string} Название текущей темы
+ */
+const effectiveTheme = computed(() => {
+  if (props.useSystemTheme) {
+    const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? "dark"
+      : "light";
+    return systemTheme;
+  }
+  return currentTheme.value;
+});
+
+/**
+ * Цвета текущей темы
+ * 
+ * @description
+ * Извлекает цвета из объекта themes для текущей темы.
+ * 
+ * @returns {Object} Объект с цветами темы
+ */
+const themeColors = computed(() => {
+  const theme = props.themes[effectiveTheme.value];
+  if (!theme || !theme.colors) {
+    return {};
+  }
+  return theme.colors;
+});
+
+/**
+ * Применение CSS переменных темы
+ * 
+ * @description
+ * Применяет цвета темы как CSS переменные к корневому элементу.
+ */
+function applyTheme() {
+  const colors = themeColors.value;
+  const root = document.documentElement;
+
+  Object.keys(colors).forEach((key) => {
+    const cssVar = `--color-${key}`;
+    root.style.setProperty(cssVar, colors[key]);
+  });
+
+  // Применяем класс темы к body для удобства стилизации
+  document.body.setAttribute("data-theme", effectiveTheme.value);
+}
+
+/**
+ * Загрузка темы из localStorage
+ * 
+ * @description
+ * Загружает сохраненную тему из localStorage если persist включен.
+ */
+function loadThemeFromStorage() {
+  if (!props.persist) return;
+
+  try {
+    const savedTheme = localStorage.getItem(props.storageKey);
+    if (savedTheme && props.themes[savedTheme]) {
+      currentTheme.value = savedTheme;
+      emit("theme-change", savedTheme);
+    }
+  } catch (error) {
+    console.warn("DXThemeProvider: Ошибка загрузки темы из localStorage", error);
+  }
+}
+
+/**
+ * Сохранение темы в localStorage
+ * 
+ * @description
+ * Сохраняет текущую тему в localStorage если persist включен.
+ */
+function saveThemeToStorage() {
+  if (!props.persist) return;
+
+  try {
+    localStorage.setItem(props.storageKey, currentTheme.value);
+  } catch (error) {
+    console.warn("DXThemeProvider: Ошибка сохранения темы в localStorage", error);
+  }
+}
+
+/**
+ * Переключение темы
+ * 
+ * @description
+ * Переключает тему на следующую из списка доступных тем.
+ * 
+ * @param {string} themeName - Название темы для переключения (опционально)
+ */
+function setTheme(themeName = null) {
+  const availableThemes = Object.keys(props.themes);
+  if (availableThemes.length === 0) return;
+
+  if (themeName && props.themes[themeName]) {
+    currentTheme.value = themeName;
+  } else {
+    // Переключение на следующую тему
+    const currentIndex = availableThemes.indexOf(currentTheme.value);
+    const nextIndex = (currentIndex + 1) % availableThemes.length;
+    currentTheme.value = availableThemes[nextIndex];
+  }
+
+  saveThemeToStorage();
+  emit("theme-change", currentTheme.value);
+}
+
+// Provide темы для дочерних компонентов
+provide("theme", {
+  currentTheme: computed(() => currentTheme.value),
+  effectiveTheme,
+  themeColors,
+  setTheme,
+  availableThemes: computed(() => Object.keys(props.themes)),
+});
+
+// Применение темы при изменении
+watch(
+  [effectiveTheme, () => props.themes],
+  () => {
+    applyTheme();
+  },
+  { immediate: true }
+);
+
+// Отслеживание изменений системной темы
+let systemThemeMediaQuery = null;
+if (props.useSystemTheme) {
+  systemThemeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+  systemThemeMediaQuery.addEventListener("change", () => {
+    applyTheme();
+  });
+}
+
+// Инициализация при монтировании
+onMounted(() => {
+  loadThemeFromStorage();
+  applyTheme();
+});
+
+// Реакция на изменение prop theme
+watch(
+  () => props.theme,
+  (newTheme) => {
+    if (newTheme !== currentTheme.value && props.themes[newTheme]) {
+      currentTheme.value = newTheme;
+      saveThemeToStorage();
+      emit("theme-change", newTheme);
+    }
+  }
+);
+</script>
+
+<style scoped>
+/* CSS переменные применяются динамически через JavaScript */
+</style>
+