{"_id":"@derpierre65/vue3-dragable-grid-layout","name":"@derpierre65/vue3-dragable-grid-layout","dist-tags":{"latest":"1.9.7"},"versions":{"1.9.7":{"name":"@derpierre65/vue3-dragable-grid-layout","version":"1.9.7","description":"Vue3 grid layout with resize, drag and responsive","keywords":["grid","grid-layout","layout","resize","drag","vue3","vue","composition-api","typescript"],"author":{"name":"Victor Poltoratchi","email":"poltoratchi1369@gmail.com"},"funding":{"type":"paypal","url":"https://paypal.me/poltoratchi1?country.x=MD&locale.x=en_US"},"repository":{"type":"git","url":"git+https://github.com/melrose13-69/vue3-dragable-grid-layout.git","directory":"packages/vue3-drr-grid-layout"},"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"},"license":"MIT","main":"dist/vue3-drr-grid-layout.umd.js","module":"dist/vue3-drr-grid-layout.mjs","types":"dist/index.d.ts","scripts":{"dev":"vite build --watch","prepare":"npm run build","build":"cross-env NODE_ENV=production vite build && tsc -d --emitDeclarationOnly && vue-typegen gen -s src -o dist","preview":"vite preview","lint:es":"eslint \"src/**/*.{js,ts,vue}\" --fix --color","lint:style":"stylelint src/**/*.{css,scss,vue} --color --fix","test":"vitest","test:coverage":"vitest run --coverage"},"dependencies":{"@interactjs/actions":"^1.10.17","@interactjs/auto-start":"^1.10.17","@interactjs/dev-tools":"^1.10.17","@interactjs/interactjs":"^1.10.17","@interactjs/modifiers":"^1.10.17","@types/element-resize-detector":"^1.1.3","element-resize-detector":"^1.2.4","mitt":"^3.0.0","vue":"^3.2.0"},"peerDependencies":{"vue":"^3.2.0"},"devDependencies":{"@babel/types":"^7.18.10","@types/jest":"^28.1.6","@vitejs/plugin-vue":"^3.0.1","@vue/eslint-config-typescript":"^11.0.0","@vue/test-utils":"^2.0.2","cross-env":"^7.0.3","jsdom":"^20.0.0","sass":"^1.54.0","vite":"^3.0.3","vitest":"^0.19.1","vue-eslint-parser":"^9.0.3","vue-template-compiler":"^2.7.8","vue-tsc":"^0.39.0","vue-typegen":"^0.2.0"},"gitHead":"c92721197358663ad2b4b529a943668cc8b93473","_id":"@derpierre65/vue3-dragable-grid-layout@1.9.7","_nodeVersion":"18.14.1","_npmVersion":"9.3.1","dist":{"integrity":"sha512-SvBiBJgKkbKTw4tZpuot2/R191x4dQOszkv7UQctv8vzD00PbcnMQuZ8bEW0MuHl0QAfBpeJL02zH/nx0W/30w==","shasum":"cc0bd6826e01b603381033cf594903b9f75a3ebc","tarball":"https://registry.npmjs.org/@derpierre65/vue3-dragable-grid-layout/-/vue3-dragable-grid-layout-1.9.7.tgz","fileCount":8,"unpackedSize":323831,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDoX0kbpp/xlrhTjL0cATelyjprCvXyPhaz6LcwpJN0eQIhAIqlXYhIh+3+5RnnGNy3PTgqJEAsRJVDvud+s4/vqjBi"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/deqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpXCQ/8CiEQzpn960jCzpRElvG9wnOnUzt010oL8MVGj0ZFMSQOh4vW\r\npShf+jTNuS1HfLcHoki+EmTaS4EaGFuf+0/2PA3cc4MUEs/8NyV+RUKObJpe\r\ni6zuiJBJ2Uq+gXrOixY3oc0b4a4K+0eeGiwrRxdhrOecHEhvFGQwZ/qfxIZ/\r\nK6xlXm5rhReoEylspcVkgM5yHx3WPdujl0Hm9wUxuecB1hSE9vHI90aI/Jwp\r\njm15zfRo6HCR73a5eHSyu1E52c22WRox8ntDPfLbtsGxtgs6cLuQFHgyqjqN\r\n+f57FaXjDOeV48Fbw0ylo62+LujHLJA+5OCXZ22HmPi2k9cL6rxzul6R2wyP\r\nEndJKokYSaYYljDeXIqZPxwH8fhjizdPLxe5P6liF1wzcl937Mpt+0fTKGgM\r\nqboJ1kw/jjZ7WfvMsadtyKK8OKDCeQBJtWyp+gj9M6YlFBAJh0m+SUfRjY0w\r\nu9knbFlPq+VnXdxCMXYgfoJJIfToRKHPgvjwjxPjOnsem6tV0SZBvNYREfAS\r\nRnJZVz5+WQI/dztuM18uf4wVWwXa6Gzftq8mbNGvpETR68xFKO1zp8ll7cOq\r\nYk+WE1w5zNJ9AwQb8SGQXk9dG3lJuqUib9jPJ8WqhA2gZ4ewrBwyFo6FRLH3\r\nByJf390SzZFJ0wVBoofeceRrIJCcwxpxCmk=\r\n=63am\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"derpierre65","email":"info@derpierre65.de"},"directories":{},"maintainers":[{"name":"derpierre65","email":"info@derpierre65.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue3-dragable-grid-layout_1.9.7_1677580202003_0.32728192734488704"},"_hasShrinkwrap":false}},"time":{"created":"2023-02-28T10:30:01.938Z","1.9.7":"2023-02-28T10:30:02.205Z","modified":"2023-02-28T10:30:02.420Z"},"maintainers":[{"name":"derpierre65","email":"info@derpierre65.de"}],"description":"Vue3 grid layout with resize, drag and responsive","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":{"type":"git","url":"git+https://github.com/melrose13-69/vue3-dragable-grid-layout.git","directory":"packages/vue3-drr-grid-layout"},"author":{"name":"Victor Poltoratchi","email":"poltoratchi1369@gmail.com"},"bugs":{"url":"https://github.com/melrose13-69/vue3-dragable-grid-layout/issues","email":"poltoratchi1369@gmail.com"},"license":"MIT","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"}