{"id":21670251,"url":"https://github.com/gwinnem/vue-responsive-grid-layout","last_synced_at":"2025-06-28T01:35:04.518Z","repository":{"id":89228945,"uuid":"598172490","full_name":"gwinnem/vue-responsive-grid-layout","owner":"gwinnem","description":"A draggable,  resizable and responsive grid layout, developed with vue3 and typescript.","archived":false,"fork":false,"pushed_at":"2024-09-12T13:13:58.000Z","size":2927,"stargazers_count":71,"open_issues_count":18,"forks_count":9,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-03-05T15:04:27.195Z","etag":null,"topics":["dashboard-layout","dashboards","grid-layout","responsive-dashboard","responsive-grid","responsive-grid-layout","typescript","vue-component","vue3","vuejs3"],"latest_commit_sha":null,"homepage":"https://vue-ts-responsive-grid-layout.winnem.tech/","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/gwinnem.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["gwinnem"]}},"created_at":"2023-02-06T14:57:41.000Z","updated_at":"2025-02-25T02:32:23.000Z","dependencies_parsed_at":"2023-11-11T15:28:36.270Z","dependency_job_id":"4b3c4b42-2cf4-41e6-be03-9dd36076c7d0","html_url":"https://github.com/gwinnem/vue-responsive-grid-layout","commit_stats":{"total_commits":521,"total_committers":5,"mean_commits":104.2,"dds":0.3550863723608445,"last_synced_commit":"bc951ccd6f0e5f1dd4a58cf95044fe62cb449f42"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gwinnem%2Fvue-responsive-grid-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gwinnem%2Fvue-responsive-grid-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gwinnem%2Fvue-responsive-grid-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gwinnem%2Fvue-responsive-grid-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gwinnem","download_url":"https://codeload.github.com/gwinnem/vue-responsive-grid-layout/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243500793,"owners_count":20300773,"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":["dashboard-layout","dashboards","grid-layout","responsive-dashboard","responsive-grid","responsive-grid-layout","typescript","vue-component","vue3","vuejs3"],"created_at":"2024-11-25T12:30:20.866Z","updated_at":"2025-06-28T01:35:04.512Z","avatar_url":"https://github.com/gwinnem.png","language":"Vue","funding_links":["https://github.com/sponsors/gwinnem","https://paypal.me/gwinnem/"],"categories":[],"sub_categories":[],"readme":"\u003cdiv style=\"text-align: center\"\u003e\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat)](https://github.com/prettier/prettier)\n[![npm bundle size](https://img.shields.io/bundlephobia/min/vue-ts-responsive-grid-layout)](https://bundlephobia.com/result?p=vue-ts-responsive-grid-layout)\n[![npm](https://img.shields.io/npm/v/vue-ts-responsive-grid-layout)](https://www.npmjs.com/package/vue-ts-responsive-grid-layout)\n[![NPM](https://img.shields.io/npm/l/vue-ts-responsive-grid-layout)](https://github.com/gwinnem/vue-ts-responsive-grid-layout/blob/master/LICENSE)\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/gwinnem/vue-responsive-grid-layout/main/docs/Data%20Grid.svg\" height=\"200\" alt=\"logo\"\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003evue-ts-responsive-grid-layout\u003c/h1\u003e\n\n\u003ch2 align=\"center\"\u003e\n  \u003ca href=\"https://vue-ts-responsive-grid-layout.winnem.tech\" target=\"_blank\"\u003eDocumentation Website\u003c/a\u003e\n\u003c/h2\u003e\n\n## What is vue-ts-responsive-grid-layout\n\nVUE 3 responsive grid layout is based on the original work by [JBaysolution's vue-grid-layout](https://github.com/jbaysolutions/vue-grid-layout).\n\nThis new and refactored component has more features, typesafe Emits, Props and a strict linting rule setup.\n\nA proper App developed for testing purposes.\n\nDocumentation website contains 13 examples. Will be updated when new features are added to the component.\n\n\u003cbr/\u003e\n\n## Donate\n\nIf you enjoyed this project — or just feeling generous, consider buying me a 🍺. Cheers!\n\n\u003cbr/\u003e\n\n\u003ca href=\"https://paypal.me/gwinnem/\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/gwinnem/vue-responsive-grid-layout/dev/docs/paypal-images/blue.svg\" height=\"40\" alt=\"paypal\"\u003e\n\u003c/a\u003e\n\n\u003cbr/\u003e\n\n### Features:\n\n* Prop in GridLayout for distributing GridItem's equally.\n* GridLayout now has slot for GridItem.\n* Prop for displaying grid lines in GridLayout.\n* Prop for setting edit mode in GridLayout. Shortcuts the isDraggable and isResizable props.\n* Prop for adding border radius in GridLayout. Adds a 8px radius to each GridItem.\n* Prop in GridLayout for shifting GridItems horizontally when dragging instead of vertical.\n* Separated out style variables, so it is easier to restyle the component.\n* Added tab navigation support.\n* Close button in GridItem for removing the GridItem from the GridLayout.\n* Added more events to GridLayout and GridItem.\n* Support for resize Bottom, Bottom Right and Right in GridIem.\n* Draggable widgets\n* Resizable widgets\n* Static widgets\n* Bounds checking for dragging and resizing\n* Widgets may be added or removed without rebuilding grid\n* Layout can be serialized and restored\n* Automatic RTL support\n* Responsive using predefined layout's for different breakpoints.\n* GridItem automatically resizes when content change(Useful when displaying charts).\n\n### Testing:\n\n* __Unit tests__ [Using Vitest](https://vitest.dev/)\n* __Unit test console__ [Using Vitest UI](https://vitest.dev/guide/ui.html#vitest-ui)\n* __e2e tests__ [Using nightwatchjs](https://nightwatchjs.org/)\n\n## Changelog\n\n\n### v: 1.2.10 (2025-04-28)\n* __Demo App__ [Eventlog is not displaying any resize events.](https://github.com/gwinnem/vue-responsive-grid-layout/issues/46)\n* __Fixed Issue__ [The margin property cannot be [0,0]](https://github.com/gwinnem/vue-responsive-grid-layout/issues/64)\n* __Fixed Issue__ [Hide resize cursor change when GridItem is not resizable](https://github.com/gwinnem/vue-responsive-grid-layout/issues/49)\n* __Tests__ Added more unit tests and refactored code so it is easier to test.\n* __Tests__ Updated vitest.config.js coverage exclude section.\n\n\n\n### v: 1.2.9 (2024-02-03)\n* __Fixed Issue__ [Dynamic change columns, item will overlap](https://github.com/gwinnem/vue-responsive-grid-layout/issues/12)\n\n\n### v: 1.2.8 (2024-01-25)\n* __Fixed Issue__ [Unexpected Behavior when dragging items](https://github.com/gwinnem/vue-responsive-grid-layout/issues/54) Tnxs to [T0miii](https://github.com/T0miii)\n\n\n### v: 1.2.7 (2024-01-10)\n* __Fixed Issue__ [option \"responsive\" not working](https://github.com/gwinnem/vue-responsive-grid-layout/issues/51). Tnxs to [T0miii](https://github.com/T0miii)\n\n\n### v: 1.2.6 (2023-12-28) \n* __Fixed Issue__ Problem if layout doesnt have static item [PullRequest](https://github.com/gwinnem/vue-responsive-grid-layout/pull/47)\n\n\n### v: 1.2.5 (2023-12-14)\n* __Fixed Issue__ [editMode not working as expected](https://github.com/gwinnem/vue-responsive-grid-layout/issues/33)\n* __Documentation__ Updated config so when refreshing a page it loads the correct page and not the 404 page.\n* __Demo App__ Added inputs for Margins.\n* __Refactor__ Updated style for gridlines in GridLayout.vue.\n* __Config__ Added style linting to project.\n* __Config__ Updated scripts section in package.json.\n* __Demo App__ Fixed index value when dropping a new GridItem onto the layout. This only works when index is a numeric value.\n* __Demo App__ Added checks so number input can not have less than 1.\n* __Tests__ Added more unit tests and refactored code so it is easier to test.\n \n\n\n### v: 1.2.4 (2023-10-23)\n\n* __Fixed Issue__ [Layout update event is raised before update is finished](https://github.com/gwinnem/vue-responsive-grid-layout/issues/19). Tnxs to [SamGeems](https://github.com/SamGeens)\n* __Fixed issue__ [Close button css is different from the example](https://github.com/gwinnem/vue-responsive-grid-layout/issues/20). Tnxs to [SamGeems](https://github.com/SamGeens)\n* __Feature__ Added event __drag-end__ to GridLayout.\n* __Feature__ Added event __drag-move__ to GridLayout.\n* __Feature__ Added event __drag-start__ to GridLayout.\n* __Codebase__ Renamed EGridLayoutEvent value UPDATE_LAYOUT to LAYOUT_UPDATE.\n* __Codebase__ Removed file EDragEvents and updated GridLayout. Values are implemented in EGridLayoutEvent.\n* __Codebase__ Added documentation to file DOM.ts\n* __Codebase__ Added new enum for drag events and refactored GridLayout to use new enum.\n* __Refactor__ Removed obsolete enum EMovingDirections.\n* __Demo App__ Added button for clearing the event log.\n* __Demo App__ Added Dropdown for filtering on events.\n\n### v: 1.2.2 (2023-09-19)\n\n* __Fixed Issue__ [Drag and Drop from outside is not working when distributeEvenly prop is set](https://github.com/gwinnem/vue-responsive-grid-layout/issues/5)\n* __Partial Fix__ [Resizemove edges case handling is incomplete](https://github.com/gwinnem/vue-responsive-grid-layout/issues/13)\n  * __Right, Right Bottom and Bottom__ resize fixed.\n  * __Left, Top Left, Top and Top Right__ resize not fixed.\n* __Codebase__ Adding description to functions.\n* __Codebase__ Added contributors to package.json.\n* __Codebase__ Added badges to README file.\n* __Codebase__ Fixed outdated dependencies.\n\nThanks to [UTing1119](https://github.com/UTing1119) for his contribution to this release.\n\n### v: 1.2.1 (2023-05-07)\n\n* --Fixed Issue-- [Issue 7](https://github.com/gwinnem/vue-responsive-grid-layout/issues/7), thanks to [UTing1119](https://github.com/UTing1119)\n* --Fixed Issue-- [Issue 6](https://github.com/gwinnem/vue-responsive-grid-layout/issues/6), thanks to [UTing1119](https://github.com/UTing1119)\n\n## Setting up vue-ts-responsive-grid-layout in your project\n\n[Howto](https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/docs/setup.md)\n\n\u003cbr/\u003e\n\n#### Auditing the package\n\n```\n npm audit --registry=https://registry.npmjs.org/\n```\n\n\u003cbr/\u003e\n\n### References\n\n* [Mini.css used in the sandbox](https://minicss.us/docs.htm#)\n* [Vue-Multiselect used in the sandbox](https://vue-multiselect.js.org/#sub-getting-started)\n* [Vitest](https://vitest.dev/)\n* [Vitest UI](https://vitest.dev/guide/ui.html#vitest-ui)\n* [nightwatchjs](https://nightwatchjs.org/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgwinnem%2Fvue-responsive-grid-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgwinnem%2Fvue-responsive-grid-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgwinnem%2Fvue-responsive-grid-layout/lists"}