dxd-style-code 0.1.7 → 0.1.8

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

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

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

@@ -0,0 +1,368 @@
+import { ref } from 'vue';
+import DXTransitionGroup from './DXTransitionGroup.vue';
+import DXCard from '../../atoms/DXCard/DXCard.vue';
+import DXButton from '../../atoms/DXButton/DXButton.vue';
+
+export default {
+  title: 'Utilities/DXTransitionGroup',
+  component: DXTransitionGroup,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXTransitionGroup
+
+Компонент для групповых анимаций списков элементов с поддержкой различных типов переходов.
+
+## Назначение
+
+DXTransitionGroup предоставляет обертку над Vue \`<TransitionGroup>\` с предустановленными анимациями
+для списков, сеток и коллекций элементов. Автоматически анимирует добавление, удаление и перемещение элементов.
+
+## Архитектура
+
+### Использует
+- Vue \`<TransitionGroup>\` - встроенный компонент Vue для групповых анимаций
+- \`useAnimation\` composable - для transition конфигураций
+- \`useClassComposition\` composable - для стилей
+
+### Используется в
+- \`DXList\` - для анимации элементов списка
+- \`DXTable\` - для анимации строк таблицы
+- Любые компоненты со списками элементов
+
+## Внутренняя логика
+
+### Типы анимаций
+- **fade**: Плавное появление/исчезание
+- **fade-scale**: Появление/исчезание с масштабированием
+- **slide-right**: Скольжение справа налево
+- **slide-left**: Скольжение слева направо
+- **slide-up**: Скольжение снизу вверх
+- **slide-down**: Скольжение сверху вниз
+
+### Move анимация
+TransitionGroup автоматически анимирует перемещение элементов при изменении порядка.
+
+## Особенности
+
+### Кастомные имена
+Можно указать кастомное имя transition через prop \`name\` для использования собственных CSS классов.
+
+### Длительность
+Длительность анимации настраивается через prop \`duration\` и применяется ко всем CSS transitions.
+        `,
+      },
+    },
+  },
+  argTypes: {
+    name: {
+      control: 'text',
+      description: 'Имя transition (используется для CSS классов).',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'fade' },
+        category: 'Appearance',
+      },
+    },
+    tag: {
+      control: 'text',
+      description: 'HTML тег для TransitionGroup.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'div' },
+        category: 'Appearance',
+      },
+    },
+    type: {
+      control: 'select',
+      options: ['fade', 'fade-scale', 'slide-right', 'slide-left', 'slide-up', 'slide-down'],
+      description: 'Тип анимации.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'fade' },
+        category: 'Appearance',
+      },
+    },
+    duration: {
+      control: 'number',
+      min: 0,
+      max: 2000,
+      step: 50,
+      description: 'Длительность анимации в миллисекундах.',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '200' },
+        category: 'Appearance',
+      },
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    type: 'fade',
+    tag: 'div',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Базовое использование для анимации списка элементов с fade эффектом.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXTransitionGroup, DXCard, DXButton },
+    setup() {
+      const items = ref([
+        { id: 1, name: 'Элемент 1' },
+        { id: 2, name: 'Элемент 2' },
+        { id: 3, name: 'Элемент 3' },
+      ]);
+      
+      const addItem = () => {
+        const newId = Math.max(...items.value.map(i => i.id)) + 1;
+        items.value.push({ id: newId, name: `Элемент ${newId}` });
+      };
+      
+      const removeItem = (id) => {
+        items.value = items.value.filter(item => item.id !== id);
+      };
+      
+      return { args, items, addItem, removeItem };
+    },
+    template: `
+      <div class="space-y-4">
+        <DXButton @click="addItem">Добавить элемент</DXButton>
+        <DXTransitionGroup v-bind="args" class="space-y-2">
+          <DXCard
+            v-for="item in items"
+            :key="item.id"
+            class="p-4 flex items-center justify-between"
+          >
+            <span>{{ item.name }}</span>
+            <DXButton size="sm" variant="ghost" @click="removeItem(item.id)">
+              Удалить
+            </DXButton>
+          </DXCard>
+        </DXTransitionGroup>
+      </div>
+    `,
+  }),
+};
+
+export const FadeScale = {
+  args: {
+    type: 'fade-scale',
+    tag: 'div',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Анимация с масштабированием - элементы появляются с увеличением масштаба.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXTransitionGroup, DXCard, DXButton },
+    setup() {
+      const items = ref([
+        { id: 1, name: 'Карточка 1' },
+        { id: 2, name: 'Карточка 2' },
+      ]);
+      
+      const addItem = () => {
+        const newId = Math.max(...items.value.map(i => i.id)) + 1;
+        items.value.push({ id: newId, name: `Карточка ${newId}` });
+      };
+      
+      const removeItem = (id) => {
+        items.value = items.value.filter(item => item.id !== id);
+      };
+      
+      return { args, items, addItem, removeItem };
+    },
+    template: `
+      <div class="space-y-4">
+        <DXButton @click="addItem">Добавить карточку</DXButton>
+        <DXTransitionGroup v-bind="args" class="grid grid-cols-3 gap-4">
+          <DXCard
+            v-for="item in items"
+            :key="item.id"
+            class="p-4"
+          >
+            <h3 class="font-semibold mb-2">{{ item.name }}</h3>
+            <DXButton size="sm" variant="ghost" @click="removeItem(item.id)">
+              Удалить
+            </DXButton>
+          </DXCard>
+        </DXTransitionGroup>
+      </div>
+    `,
+  }),
+};
+
+export const SlideRight = {
+  args: {
+    type: 'slide-right',
+    tag: 'ul',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Анимация скольжения справа налево. Элементы появляются слева и исчезают вправо.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXTransitionGroup, DXCard, DXButton },
+    setup() {
+      const items = ref([
+        { id: 1, name: 'Задача 1' },
+        { id: 2, name: 'Задача 2' },
+      ]);
+      
+      const addItem = () => {
+        const newId = Math.max(...items.value.map(i => i.id)) + 1;
+        items.value.push({ id: newId, name: `Задача ${newId}` });
+      };
+      
+      const removeItem = (id) => {
+        items.value = items.value.filter(item => item.id !== id);
+      };
+      
+      return { args, items, addItem, removeItem };
+    },
+    template: `
+      <div class="space-y-4">
+        <DXButton @click="addItem">Добавить задачу</DXButton>
+        <DXTransitionGroup v-bind="args" class="space-y-2 list-none">
+          <li
+            v-for="item in items"
+            :key="item.id"
+          >
+            <DXCard class="p-4 flex items-center justify-between">
+              <span>{{ item.name }}</span>
+              <DXButton size="sm" variant="ghost" @click="removeItem(item.id)">
+                Удалить
+              </DXButton>
+            </DXCard>
+          </li>
+        </DXTransitionGroup>
+      </div>
+    `,
+  }),
+};
+
+export const CustomDuration = {
+  args: {
+    type: 'fade',
+    duration: 500,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Кастомная длительность анимации. В этом примере анимация длится 500ms вместо стандартных 200ms.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXTransitionGroup, DXCard, DXButton },
+    setup() {
+      const items = ref([
+        { id: 1, name: 'Элемент 1' },
+        { id: 2, name: 'Элемент 2' },
+      ]);
+      
+      const addItem = () => {
+        const newId = Math.max(...items.value.map(i => i.id)) + 1;
+        items.value.push({ id: newId, name: `Элемент ${newId}` });
+      };
+      
+      const removeItem = (id) => {
+        items.value = items.value.filter(item => item.id !== id);
+      };
+      
+      return { args, items, addItem, removeItem };
+    },
+    template: `
+      <div class="space-y-4">
+        <DXButton @click="addItem">Добавить элемент</DXButton>
+        <DXTransitionGroup v-bind="args" class="space-y-2">
+          <DXCard
+            v-for="item in items"
+            :key="item.id"
+            class="p-4 flex items-center justify-between"
+          >
+            <span>{{ item.name }}</span>
+            <DXButton size="sm" variant="ghost" @click="removeItem(item.id)">
+              Удалить
+            </DXButton>
+          </DXCard>
+        </DXTransitionGroup>
+      </div>
+    `,
+  }),
+};
+
+export const AllTypes = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Демонстрация всех типов анимаций. Переключайте тип через контролы.',
+      },
+    },
+  },
+  render: () => ({
+    components: { DXTransitionGroup, DXCard, DXButton },
+    setup() {
+      const type = ref('fade');
+      const items = ref([
+        { id: 1, name: 'Элемент 1' },
+        { id: 2, name: 'Элемент 2' },
+        { id: 3, name: 'Элемент 3' },
+      ]);
+      
+      const addItem = () => {
+        const newId = Math.max(...items.value.map(i => i.id)) + 1;
+        items.value.push({ id: newId, name: `Элемент ${newId}` });
+      };
+      
+      const removeItem = (id) => {
+        items.value = items.value.filter(item => item.id !== id);
+      };
+      
+      return { type, items, addItem, removeItem };
+    },
+    template: `
+      <div class="space-y-4">
+        <div class="flex gap-2">
+          <DXButton
+            v-for="t in ['fade', 'fade-scale', 'slide-right', 'slide-left', 'slide-up', 'slide-down']"
+            :key="t"
+            :variant="type === t ? 'primary' : 'ghost'"
+            size="sm"
+            @click="type = t"
+          >
+            {{ t }}
+          </DXButton>
+        </div>
+        <DXButton @click="addItem">Добавить элемент</DXButton>
+        <DXTransitionGroup :type="type" class="space-y-2">
+          <DXCard
+            v-for="item in items"
+            :key="item.id"
+            class="p-4 flex items-center justify-between"
+          >
+            <span>{{ item.name }}</span>
+            <DXButton size="sm" variant="ghost" @click="removeItem(item.id)">
+              Удалить
+            </DXButton>
+          </DXCard>
+        </DXTransitionGroup>
+      </div>
+    `,
+  }),
+};
+

