fix: a lot of design flaws

Info text when empty, new inputs, minimum height of content fixed

app/components/Pp/DeleteDialog.vue

@@ -3,22 +3,22 @@
     ref="dialog"
     closedby="any"
   >
-    <form method="dialog">
-      <header class="flex-row padding">
+    <form method="dialog" class="wrapper">
+      <header class="flex-row">
         Wirklich löschen?
         <PpButton class="round text">
           <Icon name="uil:times" mode="svg" />
         </PpButton>
       </header>
       <main>
-        <div class="padding flex-col">
+        <div class="flex-col">
           <p>Bist du dir sicher, dass du diesen Eintrag löschen möchtest?</p>
         </div>
       </main>
-      <footer class="flex-row padding">
-          <PpButton class="text">
-            <span>Abbrechen</span>
-          </PpButton>
+      <footer class="flex-row">
+        <PpButton class="text">
+          <span>Abbrechen</span>
+        </PpButton>
         <PpButton class="danger raised" @click="$emit('delete')">
           <span>Löschen</span>
         </PpButton>

app/components/Pp/Form/Input.vue

@@ -1,46 +0,0 @@
-<template>
-  <div class="Input">
-    <div class="input-wrapper flex-col">
-      <input
-        v-model="text"
-        :type="type"
-        :id="id"
-        :step="step"
-        :min="min"
-        :max="max"
-        :required="required"
-        placeholder=" "
-        @blur="emit('blur')"
-        :inputmode="mode"
-      />
-      <label :for="id">{{ label }}</label>
-    </div>
-    <span v-if="message">{{ message }}</span>
-  </div>
-</template>
-
-<script setup lang="ts">
-type Props = {
-  type ?: 'text' | 'number'
-  max ?: number
-  min ?: number
-  step ?: number
-  required ?: boolean
-  message ?: string
-  label : string
-  id : string
-  mode ?: 'text' | 'email' | 'search' | 'tel' | 'url' | 'none' | 'numeric' | 'decimal'
-}
-
-const {
-  type = 'text',
-  required = false,
-  step = 0.01,
-  min = 1,
-  mode = 'text',
-} = defineProps<Props>()
-
-const emit = defineEmits(['blur'])
-
-const text = defineModel()
-</script>

app/components/Pp/Form/TextField.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="TextField">
+    <div class="wrapper">
+      <Icon v-if="icon" class="icon" :name="icon" mode="svg" />
+      <input v-model="text" :type="type" :id="id" placeholder=" " @blur="emit('blur')" @input="emit('input')" :inputmode="mode" />
+      <label :for="id">{{ label }}</label>
+    </div>
+    <span v-if="message">{{ message }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+type Props = {
+  type?: 'text' | 'number';
+  message?: string;
+  icon?: string;
+  label: string;
+  id: string;
+  mode?: 'text' | 'email' | 'search' | 'tel' | 'url' | 'none' | 'numeric' | 'decimal';
+};
+
+const { type = "text", mode = "text" } = defineProps<Props>();
+
+const emit = defineEmits(['blur', 'input']);
+
+const text = defineModel();
+</script>

app/components/Pp/Header.vue

@@ -2,7 +2,7 @@
   <div class="Header">
     <img class="logo" src="/img/propapier.svg" alt="ProPapier logo" />
     <div>
-      <header>
+      <header class="roboto-condensed">
         <NuxtLink class="header-text" to="/">
           ProPapier
         </NuxtLink>

app/components/Pp/PriceCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <article class="PriceCard">
+  <article class="PriceCard roboto-condensed">
     <div class="bottom">
       <div class="bg-edit">
         <Icon class="icon" name="uil:pen" mode="svg" />

app/components/Pp/PriceCardDialog.vue

@@ -1,64 +1,72 @@
 <template>
-  <dialog
-    ref="dialog"
-    closedby="any"
-  >
-    <form method="dialog">
-      <header class="flex-row padding">
-        {{ currentCardIndex > -1 ? 'Bearbeiten' : 'Neues Hinzufügen' }}
-        <PpButton class="round text">
-          <Icon name="uil:times" mode="svg" />
-        </PpButton>
-      </header>
-    </form>
+  <dialog ref="dialog" closedby="any">
+    <div class="wrapper">
+      <form method="dialog">
+        <header class="flex-row">
+          {{ currentCardIndex > -1 ? 'Bearbeiten' : 'Neues hinzufügen' }}
+          <PpButton class="round text">
+            <Icon name="uil:times" mode="svg" />
+          </PpButton>
+        </header>
+      </form>
       <main v-if="currentCard">
-        <div class="padding flex-col">
+        <div class="flex-col gap-default">
           <div class="flex-row gap-default">
-            <PpFormInput
+            <PpFormTextField
               v-model="currentCard.name"
               id="card_name"
               label="Name"
-              :class="{'error': !validFields.name }"
+              icon="uil:user"
+              :class="{ error: !validFields.name }"
               :message="!validFields.name ? 'Feld darf nicht leer sein.' : ''"
+              @input="validFields.name = true"
             />
-            <PpFormInput
+            <PpFormTextField
               v-model="currentCard.price"
               id="card_price"
               label="Preis"
+              icon="uil:euro"
               mode="decimal"
-              :class="{'error': !validFields.price }"
+              :class="{ error: !validFields.price }"
               :message="!validFields.price ? 'Muss eine Zahl sein.' : ''"
+              @input="validFields.price = true"
             />
           </div>
           <div class="flex-row gap-default">
-            <PpFormInput
+            <PpFormTextField
               v-model="currentCard.roles"
               id="card_roles"
               label="Rollen"
+              icon="uil:toilet-paper"
               mode="decimal"
-              :class="{'error': !validFields.roles }"
+              :class="{ error: !validFields.roles }"
               :message="!validFields.roles ? 'Muss eine Ganzzahl sein.' : ''"
+              @input="validFields.roles = true"
             />
-            <PpFormInput
+            <PpFormTextField
               v-model="currentCard.sheets"
               id="card_sheets"
-              label="Blätter"
+              label="Blatt"
+              icon="uil:file-landscape"
               mode="decimal"
-              :class="{'error': !validFields.sheets }"
+              :class="{ error: !validFields.sheets }"
               :message="!validFields.sheets ? 'Muss eine Ganzzahl sein.' : ''"
+              @input="validFields.sheets = true"
             />
-            <PpFormInput
+            <PpFormTextField
               v-model="currentCard.layers"
               id="card_layers"
               label="Lagen"
+              icon="uil:layer-group"
               mode="decimal"
-              :class="{'error': !validFields.layers }"
+              :class="{ error: !validFields.layers }"
               :message="!validFields.layers ? 'Muss eine Ganzzahl sein.' : ''"
+              @input="validFields.layers = true"
             />
           </div>
         </div>
       </main>
-      <footer class="flex-row padding">
+      <footer class="flex-row">
         <form method="dialog">
           <PpButton class="danger text">
             <span>Abbrechen</span>
@@ -68,34 +76,43 @@
           <span>{{ currentCardIndex > -1 ? 'Übernehmen' : 'Hinzufügen' }}</span>
         </PpButton>
       </footer>
+    </div>
   </dialog>
 </template>
 
 <script setup lang="ts">
-import type { Card } from '../../../shared/Card'
+import type { Card } from '../../../shared/Card';
 
 type Props = {
-  currentCardIndex : number
-  currentCard ?: Card
-}
+  currentCardIndex: number;
+  currentCard?: Card;
+};
 
