filter

src/components/StatusFilter.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { useStatusStore } from '@/stores/status.ts'
+import { ref } 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)
+</script>
+
+<template>
+  <v-btn-toggle
+    v-model="selected"
+    class="border-opacity-25"
+    border
+    divided
+    size="default"
+    density="compact"
+    variant="text"
+    @update:model-value="onUpdate"
+  >
+    <v-btn
+      slim
+      v-for="status in statusStore.statuses"
+      :color="status.color"
+      :value="status.alias"
+      :key="status.alias"
+      rounded="0"
+    >
+      <div class="text-default">{{ status.name }}</div>
+    </v-btn>
+  </v-btn-toggle>
+</template>
+
+<style scoped lang="scss"></style>