uikit 3.14.4-dev.871ba3c05 → 3.14.4-dev.ae765cd84

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 (138) hide show
  1. package/CHANGELOG.md +45 -11
  2. package/build/util.js +1 -0
  3. package/dist/css/uikit-core-rtl.css +385 -110
  4. package/dist/css/uikit-core-rtl.min.css +1 -1
  5. package/dist/css/uikit-core.css +385 -110
  6. package/dist/css/uikit-core.min.css +1 -1
  7. package/dist/css/uikit-rtl.css +402 -115
  8. package/dist/css/uikit-rtl.min.css +1 -1
  9. package/dist/css/uikit.css +402 -115
  10. package/dist/css/uikit.min.css +1 -1
  11. package/dist/js/components/countdown.js +1 -1
  12. package/dist/js/components/countdown.min.js +1 -1
  13. package/dist/js/components/filter.js +7 -5
  14. package/dist/js/components/filter.min.js +1 -1
  15. package/dist/js/components/lightbox-panel.js +185 -137
  16. package/dist/js/components/lightbox-panel.min.js +1 -1
  17. package/dist/js/components/lightbox.js +185 -137
  18. package/dist/js/components/lightbox.min.js +1 -1
  19. package/dist/js/components/notification.js +1 -1
  20. package/dist/js/components/notification.min.js +1 -1
  21. package/dist/js/components/parallax.js +4 -5
  22. package/dist/js/components/parallax.min.js +1 -1
  23. package/dist/js/components/slider-parallax.js +4 -5
  24. package/dist/js/components/slider-parallax.min.js +1 -1
  25. package/dist/js/components/slider.js +22 -7
  26. package/dist/js/components/slider.min.js +1 -1
  27. package/dist/js/components/slideshow-parallax.js +4 -5
  28. package/dist/js/components/slideshow-parallax.min.js +1 -1
  29. package/dist/js/components/slideshow.js +22 -7
  30. package/dist/js/components/slideshow.min.js +1 -1
  31. package/dist/js/components/sortable.js +3 -3
  32. package/dist/js/components/sortable.min.js +1 -1
  33. package/dist/js/components/tooltip.js +97 -135
  34. package/dist/js/components/tooltip.min.js +1 -1
  35. package/dist/js/components/upload.js +1 -1
  36. package/dist/js/components/upload.min.js +1 -1
  37. package/dist/js/uikit-core.js +1803 -1709
  38. package/dist/js/uikit-core.min.js +14 -1
  39. package/dist/js/uikit-icons.js +1 -1
  40. package/dist/js/uikit-icons.min.js +1 -1
  41. package/dist/js/uikit.js +1051 -940
  42. package/dist/js/uikit.min.js +14 -1
  43. package/package.json +1 -1
  44. package/src/images/{backgrounds/nav-parent-open.svg → components/nav-parent-icon-large.svg} +0 -0
  45. package/src/images/components/nav-parent-icon.svg +3 -0
  46. package/src/images/components/navbar-parent-icon.svg +3 -0
  47. package/src/images/components/navbar-toggle-icon.svg +22 -3
  48. package/src/js/api/state.js +2 -2
  49. package/src/js/components/filter.js +5 -3
  50. package/src/js/components/sortable.js +2 -3
  51. package/src/js/core/accordion.js +9 -17
  52. package/src/js/core/alert.js +35 -14
  53. package/src/js/core/drop.js +95 -61
  54. package/src/js/core/height-viewport.js +14 -6
  55. package/src/js/core/icon.js +16 -0
  56. package/src/js/core/index.js +2 -0
  57. package/src/js/core/leader.js +2 -2
  58. package/src/js/core/navbar.js +44 -30
  59. package/src/js/core/offcanvas.js +1 -47
  60. package/src/js/core/scroll.js +37 -10
  61. package/src/js/core/sticky.js +8 -9
  62. package/src/js/core/toggle.js +3 -5
  63. package/src/js/mixin/media.js +4 -5
  64. package/src/js/mixin/modal.js +97 -8
  65. package/src/js/mixin/position.js +26 -11
  66. package/src/js/mixin/slider-drag.js +20 -8
  67. package/src/js/mixin/style.js +11 -0
  68. package/src/js/mixin/togglable.js +80 -133
  69. package/src/js/util/animation.js +4 -3
  70. package/src/js/util/dimensions.js +6 -6
  71. package/src/js/util/filter.js +3 -7
  72. package/src/js/util/position.js +108 -107
  73. package/src/js/util/style.js +4 -13
  74. package/src/js/util/viewport.js +5 -32
  75. package/src/less/components/_import.less +1 -0
  76. package/src/less/components/drop.less +1 -18
  77. package/src/less/components/dropbar.less +115 -0
  78. package/src/less/components/dropdown.less +16 -16
  79. package/src/less/components/leader.less +1 -1
  80. package/src/less/components/nav.less +240 -63
  81. package/src/less/components/navbar.less +81 -38
  82. package/src/less/components/utility.less +21 -4
  83. package/src/less/theme/_import.less +1 -0
  84. package/src/less/theme/dropbar.less +44 -0
  85. package/src/less/theme/dropdown.less +0 -11
  86. package/src/less/theme/nav.less +43 -9
  87. package/src/less/theme/navbar.less +7 -11
  88. package/src/scss/components/_import.scss +1 -0
  89. package/src/scss/components/drop.scss +1 -18
  90. package/src/scss/components/dropbar.scss +115 -0
  91. package/src/scss/components/dropdown.scss +16 -16
  92. package/src/scss/components/leader.scss +1 -1
  93. package/src/scss/components/nav.scss +189 -51
  94. package/src/scss/components/navbar.scss +69 -38
  95. package/src/scss/components/utility.scss +19 -3
  96. package/src/scss/mixins-theme.scss +93 -25
  97. package/src/scss/mixins.scss +89 -17
  98. package/src/scss/theme/_import.scss +1 -0
  99. package/src/scss/theme/dropbar.scss +44 -0
  100. package/src/scss/theme/dropdown.scss +0 -8
  101. package/src/scss/theme/nav.scss +41 -9
  102. package/src/scss/theme/navbar.scss +7 -8
  103. package/src/scss/variables-theme.scss +71 -18
  104. package/src/scss/variables.scss +60 -14
  105. package/tests/accordion.html +2 -2
  106. package/tests/alert.html +2 -2
  107. package/tests/countdown.html +1 -1
  108. package/tests/drop.html +457 -371
  109. package/tests/dropbar.html +456 -0
  110. package/tests/dropdown.html +26 -401
  111. package/tests/filter.html +9 -12
  112. package/tests/form.html +1 -1
  113. package/tests/index.html +126 -107
  114. package/tests/js/index.js +1 -4
  115. package/tests/lightbox.html +5 -5
  116. package/tests/list.html +8 -8
  117. package/tests/modal.html +13 -13
  118. package/tests/nav.html +117 -75
  119. package/tests/navbar.html +2002 -1131
  120. package/tests/offcanvas.html +17 -21
  121. package/tests/parallax.html +1 -1
  122. package/tests/position.html +18 -16
  123. package/tests/progress.html +9 -9
  124. package/tests/scroll.html +7 -10
  125. package/tests/search.html +5 -5
  126. package/tests/slider.html +6 -5
  127. package/tests/slideshow.html +8 -8
  128. package/tests/sortable.html +6 -8
  129. package/tests/sticky-navbar.html +6 -6
  130. package/tests/sticky.html +8 -8
  131. package/tests/switcher.html +1 -1
  132. package/tests/tab.html +1 -1
  133. package/tests/table.html +7 -7
  134. package/tests/toggle.html +2 -2
  135. package/tests/tooltip.html +1 -1
  136. package/tests/upload.html +11 -11
  137. package/tests/utility.html +19 -0
  138. package/src/images/backgrounds/nav-parent-close.svg +0 -3
