webfussel
c99c243dfc
Implemented bottom toolbar for adding and calculating, added remove button for Price Cards
41 lines
985 B
Vue
41 lines
985 B
Vue
<template>
|
|
<section class="content flex-col">
|
|
<div class="pc-wrapper flex-col">
|
|
<PpPriceCard
|
|
v-for="card in cards"
|
|
:key="card"
|
|
:uid="card"
|
|
:deletable="cards.length > 1"
|
|
@remove="removeCard"
|
|
/>
|
|
</div>
|
|
</section>
|
|
<PpToolbar>
|
|
<PpButton class="mini-button text-white" @click="addCard">
|
|
<Icon class="icon" name="uil:plus" mode="svg" />
|
|
<span>Hinzufügen</span>
|
|
</PpButton>
|
|
<PpButton class="mini-button text-white" @click="calculate">
|
|
<Icon class="icon" name="uil:calculator" mode="svg" />
|
|
<span>Berechnen</span>
|
|
</PpButton>
|
|
</PpToolbar>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const initialId = crypto.randomUUID()
|
|
|
|
const cards = useState('cards', () => [
|
|
initialId,
|
|
])
|
|
|
|
const addCard = () => {
|
|
cards.value.push(crypto.randomUUID())
|
|
}
|
|
|
|
const removeCard = (uuid : string) => {
|
|
cards.value = cards.value.filter((c) => c !== uuid)
|
|
}
|
|
|
|
const calculate = () => {}
|
|
</script>
|