Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

ck-vue3-ts-grid-layout

gwinnem31MIT1.0.4

Vue 3 Responsive & Dynamic Grid / Dashboard layout with drag, drop and resizable actions.

grid, dynamic-grid, grid-layout, responsive-grid-layout, dynamic-grid-layout, layout, resize, drag, drop, drag-and-drop, responsive, typescript, es6, vue-plugin, vite, vue-3, composition-api, vue-component-library, dashboard, dashboard-layout, dashboard-responsive-layout, dynamic-dashboard

readme

code style: prettier npm bundle size npm NPM Commitizen friendly

logo

ck-vue3-ts-grid-layout

Documentation Website

What is ck-vue3-ts-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.


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

Setting up ck-vue3-ts-grid-layout in your project

Howto


Auditing the package

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

References