Created Sortable component with modifiers

.eslintrc.js

@@ -1,7 +1,8 @@
 module.exports = {
   root: true,
+  parser: 'babel-eslint',
   parserOptions: {
-    ecmaVersion: 2017,
+    ecmaVersion: 2018,
     sourceType: 'module'
   },
   plugins: [
@@ -16,6 +17,7 @@ module.exports = {
   },
   rules: {
     'ember/closure-actions': 'off',
+    "no-console": ["error", {allow: ["warn", "error"]}],
     'arrow-spacing': 'error'
   },
   overrides: [

.gitignore

@@ -25,3 +25,4 @@
 
 # Editor
 /jsconfig.json
+/.idea/

CHANGELOG.md

@@ -2,7 +2,6 @@
 * [Bugfix] Use deregisterItem instead of registerItem on destroy [Feature] Adding isDraggingDisabled flag to allow specifying a sortable-item to be non-sortable (29fc641)
 
 
-
 ## v2.1.0-beta.0 (2019-11-22)
 
 #### :rocket: Enhancement

MIGRATION_GUIDE_MODIFIERS.md

@@ -0,0 +1,95 @@
+# Ember-sortable
+
+## Migration Guide (Components -> Modifiers)
+
+To use modifieres, you must use angle-bracket syntax
+
+### New Root component
+1. Instead of using `sortable-group` as the root component, use `sortable`. This new root does not
+generate a dom element `ol`. It does generates a `span` used for a11y, but your
+content is not yielded within this `span`.
+
+**Old Component**
+```hbs
+{{#sortable-group model=model.items onChange=(action "reorderItems") as |group|}}
+  {{#each group.model as |item|}}
+```
+**New Component**
+```hbs
+<Sortable @model={{model.items}} @onChange={{action "reorderItems"}} as |group|>
+  {{#each group.model as |item|}}
+```
+
+2. Each `item` can be represented by any dom element or component
+
+**Old Component**
+```hbs
+{{#sortable-group model=model.items onChange=(action "reorderItems") as |group|}}
+  {{#each group.model as |item|}}
+    {{#group.item model=item}}
+       {{tem.name}}
+    {{/group.item}}
+  {{/each}}
+{{/sortable-group}}
+```
+
+**New Component with modifier**
+```hbs
+<Sortable @model={{model.items}} @onChange={{action "reorderItems"}} as |sortable|>
+  <ol>
+    {{#each sortable.model as |item|}}
+       <li {{sortable-item api=sortable.api model=item}}>
+          {{tem.name}}
+       </li>
+    {{/each}}
+  </ol>
+</Sortable>
+```
+
+3. The Handle is also any element with a `sortable-handle` applied to it.
+
+**Old Component**
+```hbs
+{{#sortable-group model=model.items onChange=(action "reorderItems") as |group|}}
+  {{#each group.model as |modelItem|}}
+    {{#group.item model=modelItem as|item|}}
+      {{modelItem.name}}
+      {{#item.handle}}
+        <span class="handle">&varr;</span>
+      {{/item.handle}}
+    {{/group.item}}
+  {{/each}}
+{{/sortable-group}}
+```
+
+**New Component with modifier**
+```hbs
+<Sortable @model={{model.items}} @onChange={{action "reorderItems"}} as |sortable|>
+  <ol>
+    {{#each sortable.model as |item|}}
+       <li {{sortable-item api=sortable.api model=item}}>
+          {{tem.name}}
+          <span class="handle" {{sortable-handle api=sortable.api model=item}}>&varr;</span>
+       </li>
+    {{/each}}
+  </ol>
+</Sortable>
+```
+
+4. The modifier `sortable-group` only needs to be applied to get the a11y support. Because of this, the 
+`a11yItemName`, `a11yAnnouncementConfig`, `itemVisualClass`, `handleVisualClass` have been moved to this
+modifier.
+
+```hbs
+<Sortable @model={{model.items}} @onChange={{action "reorderItems"}} as |sortable|>
+  <ol {{sortable-group api=sortable.api}}>
+    {{#each sortable.model as |item|}}
+       <li {{sortable-item api=sortable.api model=item a11yItemName=this.a11yItemName}}>
+          {{tem.name}}
+          <span class="handle" {{sortable-handle api=sortable.api model=item}}>&varr;</span>
+       </li>
+    {{/each}}
+  </ol>
+</Sortable>
+```
+

MIGRATION_GUIDE_V2.md

@@ -2,6 +2,8 @@
 
 ## Migration Guide (v1 -> v2)
 
+[High Order Components](#Higher Order Components) or [Modifiers](/MIGRATION_GUIDE_MODIFIERS.md)
+
 ### Higher Order Components
 `Ember-sortable` can now be built using [higher order components](https://v4.chriskrycho.com/2018/higher-order-components-in-emberjs.html)
 
@@ -89,6 +91,8 @@
 {{/sortable-group}}
 ```
 
+### Modifiers
+
 ### Accessibility support
 1. Keyboard navigation is built into `ember-sortable`.
 2. `a11yItemName`, `a11yAnnouncementConfig`, `itemVisualClass`, `handleVisualClass` can be supplied to enhance the accessibility experience.
@@ -101,4 +105,4 @@
 ### Testing
 1. The `drag` and `reorder` test helpers are no longer global `async` helpers. They are now importable.
 
-Refer to [Testing Section](/README.md#Testing) for more details.
+Refer to [Testing Section](/README.md#Testing) for more details.