Product
Socket Now Supports uv.lock Files
Socket now supports uv.lock files to ensure consistent, secure dependency resolution for Python projects and enhance supply chain security.
ember-shopify-draggable
Advanced tools
Addon for using @shopify/draggable in ember projects.
ember install ember-shopify-draggable
Right now this addon contains ember components for swappable
and sortable
. We hope to have full parity with all features of @shopify/draggable soon.
This addon allows you to pass in a list object to the container component, and an item object to the item component. This will give you the ability to keep track of the underlying JS list automatically. You can see an example of this below.
Here we pass in list which is an array of js objects, and give item
to each container.item
. When any action is performed
the group.container
component sends an action and you can just have it mutate the list. So each time the list is modified by drag/drop
your passed in list will be updated with those changes!
{{#sortable-group sorted=(action 'sorted') as |group|}}
{{#group.container list
itemReordered=(action (mut list))
itemAdded=(action (mut list))
itemRemoved=(action (mut list)) as |container|}}
{{#each container.items as |item|}}
{{#container.item item}}
{{item.name}}
{{/container.item}}
{{else}}
Im empty
{{/each}}
{{/group.container}}
{{#group.container listTwo
itemReordered=(action (mut listTwo))
itemAdded=(action (mut listTwo))
itemRemoved=(action (mut listTwo)) as |container|}}
{{#each container.items as |item|}}
{{#container.item item}}
{{item.name}}
{{/container.item}}
{{else}}
Im Empty
{{/each}}
{{/group.container}}
{{/sortable-group}}
Possible events for sortable can be found at Sortable Events
You can see an example of the sorted
event being used above.
NOTE: Currently only works with one container
{{#swappable-group swapped=(action 'swapped') as |group|}}
{{#group.container list
itemReordered=(action (mut list))
as |container|}}
{{#each container.items as |item index|}}
{{#container.item item index=index}}
{{item.name}}
{{/container.item}}
{{else}}
Im empty
{{/each}}
{{/group.container}}
{{/swappable-group}}
Possible events for swappable can be found at Swappable Events
You can see an example of the swapped
event being used above.
git clone <repository-url>
cd ember-shopify-draggable
npm install
npm run lint:js
npm run lint:js -- --fix
ember test
– Runs the test suite on the current Ember versionember test --server
– Runs the test suite in "watch mode"ember try:each
– Runs the test suite against multiple Ember versionsember serve
For more information on using ember-cli, visit https://ember-cli.com/.
This project is licensed under the MIT License.
FAQs
Ember components for Shopify's drag and drop
The npm package ember-shopify-draggable receives a total of 19 weekly downloads. As such, ember-shopify-draggable popularity was classified as not popular.
We found that ember-shopify-draggable demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports uv.lock files to ensure consistent, secure dependency resolution for Python projects and enhance supply chain security.
Research
Security News
Socket researchers have discovered multiple malicious npm packages targeting Solana private keys, abusing Gmail to exfiltrate the data and drain Solana wallets.
Security News
PEP 770 proposes adding SBOM support to Python packages to improve transparency and catch hidden non-Python dependencies that security tools often miss.