package/tests/nav.html CHANGED
@@ -58,10 +58,10 @@
58
58
  <div>
59
59
 
60
60
  <h2>Accordion</h2>
61
- <ul class="uk-nav-default uk-nav-parent-icon" uk-nav>
61
+ <ul class="uk-nav-default" uk-nav>
62
62
  <li class="uk-active"><a href="#">Active</a></li>
63
63
  <li class="uk-parent">
64
- <a href="#">Parent</a>
64
+ <a href="#">Parent <span uk-nav-parent-icon></span></a>
65
65
  <ul class="uk-nav-sub">
66
66
  <li><a href="#">Sub item</a></li>
67
67
  <li><a href="#">Sub item</a>
@@ -73,7 +73,7 @@
73
73
  </ul>
74
74
  </li>
75
75
  <li class="uk-parent">
76
- <a href="#">Parent</a>
76
+ <a href="#">Parent <span uk-nav-parent-icon></span></a>
77
77
  <ul class="uk-nav-sub">
78
78
  <li><a href="#">Sub item</a></li>
79
79
  <li><a href="#">Sub item</a></li>
@@ -89,11 +89,12 @@
89
89
  </div>
90
90
  <div>
91
91
 
92
- <h2>Multiple</h2>
93
- <ul class="uk-nav-default uk-nav-parent-icon" uk-nav="multiple: true">
92
+ <h2 class="uk-text-center">Center + Multiple</h2>
93
+
94
+ <ul class="uk-nav-default uk-nav-center" uk-nav="multiple: true">
94
95
  <li class="uk-active"><a href="#">Active</a></li>
