https://github.com/gwinnem/vue-responsive-grid-layout
A draggable, resizable and responsive grid layout, developed with vue3 and typescript.
https://github.com/gwinnem/vue-responsive-grid-layout
dashboard-layout dashboards grid-layout responsive-dashboard responsive-grid responsive-grid-layout typescript vue-component vue3 vuejs3
Last synced: 12 months ago
JSON representation
A draggable, resizable and responsive grid layout, developed with vue3 and typescript.
- Host: GitHub
- URL: https://github.com/gwinnem/vue-responsive-grid-layout
- Owner: gwinnem
- License: mit
- Created: 2023-02-06T14:57:41.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-09-12T13:13:58.000Z (over 1 year ago)
- Last Synced: 2025-03-05T15:04:27.195Z (over 1 year ago)
- Topics: dashboard-layout, dashboards, grid-layout, responsive-dashboard, responsive-grid, responsive-grid-layout, typescript, vue-component, vue3, vuejs3
- Language: Vue
- Homepage: https://vue-ts-responsive-grid-layout.winnem.tech/
- Size: 2.79 MB
- Stars: 71
- Watchers: 5
- Forks: 9
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
[](https://github.com/prettier/prettier)
[](https://bundlephobia.com/result?p=vue-ts-responsive-grid-layout)
[](https://www.npmjs.com/package/vue-ts-responsive-grid-layout)
[](https://github.com/gwinnem/vue-ts-responsive-grid-layout/blob/master/LICENSE)
[](http://commitizen.github.io/cz-cli/)
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](https://github.com/jbaysolutions/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](https://vitest.dev/)
* __Unit test console__ [Using Vitest UI](https://vitest.dev/guide/ui.html#vitest-ui)
* __e2e tests__ [Using nightwatchjs](https://nightwatchjs.org/)
## Changelog
### v: 1.2.10 (2025-04-28)
* __Demo App__ [Eventlog is not displaying any resize events.](https://github.com/gwinnem/vue-responsive-grid-layout/issues/46)
* __Fixed Issue__ [The margin property cannot be [0,0]](https://github.com/gwinnem/vue-responsive-grid-layout/issues/64)
* __Fixed Issue__ [Hide resize cursor change when GridItem is not resizable](https://github.com/gwinnem/vue-responsive-grid-layout/issues/49)
* __Tests__ Added more unit tests and refactored code so it is easier to test.
* __Tests__ Updated vitest.config.js coverage exclude section.
### v: 1.2.9 (2024-02-03)
* __Fixed Issue__ [Dynamic change columns, item will overlap](https://github.com/gwinnem/vue-responsive-grid-layout/issues/12)
### v: 1.2.8 (2024-01-25)
* __Fixed Issue__ [Unexpected Behavior when dragging items](https://github.com/gwinnem/vue-responsive-grid-layout/issues/54) Tnxs to [T0miii](https://github.com/T0miii)
### v: 1.2.7 (2024-01-10)
* __Fixed Issue__ [option "responsive" not working](https://github.com/gwinnem/vue-responsive-grid-layout/issues/51). Tnxs to [T0miii](https://github.com/T0miii)
### v: 1.2.6 (2023-12-28)
* __Fixed Issue__ Problem if layout doesnt have static item [PullRequest](https://github.com/gwinnem/vue-responsive-grid-layout/pull/47)
### v: 1.2.5 (2023-12-14)
* __Fixed Issue__ [editMode not working as expected](https://github.com/gwinnem/vue-responsive-grid-layout/issues/33)
* __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](https://github.com/gwinnem/vue-responsive-grid-layout/issues/19). Tnxs to [SamGeems](https://github.com/SamGeens)
* __Fixed issue__ [Close button css is different from the example](https://github.com/gwinnem/vue-responsive-grid-layout/issues/20). Tnxs to [SamGeems](https://github.com/SamGeens)
* __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](https://github.com/gwinnem/vue-responsive-grid-layout/issues/5)
* __Partial Fix__ [Resizemove edges case handling is incomplete](https://github.com/gwinnem/vue-responsive-grid-layout/issues/13)
* __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](https://github.com/UTing1119) for his contribution to this release.
### v: 1.2.1 (2023-05-07)
* --Fixed Issue-- [Issue 7](https://github.com/gwinnem/vue-responsive-grid-layout/issues/7), thanks to [UTing1119](https://github.com/UTing1119)
* --Fixed Issue-- [Issue 6](https://github.com/gwinnem/vue-responsive-grid-layout/issues/6), thanks to [UTing1119](https://github.com/UTing1119)
## Setting up vue-ts-responsive-grid-layout in your project
[Howto](https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/docs/setup.md)
#### Auditing the package
```
npm audit --registry=https://registry.npmjs.org/
```
### References
* [Mini.css used in the sandbox](https://minicss.us/docs.htm#)
* [Vue-Multiselect used in the sandbox](https://vue-multiselect.js.org/#sub-getting-started)
* [Vitest](https://vitest.dev/)
* [Vitest UI](https://vitest.dev/guide/ui.html#vitest-ui)
* [nightwatchjs](https://nightwatchjs.org/)