Component Request - DatePicker - {x}hrs

[pghorpade]

Component Description

This component is used on the Event Listing page to display the Date filter dropdown. This could be used as a filter drop-down in the search-generic component on the library website or the FTVA Event listing page within the context of the search.
Jessica looked at Vue3 Date Picker and we found it sufficient to use and customize it to build this component.

This component is just the drop-down portion since we have already built the button which is here https://github.com/UCLALibrary/ucla-library-website-components/blob/main/src/lib-components/SearchGenericFilterButtons.vue which is used in SearchGeneric component.

So we will update SearchGenericFilterButtons to look like this for FTVA in a different ticket

Similar drop-down components are:

• https://github.com/UCLALibrary/ucla-library-website-components/blob/main/src/lib-components/BaseCheckboxGroup.vue
• https://github.com/UCLALibrary/ucla-library-website-components/blob/main/src/lib-components/BaseRadioGroup.vue

Design

Please also see the attached screenshots for quick reference.

• Design System: https://www.figma.com/file/EKazRIMP4B15bD16UDbOwR/UCLA-Library-Design-System?type=design&node-id=9149-3997&mode=design&t=71Q41qdoRCIMdFkP-0

If no mobile designs provided, please use your best judgment for responsiveness.

Slots

Name and description of any slots needed.
Vue3 DatePicker accepts slots, we will need to pass dot SVG which show existing events for the dates

Props

const props = defineProps({
    items: {
            type: Array,
            default: () => [],
        },
        selected: {
            type: Array,
            default: () => [],
        },
})

Developer Tips

List any developer tips here:
The Design system has all the variables/tokens we need to use on the component and other styling and spacing notes by the UX team about hover and selected state styling.

The difference between the mobile view and desktop view interaction is that the user will only select one date in mobile to filter the events, but in the desktop view, the user can select one or a start and end date to filter the events.

The data from the Vue3 DatePicker looks like this
[Date, Date] if theres a range
[Date, null] if its a single date

Events

Describe any events that should be emitted by this component.

1. update:selected when the user clicks on the done button to sync selected dates back with selected dates in the parent component // we may not need this for vue3 if using v-model to sync data between parent and child
2. input-selected when the user clicks on the done button, this will trigger an event handler in the parent component which will emit an event to be consumed by the page

Child components

List out any components that are used by this new component. For example, if you are building a grid that is made up of block components.

1. ButtonLink is used for Clear and Done Buttons, these button are similar to the Register button on BannerFeatured or BannerHeader
2. VueDatePicker -> third party Vue3component
3. Vue3 transition component to wrap the VueDatePicker

SVG component used :

Watcher:

We need to watch the selected prop

Data:

parsedSelected = ref([])

Screenshots

[pghorpade]

@axamei My assumption is we will be using the search-generic filter button component for the "upcoming events button", and this component will just be the dropdown piece. Also go over this component request and give us your feedback.

[pghorpade]

@farosFreed Please take a look at this and update the issue if needed based on @axamei's input

[axamei]

@pghorpade This component will not have a search input. If the search input is optional on the search generic component, then I don't see an issue with this.

[pghorpade]

@axamei Since we have static sites, to make this filter work we will be pulling data from Elastic search on the client side when the user filter date, we can make the search-Input component optional for these kinds of listing pages where not needed in the search-generic component.

[axamei]

@pghorpade Great. Let's make the input optional.

[farosFreed]

Closing this issue as Datepicker has been completed and released