# grid-layout-wc

> Webcomponent grid-layout-wc following open-wc recommendations

Latest version **0.1.11** (published 2023-12-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install grid-layout-wc
pnpm add grid-layout-wc
yarn add grid-layout-wc
bun add grid-layout-wc
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.11 |
| Published | 2023-12-13 |
| First published | 2023-10-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 276.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | grid-layout-wc |
| Maintainers | jiasoft |

## Links

- npm: https://www.npmjs.com/package/grid-layout-wc
- npm.io page: https://npm.io/package/grid-layout-wc

## Dependencies (2)

- [lit](https://npm.io/package/lit.md) ^2.0.2
- [tslib](https://npm.io/package/tslib.md) ^2.3.1

## Recent versions

- 0.1.11 (latest) — 2023-12-13
- 0.1.10 — 2023-12-11
- 0.1.9 — 2023-12-11
- 0.1.7 — 2023-11-21
- 0.1.5 — 2023-11-16
- 0.1.4 — 2023-11-15
- 0.1.2 — 2023-11-15
- 0.1.1 — 2023-11-15
- 0.0.11 — 2023-11-15
- 0.0.10 — 2023-11-14
- 0.0.9 — 2023-11-14
- 0.0.8 — 2023-11-13
- 0.0.7 — 2023-11-13
- 0.0.6 — 2023-11-10
- 0.0.5 — 2023-11-07
- … 5 more at https://npm.io/package/grid-layout-wc/versions

## README

# \<grid-layout-wc>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation

```bash
npm i grid-layout-wc
```

## Usage VUE DEMO

```html
<script type="module">
  import 'grid-layout-wc/grid-layout-wc.js';
  const layoutList = [
    {x: 1, y: 1, w: 44, h: 40,"slot":"1","id":1},
    {x: 46, y: 1, w: 81, h: 40,"slot":"2","id":2},
    {x: 1, y: 42, w: 69, h: 35,"slot":"3","id":3},
    {x: 71, y: 42, w: 56, h: 35,"slot":"4","id":4},
    {x: 1, y: 55, w: 37, h: 34,"slot":"5","id":5,float: true}
  ]
  const isEdit = ref(false);
  const onEdit = (e) => {
    console.log(e)
    isEdit.value = true;
  }
  const onClose = (e) => {
    console.log(e);
    isEdit.value = false;
  }
  const onSave = (e) => {
    console.log(e);
  }
</script>

<grid-layout-wc :layoutData="layoutList" :edit="isEdit" @close="onClose" @save="onSave">
  <div slot="1">
    <highcharts01 />
  </div>
  <div slot="2">
    <highcharts02 />
  </div>
  <div slot="3" >
    <highcharts03 />
  </div>
  <div slot="4" >
    <highcharts04 />
  </div>
  <div slot="5">
    <highcharts05 />
  </div>
</grid-layout-wc>
```



## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`

```bash
npm start
```

To run a local development server that serves the basic demo located in `demo/index.html`
##发布
```bash
npm publish
```

## vue demo
https://github.com/jiasoft/vue-demo-grid-layout-wc

## angular demo 
https://github.com/jiasoft/ng-demo-grid-layout-wc

## react demo
https://github.com/jiasoft/react-demo-grid-layout-wc

---
_Source: https://npm.io/package/grid-layout-wc · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._