{"id":15015929,"url":"https://github.com/yahoo/ember-gridstack","last_synced_at":"2025-04-09T23:16:53.255Z","repository":{"id":17599421,"uuid":"78865638","full_name":"yahoo/ember-gridstack","owner":"yahoo","description":"Ember components to build drag-and-drop multi-column grids powered by gridstack.js","archived":false,"fork":false,"pushed_at":"2024-09-10T18:18:23.000Z","size":5714,"stargazers_count":38,"open_issues_count":7,"forks_count":29,"subscribers_count":19,"default_branch":"master","last_synced_at":"2025-04-09T23:16:49.726Z","etag":null,"topics":["ember","ember-addon","emberjs","grid","gridstack"],"latest_commit_sha":null,"homepage":"https://yahoo.github.io/ember-gridstack/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yahoo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"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}},"created_at":"2017-01-13T16:33:57.000Z","updated_at":"2024-12-08T22:15:07.000Z","dependencies_parsed_at":"2024-06-18T18:22:06.541Z","dependency_job_id":"fffb2e0b-5bfa-4af2-b963-f0adf369841a","html_url":"https://github.com/yahoo/ember-gridstack","commit_stats":{"total_commits":83,"total_committers":19,"mean_commits":4.368421052631579,"dds":0.7590361445783133,"last_synced_commit":"bc9cfd3c7a943945c8c7cacccd502361d9f5b05f"},"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yahoo%2Fember-gridstack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yahoo%2Fember-gridstack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yahoo%2Fember-gridstack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yahoo%2Fember-gridstack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yahoo","download_url":"https://codeload.github.com/yahoo/ember-gridstack/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248125593,"owners_count":21051771,"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":["ember","ember-addon","emberjs","grid","gridstack"],"created_at":"2024-09-24T19:48:09.946Z","updated_at":"2025-04-09T23:16:53.201Z","avatar_url":"https://github.com/yahoo.png","language":"JavaScript","readme":"# ember-gridstack [![Pipeline Status][status-image]][status-url] [![Latest NPM release][npm-badge]][npm-badge-url] [![Ember Observer Score][ember-observer-badge]][ember-observer-badge-url]\n\nEmber components to build drag-and-drop multi-column grids powered by [gridstack.js](https://gridstackjs.com/)\n\n## Compatibility\n\n- Ember.js v4.4 or above\n- Ember CLI v4.4 or above\n- Node.js v14 or above\n\n## Installation\n\n```\nember install ember-gridstack\n```\n\n## Migrating to v3\n\nView the full [v3.0.0 release notes](./CHANGELOG.md#300) for updates and breaking changes.\n\n## Basic Usage\n\n```hbs\n\u003cGridStack @options={{hash animate=true}} @onChange={{this.change}}\u003e\n  \u003cGridStackItem @options={{hash x=0 y=0 w=6 h=2}}\u003e\n    Widget #1\n  \u003c/GridStackItem\u003e\n  \u003cGridStackItem @options={{hash x=6 y=0 w=6 h=2}}\u003e\n    Widget #2\n  \u003c/GridStackItem\u003e\n\u003c/GridStack\u003e\n```\n\n## Components\n\n### `\u003cGridStack\u003e`\n\nUsed to construct a grid-stack layout\n\n#### Options\n\n`\u003cGridStack\u003e` can take an `options` object attribute to configure the grid. All gridstack grid options are valid and take the form `gs-{option}`. However, when using `\u003cGridStack\u003e` the `gs-{option}` is omitted.\n\n**Example:**\n\n```hbs\n\u003cGridStack @options={{hash animate=true column=12 maxRow=10}}\u003e\n  ...\n\u003c/GridStack\u003e\n```\n\nThe full list of options can be found here: https://github.com/gridstack/gridstack.js/tree/v4.2.7/doc#grid-options\n\n#### Actions\n\nAll gridstack events can be handled as Ember actions. They take the form `on{Eventname}`.\n\n**Example:**\n\n```hbs\n\u003cGridStack\n  @onAdded={{this.added}}\n  @onChange={{this.change}}\n  @onDisable={{this.disabled}}\n  @onDragstart={{this.dragStart}}\n  @onDrag={{this.drag}}\n  @onDragstop={{this.dragStop}}\n  @onDropped={{this.dropped}}\n  @onEnable={{this.enabled}}\n  @onRemoved={{this.removed}}\n  @onResizestart={{this.resizeStart}}\n  @onResize={{this.resize}}\n  @onResizestop={{this.resizeStop}}\n\u003e\n```\n\nThe full list of events can found here: https://github.com/gridstack/gridstack.js/tree/v4.2.7/doc#events\n\n#### Block Form\n\nThe `\u003cGridStack\u003e` component uses the block form to yield `\u003cGridStackItem\u003e` components. In addition, `\u003cGridStack\u003e` yields a reference to itself in the case inner components need the reference or would like to listen to events triggered on the grid element.\n\n**Example:**\n\n```hbs\n\u003cGridStack as |grid|\u003e\n  \u003cGridStackItem @options={{hash x=0 y=0 w=6 h=2}}\u003e\n    Widget #1\n  \u003c/GridStackItem\u003e\n\u003c/GridStack\u003e\n```\n\n### `\u003cGridStackItem\u003e`\n\nUsed to construct a grid item inside a `\u003cGridStack\u003e` component\n\n#### Options\n\n`\u003cGridStackItem\u003e` can take an `options` object attribute to configure the grid item. All gridstack item options are valid and take the form `gs-{option}`. However, when using `\u003cGridStackItem\u003e` the `gs` is omitted.\n\n**Example:**\n\n```hbs\n\u003cGridStackItem @options={{hash w=4 h=4 x=0 y=0 noMove=true}}\u003e\n  ...\n\u003c/GridStackItem\u003e\n```\n\nThe full list of options can be found here: https://github.com/gridstack/gridstack.js/tree/v4.2.7/doc#item-options\n\n#### Block Form\n\nThe `\u003cGridStackItem\u003e` component uses the block form to yield the content of the item. In addition, `\u003cGridStackItem\u003e` yields a reference to itself in the case inner components need the reference or would like to listen to events triggered on the grid.\n\n**Example:**\n\n```hbs\n\u003cGridStackItem @options={{hash x=0 y=0 w=6 h=2}} as |item|\u003e\n  \u003cCustomComponent @parentContainer={{item}} /\u003e\n\u003c/GridStackItem\u003e\n```\n\n```js\n//custom-component.js\nexport default class CustomComponent extends Component {\n  didInsertElement() {\n    super.didInsertElement(...arguments);\n    this.parentContainer.element.addEventListener('resizestop', () =\u003e {\n      //handle resize\n    });\n  }\n}\n```\n\n## Touch Support\n\nFor touch support do the following\n\n### ember-grid-stack \u003c 2.x\n\nBy default, the [bower dependencies for Gridstack](https://github.com/troolee/gridstack.js#requirements)\nwill be installed automatically.\n\n[status-image]: https://cd.screwdriver.cd/pipelines/7366/badge\n[status-url]: https://cd.screwdriver.cd/pipelines/7366\n[npm-badge]: https://img.shields.io/npm/v/ember-gridstack.svg\n[npm-badge-url]: https://www.npmjs.com/package/ember-gridstack\n[ember-observer-badge]: https://emberobserver.com/badges/ember-gridstack.svg\n[ember-observer-badge-url]: https://emberobserver.com/addons/ember-gridstack\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyahoo%2Fember-gridstack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyahoo%2Fember-gridstack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyahoo%2Fember-gridstack/lists"}