package/src/components/utilities/DXTransitionGroup/DXTransitionGroup.vue

@@ -0,0 +1,212 @@
+<template>
+  <TransitionGroup
+    :tag="tag"
+    :name="transitionName"
+    :class="transitionClasses"
+    :data-component="'DXTransitionGroup'"
+    :data-type="type"
+    :data-duration="duration"
+    v-bind="$attrs"
+  >
+    <slot />
+  </TransitionGroup>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useClassComposition } from "@/composables/useClassComposition";
+import {
+  FADE_TRANSITION,
+  FADE_SCALE_TRANSITION,
+  SLIDE_RIGHT_TRANSITION,
+  SLIDE_LEFT_TRANSITION,
+  SLIDE_UP_TRANSITION,
+  SLIDE_DOWN_TRANSITION,
+} from "@/composables/useAnimation";
+
+const props = defineProps({
+  /**
+   * Имя transition (используется для CSS классов)
+   * @default 'fade'
+   */
+  name: { type: String, default: "fade" },
+  /**
+   * HTML тег для TransitionGroup
+   * @default 'div'
+   */
+  tag: { type: String, default: "div" },
+  /**
+   * Тип анимации: fade | fade-scale | slide-right | slide-left | slide-up | slide-down
+   * @default 'fade'
+   */
+  type: {
+    type: String,
+    default: "fade",
+    validator: (v) =>
+      [
+        "fade",
+        "fade-scale",
+        "slide-right",
+        "slide-left",
+        "slide-up",
+        "slide-down",
+      ].includes(v),
+  },
+  /**
+   * Длительность анимации в миллисекундах
+   * @default 200
+   */
+  duration: { type: Number, default: 200 },
+});
+
+/**
+ * Имя transition для CSS классов
+ * 
+ * @description
+ * Используется для генерации CSS классов анимации.
+ * Если указан кастомный name, используется он, иначе генерируется на основе type.
+ * 
+ * @returns {string} Имя transition
+ */
+const transitionName = computed(() => {
+  if (props.name !== "fade") {
+    return props.name;
+  }
+  return props.type;
+});
+
+/**
+ * Классы для TransitionGroup
+ * 
+ * @description
+ * Базовые классы для контейнера TransitionGroup.
+ * 
+ * @returns {Array} Массив классов
+ */
+const transitionClasses = computed(() => useClassComposition());
+
+/**
+ * Конфигурация transition на основе типа
+ * 
+ * @description
+ * Возвращает конфигурацию transition из useAnimation composable
+ * в зависимости от выбранного типа анимации.
+ * 
+ * @returns {Object} Конфигурация transition
+ */
+const transitionConfig = computed(() => {
+  const configs = {
+    fade: FADE_TRANSITION,
+    "fade-scale": FADE_SCALE_TRANSITION,
+    "slide-right": SLIDE_RIGHT_TRANSITION,
+    "slide-left": SLIDE_LEFT_TRANSITION,
+    "slide-up": SLIDE_UP_TRANSITION,
+    "slide-down": SLIDE_DOWN_TRANSITION,
+  };
+  return configs[props.type] || FADE_TRANSITION;
+});
+</script>
+
+<style scoped>
+/* Fade transition */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity v-bind("duration + 'ms'") ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/* Fade scale transition */
+.fade-scale-enter-active,
+.fade-scale-leave-active {
+  transition: all v-bind("duration + 'ms'") ease-out;
+}
+
+.fade-scale-enter-from {
+  opacity: 0;
+  transform: scale(0.95);
+}
+
+.fade-scale-leave-to {
+  opacity: 0;
+  transform: scale(0.95);
+}
+
+/* Slide right transition */
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: all v-bind("duration + 'ms'") ease-out;
+}
+
+.slide-right-enter-from {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.slide-right-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+/* Slide left transition */
+.slide-left-enter-active,
+.slide-left-leave-active {
+  transition: all v-bind("duration + 'ms'") ease-out;
+}
+
+.slide-left-enter-from {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+.slide-left-leave-to {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+/* Slide up transition */
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: all v-bind("duration + 'ms'") ease-out;
+}
+
+.slide-up-enter-from {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+.slide-up-leave-to {
+  opacity: 0;
+  transform: translateY(-30px);
+}
+
+/* Slide down transition */
+.slide-down-enter-active,
+.slide-down-leave-active {
+  transition: all v-bind("duration + 'ms'") ease-out;
+}
+
+.slide-down-enter-from {
+  opacity: 0;
+  transform: translateY(-30px);
+}
+
+.slide-down-leave-to {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+/* Move transition для TransitionGroup */
+.fade-move,
+.fade-scale-move,
+.slide-right-move,
+.slide-left-move,
+.slide-up-move,
+.slide-down-move {
+  transition: transform v-bind("duration + 'ms'") ease;
+}
+</style>
+

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

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

package/src/components/utilities/index.js

@@ -0,0 +1,9 @@
+// Utility components
+export { default as DXAnimatePresence } from './DXAnimatePresence';
+export { default as DXBreakpointProvider } from './DXBreakpointProvider';
+export { default as DXObserver } from './DXObserver';
+export { default as DXPortal } from './DXPortal';
+export { default as DXStaggeredAnimation } from './DXStaggeredAnimation';
+export { default as DXThemeProvider } from './DXThemeProvider';
+export { default as DXTransitionGroup } from './DXTransitionGroup';
+