Merge pull request #14 from Whbbit1999/stack-component

feat: Stack component

src/constants/Categories.ts

@@ -67,7 +67,8 @@ export const CATEGORIES = [
       'Glass Icons',
       'Decay Card',
       'Flowing Menu',
-      'Elastic Slider'
+      'Elastic Slider',
+      'Stack'
     ]
   },
   {

src/constants/Components.ts

@@ -34,8 +34,8 @@ const textAnimations = {
   'scramble-text': () => import("../demo/TextAnimations/ScrambleTextDemo.vue"),
   'true-focus': () => import("../demo/TextAnimations/TrueFocusDemo.vue"),
   'scroll-float': () => import("../demo/TextAnimations/ScrollFloatDemo.vue"),
-  'scroll-reveal': ()=> import("../demo/TextAnimations/ScrollRevealDemo.vue"),
+  'scroll-reveal': () => import("../demo/TextAnimations/ScrollRevealDemo.vue"),
-  'rotating-text': ()=> import("../demo/TextAnimations/RotatingTextDemo.vue"),
+  'rotating-text': () => import("../demo/TextAnimations/RotatingTextDemo.vue"),
   'glitch-text': () => import("../demo/TextAnimations/GlitchTextDemo.vue"),
 };
 
@@ -55,7 +55,8 @@ const components = {
   'decay-card': () => import('../demo/Components/DecayCardDemo.vue'),
   'flowing-menu': () => import('../demo/Components/FlowingMenuDemo.vue'),
   'elastic-slider': () => import('../demo/Components/ElasticSliderDemo.vue'),
-  'tilted-card': () => import('../demo/Components/TiltedCardDemo.vue')
+  'tilted-card': () => import('../demo/Components/TiltedCardDemo.vue'),
+  'stack': () => import('../demo/Components/StackDemo.vue'),
 };
 
 const backgrounds = {

src/constants/code/Components/stackCode.ts

@@ -0,0 +1,26 @@
+import code from '@content/Components/Stack/Stack.vue?raw';
+import type { CodeObject } from '../../../types/code';
+
+export const stack: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/Stack`,
+  usage: `<template>
+  <Stack
+    :randomRotation="true"
+    :sensitivity="180"
+    :sendToBackOnClick="false"
+    :cardDimensions="{ width: 200, height: 200 }"
+    :cardsData="images"
+  ></Stack>
+</template>
+
+<script setup lang="ts">
+  import Stack from './Stack.vue'
+  const images = [
+    { id: 1, img: "https://images.unsplash.com/photo-1480074568708-e7b720bb3f09?q=80&w=500&auto=format" },
+    { id: 2, img: "https://images.unsplash.com/photo-1449844908441-8829872d2607?q=80&w=500&auto=format" },
+    { id: 3, img: "https://images.unsplash.com/photo-1452626212852-811d58933cae?q=80&w=500&auto=format" },
+    { id: 4, img: "https://images.unsplash.com/photo-1572120360610-d971b9d7767c?q=80&w=500&auto=format" }
+  ];
+</script>`,
+  code
+};

src/content/Components/Stack/Stack.vue

@@ -0,0 +1,145 @@
+<template>
+  <div
+    class="relative"
+    :style="{ width: cardDimensions.width + 'px', height: cardDimensions.height + 'px', perspective: 600 }"
+  >
+    <template v-for="(card, index) in cards" :key="card.id">
+      <Motion
+        as="div"
+        class="absolute cursor-grab"
+        :style="{
+          x: cardStates.get(card.id)?.x,
+          y: cardStates.get(card.id)?.y,
+          rotateX: cardStates.get(card.id)?.rotateX,
+          rotateY: cardStates.get(card.id)?.rotateY
+        }"
+        drag
+        :drag-constraints="{ top: 0, right: 0, bottom: 0, left: 0 }"
+        :dragElastic="0.6"
+        :whileTap="{ cursor: 'grabbing', scale: 1.02 }"
+        :onDragEnd="(e, info) => handleDragEnd(e, info, card.id)"
+      >
+        <Motion
+          as="div"
+          class="rounded-2xl overflow-hidden border-4 border-white"
+          @click="sendToBackOnClick && sendToBack(card.id)"
+          :animate="{
+            rotateZ: (cards.length - index - 1) * 4 + (randomRotation ? Math.random() * 10 - 5 : 0),
+            scale: 1 + index * 0.06 - cards.length * 0.06,
+            transformOrigin: '90% 90%'
+          }"
+          :initial="false"
+          :transition="{
+            type: 'spring',
+            stiffness: animationConfig.stiffness,
+            damping: animationConfig.damping
+          }"
+          :style="{
+            width: cardDimensions.width + 'px',
+            height: cardDimensions.height + 'px'
+          }"
+        >
+          <img :src="card.img" :alt="`card-${card.id}`" className="w-full h-full object-cover pointer-events-none" />
+        </Motion>
+      </Motion>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PanInfo } from 'motion-v';
+import { Motion, useMotionValue, useTransform } from 'motion-v';
+import { onBeforeMount, ref } from 'vue';
+
+interface StackProps {
+  className?: string;
+  randomRotation?: boolean;
+  sensitivity?: number;
+  cardDimensions?: { width: number; height: number };
+  cardsData: { id: number; img: string }[];
+  animationConfig?: { stiffness: number; damping: number };
+  sendToBackOnClick?: boolean;
+}
+
+const props = withDefaults(defineProps<StackProps>(), {
+  randomRotation: false,
+  sensitivity: 200,
+  cardDimensions: () => ({ width: 208, height: 208 }),
+  cardsData: () => [],
+  animationConfig: () => ({ stiffness: 260, damping: 20 }),
+  sendToBackOnClick: false
+});
+
+const cards = ref(
+  props.cardsData.length
+    ? props.cardsData
+    : [
+        { id: 1, img: 'https://images.unsplash.com/photo-1480074568708-e7b720bb3f09?q=80&w=500&auto=format' },
+        { id: 2, img: 'https://images.unsplash.com/photo-1449844908441-8829872d2607?q=80&w=500&auto=format' },
+        { id: 3, img: 'https://images.unsplash.com/photo-1452626212852-811d58933cae?q=80&w=500&auto=format' },
+        { id: 4, img: 'https://images.unsplash.com/photo-1572120360610-d971b9d7767c?q=80&w=500&auto=format' }
+      ]
+);
+
+type CardState = {
+  x: ReturnType<typeof useMotionValue<number>>;
+  y: ReturnType<typeof useMotionValue<number>>;
+  rotateX: ReturnType<typeof useMotionValue<number>>;
+  rotateY: ReturnType<typeof useMotionValue<number>>;
+  reset: () => void;
+};
+
+const cardStates = new Map<number, CardState>();
+
+function createCardState(): CardState {
+  const x = useMotionValue(0);
+  const y = useMotionValue(0);
+
+  const rotateX = useTransform(y, [-100, 100], [60, -60]);
+  const rotateY = useTransform(x, [-100, 100], [-60, 60]);
+
+  return {
+    x,
+    y,
+    rotateX,
+    rotateY,
+    reset() {
+      x.set(0);
+      y.set(0);
+    }
+  };
+}
+
+onBeforeMount(() => {
+  cards.value.forEach(card => {
+    if (!cardStates.has(card.id)) {
+      cardStates.set(card.id, createCardState());
+    }
+  });
+});
+
+function getCardState(cardId: number): CardState {
+  let state = cardStates.get(cardId);
+  if (!state) {
+    state = createCardState();
+    cardStates.set(cardId, state);
+  }
+  return state;
+}
+
+function handleDragEnd(_: PointerEvent, info: PanInfo, cardId: number) {
+  if (Math.abs(info.offset.x) > props.sensitivity || Math.abs(info.offset.y) > props.sensitivity) {
+    sendToBack(cardId);
+  } else {
+    getCardState(cardId).reset();
+  }
+}
+
+const sendToBack = (id: number) => {
+  const newCards = [...cards.value];
+  const index = newCards.findIndex(card => card.id === id);
+  const [card] = newCards.splice(index, 1);
+  newCards.unshift(card);
+  cards.value = newCards;
+};
+</script>

src/demo/Components/StackDemo.vue

@@ -0,0 +1,123 @@
+<template>
+  <div>
+    <TabbedLayout>
+      <template #preview>
+        <div class="demo-container">
+          <Stack
+            :key="rerenderKey"
+            :randomRotation="randomRotation"
+            :sensitivity="sensitivity"
+            :sendToBackOnClick="false"
+            :cardDimensions="cardDimensions"
+            :cardsData="images"
+          ></Stack>
+        </div>
+
+        <Customize>
+          <PreviewSwitch title="Random Rotation" v-model="randomRotation" @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Sensitivity"
+            v-model="sensitivity"
+            :min="10"
+            :max="300"
+            :step="10"
+            @update:model-value="forceRerender"
+          />
+          <PreviewSlider
+            title="Card Width"
+            v-model="cardDimensions.width"
+            :min="10"
+            :max="300"
+            :step="10"
+            @update:model-value="forceRerender"
+          />
+          <PreviewSlider
+            title="Card Height"
+            v-model="cardDimensions.height"
+            :min="10"
+            :max="300"
+            :step="10"
+            @update:model-value="forceRerender"
+          />
+        </Customize>
+        <PropTable :data="propData" />
+      </template>
+
+      <template #code>
+        <CodeExample :code-object="stack" />
+      </template>
+
+      <template #cli>
+        <CliInstallation :command="stack.cli" />
+      </template>
+    </TabbedLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
+import Stack from '../../content/Components/Stack/Stack.vue';
+import { stack } from '@/constants/code/Components/stackCode';
+import { useForceRerender } from '@/composables/useForceRerender';
+import { ref } from 'vue';
+import PreviewSlider from '@/components/common/PreviewSlider.vue';
+
+const images = [
+  { id: 1, img: 'https://images.unsplash.com/photo-1480074568708-e7b720bb3f09?q=80&w=500&auto=format' },
+  { id: 2, img: 'https://images.unsplash.com/photo-1449844908441-8829872d2607?q=80&w=500&auto=format' },
+  { id: 3, img: 'https://images.unsplash.com/photo-1452626212852-811d58933cae?q=80&w=500&auto=format' },
+  { id: 4, img: 'https://images.unsplash.com/photo-1572120360610-d971b9d7767c?q=80&w=500&auto=format' }
+];
+
+const { rerenderKey, forceRerender } = useForceRerender();
+const randomRotation = ref<boolean>(false);
+const sensitivity = ref<number>(200);
+const cardDimensions = ref({
+  width: 208,
+  height: 208
+});
+
+const propData = [
+  {
+    name: 'randomRotation',
+    type: 'boolean',
+    default: '-',
+    description: `Applies a random rotation to each card for a 'messy' look.`
+  },
+  {
+    name: 'sensitivity',
+    type: 'number',
+    default: '-',
+    description: `Drag sensitivity for sending a card to the back.`
+  },
+  {
+    name: 'cardDimensions',
+    type: 'object',
+    default: '{ width: 208, height: 208 }',
+    description: `Defines the width and height of the cards.`
+  },
+  {
+    name: 'sendToBackOnClick',
+    type: 'boolean',
+    default: 'false',
+    description: `When enabled, the also stack shifts to the next card on click.`
+  },
+  {
+    name: 'cardsData',
+    type: 'array',
+    default: '[]',
+    description: 'The array of card data, including `id` and `img` properties.'
+  },
+  {
+    name: 'animationConfig',
+    type: 'object',
+    default: '{ stiffness: 260, damping: 20 }',
+    description: `Applies a random rotation to each card for a 'messy' look.`
+  }
+];
+</script>