@bennerinformatics/ember-fw-table 2.1.4 → 2.1.5

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.
Files changed (164) hide show
  1. package/addon/components/fw-table-resort.js +16 -2
  2. package/addon/templates/components/fw-table-resort.hbs +3 -0
  3. package/docs/api.js +61 -0
  4. package/docs/assets/css/custom.css +82 -0
  5. package/docs/assets/css/external-small.png +0 -0
  6. package/docs/assets/css/logo.png +0 -0
  7. package/docs/assets/css/main.css +793 -0
  8. package/docs/assets/css/theme.css +547 -0
  9. package/docs/assets/favicon.ico +0 -0
  10. package/docs/assets/icons/android-icon-144x144.png +0 -0
  11. package/docs/assets/icons/android-icon-192x192.png +0 -0
  12. package/docs/assets/icons/android-icon-36x36.png +0 -0
  13. package/docs/assets/icons/android-icon-48x48.png +0 -0
  14. package/docs/assets/icons/android-icon-72x72.png +0 -0
  15. package/docs/assets/icons/android-icon-96x96.png +0 -0
  16. package/docs/assets/icons/apple-icon-114x114.png +0 -0
  17. package/docs/assets/icons/apple-icon-120x120.png +0 -0
  18. package/docs/assets/icons/apple-icon-144x144.png +0 -0
  19. package/docs/assets/icons/apple-icon-152x152.png +0 -0
  20. package/docs/assets/icons/apple-icon-180x180.png +0 -0
  21. package/docs/assets/icons/apple-icon-57x57.png +0 -0
  22. package/docs/assets/icons/apple-icon-60x60.png +0 -0
  23. package/docs/assets/icons/apple-icon-72x72.png +0 -0
  24. package/docs/assets/icons/apple-icon-76x76.png +0 -0
  25. package/docs/assets/icons/apple-icon-precomposed.png +0 -0
  26. package/docs/assets/icons/apple-icon.png +0 -0
  27. package/docs/assets/icons/browserconfig.xml +2 -0
  28. package/docs/assets/icons/favicon-16x16.png +0 -0
  29. package/docs/assets/icons/favicon-32x32.png +0 -0
  30. package/docs/assets/icons/favicon-96x96.png +0 -0
  31. package/docs/assets/icons/favicon.ico +0 -0
  32. package/docs/assets/icons/manifest.json +41 -0
  33. package/docs/assets/icons/ms-icon-144x144.png +0 -0
  34. package/docs/assets/icons/ms-icon-150x150.png +0 -0
  35. package/docs/assets/icons/ms-icon-310x310.png +0 -0
  36. package/docs/assets/icons/ms-icon-70x70.png +0 -0
  37. package/docs/assets/img/ember-logo.png +0 -0
  38. package/docs/assets/img/fw-logo.png +0 -0
  39. package/docs/assets/img/spinner.gif +0 -0
  40. package/docs/assets/index.html +10 -0
  41. package/docs/assets/js/api-filter.js +56 -0
  42. package/docs/assets/js/api-list.js +255 -0
  43. package/docs/assets/js/api-search.js +98 -0
  44. package/docs/assets/js/apidocs.js +376 -0
  45. package/docs/assets/js/yui-prettify.js +17 -0
  46. package/docs/assets/js/yuidoc-bootstrap.js +274 -0
  47. package/docs/assets/vendor/bootstrap/css/bootstrap.css +6760 -0
  48. package/docs/assets/vendor/bootstrap/css/bootstrap.min.css +6 -0
  49. package/docs/assets/vendor/bootstrap/fonts/glyphicons-halflings-regular.eot +0 -0
  50. package/docs/assets/vendor/bootstrap/fonts/glyphicons-halflings-regular.svg +288 -0
  51. package/docs/assets/vendor/bootstrap/fonts/glyphicons-halflings-regular.ttf +0 -0
  52. package/docs/assets/vendor/bootstrap/fonts/glyphicons-halflings-regular.woff +0 -0
  53. package/docs/assets/vendor/bootstrap/fonts/glyphicons-halflings-regular.woff2 +0 -0
  54. package/docs/assets/vendor/bootstrap/img/glyphicons-halflings-white.png +0 -0
  55. package/docs/assets/vendor/bootstrap/img/glyphicons-halflings.png +0 -0
  56. package/docs/assets/vendor/bootstrap/js/bootstrap.js +2363 -0
  57. package/docs/assets/vendor/bootstrap/js/bootstrap.min.js +7 -0
  58. package/docs/assets/vendor/font-awesome/css/font-awesome.css +2199 -0
  59. package/docs/assets/vendor/font-awesome/css/font-awesome.min.css +4 -0
  60. package/docs/assets/vendor/font-awesome/fonts/FontAwesome.otf +0 -0
  61. package/docs/assets/vendor/font-awesome/fonts/fontawesome-webfont.eot +0 -0
  62. package/docs/assets/vendor/font-awesome/fonts/fontawesome-webfont.svg +685 -0
  63. package/docs/assets/vendor/font-awesome/fonts/fontawesome-webfont.ttf +0 -0
  64. package/docs/assets/vendor/font-awesome/fonts/fontawesome-webfont.woff +0 -0
  65. package/docs/assets/vendor/font-awesome/fonts/fontawesome-webfont.woff2 +0 -0
  66. package/docs/assets/vendor/github-slugger/slugger.js +59 -0
  67. package/docs/assets/vendor/jquery/jquery.min.js +6 -0
  68. package/docs/assets/vendor/jquery-ui/jquery-ui.min.js +6 -0
  69. package/docs/assets/vendor/prettify/CHANGES.html +130 -0
  70. package/docs/assets/vendor/prettify/COPYING +202 -0
  71. package/docs/assets/vendor/prettify/README.html +203 -0
  72. package/docs/assets/vendor/prettify/prettify-min.css +1 -0
  73. package/docs/assets/vendor/prettify/prettify-min.js +1 -0
  74. package/docs/classes/BaseCells.html +484 -0
  75. package/docs/classes/Export.html +457 -0
  76. package/docs/classes/Format.html +577 -0
  77. package/docs/classes/FwCellAction.html +312 -0
  78. package/docs/classes/FwCellBoolean.html +311 -0
  79. package/docs/classes/FwCellNullable.html +312 -0
  80. package/docs/classes/FwCellPermissionIcon.html +321 -0
  81. package/docs/classes/FwColumnSortable.html +358 -0
  82. package/docs/classes/FwColumnTitle.html +314 -0
  83. package/docs/classes/FwDeleteModal.html +485 -0
  84. package/docs/classes/FwExpandableRow.html +307 -0
  85. package/docs/classes/FwPaginationWrapper.html +2129 -0
  86. package/docs/classes/FwRowToggle.html +355 -0
  87. package/docs/classes/FwRowToggleIndex.html +312 -0
  88. package/docs/classes/FwTableExpandedRow.html +307 -0
  89. package/docs/classes/FwTableResort.html +827 -0
  90. package/docs/classes/FwTableSortable.html +1293 -0
  91. package/docs/classes/Row.html +352 -0
  92. package/docs/classes/Table.html +672 -0
  93. package/docs/classes/TableUtil.html +410 -0
  94. package/docs/classes/index.html +10 -0
  95. package/docs/data.json +2324 -0
  96. package/docs/elements/index.html +10 -0
  97. package/docs/files/addon_classes_Row.js.html +318 -0
  98. package/docs/files/addon_classes_Table.js.html +390 -0
  99. package/docs/files/addon_components_fw-cell-action.js.html +257 -0
  100. package/docs/files/addon_components_fw-cell-boolean.js.html +251 -0
  101. package/docs/files/addon_components_fw-cell-nullable.js.html +253 -0
  102. package/docs/files/addon_components_fw-cell-permission-icon.js.html +266 -0
  103. package/docs/files/addon_components_fw-column-sortable.js.html +281 -0
  104. package/docs/files/addon_components_fw-column-title.js.html +259 -0
  105. package/docs/files/addon_components_fw-delete-modal.js.html +318 -0
  106. package/docs/files/addon_components_fw-expandable-row.js.html +248 -0
  107. package/docs/files/addon_components_fw-pagination-wrapper.js.html +838 -0
  108. package/docs/files/addon_components_fw-row-toggle-index.js.html +252 -0
  109. package/docs/files/addon_components_fw-row-toggle.js.html +270 -0
  110. package/docs/files/addon_components_fw-table-expanded-row.js.html +261 -0
  111. package/docs/files/addon_components_fw-table-expanded-rows.js.html +263 -0
  112. package/docs/files/addon_components_fw-table-resort.js.html +457 -0
  113. package/docs/files/addon_components_fw-table-sortable.js.html +663 -0
  114. package/docs/files/addon_documentation.js.html +301 -0
  115. package/docs/files/addon_initializers_responsive.js.html +253 -0
  116. package/docs/files/addon_utils_base-cells.js.html +313 -0
  117. package/docs/files/addon_utils_export.js.html +316 -0
  118. package/docs/files/addon_utils_formats.js.html +335 -0
  119. package/docs/files/addon_utils_table.js.html +274 -0
  120. package/docs/files/index.html +10 -0
  121. package/docs/index.html +252 -0
  122. package/docs/modules/CellComponents.html +313 -0
  123. package/docs/modules/ColumnComponents.html +284 -0
  124. package/docs/modules/Components.html +285 -0
  125. package/docs/modules/Introduction.html +261 -0
  126. package/docs/modules/Utils.html +285 -0
  127. package/docs/modules/index.html +10 -0
  128. package/package.json +2 -2
  129. package/.yalc/ember-sortable/.huskyrc +0 -5
  130. package/.yalc/ember-sortable/CHANGELOG.md +0 -755
  131. package/.yalc/ember-sortable/CODE_OF_CONDUCT.md +0 -6
  132. package/.yalc/ember-sortable/LICENSE.md +0 -9
  133. package/.yalc/ember-sortable/MIGRATION_GUIDE_MODIFIERS.md +0 -95
  134. package/.yalc/ember-sortable/MIGRATION_GUIDE_V2.md +0 -120
  135. package/.yalc/ember-sortable/Makefile +0 -24
  136. package/.yalc/ember-sortable/README.md +0 -423
  137. package/.yalc/ember-sortable/RELEASE.md +0 -60
  138. package/.yalc/ember-sortable/V2_MIGRATION_RFC.md +0 -1100
  139. package/.yalc/ember-sortable/addon/modifiers/sortable-group.js +0 -754
  140. package/.yalc/ember-sortable/addon/modifiers/sortable-handle.js +0 -29
  141. package/.yalc/ember-sortable/addon/modifiers/sortable-item.js +0 -869
  142. package/.yalc/ember-sortable/addon/services/ember-sortable.js +0 -92
  143. package/.yalc/ember-sortable/addon/system/scroll-container.js +0 -53
  144. package/.yalc/ember-sortable/addon/system/scroll-parent.js +0 -33
  145. package/.yalc/ember-sortable/addon/utils/constant.js +0 -9
  146. package/.yalc/ember-sortable/addon/utils/coordinate.js +0 -34
  147. package/.yalc/ember-sortable/addon/utils/css-calculation.js +0 -20
  148. package/.yalc/ember-sortable/addon/utils/defaults.js +0 -26
  149. package/.yalc/ember-sortable/addon/utils/keyboard.js +0 -32
  150. package/.yalc/ember-sortable/addon-test-support/helpers/drag.js +0 -111
  151. package/.yalc/ember-sortable/addon-test-support/helpers/index.js +0 -4
  152. package/.yalc/ember-sortable/addon-test-support/helpers/reorder.js +0 -41
  153. package/.yalc/ember-sortable/addon-test-support/utils/keyboard.js +0 -32
  154. package/.yalc/ember-sortable/addon-test-support/utils/offset.js +0 -14
  155. package/.yalc/ember-sortable/app/modifiers/sortable-group.js +0 -1
  156. package/.yalc/ember-sortable/app/modifiers/sortable-handle.js +0 -1
  157. package/.yalc/ember-sortable/app/modifiers/sortable-item.js +0 -1
  158. package/.yalc/ember-sortable/app/services/ember-sortable-internal-state.js +0 -1
  159. package/.yalc/ember-sortable/config/environment.js +0 -5
  160. package/.yalc/ember-sortable/demo.gif +0 -0
  161. package/.yalc/ember-sortable/index.js +0 -5
  162. package/.yalc/ember-sortable/package.json +0 -65
  163. package/.yalc/ember-sortable/yalc.sig +0 -1
  164. package/yalc.lock +0 -10
