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,589 +7,562 @@
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
- }
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))));
177
185
 
178
- function slide (action, target, duration) {
179
186
 
180
- return new uikitUtil.Promise(function (resolve) { return requestAnimationFrame(function () {
181
-
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();
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');
232
263
 
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;
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 },
272
+
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
-
256
- var propsFrom = propsTo.map(function (props, i) {
257
288
 
258
- var from = uikitUtil.parent(nodes[i]) === target && (currentProps[i] || getProps(nodes[i]));
289
+ const propsFrom = propsTo.map((props, i) => {
290
+ const from = uikitUtil.parent(nodes[i]) === target && (currentProps[i] || getProps(nodes[i]));
259
291
 
260
- if (!from) {
261
- return false;
262
- }
292
+ if (!from) {
293
+ return false;
294
+ }
263
295
 
264
- if (!props) {
265
- delete from.opacity;
266
- } else if (!('opacity' in props)) {
267
- var opacity = from.opacity;
296
+ if (!props) {
297
+ delete from.opacity;
298
+ } else if (!('opacity' in props)) {
299
+ const { opacity } = from;
268
300
 
269
- if (opacity % 1) {
270
- props.opacity = 1;
271
- } else {
272
- delete from.opacity;
273
- }
274
- }
301
+ if (opacity % 1) {
302
+ props.opacity = 1;
303
+ } else {
304
+ delete from.opacity;
305
+ }
306
+ }
275
307
 
276
- return from;
277
- });
308
+ return from;
309
+ });
278
310
 
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
- };
348
-
349
- return animationFn(action, target, this.duration)
350
- .then(function () { return this$1$1.$update(target, 'resize'); }, uikitUtil.noop);
351
- }
365
+ return animationFn(action, target, this.duration).then(
366
+ () => this.$update(target, 'resize'),
367
+ uikitUtil.noop);
352
368
 
353
- }
354
- };
369
+ } } };
355
370
 
