التوثيق الشامل - نظام التصميم

<!-- GlassCard.vue -->
<template>
  <div class="glass-card" :class="{ 'scan-effect': scanEffect }"
       :style="{ animationDelay: delay + 's' }"
       @mouseenter="onHover" @mouseleave="onLeave"
       ref="cardRef">
    <!-- Top highlight line -->
    <div class="glass-highlight" />
    <!-- Scan line (optional) -->
    <div v-if="scanEffect" class="scan-line" />
    <div class="relative z-10">
      <slot />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useMotion } from '@vueuse/motion'

const props = defineProps({
  delay: { type: Number, default: 0 },
  scanEffect: { type: Boolean, default: false }
})

const cardRef = ref(null)

// Entry animation using @vueuse/motion
onMounted(() => {
  if (cardRef.value) {
    useMotion(cardRef, {
      initial: { opacity: 0, y: 30, scale: 0.97 },
      enter: {
        opacity: 1, y: 0, scale: 1,
        transition: { delay: props.delay * 1000, duration: 600 }
      }
    })
  }
})

const onHover = (e) => {
  e.currentTarget.style.transform = 'translateY(-4px)'
}
const onLeave = (e) => {
  e.currentTarget.style.transform = 'translateY(0)'
}
</script>

<style scoped>
.glass-card {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.glass-card:hover {
  background: var(--glass-hover-bg);
  border-color: var(--glass-hover-border);
  box-shadow: var(--glass-hover-shadow);
}
.glass-highlight {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-border), transparent);
  animation: pulse-opacity 3s ease-in-out infinite;
}
.scan-line {
  position: absolute;
  width: 100%; height: 30%;
  background: linear-gradient(transparent, var(--scan-color), transparent);
  animation: scan-line 4s ease-in-out infinite;
}
@keyframes scan-line {
  0% { transform: translateY(-30%); }
  100% { transform: translateY(130%); }
}
</style>

<!-- Vuexy Integration: -->
<!-- Add to src/styles/glassmorphism.scss -->
<!-- Import in main.ts: import '@/styles/glassmorphism.scss' -->