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

refactor(ChromaGrid): replace ref with useTemplateRef and reactive for improved reactivity

Browse Source
This commit is contained in:
David Haz
2025-07-18 14:46:47 +03:00
parent c44a383014
commit 94c4cdd704
1 changed files with 23 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/content/Components/ChromaGrid/ChromaGrid.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, computed } from 'vue'; import { onMounted, computed, useTemplateRef, shallowRef, reactive } from 'vue';
import gsap from 'gsap'; import gsap from 'gsap';
interface CardItem { interface CardItem {
@@ -31,11 +31,11 @@ const props = withDefaults(defineProps<GridMotionProps>(), {
ease: 'power3.out' ease: 'power3.out'
}); });
const rootRef = ref<HTMLElement | null>(null); const rootRef = useTemplateRef<HTMLElement>('rootRef');
const fadeRef = ref<HTMLElement | null>(null); const fadeRef = useTemplateRef<HTMLElement>('fadeRef');
const setX = ref<((value: number | string) => void) | null>(null); const setX = shallowRef<(value: number | string) => void>();
const setY = ref<((value: number | string) => void) | null>(null); const setY = shallowRef<(value: number | string) => void>();
const pos = ref({ x: 0, y: 0 }); const pos = reactive({ x: 0, y: 0 });
const demo: CardItem[] = [ const demo: CardItem[] = [
{ {
@@ -103,20 +103,21 @@ onMounted(() => {
setX.value = gsap.quickSetter(el, '--x', 'px') as (value: number | string) => void; setX.value = gsap.quickSetter(el, '--x', 'px') as (value: number | string) => void;
setY.value = gsap.quickSetter(el, '--y', 'px') as (value: number | string) => void; setY.value = gsap.quickSetter(el, '--y', 'px') as (value: number | string) => void;
const { width, height } = el.getBoundingClientRect(); const { width, height } = el.getBoundingClientRect();
pos.value = { x: width / 2, y: height / 2 }; pos.x = width / 2;
setX.value?.(pos.value.x); pos.y = height / 2;
setY.value?.(pos.value.y); setX.value?.(pos.x);
setY.value?.(pos.y);
}); });
const moveTo = (x: number, y: number) => { const moveTo = (x: number, y: number) => {
gsap.to(pos.value, { gsap.to(pos, {
x, x,
y, y,
duration: props.damping, duration: props.damping,
ease: props.ease, ease: props.ease,
onUpdate: () => { onUpdate: () => {
setX.value?.(pos.value.x); setX.value?.(pos.x);
setY.value?.(pos.value.y); setY.value?.(pos.y);
}, },
overwrite: true overwrite: true
}); });
@@ -126,15 +127,19 @@ const handleMove = (e: PointerEvent) => {
const r = rootRef.value?.getBoundingClientRect(); const r = rootRef.value?.getBoundingClientRect();
if (!r) return; if (!r) return;
moveTo(e.clientX - r.left, e.clientY - r.top); moveTo(e.clientX - r.left, e.clientY - r.top);
gsap.to(fadeRef.value, { opacity: 0, duration: 0.25, overwrite: true }); if (fadeRef.value) {
gsap.to(fadeRef.value, { opacity: 0, duration: 0.25, overwrite: true });
}
}; };
const handleLeave = () => { const handleLeave = () => {
gsap.to(fadeRef.value, { if (fadeRef.value) {
opacity: 1, gsap.to(fadeRef.value, {
duration: props.fadeOut, opacity: 1,
overwrite: true duration: props.fadeOut,
}); overwrite: true
});
}
}; };
const handleCardClick = (url?: string) => { const handleCardClick = (url?: string) => {