ck-vue3-ts-grid-layout/README.md

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

<!--
 * @Author: CK
 * @Date: 2025-04-02 00:18:22
 * @Description: 
 * @LastEditors: CK
-->
<div style="text-align: center">

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat)](https://github.com/prettier/prettier)
[![npm bundle size](https://img.shields.io/bundlephobia/min/ck-vue3-ts-grid-layout)](https://bundlephobia.com/result?p=ck-vue3-ts-grid-layout)
[![npm](https://img.shields.io/npm/v/ck-vue3-ts-grid-layout)](https://www.npmjs.com/package/ck-vue3-ts-grid-layout)
[![NPM](https://img.shields.io/npm/l/ck-vue3-ts-grid-layout)](https://github.com/gwinnem/ck-vue3-ts-grid-layout/blob/master/LICENSE)
[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)

</div>

<p align="center">
  <img src="https://raw.githubusercontent.com/gwinnem/vue-responsive-grid-layout/main/docs/Data%20Grid.svg" height="200" alt="logo">
</p>

<h1 align="center">ck-vue3-ts-grid-layout</h1>

<h2 align="center">
  <a href="https://ck-vue3-ts-grid-layout.winnem.tech" target="_blank">Documentation Website</a>
</h2>

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

<br/>

## Donate

If you enjoyed this project — or just feeling generous, consider buying me a 🍺. Cheers!

<br/>

<a href="https://paypal.me/gwinnem/">
    <img src="https://raw.githubusercontent.com/gwinnem/vue-responsive-grid-layout/dev/docs/paypal-images/blue.svg" height="40" alt="paypal">
</a>

<br/>

### 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


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

[Howto](https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/docs/setup.md)

<br/>

#### Auditing the package

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

<br/>

### 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/)