replace filter-related function props with a field prop, fix min-height

app/components/OptionsFilter.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="flex min-h-56.5 flex-col justify-between gap-2">
+  <div class="flex min-h-57 flex-col justify-between gap-2">
     <Listbox
       v-model="model"
       :options="options"
       multiple
       scrollHeight="12rem"
-      @change="filterCallback"
+      @change="emit('filterCallback')"
     >
       <!--suppress VueUnrecognizedSlot -->
       <template #option="{ option, selected, index }">
@@ -37,10 +37,10 @@
       variant="outlined"
       size="small"
       fluid
-      :disabled="!hasFilter()"
-      @click="resetFilter"
+      :disabled="!hasFilterFor(props.field)"
+      @click="resetFilterFor(props.field)"
     >
-      Clear
+      Reset
     </Button>
   </div>
 </template>
@@ -49,32 +49,26 @@
 const model = defineModel()
 
 const props = defineProps({
-  options: {
-    type: Array,
+  field: {
+    type: String,
     required: true
   },
 
-  filteredOptions: {
+  options: {
     type: Array,
     required: true
   },
 
-  filterCallback: {
-    type: Function,
-    required: true
-  },
-
-  hasFilter: {
-    type: Function,
-    required: true
-  },
-
-  resetFilter: {
-    type: Function,
+  filteredOptions: {
+    type: Array,
     required: true
   }
 })
 
+const emit = defineEmits(["filterCallback"])
+
+const { hasFilterFor, resetFilterFor } = useFiltersStore()
+
 function isFilteredOption(option) {
   return _includes(props.filteredOptions, option)
 }