34 lines
1.7 KiB
Vue
34 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { ResumeComponentPlacement } from '@/types/resume';
|
|
import { SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
|
|
import ResumeComponentsListItemToolButton from './ResumeComponentsListItemToolButton.vue';
|
|
|
|
|
|
const props = defineProps<{
|
|
componentPlacement: ResumeComponentPlacement;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'movedUp', component: ResumeComponentPlacement): void;
|
|
(e: 'movedDown', component: ResumeComponentPlacement): void;
|
|
(e: 'unlinked', component: ResumeComponentPlacement): void;
|
|
(e: 'removed', component: ResumeComponentPlacement): void;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<SidebarMenuItem>
|
|
<SidebarMenuButton as-child class="cursor-pointer" :tooltip="props.componentPlacement.component_data?.component!.name">
|
|
<div class="flex w-full flex-nowrap justify-between items-center">
|
|
<span>{{ props.componentPlacement.component_data?.component!.name }}</span>
|
|
<div class="sidebar-list-resume-item-tools flex gap-2">
|
|
<ResumeComponentsListItemToolButton @click.stop="emit('movedUp', props.componentPlacement)" logo-name="ChevronUp" />
|
|
<ResumeComponentsListItemToolButton @click.stop="emit('movedDown', props.componentPlacement)" logo-name="ChevronDown" />
|
|
<ResumeComponentsListItemToolButton @click.stop="emit('unlinked', props.componentPlacement)" logo-name="Unlink" />
|
|
<ResumeComponentsListItemToolButton @click.stop="emit('removed', props.componentPlacement)" logo-name="Trash2" class="text-red-500" />
|
|
</div>
|
|
</div>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
</template>
|