-const { currentCardIndex, currentCard } = defineProps<Props>()
-const emit = defineEmits(['update'])
+const { currentCardIndex, currentCard } = defineProps<Props>();
+const emit = defineEmits(['update']);
 
-const dialog = useTemplateRef<HTMLDialogElement>('dialog')
+const dialog = useTemplateRef<HTMLDialogElement>("dialog");
 
 const checkPrice = () => {
-  if (!currentCard) { return false }
-  if (currentCard.price.length === 0) { return false }
-  const price = +replaceComma(currentCard.price)
-  return !isNaN(price)
-}
+  if (!currentCard) {
+    return false;
+  }
+  if (currentCard.price.length === 0) {
+    return false;
+  }
+  const price = +replaceComma(currentCard.price);
+  return !isNaN(price);
+};
 
-const checkIfInteger = (toBeNumber : string) => {
-  if (toBeNumber.length === 0) { return false }
-  if (toBeNumber.includes(',') || toBeNumber.includes('.')) { return false }
-  return !isNaN(+toBeNumber)
-}
+const checkIfInteger = (toBeNumber: string) => {
+  if (toBeNumber.length === 0) {
+    return false;
+  }
+  if (toBeNumber.includes(",") || toBeNumber.includes(".")) {
+    return false;
+  }
+  return !isNaN(+toBeNumber);
+};
 
 const validFields = reactive({
   name: true,
@@ -103,30 +120,32 @@ const validFields = reactive({
   roles: true,
   sheets: true,
   layers: true,
-})
+});
 
 const validate = () => {
-  if (!currentCard) { return }
-
-  validFields.name = currentCard.name.length > 0
-  validFields.price = checkPrice()
-  validFields.roles = checkIfInteger(currentCard.roles)
-  validFields.sheets = checkIfInteger(currentCard.sheets)
-  validFields.layers = checkIfInteger(currentCard.layers)
-
-  if (Object.values(validFields).every(value => value)) {
-    emit('update')
-    dialog.value?.close()
+  if (!currentCard) {
+    return;
   }
-}
+
+  validFields.name = currentCard.name.length > 0;
+  validFields.price = checkPrice();
+  validFields.roles = checkIfInteger(currentCard.roles);
+  validFields.sheets = checkIfInteger(currentCard.sheets);
+  validFields.layers = checkIfInteger(currentCard.layers);
+
+  if (Object.values(validFields).every((value) => value)) {
+    emit('update');
+    dialog.value?.close();
+  }
+};
 
 onMounted(() => {
   dialog.value?.addEventListener('close', () => {
-    validFields.name = true
-    validFields.price = true
-    validFields.roles = true
-    validFields.sheets = true
-    validFields.layers = true
-  })
-})
-</script>
+    validFields.name = true;
+    validFields.price = true;
+    validFields.roles = true;
+    validFields.sheets = true;
+    validFields.layers = true;
+  });
+});
+</script>