36 lines
1007 B
Vue
36 lines
1007 B
Vue
<script setup lang="ts">
|
|
import type { TaskStatus } from '~/services/dto/task-status'
|
|
|
|
defineProps<{
|
|
statuses: TaskStatus[]
|
|
x: number
|
|
y: number
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
pick: [status: TaskStatus]
|
|
cancel: []
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<Teleport to="body">
|
|
<div class="fixed inset-0 z-[60]" @click="emit('cancel')" />
|
|
<div
|
|
class="fixed z-[61] min-w-44 rounded-lg border border-neutral-200 bg-white py-1 shadow-xl"
|
|
:style="{ left: x + 'px', top: y + 'px' }"
|
|
>
|
|
<button
|
|
v-for="s in statuses"
|
|
:key="s.id"
|
|
type="button"
|
|
class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-neutral-50"
|
|
@click="emit('pick', s)"
|
|
>
|
|
<span class="h-3 w-3 shrink-0 rounded-full" :style="{ backgroundColor: s.color }" />
|
|
{{ s.label }}
|
|
</button>
|
|
</div>
|
|
</Teleport>
|
|
</template>
|