simplify filter components

app/pages/index.vue

@@ -1,5 +1,6 @@
 <!--suppress VueUnrecognizedSlot -->
 <template>
+  <!--suppress JSValidateTypes -->
   <DataTable
     :value="characters"
     dataKey="id"
@@ -40,19 +41,16 @@
         <OptionsFilter
           v-if="_isMatch(characterFields[field], { type: 'autocomplete' })"
           v-model="filterModel.value"
+          :field="field"
           :options="options[field]"
           :filteredOptions="filteredOptions[field]"
-          :filterCallback="filterCallback"
-          :hasFilter="() => hasFilterFor(field)"
-          :resetFilter="() => resetFilterFor(field)"
+          @filterCallback="filterCallback"
         />
 
         <TextFilter
           v-else
           v-model="filters[field]"
-          :filterCallback="filterCallback"
-          :hasFilter="() => hasFilterFor(field)"
-          :resetFilter="() => resetFilterFor(field)"
+          :field="field"
         />
       </template>
 
@@ -82,26 +80,55 @@
         <div class="flex justify-between gap-4 pb-2">
           <SearchField
             v-model="filters['global'].value"
-            placeholder="Search"
+            placeholder="Search&hellip;"
             type="search"
             id="global_filter"
           />
 
-          <ClearFiltersButton
+          <Button
+            variant="outlined"
             :disabled="!hasAnyFilters"
-            @click="resetFilters"
             class="px-4"
-          />
+            @click="resetFilters"
+          >
+            <Icon
+              name="ph:funnel-simple-x-bold"
+              size="1.25rem"
+            />
 
-          <ToggleFilterButton
-            @click="toggleShowFilters"
+            Reset
+          </Button>
+
+          <Button
+            variant="outlined"
             class="px-4"
-            :showFilters="showFilters"
-          />
+            @click="toggleShowFilters"
+          >
+            <Icon
+              name="ph:funnel-simple-bold"
+              size="1.25rem"
+            />
+
+            <div class="flex flex-col">
+              <div
+                class="overflow-hidden"
+                :class="showFilters && 'h-0!'"
+              >
+                Show
+              </div>
+
+              <div
+                class="overflow-hidden"
+                :class="!showFilters && 'h-0!'"
+              >
+                Hide
+              </div>
+            </div>
+          </Button>
         </div>
 
         <CharacterFilterChips
-          v-if="hasAnyFilters && !showFilters"
+          v-if="hasAnyFilters() && !showFilters"
           class="pb-2"
         />
       </div>
@@ -112,8 +139,8 @@
         class="text-center text-2xl"
         :class="isLoading && 'hidden'"
       >
-        <template v-if="hasGlobalFilter">
-          <template v-if="hasAnyColumnFilters">
+        <template v-if="hasGlobalFilter()">
+          <template v-if="hasAnyColumnFilters()">
             No characters matching
             <!--suppress JSUnresolvedReference -->
             <span class="italic">&ldquo;{{ filters.global.value }}&rdquo;</span>
@@ -187,7 +214,7 @@ const filteredOptions = computed(() =>
   findUniqueOptions(filteredCharacters.value)
 )
 
-const DEFAULT_ELEMENT_HEIGHTS = 168
+const DEFAULT_ELEMENT_HEIGHTS = 160
 const elementHeights = ref(DEFAULT_ELEMENT_HEIGHTS)
 
 onMounted(() => updateElementHeights())
@@ -213,14 +240,13 @@ function totalElementHeights() {
   // total height of non-datatable elements (in pixels)
   const elements = ["navbar", "datatable_header", "datatable_footer"]
 
-  // noinspection JSUnresolvedReference
   let totalHeights = _reduce(
     elements,
     (acc, element) => acc + document?.getElementById(element)?.offsetHeight,
     0
   )
 
-  // plus 16px [--spacing(4)] bottom navbar margin
+  // plus 16px [--spacing(4)] navbar bottom margin
   totalHeights += 16
 
   return _isNaN(totalHeights) ? DEFAULT_ELEMENT_HEIGHTS : totalHeights