uikit 3.11.2-dev.c2430c233 → 3.11.2-dev.c7ed3c19b

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