add: bottom toolbar, remove button for cards

Implemented bottom toolbar for adding and calculating, added remove button for Price Cards

app/assets/styles/button.css

@@ -1,9 +1,14 @@
 .Button {
-    all: unset;
+    --padding: .2rem;
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 1rem;
+    cursor: pointer;
+    transition: var(--transition-default);
+    outline: none;
+    border: none;
+    background: transparent;
 
     &.cta {
         background: var(--color-main);
@@ -11,10 +16,34 @@
         padding: .5rem 1.5rem;
         border-radius: var(--radius-default);
         box-shadow: var(--box-shadow-z2);
-        transition: var(--transition-default);
 
         &:hover {
             background: var(--color-main-dark);
         }
     }
+
+    &.icon-button {
+        display: flex;
+        padding: var(--padding);
+        border-radius: 100%;
+
+        &:hover {
+            scale: 1.2;
+        }
+    }
+
+    &.mini-button {
+        padding: .5rem 1.5rem;
+        display: flex;
+        flex-direction: column;
+        gap: .5rem;
+
+        & > .icon {
+            font-size: 1.5rem;
+        }
+
+        & > span {
+            font-size: .8rem;
+        }
+    }
 }

app/assets/styles/general.css

@@ -39,6 +39,7 @@ body {
 
 .content {
     padding: 1rem;
+    min-height: 100dvh;
 }
 
 .pc-wrapper {
@@ -49,4 +50,24 @@ body {
 .flex-col {
     display: flex;
     flex-direction: column;
+}
+
+.text-white {
+    color: var(--color-white);
+}
+
+.bg-main {
+    background-color: var(--color-main);
+}
+
+.bg-main-hover:hover {
+    background-color: var(--color-main);
+}
+
+.bg-main-dark {
+    background-color: var(--color-main-dark);
+}
+
+.bg-main-dark-hover:hover {
+    background-color: var(--color-main-dark);
 }

app/assets/styles/header.css

@@ -3,7 +3,11 @@
     align-items: center;
     justify-content: space-between;
     padding: var(--padding-default);
+    background-color: var(--color-white);
     box-shadow: var(--box-shadow-z2);
+    position: sticky;
+    top: 0;
+    z-index: 1;
 
     & strong {
         font-size: 2em;

app/assets/styles/priceCard.css

@@ -1,6 +1,24 @@
 .PriceCard {
     width: 100%;
 
+    & > header {
+        color: white;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 1.3em;
+
+        & > .Button {
+            scale: 0;
+            color: var(--color-white);
+            border: 2px solid var(--color-white);
+        }
+
+        & > .Button.deletable {
+            scale: 1;
+        }
+    }
+
     & > .padding {
         gap: 1rem;
         padding: var(--padding-default);

app/assets/styles/toolbar.css

@@ -0,0 +1,12 @@
+.Toolbar {
+    display: flex;
+    justify-content: space-evenly;
+    background: var(--color-main);
+    position: sticky;
+    bottom: 0;
+
+    & > .Button {
+        --padding: 1rem;
+        font-size: 1rem;
+    }
+}

app/components/Pp/FormInput.vue

@@ -24,7 +24,7 @@ type Props = {
   required ?: boolean
   label : string
   id : string
-  uid : number
+  uid : string
 }
 
 const {

app/components/Pp/PriceCard.vue

@@ -1,8 +1,18 @@
 <template>
   <form class="PriceCard card">
+    <header class="padding bg-blue">
+      TODO: IRGENDWAS
+      <PpButton
+          class="icon-button bg-main"
+          :class="[deletable && 'deletable']"
+          @click="emit('remove', uid)"
+      >
+        <Icon name="uil:times" 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="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">
@@ -19,7 +29,7 @@
       </div>
       <div class="info flex-col">
         <Icon class="icon" name="uil:file-landscape" mode="svg" />
-        <span class="price">{{ intl.format(ppr) }}</span>
+        <span class="price">{{ intl.format(pps) }}</span>
         <span class="pro">Pro 10</span>
       </div>
       <div class="info flex-col">
@@ -33,11 +43,14 @@
 
 <script setup lang="ts">
 type Props = {
-  uid: number
+  uid: string
+  deletable: boolean
 }
 
 const { uid } = defineProps<Props>()
 
+const emit = defineEmits(['remove'])
+
 const name = ref('')
 const price = ref(0)
 const roles = ref(0)
@@ -61,6 +74,6 @@ const calculate = () => {
   pps.value = (ppr.value / sheets.value) * 10
 
   if(!layers.value) return
-  ppl.value = (pps.value / layers.value) * 100
+  ppl.value = (pps.value / layers.value) * 10
 }
 </script>

app/components/Pp/Toolbar.vue

@@ -0,0 +1,9 @@
+<template>
+  <section class="Toolbar">
+    <slot />
+  </section>
+</template>
+
+<script setup lang="ts">
+
+</script>

app/pages/index.vue

@@ -1,19 +1,41 @@
 <template>
   <section class="content flex-col">
     <div class="pc-wrapper flex-col">
-      <PpPriceCard v-for="num in cards" :uid="num" />
+      <PpPriceCard
+          v-for="card in cards"
+          :key="card"
+          :uid="card"
+          :deletable="cards.length > 1"
+          @remove="removeCard"
+      />
     </div>
-    <PpButton class="cta" @click="addCard">
-      <Icon name="uil:plus" mode="svg" />
-      Vergleich hinzufügen
-    </PpButton>
   </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 cards = ref(1)
+const initialId = crypto.randomUUID()
+
+const cards = useState('cards', () => [
+  initialId,
+])
 
 const addCard = () => {
-  cards.value++
+  cards.value.push(crypto.randomUUID())
 }
+
+const removeCard = (uuid : string) => {
+  cards.value = cards.value.filter((c) => c !== uuid)
+}
+
+const calculate = () => {}
 </script>

nuxt.config.ts

@@ -1,7 +1,7 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   compatibilityDate: '2024-11-01',
-  devtools: { enabled: true },
+  devtools: { enabled: false },
   future: {
     compatibilityVersion: 4,
   },
@@ -16,5 +16,6 @@ export default defineNuxtConfig({
     './app/assets/styles/button.css',
     './app/assets/styles/priceCard.css',
     './app/assets/styles/formInput.css',
+    './app/assets/styles/toolbar.css',
   ]
 })