67 lines
1.8 KiB
Vue
Executable file
67 lines
1.8 KiB
Vue
Executable file
<template>
|
|
<article
|
|
ref="root"
|
|
class="PriceCard card bg-blue"
|
|
:class="{ deleting }"
|
|
>
|
|
<header class="padding">
|
|
<div class="name-price">
|
|
<span>{{ card.name || 'Kein Name' }}</span>
|
|
<span>{{ intl.format(card.price)}}</span>
|
|
</div>
|
|
<PpButton class="text-white" @click="update()">
|
|
<Icon class="icon" name="uil:ellipsis-v" mode="svg" />
|
|
</PpButton>
|
|
</header>
|
|
<main class="wrapper padding">
|
|
<div class="info flex-col">
|
|
<div class="price">
|
|
<Icon class="icon" name="uil:toilet-paper" mode="svg" />
|
|
<span class="value">{{ intl.format(card.ppr) }}</span>
|
|
</div>
|
|
<span class="pro">Pro 1</span>
|
|
</div>
|
|
<div class="info flex-col">
|
|
<div class="price">
|
|
<Icon class="icon" name="uil:file-landscape" mode="svg" />
|
|
<span class="value">{{ intl.format(card.pps) }}</span>
|
|
</div>
|
|
<span class="pro">Pro 10</span>
|
|
</div>
|
|
<div class="info flex-col">
|
|
<div class="price">
|
|
<Icon class="icon" name="uil:layer-group" mode="svg" />
|
|
<span class="value">{{ intl.format(card.ppl) }}</span>
|
|
</div>
|
|
<span class="pro">Pro 100</span>
|
|
</div>
|
|
</main>
|
|
</article>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Card } from '../../../shared/Card'
|
|
|
|
type Props = {
|
|
deletable: boolean
|
|
card: Card
|
|
}
|
|
|
|
const { card } = defineProps<Props>()
|
|
const emit = defineEmits(['remove', 'update'])
|
|
|
|
const root = ref<HTMLElement>()
|
|
const deleting = ref<boolean>(false)
|
|
|
|
const intl = Intl.NumberFormat('de-DE', {
|
|
style: 'currency',
|
|
currency: 'EUR',
|
|
})
|
|
|
|
const update = () => emit('update')
|
|
|
|
const deleteCard = async () => {
|
|
root.value?.addEventListener('transitionend', () => emit('remove'))
|
|
deleting.value = true
|
|
}
|
|
</script>
|