fix: a lot of design flaws

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

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>