feat: Stack component

2026-03-07 14:39:30 -07:00 · 2025-07-13 17:56:45 +08:00
parent f44fbc0c8e
commit b4932d2695
6 changed files with 280 additions and 4 deletions
--- a/src/constants/Categories.ts
+++ b/src/constants/Categories.ts
@@ -63,7 +63,8 @@ export const CATEGORIES = [
      'Glass Icons',
      'Decay Card',
      'Flowing Menu',
-      'Elastic Slider'
+      'Elastic Slider',
+      'Stack'
    ]
  },
  {
--- a/src/constants/Components.ts
+++ b/src/constants/Components.ts
@@ -30,8 +30,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"),
-  'rotating-text': ()=> import("../demo/TextAnimations/RotatingTextDemo.vue"),
+  'scroll-reveal': () => import("../demo/TextAnimations/ScrollRevealDemo.vue"),
+  'rotating-text': () => import("../demo/TextAnimations/RotatingTextDemo.vue"),
  'glitch-text': () => import("../demo/TextAnimations/GlitchTextDemo.vue"),
 };

@@ -51,7 +51,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 = {
--- a/src/constants/code/Components/stackCode.ts
+++ b/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
+};
--- a/src/content/Components/Stack/CardRotate.vue
+++ b/src/content/Components/Stack/CardRotate.vue
@@ -0,0 +1,41 @@
+<template>
+  <Motion
+    as="div"
+    class="absolute cursor-grab"
+    :style="{ x, y, rotateX, rotateY }"
+    drag
+    :drag-constraints="{ top: 0, right: 0, bottom: 0, left: 0 }"
+    :dragElastic="0.6"
+    :whileTap="{ cursor: 'grabbing' }"
+    :onDragEnd="handleDragEnd"
+  >
+    <slot />
+  </Motion>
+</template>
+
+<script lang="ts" setup>
+import type { PanInfo } from 'motion-v';
+import { Motion, useMotionValue, useTransform } from 'motion-v';
+
+interface CardRotateProps {
+  sensitivity: number;
+}
+const { sensitivity } = defineProps<CardRotateProps>();
+const emits = defineEmits<{
+  (e: 'sendToBack'): void;
+}>();
+
+const x = useMotionValue(0);
+const y = useMotionValue(0);
+const rotateX = useTransform(y, [-100, 100], [60, -60]);
+const rotateY = useTransform(x, [-100, 100], [-60, 60]);
+
+function handleDragEnd(_: PointerEvent, info: PanInfo) {
+  if (Math.abs(info.offset.x) > sensitivity || Math.abs(info.offset.y) > sensitivity) {
+    emits('sendToBack');
+  } else {
+    x.set(0);
+    y.set(0);
+  }
+}
+</script>
--- a/src/content/Components/Stack/Stack.vue
+++ b/src/content/Components/Stack/Stack.vue
@@ -0,0 +1,77 @@
+<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">
+      <CardRotate :sensitivity="sensitivity" @send-to-back="sendToBack(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>
+      </CardRotate>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Motion } from 'motion-v';
+import { ref } from 'vue';
+import CardRotate from './CardRotate.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' }
+      ]
+);
+
+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>
--- a/src/demo/Components/StackDemo.vue
+++ b/src/demo/Components/StackDemo.vue
@@ -0,0 +1,130 @@
+<template>
+  <div class="spotlight-card-demo">
+    <TabbedLayout>
+      <template #preview>
+        <div class="demo-container relative py-10">
+          <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>
+
+<style>
+.custom-spotlight-card {
+  min-height: 200px;
+  max-width: 400px;
+}
+</style>