Models refactor + Basic functionnalities

resources/js/components/resume/ResumeComponentEditFormInput.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { ResumeInputData } from '@/types/resume';
+import { defineAsyncComponent } from 'vue';
+import Label from '../ui/label/Label.vue';
+
+const props = defineProps<{
+    model: ResumeInputData
+}>();
+
+const componentFile = defineAsyncComponent(
+    () => import(
+        /* @vite-ignore */
+        `./resumeComponentsFormInput/${props.model.component_input.data_type.vue_component_name}`
+    )
+);
+
+const emit = defineEmits(['data-changed']);
+</script>
+
+<template>
+    <div class="w-full">
+        <Label>{{ props.model.component_input?.label }}</Label>
+        <component
+            class="file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground
+                dark:bg-primary/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-primary px-3 py-1 text-base shadow-xs
+                transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-primary file:text-sm
+                file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm
+                focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]
+                aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
+            :name="props.model.component_input?.name"
+            :is="componentFile"
+            :model="props.model"
+            @data-changed="emit('data-changed', $event)"
+        />
+    </div>
+</template>