34 lines
1.2 KiB
Vue
34 lines
1.2 KiB
Vue
<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>
|