95
96
  <li class="uk-parent">
96
- <a href="#">Parent</a>
97
+ <a href="#">Parent <span uk-nav-parent-icon></span></a>
97
98
  <ul class="uk-nav-sub">
98
99
  <li><a href="#">Sub item</a></li>
99
100
  <li><a href="#">Sub item</a>
@@ -105,7 +106,7 @@
105
106
  </ul>
106
107
  </li>
107
108
  <li class="uk-parent">
108
- <a href="#">Parent</a>
109
+ <a href="#">Parent <span uk-nav-parent-icon></span></a>
109
110
  <ul class="uk-nav-sub">
110
111
  <li><a href="#">Sub item</a></li>
111
112
  <li><a href="#">Sub item</a></li>
@@ -121,34 +122,13 @@
121
122
  </div>
122
123
  <div>
123
124
 
124
- <h2 class="uk-text-center">Center</h2>
125
+ <h2>Subtitles</h2>
125
126
 
126
- <ul class="uk-nav-default uk-nav-center uk-nav-parent-icon" uk-nav>
127
- <li class="uk-active"><a href="#">Active</a></li>
128
- <li class="uk-parent">
129
- <a href="#">Parent</a>
130
- <ul class="uk-nav-sub">
131
- <li><a href="#">Sub item</a></li>
132
- <li><a href="#">Sub item</a>
133
- <ul>
134
- <li><a href="#">Sub item</a></li>
135
- <li><a href="#">Sub item</a></li>
136
- </ul>
137
- </li>
138
- </ul>
139
- </li>
140
- <li class="uk-parent">
141
- <a href="#">Parent</a>
142
- <ul class="uk-nav-sub">
143
- <li><a href="#">Sub item</a></li>
144
- <li><a href="#">Sub item</a></li>
145
- </ul>
146
- </li>
147
- <li class="uk-nav-header">Header</li>
148
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
149
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
150
- <li class="uk-nav-divider"></li>
151
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
127
+ <ul class="uk-nav uk-nav-default">
128
+ <li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li>
129
+ <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li>
130
+ <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li>
131
+ <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li>
152
132
  </ul>
153
133
 
154
134
  </div>
@@ -191,10 +171,10 @@
191
171
  <div>
192
172
 
193
173
  <h2>Accordion</h2>
194
- <ul class="uk-nav-primary uk-nav-parent-icon" uk-nav>
174
+ <ul class="uk-nav-primary" uk-nav>
195
175
  <li class="uk-active"><a href="#">Active</a></li>
196
176
  <li class="uk-parent">
197
- <a href="#">Parent</a>
177
+ <a href="#">Parent <span uk-nav-parent-icon></span></a>
198
178
  <ul class="uk-nav-sub">
199
179
  <li><a href="#">Sub item</a></li>
200
180
  <li><a href="#">Sub item</a>
@@ -206,7 +186,7 @@
206
186
  </ul>
207
187
  </li>
208
188
  <li class="uk-parent">
209
- <a href="#">Parent</a>
189
+ <a href="#">Parent <span uk-nav-parent-icon></span></a>
210
190
  <ul class="uk-nav-sub">
211
191
  <li><a href="#">Sub item</a></li>
212
192
  <li><a href="#">Sub item</a></li>
