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