Package Exports
- vue-ts-responsive-grid-layout
Readme
vue-ts-responsive-grid-layout
Documentation Website
What is vue-ts-responsive-grid-layout
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.
Current version: 1.0.4beta (Supports Vue 3.+)
New Features:
- 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.
Original Features:
- 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).
Major refactorings
- Converted code base to typescript.
- Enforced proper coding style and type safety for typescript.
- Using proper linting rules for vue, typescript and styles.
- Component using script setup style syntax.
- Props and emits are typesafe.
Donate
If you enjoyed this project — or just feeling generous, consider buying me a beer. Cheers! 🍻
Setting up vue-ts-responsive-grid-layout in your project
Auditing the package
npm audit --registry=https://registry.npmjs.org/