{"_id":"@aftt/vue3-grid-layout","name":"@aftt/vue3-grid-layout","dist-tags":{"latest":"1.0.7"},"versions":{"1.0.7":{"name":"@aftt/vue3-grid-layout","version":"1.0.7","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/aiftt/vue3-grid-layout.git"},"author":"","homepage":"https://github.com/aiftt/vue3-grid-layout","main":"dist/vue3-grid-layout.js","unpkg":"dist/vue3-grid-layout.umd.cjs","typings":"dist/components/index.d.ts","scripts":{"dev":"vite","build":"vue-tsc --noEmit && vite build","preview":"vite preview"},"dependencies":{"@interactjs/actions":"^1.10.17","@interactjs/auto-scroll":"^1.10.17","@interactjs/auto-start":"^1.10.17","@interactjs/dev-tools":"^1.10.17","@interactjs/interact":"^1.10.17","@interactjs/modifiers":"^1.10.17","@interactjs/core":"^1.10.17","@interactjs/utils":"^1.10.17","element-resize-detector":"^1.2.4","interactjs":"^1.10.17","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":"d057210f3269143d269b1ba231605ffac8084243","bugs":{"url":"https://github.com/aiftt/vue3-grid-layout/issues"},"_id":"@aftt/vue3-grid-layout@1.0.7","_nodeVersion":"20.16.0","_npmVersion":"9.6.3","dist":{"integrity":"sha512-xO567RD3KAI56OJ9DLknC22r/YYE1+A9TAj4eFBUFKGC43luCbnVx++Mx2j2aIy569K8EFmiCofnopCDbZgoZw==","shasum":"b3c7a8347e6493251d08670746309a9964f5784e","tarball":"https://registry.npmjs.org/@aftt/vue3-grid-layout/-/vue3-grid-layout-1.0.7.tgz","fileCount":40,"unpackedSize":387296,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAN9IuL9dLd3OmOqbPZu/yVES3S3ptkLguMdpJx37U2FAiEA3lj8xW/iiTY+sBZdVaLpdM+UsfsJIg1ptps9n4BEgDU="}]},"_npmUser":{"name":"aftt","email":"ftt.loves@gmail.com"},"directories":{},"maintainers":[{"name":"aftt","email":"ftt.loves@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue3-grid-layout_1.0.7_1722852001702_0.048045990372638236"},"_hasShrinkwrap":false}},"time":{"created":"2024-08-05T10:00:01.586Z","1.0.7":"2024-08-05T10:00:01.950Z","modified":"2024-08-05T10:00:02.475Z"},"maintainers":[{"name":"aftt","email":"ftt.loves@gmail.com"}],"description":"A draggable and resizable grid layout, as a Vue component.","homepage":"https://github.com/aiftt/vue3-grid-layout","keywords":["grid","vuejs","drag","draggable","resize","resizable","fluid","responsive"],"repository":{"type":"git","url":"git+https://github.com/aiftt/vue3-grid-layout.git"},"bugs":{"url":"https://github.com/aiftt/vue3-grid-layout/issues"},"license":"MIT","readme":"# Support By\n\nThis project js support by [vue-grid-layout](https://github.com/jbaysolutions/vue-grid-layout), but vue-grid-layout do not support vue3.\n\n# Vue 3 + TypeScript + Vite\n\n The template uses Vue 3 `<script setup>` SFCs, so pay attention to the version of vue.\n\n## Supports Vue 3.2+\n\n# Usage\n\n```shell\nnpm i vue3-grid-layout-next\n```\n\n<h2>\n  <a href=\"https://jbaysolutions.github.io/vue-grid-layout/\" target=\"_blank\">Documentation Website</a>\n</h2>\n\n## add Scoped slot\n```html\n<grid-item v-slot=\"{style}\">\n  <div>\n    <!-- get attribute, such as width,height, and so no  -->\n    {{ style }}\n  </div>\n</grid-item>\n```\n\n## add dragging、 dragend event\n\n```html\n<grid-item\n  @dragging=\"doSomething\"\n  @dragend=\"doSomethingEnd\"\n  >\n</grid-item>\n\n<script lang=\"ts\" setup> \n\n  function doSomethin(event: MouseEvent, i: number | string) {\n    \n  }\n</script>\n```\n\n## beware\n\n### Usage with v-model\n\n```html\n <GridLayout v-model:layout=\"layout\">\n  ...\n </GridLayout>\n```\n\n### Use ref object\n\nIf the responsive property is true, make sure layout is a ref object\n\n```html\n<script lang=\"ts\" setup> \n\n  const responsive = ref(true)\n  const layout = ref([])\n  // const layout = reactive([]) // will cause some bug\n\n  // it will work, when responsive is false\n  // const layout = reactive([])\n\n</script>\n\n<template>\n  <div class=\"layout\">\n    <GridLayout v-model:layout=\"layout\" :responsive=\"responsive\" >\n      ...\n    </GridLayout>\n  </div>\n</template>\n```\n\n# example \n\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)\n\n\n","readmeFilename":"readme.md"}