VUE 3 responsive grid layout is based on the original work by JBaysolution's vue-grid-layout.
This new and refactored component has more features, typesafe Emits, Props and a strict linting rule setup.
A proper App developed for testing purposes.
Documentation website contains 13 examples. Will be updated when new features are added to the component.
If you enjoyed this project — or just feeling generous, consider buying me a 🍺. Cheers!
- Prop in GridLayout for distributing GridItem's equally.
- GridLayout now has slot for GridItem.
- Prop for displaying grid lines in GridLayout.
- Prop for setting edit mode in GridLayout. Shortcuts the isDraggable and isResizable props.
- Prop for adding border radius in GridLayout. Adds a 8px radius to each GridItem.
- Prop in GridLayout for shifting GridItems horizontally when dragging instead of vertical.
- Separated out style variables, so it is easier to restyle the component.
- Added tab navigation support.
- Close button in GridItem for removing the GridItem from the GridLayout.
- Added more events to GridLayout and GridItem.
- Support for resize Bottom, Bottom Right and Right in GridIem.
- Draggable widgets
- Resizable widgets
- Static widgets
- Bounds checking for dragging and resizing
- Widgets may be added or removed without rebuilding grid
- Layout can be serialized and restored
- Automatic RTL support
- Responsive using predefined layout's for different breakpoints.
- GridItem automatically resizes when content change(Useful when displaying charts).
- Unit tests Using Vitest
- Unit test console Using Vitest UI
- e2e tests Using nightwatchjs
npm audit --registry=https://registry.npmjs.org/