adopted-ember-addons · ygongdev · Jan 29, 2020 · Dec 19, 2019 · Jan 26, 2020 · Jan 29, 2020
diff --git a/.eslintrc.js b/.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: [

diff --git a/.gitignore b/.gitignore
@@ -25,3 +25,4 @@
 
 # Editor
 /jsconfig.json
+/.idea/
diff --git a/.travis.yml b/.travis.yml
@@ -50,10 +50,6 @@ jobs:
     # we recommend new addons test the current and previous LTS
     # as well as latest stable release (bonus points to beta/canary)
     - stage: "Additional Tests"
-      env: EMBER_TRY_SCENARIO=ember-lts-2.8
-    - env: EMBER_TRY_SCENARIO=ember-lts-2.12
-    - env: EMBER_TRY_SCENARIO=ember-lts-2.18
-    - env: EMBER_TRY_SCENARIO=ember-lts-3.4
     - env: EMBER_TRY_SCENARIO=ember-lts-3.8
     - env: EMBER_TRY_SCENARIO=ember-lts-3.12
     - env: EMBER_TRY_SCENARIO=ember-release

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,7 +4,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

diff --git a/MIGRATION_GUIDE_MODIFIERS.md b/MIGRATION_GUIDE_MODIFIERS.md
@@ -0,0 +1,88 @@
+# Ember-sortable
+
+## Migration Guide (Components -> Modifiers)
+
+To use modifiers, you must use angle-bracket syntax
+
+### New Root component
+1. Instead of using `sortable-group` as a component, use `sortable-group` as a modifier 
+any element. You no longer need to tell `sortable-group` about the models, so the `each`
+uses the models directly.
+
+**Old Component**
+```hbs
+{{#sortable-group model=model.items onChange=(action "reorderItems") as |group|}}
+  {{#each group.model as |item|}}
+```
+**New Component**
+```hbs
+<ol {{sortable-group onChange=(action "reorderItems")}}>
+  {{#each model.items as |item|}}
+```
+
+2. Each `item` can be represented by any dom element or component using angle-bracket syntax
+
+**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
+<ol {{sortable-group onChange=(action "reorderItems")}}>
+  {{#each model.items as |item|}}
+    <li {{sortable-item model=item}}>
+      {{tem.name}}
+    </li>
+  {{/each}}
+</ol>
+```
+
+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
+<ol {{sortable-group onChange=(action "reorderItems")}}>
+  {{#each model.items as |item|}}
+    <li {{sortable-item model=item}}>
+      {{tem.name}}
+      <span class="handle" {{sortable-handle}}>&varr;</span>
+    </li>
+  {{/each}}
+</ol>
+```
+
+4. The modifier `groupModel` property is no longer supported. The equivalent can 
+be accomplished by the `action` helper or the new `fn` helper.
+
+```hbs
+<ol {{sortable-group onChange=(action "reorderItems" model)}}>
+  {{#each model.items as |item|}}
+    <li {{sortable-item model=item}}>
+      {{tem.name}}
+      <span class="handle" {{sortable-handle}}>&varr;</span>
+    </li>
+  {{/each}}
+</ol>
+```
+
diff --git a/MIGRATION_GUIDE_V2.md b/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.
diff --git a/README.md b/README.md
@@ -31,6 +31,7 @@ $ ember install ember-sortable
 
 ## Usage
 
+### component 
 ```hbs
 {{! app/templates/my-route.hbs }}
 
@@ -46,6 +47,20 @@ $ ember install ember-sortable
 {{/sortable-group}}
 ```
 
+### modifier 
+```hbs
+{{! app/templates/my-route.hbs }}
+
+<ol {{sortable-group onChange=(action "reorderItems")}}>
+  {{#each model.items as |modelItem|}}
+    <li {{group.item model=modelItem}}>
+      {{modelItem.name}}
+      <span class="handle" {{sortable-handle}}>&varr;</span>
+    </li>
+  {{/each}}
+</ol>>
+```
+
 The `onChange` action is called with two arguments:
 
 - Your item models in their new order
@@ -96,13 +111,34 @@ export default Ember.Route.extend({
 });
 ```
 
+The modifier version does not support `groupModel`, use the currying of `action` or the `fn` helper.
+
+```hbs
+{{! app/templates/my-route.hbs }}
+
+<ol {{sortable-group onChange=(action "reorderItems" model)}}>
+  {{#each model.items as |modelItem|}}
+    <li {{group.item model=modelItem}}>
+      {{modelItem.name}}
+      <span class="handle" {{sortable-handle}}>&varr;</span>
+    </li>
+  {{/each}}
+</ol>>
+```
+
+
 ### Changing sort direction
 
 To change sort direction, define `direction` on `sortable-group` (default is `y`):
 
+component
 ```hbs
 {{#sortable-group direction="x" onChange=(action "reorderItems") as |group|}}
 ```
+modifier
+```hbs
+<ol {{sortable-group direction="x" onChange=(action "reorderItems")}>
+```
 
 ### Changing spacing between currently dragged element and the rest of the group
 
@@ -113,8 +149,13 @@ In `x` case: elements before current one jump to the left, and elements after cu
 
 To change this property, define `spacing` on `sortable-item` (default is `0`):
 
+component
+```hbs
+{{#sortable-item spacing=15}}
+```
+modifier
 ```hbs
-{{#sortable-item tagName="li" spacing=15}}
+<li {{sortable-item spacing=15}}>
 ```
 
 ### Changing the drag tolerance
@@ -123,9 +164,14 @@ To change this property, define `spacing` on `sortable-item` (default is `0`):
 If specified, sorting will not start until after mouse is dragged beyond distance.
 Can be used to allow for clicks on elements within a handle.
 
+component
 ```hbs
 {{#sortable-item distance=30}}
 ```
+modifier
+```hbs
+<li {{sortable-item distance=30}}>
+```
 
 ### CSS, Animation
 
@@ -198,6 +244,7 @@ export default Ember.Route.extend({
 });
 ```
 
+component
 ```hbs
   {{#sortable-item
     onDragStart=(action "dragStarted")
@@ -211,9 +258,21 @@ export default Ember.Route.extend({
     {{/item.handle}}
   {{/sortable-item}}
 ```
+modifier
+```hbs
+  <li {{#sortable-item
+    onDragStart=(action "dragStarted")
+    onDragStop=(action "dragStopped")
+    model=modelItem
+    }}
+  >
+    {{modelItem.name}}
+    <span class="handle" {{sortable-handle}}>&varr;</span>
+  </li>
+```
 
 ### Disabling Drag (Experimental)
-`sortable-item` exposes an optional `isDraggingDisabled` flag that you can use to disable `drag` on the particular item.
+`sortable-item` (component and modifier) exposes an optional `isDraggingDisabled` flag that you can use to disable `drag` on the particular item.
 This flag is intended as an utility to make your life easier with 3 main benefits:
 1. You can now specify which `sortable-item` are not intended to be draggable/sortable.
 2. You do not have to duplicate the `sortable-item` UI just for the purpose of disabling the `sorting` behavior.
@@ -223,8 +282,6 @@ This flag is intended as an utility to make your life easier with 3 main benefit
 
 No data is mutated by `sortable-group` or `sortable-item`. In the spirit of “data down, actions up”, a fresh array containing the models from each item in their new order is sent via the group’s `onChange` action.
 
-`sortable-group` yields itself to the block so that it may be assigned explicitly to each item’s `group` property.
-
 Each item takes a `model` property. This should be fairly self-explanatory but it’s important to note that it doesn’t do anything with this object besides keeping a reference for later use in `onChange`.
 
 ### Accessibility
@@ -233,10 +290,14 @@ The `sortable-group` has support for the following accessibility functionality:
 #### Built-in Functionalities
 
 ##### Semantic HTML
+
+component
 - `sortable-group`
   an ordered list, `ol`, by default.
 - `sortable-item`
   a list item, `li`, by default.
+
+The modifier version can be attached to to any element that makes sense, 
 
 ##### Keyboard Navigation
 There are 4 modes during keyboard navigation: