49 lines
1.2 KiB
Vue
Executable file
49 lines
1.2 KiB
Vue
Executable file
<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 randomUUID = () => {
|
|
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, char => {
|
|
const random = Math.random() * 16 | 0
|
|
const value = char === 'x' ? random : (random & 0x3 | 0x8)
|
|
return value.toString(16)
|
|
})
|
|
}
|
|
|
|
const initialId = randomUUID()
|
|
|
|
const cards = useState('cards', () => [
|
|
initialId,
|
|
])
|
|
|
|
const addCard = () => {
|
|
cards.value.push(randomUUID())
|
|
}
|
|
|
|
const removeCard = (uuid : string) => {
|
|
cards.value = cards.value.filter((c) => c !== uuid)
|
|
}
|
|
|
|
const calculate = () => {}
|
|
</script>
|