Fixed

• Now inline mode are paddingless and wrapper have content-box (#49)
• If there is only three or less swatches, wrapper width with adjust automatically

Fixed

• Fallback Ok button now is not visible using inline mode

Fixed

• Fixed core-js and vue dependencies collision

This is a major update for vue-swatches, it delivers new functionality, but more importantly, this update really cleans the API, removing, reworking and adding some props. Unfortunately this update comes with a few breaking changes too, make sure to review the migration guide. Without further ado let's review the update.

What is new in this update?

• If you are using Nuxt, now you can add vue-swatches to your project easily, see more...
• Build setup completly migrated to Vue CLI 4
• Brand new documentation site built with Vuepress
• Code coverage is back
• Bundle size reduced in ~1.7kb

And what is new for me?

• The popover got some reworking, now you can especify where to pop up (previously it only pops up bellow the trigger), see more...
• There is a new always-on-screen functionality for the popover out of the box, so it always shows up, regardless if there is enough space
• New prop: spacing size, it handles the gap space between each swatches, see more...
• Now you can show a label bellow each swatch, see more...
• Adding a label also sets the alternative text for each swatch, see more...
• Now you can show the border independently for each swatch, see more...

Things fixed

• The component now is fully compatible with SSR

What's coming next?

• Full keyboard navegability support
• Full Popover accessibility support
• Storybook showcase
• E2E tests

Final Notes

• Documentation for vue-swatches v1.x is live here: https://vue-swatches-v1.netlify.com/
• Want to become a mantainer/contributor? ping me to [email protected]
• If you don't know what Inversion Of Control (IOC) I highly suggest you to see this video, it's a React video, but the main idea is applicable to Vue, it will give you an idea of what is the future of vue-swatches

Added

-fallbackInputType prop. #24 - PR Thanks to @endorfin

Fixed

• Prevent the fallback button to submit a form. #17 - PR Thanks to @robindrost

Fixed

• Internal value is used instead of value #16

Added

• diagonal indicator for the trigger when selecting no-color/transparent

General

Bundle size reduced from 34.5KB (10.8KB GZipped) to 19.5KB (6.34KB GZipped)

Added

• Disabled State
• Fallback Input

• No-Color/Transparent Swatch
• Open event

Removed

• VueSwatches no longer throw Errors with custom messages.
• Support for Storybooks (waiting Webpack 4 Support)

Added

• open event

Development

• Added storybook support