{"id":13572696,"url":"https://github.com/euvl/vue-js-grid","last_synced_at":"2025-04-08T04:15:21.604Z","repository":{"id":57396347,"uuid":"104361382","full_name":"euvl/vue-js-grid","owner":"euvl","description":":bento:  Vue.js 2.x responsive grid system with smooth sorting, drag-n-drop and reordering","archived":false,"fork":false,"pushed_at":"2022-08-18T01:13:29.000Z","size":441,"stargazers_count":949,"open_issues_count":18,"forks_count":108,"subscribers_count":22,"default_branch":"master","last_synced_at":"2025-04-01T03:35:34.804Z","etag":null,"topics":["grid-system","plugin","vuejs"],"latest_commit_sha":null,"homepage":"https://euvl.github.io/vue-js-grid/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/euvl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-09-21T14:51:06.000Z","updated_at":"2025-02-28T03:02:34.000Z","dependencies_parsed_at":"2022-09-19T10:31:47.835Z","dependency_job_id":null,"html_url":"https://github.com/euvl/vue-js-grid","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/euvl%2Fvue-js-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/euvl%2Fvue-js-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/euvl%2Fvue-js-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/euvl%2Fvue-js-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/euvl","download_url":"https://codeload.github.com/euvl/vue-js-grid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247773719,"owners_count":20993639,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["grid-system","plugin","vuejs"],"created_at":"2024-08-01T14:01:32.974Z","updated_at":"2025-04-08T04:15:21.567Z","avatar_url":"https://github.com/euvl.png","language":"Vue","funding_links":[],"categories":["UI Components [🔝](#readme)","Vue","UI组件","Components \u0026 Libraries","UI Components"],"sub_categories":["表","UI Components","Table"],"readme":"## Vue.js Grid ( Experiment )\n\n## ⚠️ This an experement and not a production-ready plugin\n\n[![npm version](https://badge.fury.io/js/vue-js-grid.svg)](https://badge.fury.io/js/vue-js-grid)\n[![npm](https://img.shields.io/npm/dm/vue-js-grid.svg)](https://www.npmjs.com/package/vue-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/or want to contribute, feel free to create issues, PRs, or reach me out on twitter! 👍 🚀\n\nThanks!\n\n\u003cp style=\"text-align:center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/1577802/30805846-45ccd718-a1eb-11e7-9963-7aee8e76c9b0.gif\"\u003e\n\u003c/p\u003e\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\"\u003e\n  \u003ctemplate slot=\"cell\" scope=\"props\"\u003e\n    \u003cdiv\u003e{{props.item}}\u003c/div\u003e\n  \u003c/template\u003e\n\u003c/grid\u003e\n```\n#### [Codesandbox Demo](https://codesandbox.io/s/j23p2opkk3)\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\"\u003e\n  \u003cdiv @click=\"() =\u003e { props.remove() }\"\u003e\n    \u003cdiv\u003eData: {{props.item}}\u003c/div\u003e\n    \u003cdiv\u003e{{props.index}} / {{props.sort}}\u003c/div\u003e\n\u003c/template\u003e\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 \u0026 feels.\n\nDemo: https://euvl.github.io/vue-js-grid/\n\n### Roadmap\n\n1. Add element insertion\n2. Add tests\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feuvl%2Fvue-js-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feuvl%2Fvue-js-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feuvl%2Fvue-js-grid/lists"}