55 lines
1.4 KiB
Vue
55 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { useStatusStore } from '@/stores/status.ts'
|
|
import { computed } from 'vue'
|
|
import type { Issue } from '@/api/issue.api.ts'
|
|
|
|
interface Props {
|
|
value?: string
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
const emit = defineEmits<{ changed: [value: Issue['status']] }>()
|
|
|
|
const statusStore = useStatusStore()
|
|
|
|
const currentStatusName = computed(() => {
|
|
return statusStore.statuses?.find((el) => el.alias === props.value)?.name ?? props.value
|
|
})
|
|
|
|
const currentStatusColor = computed(() => {
|
|
return statusStore.statuses?.find((el) => el.alias === props.value)?.color ?? 'white'
|
|
})
|
|
|
|
const select = (value: unknown) => {
|
|
if (Array.isArray(value)) {
|
|
emit('changed', value[0])
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<v-menu>
|
|
<template v-slot:activator="{ props: activatorProps }">
|
|
<v-btn
|
|
slim
|
|
border
|
|
:color="currentStatusColor"
|
|
density="compact"
|
|
variant="flat"
|
|
v-bind="activatorProps"
|
|
:text="currentStatusName"
|
|
/>
|
|
</template>
|
|
|
|
<v-list border width="12rem" class="" select-strategy="single-leaf" density="compact" @update:selected="select">
|
|
<v-list-item slim v-for="(el, idx) in statusStore.statuses" :key="idx" :value="el.alias">
|
|
<v-list-item-title>{{ el.name }}</v-list-item-title>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-menu>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss"></style>
|