@@ -222,11 +202,12 @@
222
202
  </div>
223
203
  <div>
224
204
 
225
- <h2>Multiple</h2>
226
- <ul class="uk-nav-primary uk-nav-parent-icon" uk-nav="multiple: true">
205
+ <h2 class="uk-text-center">Center + Multiple</h2>
206
+
207
+ <ul class="uk-nav-primary uk-nav-center" uk-nav="multiple: true">
227
208
  <li class="uk-active"><a href="#">Active</a></li>
228
209
  <li class="uk-parent">
229
- <a href="#">Parent</a>
210
+ <a href="#">Parent <span uk-nav-parent-icon></span></a>
230
211
  <ul class="uk-nav-sub">
231
212
  <li><a href="#">Sub item</a></li>
232
213
  <li><a href="#">Sub item</a>
@@ -238,7 +219,7 @@
238
219
  </ul>
239
220
  </li>
240
221
  <li class="uk-parent">
241
- <a href="#">Parent</a>
222
+ <a href="#">Parent <span uk-nav-parent-icon></span></a>
242
223
  <ul class="uk-nav-sub">
243
224
  <li><a href="#">Sub item</a></li>
244
225
  <li><a href="#">Sub item</a></li>
@@ -254,12 +235,27 @@
254
235
  </div>
255
236
  <div>
256
237
 
257
- <h2 class="uk-text-center">Center</h2>
238
+ <h2>Subtitles</h2>
258
239
 
259
- <ul class="uk-nav-primary uk-nav-center uk-nav-parent-icon" uk-nav>
260
- <li class="uk-active"><a href="#">Active</a></li>
240
+ <ul class="uk-nav uk-nav-primary">
241
+ <li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div></a></li>
242
+ <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div></a></li>
243
+ <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div></a></li>
244
+ <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div></a></li>
245
+ </ul>
246
+
247
+ </div>
248
+ </div>
249
+
250
+ <div class="uk-child-width-1-3@m" uk-grid>
251
+ <div>
252
+
253
+ <h2>Secondary</h2>
254
+
255
+ <ul class="uk-nav uk-nav-secondary">
256
+ <li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div></a></li>
261
257
  <li class="uk-parent">
262
- <a href="#">Parent</a>
258
+ <a href="#"><div>Parent<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div></a>
263
259
  <ul class="uk-nav-sub">
264
260
  <li><a href="#">Sub item</a></li>
265
261
  <li><a href="#">Sub item</a>
@@ -271,44 +267,90 @@
271
267
  </ul>
272
268
  </li>
273
269
  <li class="uk-parent">
274
- <a href="#">Parent</a>
270
+ <a href="#"><div>Parent<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div></a>
275
271
  <ul class="uk-nav-sub">
276
- <li><a href="#">Sub item</a></li>
272
+ <li class="uk-active"><a href="#">Active</a></li>
277
273
  <li><a href="#">Sub item</a></li>
278
274
  </ul>
279
275
  </li>
280
276
  <li class="uk-nav-header">Header</li>
281
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
282
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
277
+ <li><a href="#">
278
+ <span class="uk-margin-small-right uk-preserve-width" uk-icon="icon: table; ratio: 1"></span>
279
+ <div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div>
280
+ </a></li>
281
+ <li><a href="#">
282
+ <span class="uk-margin-small-right uk-preserve-width" uk-icon="icon: thumbnails; ratio: 1"></span>
283
+ <div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div>
284
+ </a></li>
283
285
  <li class="uk-nav-divider"></li>
284
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
286
+ <li><a href="#">
287
+ <span class="uk-margin-small-right uk-preserve-width" uk-icon="icon: trash; ratio: 1"></span>
288
+ <div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div>
289
+ </a></li>
285
290
  </ul>
286
291
 
287
292
  </div>
288
- </div>
289
-
290
- <div class="uk-child-width-1-4@m" uk-grid>
291
293
  <div>
292
294
 
