Package Exports
- vue-ts-responsive-grid-layout
- vue-ts-responsive-grid-layout/style.css
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.
A proper App developed for testing purposes.
Documentation website contains 13 examples. Will be updated when new features are added to the component.
Donate
If you enjoyed this project — or just feeling generous, consider buying me a 🍺. Cheers!
New Features:
- 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).
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.
Changelog
v: 1.2.4 (2023-10-23)
- Fixed Issue Layout update event is raised before update is finished. Tnxs to SamGeems
- Fixed issue Close button css is different from the example. Tnxs to SamGeems
- Feature Added event drag-end to GridLayout.
- Feature Added event drag-move to GridLayout.
- Feature Added event drag-start to GridLayout.
- Codebase Renamed EGridLayoutEvent value UPDATE_LAYOUT to LAYOUT_UPDATE.
- Codebase Removed file EDragEvents and updated GridLayout. Values are implemented in EGridLayoutEvent.
- Codebase Added documentation to file DOM.ts
- Codebase Added new enum for drag events and refactored GridLayout to use new enum.
- Refactor Removed obsolete enum EMovingDirections.
- Demo App Added button for clearing the event log.
- Demo App Added Dropdown for filtering on events.
v: 1.2.2 (2023-09-19)
- Fixed Issue Drag and Drop from outside is not working when distributeEvenly prop is set
- Partial Fix Resizemove edges case handling is incomplete
- Right, Right Bottom and Bottom resize fixed.
- Left, Top Left, Top and Top Right resize not fixed.
- Codebase Adding description to functions.
- Codebase Added contributors to package.json.
- Codebase Added badges to README file.
- Codebase Fixed outdated dependencies.
Thanks to UTing1119 for his contribution to this release.
v: 1.2.1 (2023-05-07)
Setting up vue-ts-responsive-grid-layout in your project
Auditing the package
npm audit --registry=https://registry.npmjs.org/