filter

src/components/AssigneeFilter.vue

@@ -37,7 +37,10 @@ function toggle(id: string) {
 
 function onMenuSelect(value: unknown) {
   if (Array.isArray(value)) {
-    emit('changed', value.filter((el): el is string => typeof el === 'string'))
+    emit(
+      'changed',
+      value.filter((el): el is string => typeof el === 'string'),
+    )
   }
 }
 
@@ -142,7 +145,7 @@ onMounted(() => {
   }
 
   &:hover {
-    transform: translateY(-0.25rem);
+    transform: translateY(0rem);
   }
 }
 </style>

src/components/IssueFilter.vue

@@ -1,8 +1,14 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import AssigneeFilter from '@/components/AssigneeFilter.vue'
 import TextFilter from '@/components/TextFilter.vue'
 
+interface Props {
+  text?: string | null
+}
+
+withDefaults(defineProps<Props>(), { text: null })
+const emit = defineEmits<{ 'update:text': [value: string | null] }>()
+
 function onChanged(value: string[]) {
   console.log(value)
 }
@@ -10,7 +16,7 @@ function onChanged(value: string[]) {
 
 <template>
   <div class="u-grid2 ga-4 align-center">
-    <text-filter />
+    <text-filter :model-value="text" @update:model-value="emit('update:text', $event)" />
     <assignee-filter @changed="onChanged" :selected="['4Jpoz4EgViFrMpl7jQ969mVyX2IFYg5H']" />
     <v-btn variant="text">clear filters</v-btn>
   </div>

src/components/TextFilter.vue

@@ -1,15 +1,29 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 
-const text = ref<string | null>(null)
+interface Props {
+  modelValue?: string | null
+}
+
+const props = withDefaults(defineProps<Props>(), { modelValue: null })
+const emit = defineEmits<{ 'update:modelValue': [value: string | null] }>()
+
+const text = ref(props.modelValue)
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    text.value = value
+  },
+)
 
 function onSearch() {
-  console.log('onSearch', text.value)
+  emit('update:modelValue', text.value || null)
 }
 
 function onClear() {
-  text.value = ''
-  console.log('onClear', text.value)
+  text.value = null
+  emit('update:modelValue', null)
 }
 </script>