atridad/vue-bits
1
0
Fork 0
mirror of https://github.com/DavidHDev/vue-bits.git synced 2026-03-09 00:19:31 -06:00
Code Issues Packages Projects Releases Wiki Activity

Add prettier config, format codebase

Browse Source
This commit is contained in:
David Haz
2025-07-12 11:59:33 +03:00
parent ac8b2c04d8
commit f4d97ee94e
211 changed files with 10586 additions and 8810 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/content/Components/SpotlightCard/SpotlightCard.vue
View File

@@ -1,59 +1,67 @@
<template>
<div ref="divRef" @mousemove="handleMouseMove" @focus="handleFocus" @blur="handleBlur" @mouseenter="handleMouseEnter"
@mouseleave="handleMouseLeave" :class="[
'relative rounded-3xl border overflow-hidden p-8',
className
]">
<div class="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-500 ease-in-out" :style="{
opacity,
background: `radial-gradient(circle at ${position.x}px ${position.y}px, ${spotlightColor}, transparent 80%)`,
}" />
<div
ref="divRef"
@mousemove="handleMouseMove"
@focus="handleFocus"
@blur="handleBlur"
@mouseenter="handleMouseEnter"
@mouseleave="handleMouseLeave"
:class="['relative rounded-3xl border overflow-hidden p-8', className]"
>
<div
class="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-500 ease-in-out"
:style="{
opacity,
background: `radial-gradient(circle at ${position.x}px ${position.y}px, ${spotlightColor}, transparent 80%)`
}"
/>
<slot />
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { ref } from 'vue';
interface Position {
x: number
y: number
x: number;
y: number;
}
interface SpotlightCardProps {
className?: string
spotlightColor?: string
className?: string;
spotlightColor?: string;
}
const { className = '', spotlightColor = 'rgba(255, 255, 255, 0.25)' } = defineProps<SpotlightCardProps>()
const { className = '', spotlightColor = 'rgba(255, 255, 255, 0.25)' } = defineProps<SpotlightCardProps>();
const divRef = ref<HTMLDivElement>()
const isFocused = ref<boolean>(false)
const position = ref<Position>({ x: 0, y: 0 })
const opacity = ref<number>(0)
const divRef = ref<HTMLDivElement>();
const isFocused = ref<boolean>(false);
const position = ref<Position>({ x: 0, y: 0 });
const opacity = ref<number>(0);
const handleMouseMove = (e: MouseEvent) => {
if (!divRef.value || isFocused.value) return
if (!divRef.value || isFocused.value) return;
const rect = divRef.value.getBoundingClientRect()
position.value = { x: e.clientX - rect.left, y: e.clientY - rect.top }
}
const rect = divRef.value.getBoundingClientRect();
position.value = { x: e.clientX - rect.left, y: e.clientY - rect.top };
};
const handleFocus = () => {
isFocused.value = true
opacity.value = 0.6
}
isFocused.value = true;
opacity.value = 0.6;
};
const handleBlur = () => {
isFocused.value = false
opacity.value = 0
}
isFocused.value = false;
opacity.value = 0;
};
const handleMouseEnter = () => {
opacity.value = 0.6
}
opacity.value = 0.6;
};
const handleMouseLeave = () => {
opacity.value = 0
}
</script>
opacity.value = 0;
};
</script>