uikit 3.11.2-dev.19d26d0f9 → 3.11.2-dev.21a5b7139

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 (167) hide show
  1. package/.eslintrc.json +4 -49
  2. package/.prettierignore +14 -0
  3. package/.prettierrc.json +13 -0
  4. package/.webstorm.js +3 -3
  5. package/CHANGELOG.md +16 -1
  6. package/build/.eslintrc.json +1 -3
  7. package/build/build.js +26 -28
  8. package/build/icons.js +7 -11
  9. package/build/less.js +48 -36
  10. package/build/package.json +2 -2
  11. package/build/prefix.js +21 -18
  12. package/build/publishDev.js +6 -8
  13. package/build/release.js +20 -17
  14. package/build/scope.js +21 -11
  15. package/build/scss.js +72 -39
  16. package/build/util.js +71 -62
  17. package/build/wrapper/icons.js +0 -2
  18. package/dist/css/uikit-core-rtl.css +42 -17
  19. package/dist/css/uikit-core-rtl.min.css +1 -1
  20. package/dist/css/uikit-core.css +42 -17
  21. package/dist/css/uikit-core.min.css +1 -1
  22. package/dist/css/uikit-rtl.css +42 -17
  23. package/dist/css/uikit-rtl.min.css +1 -1
  24. package/dist/css/uikit.css +42 -17
  25. package/dist/css/uikit.min.css +1 -1
  26. package/dist/js/components/countdown.js +88 -133
  27. package/dist/js/components/countdown.min.js +1 -1
  28. package/dist/js/components/filter.js +410 -437
  29. package/dist/js/components/filter.min.js +1 -1
  30. package/dist/js/components/lightbox-panel.js +1116 -1305
  31. package/dist/js/components/lightbox-panel.min.js +1 -1
  32. package/dist/js/components/lightbox.js +1164 -1383
  33. package/dist/js/components/lightbox.min.js +1 -1
  34. package/dist/js/components/notification.js +94 -114
  35. package/dist/js/components/notification.min.js +1 -1
  36. package/dist/js/components/parallax.js +294 -345
  37. package/dist/js/components/parallax.min.js +1 -1
  38. package/dist/js/components/slider-parallax.js +292 -344
  39. package/dist/js/components/slider-parallax.min.js +1 -1
  40. package/dist/js/components/slider.js +724 -846
  41. package/dist/js/components/slider.min.js +1 -1
  42. package/dist/js/components/slideshow-parallax.js +292 -344
  43. package/dist/js/components/slideshow-parallax.min.js +1 -1
  44. package/dist/js/components/slideshow.js +615 -799
  45. package/dist/js/components/slideshow.min.js +1 -1
  46. package/dist/js/components/sortable.js +587 -616
  47. package/dist/js/components/sortable.min.js +1 -1
  48. package/dist/js/components/tooltip.js +324 -356
  49. package/dist/js/components/tooltip.min.js +1 -1
  50. package/dist/js/components/upload.js +153 -161
  51. package/dist/js/components/upload.min.js +1 -1
  52. package/dist/js/uikit-core.js +5293 -6602
  53. package/dist/js/uikit-core.min.js +1 -1
  54. package/dist/js/uikit-icons.js +7 -9
  55. package/dist/js/uikit-icons.min.js +1 -1
  56. package/dist/js/uikit.js +8114 -9862
  57. package/dist/js/uikit.min.js +1 -1
  58. package/jsconfig.json +1 -1
  59. package/package.json +64 -60
  60. package/src/js/api/boot.js +25 -32
  61. package/src/js/api/component.js +23 -27
  62. package/src/js/api/global.js +6 -12
  63. package/src/js/api/hooks.js +13 -32
  64. package/src/js/api/instance.js +7 -15
  65. package/src/js/api/state.js +80 -101
  66. package/src/js/components/countdown.js +23 -49
  67. package/src/js/components/filter.js +71 -66
  68. package/src/js/components/index.js +13 -13
  69. package/src/js/components/internal/lightbox-animations.js +11 -23
  70. package/src/js/components/internal/slider-transitioner.js +65 -44
  71. package/src/js/components/internal/slideshow-animations.js +42 -61
  72. package/src/js/components/lightbox-panel.js +135 -109
  73. package/src/js/components/lightbox.js +17 -38
  74. package/src/js/components/notification.js +49 -43
  75. package/src/js/components/parallax.js +16 -30
  76. package/src/js/components/slider-parallax.js +13 -23
  77. package/src/js/components/slider.js +73 -61
  78. package/src/js/components/slideshow-parallax.js +1 -1
  79. package/src/js/components/slideshow.js +8 -13
  80. package/src/js/components/sortable.js +121 -102
  81. package/src/js/components/tooltip.js +41 -31
  82. package/src/js/components/upload.js +46 -53
  83. package/src/js/core/accordion.js +54 -49
  84. package/src/js/core/alert.js +10 -17
  85. package/src/js/core/core.js +74 -53
  86. package/src/js/core/cover.js +11 -15
  87. package/src/js/core/drop.js +107 -93
  88. package/src/js/core/form-custom.js +20 -25
  89. package/src/js/core/gif.js +3 -7
  90. package/src/js/core/grid.js +57 -58
  91. package/src/js/core/height-match.js +15 -28
  92. package/src/js/core/height-viewport.js +28 -35
  93. package/src/js/core/icon.js +38 -50
  94. package/src/js/core/img.js +57 -58
  95. package/src/js/core/index.js +39 -39
  96. package/src/js/core/leader.js +9 -18
  97. package/src/js/core/margin.js +10 -24
  98. package/src/js/core/modal.js +50 -36
  99. package/src/js/core/nav.js +2 -4
  100. package/src/js/core/navbar.js +112 -84
  101. package/src/js/core/offcanvas.js +49 -53
  102. package/src/js/core/overflow-auto.js +13 -17
  103. package/src/js/core/responsive.js +14 -12
  104. package/src/js/core/scroll.js +10 -20
  105. package/src/js/core/scrollspy-nav.js +34 -31
  106. package/src/js/core/scrollspy.js +34 -51
  107. package/src/js/core/sticky.js +151 -93
  108. package/src/js/core/svg.js +60 -79
  109. package/src/js/core/switcher.js +47 -46
  110. package/src/js/core/tab.js +7 -10
  111. package/src/js/core/toggle.js +63 -65
  112. package/src/js/core/video.js +11 -22
  113. package/src/js/mixin/animate.js +19 -20
  114. package/src/js/mixin/class.js +2 -4
  115. package/src/js/mixin/container.js +7 -11
  116. package/src/js/mixin/internal/animate-fade.js +73 -30
  117. package/src/js/mixin/internal/animate-slide.js +61 -41
  118. package/src/js/mixin/internal/slideshow-animations.js +7 -14
  119. package/src/js/mixin/internal/slideshow-transitioner.js +10 -17
  120. package/src/js/mixin/media.js +5 -10
  121. package/src/js/mixin/modal.js +89 -66
  122. package/src/js/mixin/parallax.js +53 -48
  123. package/src/js/mixin/position.js +26 -20
  124. package/src/js/mixin/slider-autoplay.js +12 -21
  125. package/src/js/mixin/slider-drag.js +62 -63
  126. package/src/js/mixin/slider-nav.js +25 -34
  127. package/src/js/mixin/slider-reactive.js +2 -8
  128. package/src/js/mixin/slider.js +51 -50
  129. package/src/js/mixin/slideshow.js +13 -19
  130. package/src/js/mixin/togglable.js +90 -63
  131. package/src/js/uikit-core.js +2 -4
  132. package/src/js/uikit.js +2 -4
  133. package/src/js/util/ajax.js +27 -43
  134. package/src/js/util/animation.js +82 -75
  135. package/src/js/util/attr.js +6 -12
  136. package/src/js/util/class.js +14 -52
  137. package/src/js/util/dimensions.js +56 -43
  138. package/src/js/util/dom.js +36 -54
  139. package/src/js/util/env.js +7 -12
  140. package/src/js/util/event.js +60 -59
  141. package/src/js/util/fastdom.js +1 -6
  142. package/src/js/util/filter.js +17 -34
  143. package/src/js/util/index.js +0 -1
  144. package/src/js/util/lang.js +79 -119
  145. package/src/js/util/mouse.js +19 -17
  146. package/src/js/util/options.js +44 -49
  147. package/src/js/util/player.js +40 -36
  148. package/src/js/util/position.js +53 -45
  149. package/src/js/util/promise.js +0 -191
  150. package/src/js/util/selector.js +39 -48
  151. package/src/js/util/style.js +36 -46
  152. package/src/js/util/viewport.js +75 -64
  153. package/src/less/components/flex.less +0 -9
  154. package/src/less/components/navbar.less +0 -7
  155. package/src/less/components/utility.less +22 -0
  156. package/src/scss/components/flex.scss +0 -9
  157. package/src/scss/components/form.scss +3 -3
  158. package/src/scss/components/icon.scss +2 -2
  159. package/src/scss/components/navbar.scss +0 -7
  160. package/src/scss/components/search.scss +1 -1
  161. package/src/scss/components/utility.scss +22 -0
  162. package/src/scss/variables-theme.scss +6 -6
  163. package/src/scss/variables.scss +6 -6
  164. package/tests/js/index.js +114 -85
  165. package/tests/sticky-parallax.html +44 -41
  166. package/tests/sticky.html +20 -3
  167. package/src/js/mixin/flex-bug.js +0 -56