356
371
  var Component = {
372
+ mixins: [Animate],
357
373
 
358
- mixins: [Animate],
359
-
360
- args: 'target',
361
-
362
- props: {
363
- target: Boolean,
364
- selActive: Boolean
365
- },
366
-
367
- data: {
368
- target: null,
369
- selActive: false,
370
- attrItem: 'uk-filter-control',
371
- cls: 'uk-active',
372
- duration: 250
373
- },
374
-
375
- computed: {
376
-
377
- toggles: {
378
-
379
- get: function(ref, $el) {
380
- var attrItem = ref.attrItem;
381
-
382
- return uikitUtil.$$(("[" + attrItem + "],[data-" + attrItem + "]"), $el);
383
- },
384
-
385
- watch: function() {
386
- var this$1$1 = this;
387
-
388
-
389
- this.updateState();
390
-
391
- if (this.selActive !== false) {
392
- var actives = uikitUtil.$$(this.selActive, this.$el);
393
- this.toggles.forEach(function (el) { return uikitUtil.toggleClass(el, this$1$1.cls, uikitUtil.includes(actives, el)); });
394
- }
395
-
396
- },
397
-
398
- immediate: true
374
+ args: 'target',
399
375
 
400
- },
376
+ props: {
377
+ target: Boolean,
378
+ selActive: Boolean },
401
379
 
402
- children: {
403
380
 
404
- get: function(ref, $el) {
405
- var target = ref.target;
381
+ data: {
382
+ target: null,
383
+ selActive: false,
384
+ attrItem: 'uk-filter-control',
385
+ cls: 'uk-active',
386
+ duration: 250 },
406
387
 
407
- return uikitUtil.$$((target + " > *"), $el);
408
- },
409
388
 
410
- watch: function(list, old) {
411
- if (old && !isEqualList(list, old)) {
412
- this.updateState();
413
- }
414
- },
389
+ computed: {
390
+ toggles: {
391
+ get(_ref, $el) {let { attrItem } = _ref;
392
+ return uikitUtil.$$("[" + attrItem + "],[data-" + attrItem + "]", $el);
393
+ },
415
394
 
416
- immediate: true
395
+ watch() {
396
+ this.updateState();
417
397
 
398
+ if (this.selActive !== false) {
399
+ const actives = uikitUtil.$$(this.selActive, this.$el);
400
+ this.toggles.forEach((el) => uikitUtil.toggleClass(el, this.cls, uikitUtil.includes(actives, el)));
418
401
  }
402
+ },
419
403
 
420
- },
421
-
422
- events: [
423
-
424
- {
404
+ immediate: true },
425
405
 
426
- name: 'click',
427
406
 
428
- delegate: function() {
429
- return ("[" + (this.attrItem) + "],[data-" + (this.attrItem) + "]");
430
- },
407
+ children: {
408
+ get(_ref2, $el) {let { target } = _ref2;
409
+ return uikitUtil.$$(target + " > *", $el);
410
+ },
431
411
 
432
- handler: function(e) {
412
+ watch(list, old) {
413
+ if (old && !isEqualList(list, old)) {
414
+ this.updateState();
415
+ }
416
+ },
433
417
 
434
- e.preventDefault();
435
- this.apply(e.current);
418
+ immediate: true } },
436
419
 
437
- }
438
420
 
439
- }
440
421
 
441
- ],
422
+ events: [
423
+ {
424
+ name: 'click',
442
425
 
443
- methods: {
426
+ delegate() {
427
+ return "[" + this.attrItem + "],[data-" + this.attrItem + "]";
428
+ },
444
429
 
445
- apply: function(el) {
446
- var prevState = this.getState();
447
- var newState = mergeState(el, this.attrItem, this.getState());
430
+ handler(e) {
431
+ e.preventDefault();
432
+ this.apply(e.current);
433
+ } }],
448
434
 
449
- if (!isEqualState(prevState, newState)) {
450
- this.setState(newState);
451
- }
452
- },
453
435
 
454
- getState: function() {
455
- var this$1$1 = this;
456
436
 
457
- return this.toggles
458
- .filter(function (item) { return uikitUtil.hasClass(item, this$1$1.cls); })
459
- .reduce(function (state, el) { return mergeState(el, this$1$1.attrItem, state); }, {filter: {'': ''}, sort: []});
460
- },
437
+ methods: {
438
+ apply(el) {
439
+ const prevState = this.getState();
440
+ const newState = mergeState(el, this.attrItem, this.getState());
461
441
 
462
- setState: function(state, animate) {
463
- var this$1$1 = this;
464
- if ( animate === void 0 ) animate = true;
442
+ if (!isEqualState(prevState, newState)) {
443
+ this.setState(newState);
444
+ }
445
+ },
465
446
 
447
+ getState() {
448
+ return this.toggles.
449
+ filter((item) => uikitUtil.hasClass(item, this.cls)).
450
+ reduce((state, el) => mergeState(el, this.attrItem, state), {
451
+ filter: { '': '' },
452
+ sort: [] });
466
453
 
467
- state = uikitUtil.assign({filter: {'': ''}, sort: []}, state);
454
+ },
468
455
 
469
- uikitUtil.trigger(this.$el, 'beforeFilter', [this, state]);
456
+ setState(state, animate) {if (animate === void 0) {animate = true;}
457
+ state = uikitUtil.assign({ filter: { '': '' }, sort: [] }, state);
470
458
 
471
- this.toggles.forEach(function (el) { return uikitUtil.toggleClass(el, this$1$1.cls, !!matchFilter(el, this$1$1.attrItem, state)); });
459
+ uikitUtil.trigger(this.$el, 'beforeFilter', [this, state]);
472
460
 
473
- uikitUtil.Promise.all(uikitUtil.$$(this.target, this.$el).map(function (target) {
474
- var filterFn = function () {
475
- applyState(state, target, uikitUtil.children(target));
476
- this$1$1.$update(this$1$1.$el);
477
- };
478
- return animate ? this$1$1.animate(filterFn, target) : filterFn();
479
- })).then(function () { return uikitUtil.trigger(this$1$1.$el, 'afterFilter', [this$1$1]); });
461
+ this.toggles.forEach((el) =>
462
+ uikitUtil.toggleClass(el, this.cls, !!matchFilter(el, this.attrItem, state)));
480
463
 
481
- },
482
464
 
483
- updateState: function() {
484
- var this$1$1 = this;
465
+ Promise.all(
466
+ uikitUtil.$$(this.target, this.$el).map((target) => {
467
+ const filterFn = () => {
468
+ applyState(state, target, uikitUtil.children(target));
469
+ this.$update(this.$el);
470
+ };
471
+ return animate ? this.animate(filterFn, target) : filterFn();
472
+ })).
473
+ then(() => uikitUtil.trigger(this.$el, 'afterFilter', [this]));
474
+ },
485
475
 
486
- uikitUtil.fastdom.write(function () { return this$1$1.setState(this$1$1.getState(), false); });
487
- }
476
+ updateState() {
477
+ uikitUtil.fastdom.write(() => this.setState(this.getState(), false));
478
+ } } };
488
479
 
489
- }
490
480
 
491
- };
492
481
 
