multiple filter

src/components/IssueFilter.vue

@@ -3,19 +3,18 @@ import { computed } from 'vue'
 import AssigneeFilter from '@/components/AssigneeFilter.vue'
 import TextFilter from '@/components/TextFilter.vue'
 import StatusFilter from '@/components/StatusFilter.vue'
-import ProjectMenu from '@/components/ProjectMenu.vue'
 
 interface Props {
   text?: string | null
   assigneeId?: string | null
-  status?: string | null
+  status?: string[]
 }
 
-const props = withDefaults(defineProps<Props>(), { text: null, assigneeId: null })
+const props = withDefaults(defineProps<Props>(), { text: null, assigneeId: null, status: () => [] })
 const emit = defineEmits<{
   'update:text': [value: string | null]
   'update:assigneeId': [value: string | null]
-  'update:status': [value: string | null]
+  'update:status': [value: string[]]
   'update:clear': []
 }>()
 
@@ -25,14 +24,13 @@ function onAssigneeChanged(value: string[]) {
   emit('update:assigneeId', value.at(-1) ?? null)
 }
 
-function onStatusChanged(alias: string) {
-  emit('update:status', alias)
+function onStatusChanged(value: string[]) {
+  emit('update:status', value)
 }
 </script>
 
 <template>
   <div class="filter-grid ga-4 align-center">
-    <project-menu />
     <text-filter :model-value="text" @update:model-value="emit('update:text', $event)" />
     <status-filter :status="status" @changed="onStatusChanged" />
     <assignee-filter :selected="selectedAssignees" @changed="onAssigneeChanged" />
@@ -43,6 +41,6 @@ function onStatusChanged(alias: string) {
 <style scoped lang="scss">
 .filter-grid {
   display: grid;
-  grid-template-columns: auto 1fr auto auto auto;
+  grid-template-columns: 1fr auto auto auto;
 }
 </style>