ember-sortable 2.2.6 → 2.3.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+* 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

package/README.md

@@ -42,9 +42,9 @@ $ ember install ember-sortable
 ```hbs
 {{! app/templates/my-route.hbs }}
 
-<SortableGroup @model={{this.model.items}} @onChange={{this.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>
         <span class="handle">&varr;</span>
@@ -292,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.
 
@@ -326,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.
@@ -350,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:

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

@@ -12,6 +12,8 @@ import { DRAG_ACTIONS, ELEMENT_CLICK_ACTION, END_ACTIONS } from '../utils/consta
 import { getX, getY } from '../utils/coordinate';
 import { buildWaiter } from '@ember/test-waiters';
 import config from 'ember-get-config';
+import { deprecate } from '@ember/debug';
+
 const { environment } = config;
 const isTesting = environment === 'test';
 
@@ -158,6 +160,20 @@ export default Component.extend({
 
   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-item.js

@@ -12,7 +12,7 @@ import scrollParent from "../system/scroll-parent";
 import {getBorderSpacing} from "../utils/css-calculation";
 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.
  *
@@ -64,7 +64,7 @@ export default class SortableItemModifier extends Modifier {
   direction;
 
   @reads("sortableGroup.disabled")
-  disabled;
+  groupDisabled;
 
   @service('ember-sortable@ember-sortable')
   sortableService;
@@ -102,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;
   }
 
   /**
@@ -220,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;
@@ -242,8 +253,7 @@ export default class SortableItemModifier extends Modifier {
 
   @action
   keyDown(event) {
-    // Prevents keyboard sorting if group is disabled
-    if (this.disabled) { return; }
+    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) {
@@ -302,13 +312,7 @@ export default class SortableItemModifier extends Modifier {
    * @private
    */
   _primeDrag(startEvent) {
-    // Prevent dragging if the entire group is disabled
-    if (this.disabled) { return; }
-
-    // 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;

package/package.json

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