293
- <h2>Default</h2>
294
-
295
- <ul class="uk-nav uk-nav-default">
296
- <li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li>
297
- <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li>
298
- <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li>
299
- <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li>
295
+ <h2>Icon + Grid Top</h2>
296
+
297
+ <ul class="uk-nav uk-nav-secondary">
298
+ <li class="uk-active"><a href="#">
299
+ <div class="uk-grid uk-grid-small">
300
+ <div class="uk-width-auto"><span uk-icon="icon: settings; ratio: 1.5"></span></div>
301
+ <div class="uk-width-expand">Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div>
302
+ </div>
303
+ </a></li>
304
+ <li><a href="#">
305
+ <div class="uk-grid uk-grid-small">
306
+ <div class="uk-width-auto"><span uk-icon="icon: bell; ratio: 1.5"></span></div>
307
+ <div class="uk-width-expand">Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div>
308
+ </div>
309
+ </a></li>
310
+ <li><a href="#">
311
+ <div class="uk-grid uk-grid-small">
312
+ <div class="uk-width-auto"><span uk-icon="icon: microphone; ratio: 1.5"></span></div>
313
+ <div class="uk-width-expand">Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div>
314
+ </div>
315
+ </a></li>
316
+ <li><a href="#">
317
+ <div class="uk-grid uk-grid-small">
318
+ <div class="uk-width-auto"><span uk-icon="icon: camera; ratio: 1.5"></span></div>
319
+ <div class="uk-width-expand">Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div>
320
+ </div>
321
+ </a></li>
300
322
  </ul>
301
323
 
302
324
  </div>
303
325
  <div>
304
326
 
305
- <h2>Primary</h2>
306
-
307
- <ul class="uk-nav uk-nav-primary">
308
- <li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div></a></li>
309
- <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div></a></li>
310
- <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div></a></li>
311
- <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div></a></li>
327
+ <h2>Icon + Grid Middle</h2>
328
+
329
+ <ul class="uk-nav uk-nav-secondary">
330
+ <li class="uk-active"><a href="#">
331
+ <div class="uk-grid uk-grid-small uk-flex-middle">
332
+ <div class="uk-width-auto"><span uk-icon="icon: settings; ratio: 1.5"></span></div>
333
+ <div class="uk-width-expand">Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div>
334
+ </div>
335
+ </a></li>
336
+ <li><a href="#">
337
+ <div class="uk-grid uk-grid-small uk-flex-middle">
338
+ <div class="uk-width-auto"><span uk-icon="icon: bell; ratio: 1.5"></span></div>
339
+ <div class="uk-width-expand">Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div>
340
+ </div>
341
+ </a></li>
342
+ <li><a href="#">
343
+ <div class="uk-grid uk-grid-small uk-flex-middle">
344
+ <div class="uk-width-auto"><span uk-icon="icon: microphone; ratio: 1.5"></span></div>
345
+ <div class="uk-width-expand">Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div>
346
+ </div>
347
+ </a></li>
348
+ <li><a href="#">
349
+ <div class="uk-grid uk-grid-small uk-flex-middle">
350
+ <div class="uk-width-auto"><span uk-icon="icon: camera; ratio: 1.5"></span></div>
351
+ <div class="uk-width-expand">Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div>
352
+ </div>
353
+ </a></li>
312
354
  </ul>
313
355
 
314
356
  </div>
@@ -372,7 +414,7 @@
372
414
  <td><code>animation</code></td>
373
415
  <td>String</td>
374
416
  <td>true</td>
375
- <td>The space separated names of animations to use. (Comma separate for animation out)</td>
417
+ <td>Space-separated names of animations. Comma-separated for animation out.</td>
376
418
  </tr>
377
419
  <tr>
378
420
  <td><code>duration</code></td>
@@ -387,14 +429,14 @@
387
429
 
388
430
  <script>
389
431
 
390
- var options = UIkit.util.$$('#js-divider-switcher option').map(function (option) { return option.value; });
432
+ const {$$, addClass, on, removeClass } = UIkit.util;
391
433
 
392
- UIkit.util.on('#js-divider-switcher', 'change', function () {
393
- var value = this.value;
394
- UIkit.util.$$('.uk-nav').forEach(function (table) {
395
- UIkit.util.removeClass(table, options);
396
- UIkit.util.addClass(table, value);
397
- });
434
+ on('#js-divider-switcher', 'change', (e) => {
435
+ const options = $$('option', e.target).map(({value}) => value);
436
+ for (const el of $$('.uk-nav')) {
437
+ removeClass(el, options);
438
+ addClass(el, e.target.value);
439
+ }
398
440
  });
399
441
 
400
442
  </script>