uikit 3.19.5-dev.68a7ed8e1 → 3.19.5-dev.74c343fa4

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 (49) hide show
  1. package/CHANGELOG.md +2 -1
  2. package/dist/css/uikit-core-rtl.css +1 -1
  3. package/dist/css/uikit-core-rtl.min.css +1 -1
  4. package/dist/css/uikit-core.css +1 -1
  5. package/dist/css/uikit-core.min.css +1 -1
  6. package/dist/css/uikit-rtl.css +1 -1
  7. package/dist/css/uikit-rtl.min.css +1 -1
  8. package/dist/css/uikit.css +1 -1
  9. package/dist/css/uikit.min.css +1 -1
  10. package/dist/js/components/countdown.js +1 -1
  11. package/dist/js/components/countdown.min.js +1 -1
  12. package/dist/js/components/filter.js +87 -87
  13. package/dist/js/components/filter.min.js +1 -1
  14. package/dist/js/components/lightbox-panel.js +1 -1
  15. package/dist/js/components/lightbox-panel.min.js +1 -1
  16. package/dist/js/components/lightbox.js +1 -1
  17. package/dist/js/components/lightbox.min.js +1 -1
  18. package/dist/js/components/notification.js +1 -1
  19. package/dist/js/components/notification.min.js +1 -1
  20. package/dist/js/components/parallax.js +1 -1
  21. package/dist/js/components/parallax.min.js +1 -1
  22. package/dist/js/components/slider-parallax.js +1 -1
  23. package/dist/js/components/slider-parallax.min.js +1 -1
  24. package/dist/js/components/slider.js +1 -1
  25. package/dist/js/components/slider.min.js +1 -1
  26. package/dist/js/components/slideshow-parallax.js +1 -1
  27. package/dist/js/components/slideshow-parallax.min.js +1 -1
  28. package/dist/js/components/slideshow.js +1 -1
  29. package/dist/js/components/slideshow.min.js +1 -1
  30. package/dist/js/components/sortable.js +87 -87
  31. package/dist/js/components/sortable.min.js +1 -1
  32. package/dist/js/components/tooltip.js +1 -1
  33. package/dist/js/components/tooltip.min.js +1 -1
  34. package/dist/js/components/upload.js +1 -1
  35. package/dist/js/components/upload.min.js +1 -1
  36. package/dist/js/uikit-core.js +13 -15
  37. package/dist/js/uikit-core.min.js +1 -1
  38. package/dist/js/uikit-icons.js +1 -1
  39. package/dist/js/uikit-icons.min.js +1 -1
  40. package/dist/js/uikit.js +94 -101
  41. package/dist/js/uikit.min.js +1 -1
  42. package/package.json +1 -1
  43. package/src/js/core/margin.js +5 -0
  44. package/src/js/core/scrollspy.js +0 -3
  45. package/src/js/mixin/internal/animate-fade.js +1 -4
  46. package/src/js/mixin/internal/animate-slide.js +2 -7
  47. package/src/js/util/fastdom.js +6 -13
  48. package/tests/base.html +1 -1
  49. package/tests/switcher.html +86 -86
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "uikit",
3
3
  "title": "UIkit",
4
4
  "description": "UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.",
5
- "version": "3.19.5-dev.68a7ed8e1",
5
+ "version": "3.19.5-dev.74c343fa4",
6
6
  "main": "dist/js/uikit.js",
7
7
  "style": "dist/css/uikit.css",
