ember-sortable 3.0.1 → 4.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +34 -4
- package/MIGRATION_GUIDE_MODIFIERS.md +4 -4
- package/README.md +49 -49
- package/RELEASE.md +60 -0
- package/addon/modifiers/sortable-group.js +43 -30
- package/addon/modifiers/sortable-handle.js +10 -5
- package/addon/modifiers/sortable-item.js +40 -22
- package/app/services/ember-sortable-internal-state.js +1 -0
- package/package.json +40 -31
- package/.github/ISSUE_TEMPLATE/bug_report.md +0 -25
- package/.github/workflows/github_ci.yml +0 -71
package/CHANGELOG.md
CHANGED
|
@@ -1,7 +1,37 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
# ember-sortable changelog
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
## v4.0.1 (2022-10-03)
|
|
6
|
+
|
|
7
|
+
#### :memo: Documentation
|
|
8
|
+
* [#480](https://github.com/adopted-ember-addons/ember-sortable/pull/480) fix type in modifier migration doc ([@nlfurniss](https://github.com/nlfurniss))
|
|
9
|
+
* [#475](https://github.com/adopted-ember-addons/ember-sortable/pull/475) Update CHANGELOG.md ([@sandstrom](https://github.com/sandstrom))
|
|
10
|
+
|
|
11
|
+
#### :house: Internal
|
|
12
|
+
* [#487](https://github.com/adopted-ember-addons/ember-sortable/pull/487) Resolve `ember-modifier.no-args-property` deprecation warnings ([@bertdeblock](https://github.com/bertdeblock))
|
|
13
|
+
|
|
14
|
+
#### Committers: 3
|
|
15
|
+
- Bert De Block ([@bertdeblock](https://github.com/bertdeblock))
|
|
16
|
+
- Nathaniel Furniss ([@nlfurniss](https://github.com/nlfurniss))
|
|
17
|
+
- [@sandstrom](https://github.com/sandstrom)
|
|
18
|
+
|
|
19
|
+
## v4.0.0 (2022-05-16)
|
|
4
20
|
|
|
21
|
+
#### :boom: Breaking Change
|
|
22
|
+
* [#479](https://github.com/adopted-ember-addons/ember-sortable/pull/479) Drop node 12 and Ember 3.20 support ([@BnitoBzh](https://github.com/BnitoBzh))
|
|
23
|
+
* [#476](https://github.com/adopted-ember-addons/ember-sortable/pull/476) Update ember-modifier to 3.2.0 (drop Ember < 3.24) ([@BnitoBzh](https://github.com/BnitoBzh))
|
|
24
|
+
|
|
25
|
+
#### :rocket: Enhancement
|
|
26
|
+
* [#477](https://github.com/adopted-ember-addons/ember-sortable/pull/477) perf: avoid creating callbacks for the destructor ([@BnitoBzh](https://github.com/BnitoBzh))
|
|
27
|
+
|
|
28
|
+
#### :house: Internal
|
|
29
|
+
* [#478](https://github.com/adopted-ember-addons/ember-sortable/pull/478) chore: update release process to match adopted standards ([@knownasilya](https://github.com/knownasilya))
|
|
30
|
+
|
|
31
|
+
#### Committers: 3
|
|
32
|
+
- Ewan McDougall ([@mrloop](https://github.com/mrloop))
|
|
33
|
+
- Ilya Radchenko ([@knownasilya](https://github.com/knownasilya))
|
|
34
|
+
- [@BnitoBzh](https://github.com/BnitoBzh)
|
|
5
35
|
|
|
6
36
|
## v3.0.1 (2022-03-16)
|
|
7
37
|
|
|
@@ -690,6 +720,6 @@ Must provide GITHUB_AUTH
|
|
|
690
720
|
|
|
691
721
|
- [#28](https://github.com/jgwhite/ember-sortable/pull/28) Add `model` attr to `sortable-group` [@ujamer](https://github.com/ujamer)
|
|
692
722
|
|
|
693
|
-
###
|
|
723
|
+
### 1.0.0 (2015-05-13)
|
|
694
724
|
|
|
695
725
|
First stable release.
|
|
@@ -32,7 +32,7 @@ To use modifiers, you must use angle-bracket syntax
|
|
|
32
32
|
{{#sortable-group model=model.items onChange=(action 'reorderItems') as |group|}}
|
|
33
33
|
{{#each group.model as |item|}}
|
|
34
34
|
{{#group.item model=item}}
|
|
35
|
-
{{
|
|
35
|
+
{{item.name}}
|
|
36
36
|
{{/group.item}}
|
|
37
37
|
{{/each}}
|
|
38
38
|
{{/sortable-group}}
|
|
@@ -44,7 +44,7 @@ To use modifiers, you must use angle-bracket syntax
|
|
|
44
44
|
<ol {{sortable-group onChange=(action 'reorderItems')}}>
|
|
45
45
|
{{#each model.items as |item|}}
|
|
46
46
|
<li {{sortable-item model=item}}>
|
|
47
|
-
{{
|
|
47
|
+
{{item.name}}
|
|
48
48
|
</li>
|
|
49
49
|
{{/each}}
|
|
50
50
|
</ol>
|
|
@@ -73,7 +73,7 @@ To use modifiers, you must use angle-bracket syntax
|
|
|
73
73
|
<ol {{sortable-group onChange=(action 'reorderItems')}}>
|
|
74
74
|
{{#each model.items as |item|}}
|
|
75
75
|
<li {{sortable-item model=item}}>
|
|
76
|
-
{{
|
|
76
|
+
{{item.name}}
|
|
77
77
|
<span class='handle' {{sortable-handle}}>↕</span>
|
|
78
78
|
</li>
|
|
79
79
|
{{/each}}
|
|
@@ -87,7 +87,7 @@ To use modifiers, you must use angle-bracket syntax
|
|
|
87
87
|
<ol {{sortable-group onChange=(action 'reorderItems' model)}}>
|
|
88
88
|
{{#each model.items as |item|}}
|
|
89
89
|
<li {{sortable-item model=item}}>
|
|
90
|
-
{{
|
|
90
|
+
{{item.name}}
|
|
91
91
|
<span class='handle' {{sortable-handle}}>↕</span>
|
|
92
92
|
</li>
|
|
93
93
|
{{/each}}
|
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
#
|
|
1
|
+
# ember-sortable
|
|
2
2
|
|
|
3
3
|
[](http://badge.fury.io/js/ember-sortable)
|
|
4
4
|
[](https://github.com/adopted-ember-addons/ember-sortable/actions?query=branch%3Amaster+workflow%3A%22build%22)
|
|
@@ -12,26 +12,9 @@ Sortable UI primitives for Ember.
|
|
|
12
12
|
|
|
13
13
|
[Check out the demo](https://adopted-ember-addons.github.io/ember-sortable/demo/)
|
|
14
14
|
|
|
15
|
-
## v2 -> v3 Migration
|
|
16
|
-
|
|
17
|
-
The component versions have been removed and you must use the modifier.
|
|
18
|
-
The modifier version does not support `groupModel`, use the currying of the `fn` helper.
|
|
19
|
-
|
|
20
|
-
## v1 -> v2 Migration
|
|
21
|
-
|
|
22
|
-
If you are migrating from `1.x.x` to `2.x.x`,
|
|
23
|
-
For components, please read this [migration guide](/MIGRATION_GUIDE_V2.md).
|
|
24
|
-
For modifiers, please read this [migration guide](/MIGRATION_GUIDE_MODIFIERS.md).
|
|
25
|
-
|
|
26
15
|
## Requirements
|
|
27
16
|
|
|
28
|
-
In version
|
|
29
|
-
|
|
30
|
-
We require the `ember-decorators-polyfill` to be installed if you are using this addon with versions of Ember < 3.10.0.
|
|
31
|
-
|
|
32
|
-
Version 1.0 depends upon the availability of 2D CSS transforms.
|
|
33
|
-
Check [the matrix on caniuse.com](http://caniuse.com/#feat=transforms2d)
|
|
34
|
-
to see if your target browsers are compatible.
|
|
17
|
+
In version 3.0.0+, Node.js v12 or above And Ember.js v3.24 or above
|
|
35
18
|
|
|
36
19
|
## Installation
|
|
37
20
|
|
|
@@ -42,16 +25,18 @@ $ ember install ember-sortable
|
|
|
42
25
|
## Usage
|
|
43
26
|
|
|
44
27
|
```hbs
|
|
45
|
-
{{! app/
|
|
28
|
+
{{! app/components/my-list/template.hbs }}
|
|
46
29
|
|
|
47
30
|
<ol {{sortable-group onChange=this.reorderItems}}>
|
|
48
|
-
{{#each
|
|
49
|
-
<li {{sortable-item model=
|
|
50
|
-
{{
|
|
31
|
+
{{#each this.items as |item|}}
|
|
32
|
+
<li {{sortable-item model=item}}>
|
|
33
|
+
{{item}}
|
|
51
34
|
<span class='handle' {{sortable-handle}}>↕</span>
|
|
52
35
|
</li>
|
|
53
36
|
{{/each}}
|
|
54
37
|
</ol>
|
|
38
|
+
|
|
39
|
+
<p>The last dragged item was: {{this.lastDragged}}</p>
|
|
55
40
|
```
|
|
56
41
|
|
|
57
42
|
The `onChange` action is called with two arguments:
|
|
@@ -60,13 +45,16 @@ The `onChange` action is called with two arguments:
|
|
|
60
45
|
- The model you just dragged
|
|
61
46
|
|
|
62
47
|
```js
|
|
63
|
-
// app/
|
|
48
|
+
// app/components/my-list/component.js
|
|
49
|
+
|
|
50
|
+
export default class MyList extends Component {
|
|
51
|
+
@tracked lastDragged;
|
|
52
|
+
@tracked items = ['Coal Ila', 'Askaig', 'Bowmore'];
|
|
64
53
|
|
|
65
|
-
export default class MyRoute extends Route {
|
|
66
54
|
@action
|
|
67
55
|
reorderItems(itemModels, draggedModel) {
|
|
68
|
-
this.
|
|
69
|
-
this.
|
|
56
|
+
this.items = itemModels;
|
|
57
|
+
this.lastDragged = draggedModel;
|
|
70
58
|
}
|
|
71
59
|
}
|
|
72
60
|
```
|
|
@@ -74,12 +62,12 @@ export default class MyRoute extends Route {
|
|
|
74
62
|
The modifier version does not support `groupModel`, use the currying of `action` or the `fn` helper.
|
|
75
63
|
|
|
76
64
|
```hbs
|
|
77
|
-
{{! app/
|
|
65
|
+
{{! app/components/my-list/template.hbs }}
|
|
78
66
|
|
|
79
67
|
<ol {{sortable-group onChange=(fn this.reorderItems model)}}>
|
|
80
|
-
{{#each
|
|
81
|
-
<li {{sortable-item model=
|
|
82
|
-
{{
|
|
68
|
+
{{#each this.items as |item|}}
|
|
69
|
+
<li {{sortable-item model=item}}>
|
|
70
|
+
{{item}}
|
|
83
71
|
<span class='handle' {{sortable-handle}}>↕</span>
|
|
84
72
|
</li>
|
|
85
73
|
{{/each}}
|
|
@@ -187,30 +175,25 @@ When the action is called, the item's model will be provided as the only
|
|
|
187
175
|
argument.
|
|
188
176
|
|
|
189
177
|
```js
|
|
190
|
-
// app/
|
|
178
|
+
// app/components/my-list/component.js
|
|
191
179
|
|
|
192
180
|
export default class MyRoute extends Route {
|
|
193
181
|
@action
|
|
194
182
|
dragStarted(item) {
|
|
195
|
-
console.log(`Item started dragging: ${item
|
|
183
|
+
console.log(`Item started dragging: ${item}`);
|
|
196
184
|
},
|
|
197
185
|
@action
|
|
198
186
|
dragStopped(item) {
|
|
199
|
-
console.log(`Item stopped dragging: ${item
|
|
187
|
+
console.log(`Item stopped dragging: ${item}`);
|
|
200
188
|
}
|
|
201
189
|
}
|
|
202
190
|
```
|
|
203
191
|
|
|
204
192
|
```hbs
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
}}
|
|
210
|
-
>
|
|
211
|
-
{{modelItem.name}}
|
|
212
|
-
<span class="handle" {{sortable-handle}}>↕</span>
|
|
213
|
-
</li>
|
|
193
|
+
<li {{sortable-item onDragStart=this.dragStarted onDragStop=this.dragStopped model=item}}>
|
|
194
|
+
{{item}}
|
|
195
|
+
<span class='handle' {{sortable-handle}}>↕</span>
|
|
196
|
+
</li>
|
|
214
197
|
```
|
|
215
198
|
|
|
216
199
|
### Multiple Ember-Sortables renders simultaneously
|
|
@@ -221,9 +204,9 @@ Both the `{{sortable-group}}` and `{{sortable-item}}` take an additional argumen
|
|
|
221
204
|
|
|
222
205
|
```hbs
|
|
223
206
|
<ol {{sortable-group groupName='products' onChange=this.reorderItems}}>
|
|
224
|
-
{{#each
|
|
225
|
-
<li {{sortable-item groupName='products' model=
|
|
226
|
-
{{
|
|
207
|
+
{{#each this.items as |item|}}
|
|
208
|
+
<li {{sortable-item groupName='products' model=item}}>
|
|
209
|
+
{{item}}
|
|
227
210
|
<span class='handle' {{sortable-handle}}>↕</span>
|
|
228
211
|
</li>
|
|
229
212
|
{{/each}}
|
|
@@ -235,9 +218,9 @@ Ensure that the same name is passed to both the group and the items, this would
|
|
|
235
218
|
```hbs
|
|
236
219
|
{{#let 'products' as |myGroupName|}}
|
|
237
220
|
<ol {{sortable-group groupName=myGroupName onChange=this.reorderItems}}>
|
|
238
|
-
{{#each
|
|
239
|
-
<li {{sortable-item groupName=myGroupName model=
|
|
240
|
-
{{
|
|
221
|
+
{{#each this.items as |item|}}
|
|
222
|
+
<li {{sortable-item groupName=myGroupName model=item}}>
|
|
223
|
+
{{item}}
|
|
241
224
|
<span class='handle' {{sortable-handle}}>↕</span>
|
|
242
225
|
</li>
|
|
243
226
|
{{/each}}
|
|
@@ -394,6 +377,23 @@ await drag('mouse', '[data-test-scrollable-demo-handle] .handle', () => {
|
|
|
394
377
|
await triggerKeyEvent('[data-test-vertical-demo-handle]', 'keydown', ENTER_KEY_CODE);
|
|
395
378
|
```
|
|
396
379
|
|
|
380
|
+
## Migrating
|
|
381
|
+
|
|
382
|
+
### v3 -> v4
|
|
383
|
+
|
|
384
|
+
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.
|
|
385
|
+
|
|
386
|
+
### v2 -> v3
|
|
387
|
+
|
|
388
|
+
The component versions have been removed and you must use the modifier.
|
|
389
|
+
The modifier version does not support `groupModel`, use the currying of the `fn` helper.
|
|
390
|
+
|
|
391
|
+
### v1 -> v2
|
|
392
|
+
|
|
393
|
+
If you are migrating from `1.x.x` to `2.x.x`,
|
|
394
|
+
For components, please read this [migration guide](/MIGRATION_GUIDE_V2.md).
|
|
395
|
+
For modifiers, please read this [migration guide](/MIGRATION_GUIDE_MODIFIERS.md).
|
|
396
|
+
|
|
397
397
|
## Developing
|
|
398
398
|
|
|
399
399
|
### Setup
|
package/RELEASE.md
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
# Release Process
|
|
2
|
+
|
|
3
|
+
Releases are mostly automated using
|
|
4
|
+
[release-it](https://github.com/release-it/release-it/) and
|
|
5
|
+
[lerna-changelog](https://github.com/lerna/lerna-changelog/).
|
|
6
|
+
|
|
7
|
+
## Preparation
|
|
8
|
+
|
|
9
|
+
Since the majority of the actual release process is automated, the primary
|
|
10
|
+
remaining task prior to releasing is confirming that all pull requests that
|
|
11
|
+
have been merged since the last release have been labeled with the appropriate
|
|
12
|
+
`lerna-changelog` labels and the titles have been updated to ensure they
|
|
13
|
+
represent something that would make sense to our users. Some great information
|
|
14
|
+
on why this is important can be found at
|
|
15
|
+
[keepachangelog.com](https://keepachangelog.com/en/1.0.0/), but the overall
|
|
16
|
+
guiding principle here is that changelogs are for humans, not machines.
|
|
17
|
+
|
|
18
|
+
When reviewing merged PR's the labels to be used are:
|
|
19
|
+
|
|
20
|
+
* breaking - Used when the PR is considered a breaking change.
|
|
21
|
+
* enhancement - Used when the PR adds a new feature or enhancement.
|
|
22
|
+
* bug - Used when the PR fixes a bug included in a previous release.
|
|
23
|
+
* documentation - Used when the PR adds or updates documentation.
|
|
24
|
+
* internal - Used for internal changes that still require a mention in the
|
|
25
|
+
changelog/release notes.
|
|
26
|
+
|
|
27
|
+
## Release
|
|
28
|
+
|
|
29
|
+
Once the prep work is completed, the actual release is straight forward:
|
|
30
|
+
|
|
31
|
+
* First, ensure that you have installed your projects dependencies:
|
|
32
|
+
|
|
33
|
+
```sh
|
|
34
|
+
yarn install
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
* Second, ensure that you have obtained a
|
|
38
|
+
[GitHub personal access token][generate-token] with the `repo` scope (no
|
|
39
|
+
other permissions are needed). Make sure the token is available as the
|
|
40
|
+
`GITHUB_AUTH` environment variable.
|
|
41
|
+
|
|
42
|
+
For instance:
|
|
43
|
+
|
|
44
|
+
```bash
|
|
45
|
+
export GITHUB_AUTH=abc123def456
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
[generate-token]: https://github.com/settings/tokens/new?scopes=repo&description=GITHUB_AUTH+env+variable
|
|
49
|
+
|
|
50
|
+
* And last (but not least 😁) do your release.
|
|
51
|
+
|
|
52
|
+
```sh
|
|
53
|
+
npx release-it
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
[release-it](https://github.com/release-it/release-it/) manages the actual
|
|
57
|
+
release process. It will prompt you to to choose the version number after which
|
|
58
|
+
you will have the chance to hand tweak the changelog to be used (for the
|
|
59
|
+
`CHANGELOG.md` and GitHub release), then `release-it` continues on to tagging,
|
|
60
|
+
pushing the tag and commits, etc.
|
|
@@ -15,6 +15,7 @@ import { ANNOUNCEMENT_ACTION_TYPES } from '../utils/constant';
|
|
|
15
15
|
import { defaultA11yAnnouncementConfig } from '../utils/defaults';
|
|
16
16
|
import { next, schedule, scheduleOnce, later } from '@ember/runloop';
|
|
17
17
|
import { inject as service } from '@ember/service';
|
|
18
|
+
import { registerDestructor, isDestroyed } from '@ember/destroyable';
|
|
18
19
|
|
|
19
20
|
const NO_MODEL = {};
|
|
20
21
|
|
|
@@ -56,7 +57,7 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
56
57
|
/** End of keyboard utils */
|
|
57
58
|
|
|
58
59
|
get disabled() {
|
|
59
|
-
return this.
|
|
60
|
+
return this.named.disabled || false;
|
|
60
61
|
}
|
|
61
62
|
|
|
62
63
|
/** Start of a11y properties */
|
|
@@ -73,7 +74,7 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
73
74
|
* }
|
|
74
75
|
*/
|
|
75
76
|
get handleVisualClass() {
|
|
76
|
-
return this.
|
|
77
|
+
return this.named.handleVisualClass || NO_MODEL;
|
|
77
78
|
}
|
|
78
79
|
|
|
79
80
|
/**
|
|
@@ -88,15 +89,15 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
88
89
|
* }
|
|
89
90
|
*/
|
|
90
91
|
get a11yAnnouncementConfig() {
|
|
91
|
-
return this.
|
|
92
|
+
return this.named.a11yAnnouncementConfig || defaultA11yAnnouncementConfig;
|
|
92
93
|
}
|
|
93
94
|
|
|
94
95
|
get itemVisualClass() {
|
|
95
|
-
return this.
|
|
96
|
+
return this.named.itemVisualClass || 'is-activated';
|
|
96
97
|
}
|
|
97
98
|
|
|
98
99
|
get a11yItemName() {
|
|
99
|
-
return this.
|
|
100
|
+
return this.named.a11yItemName || 'item';
|
|
100
101
|
}
|
|
101
102
|
/** End of a11y properties */
|
|
102
103
|
|
|
@@ -472,7 +473,7 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
472
473
|
@default y
|
|
473
474
|
*/
|
|
474
475
|
get direction() {
|
|
475
|
-
return this.
|
|
476
|
+
return this.named.direction || 'y';
|
|
476
477
|
}
|
|
477
478
|
|
|
478
479
|
/**
|
|
@@ -485,10 +486,10 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
485
486
|
@default null
|
|
486
487
|
*/
|
|
487
488
|
get onChange() {
|
|
488
|
-
return this.
|
|
489
|
+
return this.named.onChange;
|
|
489
490
|
}
|
|
490
491
|
|
|
491
|
-
@service('ember-sortable
|
|
492
|
+
@service('ember-sortable-internal-state')
|
|
492
493
|
sortableService;
|
|
493
494
|
|
|
494
495
|
/**
|
|
@@ -499,11 +500,9 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
499
500
|
* @returns {*|string}
|
|
500
501
|
*/
|
|
501
502
|
get groupName() {
|
|
502
|
-
return this.
|
|
503
|
+
return this.named.groupName || '_EmberSortableGroup';
|
|
503
504
|
}
|
|
504
505
|
|
|
505
|
-
_groupDef = this.sortableService.fetchGroup(this.groupName);
|
|
506
|
-
|
|
507
506
|
/**
|
|
508
507
|
This is an array of SortableItemModifiers
|
|
509
508
|
|
|
@@ -620,7 +619,7 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
620
619
|
let dimension;
|
|
621
620
|
let direction = this.direction;
|
|
622
621
|
|
|
623
|
-
if (!item.isDragging) {
|
|
622
|
+
if (!isDestroyed(item) && !item.isDragging) {
|
|
624
623
|
set(item, direction, position);
|
|
625
624
|
}
|
|
626
625
|
|
|
@@ -710,32 +709,46 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
710
709
|
this.element.removeEventListener('focusout', this.focusOut);
|
|
711
710
|
}
|
|
712
711
|
|
|
713
|
-
|
|
712
|
+
element;
|
|
713
|
+
didSetup = false;
|
|
714
|
+
|
|
715
|
+
constructor(owner, args) {
|
|
716
|
+
super(owner, args);
|
|
717
|
+
registerDestructor(this, cleanup);
|
|
718
|
+
}
|
|
719
|
+
|
|
720
|
+
modify(element, _positional, named) {
|
|
721
|
+
this.element = element;
|
|
722
|
+
this.named = named;
|
|
723
|
+
|
|
714
724
|
this.removeEventListener();
|
|
715
725
|
|
|
726
|
+
if (!this.didSetup) {
|
|
727
|
+
this._groupDef = this.sortableService.fetchGroup(this.groupName);
|
|
728
|
+
this.announcer = this._createAnnouncer();
|
|
729
|
+
this.element.insertAdjacentElement('afterend', this.announcer);
|
|
730
|
+
this.sortableService.registerGroup(this.groupName, this);
|
|
731
|
+
|
|
732
|
+
this.didSetup = true;
|
|
733
|
+
}
|
|
734
|
+
|
|
716
735
|
if (this.disabled) {
|
|
717
736
|
return;
|
|
718
737
|
}
|
|
719
738
|
|
|
720
739
|
this.addEventListener();
|
|
721
740
|
}
|
|
741
|
+
}
|
|
722
742
|
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
willRemove() {
|
|
733
|
-
// todo cleanup the announcer
|
|
734
|
-
if (this.announcer.parentNode) {
|
|
735
|
-
this.announcer.parentNode.removeChild(this.announcer);
|
|
736
|
-
}
|
|
737
|
-
this.removeEventListener();
|
|
738
|
-
|
|
739
|
-
this.sortableService.deregisterGroup(this.groupName, this);
|
|
743
|
+
/**
|
|
744
|
+
*
|
|
745
|
+
* @param {SortableGroupModifier} instance
|
|
746
|
+
*/
|
|
747
|
+
function cleanup(instance) {
|
|
748
|
+
// todo cleanup the announcer
|
|
749
|
+
if (instance.announcer.parentNode) {
|
|
750
|
+
instance.announcer.parentNode.removeChild(instance.announcer);
|
|
740
751
|
}
|
|
752
|
+
instance.removeEventListener();
|
|
753
|
+
instance.sortableService.deregisterGroup(instance.groupName, instance);
|
|
741
754
|
}
|
|
@@ -15,10 +15,15 @@ import Modifier from 'ember-modifier';
|
|
|
15
15
|
* </ol>
|
|
16
16
|
*/
|
|
17
17
|
export default class SortableHandleModifier extends Modifier {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
this.
|
|
22
|
-
|
|
18
|
+
didSetup = false;
|
|
19
|
+
|
|
20
|
+
modify(element /*, positional, named*/) {
|
|
21
|
+
if (!this.didSetup) {
|
|
22
|
+
// take the model and look up the registered element, the tell that element you are the handle
|
|
23
|
+
element.dataset.sortableHandle = true;
|
|
24
|
+
element.tabIndex = '0';
|
|
25
|
+
element.setAttribute('role', 'button');
|
|
26
|
+
this.didSetup = true;
|
|
27
|
+
}
|
|
23
28
|
}
|
|
24
29
|
}
|
|
@@ -13,6 +13,7 @@ import { buildWaiter } from '@ember/test-waiters';
|
|
|
13
13
|
import { inject as service } from '@ember/service';
|
|
14
14
|
import { assert, deprecate } from '@ember/debug';
|
|
15
15
|
import config from 'ember-get-config';
|
|
16
|
+
import { registerDestructor } from '@ember/destroyable';
|
|
16
17
|
|
|
17
18
|
const { environment } = config;
|
|
18
19
|
const isTesting = environment === 'test';
|
|
@@ -41,7 +42,7 @@ const sortableItemWaiter = buildWaiter('sortable-item-waiter');
|
|
|
41
42
|
export default class SortableItemModifier extends Modifier {
|
|
42
43
|
className = 'sortable-item';
|
|
43
44
|
|
|
44
|
-
@service('ember-sortable
|
|
45
|
+
@service('ember-sortable-internal-state') sortableService;
|
|
45
46
|
|
|
46
47
|
_sortableGroup;
|
|
47
48
|
/**
|
|
@@ -62,7 +63,7 @@ export default class SortableItemModifier extends Modifier {
|
|
|
62
63
|
}
|
|
63
64
|
|
|
64
65
|
get model() {
|
|
65
|
-
return this.
|
|
66
|
+
return this.named.model;
|
|
66
67
|
}
|
|
67
68
|
|
|
68
69
|
get direction() {
|
|
@@ -81,7 +82,7 @@ export default class SortableItemModifier extends Modifier {
|
|
|
81
82
|
* @returns {*|string}
|
|
82
83
|
*/
|
|
83
84
|
get groupName() {
|
|
84
|
-
return this.
|
|
85
|
+
return this.named.groupName || '_EmberSortableGroup';
|
|
85
86
|
}
|
|
86
87
|
|
|
87
88
|
/**
|
|
@@ -92,7 +93,7 @@ export default class SortableItemModifier extends Modifier {
|
|
|
92
93
|
@default 125
|
|
93
94
|
*/
|
|
94
95
|
get updateInterval() {
|
|
95
|
-
return this.
|
|
96
|
+
return this.named.updateInterval || 125;
|
|
96
97
|
}
|
|
97
98
|
|
|
98
99
|
/**
|
|
@@ -102,7 +103,7 @@ export default class SortableItemModifier extends Modifier {
|
|
|
102
103
|
@default 0[px]
|
|
103
104
|
*/
|
|
104
105
|
get spacing() {
|
|
105
|
-
return this.
|
|
106
|
+
return this.named.spacing || 0;
|
|
106
107
|
}
|
|
107
108
|
|
|
108
109
|
/**
|
|
@@ -114,7 +115,7 @@ export default class SortableItemModifier extends Modifier {
|
|
|
114
115
|
get isDisabled() {
|
|
115
116
|
deprecate(
|
|
116
117
|
'"isDraggingDisabled" is deprecated. Please migrate to "disabled" named argument',
|
|
117
|
-
!('isDraggingDisabled' in this.
|
|
118
|
+
!('isDraggingDisabled' in this.named),
|
|
118
119
|
{
|
|
119
120
|
id: 'ember-sortable.is-dragging-disabled',
|
|
120
121
|
url: 'https://github.com/adopted-ember-addons/ember-sortable#readme',
|
|
@@ -127,7 +128,7 @@ export default class SortableItemModifier extends Modifier {
|
|
|
127
128
|
}
|
|
128
129
|
);
|
|
129
130
|
|
|
130
|
-
return this.groupDisabled || this.
|
|
131
|
+
return this.groupDisabled || this.named.disabled || this.named.isDraggingDisabled || false;
|
|
131
132
|
}
|
|
132
133
|
|
|
133
134
|
/**
|
|
@@ -142,7 +143,7 @@ export default class SortableItemModifier extends Modifier {
|
|
|
142
143
|
@default "[data-sortable-handle]"
|
|
143
144
|
*/
|
|
144
145
|
get handle() {
|
|
145
|
-
return this.
|
|
146
|
+
return this.named.handle || '[data-sortable-handle]';
|
|
146
147
|
}
|
|
147
148
|
|
|
148
149
|
handleElement;
|
|
@@ -158,7 +159,7 @@ export default class SortableItemModifier extends Modifier {
|
|
|
158
159
|
* @default 0
|
|
159
160
|
*/
|
|
160
161
|
get distance() {
|
|
161
|
-
return this.
|
|
162
|
+
return this.named.distance || 0;
|
|
162
163
|
}
|
|
163
164
|
|
|
164
165
|
/**
|
|
@@ -190,7 +191,7 @@ export default class SortableItemModifier extends Modifier {
|
|
|
190
191
|
@default null
|
|
191
192
|
*/
|
|
192
193
|
get onDragStart() {
|
|
193
|
-
return this.
|
|
194
|
+
return this.named.onDragStart || ((item) => item);
|
|
194
195
|
}
|
|
195
196
|
|
|
196
197
|
/**
|
|
@@ -201,7 +202,7 @@ export default class SortableItemModifier extends Modifier {
|
|
|
201
202
|
@default null
|
|
202
203
|
*/
|
|
203
204
|
get onDragStop() {
|
|
204
|
-
return this.
|
|
205
|
+
return this.named.onDragStop || ((item) => item);
|
|
205
206
|
}
|
|
206
207
|
|
|
207
208
|
/**
|
|
@@ -243,7 +244,7 @@ export default class SortableItemModifier extends Modifier {
|
|
|
243
244
|
@property disableCheckScrollBounds
|
|
244
245
|
*/
|
|
245
246
|
get disableCheckScrollBounds() {
|
|
246
|
-
return this.
|
|
247
|
+
return this.named.disableCheckScrollBounds != undefined ? this.named.disableCheckScrollBounds : isTesting;
|
|
247
248
|
}
|
|
248
249
|
|
|
249
250
|
/**
|
|
@@ -810,27 +811,44 @@ export default class SortableItemModifier extends Modifier {
|
|
|
810
811
|
this.element.removeEventListener('touchstart', this.touchStart);
|
|
811
812
|
}
|
|
812
813
|
|
|
813
|
-
|
|
814
|
+
element;
|
|
815
|
+
didSetup = false;
|
|
816
|
+
|
|
817
|
+
constructor(owner, args) {
|
|
818
|
+
super(owner, args);
|
|
819
|
+
registerDestructor(this, cleanup);
|
|
820
|
+
}
|
|
821
|
+
|
|
822
|
+
modify(element, _positional, named) {
|
|
823
|
+
this.element = element;
|
|
824
|
+
this.named = named;
|
|
825
|
+
|
|
814
826
|
this.element.classList.add(this.className);
|
|
815
827
|
|
|
816
828
|
// Instead of using `event.preventDefault()` in the 'primeDrag' event,
|
|
817
829
|
// (doesn't work in Chrome 56), we set touch-action: none as a workaround.
|
|
818
830
|
this.handleElement = this.element.querySelector(this.handle);
|
|
831
|
+
|
|
819
832
|
if (this.handleElement) {
|
|
820
833
|
this.handleElement.style['touch-action'] = 'none';
|
|
821
834
|
} else {
|
|
822
835
|
this.element.style['touch-action'] = 'none';
|
|
823
836
|
}
|
|
824
|
-
}
|
|
825
837
|
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
838
|
+
if (!this.didSetup) {
|
|
839
|
+
this.addEventListener();
|
|
840
|
+
this.element.dataset.sortableItem = true;
|
|
841
|
+
this.sortableService.registerItem(this.groupName, this);
|
|
842
|
+
this.didSetup = true;
|
|
843
|
+
}
|
|
830
844
|
}
|
|
845
|
+
}
|
|
831
846
|
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
847
|
+
/**
|
|
848
|
+
*
|
|
849
|
+
* @param {SortableItemModifier} instance
|
|
850
|
+
*/
|
|
851
|
+
function cleanup(instance) {
|
|
852
|
+
instance.removeEventListener();
|
|
853
|
+
instance.sortableService.deregisterItem(instance.groupName, instance);
|
|
836
854
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from 'ember-sortable/services/ember-sortable';
|
package/package.json
CHANGED
|
@@ -1,81 +1,84 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ember-sortable",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.1",
|
|
4
4
|
"description": "Sortable UI primitives for Ember.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ember-addon",
|
|
7
7
|
"sortable"
|
|
8
8
|
],
|
|
9
|
+
"repository": "https://github.com/adopted-ember-addons/ember-sortable",
|
|
9
10
|
"license": "MIT",
|
|
10
11
|
"author": "",
|
|
11
12
|
"directories": {
|
|
12
13
|
"doc": "doc",
|
|
13
14
|
"test": "tests"
|
|
14
15
|
},
|
|
15
|
-
"repository": "https://github.com/adopted-ember-addons/ember-sortable",
|
|
16
16
|
"scripts": {
|
|
17
17
|
"build": "ember build",
|
|
18
18
|
"lint:hbs": "ember-template-lint .",
|
|
19
19
|
"lint:js": "eslint .",
|
|
20
20
|
"start": "ember serve",
|
|
21
|
-
"test": "ember test",
|
|
21
|
+
"test:ember": "ember test",
|
|
22
22
|
"test:all": "ember try:each",
|
|
23
23
|
"lint": "yarn lint:hbs && yarn lint:js",
|
|
24
24
|
"release": "release-it"
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
27
|
"@ember/render-modifiers": "^1.0.2 || ^2.0.0",
|
|
28
|
-
"@ember/test-waiters": "^
|
|
29
|
-
"ember-cli-babel": "^7.26.
|
|
30
|
-
"ember-cli-htmlbars": "^
|
|
28
|
+
"@ember/test-waiters": "^3.0.1",
|
|
29
|
+
"ember-cli-babel": "^7.26.11",
|
|
30
|
+
"ember-cli-htmlbars": "^6.0.1",
|
|
31
31
|
"ember-cli-version-checker": "^5.1.2",
|
|
32
|
-
"ember-get-config": "^0.
|
|
33
|
-
"ember-modifier": "^2.
|
|
32
|
+
"ember-get-config": "^2.0.0",
|
|
33
|
+
"ember-modifier": "^3.2.0",
|
|
34
34
|
"ember-test-selectors": "^6.0.0"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"@ember/optional-features": "^2.0.0",
|
|
38
|
-
"@ember/test-helpers": "^2.
|
|
39
|
-
"@embroider/test-setup": "^
|
|
38
|
+
"@ember/test-helpers": "^2.6.0",
|
|
39
|
+
"@embroider/test-setup": "^1.2.0",
|
|
40
40
|
"@glimmer/component": "^1.0.4",
|
|
41
41
|
"@glimmer/tracking": "^1.0.4",
|
|
42
42
|
"babel-eslint": "^10.0.3",
|
|
43
|
-
"broccoli-asset-rev": "^
|
|
44
|
-
"ember-a11y-testing": "^
|
|
45
|
-
"ember-
|
|
43
|
+
"broccoli-asset-rev": "^3.0.0",
|
|
44
|
+
"ember-a11y-testing": "^5.0.0",
|
|
45
|
+
"ember-auto-import": "^2.4.0",
|
|
46
|
+
"ember-cli": "^4.2.0",
|
|
46
47
|
"ember-cli-dependency-checker": "^3.0.0",
|
|
47
|
-
"ember-cli-
|
|
48
|
-
"ember-cli-inject-live-reload": "^1.8.2",
|
|
48
|
+
"ember-cli-inject-live-reload": "^2.0.0",
|
|
49
49
|
"ember-cli-sri": "^2.1.1",
|
|
50
50
|
"ember-cli-terser": "^4.0.2",
|
|
51
51
|
"ember-disable-prototype-extensions": "^1.1.3",
|
|
52
52
|
"ember-export-application-global": "^2.0.0",
|
|
53
53
|
"ember-load-initializers": "^2.1.2",
|
|
54
|
-
"ember-
|
|
55
|
-
"ember-qunit": "^5.1.4",
|
|
54
|
+
"ember-qunit": "mydea/ember-qunit#fn/ember-auto-import-v2-node-12",
|
|
56
55
|
"ember-resolver": "^8.0.3",
|
|
57
|
-
"ember-source": "^
|
|
56
|
+
"ember-source": "^4.2.0",
|
|
58
57
|
"ember-source-channel-url": "^3.0.0",
|
|
59
|
-
"ember-template-lint": "^
|
|
60
|
-
"ember-try": "^
|
|
58
|
+
"ember-template-lint": "^4.2.0",
|
|
59
|
+
"ember-try": "^2.0.0",
|
|
61
60
|
"eslint": "^7.32.0",
|
|
62
|
-
"eslint-config-prettier": "^8.
|
|
63
|
-
"eslint-plugin-ember": "
|
|
61
|
+
"eslint-config-prettier": "^8.4.0",
|
|
62
|
+
"eslint-plugin-ember": "^10.5.9",
|
|
64
63
|
"eslint-plugin-node": "^11.1.0",
|
|
65
|
-
"eslint-plugin-prettier": "^
|
|
66
|
-
"eslint-plugin-qunit": "^
|
|
64
|
+
"eslint-plugin-prettier": "^4.0.0",
|
|
65
|
+
"eslint-plugin-qunit": "^7.2.0",
|
|
67
66
|
"husky": "^3.0.8",
|
|
68
67
|
"lerna-changelog": "^0.8.2",
|
|
69
68
|
"loader.js": "^4.7.0",
|
|
70
69
|
"npm-run-all": "^4.1.5",
|
|
71
|
-
"prettier": "^2.
|
|
72
|
-
"qunit": "^2.
|
|
73
|
-
"qunit-dom": "^
|
|
70
|
+
"prettier": "^2.5.1",
|
|
71
|
+
"qunit": "^2.18.0",
|
|
72
|
+
"qunit-dom": "^2.0.0",
|
|
74
73
|
"release-it": "^14.11.8",
|
|
75
|
-
"release-it-lerna-changelog": "^4.0.1"
|
|
74
|
+
"release-it-lerna-changelog": "^4.0.1",
|
|
75
|
+
"webpack": "^5.69.1"
|
|
76
76
|
},
|
|
77
77
|
"engines": {
|
|
78
|
-
"node": "
|
|
78
|
+
"node": "14.* || >= 16"
|
|
79
|
+
},
|
|
80
|
+
"publishConfig": {
|
|
81
|
+
"registry": "https://registry.npmjs.org"
|
|
79
82
|
},
|
|
80
83
|
"ember": {
|
|
81
84
|
"edition": "octane"
|
|
@@ -87,14 +90,20 @@
|
|
|
87
90
|
"release-it": {
|
|
88
91
|
"plugins": {
|
|
89
92
|
"release-it-lerna-changelog": {
|
|
90
|
-
"infile": "CHANGELOG.md"
|
|
93
|
+
"infile": "CHANGELOG.md",
|
|
94
|
+
"launchEditor": false
|
|
91
95
|
}
|
|
92
96
|
},
|
|
93
97
|
"git": {
|
|
94
98
|
"tagName": "v${version}"
|
|
95
99
|
},
|
|
96
100
|
"github": {
|
|
97
|
-
"release": true
|
|
101
|
+
"release": true,
|
|
102
|
+
"tokenRef": "GITHUB_AUTH"
|
|
98
103
|
}
|
|
104
|
+
},
|
|
105
|
+
"volta": {
|
|
106
|
+
"node": "14.19.2",
|
|
107
|
+
"yarn": "1.22.18"
|
|
99
108
|
}
|
|
100
109
|
}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: Bug report
|
|
3
|
-
about: Create a report to help us improve
|
|
4
|
-
labels:
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-
**Describe the bug**
|
|
8
|
-
A clear and concise description of what the bug is.
|
|
9
|
-
|
|
10
|
-
**To Reproduce**
|
|
11
|
-
Steps to reproduce the behavior:
|
|
12
|
-
|
|
13
|
-
1. Go to '...'
|
|
14
|
-
2. Click on '....'
|
|
15
|
-
3. Scroll down to '....'
|
|
16
|
-
4. See error
|
|
17
|
-
|
|
18
|
-
**Expected behavior**
|
|
19
|
-
A clear and concise description of what you expected to happen.
|
|
20
|
-
|
|
21
|
-
**Screenshots**
|
|
22
|
-
If applicable, add screenshots to help explain your problem.
|
|
23
|
-
|
|
24
|
-
**Additional context**
|
|
25
|
-
Add any other context about the problem here.
|
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
|
|
2
|
-
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
|
|
3
|
-
|
|
4
|
-
name: build
|
|
5
|
-
|
|
6
|
-
on:
|
|
7
|
-
workflow_dispatch:
|
|
8
|
-
push:
|
|
9
|
-
branches: [master]
|
|
10
|
-
pull_request:
|
|
11
|
-
branches: [master]
|
|
12
|
-
|
|
13
|
-
jobs:
|
|
14
|
-
main-test:
|
|
15
|
-
name: Main test
|
|
16
|
-
runs-on: ubuntu-latest
|
|
17
|
-
steps:
|
|
18
|
-
- uses: actions/checkout@v2
|
|
19
|
-
- name: Use Node.js 12
|
|
20
|
-
uses: actions/setup-node@v2
|
|
21
|
-
with:
|
|
22
|
-
node-version: 12
|
|
23
|
-
cache: yarn
|
|
24
|
-
- name: Install Dependencies
|
|
25
|
-
run: yarn install --frozen-lockfile
|
|
26
|
-
- name: Running tests
|
|
27
|
-
run: yarn test
|
|
28
|
-
|
|
29
|
-
ember-try-required:
|
|
30
|
-
name: Ember try ember-${{matrix.scenario}}
|
|
31
|
-
|
|
32
|
-
runs-on: ubuntu-latest
|
|
33
|
-
|
|
34
|
-
strategy:
|
|
35
|
-
fail-fast: false
|
|
36
|
-
matrix:
|
|
37
|
-
scenario: [ember-lts-3.20, ember-lts-3.24, ember-lts-3.28]
|
|
38
|
-
steps:
|
|
39
|
-
- uses: actions/checkout@v2
|
|
40
|
-
- name: Use Node.js 12
|
|
41
|
-
uses: actions/setup-node@v2
|
|
42
|
-
with:
|
|
43
|
-
node-version: 12
|
|
44
|
-
cache: yarn
|
|
45
|
-
- name: Install Dependencies
|
|
46
|
-
run: yarn install --frozen-lockfile
|
|
47
|
-
- name: Running test
|
|
48
|
-
run: yarn ember try:one ${{ matrix.scenario }}
|
|
49
|
-
|
|
50
|
-
ember-try-optional:
|
|
51
|
-
name: Ember try ember-${{matrix.scenario}}
|
|
52
|
-
|
|
53
|
-
runs-on: ubuntu-latest
|
|
54
|
-
|
|
55
|
-
strategy:
|
|
56
|
-
fail-fast: false
|
|
57
|
-
max-parallel: 1
|
|
58
|
-
matrix:
|
|
59
|
-
scenario: [ember-beta, ember-release, ember-canary]
|
|
60
|
-
steps:
|
|
61
|
-
- uses: actions/checkout@v2
|
|
62
|
-
- name: Use Node.js 12
|
|
63
|
-
uses: actions/setup-node@v2
|
|
64
|
-
with:
|
|
65
|
-
node-version: 12
|
|
66
|
-
cache: yarn
|
|
67
|
-
- name: Install Dependencies
|
|
68
|
-
run: yarn install --frozen-lockfile
|
|
69
|
-
- name: Running test
|
|
70
|
-
run: yarn ember try:one ${{ matrix.scenario }}
|
|
71
|
-
continue-on-error: true
|