vue3-ts-grid-layout/README.md

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

<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/vue3-ts-grid-layout)](https://bundlephobia.com/result?p=vue3-ts-grid-layout)
[![npm](https://img.shields.io/npm/v/vue3-ts-grid-layout)](https://www.npmjs.com/package/vue3-ts-grid-layout)
[![NPM](https://img.shields.io/npm/l/vue3-ts-grid-layout)](https://gitee.com/wsck/vue3-ts-grid-layout/blob/main/LICENSE)
[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)

</div>


## 关于 vue3-ts-grid-layout

vue3-ts-grid-layout VUE 3 响应式网格布局基于 JBaysolution 的 vue-grid-layout 的原始工具。

这个新的和重构的组件具有更多功能、类型安全的 Emits、Props 和严格的 linting 规则设置。

为测试目的而开发的适当应用程序。

文档网站包含 13 个示例。将在向组件添加新功能时更新。

## Donate



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


## 项目中使用

[使用手册](https://gitee.com/wsck/vue3-ts-grid-layout/blob/main/README.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/)