neon/saahildcom
1
0
Fork 0
mirror of https://github.com/NeonGamerBot-QK/saahild.com.git synced 2025-07-28 09:04:07 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

enhancement(lint): Fix lint errors for components/FeedbackCards.vue

Browse source 
Co-authored-by: NeonGamerBot-QK <neon@saahild.com>
Signed-off-by: zeon-neon[bot] <136533918+zeon-neon[bot]@users.noreply.github.com>
This commit is contained in:
zeon-neon[bot] 2025-07-25 02:28:21 +00:00 • committed by GitHub
parent 38b9af9ce3
commit 14a3753c4d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 61 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

42
components/FeedbackCards.vue
View file

@ -1,12 +1,21 @@
<template> <template>
<div class="flex justify-right items-right"> <div class="flex justify-right items-right">
<div class="relative w-80 h-96" @click="rotateStack" @touchstart="handleTouchStart" @touchend="handleTouchEnd"> <div
class="relative w-80 h-96"
@click="rotateStack"
@touchstart="handleTouchStart"
@touchend="handleTouchEnd"
>
<div <div
v-for="(card, index) in displayedCards" v-for="(card, index) in displayedCards"
:key="card.id" :key="card.id"
class="card w-full h-1/2 absolute top-0 left-0 cursor-pointer transition-transform duration-300" class="card w-full h-1/2 absolute top-0 left-0 cursor-pointer transition-transform duration-300"
:class="card.color" :class="card.color"
:style="{ zIndex: cards.length - index, transform: index === 0 ? 'translateY(0)' : 'translateY(-' + index * 10 + 'px)' }" :style="{
zIndex: cards.length - index,
transform:
index === 0 ? 'translateY(0)' : 'translateY(-' + index * 10 + 'px)',
}"
> >
<div class="card-body"> <div class="card-body">
<h2 class="card-title">{{ card.title }}</h2> <h2 class="card-title">{{ card.title }}</h2>
@ -18,32 +27,35 @@
</template> </template>
<script setup> <script setup>
import { ref, computed, watch } from 'vue' import { ref, computed, watch } from "vue";
const props = defineProps({ const props = defineProps({
cards: { cards: {
type: Array, type: Array,
required: true, required: true,
}, },
}) });
const cards = ref([...props.cards]) const cards = ref([...props.cards]);
watch(() => props.cards, (newVal) => { watch(
cards.value = [...newVal] () => props.cards,
}) (newVal) => {
cards.value = [...newVal];
},
);
const displayedCards = computed(() => [...cards.value].reverse()) const displayedCards = computed(() => [...cards.value].reverse());
function rotateStack() { function rotateStack() {
const top = cards.value.shift() const top = cards.value.shift();
cards.value.push(top) cards.value.push(top);
} }
let touchStartX = 0 let touchStartX = 0;
function handleTouchStart(e) { function handleTouchStart(e) {
touchStartX = e.touches[0].clientX touchStartX = e.touches[0].clientX;
} }
function handleTouchEnd(e) { function handleTouchEnd(e) {
const touchEndX = e.changedTouches[0].clientX const touchEndX = e.changedTouches[0].clientX;
if (touchStartX - touchEndX > 50) rotateStack() if (touchStartX - touchEndX > 50) rotateStack();
} }
</script> </script>