39 lines
1.3 KiB
Vue
39 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import ResumeComponentEdit from './ResumeComponentEdit.vue';
|
|
import ResumeComponentsList from './ResumeComponentsList.vue';
|
|
import ComponentsSelectionList from './ComponentsSelectionList.vue';
|
|
import { computed } from 'vue';
|
|
import { useResumesStore } from '@/stores/resume';
|
|
import { useShowComponentSelectionStore } from '@/stores/ui';
|
|
import SaveStatusIcon from '../SaveStatusIcon.vue';
|
|
|
|
const resumeStore = useResumesStore();
|
|
const selectedComponent = resumeStore.currentSelectedResumePlacement;
|
|
|
|
const showComponentSelectionStore = useShowComponentSelectionStore();
|
|
const showComponentSelection = computed<boolean>(() => showComponentSelectionStore.showComponentSelection);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col h-full flex-1 gap-4 rounded-xl p-4 overflow-x-auto max-w-[25%] bg-accent relative">
|
|
<SaveStatusIcon />
|
|
<Transition mode="out-in" appear>
|
|
<ResumeComponentEdit v-if="selectedComponent != null" :key="selectedComponent ? selectedComponent.id : 'form'" />
|
|
<ComponentsSelectionList v-else-if="showComponentSelection" />
|
|
<ResumeComponentsList v-else />
|
|
</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>
|