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.

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.

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.

Changelog

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)

• --Fixed Issue-- Issue 7, thanks to UTing1119
• --Fixed Issue-- Issue 6, thanks to UTing1119

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

Howto

Auditing the package

 npm audit --registry=https://registry.npmjs.org/

References

• Vue Grid Layout
• Mini.css used in the sandbox