116 lines
3.4 KiB
Vue
Executable file
116 lines
3.4 KiB
Vue
Executable file
<template>
|
|
<article class="PriceCard roboto-condensed" v-ripple="$device.isMobile ? { color: 'rgba(0, 0, 0, 0.1)' } : { duration: 0, scale: 0 }">
|
|
<div class="bottom">
|
|
<div class="bg-edit">
|
|
<Icon class="icon" name="uil:pen" mode="svg" />
|
|
</div>
|
|
<div class="bg-delete">
|
|
<Icon class="icon" name="uil:trash-alt" mode="svg" />
|
|
</div>
|
|
</div>
|
|
<div
|
|
ref="top"
|
|
class="top flex-col"
|
|
:class="{ 'animated' : !isSwiping }"
|
|
:style="{ left }"
|
|
@click="cardClick"
|
|
>
|
|
<header>
|
|
<div class="name-price">
|
|
<span>{{ card.name || 'Kein Name' }}</span>
|
|
<span>{{ intl.format(+replaceComma(card.price))}}</span>
|
|
</div>
|
|
<div v-if="$device.isDesktop" class="flex-row gap-default">
|
|
<PpButton class="icon-button" @click="update">
|
|
<Icon class="icon" name="uil:pen" mode="svg" />
|
|
</PpButton>
|
|
<PpButton class="icon-button" @click="deleteCard">
|
|
<Icon class="icon" name="uil:trash-alt" mode="svg" />
|
|
</PpButton>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="wrapper">
|
|
<div class="info flex-col">
|
|
<div class="price">
|
|
<Icon class="icon" name="uil:toilet-paper" mode="svg" />
|
|
<span class="value">{{ intl.format(ppr) }}</span>
|
|
</div>
|
|
<span class="pro">Pro 1 {{ card.roles ? `(${card.roles})` : '' }}</span>
|
|
</div>
|
|
<div class="info flex-col">
|
|
<div class="price">
|
|
<Icon class="icon" name="uil:file-landscape" mode="svg" />
|
|
<span class="value">{{ intl.format(pps) }}</span>
|
|
</div>
|
|
<span class="pro">Pro 100 {{ card.sheets ? `(${card.sheets})` : '' }}</span>
|
|
</div>
|
|
<div class="info flex-col">
|
|
<div class="price">
|
|
<Icon class="icon" name="uil:layer-group" mode="svg" />
|
|
<span class="value">{{ intl.format(ppl) }}</span>
|
|
</div>
|
|
<span class="pro">Pro 1000 {{ card.layers ? `(${card.layers})` : '' }}</span>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</article>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { PriceCard } from '../../../shared/PriceCard'
|
|
|
|
type Props = {
|
|
deletable: boolean
|
|
card: PriceCard
|
|
}
|
|
|
|
const { card } = defineProps<Props>()
|
|
const emit = defineEmits(['remove', 'update'])
|
|
|
|
const { vibrate } = useVibrate()
|
|
const top = useTemplateRef('top')
|
|
const left = shallowRef<string>('0')
|
|
|
|
const intl = Intl.NumberFormat('de-DE', {
|
|
style: 'currency',
|
|
currency: 'EUR',
|
|
})
|
|
|
|
const { lengthX, direction, isSwiping } = useSwipe(top, {
|
|
passive: true,
|
|
threshold: 20,
|
|
onSwipe() {
|
|
if (['down', 'up'].includes(direction.value)) return
|
|
left.value = `${-clamp(lengthX.value, 0, 100)}px`
|
|
},
|
|
onSwipeEnd() {
|
|
if (['down', 'up'].includes(direction.value)) return
|
|
if (lengthX.value > 50) {
|
|
vibrate(100)
|
|
deleteCard()
|
|
}
|
|
left.value = '0'
|
|
},
|
|
})
|
|
|
|
const priceClean = computed<number>(() => +replaceComma(card.price))
|
|
const ppr = computed(() => priceClean.value / +card.roles)
|
|
const pps = computed(() => (ppr.value / +card.sheets) * 100)
|
|
const ppl = computed(() => (pps.value / +card.layers) * 10)
|
|
|
|
const { isDesktop } = useDevice()
|
|
|
|
const cardClick = () => {
|
|
if (isDesktop) return
|
|
emit('update')
|
|
}
|
|
|
|
const update = () => emit('update')
|
|
const deleteCard = () => emit('remove')
|
|
|
|
defineExpose({
|
|
ppr, pps, ppl, uuid : card.uuid,
|
|
})
|
|
|
|
</script>
|