uikit 3.11.2-dev.bbaa4362f → 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 (165) 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 +8 -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 +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 +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 -6709
  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 -9913
  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 +79 -100
  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 +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 +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/src/less/components/flex.less +0 -9
  153. package/src/less/components/navbar.less +0 -7
  154. package/src/less/components/utility.less +22 -0
  155. package/src/scss/components/flex.scss +0 -9
  156. package/src/scss/components/form.scss +3 -3
  157. package/src/scss/components/icon.scss +2 -2
  158. package/src/scss/components/navbar.scss +0 -7
  159. package/src/scss/components/search.scss +1 -1
  160. package/src/scss/components/utility.scss +22 -0
  161. package/src/scss/variables-theme.scss +6 -6
  162. package/src/scss/variables.scss +6 -6
  163. package/tests/js/index.js +114 -85
  164. package/src/js/mixin/flex-bug.js +0 -56
  165. package/src/js/util/promise.js +0 -191
@@ -1,4 +1,4 @@
1
- /*! UIkit 3.11.2-dev.bbaa4362f | 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,589 +7,560 @@
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
- }
16
+ for (const el of items) {
17
+ if (!uikitUtil.isVisible(el)) {
18
+ continue;
19
+ }
35
20
 
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
- }
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
+ }
43
55
 
44
- if (dim[startProp] >= startDim[endProp] - 1 && dim[startProp] !== startDim[startProp]) {
45
- sorted.push([el]);
46
- break;
47
- }
56
+ return sorted;
57
+ }
48
58
 
49
- if (dim[endProp] - 1 > startDim[startProp] || dim[startProp] === startDim[startProp]) {
50
- current.push(el);
51
- break;
52
- }
59
+ function getOffset(element, offset) {if (offset === void 0) {offset = false;}
60
+ let { offsetTop, offsetLeft, offsetHeight, offsetWidth } = element;
53
61
 
54
- if (j === 0) {
55
- sorted.unshift([el]);
56
- break;
57
- }
62
+ if (offset) {
63
+ [offsetTop, offsetLeft] = uikitUtil.offsetPosition(element);
64
+ }
58
65
 
59
- }
66
+ return {
67
+ top: offsetTop,
68
+ left: offsetLeft,
69
+ bottom: offsetTop + offsetHeight,
70
+ right: offsetLeft + offsetWidth };
60
71
 
61
- }
62
-
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
+ 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))));
177
183
 
178
- function slide (action, target, duration) {
179
-
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
184
 
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');
232
261
 
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;
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 },
270
+
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 ];
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
- }
363
+ return animationFn(action, target, this.duration).then(
364
+ () => this.$update(target, 'resize'),
365
+ uikitUtil.noop);
352
366
 
353
- }
354
- };
367
+ } } };
355
368
 
356
369
  var Component = {
370
+ mixins: [Animate],
357
371
 
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
372
+ args: 'target',
399
373
 
400
- },
374
+ props: {
375
+ target: Boolean,
376
+ selActive: Boolean },
401
377
 
402
- children: {
403
378
 
404
- get: function(ref, $el) {
405
- var target = ref.target;
379
+ data: {
380
+ target: null,
381
+ selActive: false,
382
+ attrItem: 'uk-filter-control',
383
+ cls: 'uk-active',
384
+ duration: 250 },
406
385
 
407
- return uikitUtil.$$((target + " > *"), $el);
408
- },
409
386
 
410
- watch: function(list, old) {
411
- if (old && !isEqualList(list, old)) {
412
- this.updateState();
413
- }
414
- },
387
+ computed: {
388
+ toggles: {
389
+ get(_ref, $el) {let { attrItem } = _ref;
390
+ return uikitUtil.$$("[" + attrItem + "],[data-" + attrItem + "]", $el);
391
+ },
415
392
 
416
- immediate: true
393
+ watch() {
394
+ this.updateState();
417
395
 
396
+ if (this.selActive !== false) {
397
+ const actives = uikitUtil.$$(this.selActive, this.$el);
398
+ this.toggles.forEach((el) => uikitUtil.toggleClass(el, this.cls, uikitUtil.includes(actives, el)));
418
399
  }
400
+ },
419
401
 
420
- },
421
-
422
- events: [
423
-
424
- {
402
+ immediate: true },
425
403
 
426
- name: 'click',
427
404
 
428
- delegate: function() {
429
- return ("[" + (this.attrItem) + "],[data-" + (this.attrItem) + "]");
430
- },
405
+ children: {
406
+ get(_ref2, $el) {let { target } = _ref2;
407
+ return uikitUtil.$$(target + " > *", $el);
408
+ },
431
409
 
432
- handler: function(e) {
410
+ watch(list, old) {
411
+ if (old && !isEqualList(list, old)) {
412
+ this.updateState();
413
+ }
414
+ },
433
415
 
434
- e.preventDefault();
435
- this.apply(e.current);
416
+ immediate: true } },
436
417
 
437
- }
438
418
 
439
- }
440
419
 
441
- ],
420
+ events: [
421
+ {
422
+ name: 'click',
442
423
 
443
- methods: {
424
+ delegate() {
425
+ return "[" + this.attrItem + "],[data-" + this.attrItem + "]";
426
+ },
444
427
 
445
- apply: function(el) {
446
- var prevState = this.getState();
447
- var newState = mergeState(el, this.attrItem, this.getState());
428
+ handler(e) {
429
+ e.preventDefault();
430
+ this.apply(e.current);
431
+ } }],
448
432
 
449
- if (!isEqualState(prevState, newState)) {
450
- this.setState(newState);
451
- }
452
- },
453
433
 
454
- getState: function() {
455
- var this$1$1 = this;
456
434
 
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
- },
435
+ methods: {
436
+ apply(el) {
437
+ const prevState = this.getState();
438
+ const newState = mergeState(el, this.attrItem, this.getState());
461
439
 
462
- setState: function(state, animate) {
463
- var this$1$1 = this;
464
- if ( animate === void 0 ) animate = true;
440
+ if (!isEqualState(prevState, newState)) {
441
+ this.setState(newState);
442
+ }
443
+ },
465
444
 
445
+ getState() {
446
+ return this.toggles.
447
+ filter((item) => uikitUtil.hasClass(item, this.cls)).
448
+ reduce((state, el) => mergeState(el, this.attrItem, state), {
449
+ filter: { '': '' },
450
+ sort: [] });
466
451
 
467
- state = uikitUtil.assign({filter: {'': ''}, sort: []}, state);
452
+ },
468
453
 
469
- uikitUtil.trigger(this.$el, 'beforeFilter', [this, state]);
454
+ setState(state, animate) {if (animate === void 0) {animate = true;}
455
+ state = uikitUtil.assign({ filter: { '': '' }, sort: [] }, state);
470
456
 
471
- this.toggles.forEach(function (el) { return uikitUtil.toggleClass(el, this$1$1.cls, !!matchFilter(el, this$1$1.attrItem, state)); });
457
+ uikitUtil.trigger(this.$el, 'beforeFilter', [this, state]);
472
458
 
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]); });
459
+ this.toggles.forEach((el) =>
460
+ uikitUtil.toggleClass(el, this.cls, !!matchFilter(el, this.attrItem, state)));
480
461
 
481
- },
482
462
 
483
- updateState: function() {
484
- var this$1$1 = this;
463
+ Promise.all(
464
+ uikitUtil.$$(this.target, this.$el).map((target) => {
465
+ const filterFn = () => {
466
+ applyState(state, target, uikitUtil.children(target));
467
+ this.$update(this.$el);
468
+ };
469
+ return animate ? this.animate(filterFn, target) : filterFn();
470
+ })).
471
+ then(() => uikitUtil.trigger(this.$el, 'afterFilter', [this]));
472
+ },
485
473
 
486
- uikitUtil.fastdom.write(function () { return this$1$1.setState(this$1$1.getState(), false); });
487
- }
474
+ updateState() {
475
+ uikitUtil.fastdom.write(() => this.setState(this.getState(), false));
476
+ } } };
488
477
 
489
- }
490
478
 
491
- };
492
479
 
493
480
  function getFilter(el, attr) {
494
- return uikitUtil.parseOptions(uikitUtil.data(el, attr), ['filter']);
481
+ return uikitUtil.parseOptions(uikitUtil.data(el, attr), ['filter']);
495
482
  }
496
483
 
497
484
  function isEqualState(stateA, stateB) {
498
- return ['filter', 'sort'].every(function (prop) { return uikitUtil.isEqual(stateA[prop], stateB[prop]); });
485
+ return ['filter', 'sort'].every((prop) => uikitUtil.isEqual(stateA[prop], stateB[prop]));
499
486
  }
500
487
 
501
488
  function applyState(state, target, children) {
502
- var selector = getSelector(state);
489
+ const selector = getSelector(state);
503
490
 
504
- children.forEach(function (el) { return uikitUtil.css(el, 'display', selector && !uikitUtil.matches(el, selector) ? 'none' : ''); });
491
+ children.forEach((el) => uikitUtil.css(el, 'display', selector && !uikitUtil.matches(el, selector) ? 'none' : ''));
505
492
 
506
- var ref = state.sort;
507
- var sort = ref[0];
508
- var order = ref[1];
493
+ const [sort, order] = state.sort;
509
494
 
510
- if (sort) {
511
- var sorted = sortItems(children, sort, order);
512
- if (!uikitUtil.isEqual(sorted, children)) {
513
- uikitUtil.append(target, sorted);
514
- }
495
+ if (sort) {
496
+ const sorted = sortItems(children, sort, order);
497
+ if (!uikitUtil.isEqual(sorted, children)) {
498
+ uikitUtil.append(target, sorted);
515
499
  }
500
+ }
516
501
  }
517
502
 
518
503
  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 || ''};
504
+ const filterBy = getFilter(el, attr);
505
+ const { filter, group, sort, order = 'asc' } = filterBy;
506
+
507
+ if (filter || uikitUtil.isUndefined(sort)) {
508
+ if (group) {
509
+ if (filter) {
510
+ delete state.filter[''];
511
+ state.filter[group] = filter;
512
+ } else {
513
+ delete state.filter[group];
514
+
515
+ if (uikitUtil.isEmpty(state.filter) || '' in state.filter) {
516
+ state.filter = { '': filter || '' };
544
517
  }
545
-
518
+ }
519
+ } else {
520
+ state.filter = { '': filter || '' };
546
521
  }
522
+ }
547
523
 
548
- if (!uikitUtil.isUndefined(sort)) {
549
- state.sort = [sort, order];
550
- }
524
+ if (!uikitUtil.isUndefined(sort)) {
525
+ state.sort = [sort, order];
526
+ }
551
527
 
552
- return state;
528
+ return state;
553
529
  }
554
530
 
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];
531
+ function matchFilter(
532
+ el,
533
+ attr, _ref3)
560
534
 
535
+ {let { filter: stateFilter = { '': '' }, sort: [stateSort, stateOrder] } = _ref3;
536
+ const { filter = '', group = '', sort, order = 'asc' } = getFilter(el, attr);
561
537
 
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;
538
+ return uikitUtil.isUndefined(sort) ?
539
+ group in stateFilter && filter === stateFilter[group] ||
540
+ !filter && group && !(group in stateFilter) && !stateFilter[''] :
541
+ stateSort === sort && stateOrder === order;
572
542
  }
573
543
 
574
544
  function isEqualList(listA, listB) {
575
- return listA.length === listB.length
576
- && listA.every(function (el) { return ~listB.indexOf(el); });
545
+ return listA.length === listB.length && listA.every((el) => ~listB.indexOf(el));
577
546
  }
578
547
 
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;
548
+ function getSelector(_ref4) {let { filter } = _ref4;
549
+ let selector = '';
550
+ uikitUtil.each(filter, (value) => selector += value || '');
551
+ return selector;
585
552
  }
586
553
 
587
554
  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); });
555
+ return uikitUtil.assign([], nodes).sort(
556
+ (a, b) =>
557
+ uikitUtil.data(a, sort).localeCompare(uikitUtil.data(b, sort), undefined, { numeric: true }) * (
558
+ order === 'asc' || -1));
559
+
589
560
  }
590
561
 
591
562
  if (typeof window !== 'undefined' && window.UIkit) {
592
- window.UIkit.component('filter', Component);
563
+ window.UIkit.component('filter', Component);
593
564
  }
594
565
 
595
566
  return Component;