{"_id":"@connecthing.io/vue3-drr-grid-layout","_rev":"5-44741345ab1cbb374dd5b4ad28ef705f","name":"@connecthing.io/vue3-drr-grid-layout","dist-tags":{"latest":"1.9.11"},"versions":{"1.9.11":{"name":"@connecthing.io/vue3-drr-grid-layout","version":"1.9.11","keywords":["grid","grid-layout","layout","resize","drag","vue3","vue","composition-api","typescript"],"author":{"name":"Victor Poltoratchi","email":"poltoratchi1369@gmail.com"},"license":"MIT","_id":"@connecthing.io/vue3-drr-grid-layout@1.9.11","maintainers":[{"name":"quentin.marechal","email":"quentin.marechal@davra.com"},{"name":"colinryan","email":"colin.ryan@davra.io"}],"homepage":"https://github.com/melrose13-69/vue3-dragable-grid-layout/tree/dev/packages/vue3-drr-grid-layout","bugs":{"url":"https://github.com/melrose13-69/vue3-dragable-grid-layout/issues","email":"poltoratchi1369@gmail.com"},"dist":{"shasum":"139c46cfe6f19fca3a48d1b8b50044af780ef2f1","tarball":"https://registry.npmjs.org/@connecthing.io/vue3-drr-grid-layout/-/vue3-drr-grid-layout-1.9.11.tgz","fileCount":8,"integrity":"sha512-8YsNXceobOD47cc/0alcKU7JyjpdnKucu05paTRMd3gRAnkDL0dCvVxGvLNg60z/ckf9hBJPW536I0gT/xai1A==","signatures":[{"sig":"MEUCIC4ZVY5fWHd78/yLt++/b7BjYXIkGPYiYqKNqe5u9jxbAiEA2yVmFsCmBiP1ocTkiTOc5vZkAiUVA2dU0X1Ap4nWbV4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":324504,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNRhOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqsSRAAgXJvjQ+3gyWhS3Rl8rDZ9h2xLZs7dvY66NAcgo49EZYj61ud\r\nsQn7QeUzUnDF2kh5ptTsqshMzL9WSZ63m97HlwgsiuEoTrIBCQE/YSwKfiyG\r\nB/IwWCUIWEy9qn7G/d/6ba7S9x8uytIYwGP/ko4xybxfHxff6apdJkIcrBfa\r\nIwTBsnkn6XXvl+flaRLWIwwiSLB9brBLmPrHSFoh5lUCRViHay3mhcX8FtdS\r\nmsVY4C1L2dy0yvBGK/a742M1pQIrHHNwhO3XnecuzJGKmbwwwu+OdOfrr0qs\r\n0HUKzzRrzY0LQwwYsDklECyequdkKuxjHvHX6Rse40Zrajp4/E5PX3C32xJ2\r\nbM2ioee/xrY93xsK61xVIWfqUnF/WaLc3i9qEyZqflxzdTrZHWfZA/NNwSg2\r\nz+DJk8833oQhGXh8fboPklZ5Rpy+kZZ3kr05OSKEsicfy5LFBwXF+EjPfVAP\r\nzUWIbcqOYPN8QH8mgT1e5SiF0q/k48H9rF+rVfmtdYNjSb/GCltyHwEPDxjA\r\nMcvPBTymE34iV/mwgLeZoVGz0lDwb50mELeDx+sLbruanUWRE5TAUbBJ1xEZ\r\nMbvEYB6IASCFf3R1N5ma9wcVMF61NGGJh8jixTor3UfNRcbELq0Ag1wH4RLe\r\nXhKPBN7BCxAzD2SYVcmC5H5S6IyJO5dtuSc=\r\n=9Nac\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/vue3-drr-grid-layout.umd.js","types":"dist/index.d.ts","module":"dist/vue3-drr-grid-layout.mjs","funding":{"url":"https://paypal.me/poltoratchi1?country.x=MD&locale.x=en_US","type":"paypal"},"gitHead":"db182052373d7b88003464cd60368db816264a3d","scripts":{"dev":"vite build --watch","test":"vitest","build":"cross-env NODE_ENV=production vite build && tsc -d --emitDeclarationOnly && vue-typegen gen -s src -o dist","lint:es":"eslint \"src/**/*.{js,ts,vue}\" --fix --color","preview":"vite preview","lint:style":"stylelint src/**/*.{css,scss,vue} --color --fix","test:coverage":"vitest run --coverage"},"_npmUser":{"name":"quentin.marechal","email":"quentin.marechal@davra.com"},"repository":{"url":"git+https://github.com/melrose13-69/vue3-dragable-grid-layout.git","type":"git","directory":"packages/vue3-drr-grid-layout"},"_npmVersion":"9.1.2","description":"Vue3 grid layout with resize, drag and responsive","directories":{},"_nodeVersion":"16.10.0","dependencies":{"vue":"^3.2.0","mitt":"^3.0.0","@interactjs/actions":"^1.10.17","@interactjs/dev-tools":"^1.10.17","@interactjs/modifiers":"^1.10.17","@interactjs/auto-start":"^1.10.17","@interactjs/interactjs":"^1.10.17","element-resize-detector":"^1.2.4","@types/element-resize-detector":"^1.1.3"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.54.0","vite":"^3.0.3","jsdom":"^20.0.0","vitest":"^0.19.1","vue-tsc":"^0.39.0","cross-env":"^7.0.3","@types/jest":"^28.1.6","vue-typegen":"^0.2.0","@babel/types":"^7.18.10","@vue/test-utils":"^2.0.2","vue-eslint-parser":"^9.0.3","@vitejs/plugin-vue":"^3.0.1","vue-template-compiler":"^2.7.8","@vue/eslint-config-typescript":"^11.0.0"},"peerDependencies":{"vue":"^3.2.0"},"_npmOperationalInternal":{"tmp":"tmp/vue3-drr-grid-layout_1.9.11_1681201229742_0.9901422236289155","host":"s3://npm-registry-packages"}}},"time":{"created":"2023-04-11T08:20:29.741Z","modified":"2025-07-03T08:55:12.391Z","1.9.11":"2023-04-11T08:20:30.028Z"},"bugs":{"url":"https://github.com/melrose13-69/vue3-dragable-grid-layout/issues","email":"poltoratchi1369@gmail.com"},"author":{"name":"Victor Poltoratchi","email":"poltoratchi1369@gmail.com"},"license":"MIT","homepage":"https://github.com/melrose13-69/vue3-dragable-grid-layout/tree/dev/packages/vue3-drr-grid-layout","keywords":["grid","grid-layout","layout","resize","drag","vue3","vue","composition-api","typescript"],"repository":{"url":"git+https://github.com/melrose13-69/vue3-dragable-grid-layout.git","type":"git","directory":"packages/vue3-drr-grid-layout"},"description":"Vue3 grid layout with resize, drag and responsive","maintainers":[{"email":"colin.ryan@davra.io","name":"colinryan"},{"email":"joe.quinn@davra.com","name":"joequinn"},{"email":"jude.shiels@davra.com","name":"jude.shiels"},{"email":"quentin.marechal@davra.com","name":"quentin.marechal"},{"email":"paul.mcnally@davra.com","name":"paulmcn98"}],"readme":"# vue3-drr-grid-layout\n[![npm package](https://img.shields.io/npm/v/vue3-drr-grid-layout.svg?style=flat-square)](https://www.npmjs.com/package/vue3-drr-grid-layout)\n[![npm downloads](https://img.shields.io/npm/dt/vue3-drr-grid-layout.svg?maxAge=2592000)]()\n[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://paypal.me/poltoratchi1?country.x=MD&locale.x=en_US)\n\n\nGrid layout for vue 3 with draggable, resize, responsive events\n\nModule use source code from [VueGridLayout](https://www.npmjs.com/package/vue-grid-layout)\n\nRewrote to TypeScript, Composition API and migrated to Vue3\n\n\n### Usage\n```js\n  import { createApp } from 'vue'\n  import App from './App.vue'\n  import GridLayout from 'vue3-drr-grid-layout'\n  import 'vue3-drr-grid-layout/dist/style.css'\n\n  const app = createApp(App)\n\n  app.use(GridLayout)\n\n  app.mount('#app')\n```\n```vue\n  <template>\n    <grid-layout\n      v-model:layout=\"layout\"\n      :col-num=\"12\"\n      :row-height=\"30\"\n      @resize=\"resize\"\n      @move=\"move\"\n      @moved=\"moved\"\n    >\n      <template #item=\"{ item }\">\n        {{ item.i }}\n      </template>\n    </grid-layout>\n  </template>\n  <script>\n    export default {\n      name: 'App',\n      data () {\n        return {\n          layout: [\n            { x: 0, y: 0, w: 2, h: 2, i: 0 },\n            { x: 2, y: 0, w: 2, h: 4, i: 1 },\n            { x: 4, y: 0, w: 2, h: 5, i: 2 },\n            { x: 6, y: 0, w: 2, h: 3, i: 3 },\n            { x: 8, y: 0, w: 2, h: 3, i: 4 },\n            { x: 8, y: 0, w: 2, h: 3, i: 5 },\n            { x: 0, y: 5, w: 2, h: 5, i: 6 },\n            { x: 2, y: 5, w: 2, h: 5, i: 7 },\n            { x: 4, y: 5, w: 2, h: 5, i: 8 },\n            { x: 6, y: 3, w: 2, h: 4, i: 9 }\n          ]\n        }\n      }\n    }\n  </script>\n```\nor\n```vue\n  <template>\n    <grid-layout\n            v-model:layout=\"layout\"\n            :col-num=\"12\"\n            :row-height=\"30\"\n    >\n      <template #default=\"{ gridItemProps }\">\n        <!-- | gridItemProps props from GridLayout | -->\n        <!--breakpointCols: props.cols-->\n        <!--colNum: props.colNum-->\n        <!--containerWidth: width.value-->\n        <!--isDraggable: props.isDraggable-->\n        <!--isResizable: props.isResizable-->\n        <!--lastBreakpoint: lastBreakpoint.value-->\n        <!--margin: props.margin-->\n        <!--maxRows: props.maxRows-->\n        <!--responsive: props.responsive-->\n        <!--rowHeight: props.rowHeight-->\n        <!--useCssTransforms: props.useCssTransforms-->\n        <!--width: width.value-->\n        <grid-item\n          v-for=\"item in layout\"\n          :key=\"item.i\"\n          v-bind=\"gridItemProps\"\n          :x=\"item.x\"\n          :y=\"item.y\"\n          :w=\"item.w\"\n          :h=\"item.h\"\n          :i=\"item.i\"\n          @resize=\"resize\"\n          @move=\"move\"\n          @moved=\"moved\"\n        >\n          {{ item.i }}\n        </grid-item>\n      </template>\n    </grid-layout>\n  </template>\n  <script>\n  export default {\n    name: 'App',\n    data () {\n      return {\n        layout: [\n          { x: 0, y: 0, w: 2, h: 2, i: 0 },\n          { x: 2, y: 0, w: 2, h: 4, i: 1 },\n          { x: 4, y: 0, w: 2, h: 5, i: 2 },\n          { x: 6, y: 0, w: 2, h: 3, i: 3 },\n          { x: 8, y: 0, w: 2, h: 3, i: 4 },\n          { x: 8, y: 0, w: 2, h: 3, i: 5 },\n          { x: 0, y: 5, w: 2, h: 5, i: 6 },\n          { x: 2, y: 5, w: 2, h: 5, i: 7 },\n          { x: 4, y: 5, w: 2, h: 5, i: 8 },\n          { x: 6, y: 3, w: 2, h: 4, i: 9 }\n        ]\n      }\n    }\n  }\n  </script>\n```\n\n### Grid Layout Props\n\n```js\n//\n// Required props\n//\n// This is grid layout for not responsive pages\nlayout: {\n    x: number\n    y: number\n    w: number\n    h: number\n    i: number\n    isDraggable?: boolean\n    isResizable?: boolean\n    maxH?: number\n    maxW?: number\n    minH?: number\n    minW?: number\n    moved?: boolean\n    static?: boolea\n}\n// Number of columns\ncolNum: number\n\n//\n// Optional props\n//\nautoSize: boolean = true\nisDraggable: boolean = true\nisDraggable: boolean = true\nmargin: [number, number] = [10, 10]\nmaxRows: number = Infinity\npreventCollision: boolean = true\nrowHeight: number = 150\nuseCssTransforms: boolean = true\nverticalCompact: boolean = true\n// swaps grid items standing next to each other when moving horizontally\nhorizontalShift: boolean = false\n```\n\n### Responsive grid layout props\n```js\n// To enable responsive mode, the responsive prop must be true.\nresponsive: boolean = false\n// 6 display widths\n// Window witch > lg component use layout prop\nbreakpoints: object = { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }\n// colNum by display width\ncols: object = { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }\n// Responsive layout is a { [keyof breakpoints]: layout }\n// { lg: layout, md: layout, sm: layout, xs: layout, xss: layout }\nresponsiveLayouts: object = {}\n```\n\n### Intersection observer grid layout props\n[Documentation](https://developer.mozilla.org/ru/docs/Web/API/Intersection_Observer_API)\n```js\n// To enable intersection observer mode, the useObserver prop must be true.\nuseObserver: boolean = false\n// Intersection observer config { ...propsConfig, ...defaultConfig }\nintersectionObserverConfig: object = { root: null, rootMargin: '8px', threshold: 0.40 }\n```\n\n### Grid layout emits\n- **@container-resized**\n    * **When layout container was resized**\n```ts\n    {\n        i: number // grid item index\n        h: number // grid item height from propss\n        w: number // grid item width from props\n        height: number // grid item height\n        width: number // grid item width\n     }\n```\n- **@resize**\n    * **Grid item resize event**\n```ts\n    i: number // grid item index\n    h: number // grid item height from propss\n    w: number // grid item width from props\n    newHeight: number // grid item height\n    newWidth: number // grid item width   \n```\n- **@resized**\n    * **Grid item resizeend event**\n```ts\n    i: number // grid item index\n    h: number // grid item height from propss\n    w: number // grid item width from props\n    newHeight: number // grid item height\n    newWidth: number // grid item width   \n```\n- **@move**\n    * **Grid item drag event**\n```ts\n    i: number // grid item index\n    x: number // grid item x position\n    y: number // grid item y position \n```\n- **@moved**\n    * **Grid item dragend event**\n```ts\n    i: number // grid item index\n    x: number // grid item x position\n    y: number // grid item y position \n``` \n- **@update:layout**\n  * **Update layout, you can use v-model:layout=\"layout\"**\n```ts\n    layout: Layout // see props\n``` \n- **@layout-ready**\n  * **When layout is ready**\n```ts\n    layout: Layout // see props\n``` \n- **@update:breakpoint**\n  * **Update breakpoints, you can use v-model:breakpoint=\"layout\"**\n```ts\n    newBreakpoint: Breakpoints // see props\n    layout: Layout // see props\n``` \n- **Layout life cycles**\n  * **@layout-created**\n  * **@layout-before-mount**\n  * **@layout-mounted**\n```ts\n    layout: Layout // see props\n```\n- **@intersection-observe**\n  * **When grid item appeared in the viewport**\n```ts\n  observeItems: number[] // grid items indexes\n``` \n- **@intersection-unobserve**\n  * **When grid item is missing in the viewport**\n```ts\n  unobserveItems: number[] // grid items indexes\n``` \n---------\n<div>\n<a href=\"https://paypal.me/poltoratchi1?country.x=MD&locale.x=en_US\">Donate me</a>\n</div>","readmeFilename":"README.md"}