Component Request - SearchGeneric

[z3cka]

Component Description

This component is be be used anywhere a search block is needed to display filtered results of the current data of the page searched. Example, if SearchGeneric is used in the header of the exhibits & events page, the results will be within the context of exhibits & events and further filtered by user input.

The number of top level filters is dynamic based on the context of the page. The sub filters may be support multi or single select option values. These options have a specific hover state, see screenshot.

Some instances (variants) require a user selected "View mode" that is displayed inline with the filters.

Selected filters should show as "pills" below the filters. Said pills should have "x" buttons next to them that remove the filters from the query. Assumption: The page should update the search results immediately upon filter removal. (may want to get that clarified, but I think that's how it should work)

There should be a count of applied filters shown next to each top level filter dropdown.

Design

Please also see attached screenshots for quick reference.

• Desktop:

No mobile designs provided, so use your best judgment for responsiveness by extending the Home page search shown here:

• Mobile Guide:

Props

props: {
   searchType: {
        type: String, 
        required: true,
       default:"help"
    },
    filters: {
        // Mock: api.pages
        type: Array,         // array of objects that contain the filter objects
        default: () => []
    },
    viewModes: {
        type: Array,
        default: () => []
    },
}

Developer Tips

1. Example of filters prop:

    filters: [
        {
            label: "location",
            field: "location_tesim",
            selection: "single",
            filterItems: [
                {
                    name: "Arts Library",
                },
                {
                    name: "Bio Med",
                },
            ]
        },
        {
            name: "department",
            field: "department_tesim",
            selection: "multiple",
            filterItems: [
                {
                    name: "Science Department",
                },
                {
                    name: "Music Department",
                },
            ]
        },
    ]

Events

1. onSubmit when search form is submitted on enter
2. filterChange when filters are removed from the submitted search
   • this will allow the parent to update the results
3. viewModeChange when the viewMode changes value an event should be emitted to the parent so that the parent can display the results with the desired view mode.