vue-ts-responsive-grid-layout

1.2.9 • Public • Published

code style: prettier npm bundle size npm NPM Commitizen friendly

logo

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!


paypal

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:

Changelog

v: 1.2.9 (2024-02-03)

v: 1.2.8 (2024-01-25)

v: 1.2.7 (2024-01-10)

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)

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

Howto


Auditing the package

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

References

Package Sidebar

Install

npm i vue-ts-responsive-grid-layout

Weekly Downloads

187

Version

1.2.9

License

MIT

Unpacked Size

287 kB

Total Files

6

Last publish

Collaborators

  • gwinnem