Models refactor + Basic functionnalities

resources/js/components/resume/ResumeEditPanel.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { Resume, ResumeComponentPlacement } from '@/types/resume';
+import ResumeComponentEdit from './ResumeComponentEdit.vue';
+import ResumeComponentsList from './ResumeComponentsList.vue';
+
+const props = defineProps<{
+    resume: Resume
+    selectedComponent: ResumeComponentPlacement | null
+}>();
+
+const emit = defineEmits(['selected-component-change']);
+</script>
+
+<template>
+    <div class="flex h-full flex-1 gap-4 rounded-xl p-4 overflow-x-auto max-w-[25%] bg-accent relative">
+        <Transition mode="out-in" appear>
+            <ResumeComponentEdit v-if="selectedComponent != null" :resume="props.resume" :selectedComponent="props.selectedComponent" @selected-component-change="emit('selected-component-change', $event)" :key="selectedComponent ? selectedComponent.id : 'form'" />
+            <ResumeComponentsList v-else :resume="props.resume" :selectedComponent="props.selectedComponent" @selected-component-change="emit('selected-component-change', $event)" />
+        </Transition>
+    </div>
+</template>
+
+<style lang="css" scoped>
+    .v-enter-active,
+    .v-leave-active {
+    transition: opacity 0.3s ease;
+    }
+
+    .v-enter-from,
+    .v-leave-to {
+    opacity: 0;
+    }
+</style>