add: design, icons, calculation

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

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>