{"_id":"@aimee00/vue-grid-layout-3","name":"@aimee00/vue-grid-layout-3","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@aimee00/vue-grid-layout-3","version":"1.0.0","type":"module","description":"A draggable and resizable grid layout, as a Vue component.","keywords":["grid","vuejs","drag","draggable","resize","resizable","fluid","responsive"],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/yeroumei/vue-grid-layout-3.git"},"author":"","homepage":"https://github.com/yeroumei/vue-grid-layout-3","main":"dist/vue-grid-layout-3.js","unpkg":"dist/vue-grid-layout-3.umd.cjs","typings":"dist/components/index.d.ts","scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"dependencies":{"@interactjs/actions":"^1.10.27","@interactjs/auto-scroll":"^1.10.27","@interactjs/auto-start":"^1.10.27","@interactjs/dev-tools":"^1.10.27","@interactjs/interact":"^1.10.27","@interactjs/modifiers":"^1.10.27","@interactjs/core":"^1.10.27","@interactjs/utils":"^1.10.27","element-resize-detector":"^1.2.4","interactjs":"^1.10.27","mitt":"^3.0.0"},"devDependencies":{"@types/element-resize-detector":"^1.1.3","@types/node":"^18.11.9","@typescript-eslint/eslint-plugin":"^5.17.0","@typescript-eslint/parser":"^5.30.6","@vitejs/plugin-vue":"^3.2.0","eslint":"^8.12.0","eslint-config-prettier":"^8.5.0","eslint-plugin-prettier":"^4.0.0","eslint-plugin-vue":"^8.5.0","prettier":"^2.6.1","typescript":"^4.6.4","vite":"^3.2.3","vite-plugin-dts":"^3.5.1","vite-plugin-libcss":"^1.0.5","vue":"^3.2.41","vue-tsc":"^1.0.9"},"gitHead":"539fb486a2b3cfbf5dc63438af943d6234ff431c","bugs":{"url":"https://github.com/yeroumei/vue-grid-layout-3/issues"},"_id":"@aimee00/vue-grid-layout-3@1.0.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-5VzWx17FexE7B7fw5jQhExoJfFZrAC0s4h++xOtnBKj/5NGRGBww5stFzecHnS3IdXpfnPLPATqDvpVWVgkZvA==","shasum":"1ce1aa8a6a21c26091c3566690afc9297f36ced7","tarball":"https://registry.npmjs.org/@aimee00/vue-grid-layout-3/-/vue-grid-layout-3-1.0.0.tgz","fileCount":39,"unpackedSize":347359,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEkFzL5DqzjhXyiGunHsnwNIyMbX5ejGr01unCePYlQWAiA+rAD++1nyf7H/OjRCMEUkzlx2qEtiPXOgCBD/nnOx5w=="}]},"_npmUser":{"name":"aimee00","email":"1183585400@qq.com"},"directories":{},"maintainers":[{"name":"aimee00","email":"1183585400@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-grid-layout-3_1.0.0_1713890913390_0.144850958387732"},"_hasShrinkwrap":false}},"time":{"created":"2024-04-23T16:48:33.272Z","1.0.0":"2024-04-23T16:48:33.551Z","modified":"2024-04-23T16:48:33.902Z"},"maintainers":[{"name":"aimee00","email":"1183585400@qq.com"}],"description":"A draggable and resizable grid layout, as a Vue component.","homepage":"https://github.com/yeroumei/vue-grid-layout-3","keywords":["grid","vuejs","drag","draggable","resize","resizable","fluid","responsive"],"repository":{"type":"git","url":"git+https://github.com/yeroumei/vue-grid-layout-3.git"},"bugs":{"url":"https://github.com/yeroumei/vue-grid-layout-3/issues"},"license":"MIT","readme":"# Support By\r\n\r\nThis project js support by [vue-grid-layout](https://github.com/xhlife/vue3-grid-layout)\r\n\r\n# Vue 3 + TypeScript + Vite\r\n\r\n The template uses Vue 3 `<script setup>` SFCs, so pay attention to the version of vue.\r\n\r\n## Supports Vue 3.2+\r\n\r\n# Usage\r\n\r\n```shell\r\nnpm i vue3-grid-layout-next\r\n```\r\n\r\n<h2>\r\n  <a href=\"https://jbaysolutions.github.io/vue-grid-layout/\" target=\"_blank\">Documentation Website</a>\r\n</h2>\r\n\r\n## add Scoped slot\r\n```html\r\n<grid-item v-slot=\"{style}\">\r\n  <div>\r\n    <!-- get attribute, such as width,height, and so no  -->\r\n    {{ style }}\r\n  </div>\r\n</grid-item>\r\n```\r\n\r\n## add dragging、 dragend event\r\n\r\n```html\r\n<grid-item\r\n  @dragging=\"doSomething\"\r\n  @dragend=\"doSomethingEnd\"\r\n  >\r\n</grid-item>\r\n\r\n<script lang=\"ts\" setup> \r\n\r\n  function doSomethin(event: MouseEvent, i: number | string) {\r\n    \r\n  }\r\n</script>\r\n```\r\n\r\n## beware\r\n\r\n### Usage with v-model\r\n\r\n```html\r\n <GridLayout v-model:layout=\"layout\">\r\n  ...\r\n </GridLayout>\r\n```\r\n\r\n### Use ref object\r\n\r\nIf the responsive property is true, make sure layout is a ref object\r\n\r\n```html\r\n<script lang=\"ts\" setup> \r\n\r\n  const responsive = ref(true)\r\n  const layout = ref([])\r\n  // const layout = reactive([]) // will cause some bug\r\n\r\n  // it will work, when responsive is false\r\n  // const layout = reactive([])\r\n\r\n</script>\r\n\r\n<template>\r\n  <div class=\"layout\">\r\n    <GridLayout v-model:layout=\"layout\" :responsive=\"responsive\" >\r\n      ...\r\n    </GridLayout>\r\n  </div>\r\n</template>\r\n```\r\n\r\n# example \r\n\r\n[demo for echart](https://cxid.gitee.io/works/work/vue3-grid-layout/index.html) - [source：https://gitee.com/cxid/vue3-grid-layout-demo](https://gitee.com/cxid/vue3-grid-layout-demo)\r\n\r\n\r\n","readmeFilename":"readme.md"}