Appearance

SearchBar Component ​

File Information ​

  • Path: app/components/search/SearchBar.vue
  • Purpose: Header search bar with input, suggestions, filters, and search results dropdown
  • Type: Search Component

Overview ​

The SearchBar component provides a comprehensive search interface in the application header. It supports real-time search, filtering, recent searches, and displays search results in a dropdown overlay.

Features ​

  • Search Input: Text input with search icon and loading indicator
  • Real-time Search: Debounced search as user types
  • Search Results: Displays search results in dropdown overlay
  • Recent Searches: Shows recent search history
  • Filter Integration: Integrated SearchFilter component for advanced filtering
  • Mobile Support: Separate mobile search button and interface
  • Empty States: Shows empty state when no results
  • Loading States: Progress indicator during search
  • Asset Count: Displays number of matching assets
  • Table View: Table header for search results
  • Close Button: Close search overlay button

Props ​

This component does not accept props. It uses composables to manage state.

Composables Used ​

  • useSearchBar() - Search bar logic, state, and functionality
  • useDisplay() from Vuetify - Responsive breakpoints

Key Functionality ​

Search Input ​

  • Text field with search icon
  • Placeholder: "Search for assets"
  • Loading progress bar
  • Clear button
  • Enter key to search
  • ESC key to close

Search Results ​

  • Displays matching assets
  • Table view with columns (Name, Date Modified, Date Added, File Type)
  • Asset count display
  • "View all" link to full search page
  • Horizontal scroll on mobile

Recent Searches ​

  • Shows search history
  • Click to search from history
  • Search icon indicator
  • Only shown when no active search

Filter Integration ​

  • Refine button opens SearchFilter
  • Filter options displayed
  • Filter removal support
  • Filter persistence

Mobile Support ​

  • Separate search icon button
  • Full-screen search overlay
  • Mobile-optimized layout
  • Touch-friendly interactions

Usage Example ​

vue
<template>
  <SearchBar />
</template>

<script setup lang="ts">
// SearchBar is auto-imported in Nuxt
// No explicit import needed
</script>

Styling ​

Uses global SCSS classes:

  • .headerMainSearch - Main search container
  • .searchInput - Search input container
  • .searchResult - Search results dropdown
  • .searchTopFixed - Fixed top section
  • .search-title - Section titles
  • .recent-search-list - Recent searches list
  • .table-lists-view - Table view container