493
482
  function getFilter(el, attr) {
494
- return uikitUtil.parseOptions(uikitUtil.data(el, attr), ['filter']);
483
+ return uikitUtil.parseOptions(uikitUtil.data(el, attr), ['filter']);
495
484
  }
496
485
 
497
486
  function isEqualState(stateA, stateB) {
498
- return ['filter', 'sort'].every(function (prop) { return uikitUtil.isEqual(stateA[prop], stateB[prop]); });
487
+ return ['filter', 'sort'].every((prop) => uikitUtil.isEqual(stateA[prop], stateB[prop]));
499
488
  }
500
489
 
501
490
  function applyState(state, target, children) {
502
- var selector = getSelector(state);
491
+ const selector = getSelector(state);
503
492
 
504
- children.forEach(function (el) { return uikitUtil.css(el, 'display', selector && !uikitUtil.matches(el, selector) ? 'none' : ''); });
493
+ children.forEach((el) => uikitUtil.css(el, 'display', selector && !uikitUtil.matches(el, selector) ? 'none' : ''));
505
494
 
506
- var ref = state.sort;
507
- var sort = ref[0];
508
- var order = ref[1];
495
+ const [sort, order] = state.sort;
509
496
 
510
- if (sort) {
511
- var sorted = sortItems(children, sort, order);
512
- if (!uikitUtil.isEqual(sorted, children)) {
513
- uikitUtil.append(target, sorted);
514
- }
497
+ if (sort) {
498
+ const sorted = sortItems(children, sort, order);
499
+ if (!uikitUtil.isEqual(sorted, children)) {
500
+ uikitUtil.append(target, sorted);
515
501
  }
502
+ }
516
503
  }
517
504
 
518
505
  function mergeState(el, attr, state) {
519
-
520
- var filterBy = getFilter(el, attr);
521
- var filter = filterBy.filter;
522
- var group = filterBy.group;
523
- var sort = filterBy.sort;
524
- var order = filterBy.order; if ( order === void 0 ) order = 'asc';
525
-
526
- if (filter || uikitUtil.isUndefined(sort)) {
527
-
528
- if (group) {
529
-
530
- if (filter) {
531
- delete state.filter[''];
532
- state.filter[group] = filter;
533
- } else {
534
- delete state.filter[group];
535
-
536
- if (uikitUtil.isEmpty(state.filter) || '' in state.filter) {
537
- state.filter = {'': filter || ''};
538
- }
539
-
540
- }
541
-
542
- } else {
543
- state.filter = {'': filter || ''};
506
+ const filterBy = getFilter(el, attr);
507
+ const { filter, group, sort, order = 'asc' } = filterBy;
508
+
509
+ if (filter || uikitUtil.isUndefined(sort)) {
510
+ if (group) {
511
+ if (filter) {
512
+ delete state.filter[''];
513
+ state.filter[group] = filter;
514
+ } else {
515
+ delete state.filter[group];
516
+
517
+ if (uikitUtil.isEmpty(state.filter) || '' in state.filter) {
518
+ state.filter = { '': filter || '' };
544
519
  }
545
-
520
+ }
521
+ } else {
522
+ state.filter = { '': filter || '' };
546
523
  }
524
+ }
547
525
 
548
- if (!uikitUtil.isUndefined(sort)) {
549
- state.sort = [sort, order];
550
- }
526
+ if (!uikitUtil.isUndefined(sort)) {
527
+ state.sort = [sort, order];
528
+ }
551
529
 
552
- return state;
530
+ return state;
553
531
  }
554
532
 
555
- function matchFilter(el, attr, ref) {
556
- var stateFilter = ref.filter; if ( stateFilter === void 0 ) stateFilter = {'': ''};
557
- var ref_sort = ref.sort;
558
- var stateSort = ref_sort[0];
559
- var stateOrder = ref_sort[1];
533
+ function matchFilter(
534
+ el,
535
+ attr, _ref3)
560
536
 
537
+ {let { filter: stateFilter = { '': '' }, sort: [stateSort, stateOrder] } = _ref3;
538
+ const { filter = '', group = '', sort, order = 'asc' } = getFilter(el, attr);
561
539
 
562
- var ref$1 = getFilter(el, attr);
563
- var filter = ref$1.filter; if ( filter === void 0 ) filter = '';
564
- var group = ref$1.group; if ( group === void 0 ) group = '';
565
- var sort = ref$1.sort;
566
- var order = ref$1.order; if ( order === void 0 ) order = 'asc';
567
-
568
- return uikitUtil.isUndefined(sort)
569
- ? group in stateFilter && filter === stateFilter[group]
570
- || !filter && group && !(group in stateFilter) && !stateFilter['']
571
- : stateSort === sort && stateOrder === order;
540
+ return uikitUtil.isUndefined(sort) ?
541
+ group in stateFilter && filter === stateFilter[group] ||
542
+ !filter && group && !(group in stateFilter) && !stateFilter[''] :
543
+ stateSort === sort && stateOrder === order;
572
544
  }
573
545
 
574
546
  function isEqualList(listA, listB) {
575
- return listA.length === listB.length
576
- && listA.every(function (el) { return ~listB.indexOf(el); });
547
+ return listA.length === listB.length && listA.every((el) => ~listB.indexOf(el));
577
548
  }
578
549
 
579
- function getSelector(ref) {
580
- var filter = ref.filter;
581
-
582
- var selector = '';
583
- uikitUtil.each(filter, function (value) { return selector += value || ''; });
584
- return selector;
550
+ function getSelector(_ref4) {let { filter } = _ref4;
551
+ let selector = '';
552
+ uikitUtil.each(filter, (value) => selector += value || '');
553
+ return selector;
585
554
  }
586
555
 
587
556
  function sortItems(nodes, sort, order) {
588
- return uikitUtil.assign([], nodes).sort(function (a, b) { return uikitUtil.data(a, sort).localeCompare(uikitUtil.data(b, sort), undefined, {numeric: true}) * (order === 'asc' || -1); });
557
+ return uikitUtil.assign([], nodes).sort(
558
+ (a, b) =>
559
+ uikitUtil.data(a, sort).localeCompare(uikitUtil.data(b, sort), undefined, { numeric: true }) * (
560
+ order === 'asc' || -1));
561
+
589
562
  }
590
563
 
591
564
  if (typeof window !== 'undefined' && window.UIkit) {
592
- window.UIkit.component('filter', Component);
565
+ window.UIkit.component('filter', Component);
593
566
  }
594
567
 
595
568
  return Component;