[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-9063":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":16,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":17,"rankGlobal":10,"rankLanguage":10,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":19,"hasPages":21,"topics":22,"createdAt":10,"pushedAt":10,"updatedAt":26,"readmeContent":27,"aiSummary":28,"trendingCount":16,"starSnapshotCount":16,"syncStatus":29,"lastSyncTime":30,"discoverSource":31},9063,"vue-js-grid","euvl\u002Fvue-js-grid","euvl",":bento:  Vue.js 2.x responsive grid system with smooth sorting, drag-n-drop and reordering","https:\u002F\u002Feuvl.github.io\u002Fvue-js-grid\u002F",null,"Vue",939,104,21,16,0,50.06,"MIT License",false,"master",true,[23,24,25],"grid-system","plugin","vuejs","2026-06-12 04:00:42","## Vue.js Grid ( Experiment )\n\n## ⚠️ This an experement and not a production-ready plugin\n\n[![npm version](https:\u002F\u002Fbadge.fury.io\u002Fjs\u002Fvue-js-grid.svg)](https:\u002F\u002Fbadge.fury.io\u002Fjs\u002Fvue-js-grid)\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002Fvue-js-grid.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fvue-js-grid)\n\n#### Fixed size grid for Vue.js\n\nThis is very a first version of the plugin. If you find any bugs and\u002For want to contribute, feel free to create issues, PRs, or reach me out on twitter! 👍 🚀\n\nThanks!\n\n\u003Cp style=\"text-align:center\">\n  \u003Cimg src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F1577802\u002F30805846-45ccd718-a1eb-11e7-9963-7aee8e76c9b0.gif\">\n\u003C\u002Fp>\n\n### Install\n```\nnpm install --save vue-js-grid\n```\n\n```js\nimport Vue from 'vue'\nimport Grid from 'vue-js-grid'\n\nVue.use(Grid)\n```\n\n### Usage\n\n```js\ndata () {\n  return {\n    items: [\n      'a',\n      'b',\n      'c'\n    ]\n}\n```\n\n```vue\n\u003Cgrid\n  :draggable=\"true\"\n  :sortable=\"true\"\n  :items=\"items\"\n  :height=\"100\"\n  :width=\"100\">\n  \u003Ctemplate slot=\"cell\" scope=\"props\">\n    \u003Cdiv>{{props.item}}\u003C\u002Fdiv>\n  \u003C\u002Ftemplate>\n\u003C\u002Fgrid>\n```\n#### [Codesandbox Demo](https:\u002F\u002Fcodesandbox.io\u002Fs\u002Fj23p2opkk3)\n\nPlugin does **NOT** modify the source data array.\n\n1. Every time permutation is performed you will get a new sorted array in event (`items`).\n2. The same works for removing elements, you will get a new \"cleaned\" array in your `@remove` event handler.\n3. Currently there is no way to extend data array after event handling. But hopefully I'll come up with a clean way to do it in nearest future.\n\n### Props\n\n| Name       | Type     | Default   | Description       |\n| ---        | ---      | ---       | ---               |\n| `items`      | Array    | `[]`        | Initial array of items |\n| `cellWidth`  | Number   | `80`        | Cell width |\n| `cellHeight` | Number   | `80`        | Cell height |\n| `draggable`  | Boolean  | `false`     | Flag that will let you drag grid's cells |\n| `dragDelay`  | Number   | `0`         | @TODO |\n| `sortable`   | Boolean  | `false`     | Flag that will let you reorder grid's cells; requires `draggable` to be `true` |\n| `center`     | Boolean  | `false`     | @TODO |\n\n### Events\n\n| Name    | Description |\n| ---     | ---         |\n| `@change` | Occurs on every action that involves reordering array or changing its length |\n| `@remove` | Occurs when an element is deleted through template |\n| `@click`  | Occurs when cell is clicked |\n| `@sort`   | Occurs when array item order is changed manually |\n\n### Cell template\n\nCell template is used to get access to list data, indexing, and sorting params generated by plugin.\n\nTemplate's scope contains:\n\n* `props.item`: list item value \n* `props.index`: initial index of the item\n* `props.sort`: current index of the item after sorting\n* `props.remove()`: method that removes the item from the array and resort list.\n\nExample:\n\n```vue\n\u003Ctemplate slot=\"cell\" scope=\"props\">\n  \u003Cdiv @click=\"() => { props.remove() }\">\n    \u003Cdiv>Data: {{props.item}}\u003C\u002Fdiv>\n    \u003Cdiv>{{props.index}} \u002F {{props.sort}}\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n```\n\n### Why do I need this?\n\nA good example of using a plugin would be rending macOS' `Launchpad` or `Dock`. Check out a demo for a solid example of how the plugin behaves & feels.\n\nDemo: https:\u002F\u002Feuvl.github.io\u002Fvue-js-grid\u002F\n\n### Roadmap\n\n1. Add element insertion\n2. Add tests\n","euvl\u002Fvue-js-grid 是一个基于 Vue.js 2.x 的响应式网格系统，支持平滑排序、拖放和重新排序功能。其核心功能包括可配置的单元格宽度与高度、拖拽和排序选项，并且不会修改原始数据数组，在每次排列或删除元素时提供新的数组。此外，它还提供了丰富的事件监听机制，如变更、移除、点击和排序等。此插件适用于需要灵活布局管理的应用场景，例如仪表板界面、图片库展示等。需要注意的是，该项目目前仍处于实验阶段，尚未达到生产环境使用的成熟度。",2,"2026-06-11 03:21:00","top_language"]