@@ -1,4 +1,4 @@
1
- /*! UIkit 3.11.2-dev.19d26d0f9 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
1
+ /*! UIkit 3.11.2-dev.21a5b7139 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
2
2
 
3
3
  (function (global, factory) {
4
4
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('uikit-util')) :
@@ -7,810 +7,781 @@
7
7
  })(this, (function (uikitUtil) { 'use strict';
8
8
 
9
9
  function getRows(items) {
10
- return sortBy(items, 'top', 'bottom');
10
+ return sortBy(items, 'top', 'bottom');
11
11
  }
12
12
 
13
13
  function sortBy(items, startProp, endProp) {
14
+ const sorted = [[]];
14
15
 
15
- var sorted = [[]];
16
+ for (let i = 0; i < items.length; i++) {
17
+ const el = items[i];
16
18
 
17
- for (var i = 0; i < items.length; i++) {
18
-
19
- var el = items[i];
20
-
21
- if (!uikitUtil.isVisible(el)) {
22
- continue;
23
- }
24
-
25
- var dim = getOffset(el);
26
-
27
- for (var j = sorted.length - 1; j >= 0; j--) {
28
-
29
- var current = sorted[j];
30
-
31
- if (!current[0]) {
32
- current.push(el);
33
- break;
34
- }
35
-
36
- var startDim = (void 0);
37
- if (current[0].offsetParent === el.offsetParent) {
38
- startDim = getOffset(current[0]);
39
- } else {
40
- dim = getOffset(el, true);
41
- startDim = getOffset(current[0], true);
42
- }
19
+ if (!uikitUtil.isVisible(el)) {
20
+ continue;
21
+ }
43
22
 
44
- if (dim[startProp] >= startDim[endProp] - 1 && dim[startProp] !== startDim[startProp]) {
45
- sorted.push([el]);
46
- break;
47
- }
23
+ let dim = getOffset(el);
24
+
25
+ for (let j = sorted.length - 1; j >= 0; j--) {
26
+ const current = sorted[j];
27
+
28
+ if (!current[0]) {
29
+ current.push(el);
30
+ break;
31
+ }
32
+
33
+ let startDim;
34
+ if (current[0].offsetParent === el.offsetParent) {
35
+ startDim = getOffset(current[0]);
36
+ } else {
37
+ dim = getOffset(el, true);
38
+ startDim = getOffset(current[0], true);
39
+ }
40
+
41
+ if (dim[startProp] >= startDim[endProp] - 1 && dim[startProp] !== startDim[startProp]) {
42
+ sorted.push([el]);
43
+ break;
44
+ }
45
+
46
+ if (dim[endProp] - 1 > startDim[startProp] || dim[startProp] === startDim[startProp]) {
47
+ current.push(el);
48
+ break;
49
+ }
50
+
51
+ if (j === 0) {
52
+ sorted.unshift([el]);
53
+ break;
54
+ }
55
+ }
56
+ }
48
57
 
49
- if (dim[endProp] - 1 > startDim[startProp] || dim[startProp] === startDim[startProp]) {
50
- current.push(el);
51
- break;
52
- }
58
+ return sorted;
59
+ }
53
60
 
54
- if (j === 0) {
55
- sorted.unshift([el]);
56
- break;
57
- }
61
+ function getOffset(element, offset) {if (offset === void 0) {offset = false;}
62
+ let { offsetTop, offsetLeft, offsetHeight, offsetWidth } = element;
58
63
 
59
- }
64
+ if (offset) {
65
+ [offsetTop, offsetLeft] = uikitUtil.offsetPosition(element);
66
+ }
60
67
 
61
- }
68
+ return {
69
+ top: offsetTop,
70
+ left: offsetLeft,
71
+ bottom: offsetTop + offsetHeight,
72
+ right: offsetLeft + offsetWidth };
62
73
 
63
- return sorted;
64
74
  }
65
75
 
66
- function getOffset(element, offset) {
67
- var assign;
76
+ const clsLeave = 'uk-transition-leave';
77
+ const clsEnter = 'uk-transition-enter';
68
78
 
69
- if ( offset === void 0 ) offset = false;
79
+ function fade(action, target, duration, stagger) {if (stagger === void 0) {stagger = 0;}
80
+ const index = transitionIndex(target, true);
81
+ const propsIn = { opacity: 1 };
82
+ const propsOut = { opacity: 0 };
70
83
 
71
- var offsetTop = element.offsetTop;
72
- var offsetLeft = element.offsetLeft;
73
- var offsetHeight = element.offsetHeight;
74
- var offsetWidth = element.offsetWidth;
84
+ const wrapIndexFn = (fn) => () => index === transitionIndex(target) ? fn() : Promise.reject();
75
85
 
76
- if (offset) {
77
- (assign = uikitUtil.offsetPosition(element), offsetTop = assign[0], offsetLeft = assign[1]);
78
- }
86
+ const leaveFn = wrapIndexFn(() => {
87
+ uikitUtil.addClass(target, clsLeave);
79
88
 
80
- return {
81
- top: offsetTop,
82
- left: offsetLeft,
83
- bottom: offsetTop + offsetHeight,
84
- right: offsetLeft + offsetWidth
85
- };
86
- }
89
+ return Promise.all(
90
+ getTransitionNodes(target).map(
91
+ (child, i) =>
92
+ new Promise((resolve) =>
93
+ setTimeout(
94
+ () =>
95
+ uikitUtil.Transition.start(child, propsOut, duration / 2, 'ease').then(
96
+ resolve),
87
97
 
88
- var clsLeave = 'uk-transition-leave';
89
- var clsEnter = 'uk-transition-enter';
98
+ i * stagger)))).
90
99
 
91
- function fade(action, target, duration, stagger) {
92
- if ( stagger === void 0 ) stagger = 0;
93
100
 
94
101
 
95
- var index = transitionIndex(target, true);
96
- var propsIn = {opacity: 1};
97
- var propsOut = {opacity: 0};
102
+ then(() => uikitUtil.removeClass(target, clsLeave));
103
+ });
98
104
 
99
- var wrapIndexFn = function (fn) { return function () { return index === transitionIndex(target) ? fn() : uikitUtil.Promise.reject(); }; };
105
+ const enterFn = wrapIndexFn(() => {
106
+ const oldHeight = uikitUtil.height(target);
100
107
 
101
- var leaveFn = wrapIndexFn(function () {
108
+ uikitUtil.addClass(target, clsEnter);
109
+ action();
102
110
 
103
- uikitUtil.addClass(target, clsLeave);
111
+ uikitUtil.css(uikitUtil.children(target), { opacity: 0 });
104
112
 
105
- return uikitUtil.Promise.all(getTransitionNodes(target).map(function (child, i) { return new uikitUtil.Promise(function (resolve) { return setTimeout(function () { return uikitUtil.Transition.start(child, propsOut, duration / 2, 'ease').then(resolve); }, i * stagger); }
106
- ); }
107
- )).then(function () { return uikitUtil.removeClass(target, clsLeave); });
113
+ // Ensure UIkit updates have propagated
114
+ return new Promise((resolve) =>
115
+ requestAnimationFrame(() => {
116
+ const nodes = uikitUtil.children(target);
117
+ const newHeight = uikitUtil.height(target);
108
118
 
109
- });
119
+ // Ensure Grid cells do not stretch when height is applied
120
+ uikitUtil.css(target, 'alignContent', 'flex-start');
121
+ uikitUtil.height(target, oldHeight);
110
122
 
111
- var enterFn = wrapIndexFn(function () {
123
+ const transitionNodes = getTransitionNodes(target);
124
+ uikitUtil.css(nodes, propsOut);
112
125
 
113
- var oldHeight = uikitUtil.height(target);
126
+ const transitions = transitionNodes.map(
127
+ (child, i) =>
128
+ new Promise((resolve) =>
129
+ setTimeout(
130
+ () =>
131
+ uikitUtil.Transition.start(child, propsIn, duration / 2, 'ease').then(
132
+ resolve),
114
133
 
115
- uikitUtil.addClass(target, clsEnter);
116
- action();
134
+ i * stagger)));
117
135
 
118
- uikitUtil.css(uikitUtil.children(target), {opacity: 0});
119
136
 
120
- // Ensure UIkit updates have propagated
121
- return new uikitUtil.Promise(function (resolve) { return requestAnimationFrame(function () {
122
137
 
123
- var nodes = uikitUtil.children(target);
124
- var newHeight = uikitUtil.height(target);
125
138
 
126
- // Ensure Grid cells do not stretch when height is applied
127
- uikitUtil.css(target, 'alignContent', 'flex-start');
128
- uikitUtil.height(target, oldHeight);
139
+ if (oldHeight !== newHeight) {
140
+ transitions.push(
141
+ uikitUtil.Transition.start(
142
+ target,
143
+ { height: newHeight },
144
+ duration / 2 + transitionNodes.length * stagger,
145
+ 'ease'));
129
146
 
130
- var transitionNodes = getTransitionNodes(target);
131
- uikitUtil.css(nodes, propsOut);
132
147
 
133
- var transitions = transitionNodes.map(function (child, i) { return new uikitUtil.Promise(function (resolve) { return setTimeout(function () { return uikitUtil.Transition.start(child, propsIn, duration / 2, 'ease').then(resolve); }, i * stagger); }
134
- ); }
135
- );
148
+ }
136
149
 
137
- if (oldHeight !== newHeight) {
138
- transitions.push(uikitUtil.Transition.start(target, {height: newHeight}, duration / 2 + transitionNodes.length * stagger, 'ease'));
139
- }
150
+ Promise.all(transitions).then(() => {
151
+ uikitUtil.removeClass(target, clsEnter);
152
+ if (index === transitionIndex(target)) {
153
+ uikitUtil.css(target, { height: '', alignContent: '' });
154
+ uikitUtil.css(nodes, { opacity: '' });
155
+ delete target.dataset.transition;
156
+ }
157
+ resolve();
158
+ });
159
+ }));
140
160
 
141
- uikitUtil.Promise.all(transitions).then(function () {
142
- uikitUtil.removeClass(target, clsEnter);
143
- if (index === transitionIndex(target)) {
144
- uikitUtil.css(target, {height: '', alignContent: ''});
145
- uikitUtil.css(nodes, {opacity: ''});
146
- delete target.dataset.transition;
147
- }
148
- resolve();
149
- });
150
- }); }
151
- );
152
- });
161
+ });
153
162
 
154
- return uikitUtil.hasClass(target, clsLeave)
155
- ? waitTransitionend(target).then(enterFn)
156
- : uikitUtil.hasClass(target, clsEnter)
157
- ? waitTransitionend(target).then(leaveFn).then(enterFn)
158
- : leaveFn().then(enterFn);
163
+ return uikitUtil.hasClass(target, clsLeave) ?
164
+ waitTransitionend(target).then(enterFn) :
165
+ uikitUtil.hasClass(target, clsEnter) ?
166
+ waitTransitionend(target).then(leaveFn).then(enterFn) :
167
+ leaveFn().then(enterFn);
159
168
  }
160
169
 
161
170
  function transitionIndex(target, next) {
162
- if (next) {
163
- target.dataset.transition = 1 + transitionIndex(target);
164
- }
171
+ if (next) {
172
+ target.dataset.transition = 1 + transitionIndex(target);
173
+ }
165
174
 
166
- return uikitUtil.toNumber(target.dataset.transition) || 0;
175
+ return uikitUtil.toNumber(target.dataset.transition) || 0;
167
176
  }
168
177
 
169
178
  function waitTransitionend(target) {
170
- return uikitUtil.Promise.all(uikitUtil.children(target).filter(uikitUtil.Transition.inProgress).map(function (el) { return new uikitUtil.Promise(function (resolve) { return uikitUtil.once(el, 'transitionend transitioncanceled', resolve); }); }
171
- ));
172
- }
173
-
174
- function getTransitionNodes(target) {
175
- return getRows(uikitUtil.children(target)).reduce(function (nodes, row) { return nodes.concat(uikitUtil.sortBy(row.filter(function (el) { return uikitUtil.isInView(el); }), 'offsetLeft')); }, []);
176
- }
177
-
178
- function slide (action, target, duration) {
179
-
180
- return new uikitUtil.Promise(function (resolve) { return requestAnimationFrame(function () {
179
+ return Promise.all(
180
+ uikitUtil.children(target).
181
+ filter(uikitUtil.Transition.inProgress).
182
+ map(
183
+ (el) =>
184
+ new Promise((resolve) => uikitUtil.once(el, 'transitionend transitioncanceled', resolve))));
181
185
 
182
- var nodes = uikitUtil.children(target);
183
186
 
184
- // Get current state
185
- var currentProps = nodes.map(function (el) { return getProps(el, true); });
186
- var targetProps = uikitUtil.css(target, ['height', 'padding']);
187
-
188
- // Cancel previous animations
189
- uikitUtil.Transition.cancel(target);
190
- nodes.forEach(uikitUtil.Transition.cancel);
191
- reset(target);
192
-
193
- // Adding, sorting, removing nodes
194
- action();
195
-
196
- // Find new nodes
197
- nodes = nodes.concat(uikitUtil.children(target).filter(function (el) { return !uikitUtil.includes(nodes, el); }));
198
-
199
- // Wait for update to propagate
200
- uikitUtil.Promise.resolve().then(function () {
201
-
202
- // Force update
203
- uikitUtil.fastdom.flush();
187
+ }
204
188
 
205
- // Get new state
206
- var targetPropsTo = uikitUtil.css(target, ['height', 'padding']);
207
- var ref = getTransitionProps(target, nodes, currentProps);
208
- var propsTo = ref[0];
209
- var propsFrom = ref[1];
189
+ function getTransitionNodes(target) {
190
+ return getRows(uikitUtil.children(target)).reduce(
191
+ (nodes, row) =>
192
+ nodes.concat(
193
+ uikitUtil.sortBy(
194
+ row.filter((el) => uikitUtil.isInView(el)),
195
+ 'offsetLeft')),
210
196
 
211
- // Reset to previous state
212
- nodes.forEach(function (el, i) { return propsFrom[i] && uikitUtil.css(el, propsFrom[i]); });
213
- uikitUtil.css(target, uikitUtil.assign({display: 'block'}, targetProps));
214
197
 
215
- // Start transitions on next frame
216
- requestAnimationFrame(function () {
198
+ []);
217
199
 
218
- var transitions = nodes.map(function (el, i) { return uikitUtil.parent(el) === target && uikitUtil.Transition.start(el, propsTo[i], duration, 'ease'); }
219
- ).concat(uikitUtil.Transition.start(target, targetPropsTo, duration, 'ease'));
200
+ }
220
201
 
221
- uikitUtil.Promise.all(transitions).then(function () {
222
- nodes.forEach(function (el, i) { return uikitUtil.parent(el) === target && uikitUtil.css(el, 'display', propsTo[i].opacity === 0 ? 'none' : ''); });
223
- reset(target);
224
- }, uikitUtil.noop).then(resolve);
202
+ function slide (action, target, duration) {
203
+ return new Promise((resolve) =>
204
+ requestAnimationFrame(() => {
205
+ let nodes = uikitUtil.children(target);
206
+
207
+ // Get current state
208
+ const currentProps = nodes.map((el) => getProps(el, true));
209
+ const targetProps = uikitUtil.css(target, ['height', 'padding']);
210
+
211
+ // Cancel previous animations
212
+ uikitUtil.Transition.cancel(target);
213
+ nodes.forEach(uikitUtil.Transition.cancel);
214
+ reset(target);
215
+
216
+ // Adding, sorting, removing nodes
217
+ action();
218
+
219
+ // Find new nodes
220
+ nodes = nodes.concat(uikitUtil.children(target).filter((el) => !uikitUtil.includes(nodes, el)));
221
+
222
+ // Wait for update to propagate
223
+ Promise.resolve().then(() => {
224
+ // Force update
225
+ uikitUtil.fastdom.flush();
226
+
227
+ // Get new state
228
+ const targetPropsTo = uikitUtil.css(target, ['height', 'padding']);
229
+ const [propsTo, propsFrom] = getTransitionProps(target, nodes, currentProps);
230
+
231
+ // Reset to previous state
232
+ nodes.forEach((el, i) => propsFrom[i] && uikitUtil.css(el, propsFrom[i]));
233
+ uikitUtil.css(target, uikitUtil.assign({ display: 'block' }, targetProps));
234
+
235
+ // Start transitions on next frame
236
+ requestAnimationFrame(() => {
237
+ const transitions = nodes.
238
+ map(
239
+ (el, i) =>
240
+ uikitUtil.parent(el) === target &&
241
+ uikitUtil.Transition.start(el, propsTo[i], duration, 'ease')).
242
+
243
+ concat(uikitUtil.Transition.start(target, targetPropsTo, duration, 'ease'));
244
+
245
+ Promise.all(transitions).
246
+ then(() => {
247
+ nodes.forEach(
248
+ (el, i) =>
249
+ uikitUtil.parent(el) === target &&
250
+ uikitUtil.css(el, 'display', propsTo[i].opacity === 0 ? 'none' : ''));
251
+
252
+ reset(target);
253
+ }, uikitUtil.noop).
254
+ then(resolve);
255
+ });
256
+ });
257
+ }));
225
258
 
226
- });
227
- });
228
- }); });
229
259
  }
230
260
 
231
261
  function getProps(el, opacity) {
262
+ const zIndex = uikitUtil.css(el, 'zIndex');
263
+
264
+ return uikitUtil.isVisible(el) ?
265
+ uikitUtil.assign(
266
+ {
267
+ display: '',
268
+ opacity: opacity ? uikitUtil.css(el, 'opacity') : '0',
269
+ pointerEvents: 'none',
270
+ position: 'absolute',
271
+ zIndex: zIndex === 'auto' ? uikitUtil.index(el) : zIndex },
232
272
 
233
- var zIndex = uikitUtil.css(el, 'zIndex');
234
-
235
- return uikitUtil.isVisible(el)
236
- ? uikitUtil.assign({
237
- display: '',
238
- opacity: opacity ? uikitUtil.css(el, 'opacity') : '0',
239
- pointerEvents: 'none',
240
- position: 'absolute',
241
- zIndex: zIndex === 'auto' ? uikitUtil.index(el) : zIndex
242
- }, getPositionWithMargin(el))
243
- : false;
273
+ getPositionWithMargin(el)) :
274
+
275
+ false;
244
276
  }
245
277
 
246
278
  function getTransitionProps(target, nodes, currentProps) {
279
+ const propsTo = nodes.map((el, i) =>
280
+ uikitUtil.parent(el) && i in currentProps ?
281
+ currentProps[i] ?
282
+ uikitUtil.isVisible(el) ?
283
+ getPositionWithMargin(el) :
284
+ { opacity: 0 } :
285
+ { opacity: uikitUtil.isVisible(el) ? 1 : 0 } :
286
+ false);
247
287
 
248
- var propsTo = nodes.map(function (el, i) { return uikitUtil.parent(el) && i in currentProps
249
- ? currentProps[i]
250
- ? uikitUtil.isVisible(el)
251
- ? getPositionWithMargin(el)
252
- : {opacity: 0}
253
- : {opacity: uikitUtil.isVisible(el) ? 1 : 0}
254
- : false; });
255
288
 
256
- var propsFrom = propsTo.map(function (props, i) {
289
+ const propsFrom = propsTo.map((props, i) => {
290
+ const from = uikitUtil.parent(nodes[i]) === target && (currentProps[i] || getProps(nodes[i]));
257
291
 
258
- var from = uikitUtil.parent(nodes[i]) === target && (currentProps[i] || getProps(nodes[i]));
292
+ if (!from) {
293
+ return false;
294
+ }
259
295
 
260
- if (!from) {
261
- return false;
262
- }
296
+ if (!props) {
297
+ delete from.opacity;
298
+ } else if (!('opacity' in props)) {
299
+ const { opacity } = from;
263
300
 
264
- if (!props) {
265
- delete from.opacity;
266
- } else if (!('opacity' in props)) {
267
- var opacity = from.opacity;
301
+ if (opacity % 1) {
302
+ props.opacity = 1;
303
+ } else {
304
+ delete from.opacity;
305
+ }
306
+ }
268
307
 
269
- if (opacity % 1) {
270
- props.opacity = 1;
271
- } else {
272
- delete from.opacity;
273
- }
274
- }
308
+ return from;
309
+ });
275
310
 
276
- return from;
277
- });
278
-
279
- return [propsTo, propsFrom];
311
+ return [propsTo, propsFrom];
280
312
  }
281
313
 
282
314
  function reset(el) {
283
- uikitUtil.css(el.children, {
284
- height: '',
285
- left: '',
286
- opacity: '',
287
- pointerEvents: '',
288
- position: '',
289
- top: '',
290
- marginTop: '',
291
- marginLeft: '',
292
- transform: '',
293
- width: '',
294
- zIndex: ''
295
- });
296
- uikitUtil.css(el, {height: '', display: '', padding: ''});
315
+ uikitUtil.css(el.children, {
316
+ height: '',
317
+ left: '',
318
+ opacity: '',
319
+ pointerEvents: '',
320
+ position: '',
321
+ top: '',
322
+ marginTop: '',
323
+ marginLeft: '',
324
+ transform: '',
325
+ width: '',
326
+ zIndex: '' });
327
+
328
+ uikitUtil.css(el, { height: '', display: '', padding: '' });
297
329
  }
298
330
 
299
331
  function getPositionWithMargin(el) {
300
- var ref = uikitUtil.offset(el);
301
- var height = ref.height;
302
- var width = ref.width;
303
- var ref$1 = uikitUtil.position(el);
304
- var top = ref$1.top;
305
- var left = ref$1.left;
306
- var ref$2 = uikitUtil.css(el, ['marginTop', 'marginLeft']);
307
- var marginLeft = ref$2.marginLeft;
308
- var marginTop = ref$2.marginTop;
309
-
310
- return {top: top, left: left, height: height, width: width, marginLeft: marginLeft, marginTop: marginTop, transform: ''};
332
+ const { height, width } = uikitUtil.offset(el);
333
+ const { top, left } = uikitUtil.position(el);
334
+ const { marginLeft, marginTop } = uikitUtil.css(el, ['marginTop', 'marginLeft']);
335
+
336
+ return { top, left, height, width, marginLeft, marginTop, transform: '' };
311
337
  }
312
338
 
313
339
  var Animate = {
340
+ props: {
341
+ duration: Number,
342
+ animation: Boolean },
343
+
344
+
345
+ data: {
346
+ duration: 150,
347
+ animation: 'slide' },
348
+
349
+
350
+ methods: {
351
+ animate(action, target) {if (target === void 0) {target = this.$el;}
352
+ const name = this.animation;
353
+ const animationFn =
354
+ name === 'fade' ?
355
+ fade :
356
+ name === 'delayed-fade' ?
357
+ function () {for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}return fade(...args, 40);} :
358
+ name ?
359
+ slide :
360
+ () => {
361
+ action();
362
+ return Promise.resolve();
363
+ };
314
364
 
315
- props: {
316
- duration: Number,
317
- animation: Boolean
318
- },
319
-
320
- data: {
321
- duration: 150,
322
- animation: 'slide'
323
- },
324
-
325
- methods: {
326
-
327
- animate: function(action, target) {
328
- var this$1$1 = this;
329
- if ( target === void 0 ) target = this.$el;
330
-
331
-
332
- var name = this.animation;
333
- var animationFn = name === 'fade'
334
- ? fade
335
- : name === 'delayed-fade'
336
- ? function () {
337
- var args = [], len = arguments.length;
338
- while ( len-- ) args[ len ] = arguments[ len ];
339
-
340
- return fade.apply(void 0, args.concat( [40] ));
341
- }
342
- : name
343
- ? slide
344
- : function () {
345
- action();
346
- return uikitUtil.Promise.resolve();
347
- };
365
+ return animationFn(action, target, this.duration).then(
366
+ () => this.$update(target, 'resize'),
367
+ uikitUtil.noop);
348
368
 
349
- return animationFn(action, target, this.duration)
350
- .then(function () { return this$1$1.$update(target, 'resize'); }, uikitUtil.noop);
351
- }
352
-
353
- }
354
- };
369
+ } } };
355
370
 
356
371
  var Class = {
357
-
358
- connected: function() {
359
- !uikitUtil.hasClass(this.$el, this.$name) && uikitUtil.addClass(this.$el, this.$name);
360
- }
361
-
362
- };
372
+ connected() {
373
+ !uikitUtil.hasClass(this.$el, this.$name) && uikitUtil.addClass(this.$el, this.$name);
374
+ } };
363
375
 
364
376
  var Component = {
377
+ mixins: [Class, Animate],
378
+
379
+ props: {
380
+ group: String,
381
+ threshold: Number,
382
+ clsItem: String,
383
+ clsPlaceholder: String,
384
+ clsDrag: String,
385
+ clsDragState: String,
386
+ clsBase: String,
387
+ clsNoDrag: String,
388
+ clsEmpty: String,
389
+ clsCustom: String,
390
+ handle: String },
391
+
392
+
393
+ data: {
394
+ group: false,
395
+ threshold: 5,
396
+ clsItem: 'uk-sortable-item',
397
+ clsPlaceholder: 'uk-sortable-placeholder',
398
+ clsDrag: 'uk-sortable-drag',
399
+ clsDragState: 'uk-drag',
400
+ clsBase: 'uk-sortable',
401
+ clsNoDrag: 'uk-sortable-nodrag',
402
+ clsEmpty: 'uk-sortable-empty',
403
+ clsCustom: '',
404
+ handle: false,
405
+ pos: {} },
406
+
407
+
408
+ created() {
409
+ ['init', 'start', 'move', 'end'].forEach((key) => {
410
+ const fn = this[key];
411
+ this[key] = (e) => {
412
+ uikitUtil.assign(this.pos, uikitUtil.getEventPos(e));
413
+ fn(e);
414
+ };
415
+ });
416
+ },
365
417
 
366
- mixins: [Class, Animate],
367
-
368
- props: {
369
- group: String,
370
- threshold: Number,
371
- clsItem: String,
372
- clsPlaceholder: String,
373
- clsDrag: String,
374
- clsDragState: String,
375
- clsBase: String,
376
- clsNoDrag: String,
377
- clsEmpty: String,
378
- clsCustom: String,
379
- handle: String
380
- },
381
-
382
- data: {
383
- group: false,
384
- threshold: 5,
385
- clsItem: 'uk-sortable-item',
386
- clsPlaceholder: 'uk-sortable-placeholder',
387
- clsDrag: 'uk-sortable-drag',
388
- clsDragState: 'uk-drag',
389
- clsBase: 'uk-sortable',
390
- clsNoDrag: 'uk-sortable-nodrag',
391
- clsEmpty: 'uk-sortable-empty',
392
- clsCustom: '',
393
- handle: false,
394
- pos: {}
395
- },
418
+ events: {
419
+ name: uikitUtil.pointerDown,
420
+ passive: false,
421
+ handler: 'init' },
396
422
 
397
- created: function() {
398
- var this$1$1 = this;
399
423
 
400
- ['init', 'start', 'move', 'end'].forEach(function (key) {
401
- var fn = this$1$1[key];
402
- this$1$1[key] = function (e) {
403
- uikitUtil.assign(this$1$1.pos, uikitUtil.getEventPos(e));
404
- fn(e);
405
- };
406
- });
424
+ computed: {
425
+ target() {
426
+ return (this.$el.tBodies || [this.$el])[0];
407
427
  },
408
428
 
409
- events: {
410
-
411
- name: uikitUtil.pointerDown,
412
- passive: false,
413
- handler: 'init'
414
-
429
+ items() {
430
+ return uikitUtil.children(this.target);
415
431
  },
416
432
 
417
- computed: {
418
-
419
- target: function() {
420
- return (this.$el.tBodies || [this.$el])[0];
421
- },
433
+ isEmpty: {
434
+ get() {
435
+ return uikitUtil.isEmpty(this.items);
436
+ },
422
437
 
423
- items: function() {
424
- return uikitUtil.children(this.target);
425
- },
438
+ watch(empty) {
439
+ uikitUtil.toggleClass(this.target, this.clsEmpty, empty);
440
+ },
426
441
 
427
- isEmpty: {
442
+ immediate: true },
428
443
 
429
- get: function() {
430
- return uikitUtil.isEmpty(this.items);
431
- },
432
444
 
433
- watch: function(empty) {
434
- uikitUtil.toggleClass(this.target, this.clsEmpty, empty);
435
- },
445
+ handles: {
446
+ get(_ref, el) {let { handle } = _ref;
447
+ return handle ? uikitUtil.$$(handle, el) : this.items;
448
+ },
436
449
 
437
- immediate: true
450
+ watch(handles, prev) {
451
+ uikitUtil.css(prev, { touchAction: '', userSelect: '' });
452
+ uikitUtil.css(handles, { touchAction: uikitUtil.hasTouch ? 'none' : '', userSelect: 'none' }); // touchAction set to 'none' causes a performance drop in Chrome 80
453
+ },
438
454
 
439
- },
455
+ immediate: true } },
440
456
 
441
- handles: {
442
457
 
443
- get: function(ref, el) {
444
- var handle = ref.handle;
445
458
 
446
- return handle ? uikitUtil.$$(handle, el) : this.items;
447
- },
448
-
449
- watch: function(handles, prev) {
450
- uikitUtil.css(prev, {touchAction: '', userSelect: ''});
451
- uikitUtil.css(handles, {touchAction: uikitUtil.hasTouch ? 'none' : '', userSelect: 'none'}); // touchAction set to 'none' causes a performance drop in Chrome 80
452
- },
453
-
454
- immediate: true
455
-
456
- }
457
-
458
- },
459
-
460
- update: {
461
-
462
- write: function(data) {
463
-
464
- if (!this.drag || !uikitUtil.parent(this.placeholder)) {
465
- return;
466
- }
459
+ update: {
460
+ write(data) {
461
+ if (!this.drag || !uikitUtil.parent(this.placeholder)) {
462
+ return;
463
+ }
467
464
 
468
- var ref = this;
469
- var ref_pos = ref.pos;
470
- var x = ref_pos.x;
471
- var y = ref_pos.y;
472
- var ref_origin = ref.origin;
473
- var offsetTop = ref_origin.offsetTop;
474
- var offsetLeft = ref_origin.offsetLeft;
475
- var placeholder = ref.placeholder;
465
+ const {
466
+ pos: { x, y },
467
+ origin: { offsetTop, offsetLeft },
468
+ placeholder } =
469
+ this;
476
470
 
477
- uikitUtil.css(this.drag, {
478
- top: y - offsetTop,
479
- left: x - offsetLeft
480
- });
471
+ uikitUtil.css(this.drag, {
472
+ top: y - offsetTop,
473
+ left: x - offsetLeft });
481
474
 
482
- var sortable = this.getSortable(document.elementFromPoint(x, y));
483
475
 
484
- if (!sortable) {
485
- return;
486
- }
476
+ const sortable = this.getSortable(document.elementFromPoint(x, y));
487
477
 
488
- var items = sortable.items;
478
+ if (!sortable) {
479
+ return;
480
+ }
489
481
 
490
- if (items.some(uikitUtil.Transition.inProgress)) {
491
- return;
492
- }
482
+ const { items } = sortable;
493
483
 
494
- var target = findTarget(items, {x: x, y: y});
484
+ if (items.some(uikitUtil.Transition.inProgress)) {
485
+ return;
486
+ }
495
487
 
496
- if (items.length && (!target || target === placeholder)) {
497
- return;
498
- }
488
+ const target = findTarget(items, { x, y });
499
489
 
500
- var previous = this.getSortable(placeholder);
501
- var insertTarget = findInsertTarget(sortable.target, target, placeholder, x, y, sortable === previous && data.moved !== target);
490
+ if (items.length && (!target || target === placeholder)) {
491
+ return;
492
+ }
502
493
 
503
- if (insertTarget === false) {
504
- return;
505
- }
494
+ const previous = this.getSortable(placeholder);
495
+ const insertTarget = findInsertTarget(
496
+ sortable.target,
497
+ target,
498
+ placeholder,
499
+ x,
500
+ y,
501
+ sortable === previous && data.moved !== target);
506
502
 
507
- if (insertTarget && placeholder === insertTarget) {
508
- return;
509
- }
510
503
 
511
- if (sortable !== previous) {
512
- previous.remove(placeholder);
513
- data.moved = target;
514
- } else {
515
- delete data.moved;
516
- }
504
+ if (insertTarget === false) {
505
+ return;
506
+ }
517
507
 
518
- sortable.insert(placeholder, insertTarget);
508
+ if (insertTarget && placeholder === insertTarget) {
509
+ return;
510
+ }
519
511
 
520
- this.touched.add(sortable);
521
- },
512
+ if (sortable !== previous) {
513
+ previous.remove(placeholder);
514
+ data.moved = target;
515
+ } else {
516
+ delete data.moved;
517
+ }
522
518
 
523
- events: ['move']
519
+ sortable.insert(placeholder, insertTarget);
524
520
 
521
+ this.touched.add(sortable);
525
522
  },
526
523
 
527
- methods: {
528
-
529
- init: function(e) {
530
-
531
- var target = e.target;
532
- var button = e.button;
533
- var defaultPrevented = e.defaultPrevented;
534
- var ref = this.items.filter(function (el) { return uikitUtil.within(target, el); });
535
- var placeholder = ref[0];
524
+ events: ['move'] },
536
525
 
537
- if (!placeholder
538
- || defaultPrevented
539
- || button > 0
540
- || uikitUtil.isInput(target)
541
- || uikitUtil.within(target, ("." + (this.clsNoDrag)))
542
- || this.handle && !uikitUtil.within(target, this.handle)
543
- ) {
544
- return;
545
- }
546
526
 
547
- e.preventDefault();
527
+ methods: {
528
+ init(e) {
529
+ const { target, button, defaultPrevented } = e;
530
+ const [placeholder] = this.items.filter((el) => uikitUtil.within(target, el));
548
531
 
549
- this.touched = new Set([this]);
550
- this.placeholder = placeholder;
551
- this.origin = uikitUtil.assign({target: target, index: uikitUtil.index(placeholder)}, this.pos);
552
-
553
- uikitUtil.on(document, uikitUtil.pointerMove, this.move);
554
- uikitUtil.on(document, uikitUtil.pointerUp, this.end);
555
-
556
- if (!this.threshold) {
557
- this.start(e);
558
- }
559
-
560
- },
561
-
562
- start: function(e) {
563
-
564
- this.drag = appendDrag(this.$container, this.placeholder);
565
- var ref = this.placeholder.getBoundingClientRect();
566
- var left = ref.left;
567
- var top = ref.top;
568
- uikitUtil.assign(this.origin, {offsetLeft: this.pos.x - left, offsetTop: this.pos.y - top});
569
-
570
- uikitUtil.addClass(this.drag, this.clsDrag, this.clsCustom);
571
- uikitUtil.addClass(this.placeholder, this.clsPlaceholder);
572
- uikitUtil.addClass(this.items, this.clsItem);
573
- uikitUtil.addClass(document.documentElement, this.clsDragState);
574
-
575
- uikitUtil.trigger(this.$el, 'start', [this, this.placeholder]);
576
-
577
- trackScroll(this.pos);
578
-
579
- this.move(e);
580
- },
532
+ if (
533
+ !placeholder ||
534
+ defaultPrevented ||
535
+ button > 0 ||
536
+ uikitUtil.isInput(target) ||
537
+ uikitUtil.within(target, "." + this.clsNoDrag) ||
538
+ this.handle && !uikitUtil.within(target, this.handle))
539
+ {
540
+ return;
541
+ }
581
542
 
582
- move: function(e) {
543
+ e.preventDefault();
583
544
 
584
- if (this.drag) {
585
- this.$emit('move');
586
- } else if (Math.abs(this.pos.x - this.origin.x) > this.threshold || Math.abs(this.pos.y - this.origin.y) > this.threshold) {
587
- this.start(e);
588
- }
545
+ this.touched = new Set([this]);
546
+ this.placeholder = placeholder;
547
+ this.origin = uikitUtil.assign({ target, index: uikitUtil.index(placeholder) }, this.pos);
589
548
 
590
- },
549
+ uikitUtil.on(document, uikitUtil.pointerMove, this.move);
550
+ uikitUtil.on(document, uikitUtil.pointerUp, this.end);
591
551
 
592
- end: function() {
593
- var this$1$1 = this;
552
+ if (!this.threshold) {
553
+ this.start(e);
554
+ }
555
+ },
594
556
 
557
+ start(e) {
558
+ this.drag = appendDrag(this.$container, this.placeholder);
559
+ const { left, top } = this.placeholder.getBoundingClientRect();
560
+ uikitUtil.assign(this.origin, { offsetLeft: this.pos.x - left, offsetTop: this.pos.y - top });
595
561
 
596
- uikitUtil.off(document, uikitUtil.pointerMove, this.move);
597
- uikitUtil.off(document, uikitUtil.pointerUp, this.end);
562
+ uikitUtil.addClass(this.drag, this.clsDrag, this.clsCustom);
563
+ uikitUtil.addClass(this.placeholder, this.clsPlaceholder);
564
+ uikitUtil.addClass(this.items, this.clsItem);
565
+ uikitUtil.addClass(document.documentElement, this.clsDragState);
598
566
 
599
- if (!this.drag) {
600
- return;
601
- }
567
+ uikitUtil.trigger(this.$el, 'start', [this, this.placeholder]);
602
568
 
603
- untrackScroll();
569
+ trackScroll(this.pos);
604
570
 
605
- var sortable = this.getSortable(this.placeholder);
571
+ this.move(e);
572
+ },
606
573
 
607
- if (this === sortable) {
608
- if (this.origin.index !== uikitUtil.index(this.placeholder)) {
609
- uikitUtil.trigger(this.$el, 'moved', [this, this.placeholder]);
610
- }
611
- } else {
612
- uikitUtil.trigger(sortable.$el, 'added', [sortable, this.placeholder]);
613
- uikitUtil.trigger(this.$el, 'removed', [this, this.placeholder]);
614
- }
574
+ move(e) {
575
+ if (this.drag) {
576
+ this.$emit('move');
577
+ } else if (
578
+ Math.abs(this.pos.x - this.origin.x) > this.threshold ||
579
+ Math.abs(this.pos.y - this.origin.y) > this.threshold)
580
+ {
581
+ this.start(e);
582
+ }
583
+ },
615
584
 
616
- uikitUtil.trigger(this.$el, 'stop', [this, this.placeholder]);
585
+ end() {
586
+ uikitUtil.off(document, uikitUtil.pointerMove, this.move);
587
+ uikitUtil.off(document, uikitUtil.pointerUp, this.end);
617
588
 
618
- uikitUtil.remove(this.drag);
619
- this.drag = null;
589
+ if (!this.drag) {
590
+ return;
591
+ }
620
592
 
621
- this.touched.forEach(function (ref) {
622
- var clsPlaceholder = ref.clsPlaceholder;
623
- var clsItem = ref.clsItem;
593
+ untrackScroll();
624
594
 
625
- return this$1$1.touched.forEach(function (sortable) { return uikitUtil.removeClass(sortable.items, clsPlaceholder, clsItem); }
626
- );
627
- }
628
- );
629
- this.touched = null;
630
- uikitUtil.removeClass(document.documentElement, this.clsDragState);
595
+ const sortable = this.getSortable(this.placeholder);
631
596
 
632
- },
597
+ if (this === sortable) {
598
+ if (this.origin.index !== uikitUtil.index(this.placeholder)) {
599
+ uikitUtil.trigger(this.$el, 'moved', [this, this.placeholder]);
600
+ }
601
+ } else {
602
+ uikitUtil.trigger(sortable.$el, 'added', [sortable, this.placeholder]);
603
+ uikitUtil.trigger(this.$el, 'removed', [this, this.placeholder]);
604
+ }
633
605
 
634
- insert: function(element, target) {
635
- var this$1$1 = this;
606
+ uikitUtil.trigger(this.$el, 'stop', [this, this.placeholder]);
636
607
 
608
+ uikitUtil.remove(this.drag);
609
+ this.drag = null;
637
610
 
638
- uikitUtil.addClass(this.items, this.clsItem);
611
+ this.touched.forEach((_ref2) => {let { clsPlaceholder, clsItem } = _ref2;return (
612
+ this.touched.forEach((sortable) =>
613
+ uikitUtil.removeClass(sortable.items, clsPlaceholder, clsItem)));});
639
614
 
640
- var insert = function () { return target
641
- ? uikitUtil.before(target, element)
642
- : uikitUtil.append(this$1$1.target, element); };
643
615
 
644
- this.animate(insert);
616
+ this.touched = null;
617
+ uikitUtil.removeClass(document.documentElement, this.clsDragState);
618
+ },
645
619
 
646
- },
620
+ insert(element, target) {
621
+ uikitUtil.addClass(this.items, this.clsItem);
647
622
 
648
- remove: function(element) {
623
+ const insert = () => target ? uikitUtil.before(target, element) : uikitUtil.append(this.target, element);
649
624
 
650
- if (!uikitUtil.within(element, this.target)) {
651
- return;
652
- }
625
+ this.animate(insert);
626
+ },
653
627
 
654
- this.animate(function () { return uikitUtil.remove(element); });
628
+ remove(element) {
629
+ if (!uikitUtil.within(element, this.target)) {
630
+ return;
631
+ }
655
632
 
656
- },
633
+ this.animate(() => uikitUtil.remove(element));
634
+ },
657
635
 
658
- getSortable: function(element) {
659
- do {
660
- var sortable = this.$getComponent(element, 'sortable');
636
+ getSortable(element) {
637
+ do {
638
+ const sortable = this.$getComponent(element, 'sortable');
661
639
 
662
- if (sortable && (sortable === this || this.group !== false && sortable.group === this.group)) {
663
- return sortable;
664
- }
665
- } while ((element = uikitUtil.parent(element)));
640
+ if (
641
+ sortable && (
642
+ sortable === this || this.group !== false && sortable.group === this.group))
643
+ {
644
+ return sortable;
666
645
  }
646
+ } while (element = uikitUtil.parent(element));
647
+ } } };
667
648
 
668
- }
669
649
 
670
- };
671
650
 
672
- var trackTimer;
651
+ let trackTimer;
673
652
  function trackScroll(pos) {
653
+ let last = Date.now();
654
+ trackTimer = setInterval(() => {
655
+ let { x, y } = pos;
656
+ y += uikitUtil.scrollTop(window);
657
+
658
+ const dist = (Date.now() - last) * 0.3;
659
+ last = Date.now();
660
+
661
+ uikitUtil.scrollParents(document.elementFromPoint(x, pos.y), /auto|scroll/).
662
+ reverse().
663
+ some((scrollEl) => {
664
+ let { scrollTop: scroll, scrollHeight } = scrollEl;
665
+
666
+ const { top, bottom, height } = uikitUtil.offset(uikitUtil.getViewport(scrollEl));
667
+
668
+ if (top < y && top + 35 > y) {
669
+ scroll -= dist;
670
+ } else if (bottom > y && bottom - 35 < y) {
671
+ scroll += dist;
672
+ } else {
673
+ return;
674
+ }
674
675
 
675
- var last = Date.now();
676
- trackTimer = setInterval(function () {
677
-
678
- var x = pos.x;
679
- var y = pos.y;
680
- y += uikitUtil.scrollTop(window);
681
-
682
- var dist = (Date.now() - last) * .3;
683
- last = Date.now();
684
-
685
- uikitUtil.scrollParents(document.elementFromPoint(x, pos.y), /auto|scroll/).reverse().some(function (scrollEl) {
686
-
687
- var scroll = scrollEl.scrollTop;
688
- var scrollHeight = scrollEl.scrollHeight;
689
-
690
- var ref = uikitUtil.offset(uikitUtil.getViewport(scrollEl));
691
- var top = ref.top;
692
- var bottom = ref.bottom;
693
- var height = ref.height;
694
-
695
- if (top < y && top + 35 > y) {
696
- scroll -= dist;
697
- } else if (bottom > y && bottom - 35 < y) {
698
- scroll += dist;
699
- } else {
700
- return;
701
- }
702
-
703
- if (scroll > 0 && scroll < scrollHeight - height) {
704
- uikitUtil.scrollTop(scrollEl, scroll);
705
- return true;
706
- }
707
-
708
- });
709
-
710
- }, 15);
711
-
676
+ if (scroll > 0 && scroll < scrollHeight - height) {
677
+ uikitUtil.scrollTop(scrollEl, scroll);
678
+ return true;
679
+ }
680
+ });
681
+ }, 15);
712
682
  }
713
683
 
714
684
  function untrackScroll() {
715
- clearInterval(trackTimer);
685
+ clearInterval(trackTimer);
716
686
  }
717
687
 
718
688
  function appendDrag(container, element) {
719
- var clone = uikitUtil.append(container, element.outerHTML.replace(/(^<)(?:li|tr)|(?:li|tr)(\/>$)/g, '$1div$2'));
689
+ const clone = uikitUtil.append(
690
+ container,
691
+ element.outerHTML.replace(/(^<)(?:li|tr)|(?:li|tr)(\/>$)/g, '$1div$2'));
692
+
693
+
694
+ uikitUtil.css(clone, 'margin', '0', 'important');
695
+ uikitUtil.css(clone, {
696
+ boxSizing: 'border-box',
697
+ width: element.offsetWidth,
698
+ height: element.offsetHeight,
699
+ padding: uikitUtil.css(element, 'padding') });
720
700
 
721
- uikitUtil.css(clone, 'margin', '0', 'important');
722
- uikitUtil.css(clone, uikitUtil.assign({
723
- boxSizing: 'border-box',
724
- width: element.offsetWidth,
725
- height: element.offsetHeight
726
- }, uikitUtil.css(element, ['paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom'])));
727
701
 
728
- uikitUtil.height(clone.firstElementChild, uikitUtil.height(element.firstElementChild));
702
+ uikitUtil.height(clone.firstElementChild, uikitUtil.height(element.firstElementChild));
729
703
 
730
- return clone;
704
+ return clone;
731
705
  }
732
706
 
733
707
  function findTarget(items, point) {
734
- return items[uikitUtil.findIndex(items, function (item) { return uikitUtil.pointInRect(point, item.getBoundingClientRect()); })];
708
+ return items[uikitUtil.findIndex(items, (item) => uikitUtil.pointInRect(point, item.getBoundingClientRect()))];
735
709
  }
736
710
 
737
711
  function findInsertTarget(list, target, placeholder, x, y, sameList) {
738
-
739
- if (!uikitUtil.children(list).length) {
740
- return;
712
+ if (!uikitUtil.children(list).length) {
713
+ return;
714
+ }
715
+
716
+ const rect = target.getBoundingClientRect();
717
+ if (!sameList) {
718
+ if (!isHorizontal(list, placeholder)) {
719
+ return y < rect.top + rect.height / 2 ? target : target.nextElementSibling;
741
720
  }
742
721
 
743
- var rect = target.getBoundingClientRect();
744
- if (!sameList) {
745
-
746
- if (!isHorizontal(list, placeholder)) {
747
- return y < rect.top + rect.height / 2
748
- ? target
749
- : target.nextElementSibling;
750
- }
751
-
752
- return target;
753
- }
754
-
755
- var placeholderRect = placeholder.getBoundingClientRect();
756
- var sameRow = linesIntersect(
757
- [rect.top, rect.bottom],
758
- [placeholderRect.top, placeholderRect.bottom]
759
- );
722
+ return target;
723
+ }
760
724
 
761
- var pointerPos = sameRow ? x : y;
762
- var lengthProp = sameRow ? 'width' : 'height';
763
- var startProp = sameRow ? 'left' : 'top';
764
- var endProp = sameRow ? 'right' : 'bottom';
725
+ const placeholderRect = placeholder.getBoundingClientRect();
726
+ const sameRow = linesIntersect(
727
+ [rect.top, rect.bottom],
728
+ [placeholderRect.top, placeholderRect.bottom]);
765
729
 
766
- var diff = placeholderRect[lengthProp] < rect[lengthProp] ? rect[lengthProp] - placeholderRect[lengthProp] : 0;
767
730
 
768
- if (placeholderRect[startProp] < rect[startProp]) {
731
+ const pointerPos = sameRow ? x : y;
732
+ const lengthProp = sameRow ? 'width' : 'height';
733
+ const startProp = sameRow ? 'left' : 'top';
734
+ const endProp = sameRow ? 'right' : 'bottom';
769
735
 
770
- if (diff && pointerPos < rect[startProp] + diff) {
771
- return false;
772
- }
736
+ const diff =
737
+ placeholderRect[lengthProp] < rect[lengthProp] ?
738
+ rect[lengthProp] - placeholderRect[lengthProp] :
739
+ 0;
773
740
 
774
- return target.nextElementSibling;
741
+ if (placeholderRect[startProp] < rect[startProp]) {
742
+ if (diff && pointerPos < rect[startProp] + diff) {
743
+ return false;
775
744
  }
776
745
 
777
- if (diff && pointerPos > rect[endProp] - diff) {
778
- return false;
779
- }
746
+ return target.nextElementSibling;
747
+ }
780
748
 
781
- return target;
749
+ if (diff && pointerPos > rect[endProp] - diff) {
750
+ return false;
751
+ }
752
+
753
+ return target;
782
754
  }
783
755
 
784
756
  function isHorizontal(list, placeholder) {
785
-
786
- var single = uikitUtil.children(list).length === 1;
787
-
788
- if (single) {
789
- uikitUtil.append(list, placeholder);
790
- }
791
-
792
- var items = uikitUtil.children(list);
793
- var isHorizontal = items.some(function (el, i) {
794
- var rectA = el.getBoundingClientRect();
795
- return items.slice(i + 1).some(function (el) {
796
- var rectB = el.getBoundingClientRect();
797
- return !linesIntersect([rectA.left, rectA.right], [rectB.left, rectB.right]);
798
- });
757
+ const single = uikitUtil.children(list).length === 1;
758
+
759
+ if (single) {
760
+ uikitUtil.append(list, placeholder);
761
+ }
762
+
763
+ const items = uikitUtil.children(list);
764
+ const isHorizontal = items.some((el, i) => {
765
+ const rectA = el.getBoundingClientRect();
766
+ return items.slice(i + 1).some((el) => {
767
+ const rectB = el.getBoundingClientRect();
768
+ return !linesIntersect([rectA.left, rectA.right], [rectB.left, rectB.right]);
799
769
  });
770
+ });
800
771
 
801
- if (single) {
802
- uikitUtil.remove(placeholder);
803
- }
772
+ if (single) {
773
+ uikitUtil.remove(placeholder);
774
+ }
804
775
 
805
- return isHorizontal;
776
+ return isHorizontal;
806
777
  }
807
778
 
808
779
  function linesIntersect(lineA, lineB) {
809
- return lineA[1] > lineB[0] && lineB[1] > lineA[0];
780
+ return lineA[1] > lineB[0] && lineB[1] > lineA[0];
810
781
  }
811
782
 
812
783
  if (typeof window !== 'undefined' && window.UIkit) {
813
- window.UIkit.component('sortable', Component);
784
+ window.UIkit.component('sortable', Component);
814
785
  }
815
786
 
816
787
  return Component;