feat: APPS-2076 Create DateFilter component and install Vue3Datepicker

[farosFreed]

Connected to APPS-2076

Component Created: DateFilter.vue

Stories: ~/stories/DateFilter.stories.js

Spec: ~/stories/DateFilter.spec.js

Notes: Our custom DateFilter.vue component implements the Vue3Datepicker component and makes use of the slots and methods to create a custom datepicker that matches these mockups from design.

DATA IN

DateFilter.vue has 3 optional props: eventDates - an array of strings representing Dates ex: ['2/29/2024', '2/29/2024', '2/29/2024', '2/29/2024', '3/1/2024', '3/2/2024', '3/2/2024', '3/4/2024', '3/6/2024', '3/8/2024', '3/19/2024', '3/19/2024', '3/19/2024', '3/19/2024', '3/19/2024', '3/19/2024',] If it is difficult to get the event data from Craft CMS in this format, we may need to rework parts of this component.

hideInput - If true, the datepicker will be shown in 'inline' mode I created a story to show this behavior. The default is false, so the input field will be shown by default.

initialDates - an object representing a selected date when the datefilter is initially loaded. It looks like { startDate: Date | null, endDate: Date | null }

DATA OUT

DateFilter.vue emits the 'input-selected' event and passes the currently selected Date or Date(s) when the user presses the 'done' button after selecting a date.

Before passing the selected Date, it will be formatted into the same format as the initialDate, ex: { startDate: Date | null, endDate: Date | null }

Checklist:

• [ X] I checked that it is working locally in the dev server
• [X ] I checked that it is working locally in the storybook
• [ X] I checked that it is working locally in the library-website-nuxt dev server
• [X ] I added a screenshot of it working
• [X ] UX has reviewed and approved this
• [X ] I assigned this PR to someone on the dev team to review
• [X ] I used a conventional commit message
• [ X] I assigned myself to this PR

[github-actions[bot]]

Percy Screenshots

In order to conserve our percy screenshot allowance, percy is not configured to run automatically. Please make sure the PR is ready and all other checks are passing, then start it manually:

1. Visit https://github.com/UCLALibrary/ucla-library-website-components/actions/workflows/percy.yml 2. Click the 'Run workflow' button in the blue bar. 3. Select the correct branch for this PR and click 'Run workflow' again to confirm.

[github-actions[bot]]

🚀 Deployed on https://deploy-preview-476--ucla-library-storybook-vue3x.netlify.app

[farosFreed]

[farosFreed]

Met with Axa and Selena Mar 20th for a design review, these changes / bugs were brought up during review:

• (Bug) Selecting 2 dates right next to each other leaves a blank space between the dates, it should be $accent-blue

• (Bug) Clicking the left/right month arrows does not clear the today button selected state

• When a date is selected or cleared from the calendar, it should also be selected or cleared in the input as well (calendar stays open)

• When a single date is selected, no '-' should appear after it in the input

• When clicking the today button again after selecting it, it should clear the selection (act like a toggle)

I'll work on these changes next 🛠️

[farosFreed]

Reviewed with developer team March 25th, these revisions were requested and added:

• replace methods with computed properties where possible
• format emitted date into { startDate: date, endDate: date } object
• accept an optional initial date selection in the same format as above
• ensure all css rules are within the top level container class

[pghorpade]

:tada: This PR is included in version 2.39.0-alpha.54 :tada:

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: