neon/saahildcom
1
0
Fork 0
mirror of https://github.com/NeonGamerBot-QK/saahild.com.git synced 2025-07-28 00:54:06 +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

110
components/FeedbackCards.vue
View file

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