This component library is designed for use with Vue 3 and is built using the Composition API. It features a modern, flat design with the NORD color palette and includes both light and dark themes.
The library also includes a customizable toast plugin, which enables you to display success, error, info, and warning messages in various positions and durations. Additionally, the library features customizable color animations that activate when users interact with components like inputs.
It's intended to be used with Laravel, InertiaJS and Vue 3.
There is currently no documentation for this library, but it will be added in the future.
✅ Implemented
❌ Not implemented
✅ Input component
✅ Select component
✅ Textarea component
✅ Checkbox component
✅ File component
✅ Date & Time component
✅ Button component
❌ Dropzone upload component
✅ Radio component
✅ Switch component
❌ Range component
❌ Color component
✅ Tags component
✅ Rating component
✅ Heading component
✅ Text/paragraph component
✅ Link component
✅ Toast component and plugin
❌ Modal component and plugin
❌ Card component
❌ Fix DateTimePicker component to be initialized with a empty value (currently it's initialized with the current date and time but can be resat to empty with the clear button). Just using the reset method will not work (month and year will display as 00-00 in the input)
❌ Make tags component also take a options prop (like the select component) so that it can be used as a select component with predefined options only or a mix between predefined and user defined tags.
❌ Toast system needs an upgrade. Need to modify it so that toasts can be paused when hovering over them. Also need to add perfect scrollbar to the toast container so that it can be scrolled when there are many toasts. We also need to consider adding a AI time-to-read implementation when regarding the duration of the toasts with a minimum duration.
❌ Modify checkbox component to take in other values than booleans. For example, if you want to use a checkbox to select a value from a list of options, you would want to pass in the value of the option to the checkbox and then have the checkbox emit the value of the option when it's checked. This would make it easier to use the checkbox component in a v-for loop.
❌ Add prop: clean to VSelect to remove paddings, borders and background colors so it can be used inside other components that are supposed to be inputs but require multiple select components in a row.
If you want to contribute to this project, please read the CONTRIBUTING.md file for more information.
This project is open-sourced software licensed under the MIT license.