CED-1790 create v3 EsZipCodeForm

[lgeggleston]

🔗 Linked issue

https://energysage.atlassian.net/browse/CED-1790

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

• Recreated EsZipCodeForm for vue 3
• Note: One change from Vue 2 showed up in EsFormInput - inheritAttrs: false previously did not include classes but does now, and the zip code form needs to pass some classes to the input-wrapper. I added a workaround to enable in this case
• Note: Added vuelidateInteger, because the updated version now allows decimals with vuelidateNumber which does make sense, this is more specific

🥼 Testing

• Tested watcher on zipCodeValue via a timeout to set it on the docs page
• basic a11y testing for keyboard navigation and aria attributes

🧐 Feedback Requested / Focus Areas

• I removed the class invalid, because it didn't seem to have an effect or be styled anywhere now, perhaps replaced by is-invalid on form input. Would love a 2nd opinion on this however

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.
• I have documented testing approach

[swarmia]

✅  Linked to Task CED-1790 · Create v3 EsZipCodeForm
➡️  Part of Epic CED-1339 · Build Vue 3 design system [MC]

[tomleo]

👀

[tomleo]

This isn't a regression as this behavior matches what we had before, but the side-by-side doesn't seem to be optimal in mobile

[tomleo]

Overall looks good 👍

One possible tweak with v-model on the input

[lgeggleston]

This isn't a regression as this behavior matches what we had before, but the side-by-side doesn't seem to be optimal in mobile

That's a fair point for this example in the docs page, but I'm going to say this is a use case that should still be supported. The stackUntil just allows any viewport to be entered so it's up to the instance to set it at a viewport that makes sense; and there's a possibility it can look fine side-by-side on mobile if someone wants a short button text:

I updated the docs page button to that so that it makes more sense.

[tomleo]

👍