ember-sortable 2.2.3 → 2.3.0

package/.huskyrc

@@ -1,6 +1,5 @@
 {
   "hooks": {
     "pre-commit": "yarn lint",
-    "pre-push": "yarn lint && yarn test"
   }
 }

package/CHANGELOG.md

@@ -1,3 +1,37 @@
+* Merge pull request #430 from jacojoubert/refactor-disabled (364fc80)
+*  (51ea46f)
+* Merge pull request #444 from snewcomer/sn/deprecate-components (b70d5cd)
+* Deprecate use of components (ffbd488)
+* Add deprecation warning for `isDraggingDisabled` (ad38e58)
+* Reset sortable-item (cebbe62)
+* Merge pull request #440 from ntnz/patch-2 (2cbc2b5)
+* Merge branch 'master' into refactor-disabled (0f315a6)
+* Merge branch 'master' into refactor-disabled (36aa312)
+* Fix syntax issues in readme (d2f8cc9)
+* Update README.md (c0e88e7)
+* Add disabled argument to sortable-item (888dc5c)
+* Add examples of disabled item (4db5107)
+
+## v2.2.6 (2021-10-21)
+
+#### :bug: Bug Fix
+* [#439](https://github.com/adopted-ember-addons/ember-sortable/pull/439) Resolve this-property-fallback deprecation ([@rmachielse](https://github.com/rmachielse))
+* [#434](https://github.com/adopted-ember-addons/ember-sortable/pull/434) Update ember-cli-babel to @7.26.6, update README example ([@charlesfries](https://github.com/charlesfries))
+
+#### Committers: 4
+- Charles Fries ([@charlesfries](https://github.com/charlesfries))
+- Jaco Joubert ([@jacojoubert](https://github.com/jacojoubert))
+- Richard Machielse ([@rmachielse](https://github.com/rmachielse))
+- Scott Newcomer ([@snewcomer](https://github.com/snewcomer))
+
+* updated yarn.lock (ca925fa)
+* Fix deprecation warning `Importing from ember-test-waiters is deprecated` (#423) (f817c5d)
+* Require ember-decorators-polyfill to be installed by client app (#425) (f901543)
+* Set default values for itemVisualClass  and a11yAnnouncementConfig (#424) (436b7ac)
+
+* update yarn.lock (a18d3cb)
+* bump ember-get-config to version using babel v7 (#416) (92dd9b9)
+
 * Remove event.stopPropagation from focusOut (#413) (48fd3eb)
 
 Must provide GITHUB_AUTH

package/README.md

@@ -24,6 +24,8 @@ For modifiers, please read this [migration guide](/MIGRATION_GUIDE_MODIFIERS.md)
 
 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.
@@ -36,23 +38,23 @@ $ ember install ember-sortable
 
 ## Usage
 
-### component 
+### component
 ```hbs
 {{! app/templates/my-route.hbs }}
 
-{{#sortable-group model=model.items onChange=(action "reorderItems") as |group|}}
+<SortableGroup @model={{this.model.items}} @onChange={{this.reorderItems}} as |group|>
   {{#each group.model as |modelItem|}}
-    {{#group.item model=modelItem as |item|}}
+    <group.item @model={{modelItem}} as |item|>
       {{modelItem.name}}
-      {{#item.handle}}
+      <item.handle>
         <span class="handle">&varr;</span>
-      {{/item.handle}}
-    {{/group.item}}
+      </item.handle>
+    </group.item>
   {{/each}}
-{{/sortable-group}}
+</SortableGroup>
 ```
 
-### modifier 
+### modifier
 ```hbs
 {{! app/templates/my-route.hbs }}
 
@@ -178,9 +180,18 @@ modifier
 <li {{sortable-item distance=30}}>
 ```
 
+### Disabling reordering
+
+The `disabled` attribute allows you to disable sorting for the entire group and its child items.
+
+modifier
+```hbs
+<li {{sortable-group disabled=true}}>
+```
+
 ### CSS, Animation
 
-Sortable items can be in one of three states: default, dragging, dropping.
+Sortable items can be in one of four states: default, dragging, dropping, and activated.
 The classes look like this:
 
 ```html
@@ -190,6 +201,8 @@ The classes look like this:
 <li class="sortable-item is-dragging">...</li>
 <!-- Dropping -->
 <li class="sortable-item is-dropping">...</li>
+<!-- Keyboard -->
+<li class="sortable-item is-activated">...</li>
 ```
 
 In our [example app.css](tests/dummy/app/styles/app.css) we apply a
@@ -225,6 +238,9 @@ slightly different colour:
 }
 ```
 
+If the user presses space to activate and move an item via the keyboard, `is-activated` is added. Once the user drops the item it is
+removed. Use this class to add a visual indicator that the item is selected and being manipulated.
+
 ### Drag Actions
 
 The `onDragStart` and `onDragStop` actions are available for the
@@ -276,7 +292,7 @@ modifier
   </li>
 ```
 
-### Multiple Ember-Sortables renders simultaneously (Modifier version) 
+### Multiple Ember-Sortables renders simultaneously (Modifier version)
 
 The modifier version uses a service behind the scenes for communication between the group and the items and to maintain state. It does this seemlessly when the elements are rendered on the screen. However, if there are two sortables rendered at the same time, either in the same component or different components, the state management does not know which items belong to which group.
 
@@ -310,8 +326,10 @@ Ensure that the same name is passed to both the group and the items, this would
 
 
 ### Disabling Drag (Experimental)
-`sortable-item` (component and modifier) exposes an optional `isDraggingDisabled` flag that you can use to disable `drag` on the particular item.
+`sortable-item` (component and modifier) exposes an optional `disabled` (previously `isDraggingDisabled`) flag that you can use to disable reordering for that particular item. Disabling and item won't prevent it from changing position in the array. The user can still move other non-disabled items to over it.
+
 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.
 3. Allows you to access the entire list of `models` for your `onChange` action, which can now be a mix of sortable and non-sortable items.
@@ -334,8 +352,8 @@ component
   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, 
+
+The modifier version can be attached to to any element that makes sense,
 
 ##### Keyboard Navigation
 There are 4 modes during keyboard navigation:
@@ -358,8 +376,11 @@ There are 4 modes during keyboard navigation:
 
 #### User configurable
 ##### Screen Reader
+
+The default language for `ember-sortable` is English. Any language can be supported by passing in the configuration below in the appropriate language.
+
 - **a11yItemName**
-  a name for the item.
+  a name for the item. Defaults to `item`.
 - **a11yAnnouncementConfig**
   a map of `action enums` to `functions` that takes the following `config`, which is exposed by `sortable-group`.
 ```javascript
@@ -373,7 +394,7 @@ a11yAnnounceConfig = {
 ```
 and returns a `string` constructed from the `config`.
 
-**Example**
+**Default value**
 ```javascript
 {
   ACTIVATE: function({ a11yItemName, index, maxLength, direction }) {
@@ -405,7 +426,7 @@ and returns a `string` constructed from the `config`.
   This class will be added to the `sortable-handle` during `ACTIVATE` and `MOVE` operations. This allows you to add custom styles such as `visual arrows` via `pseudo` classes.
 
 - **itemVisualClass**
-  This class will be added to the `sortable-item` during `ACTIVATE` and `MOVE` operations. This is needed to creating a `visual indicator` that mimics `focus` b/c the native `focus` is on the container.
+  This class will be added to the `sortable-item` during `ACTIVATE` and `MOVE` operations. The default class added is `is-activated`. This is needed to creating a `visual indicator` that mimics `focus` b/c the native `focus` is on the container.
 
 ## Testing
 

package/addon/components/sortable-group.js

@@ -13,6 +13,7 @@ import {
   isRightArrowKey,
 } from '../utils/keyboard';
 import {  ANNOUNCEMENT_ACTION_TYPES } from '../utils/constant';
+import { deprecate } from '@ember/debug';
 
 const a = A;
 const NO_MODEL = {};
@@ -130,6 +131,20 @@ export default Component.extend({
   init() {
     this._super(...arguments);
 
+    deprecate(
+      'The <SortableGroup> component is deprecated.  Please use the modifier version {{sortable-group}}.',
+      false,
+      {
+        id: 'ember-sortable:sortable-group-component-deprecated',
+        until: '3.0.0',
+        for: 'ember-sortable',
+        since: {
+          available: '2.2.6',
+          enabled: '2.2.6',
+        },
+      }
+    );
+
     this._setGetterSetters();
     this.set('moves', []);
   },

package/addon/components/sortable-handle.js

@@ -1,4 +1,5 @@
 import Component from '@ember/component';
+import { deprecate } from '@ember/debug';
 
 /**
  * This component represents the handle of a `sortable-item`.
@@ -8,4 +9,22 @@ export default Component.extend({
   role: 'button',
   attributeBindings: ["dataSortableHandle:data-sortable-handle", "tabindex", "role"],
   dataSortableHandle: true,
+
+  init() {
+    this._super(...arguments);
+
+    deprecate(
+      'The <SortableHandle> component is deprecated.  Please use the modifier version {{sortable-handle}}.',
+      false,
+      {
+        id: 'ember-sortable:sortable-handle-component-deprecated',
+        until: '3.0.0',
+        for: 'ember-sortable',
+        since: {
+          available: '2.2.6',
+          enabled: '2.2.6',
+        },
+      }
+    );
+  },
 });

package/addon/components/sortable-item.js

@@ -1,6 +1,7 @@
 import { Promise, defer } from 'rsvp';
 import Component from '@ember/component';
-import { computed, defineProperty } from '@ember/object';
+import { defineProperty } from '@ember/object';
+import { or, readOnly } from '@ember/object/computed';
 import { run, throttle } from '@ember/runloop';
 import { DEBUG } from '@glimmer/env';
 import scrollParent from '../system/scroll-parent';
@@ -9,8 +10,10 @@ import layout from '../templates/components/sortable-item';
 import { getBorderSpacing } from '../utils/css-calculation';
 import { DRAG_ACTIONS, ELEMENT_CLICK_ACTION, END_ACTIONS } from '../utils/constant';
 import { getX, getY } from '../utils/coordinate';
-import { buildWaiter } from 'ember-test-waiters';
+import { buildWaiter } from '@ember/test-waiters';
 import config from 'ember-get-config';
+import { deprecate } from '@ember/debug';
+
 const { environment } = config;
 const isTesting = environment === 'test';
 
@@ -118,7 +121,7 @@ export default Component.extend({
     @property isBusy
     @type Boolean
   */
-  isBusy: computed.or('isDragging', 'isDropping'),
+  isBusy: or('isDragging', 'isDropping'),
 
   /**
     The frequency with which the group is informed
@@ -150,13 +153,27 @@ export default Component.extend({
     Allows host instance to use the `group` property for something else with
     minimal overriding.
   */
-  _direction: computed.readOnly('direction'),
+  _direction: readOnly('direction'),
 
 
   disableCheckScrollBounds: isTesting,
 
   init() {
     this._super(...arguments);
+
+    deprecate(
+      'The <SortableItem> component is deprecated.  Please use the modifier version {{sortable-item}}.',
+      false,
+      {
+        id: 'ember-sortable:sortable-item-component-deprecated',
+        until: '3.0.0',
+        for: 'ember-sortable',
+        since: {
+          available: '2.2.6',
+          enabled: '2.2.6',
+        },
+      }
+    );
     this._setGetterSetters();
   },
 

package/addon/modifiers/sortable-group.js

@@ -10,6 +10,7 @@ import {
   isUpArrowKey
 } from "../utils/keyboard";
 import {ANNOUNCEMENT_ACTION_TYPES} from "../utils/constant";
+import { defaultA11yAnnouncementConfig } from "../utils/defaults";
 import { run } from '@ember/runloop';
 import {inject as service} from '@ember/service';
 
@@ -53,6 +54,10 @@ export default class SortableGroupModifier extends Modifier {
   isRetainingFocus = false;
   /** End of keyboard utils */
 
+  get disabled() {
+    return this.args.named.disabled || false;
+  }
+
   /** Start of a11y properties */
   /**
    * @property an object containing different classes for visual indicators
@@ -73,7 +78,6 @@ export default class SortableGroupModifier extends Modifier {
   /**
    * @property an object containing functions for producing screen reader announcements
    * @type {Object}
-   * @default null
    * @example
    * {
    *  MOVE: function() {},
@@ -83,15 +87,15 @@ export default class SortableGroupModifier extends Modifier {
    * }
    */
   get a11yAnnouncementConfig() {
-    return this.args.named.a11yAnnouncementConfig || NO_MODEL;
+    return this.args.named.a11yAnnouncementConfig || defaultA11yAnnouncementConfig;
   }
 
   get itemVisualClass() {
-    return this.args.named.itemVisualClass;
+    return this.args.named.itemVisualClass || "is-activated";
   }
 
   get a11yItemName() {
-    return this.args.named.a11yItemName;
+    return this.args.named.a11yItemName || 'item';
   }
   /** End of a11y properties */
 
@@ -319,7 +323,7 @@ export default class SortableGroupModifier extends Modifier {
     const a11yAnnouncementConfig = this.a11yAnnouncementConfig;
     const a11yItemName = this.a11yItemName;
 
-    if (a11yAnnouncementConfig === NO_MODEL || !a11yItemName || !(type in a11yAnnouncementConfig)) {
+    if (!a11yItemName || !(type in a11yAnnouncementConfig)) {
       return;
     }
 
@@ -707,14 +711,19 @@ export default class SortableGroupModifier extends Modifier {
   }
 
   didReceiveArguments() {
+    this.removeEventListener();
+
+    if (this.disabled) {
+      return;
+    }
+
+    this.addEventListener();
   }
 
   didUpdateArguments() {
   }
 
   didInstall() {
-    this.addEventListener();
-
     this.announcer = this._createAnnouncer();
     this.element.insertAdjacentElement('afterend', this.announcer);
 

package/addon/modifiers/sortable-item.js

@@ -10,9 +10,9 @@ import {getX, getY} from "../utils/coordinate";
 import ScrollContainer from "../system/scroll-container";
 import scrollParent from "../system/scroll-parent";
 import {getBorderSpacing} from "../utils/css-calculation";
-import { buildWaiter } from 'ember-test-waiters';
+import { buildWaiter } from '@ember/test-waiters';
 import {inject as service} from '@ember/service';
-import {assert} from '@ember/debug';
+import { assert, deprecate } from '@ember/debug';
 import config from 'ember-get-config';
 const { environment } = config;
 const isTesting = environment === 'test';
@@ -23,7 +23,7 @@ const sortableItemWaiter = buildWaiter("sortable-item-waiter");
  * Modifier to mark an element as an item to be reordered
  *
  * @param {Object} model The model that this item will represent
- * @param {boolean} [isDraggingDisabled=false] Set to true to make this item not draggable
+ * @param {boolean} [disabled=false] Set to true to make this item not sortable
  * @param {Function}  [onDragStart] An optional callback for when dragging starts.
  * @param {Function}  [onDragStop] An optional callback for when dragging stops.
  *
@@ -63,6 +63,9 @@ export default class SortableItemModifier extends Modifier {
   @reads("sortableGroup.direction")
   direction;
 
+  @reads("sortableGroup.disabled")
+  groupDisabled;
+
   @service('ember-sortable@ember-sortable')
   sortableService;
 
@@ -99,13 +102,27 @@ export default class SortableItemModifier extends Modifier {
   }
 
   /**
-   Removes the ability for the current item to be dragged
-   @property isDraggingDisabled
+   Removes the ability for the current item to be sorted
+   @property disabled
    @type  boolean
    @default false
    */
-  get isDraggingDisabled() {
-    return this.args.named.isDraggingDisabled || false;
+  get isDisabled() {
+    deprecate(
+      '"isDraggingDisabled" is deprecated.  Please migrate to "disabled" named argument',
+      !("isDraggingDisabled" in this.args.named),
+      {
+        id: 'ember-sortable.is-dragging-disabled',
+        url: 'https://github.com/adopted-ember-addons/ember-sortable#readme',
+        until: '3.0.0',
+        for: 'ember-sortable',
+        since: {
+          available: '2.2.6',
+          enabled: '2.2.6',
+        },
+      });
+
+    return this.groupDisabled || this.args.named.disabled || this.args.named.isDraggingDisabled || false;
   }
 
   /**
@@ -217,10 +234,7 @@ export default class SortableItemModifier extends Modifier {
   isBusy;
 
   /**
-   Removes the ability for the current item to be dragged
-   @property isDraggingDisabled
-   @type  boolean
-   @default false
+   @property disableCheckScrollBounds
    */
   get disableCheckScrollBounds() {
     return this.args.named.disableCheckScrollBounds != undefined ? this.args.named.disableCheckScrollBounds : isTesting;
@@ -239,6 +253,8 @@ export default class SortableItemModifier extends Modifier {
 
   @action
   keyDown(event) {
+    if (this.isDisabled) { return; }
+
     // 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);
@@ -296,10 +312,7 @@ export default class SortableItemModifier extends Modifier {
    * @private
    */
   _primeDrag(startEvent) {
-    // Prevent dragging if the sortable-item is disabled.
-    if (this.isDraggingDisabled) {
-      return;
-    }
+    if (this.isDisabled) { return; }
 
     if (this.handleElement && !startEvent.target.closest(this.handle)) {
       return;
@@ -650,7 +663,7 @@ export default class SortableItemModifier extends Modifier {
 
   get isAnimated() {
     if (!this.element) {
-      return;
+      return undefined;
     }
 
     let el = this.element;

package/addon/templates/components/sortable-group.hbs

@@ -1,7 +1,7 @@
 {{yield (
   hash
     item=(component "ember-sortable@sortable-item"
-      direction=direction
+      direction=this.direction
       registerItem=(action "registerItem")
       deregisterItem=(action "deregisterItem")
       setSelectedItem=(action "setSelectedItem")
@@ -11,6 +11,6 @@
       activateKeyDown=(action "activateKeyDown")
       deactivateKeyDown=(action "deactivateKeyDown")
     )
-    model=model
+    model=this.model
   )
 }}

package/addon/utils/defaults.js

@@ -0,0 +1,25 @@
+export const defaultA11yAnnouncementConfig = {
+  ACTIVATE({ a11yItemName, index, maxLength, direction }) {
+    let message = `${a11yItemName} at position, ${index + 1} of ${maxLength}, is activated to be repositioned.`;
+
+    if (direction === 'y') {
+      message += 'Press up and down keys to change position,';
+    }
+    else {
+      message += 'Press left and right keys to change position,';
+    }
+
+    message += ' Space to confirm new position, Escape to cancel.';
+
+    return message;
+  },
+  MOVE({ a11yItemName, index, maxLength, delta }) {
+    return `${a11yItemName} is moved to position, ${index + 1 + delta} of ${maxLength}. Press Space to confirm new position, Escape to cancel.`;
+  },
+  CONFIRM({ a11yItemName }) {
+    return `${a11yItemName} is successfully repositioned.`;
+  },
+  CANCEL({ a11yItemName }) {
+    return `Cancelling ${a11yItemName} repositioning`;
+  },
+};

package/index.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const fs = require('fs');
+const VersionChecker = require('ember-cli-version-checker');
 
 module.exports = {
   name: require('./package').name,
@@ -13,5 +14,12 @@ module.exports = {
     if (fs.existsSync('vendor/polyfills/closest.js')) {
       app.import('vendor/polyfills/closest.js', { prepend: true});
     }
+
+    var checker = new VersionChecker(this);
+    var emberVersion = checker.for('ember-source');
+
+    if (emberVersion.lt('3.10.0')) {
+      this.ui.writeWarnLine('ember-sortable requires the ember-decorator-polyfill. Please add it to your `package.json`.');
+    }
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-sortable",
-  "version": "2.2.3",
+  "version": "2.3.0",
   "description": "Sortable UI primitives for Ember.",
   "keywords": [
     "ember-addon",
@@ -25,13 +25,13 @@
   },
   "dependencies": {
     "@ember/render-modifiers": "^1.0.2",
-    "ember-cli-babel": "^7.11.1",
+    "@ember/test-waiters": "^2.4.4",
+    "ember-cli-babel": "^7.26.6",
     "ember-cli-htmlbars": "^5.0.0",
-    "ember-decorators-polyfill": "^1.1.1",
-    "ember-get-config": "^0.2.4",
+    "ember-cli-version-checker": "^5.1.2",
+    "ember-get-config": "^0.3.0",
     "ember-modifier": "^2.1.0",
-    "ember-test-selectors": "^5.0.0",
-    "ember-test-waiters": "^1.1.1"
+    "ember-test-selectors": "^5.0.0"
   },
   "devDependencies": {
     "@ember/optional-features": "^0.6.3",

package/jsconfig.json

@@ -1 +0,0 @@
-{"compilerOptions":{"target":"es6","experimentalDecorators":true},"exclude":["node_modules","bower_components","tmp","vendor",".git","dist"]}