webfussel/propapier
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add: collapsing and deletion animation

Browse source 
Added collapsable cards and animation for deletion and card footer
This commit is contained in:
Fiona Lena Urban 2025-02-24 21:38:45 +01:00
parent c99c243dfc
commit 7c46be6227
6 changed files with 121 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

75
app/components/Pp/PriceCard.vue
View file

@ -1,27 +1,34 @@
<template>
<form class="PriceCard card">
<form
ref="root"
class="PriceCard card"
:class="{ folded }"
:style="{ '--height': height }"
@submit.prevent="() => {}"
>
<header class="padding bg-blue">
TODO: IRGENDWAS
{{ name || 'Kein Name' }}
<PpButton
class="icon-button bg-main"
:class="[deletable && 'deletable']"
@click="emit('remove', uid)"
@click="folded = !folded"
>
<Icon name="uil:times" mode="svg" />
<Icon :name="folded ? 'uil:sort' : 'uil:sorting'" mode="svg" />
</PpButton>
</header>
<div class="padding bg-blue flex-col">
<div class="wrapper">
<!-- <PpFormInput v-model="name" label="Name" id="n" :uid="uid" type="text" />-->
<PpFormInput v-model="price" label="Preis" id="p" :uid="uid" type="number" :min="0.01" @blur="calculate" />
<aside>
<div class="input-wrapper padding bg-blue flex-col">
<div class="wrapper">
<PpFormInput v-model="name" label="Name" id="n" :uid="uid" type="text" />
<PpFormInput v-model="price" label="Preis" id="p" :uid="uid" type="number" :min="0.01" @blur="calculate" />
</div>
<div class="wrapper">
<PpFormInput v-model="roles" label="Rollen" id="r" :uid="uid" type="number" :max="150" @blur="calculate" />
<PpFormInput v-model="sheets" label="Blätter" id="b" :uid="uid" type="number" :max="500" @blur="calculate" />
<PpFormInput v-model="layers" label="Lagen" id="l" :uid="uid" type="number" :max="10" @blur="calculate" />
</div>
</div>
<div class="wrapper">
<PpFormInput v-model="roles" label="Rollen" id="r" :uid="uid" type="number" :max="150" @blur="calculate" />
<PpFormInput v-model="sheets" label="Blätter" id="b" :uid="uid" type="number" :max="500" @blur="calculate" />
<PpFormInput v-model="layers" label="Lagen" id="l" :uid="uid" type="number" :max="10" @blur="calculate" />
</div>
</div>
<div class="wrapper padding bg-white">
</aside>
<main class="wrapper padding bg-white">
<div class="info flex-col">
<Icon class="icon" name="uil:toilet-paper" mode="svg" />
<span class="price">{{ intl.format(ppr) }}</span>
@ -37,20 +44,42 @@
<span class="price">{{ intl.format(ppl) }}</span>
<span class="pro">Pro 100</span>
</div>
</div>
</main>
<footer class="padding bg-blue flex-row">
<PpButton
class="delete"
:class="{ deletable }"
@click="deleteCard"
>
<Icon name="uil:trash" mode="svg" />
Entfernen
</PpButton>
<PpButton class="cta white">
<Icon name="uil:qrcode-scan" mode="svg" />
Scan
</PpButton>
</footer>
</form>
</template>
<script setup lang="ts">
import { nextTick } from '@redocly/openapi-core/src/utils'
type Props = {
uid: string
deletable: boolean
}
const { uid } = defineProps<Props>()
const emit = defineEmits(['remove'])
const root = ref<HTMLElement>()
const height = ref<string>()
const folded = ref(false)
onMounted(() => {
})
const name = ref('')
const price = ref(0)
const roles = ref(0)
@ -76,4 +105,14 @@ const calculate = () => {
if(!layers.value) return
ppl.value = (pps.value / layers.value) * 10
}
const deleteCard = async () => {
root.value?.addEventListener('transitionend', () => {
emit('remove', uid)
})
height.value = `${root.value?.offsetHeight}px`
await nextTick()
root.value?.classList.add('deleting')
}
</script>