add: design, icons, calculation

Implemented new design for PriceCards, added some icons for visuals, added calculation per price card

app/components/Pp/Button.vue

@@ -0,0 +1,9 @@
+<template>
+  <button class="Button" @click="emit('click')">
+    <slot />
+  </button>
+</template>
+
+<script setup lang="ts">
+const emit = defineEmits(['click'])
+</script>

app/components/Pp/FormInput.vue

@@ -1,6 +1,16 @@
 <template>
-  <div class="Input">
-    <input :type="type" :id="makeId()" placeholder=" " :min="min" :max="max" />
+  <div class="Input flex-col">
+    <input
+        v-model="text"
+        :type="type"
+        :id="makeId()"
+        :step="step"
+        :min="min"
+        :max="max"
+        :required="required"
+        placeholder=" "
+        @blur="emit('blur')"
+    />
     <label :for="makeId()">{{ label }}</label>
   </div>
 </template>
@@ -10,6 +20,8 @@ type Props = {
   type ?: 'text' | 'number'
   max ?: number
   min ?: number
+  step ?: number
+  required ?: boolean
   label : string
   id : string
   uid : number
@@ -17,6 +29,8 @@ type Props = {
 
 const {
   type = 'text',
+  required = false,
+  step = 0.01,
   min = 1,
   max,
   label,
@@ -24,5 +38,9 @@ const {
   uid,
 } = defineProps<Props>()
 
+const emit = defineEmits(['blur'])
+
+const text = defineModel()
+
 const makeId = () => `${id}_${uid}`
 </script>

app/components/Pp/Header.vue

@@ -5,11 +5,11 @@
       <Icon name="solar:hamburger-menu-broken" size="2em" />
     </label>
     <input type="checkbox" id="burger_nav_toggle" />
-    <nav>
+    <nav class="flex-col">
       <label for="burger_nav_toggle">
         <Icon name="solar:close-circle-broken" />
       </label>
-      <ul>
+      <ul class="flex-col">
         <li>Home</li>
         <li>Übersicht</li>
       </ul>

app/components/Pp/PriceCard.vue

@@ -1,13 +1,32 @@
 <template>
-  <form class="PriceCard">
-    <div class="wrapper">
-      <PpFormInput label="Name" id="n" :uid="uid" type="text" />
-      <PpFormInput label="Preis" id="p" :uid="uid" type="number" :min="0.01" />
+  <form class="PriceCard card">
+    <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" />
+      </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 label="Rollen" id="r" :uid="uid" type="number" :max="150" />
-      <PpFormInput label="Blätter" id="b" :uid="uid" type="number" :max="500" />
-      <PpFormInput label="Lagen" id="l" :uid="uid" type="number" :max="10" />
+    <div 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>
+        <span class="pro">Pro 1</span>
+      </div>
+      <div class="info flex-col">
+        <Icon class="icon" name="uil:file-landscape" mode="svg" />
+        <span class="price">{{ intl.format(ppr) }}</span>
+        <span class="pro">Pro 10</span>
+      </div>
+      <div class="info flex-col">
+        <Icon class="icon" name="uil:layer-group" mode="svg" />
+        <span class="price">{{ intl.format(ppl) }}</span>
+        <span class="pro">Pro 100</span>
+      </div>
     </div>
   </form>
 </template>
@@ -18,4 +37,30 @@ type Props = {
 }
 
 const { uid } = defineProps<Props>()
+
+const name = ref('')
+const price = ref(0)
+const roles = ref(0)
+const sheets = ref(0)
+const layers = ref(0)
+
+const ppr = ref(0)
+const pps = ref(0)
+const ppl = ref(0)
+
+const intl = Intl.NumberFormat('de-DE', {
+  style: 'currency',
+  currency: 'EUR',
+})
+
+const calculate = () => {
+  if (!price.value || !roles.value) return
+  ppr.value = price.value / roles.value
+
+  if (!sheets.value) return
+  pps.value = (ppr.value / sheets.value) * 10
+
+  if(!layers.value) return
+  ppl.value = (pps.value / layers.value) * 100
+}
 </script>