ember-sortable 4.0.0 → 4.0.2

package/CHANGELOG.md

@@ -1,8 +1,29 @@
-Version 9 of Highlight.js has reached EOL and is no longer supported.
-Please upgrade or ask whatever dependency you are using to upgrade.
-https://github.com/highlightjs/highlight.js/issues/2877
+# ember-sortable changelog
+
+
+
 
+## v4.0.2 (2022-10-06)
+
+#### :bug: Bug Fix
+* [#493](https://github.com/adopted-ember-addons/ember-sortable/pull/493) fix: Handle element in sortable item should be the most recent ([@nicolechung](https://github.com/nicolechung))
+
+#### Committers: 1
+- nicole chung ([@nicolechung](https://github.com/nicolechung))
 
+## v4.0.1 (2022-10-03)
+
+#### :memo: Documentation
+* [#480](https://github.com/adopted-ember-addons/ember-sortable/pull/480) fix type in modifier migration doc ([@nlfurniss](https://github.com/nlfurniss))
+* [#475](https://github.com/adopted-ember-addons/ember-sortable/pull/475) Update CHANGELOG.md ([@sandstrom](https://github.com/sandstrom))
+
+#### :house: Internal
+* [#487](https://github.com/adopted-ember-addons/ember-sortable/pull/487) Resolve `ember-modifier.no-args-property` deprecation warnings ([@bertdeblock](https://github.com/bertdeblock))
+
+#### Committers: 3
+- Bert De Block ([@bertdeblock](https://github.com/bertdeblock))
+- Nathaniel Furniss ([@nlfurniss](https://github.com/nlfurniss))
+- [@sandstrom](https://github.com/sandstrom)
 
 ## v4.0.0 (2022-05-16)
 
@@ -708,6 +729,6 @@ Must provide GITHUB_AUTH
 
 - [#28](https://github.com/jgwhite/ember-sortable/pull/28) Add `model` attr to `sortable-group` [@ujamer](https://github.com/ujamer)
 
-### 1.0.0 (2015-05-13)
+### 1.0.0 (2015-05-13)
 
 First stable release.

package/MIGRATION_GUIDE_MODIFIERS.md

@@ -32,7 +32,7 @@ To use modifiers, you must use angle-bracket syntax
 {{#sortable-group model=model.items onChange=(action 'reorderItems') as |group|}}
   {{#each group.model as |item|}}
     {{#group.item model=item}}
-      {{tem.name}}
+      {{item.name}}
     {{/group.item}}
   {{/each}}
 {{/sortable-group}}
@@ -44,7 +44,7 @@ To use modifiers, you must use angle-bracket syntax
 <ol {{sortable-group onChange=(action 'reorderItems')}}>
   {{#each model.items as |item|}}
     <li {{sortable-item model=item}}>
-      {{tem.name}}
+      {{item.name}}
     </li>
   {{/each}}
 </ol>
@@ -73,7 +73,7 @@ To use modifiers, you must use angle-bracket syntax
 <ol {{sortable-group onChange=(action 'reorderItems')}}>
   {{#each model.items as |item|}}
     <li {{sortable-item model=item}}>
-      {{tem.name}}
+      {{item.name}}
       <span class='handle' {{sortable-handle}}>&varr;</span>
     </li>
   {{/each}}
@@ -87,7 +87,7 @@ To use modifiers, you must use angle-bracket syntax
 <ol {{sortable-group onChange=(action 'reorderItems' model)}}>
   {{#each model.items as |item|}}
     <li {{sortable-item model=item}}>
-      {{tem.name}}
+      {{item.name}}
       <span class='handle' {{sortable-handle}}>&varr;</span>
     </li>
   {{/each}}

package/README.md

@@ -1,4 +1,4 @@
-# Ember-sortable
+# ember-sortable
 
 [![npm version](https://badge.fury.io/js/ember-sortable.svg)](http://badge.fury.io/js/ember-sortable)
 [![Build Status](https://github.com/adopted-ember-addons/ember-sortable/workflows/build/badge.svg?branch=master)](https://github.com/adopted-ember-addons/ember-sortable/actions?query=branch%3Amaster+workflow%3A%22build%22)
@@ -12,29 +12,10 @@ Sortable UI primitives for Ember.
 
 [Check out the demo](https://adopted-ember-addons.github.io/ember-sortable/demo/)
 
-## v2 -> v3 Migration
-
-The component versions have been removed and you must use the modifier.
-The modifier version does not support `groupModel`, use the currying of the `fn` helper.
-
-## v1 -> v2 Migration
-
-If you are migrating from `1.x.x` to `2.x.x`,
-For components, please read this [migration guide](/MIGRATION_GUIDE_V2.md).
-For modifiers, please read this [migration guide](/MIGRATION_GUIDE_MODIFIERS.md).
-
 ## Requirements
 
 In version 3.0.0+, Node.js v12 or above And Ember.js v3.24 or above
 
-In version 2.0.0+, our `closest` polyfill seems to break some app's `production` build. To mitigate this, the `closest` polyfill will only enabled if it doesn't break the `production` build (if the `polyfill` file is recognized by the build). Affected apps will need to supply their own [closest](https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill) polyfill to ensure compatibility with IE. This issue is tracked [here](https://github.com/adopted-ember-addons/ember-sortable/issues/333).
-
-We require the `ember-decorators-polyfill` to be installed if you are using this addon with versions of Ember < 3.10.0.
-
-Version 1.0 depends upon the availability of 2D CSS transforms.
-Check [the matrix on caniuse.com](http://caniuse.com/#feat=transforms2d)
-to see if your target browsers are compatible.
-
 ## Installation
 
 ```sh
@@ -396,6 +377,23 @@ await drag('mouse', '[data-test-scrollable-demo-handle] .handle', () => {
 await triggerKeyEvent('[data-test-vertical-demo-handle]', 'keydown', ENTER_KEY_CODE);
 ```
 
+## Migrating
+
+### v3 -> v4
+
+None, just make sure Node v14+ and Ember is v3.24+. Although older versions might work, but are no longer tested against. Specifically ember-modifier dropped support for older versions of Ember.
+
+### v2 -> v3
+
+The component versions have been removed and you must use the modifier.
+The modifier version does not support `groupModel`, use the currying of the `fn` helper.
+
+### v1 -> v2
+
+If you are migrating from `1.x.x` to `2.x.x`,
+For components, please read this [migration guide](/MIGRATION_GUIDE_V2.md).
+For modifiers, please read this [migration guide](/MIGRATION_GUIDE_MODIFIERS.md).
+
 ## Developing
 
 ### Setup

package/addon/modifiers/sortable-group.js

@@ -57,7 +57,7 @@ export default class SortableGroupModifier extends Modifier {
   /** End of keyboard utils */
 
   get disabled() {
-    return this.args.named.disabled || false;
+    return this.named.disabled || false;
   }
 
   /** Start of a11y properties */
@@ -74,7 +74,7 @@ export default class SortableGroupModifier extends Modifier {
    * }
    */
   get handleVisualClass() {
-    return this.args.named.handleVisualClass || NO_MODEL;
+    return this.named.handleVisualClass || NO_MODEL;
   }
 
   /**
@@ -89,15 +89,15 @@ export default class SortableGroupModifier extends Modifier {
    * }
    */
   get a11yAnnouncementConfig() {
-    return this.args.named.a11yAnnouncementConfig || defaultA11yAnnouncementConfig;
+    return this.named.a11yAnnouncementConfig || defaultA11yAnnouncementConfig;
   }
 
   get itemVisualClass() {
-    return this.args.named.itemVisualClass || 'is-activated';
+    return this.named.itemVisualClass || 'is-activated';
   }
 
   get a11yItemName() {
-    return this.args.named.a11yItemName || 'item';
+    return this.named.a11yItemName || 'item';
   }
   /** End of a11y properties */
 
@@ -473,7 +473,7 @@ export default class SortableGroupModifier extends Modifier {
    @default y
    */
   get direction() {
-    return this.args.named.direction || 'y';
+    return this.named.direction || 'y';
   }
 
   /**
@@ -486,7 +486,7 @@ export default class SortableGroupModifier extends Modifier {
    @default null
    */
   get onChange() {
-    return this.args.named.onChange;
+    return this.named.onChange;
   }
 
   @service('ember-sortable-internal-state')
@@ -500,11 +500,9 @@ export default class SortableGroupModifier extends Modifier {
    * @returns {*|string}
    */
   get groupName() {
-    return this.args.named.groupName || '_EmberSortableGroup';
+    return this.named.groupName || '_EmberSortableGroup';
   }
 
-  _groupDef = this.sortableService.fetchGroup(this.groupName);
-
   /**
    This is an array of SortableItemModifiers
 
@@ -719,12 +717,14 @@ export default class SortableGroupModifier extends Modifier {
     registerDestructor(this, cleanup);
   }
 
-  modify(element /*, positional, named*/) {
+  modify(element, _positional, named) {
     this.element = element;
+    this.named = named;
 
     this.removeEventListener();
 
     if (!this.didSetup) {
+      this._groupDef = this.sortableService.fetchGroup(this.groupName);
       this.announcer = this._createAnnouncer();
       this.element.insertAdjacentElement('afterend', this.announcer);
       this.sortableService.registerGroup(this.groupName, this);

package/addon/modifiers/sortable-item.js

@@ -63,7 +63,7 @@ export default class SortableItemModifier extends Modifier {
   }
 
   get model() {
-    return this.args.named.model;
+    return this.named.model;
   }
 
   get direction() {
@@ -82,7 +82,7 @@ export default class SortableItemModifier extends Modifier {
    * @returns {*|string}
    */
   get groupName() {
-    return this.args.named.groupName || '_EmberSortableGroup';
+    return this.named.groupName || '_EmberSortableGroup';
   }
 
   /**
@@ -93,7 +93,7 @@ export default class SortableItemModifier extends Modifier {
    @default 125
    */
   get updateInterval() {
-    return this.args.named.updateInterval || 125;
+    return this.named.updateInterval || 125;
   }
 
   /**
@@ -103,7 +103,7 @@ export default class SortableItemModifier extends Modifier {
    @default 0[px]
    */
   get spacing() {
-    return this.args.named.spacing || 0;
+    return this.named.spacing || 0;
   }
 
   /**
@@ -115,7 +115,7 @@ export default class SortableItemModifier extends Modifier {
   get isDisabled() {
     deprecate(
       '"isDraggingDisabled" is deprecated.  Please migrate to "disabled" named argument',
-      !('isDraggingDisabled' in this.args.named),
+      !('isDraggingDisabled' in this.named),
       {
         id: 'ember-sortable.is-dragging-disabled',
         url: 'https://github.com/adopted-ember-addons/ember-sortable#readme',
@@ -128,7 +128,7 @@ export default class SortableItemModifier extends Modifier {
       }
     );
 
-    return this.groupDisabled || this.args.named.disabled || this.args.named.isDraggingDisabled || false;
+    return this.groupDisabled || this.named.disabled || this.named.isDraggingDisabled || false;
   }
 
   /**
@@ -143,7 +143,7 @@ export default class SortableItemModifier extends Modifier {
    @default "[data-sortable-handle]"
    */
   get handle() {
-    return this.args.named.handle || '[data-sortable-handle]';
+    return this.named.handle || '[data-sortable-handle]';
   }
 
   handleElement;
@@ -159,7 +159,7 @@ export default class SortableItemModifier extends Modifier {
    * @default 0
    */
   get distance() {
-    return this.args.named.distance || 0;
+    return this.named.distance || 0;
   }
 
   /**
@@ -191,7 +191,7 @@ export default class SortableItemModifier extends Modifier {
    @default null
    */
   get onDragStart() {
-    return this.args.named.onDragStart || ((item) => item);
+    return this.named.onDragStart || ((item) => item);
   }
 
   /**
@@ -202,7 +202,7 @@ export default class SortableItemModifier extends Modifier {
    @default null
    */
   get onDragStop() {
-    return this.args.named.onDragStop || ((item) => item);
+    return this.named.onDragStop || ((item) => item);
   }
 
   /**
@@ -244,7 +244,7 @@ export default class SortableItemModifier extends Modifier {
    @property disableCheckScrollBounds
    */
   get disableCheckScrollBounds() {
-    return this.args.named.disableCheckScrollBounds != undefined ? this.args.named.disableCheckScrollBounds : isTesting;
+    return this.named.disableCheckScrollBounds != undefined ? this.named.disableCheckScrollBounds : isTesting;
   }
 
   /**
@@ -268,6 +268,8 @@ export default class SortableItemModifier extends Modifier {
       return;
     }
 
+    this.setupHandleElement();
+
     // If the event is coming from within the item, we do not want to activate keyboard reorder mode.
     if (event.target === this.handleElement || event.target === this.element) {
       this.sortableGroup.activateKeyDown(this);
@@ -811,6 +813,16 @@ export default class SortableItemModifier extends Modifier {
     this.element.removeEventListener('touchstart', this.touchStart);
   }
 
+  setupHandleElement() {
+    this.handleElement = this.element.querySelector(this.handle);
+
+    if (this.handleElement) {
+      this.handleElement.style['touch-action'] = 'none';
+    } else {
+      this.element.style['touch-action'] = 'none';
+    }
+  }
+
   element;
   didSetup = false;
 
@@ -819,20 +831,15 @@ export default class SortableItemModifier extends Modifier {
     registerDestructor(this, cleanup);
   }
 
-  modify(element /*, positional, named*/) {
+  modify(element, _positional, named) {
     this.element = element;
+    this.named = named;
 
     this.element.classList.add(this.className);
 
     // Instead of using `event.preventDefault()` in the 'primeDrag' event,
     // (doesn't work in Chrome 56), we set touch-action: none as a workaround.
-    this.handleElement = this.element.querySelector(this.handle);
-
-    if (this.handleElement) {
-      this.handleElement.style['touch-action'] = 'none';
-    } else {
-      this.element.style['touch-action'] = 'none';
-    }
+    this.setupHandleElement();
 
     if (!this.didSetup) {
       this.addEventListener();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-sortable",
-  "version": "4.0.0",
+  "version": "4.0.2",
   "description": "Sortable UI primitives for Ember.",
   "keywords": [
     "ember-addon",