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!
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).
Testing:
- Unit tests Using Vitest
- Unit test console Using Vitest UI
- e2e tests Using nightwatchjs
Changelog
v: 1.2.9 (2024-02-03)
- Fixed Issue Dynamic change columns, item will overlap
v: 1.2.8 (2024-01-25)
- Fixed Issue Unexpected Behavior when dragging items Tnxs to T0miii
v: 1.2.7 (2024-01-10)
- Fixed Issue option "responsive" not working. Tnxs to T0miii
v: 1.2.6 (2023-12-28)
- Fixed Issue Problem if layout doesnt have static item PullRequest
v: 1.2.5 (2023-12-14)
- Fixed Issue editMode not working as expected
- Documentation Updated config so when refreshing a page it loads the correct page and not the 404 page.
- Demo App Added inputs for Margins.
- Refactor Updated style for gridlines in GridLayout.vue.
- Config Added style linting to project.
- Config Updated scripts section in package.json.
- Demo App Fixed index value when dropping a new GridItem onto the layout. This only works when index is a numeric value.
- Demo App Added checks so number input can not have less than 1.
- Tests Added more unit tests and refactored code so it is easier to test.
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/