dxd-style-code 0.1.7 → 0.1.9

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

@@ -0,0 +1,335 @@
+import { ref } from 'vue';
+import DXAnimatePresence from './DXAnimatePresence.vue';
+import DXCard from '../../atoms/DXCard/DXCard.vue';
+import DXButton from '../../atoms/DXButton/DXButton.vue';
+import DXModal from '../../organisms/DXModal/DXModal.vue';
+
+export default {
+  title: 'Utilities/DXAnimatePresence',
+  component: DXAnimatePresence,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXAnimatePresence
+
+Компонент для анимаций появления и исчезания элементов с поддержкой условного рендеринга.
+
+## Назначение
+
+DXAnimatePresence предоставляет обертку над Vue \`<Transition>\` с предустановленными анимациями
+для условного рендеринга элементов. Используется для анимации модальных окон, выпадающих меню, уведомлений.
+
+## Архитектура
+
+### Использует
+- Vue \`<Transition>\` - встроенный компонент Vue для анимаций
+- \`useAnimation\` composable - для transition конфигураций
+- \`useClassComposition\` composable - для стилей
+
+### Используется в
+- \`DXModal\` - для анимации открытия/закрытия
+- \`DXDropdown\` - для анимации выпадающих меню
+- \`DXToast\` - для анимации уведомлений
+- Любые компоненты с условным рендерингом
+
+## Внутренняя логика
+
+### Типы анимаций
+- **fade**: Плавное появление/исчезание
+- **fade-scale**: Появление/исчезание с масштабированием
+- **slide-right**: Скольжение справа налево
+- **slide-left**: Скольжение слева направо
+- **slide-up**: Скольжение снизу вверх
+- **slide-down**: Скольжение сверху вниз
+
+### Режимы
+- **default**: Одновременная анимация входа и выхода
+- **in-out**: Сначала выход, затем вход
+- **out-in**: Сначала вход, затем выход
+
+## Особенности
+
+### Условный рендеринг
+Компонент рендерит слот только когда \`show={true}\`, что позволяет оптимизировать производительность.
+
+### Кастомные имена
+Можно указать кастомное имя transition через prop \`name\` для использования собственных CSS классов.
+        `,
+      },
+    },
+  },
+  argTypes: {
+    show: {
+      control: 'boolean',
+      description: 'Показывать/скрывать элемент.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Behavior',
+      },
+    },
+    name: {
+      control: 'text',
+      description: 'Имя transition (используется для CSS классов).',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'fade' },
+        category: 'Appearance',
+      },
+    },
+    mode: {
+      control: 'select',
+      options: ['default', 'in-out', 'out-in'],
+      description: 'Режим transition: default (одновременно) | in-out (сначала выход) | out-in (сначала вход).',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'default' },
+        category: 'Behavior',
+      },
+    },
+    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',
+      },
+    },
+    appear: {
+      control: 'boolean',
+      description: 'Анимировать при первом появлении.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Behavior',
+      },
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    show: false,
+    type: 'fade',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Базовое использование для анимации появления/исчезания элемента.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXAnimatePresence, DXCard, DXButton },
+    setup() {
+      const show = ref(args.show);
+      return { show, args };
+    },
+    template: `
+      <div class="space-y-4">
+        <DXButton @click="show = !show">
+          {{ show ? 'Скрыть' : 'Показать' }}
+        </DXButton>
+        <DXAnimatePresence v-bind="args" :show="show">
+          <DXCard class="p-4">
+            <p>Этот элемент анимируется при появлении и исчезании</p>
+          </DXCard>
+        </DXAnimatePresence>
+      </div>
+    `,
+  }),
+};
+
+export const FadeScale = {
+  args: {
+    show: false,
+    type: 'fade-scale',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Анимация с масштабированием - элемент появляется с увеличением масштаба.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXAnimatePresence, DXCard, DXButton },
+    setup() {
+      const show = ref(args.show);
+      return { show, args };
+    },
+    template: `
+      <div class="space-y-4">
+        <DXButton @click="show = !show">
+          {{ show ? 'Скрыть' : 'Показать' }}
+        </DXButton>
+        <DXAnimatePresence v-bind="args" :show="show">
+          <DXCard class="p-4">
+            <p>Элемент с масштабированием</p>
+          </DXCard>
+        </DXAnimatePresence>
+      </div>
+    `,
+  }),
+};
+
+export const SlideUp = {
+  args: {
+    show: false,
+    type: 'slide-up',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Анимация скольжения снизу вверх. Полезно для модальных окон и уведомлений.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXAnimatePresence, DXCard, DXButton },
+    setup() {
+      const show = ref(args.show);
+      return { show, args };
+    },
+    template: `
+      <div class="space-y-4">
+        <DXButton @click="show = !show">
+          {{ show ? 'Скрыть' : 'Показать' }}
+        </DXButton>
+        <DXAnimatePresence v-bind="args" :show="show">
+          <DXCard class="p-4">
+            <p>Элемент скользит снизу вверх</p>
+          </DXCard>
+        </DXAnimatePresence>
+      </div>
+    `,
+  }),
+};
+
+export const WithModal = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Использование с модальным окном. Модальное окно анимируется при открытии и закрытии.',
+      },
+    },
+  },
+  render: () => ({
+    components: { DXAnimatePresence, DXModal, DXButton },
+    setup() {
+      const showModal = ref(false);
+      return { showModal };
+    },
+    template: `
+      <div>
+        <DXButton @click="showModal = true">Открыть модальное окно</DXButton>
+        <DXAnimatePresence type="fade-scale" :show="showModal">
+          <DXModal :open="showModal" @close="showModal = false">
+            <h2 class="text-xl font-semibold mb-4">Модальное окно</h2>
+            <p class="mb-4">Это модальное окно анимируется при открытии и закрытии.</p>
+            <DXButton @click="showModal = false">Закрыть</DXButton>
+          </DXModal>
+        </DXAnimatePresence>
+      </div>
+    `,
+  }),
+};
+
+export const ModeInOut = {
+  args: {
+    show: false,
+    type: 'fade',
+    mode: 'in-out',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Режим in-out - сначала выход старого элемента, затем вход нового.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXAnimatePresence, DXCard, DXButton },
+    setup() {
+      const show = ref(args.show);
+      const content = ref('Контент 1');
+      return { show, content, args };
+    },
+    template: `
+      <div class="space-y-4">
+        <div class="flex gap-2">
+          <DXButton @click="show = !show">
+            {{ show ? 'Скрыть' : 'Показать' }}
+          </DXButton>
+          <DXButton v-if="show" @click="content = content === 'Контент 1' ? 'Контент 2' : 'Контент 1'">
+            Переключить контент
+          </DXButton>
+        </div>
+        <DXAnimatePresence v-bind="args" :show="show">
+          <DXCard :key="content" class="p-4">
+            <p>{{ content }}</p>
+          </DXCard>
+        </DXAnimatePresence>
+      </div>
+    `,
+  }),
+};
+
+export const AllTypes = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Демонстрация всех типов анимаций. Переключайте тип через контролы.',
+      },
+    },
+  },
+  render: () => ({
+    components: { DXAnimatePresence, DXCard, DXButton },
+    setup() {
+      const show = ref(false);
+      const type = ref('fade');
+      const types = ['fade', 'fade-scale', 'slide-right', 'slide-left', 'slide-up', 'slide-down'];
+      return { show, type, types };
+    },
+    template: `
+      <div class="space-y-4">
+        <div class="flex gap-2 flex-wrap">
+          <DXButton
+            v-for="t in types"
+            :key="t"
+            :variant="type === t ? 'primary' : 'ghost'"
+            size="sm"
+            @click="type = t"
+          >
+            {{ t }}
+          </DXButton>
+        </div>
+        <DXButton @click="show = !show">
+          {{ show ? 'Скрыть' : 'Показать' }}
+        </DXButton>
+        <DXAnimatePresence :type="type" :show="show">
+          <DXCard class="p-4">
+            <p>Тип анимации: {{ type }}</p>
+          </DXCard>
+        </DXAnimatePresence>
+      </div>
+    `,
+  }),
+};
+

