48 lines
1003 B
Vue
48 lines
1003 B
Vue
<script setup lang="ts">
|
|
import { useStatusStore } from '@/stores/status.ts'
|
|
import { ref, watch } from 'vue'
|
|
|
|
interface Props {
|
|
status?: string | null
|
|
}
|
|
|
|
const { status } = defineProps<Props>()
|
|
const emit = defineEmits<{ changed: [value: string] }>()
|
|
const statusStore = useStatusStore()
|
|
const selected = ref(status)
|
|
const onUpdate = (val: unknown) => emit('changed', val as string)
|
|
|
|
watch(
|
|
() => status,
|
|
(val) => {
|
|
selected.value = val
|
|
},
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<v-btn-toggle
|
|
v-model="selected"
|
|
divided
|
|
size="default"
|
|
density="comfortable"
|
|
variant="flat"
|
|
@update:model-value="onUpdate"
|
|
>
|
|
<v-btn
|
|
border
|
|
slim
|
|
v-for="el in statusStore.statuses"
|
|
:color="el.color"
|
|
:value="el.alias"
|
|
:key="el.alias"
|
|
rounded="0"
|
|
>
|
|
<!-- <v-icon :icon="icons.get(el.alias)" class="mr-1" />-->
|
|
<div class="text-default">{{ el.name }}</div>
|
|
</v-btn>
|
|
</v-btn-toggle>
|
|
</template>
|
|
|
|
<style scoped lang="scss"></style>
|