8
8
  "sideEffects": [
package/src/js/core/margin.js CHANGED
@@ -13,6 +13,11 @@ export default {
13
13
  },
14
14
 
15
15
  observe: [
16
+ mutation({
17
+ options: {
18
+ childList: true,
19
+ },
20
+ }),
16
21
  mutation({
17
22
  options: {
18
23
  attributes: true,
package/src/js/core/scrollspy.js CHANGED
@@ -135,9 +135,6 @@ export default {
135
135
  trigger(el, inview ? 'inview' : 'outview');
136
136
 
137
137
  state.inview = inview;
138
-
139
- // change to `visibility: hidden` does not trigger observers
140
- this.$update(el);
141
138
  },
142
139
  },
143
140
  };
package/src/js/mixin/internal/animate-fade.js CHANGED
@@ -11,6 +11,7 @@ import {
11
11
  Transition,
12
12
  } from 'uikit-util';
13
13
  import { getRows } from '../../core/margin';
14
+ import { awaitFrame } from './animate-slide.js';
14
15
 
15
16
  const clsLeave = 'uk-transition-leave';
16
17
  const clsEnter = 'uk-transition-enter';
@@ -120,10 +121,6 @@ function getTransitionNodes(target) {
120
121
  return getRows(children(target)).flat().filter(isVisible);
121
122
  }
122
123
 
123
- function awaitFrame() {
124
- return new Promise((resolve) => requestAnimationFrame(resolve));
125
- }
126
-
127
124
  function awaitTimeout(timeout) {
128
125
  return new Promise((resolve) => setTimeout(resolve, timeout));
129
126
  }
package/src/js/mixin/internal/animate-slide.js CHANGED
@@ -2,7 +2,6 @@ import {
2
2
  attr,
3
3
  children,
4
4
  css,
5
- fastdom,
6
5
  includes,
7
6
  index,
8
7
  isVisible,
@@ -26,7 +25,7 @@ export default async function (action, target, duration) {
26
25
  await Promise.all(nodes.concat(target).map(Transition.cancel));
27
26
 
28
27
  // Adding, sorting, removing nodes
29
- action();
28
+ await action();
30
29
 
31
30
  // Find new nodes
32
31
  nodes = nodes.concat(children(target).filter((el) => !includes(nodes, el)));
@@ -34,9 +33,6 @@ export default async function (action, target, duration) {
34
33
  // Wait for update to propagate
35
34
  await Promise.resolve();
36
35
 
37
- // Force update
38
- fastdom.flush();
39
-
40
36
  // Get new state
41
37
  const targetStyle = attr(target, 'style');
42
38
  const targetPropsTo = css(target, ['height', 'padding']);
@@ -49,7 +45,6 @@ export default async function (action, target, duration) {
49
45
 
50
46
  // Trigger update in e.g. parallax component
51
47
  trigger(target, 'scroll');
52
- fastdom.flush();
53
48
 
54
49
  // Start transitions on next frame
55
50
  await awaitFrame();
@@ -142,6 +137,6 @@ function getPositionWithMargin(el) {
142
137
  };
143
138
  }
144
139
 
145
- function awaitFrame() {
140
+ export function awaitFrame() {
146
141
  return new Promise((resolve) => requestAnimationFrame(resolve));
147
142
  }
package/src/js/util/fastdom.js CHANGED
@@ -28,28 +28,21 @@ export const fastdom = {
28
28
  flush,
29
29
  };
30
30
 
31
- function flush(recursion) {
31
+ function flush() {
32
32
  runTasks(fastdom.reads);
33
33
  runTasks(fastdom.writes.splice(0));
34
34
 
35
35
  fastdom.scheduled = false;
36
36
 
37
37
  if (fastdom.reads.length || fastdom.writes.length) {
38
- scheduleFlush(recursion + 1);
38
+ scheduleFlush();
39
39
  }
40
40
  }
41
41
 
42
- const RECURSION_LIMIT = 4;
43
- function scheduleFlush(recursion) {
44
- if (fastdom.scheduled) {
45
- return;
46
- }
47
-
48
- fastdom.scheduled = true;
49
- if (recursion && recursion < RECURSION_LIMIT) {
50
- Promise.resolve().then(() => flush(recursion));
51
- } else {
52
- requestAnimationFrame(() => flush(1));
42
+ function scheduleFlush() {
43
+ if (!fastdom.scheduled) {
44
+ fastdom.scheduled = true;
45
+ queueMicrotask(flush);
53
46
  }
54
47
  }
55
48
 
package/tests/base.html CHANGED
@@ -233,7 +233,7 @@
233
233
 
234
234
  <h3>Audio</h3>
235
235
 
236
- <audio controls src="https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3"></audio>
236
+ <audio controls src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3"></audio>
237
237
 
238
238
  </div>
239
239
  </div>
package/tests/switcher.html CHANGED
@@ -25,23 +25,23 @@
25
25
  <li><a href>Item</a></li>
26
26
  </ul>
27
27
 
28
- <ul class="uk-switcher uk-margin">
29
- <li>Hello! <a href uk-switcher-item="2">Switch to tab 3</a></li>
30
- <li>Hello again! <a href uk-switcher-item="next">Next tab</a></li>
31
- <li>Bazinga! <a href uk-switcher-item="previous">Previous tab</a></li>
32
- <li>You will never see me!</li>
33
- <li>4</li>
34
- <li>5</li>
35
- </ul>
28
+ <div class="uk-switcher uk-margin">
29
+ <div>Hello! <a href uk-switcher-item="2">Switch to tab 3</a></div>
30
+ <div>Hello again! <a href uk-switcher-item="next">Next tab</a></div>
31
+ <div>Bazinga! <a href uk-switcher-item="previous">Previous tab</a></div>
32
+ <div>You will never see me!</div>
33
+ <div>4</div>
34
+ <div>5</div>
35
+ </div>
36
36
 
37
- <ul class="uk-switcher uk-margin">
38
- <li>Hello! The first item.</li>
39
- <li>Hello again! The second item.</li>
40
- <li>Bazinga! The third item.</li>
41
- <li>You will never see me!</li>
42
- <li>4</li>
43
- <li>5</li>
44
- </ul>
37
+ <div class="uk-switcher uk-margin">
38
+ <div>Hello! The first item.</div>
39
+ <div>Hello again! The second item.</div>
40
+ <div>Bazinga! The third item.</div>
41
+ <div>You will never see me!</div>
42
+ <div>4</div>
43
+ <div>5</div>
44
+ </div>
45
45
 
46
46
  </div>
47
47
 
@@ -58,11 +58,11 @@
58
58
  <li><a href>Item</a></li>
59
59
  </ul>
60
60
 
61
- <ul class="uk-switcher uk-margin">
62
- <li>Hello!</li>
63
- <li>Hello again!</li>
64
- <li>Bazinga!</li>
65
- </ul>
61
+ <div class="uk-switcher uk-margin">
62
+ <div>Hello!</div>
63
+ <div>Hello again!</div>
64
+ <div>Bazinga!</div>
65
+ </div>
66
66
 
67
67
  </div>
68
68
  <div>
@@ -75,11 +75,11 @@
75
75
  <li><a href>Item</a></li>
76
76
  </ul>
77
77
 
78
- <ul class="uk-switcher uk-margin">
79
- <li>Hello!</li>
80
- <li>Hello again!</li>
81
- <li>Bazinga!</li>
82
- </ul>
78
+ <div class="uk-switcher uk-margin">
79
+ <div>Hello!</div>
80
+ <div>Hello again!</div>
81
+ <div>Bazinga!</div>
82
+ </div>
83
83
 
84
84
  </div>
85
85
  <div>
@@ -92,11 +92,11 @@
92
92
  <li><a href>Item</a></li>
93
93
  </ul>
94
94
 
95
- <ul class="uk-switcher uk-margin">
96
- <li>Hello!</li>
97
- <li>Hello again!</li>
98
- <li>Bazinga!</li>
99
- </ul>
95
+ <div class="uk-switcher uk-margin">
96
+ <div>Hello!</div>
97
+ <div>Hello again!</div>
98
+ <div>Bazinga!</div>
99
+ </div>
100
100
 
101
101
  </div>
102
102
  <div>
@@ -109,11 +109,11 @@
109
109
  <li><a href>Item</a></li>
110
110
  </ul>
111
111
 
112
- <ul class="uk-switcher uk-margin">
113
- <li>Hello!</li>
114
- <li>Hello again!</li>
115
- <li>Bazinga!</li>
116
- </ul>
112
+ <div class="uk-switcher uk-margin">
113
+ <div>Hello!</div>
114
+ <div>Hello again!</div>
115
+ <div>Bazinga!</div>
116
+ </div>
117
117
 
118
118
  </div>
119
119
  <div>
@@ -126,11 +126,11 @@
126
126
  <li><a href>Item</a></li>
127
127
  </ul>
128
128
 
129
- <ul class="uk-switcher uk-margin">
130
- <li>Hello!</li>
131
- <li>Hello again!</li>
132
- <li>Bazinga!</li>
133
- </ul>
129
+ <div class="uk-switcher uk-margin">
130
+ <div>Hello!</div>
131
+ <div>Hello again!</div>
132
+ <div>Bazinga!</div>
133
+ </div>
134
134
 
135
135
  </div>
136
136
  <div>
@@ -143,11 +143,11 @@
143
143
  <li><a href>Item</a></li>
144
144
  </ul>
145
145
 
146
- <ul class="uk-switcher uk-margin">
147
- <li>Hello!</li>
148
- <li>Hello again!</li>
149
- <li>Bazinga!</li>
150
- </ul>
146
+ <div class="uk-switcher uk-margin">
147
+ <div>Hello!</div>
148
+ <div>Hello again!</div>
149
+ <div>Bazinga!</div>
150
+ </div>
151
151
 
152
152
  </div>
153
153
  <div>
@@ -160,11 +160,11 @@
160
160
  <li><a href>Item</a></li>
161
161
  </ul>
162
162
 
163
- <ul class="uk-switcher uk-margin">
164
- <li>Hello!</li>
165
- <li>Hello again!</li>
166
- <li>Bazinga!</li>
167
- </ul>
163
+ <div class="uk-switcher uk-margin">
164
+ <div>Hello!</div>
165
+ <div>Hello again!</div>
166
+ <div>Bazinga!</div>
167
+ </div>
168
168
 
169
169
  </div>
170
170
  <div>
@@ -177,11 +177,11 @@
177
177
  <li><a href>Item</a></li>
178
178
  </ul>
179
179
 
180
- <ul class="uk-switcher uk-margin">
181
- <li>Hello!</li>
182
- <li>Hello again!</li>
183
- <li>Bazinga!</li>
184
- </ul>
180
+ <div class="uk-switcher uk-margin">
181
+ <div>Hello!</div>
182
+ <div>Hello again!</div>
183
+ <div>Bazinga!</div>
184
+ </div>
185
185
 
186
186
  </div>
187
187
  </div>
@@ -205,11 +205,11 @@
205
205
  </div>
206
206
  <div class="uk-width-expand@m">
207
207
 
208
- <ul id="component-tab-left" class="uk-switcher">
209
- <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
210
- <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
211
- <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
212
- </ul>
208
+ <div id="component-tab-left" class="uk-switcher">
209
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
210
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
211
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
212
+ </div>
213
213
 
214
214
  </div>
215
215
  </div>
@@ -231,11 +231,11 @@
231
231
  </div>
232
232
  <div class="uk-width-expand@m">
233
233
 
234
- <ul id="component-tab-right" class="uk-switcher">
235
- <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
236
- <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
237
- <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
238
- </ul>
234
+ <div id="component-tab-right" class="uk-switcher">
235
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
236
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
237
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
238
+ </div>
239
239
 
240
240
  </div>
241
241
  </div>
@@ -251,11 +251,11 @@
251
251
  <button class="uk-button uk-button-default" type="button">Button</button>
252
252
  </p>
253
253
 
254
- <ul class="uk-switcher">
255
- <li>Hello!</li>
256
- <li>Hello again!</li>
257
- <li>Bazinga!</li>
258
- </ul>
254
+ <div class="uk-switcher">
255
+ <div>Hello!</div>
256
+ <div>Hello again!</div>
257
+ <div>Bazinga!</div>
258
+ </div>
259
259
 
260
260
  </div>
261
261
  <div>
@@ -270,11 +270,11 @@
270
270
  </span>
271
271
  </p>
272
272
 
273
- <ul id="component-button-group" class="uk-switcher">
274
- <li>Hello!</li>
275
- <li>Hello again!</li>
276
- <li>Bazinga!</li>
277
- </ul>
273
+ <div id="component-button-group" class="uk-switcher">
274
+ <div>Hello!</div>
275
+ <div>Hello again!</div>
276
+ <div>Bazinga!</div>
277
+ </div>
278
278
 
279
279
  </div>
280
280
  <div>
@@ -294,11 +294,11 @@
294
294
  </div>
295
295
  <div class="uk-width-2-3@m">
296
296
 
297
- <ul id="component-nav" class="uk-switcher">
298
- <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
299
- <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
300
- <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
301
- </ul>
297
+ <div id="component-nav" class="uk-switcher">
298
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
299
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
300
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
301
+ </div>
302
302
 
303
303
  </div>
304
304
  </div>
@@ -314,11 +314,11 @@
314
314
  <li><a href>Item</a></li>
315
315
  </ul>
316
316
 
317
- <ul class="uk-switcher">
318
- <li>Hello!</li>
319
- <li>Hello again!</li>
320
- <li>Bazinga!</li>
321
- </ul>
317
+ <div class="uk-switcher">
318
+ <div>Hello!</div>
319
+ <div>Hello again!</div>
320
+ <div>Bazinga!</div>
321
+ </div>
322
322
 
323
323
  </div>
324
324
  </div>