package/src/components/utilities/DXAnimatePresence/DXAnimatePresence.vue

@@ -0,0 +1,207 @@
+<template>
+  <Transition
+    :name="transitionName"
+    :mode="mode"
+    :appear="appear"
+    :data-component="'DXAnimatePresence'"
+    :data-type="type"
+    :data-duration="duration"
+    v-bind="transitionConfig"
+  >
+    <slot v-if="show" />
+  </Transition>
+</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,
+  useAnimationTransition,
+} from "@/composables/useAnimation";
+
+const props = defineProps({
+  /**
+   * Показывать/скрывать элемент
+   * @default false
+   */
+  show: { type: Boolean, default: false },
+  /**
+   * Имя transition (используется для CSS классов)
+   * @default 'fade'
+   */
+  name: { type: String, default: "fade" },
+  /**
+   * Режим transition: default | in-out | out-in
+   * @default 'default'
+   */
+  mode: {
+    type: String,
+    default: "default",
+    validator: (v) => ["default", "in-out", "out-in"].includes(v),
+  },
+  /**
+   * Тип анимации: 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 },
+  /**
+   * Анимировать при первом появлении
+   * @default false
+   */
+  appear: { type: Boolean, default: false },
+});
+
+/**
+ * Имя transition для CSS классов
+ * 
+ * @description
+ * Используется для генерации CSS классов анимации.
+ * Если указан кастомный name, используется он, иначе генерируется на основе type.
+ * 
+ * @returns {string} Имя transition
+ */
+const transitionName = computed(() => {
+  if (props.name !== "fade") {
+    return props.name;
+  }
+  return props.type;
+});
+
+/**
+ * Конфигурация 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);
+}
+</style>
+

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

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