@@ -1,6 +0,0 @@
1
- # Code Of Conduct
2
-
3
- The `ember-sortable` core team and and the broader `Ember` community are committed to everyone having a safe and inclusive experience.
4
-
5
- - Our **Community Guidelines / Code of Conduct** can be found at [emberjs.com/guidelines](https://emberjs.com/guidelines/)
6
- - A history of updates to this page is located at [https://github.com/emberjs/website/commits/master/source/guidelines.html.erb](https://github.com/emberjs/website/commits/master/source/guidelines.html.erb)
@@ -1,9 +0,0 @@
1
- The MIT License (MIT)
2
-
3
- Copyright (c) 2018
4
-
5
- Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
6
-
7
- The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
8
-
9
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
@@ -1,95 +0,0 @@
1
- # Ember-sortable
2
-
3
- ## Migration Guide (Components -> Modifiers)
4
-
5
- To use modifiers, you must use angle-bracket syntax
6
-
7
- ### New Root component
8
-
9
- 1. Instead of using `sortable-group` as a component, use `sortable-group` as a modifier
10
- any element. You no longer need to tell `sortable-group` about the models, so the `each`
11
- uses the models directly.
12
-
13
- **Old Component**
14
-
15
- ```hbs
16
- {{#sortable-group model=model.items onChange=(action "reorderItems") as |group|}}
17
- {{#each group.model as |item|}}
18
- ```
19
-
20
- **New Component**
21
-
22
- ```hbs
23
- <ol {{sortable-group onChange=(action "reorderItems")}}>
24
- {{#each model.items as |item|}}
25
- ```
26
-
27
- 2. Each `item` can be represented by any dom element or component using angle-bracket syntax
28
-
29
- **Old Component**
30
-
31
- ```hbs
32
- {{#sortable-group model=model.items onChange=(action 'reorderItems') as |group|}}
33
- {{#each group.model as |item|}}
34
- {{#group.item model=item}}
35
- {{item.name}}
36
- {{/group.item}}
37
- {{/each}}
38
- {{/sortable-group}}
39
- ```
40
-
41
- **New Component with modifier**
42
-
43
- ```hbs
44
- <ol {{sortable-group onChange=(action 'reorderItems')}}>
45
- {{#each model.items as |item|}}
46
- <li {{sortable-item model=item}}>
47
- {{item.name}}
48
- </li>
49
- {{/each}}
50
- </ol>
51
- ```
52
-
53
- 3. The Handle is also any element with a `sortable-handle` applied to it.
54
-
55
- **Old Component**
56
-
57
- ```hbs
58
- {{#sortable-group model=model.items onChange=(action "reorderItems") as |group|}}
59
- {{#each group.model as |modelItem|}}
60
- {{#group.item model=modelItem as|item|}}
61
- {{modelItem.name}}
62
- {{#item.handle}}
63
- <span class="handle">&varr;</span>
64
- {{/item.handle}}
65
- {{/group.item}}
66
- {{/each}}
67
- {{/sortable-group}}
68
- ```
69
-
70
- **New Component with modifier**
71
-
72
- ```hbs
73
- <ol {{sortable-group onChange=(action 'reorderItems')}}>
74
- {{#each model.items as |item|}}
75
- <li {{sortable-item model=item}}>
76
- {{item.name}}
77
- <span class='handle' {{sortable-handle}}>&varr;</span>
78
- </li>
79
- {{/each}}
80
- </ol>
81
- ```
82
-
83
- 4. The modifier `groupModel` property is no longer supported. The equivalent can
84
- be accomplished by the `action` helper or the new `fn` helper.
85
-
86
- ```hbs
87
- <ol {{sortable-group onChange=(action 'reorderItems' model)}}>
88
- {{#each model.items as |item|}}
89
- <li {{sortable-item model=item}}>
90
- {{item.name}}
91
- <span class='handle' {{sortable-handle}}>&varr;</span>
92
- </li>
93
- {{/each}}
94
- </ol>
95
- ```
@@ -1,120 +0,0 @@
1
- # Ember-sortable
2
-
3
- ## Migration Guide (v1 -> v2)
4
-
5
- [High Order Components](#Higher Order Components) or [Modifiers](/MIGRATION_GUIDE_MODIFIERS.md)
6
-
7
- ### Higher Order Components
8
-
9
- `Ember-sortable` can now be built using [higher order components](https://v4.chriskrycho.com/2018/higher-order-components-in-emberjs.html)
10
-
11
- 1. The array of models are now yielded out by `sortable-group`
12
-
13
- **V1**
14
-
15
- ```hbs
16
- {{#sortable-group onChange=(action "reorderItems") as |group|}}
17
- {{#each model.items as |item|}}
18
- ```
19
-
20
- **V2**
21
-
22
- ```hbs
23
- {{#sortable-group model=model.items onChange=(action "reorderItems") as |group|}}
24
- {{#each group.model as |item|}}
25
- ```
26
-
27
- 2. Each `item` can be represented by the yielded `sortable-item` instead of directly using `sortable-item` and passing the `group` manually.
28
-
29
- **V1**
30
-
31
- ```hbs
32
- {{#sortable-group onChange=(action 'reorderItems') as |group|}}
33
- {{#each model.items as |item|}}
34
- {{#sortable-item model=item group=group handle='.handle'}}
35
- {{item.name}}
36
- <span class='handle'>&varr;</span>
37
- {{/sortable-item}}
38
- {{/each}}
39
- {{/sortable-group}}
40
- ```
41
-
42
- **V2**
43
-
44
- ```hbs
45
- {{#sortable-group model=model.items onChange=(action 'reorderItems') as |group|}}
46
- {{#each group.model as |item|}}
47
- {{#group.item model=item}}
48
- ...
49
- {{/group.item}}
50
- {{/each}}
51
- {{/sortable-group}}
52
- ```
53
-
54
- 3. It is recommended to use the yielded `sortable-handle` instead of referencing `handle` by `class`, as it guarantees accessibility support.
55
-
56
- **V1**
57
-
58
- ```hbs
59
- {{#sortable-group onChange=(action 'reorderItems') as |group|}}
60
- {{#each model.items as |item|}}
61
- {{#sortable-item model=item group=group handle='.handle'}}
62
- {{item.name}}
63
- <span class='handle'>&varr;</span>
64
- {{/sortable-item}}
65
- {{/each}}
66
- {{/sortable-group}}
67
- ```
68
-
69
- **V2**
70
-
71
- ```hbs
72
- {{#sortable-group model=model.items onChange=(action "reorderItems") as |group|}}
73
- {{#each group.model as |modelItem|}}
74
- {{#group.item model=item as|item|}}
75
- {{modelItem.name}}
76
- {{#item.handle}}
77
- <span class="handle">&varr;</span>
78
- {{/item.handle}}
79
- {{/group.item}}
80
- {{/each}}
81
- {{/sortable-group}}
82
- ```
83
-
84
- 4. `groupModel` is still supported via `groupModel` instead of `model`
85
-
86
- **V1**
87
-
88
- ```hbs
89
- {{#sortable-group model=model onChange=(action "reorderItems") as |group|}}
90
- {{#each model.items as |item|}}
91
- ...
92
- {{/sortable-group}}
93
- ```
94
-
95
- **V2**
96
-
97
- ```hbs
98
- {{#sortable-group groupModel=model model=model.items onChange=(action "reorderItems") as |group|}}
99
- {{#each group.model as |item|}}
100
- ...
101
- {{/sortable-group}}
102
- ```
103
-
104
- ### Modifiers
105
-
106
- ### Accessibility support
107
-
108
- 1. Keyboard navigation is built into `ember-sortable`.
109
- 2. `a11yItemName`, `a11yAnnouncementConfig`, `itemVisualClass`, `handleVisualClass` can be supplied to enhance the accessibility experience.
110
- 3. Refer to [Accessibility Section](/README.md#Accessibility) for more details.
111
-
112
- ```hbs
113
- {{#sortable-group a11yAnnouncementConfig=a11yAnnouncementConfig a11yItemName="spanish number" itemVisualClass=itemVisualClass handleVisualClass=handleVisualClass onChange=(action "update") model=model.items as |group|}}
114
- ```
115
-
116
- ### Testing
117
-
118
- 1. The `drag` and `reorder` test helpers are no longer global `async` helpers. They are now importable.
119
-
120
- Refer to [Testing Section](/README.md#Testing) for more details.
@@ -1,24 +0,0 @@
1
- demo:
2
- @echo ""
3
- @echo "===> Checking out gh-pages"
4
- @echo ""
5
- git checkout gh-pages
6
- git reset --hard master
7
- @echo ""
8
- @echo "===> Building demo"
9
- @echo ""
10
- ember build -e production -o demo
11
- @echo ""
12
- @echo "===> Committing demo"
13
- @echo ""
14
- git add demo
15
- git commit -m "Build demo" --no-verify
16
- @echo ""
17
- @echo "===> Pushing gh-pages"
18
- @echo ""
19
- git push origin gh-pages -f --no-verify
20
- @echo ""
21
- @echo "===> Cleaning up"
22
- @echo ""
23
- git checkout master
24
- rm -rf demo
@@ -1,423 +0,0 @@
1
- # ember-sortable
2
-
3
- [![npm version](https://badge.fury.io/js/ember-sortable.svg)](http://badge.fury.io/js/ember-sortable)
4
- [![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)
5
- [![Downloads Weekly](https://img.shields.io/npm/dw/ember-sortable)](http://badge.fury.io/js/ember-sortable)
6
- [![Ember Observer Score](http://emberobserver.com/badges/ember-sortable.svg)](http://emberobserver.com/addons/ember-sortable)
7
- [![Code Climate](https://codeclimate.com/github/jgwhite/ember-sortable/badges/gpa.svg)](https://codeclimate.com/github/jgwhite/ember-sortable)
8
-
9
- Sortable UI primitives for Ember.
10
-
11
- ![ember-sortable in action](/demo.gif)
12
-
13
- [Check out the demo](https://adopted-ember-addons.github.io/ember-sortable/demo/)
14
-
15
- ## Requirements
16
-
17
- In version 3.0.0+, Node.js v12 or above And Ember.js v3.24 or above
18
-
19
- ## Installation
20
-
21
- ```sh
22
- $ ember install ember-sortable
23
- ```
24
-
25
- ## Usage
26
-
27
- ```hbs
28
- {{! app/components/my-list/template.hbs }}
29
-
30
- <ol {{sortable-group onChange=this.reorderItems}}>
31
- {{#each this.items as |item|}}
32
- <li {{sortable-item model=item}}>
33
- {{item}}
34
- <span class='handle' {{sortable-handle}}>&varr;</span>
35
- </li>
36
- {{/each}}
37
- </ol>
38
-
39
- <p>The last dragged item was: {{this.lastDragged}}</p>
40
- ```
41
-
42
- The `onChange` action is called with two arguments:
43
-
44
- - Your item models in their new order
45
- - The model you just dragged
46
-
47
- ```js
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'];
53
-
54
- @action
55
- reorderItems(itemModels, draggedModel) {
56
- this.items = itemModels;
57
- this.lastDragged = draggedModel;
58
- }
59
- }
60
- ```
61
-
62
- The modifier version does not support `groupModel`, use the currying of `action` or the `fn` helper.
63
-
64
- ```hbs
65
- {{! app/components/my-list/template.hbs }}
66
-
67
- <ol {{sortable-group onChange=(fn this.reorderItems model)}}>
68
- {{#each this.items as |item|}}
69
- <li {{sortable-item model=item}}>
70
- {{item}}
71
- <span class='handle' {{sortable-handle}}>&varr;</span>
72
- </li>
73
- {{/each}}
74
- </ol>
75
- ```
76
-
77
- ### Changing sort direction
78
-
79
- To change sort direction, define `direction` on `sortable-group` (default is `y`):
80
-
81
- ```hbs
82
- <ol {{sortable-group direction="x" onChange=(action "reorderItems")}>
83
- ```
84
-
85
- ### Changing spacing between currently dragged element and the rest of the group
86
-
87
- When user starts to drag element, other elements jump back. Works both for the `x` and `y` direction option.
88
-
89
- In `y` case: elements above current one jump up, and elements below current one - jump down.
90
- In `x` case: elements before current one jump to the left, and elements after current one - jump to the right.
91
-
92
- To change this property, define `spacing` on `sortable-item` (default is `0`):
93
-
94
- ```hbs
95
- <li {{sortable-item spacing=15}}>
96
- ```
97
-
98
- ### Changing the drag tolerance
99
-
100
- `distance` attribute changes the tolerance, in pixels, for when sorting should start.
101
- If specified, sorting will not start until after mouse is dragged beyond distance.
102
- Can be used to allow for clicks on elements within a handle.
103
-
104
- ```hbs
105
- <li {{sortable-item distance=30}}>
106
- ```
107
-
108
- ### Disabling reordering
109
-
110
- The `disabled` attribute allows you to disable sorting for the entire group and its child items.
111
-
112
- ```hbs
113
- <li {{sortable-group disabled=true}}>
114
- ```
115
-
116
- ### CSS, Animation
117
-
118
- Sortable items can be in one of four states: default, dragging, dropping, and activated.
119
- The classes look like this:
120
-
121
- ```html
122
- <!-- Default -->
123
- <li class="sortable-item">...</li>
124
- <!-- Dragging -->
125
- <li class="sortable-item is-dragging">...</li>
126
- <!-- Dropping -->
127
- <li class="sortable-item is-dropping">...</li>
128
- <!-- Keyboard -->
129
- <li class="sortable-item is-activated">...</li>
130
- ```
131
-
132
- In our [example app.css](tests/dummy/app/styles/app.css) we apply a
133
- transition of `.125s` in the default case:
134
-
135
- ```css
136
- .sortable-item {
137
- transition: all 0.125s;
138
- }
139
- ```
140
-
141
- While an item is dragging we want it to move pixel-for-pixel with the
142
- user’s mouse so we bring the transition duration to 0. We also give
143
- it a highlight color and bring it to the top of the stack:
144
-
145
- ```css
146
- .sortable-item.is-dragging {
147
- transition-duration: 0s;
148
- background: red;
149
- z-index: 10;
150
- }
151
- ```
152
-
153
- While dropping, the `is-dragging` class is removed and the item returns to its default transition duration. If we wanted to apply a
154
- different duration we could do so with the `is-dropping` class. In
155
- our example we opt to simply maintain the z-index and apply a
156
- slightly different colour:
157
-
158
- ```css
159
- .sortable-item.is-dropping {
160
- background: #f66;
161
- z-index: 10;
162
- }
163
- ```
164
-
165
- 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
166
- removed. Use this class to add a visual indicator that the item is selected and being manipulated.
167
-
168
- ### Drag Actions
169
-
170
- The `onDragStart` and `onDragStop` actions are available for the
171
- `sortable-item`s. You can provide an action name to listen to these actions to
172
- be notified when an item is being dragged or not.
173
-
174
- When the action is called, the item's model will be provided as the only
175
- argument.
176
-
177
- ```js
178
- // app/components/my-list/component.js
179
-
180
- export default class MyRoute extends Route {
181
- @action
182
- dragStarted(item) {
183
- console.log(`Item started dragging: ${item}`);
184
- },
185
- @action
186
- dragStopped(item) {
187
- console.log(`Item stopped dragging: ${item}`);
188
- }
189
- }
190
- ```
191
-
192
- ```hbs
193
- <li {{sortable-item onDragStart=this.dragStarted onDragStop=this.dragStopped model=item}}>
194
- {{item}}
195
- <span class='handle' {{sortable-handle}}>&varr;</span>
196
- </li>
197
- ```
198
-
199
- ### Multiple Ember-Sortables renders simultaneously
200
-
201
- There is 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.
202
-
203
- Both the `{{sortable-group}}` and `{{sortable-item}}` take an additional argument `groupName`. Should you encounter this conflict, assign a `groupName` to the group and items. You only need to do this for one of the sortables in conflict, but you can on both if you wish.
204
-
205
- ```hbs
206
- <ol {{sortable-group groupName='products' onChange=this.reorderItems}}>
207
- {{#each this.items as |item|}}
208
- <li {{sortable-item groupName='products' model=item}}>
209
- {{item}}
210
- <span class='handle' {{sortable-handle}}>&varr;</span>
211
- </li>
212
- {{/each}}
213
- </ol>
214
- ```
215
-
216
- Ensure that the same name is passed to both the group and the items, this would be best accomplished by creating property on the component and referring to that property. If you are able to use the `{{#let}}` helper (useful in template only components), using `{{#let}}` makes the usage clearer.
217
-
218
- ```hbs
219
- {{#let 'products' as |myGroupName|}}
220
- <ol {{sortable-group groupName=myGroupName onChange=this.reorderItems}}>
221
- {{#each this.items as |item|}}
222
- <li {{sortable-item groupName=myGroupName model=item}}>
223
- {{item}}
224
- <span class='handle' {{sortable-handle}}>&varr;</span>
225
- </li>
226
- {{/each}}
227
- </ol>
228
- {{/let}}
229
- ```
230
-
231
- ### Disabling Drag (Experimental)
232
-
233
- `sortable-item` 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.
234
-
235
- This flag is intended as an utility to make your life easier with 3 main benefits:
236
-
237
- 1. You can now specify which `sortable-item` are not intended to be draggable/sortable.
238
- 2. You do not have to duplicate the `sortable-item` UI just for the purpose of disabling the `sorting` behavior.
239
- 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.
240
-
241
- ### Data down, actions up
242
-
243
- 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.
244
-
245
- 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`.
246
-
247
- ### Accessibility
248
-
249
- The `sortable-group` has support for the following accessibility functionality:
250
-
251
- #### Built-in Functionalities
252
-
253
- ##### Keyboard Navigation
254
-
255
- There are 4 modes during keyboard navigation:
256
-
257
- - **ACTIVATE**
258
- enables the keyboard navigation.
259
- Activate via `ENTER/SPACE`
260
- - **MOVE**
261
- enables item(s) to be moved up, down, left, or right based on `direction`.
262
- Activate via `ARROW UP/DOWN/LEFT/RIGHT`
263
- - **CONFIRM**
264
- submits the new sort order, invokes the `onChange` action.
265
- Activate via `ENTER/SPACE`.
266
- - **CANCEL**
267
- cancels the new sort order, reverts back to the old sort order.
268
- Activate via `ESCAPE` or when `focus` is lost.
269
-
270
- ##### Focus Management
271
-
272
- - When `focus` is on a `item` or `handle`, user can effectively select the `item` via `ENTER/SPACE`. This is the `ACTIVATE` mode.
273
- - While `ACTIVATE`, the `focus` is locked on `sortable-group` container and will not be lost until `CONFIRM`, `CANCEL`, or `focus` is lost.
274
-
275
- #### User configurable
276
-
277
- ##### Screen Reader
278
-
279
- The default language for `ember-sortable` is English. Any language can be supported by passing in the configuration below in the appropriate language.
280
-
281
- - **a11yItemName**
282
- a name for the item. Defaults to `item`.
283
- - **a11yAnnouncementConfig**
284
- a map of `action enums` to `functions` that takes the following `config`, which is exposed by `sortable-group`.
285
-
286
- ```javascript
287
- a11yAnnounceConfig = {
288
- a11yItemName, // name associated with the name
289
- index, // 0-based
290
- maxLength, // length of the items
291
- direction, // x or y
292
- delta, // +1 means down or right, -1 means up or left
293
- };
294
- ```
295
-
296
- and returns a `string` constructed from the `config`.
297
-
298
- **Default value**
299
-
300
- ```javascript
301
- {
302
- ACTIVATE: function({ a11yItemName, index, maxLength, direction }) {
303
- let message = `${a11yItemName} at position, ${index + 1} of ${maxLength}, is activated to be repositioned.`;
304
- if (direction === 'y') {
305
- message += 'Press up and down keys to change position,';
306
- } else {
307
- message += 'Press left and right keys to change position,';
308
- }
309
-
310
- message += ' Space to confirm new position, Escape to cancel.';
311
-
312
- return message;
313
- },
314
- MOVE: function({ a11yItemName, index, maxLength, delta }) {
315
- return `${a11yItemName} is moved to position, ${index + 1 + delta} of ${maxLength}. Press Space to confirm new position, Escape to cancel.`;
316
- },
317
- CONFIRM: function({ a11yItemName}) {
318
- return `${a11yItemName} is successfully repositioned.`;
319
- },
320
- CANCEL: function({ a11yItemName }) {
321
- return `Cancelling ${a11yItemName} repositioning`;
322
- }
323
- }
324
- ```
325
-
326
- ##### Visual Indicator
327
-
328
- - **handleVisualClass**
329
- 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.
330
-
331
- - **itemVisualClass**
332
- 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.
333
-
334
- ## Testing
335
-
336
- `ember-sortable` exposes some acceptance test helpers:
337
-
338
- - [`drag`][drag]: Drags elements by an offset specified in pixels.
339
- - [`reorder`][reorder]: Reorders elements to the specified state.
340
- - [`keyboard`][keyboard]: Keycode constants for quick.
341
-
342
- [drag]: addon-test-support/helpers/drag.js
343
- [reorder]: addon-test-support/helpers/reorder.js
344
- [keyboard]: addon-test-support/utils/kebyoard.js
345
-
346
- To include them in your application, you can import them:
347
-
348
- ```js
349
- import { drag, reorder } from 'ember-sortable/test-support/helpers';
350
- import {
351
- ENTER_KEY_CODE,
352
- SPACE_KEY_CODE,
353
- ESCAPE_KEY_CODE,
354
- ARROW_KEY_CODES,
355
- } from 'ember-sortable/test-support/utils/keyboard';
356
- ```
357
-
358
- ### Examples
359
-
360
- `Reorder`
361
-
362
- ```js
363
- await reorder('mouse', '[data-test-vertical-demo-handle]', ...order);
364
- ```
365
-
366
- `Drag`
367
-
368
- ```js
369
- await drag('mouse', '[data-test-scrollable-demo-handle] .handle', () => {
370
- return { dy: itemHeight() * 2 + 1, dx: undefined };
371
- });
372
- ```
373
-
374
- `Keyboard`
375
-
376
- ```js
377
- await triggerKeyEvent('[data-test-vertical-demo-handle]', 'keydown', ENTER_KEY_CODE);
378
- ```
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
- ## Developing
398
-
399
- ### Setup
400
-
401
- ```sh
402
- $ git clone git@github.com:adopted-ember-addons/ember-sortable
403
- $ cd ember-sortable
404
- $ ember install
405
- ```
406
-
407
- ### Dev Server
408
-
409
- ```sh
410
- $ ember serve
411
- ```
412
-
413
- ### Running Tests
414
-
415
- ```sh
416
- $ npm test
417
- ```
418
-
419
- ### Publishing Demo
420
-
421
- ```sh
422
- $ make demo
423
- ```