uikit 3.14.4-dev.e2919bbf7 → 3.14.4-dev.eb440d70c

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 (122) hide show
  1. package/CHANGELOG.md +30 -17
  2. package/build/util.js +1 -0
  3. package/dist/css/uikit-core-rtl.css +281 -61
  4. package/dist/css/uikit-core-rtl.min.css +1 -1
  5. package/dist/css/uikit-core.css +281 -61
  6. package/dist/css/uikit-core.min.css +1 -1
  7. package/dist/css/uikit-rtl.css +301 -65
  8. package/dist/css/uikit-rtl.min.css +1 -1
  9. package/dist/css/uikit.css +301 -65
  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 +1 -1
  14. package/dist/js/components/filter.min.js +1 -1
  15. package/dist/js/components/lightbox-panel.js +96 -131
  16. package/dist/js/components/lightbox-panel.min.js +1 -1
  17. package/dist/js/components/lightbox.js +96 -131
  18. package/dist/js/components/lightbox.min.js +1 -1
  19. package/dist/js/components/notification.js +4 -2
  20. package/dist/js/components/notification.min.js +1 -1
  21. package/dist/js/components/parallax.js +2 -2
  22. package/dist/js/components/parallax.min.js +1 -1
  23. package/dist/js/components/slider-parallax.js +2 -2
  24. package/dist/js/components/slider-parallax.min.js +1 -1
  25. package/dist/js/components/slider.js +1 -1
  26. package/dist/js/components/slider.min.js +1 -1
  27. package/dist/js/components/slideshow-parallax.js +2 -2
  28. package/dist/js/components/slideshow-parallax.min.js +1 -1
  29. package/dist/js/components/slideshow.js +1 -1
  30. package/dist/js/components/slideshow.min.js +1 -1
  31. package/dist/js/components/sortable.js +1 -1
  32. package/dist/js/components/sortable.min.js +1 -1
  33. package/dist/js/components/tooltip.js +99 -136
  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 +483 -455
  38. package/dist/js/uikit-core.min.js +17 -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 +486 -456
  42. package/dist/js/uikit.min.js +17 -1
  43. package/package.json +11 -11
  44. package/src/images/components/navbar-toggle-icon.svg +25 -3
  45. package/src/js/api/hooks.js +5 -1
  46. package/src/js/api/state.js +2 -2
  47. package/src/js/components/notification.js +3 -1
  48. package/src/js/core/accordion.js +9 -17
  49. package/src/js/core/alert.js +35 -14
  50. package/src/js/core/drop.js +110 -82
  51. package/src/js/core/height-viewport.js +4 -2
  52. package/src/js/core/navbar.js +30 -45
  53. package/src/js/core/scroll.js +37 -10
  54. package/src/js/core/toggle.js +3 -5
  55. package/src/js/mixin/media.js +1 -1
  56. package/src/js/mixin/modal.js +15 -12
  57. package/src/js/mixin/position.js +21 -22
  58. package/src/js/mixin/style.js +11 -0
  59. package/src/js/mixin/togglable.js +88 -124
  60. package/src/js/util/animation.js +9 -7
  61. package/src/js/util/class.js +3 -1
  62. package/src/js/util/filter.js +3 -7
  63. package/src/js/util/position.js +107 -107
  64. package/src/js/util/viewport.js +3 -5
  65. package/src/less/components/_import.less +1 -0
  66. package/src/less/components/drop.less +1 -18
  67. package/src/less/components/dropbar.less +126 -0
  68. package/src/less/components/dropdown.less +6 -20
  69. package/src/less/components/nav.less +211 -22
  70. package/src/less/components/navbar.less +17 -51
  71. package/src/less/theme/_import.less +1 -0
  72. package/src/less/theme/dropbar.less +44 -0
  73. package/src/less/theme/dropdown.less +0 -11
  74. package/src/less/theme/nav.less +46 -0
  75. package/src/less/theme/navbar.less +1 -5
  76. package/src/scss/components/_import.scss +1 -0
  77. package/src/scss/components/drop.scss +1 -18
  78. package/src/scss/components/dropbar.scss +126 -0
  79. package/src/scss/components/dropdown.scss +6 -20
  80. package/src/scss/components/nav.scss +160 -21
  81. package/src/scss/components/navbar.scss +17 -51
  82. package/src/scss/mixins-theme.scss +78 -7
  83. package/src/scss/mixins.scss +75 -3
  84. package/src/scss/theme/_import.scss +1 -0
  85. package/src/scss/theme/dropbar.scss +44 -0
  86. package/src/scss/theme/dropdown.scss +0 -8
  87. package/src/scss/theme/nav.scss +44 -0
  88. package/src/scss/theme/navbar.scss +1 -5
  89. package/src/scss/variables-theme.scss +54 -9
  90. package/src/scss/variables.scss +43 -7
  91. package/tests/accordion.html +2 -2
  92. package/tests/alert.html +2 -2
  93. package/tests/countdown.html +1 -1
  94. package/tests/drop.html +446 -416
  95. package/tests/dropbar.html +458 -0
  96. package/tests/dropdown.html +8 -470
  97. package/tests/filter.html +9 -12
  98. package/tests/form.html +1 -1
  99. package/tests/index.html +124 -105
  100. package/tests/js/index.js +1 -4
  101. package/tests/lightbox.html +5 -5
  102. package/tests/list.html +8 -8
  103. package/tests/modal.html +13 -13
  104. package/tests/nav.html +121 -12
  105. package/tests/navbar.html +112 -227
  106. package/tests/offcanvas.html +10 -14
  107. package/tests/parallax.html +1 -1
  108. package/tests/position.html +18 -16
  109. package/tests/progress.html +9 -9
  110. package/tests/scroll.html +7 -10
  111. package/tests/search.html +6 -6
  112. package/tests/slider.html +6 -5
  113. package/tests/slideshow.html +8 -8
  114. package/tests/sortable.html +6 -8
  115. package/tests/sticky-navbar.html +15 -15
  116. package/tests/sticky.html +8 -8
  117. package/tests/switcher.html +1 -1
  118. package/tests/tab.html +1 -1
  119. package/tests/table.html +7 -7
  120. package/tests/toggle.html +2 -2
  121. package/tests/tooltip.html +1 -1
  122. package/tests/upload.html +11 -11
package/tests/dropdown.html CHANGED
@@ -77,7 +77,7 @@
77
77
 
78
78
  <div class="uk-dropdown test">
79
79
 
80
- <ul class="uk-nav uk-dropdown-nav">
80
+ <ul class="uk-nav uk-nav-secondary">
81
81
  <li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
82
82
  <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
83
83
  <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
@@ -91,91 +91,6 @@
91
91
 
92
92
  <div class="uk-margin" uk-margin>
93
93
 
94
- <div class="uk-inline">
95
- <button class="uk-button uk-button-default" type="button">Hover, Click</button>
96
- <div uk-dropdown>
97
- <ul class="uk-nav uk-dropdown-nav">
98
- <li class="uk-active"><a href="#">Active</a></li>
99
- <li class="uk-parent">
100
- <a href="#">Parent</a>
101
- <ul class="uk-nav-sub">
102
- <li><a href="#">Sub item</a></li>
103
- <li><a href="#">Sub item</a></li>
104
- </ul>
105
- </li>
106
- <li class="uk-nav-header">Header</li>
107
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
108
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
109
- <li class="uk-nav-divider"></li>
110
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
111
- </ul>
112
- </div>
113
- </div>
114
-
115
- <div class="uk-inline">
116
- <button class="uk-button uk-button-default" type="button">Click only</button>
117
- <div uk-dropdown="mode: click">
118
- <ul class="uk-nav uk-dropdown-nav">
119
- <li class="uk-active"><a href="#">Active</a></li>
120
- <li class="uk-parent">
121
- <a href="#">Parent</a>
122
- <ul class="uk-nav-sub">
123
- <li><a href="#">Sub item</a></li>
124
- <li><a href="#">Sub item</a></li>
125
- </ul>
126
- </li>
127
- <li class="uk-nav-header">Header</li>
128
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
129
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
130
- <li class="uk-nav-divider"></li>
131
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
132
- </ul>
133
- </div>
134
- </div>
135
-
136
- <div class="uk-inline">
137
- <button class="uk-button uk-button-default" type="button">Hover only</button>
138
- <div uk-dropdown="mode: hover">
139
- <ul class="uk-nav uk-dropdown-nav">
140
- <li class="uk-active"><a href="#">Active</a></li>
141
- <li class="uk-parent">
142
- <a href="#">Parent</a>
143
- <ul class="uk-nav-sub">
144
- <li><a href="#">Sub item</a></li>
145
- <li><a href="#">Sub item</a></li>
146
- </ul>
147
- </li>
148
- <li class="uk-nav-header">Header</li>
149
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
150
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
151
- <li class="uk-nav-divider"></li>
152
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
153
- </ul>
154
- </div>
155
- </div>
156
-
157
- <div class="uk-inline">
158
- <button class="uk-button uk-button-default" type="button">Out Animation</button>
159
- <div uk-dropdown="animate-out: true">
160
- <ul class="uk-nav uk-dropdown-nav">
161
- <li class="uk-active"><a href="#">Active</a></li>
162
- <li><a href="#">Item</a></li>
163
- <li><a href="#">Item</a></li>
164
- </ul>
165
- </div>
166
- </div>
167
-
168
- <div class="uk-inline">
169
- <button class="uk-button uk-button-default" type="button" disabled>Disabled</button>
170
- <div uk-dropdown="mode: click">
171
- <ul class="uk-nav uk-dropdown-nav">
172
- <li class="uk-active"><a href="#">Active</a></li>
173
- <li><a href="#">Item</a></li>
174
- <li><a href="#">Item</a></li>
175
- </ul>
176
- </div>
177
- </div>
178
-
179
94
  <div class="uk-inline">
180
95
  <button class="uk-button uk-button-default" type="button">Scrollable</button>
181
96
  <div class="uk-overflow-auto uk-height-medium" uk-dropdown>
@@ -197,19 +112,6 @@
197
112
  </div>
198
113
  </div>
199
114
 
200
- <div class="uk-inline">
201
- <button class="uk-button uk-button-default" type="button" uk-toggle="target: ~div; mode: click,hover">Same</button>
202
- <button class="uk-button uk-button-default" type="button" uk-toggle="target: ~div; mode: click,hover">Same</button>
203
- <button class="uk-button uk-button-default" type="button">Target</button>
204
- <div uk-dropdown>
205
- <ul class="uk-nav uk-dropdown-nav">
206
- <li class="uk-active"><a href="#">Active</a></li>
207
- <li><a href="#">Item</a></li>
208
- <li><a href="#">Item</a></li>
209
- </ul>
210
- </div>
211
- </div>
212
-
213
115
  </div>
214
116
 
215
117
  <h2>Position</h2>
@@ -249,17 +151,6 @@
249
151
  </div>
250
152
  </div>
251
153
 
252
- <div class="uk-inline">
253
- <button class="uk-button uk-button-default" type="button">Bottom Justify</button>
254
- <div uk-dropdown="pos: bottom-justify">
255
- <ul class="uk-nav uk-dropdown-nav">
256
- <li class="uk-active"><a href="#">Active</a></li>
257
- <li><a href="#">Item</a></li>
258
- <li><a href="#">Item</a></li>
259
- </ul>
260
- </div>
261
- </div>
262
-
263
154
  </div>
264
155
 
265
156
  <div class="uk-margin" uk-margin>
@@ -297,17 +188,6 @@
297
188
  </div>
298
189
  </div>
299
190
 
300
- <div class="uk-inline">
301
- <button class="uk-button uk-button-default" type="button">Top Justify</button>
302
- <div uk-dropdown="pos: top-justify">
303
- <ul class="uk-nav uk-dropdown-nav">
304
- <li class="uk-active"><a href="#">Active</a></li>
305
- <li><a href="#">Item</a></li>
306
- <li><a href="#">Item</a></li>
307
- </ul>
308
- </div>
309
- </div>
310
-
311
191
  </div>
312
192
 
313
193
  <div class="uk-margin" uk-margin>
@@ -387,360 +267,18 @@
387
267
  </div>
388
268
  </div>
389
269
 
390
- <h2>Stretch</h2>
391
-
392
- <div class="uk-margin" uk-margin>
393
-
394
- <div class="uk-inline">
395
- <button class="uk-button uk-button-default" type="button">Bottom Fade</button>
396
- <div uk-dropdown="pos: bottom-stretch; animate-out: true">
397
- <ul class="uk-nav uk-dropdown-nav">
398
- <li class="uk-active"><a href="#">Active</a></li>
399
- <li><a href="#">Item</a></li>
400
- <li><a href="#">Item</a></li>
401
- </ul>
402
- </div>
403
- </div>
404
-
405
- <div class="uk-inline">
406
- <button class="uk-button uk-button-default" type="button">Bottom Slide</button>
407
- <div uk-dropdown="pos: bottom-stretch; animate-out: true; animation: slide">
408
- <ul class="uk-nav uk-dropdown-nav">
409
- <li class="uk-active"><a href="#">Active</a></li>
410
- <li><a href="#">Item</a></li>
411
- <li><a href="#">Item</a></li>
412
- </ul>
413
- </div>
414
- </div>
415
-
416
- <div class="uk-inline">
417
- <button class="uk-button uk-button-default" type="button">Bottom Slide Left</button>
418
- <div uk-dropdown="pos: bottom-stretch; animate-out: true; animation: slide-left">
419
- <ul class="uk-nav uk-dropdown-nav">
420
- <li class="uk-active"><a href="#">Active</a></li>
421
- <li><a href="#">Item</a></li>
422
- <li><a href="#">Item</a></li>
423
- </ul>
424
- </div>
425
- </div>
426
-
427
- <div class="uk-inline">
428
- <button class="uk-button uk-button-default" type="button">Bottom Slide Right</button>
429
- <div uk-dropdown="pos: bottom-stretch; animate-out: true; animation: slide-right">
430
- <ul class="uk-nav uk-dropdown-nav">
431
- <li class="uk-active"><a href="#">Active</a></li>
432
- <li><a href="#">Item</a></li>
433
- <li><a href="#">Item</a></li>
434
- </ul>
435
- </div>
436
- </div>
437
-
438
- </div>
439
-
440
- <div class="uk-margin" uk-margin>
441
-
442
- <div class="uk-inline">
443
- <button class="uk-button uk-button-default" type="button">Top Fade</button>
444
- <div uk-dropdown="pos: top-stretch; animate-out: true">
445
- <ul class="uk-nav uk-dropdown-nav">
446
- <li class="uk-active"><a href="#">Active</a></li>
447
- <li><a href="#">Item</a></li>
448
- <li><a href="#">Item</a></li>
449
- </ul>
450
- </div>
451
- </div>
452
-
453
- <div class="uk-inline">
454
- <button class="uk-button uk-button-default" type="button">Top Slide</button>
455
- <div uk-dropdown="pos: top-stretch; animate-out: true; animation: slide">
456
- <ul class="uk-nav uk-dropdown-nav">
457
- <li class="uk-active"><a href="#">Active</a></li>
458
- <li><a href="#">Item</a></li>
459
- <li><a href="#">Item</a></li>
460
- </ul>
461
- </div>
462
- </div>
463
-
464
- <div class="uk-inline">
465
- <button class="uk-button uk-button-default" type="button">Top Slide Left</button>
466
- <div uk-dropdown="pos: top-stretch; animate-out: true; animation: slide-left">
467
- <ul class="uk-nav uk-dropdown-nav">
468
- <li class="uk-active"><a href="#">Active</a></li>
469
- <li><a href="#">Item</a></li>
470
- <li><a href="#">Item</a></li>
471
- </ul>
472
- </div>
473
- </div>
474
-
475
- <div class="uk-inline">
476
- <button class="uk-button uk-button-default" type="button">Top Slide Right</button>
477
- <div uk-dropdown="pos: top-stretch; animate-out: true; animation: slide-right">
478
- <ul class="uk-nav uk-dropdown-nav">
479
- <li class="uk-active"><a href="#">Active</a></li>
480
- <li><a href="#">Item</a></li>
481
- <li><a href="#">Item</a></li>
482
- </ul>
483
- </div>
484
- </div>
485
-
486
- </div>
487
-
488
- <div class="uk-margin" uk-margin>
489
-
490
- <div class="uk-inline">
491
- <button class="uk-button uk-button-default" type="button">Left Fade</button>
492
- <div uk-dropdown="pos: left-stretch; animate-out: true">
493
- <ul class="uk-nav uk-dropdown-nav">
494
- <li class="uk-active"><a href="#">Active</a></li>
495
- <li><a href="#">Item</a></li>
496
- <li><a href="#">Item</a></li>
497
- </ul>
498
- </div>
499
- </div>
500
-
501
- <div class="uk-inline">
502
- <button class="uk-button uk-button-default" type="button">Left Slide</button>
503
- <div uk-dropdown="pos: left-stretch; animate-out: true; animation: slide">
504
- <ul class="uk-nav uk-dropdown-nav">
505
- <li class="uk-active"><a href="#">Active</a></li>
506
- <li><a href="#">Item</a></li>
507
- <li><a href="#">Item</a></li>
508
- </ul>
509
- </div>
510
- </div>
511
-
512
- <div class="uk-inline">
513
- <button class="uk-button uk-button-default" type="button">Left Slide Left</button>
514
- <div uk-dropdown="pos: left-stretch; animate-out: true; animation: slide-left">
515
- <ul class="uk-nav uk-dropdown-nav">
516
- <li class="uk-active"><a href="#">Active</a></li>
517
- <li><a href="#">Item</a></li>
518
- <li><a href="#">Item</a></li>
519
- </ul>
520
- </div>
521
- </div>
522
-
523
- <div class="uk-inline">
524
- <button class="uk-button uk-button-default" type="button">Left Slide Right</button>
525
- <div uk-dropdown="pos: left-stretch; animate-out: true; animation: slide-right">
526
- <ul class="uk-nav uk-dropdown-nav">
527
- <li class="uk-active"><a href="#">Active</a></li>
528
- <li><a href="#">Item</a></li>
529
- <li><a href="#">Item</a></li>
530
- </ul>
531
- </div>
532
- </div>
533
-
534
- </div>
535
-
536
- <div class="uk-margin" uk-margin>
537
-
538
- <div class="uk-inline">
539
- <button class="uk-button uk-button-default" type="button">Right Fade</button>
540
- <div uk-dropdown="pos: right-stretch; animate-out: true">
541
- <ul class="uk-nav uk-dropdown-nav">
542
- <li class="uk-active"><a href="#">Active</a></li>
543
- <li><a href="#">Item</a></li>
544
- <li><a href="#">Item</a></li>
545
- </ul>
546
- </div>
547
- </div>
548
-
549
- <div class="uk-inline">
550
- <button class="uk-button uk-button-default" type="button">Right Slide</button>
551
- <div uk-dropdown="pos: right-stretch; animate-out: true; animation: slide">
552
- <ul class="uk-nav uk-dropdown-nav">
553
- <li class="uk-active"><a href="#">Active</a></li>
554
- <li><a href="#">Item</a></li>
555
- <li><a href="#">Item</a></li>
556
- </ul>
557
- </div>
558
- </div>
559
-
560
- <div class="uk-inline">
561
- <button class="uk-button uk-button-default" type="button">Right Slide Left</button>
562
- <div uk-dropdown="pos: right-stretch; animate-out: true; animation: slide-left">
563
- <ul class="uk-nav uk-dropdown-nav">
564
- <li class="uk-active"><a href="#">Active</a></li>
565
- <li><a href="#">Item</a></li>
566
- <li><a href="#">Item</a></li>
567
- </ul>
568
- </div>
569
- </div>
570
-
571
- <div class="uk-inline">
572
- <button class="uk-button uk-button-default" type="button">Right Slide Right</button>
573
- <div uk-dropdown="pos: right-stretch; animate-out: true; animation: slide-right">
574
- <ul class="uk-nav uk-dropdown-nav">
575
- <li class="uk-active"><a href="#">Active</a></li>
576
- <li><a href="#">Item</a></li>
577
- <li><a href="#">Item</a></li>
578
- </ul>
579
- </div>
580
- </div>
581
-
582
- </div>
583
-
584
- <div class="uk-child-width-1-4@m" uk-grid>
585
- <div>
586
- <div class="scroll-container uk-height-large uk-resize-vertical">
587
-
588
- <div class="uk-text-center"><button class="uk-button uk-button-default" type="button">Bottom Fade</button></div>
589
- <div uk-dropdown="pos: bottom-stretch; animate-out: true">
590
- <ul class="uk-nav uk-dropdown-nav">
591
- <li class="uk-active"><a href="#">Active</a></li>
592
- <li><a href="#">Item</a></li>
593
- <li><a href="#">Item</a></li>
594
- </ul>
595
- </div>
596
-
597
- </div>
598
- </div>
599
- <div>
600
- <div class="scroll-container uk-height-large uk-resize-vertical">
601
-
602
- <div class="uk-text-center"><button class="uk-button uk-button-default" type="button">Bottom Slide</button></div>
603
- <div uk-dropdown="pos: bottom-stretch; animate-out: true; animation: slide">
604
- <ul class="uk-nav uk-dropdown-nav">
605
- <li class="uk-active"><a href="#">Active</a></li>
606
- <li><a href="#">Item</a></li>
607
- <li><a href="#">Item</a></li>
608
- </ul>
609
- </div>
610
-
611
- </div>
612
- </div>
613
- <div>
614
- <div class="scroll-container uk-height-large uk-resize-vertical">
615
-
616
- <div class="uk-text-center"><button class="uk-button uk-button-default" type="button">Bottom Slide Left</button></div>
617
- <div uk-dropdown="pos: bottom-stretch; animate-out: true; animation: slide-left">
618
- <ul class="uk-nav uk-dropdown-nav">
619
- <li class="uk-active"><a href="#">Active</a></li>
620
- <li><a href="#">Item</a></li>
621
- <li><a href="#">Item</a></li>
622
- </ul>
623
- </div>
624
-
625
- </div>
626
- </div>
627
- <div>
628
- <div class="scroll-container uk-height-large uk-resize-vertical">
629
-
630
- <div class="uk-text-center"><button class="uk-button uk-button-default" type="button">Bottom Slide Right</button></div>
631
- <div uk-dropdown="pos: bottom-stretch; animate-out: true; animation: slide-right">
632
- <ul class="uk-nav uk-dropdown-nav">
633
- <li class="uk-active"><a href="#">Active</a></li>
634
- <li><a href="#">Item</a></li>
635
- <li><a href="#">Item</a></li>
636
- </ul>
637
- </div>
638
-
639
- </div>
640
- </div>
641
- </div>
642
-
643
- <h2>JavaScript Options</h2>
644
-
645
- <div class="uk-overflow-auto">
646
- <table class="uk-table uk-table-striped">
647
- <thead>
648
- <tr>
649
- <th>Option</th>
650
- <th>Value</th>
651
- <th>Default</th>
652
- <th>Description</th>
653
- </tr>
654
- </thead>
655
- <tbody>
656
- <tr>
657
- <td><code>toggle</code></td>
658
- <td>String, Boolean</td>
659
- <td>'- *'</td>
660
- <td>CSS selector for the element to be used as toggle. By default, the preceding element is used.</td>
661
- </tr>
662
- <tr>
663
- <td><code>pos</code></td>
664
- <td>String</td>
665
- <td>'bottom-left'</td>
666
- <td>Dropdown position.</td>
667
- </tr>
668
- <tr>
669
- <td><code>mode</code></td>
670
- <td>hover | click</td>
671
- <td>click,hover</td>
672
- <td>Comma separated list of dropdown trigger behaviour modes.</td>
673
- </tr>
674
- <tr>
675
- <td><code>delay-show</code></td>
676
- <td>Number</td>
677
- <td>0</td>
678
- <td>Delay time in hover mode before a Dropdown is shown in ms.</td>
679
- </tr>
680
- <tr>
681
- <td><code>delay-hide</code></td>
682
- <td>Number</td>
683
- <td>800</td>
684
- <td>Delay time in hover mode before a Dropdown is hidden in ms.</td>
685
- </tr>
686
- <tr>
687
- <td><code>boundary</code></td>
688
- <td>CSS selector</td>
689
- <td>true</td>
690
- <td>The area that the element will be checked for overflow, causing the Drop to flip. By default, it's the scrolling containers of the Drop's element.</td>
691
- </tr>
692
- <tr>
693
- <td><code>boundary-align</code></td>
694
- <td>Boolean</td>
695
- <td>false</td>
696
- <td>Align Drop to boundary.</td>
697
- </tr>
698
- <tr>
699
- <td><code>flip</code></td>
700
- <td>false|true|'x'|'y'</td>
701
- <td>true</td>
702
- <td>Automatic Dropdown flip.</td>
703
- </tr>
704
- <tr>
705
- <td><code>offset</code></td>
706
- <td>Number</td>
707
- <td>0</td>
708
- <td>The offset of the Dropdown container.</td>
709
- </tr>
710
- <tr>
711
- <td><code>animation</code></td>
712
- <td>String</td>
713
- <td>false</td>
714
- <td>The space separated names of animations to use.</td>
715
- </tr>
716
- <tr>
717
- <td><code>duration</code></td>
718
- <td>Number</td>
719
- <td>200</td>
720
- <td>The animation duration.</td>
721
- </tr>
722
- <tr>
723
- <td><code>container</code></td>
724
- <td>Boolean</td>
725
- <td>false</td>
726
- <td>Define a target container via a selector to specify where the drop should be appended in the DOM.</td>
727
- </tr>
728
- </tbody>
729
- </table>
730
- </div>
731
-
732
270
  </div>
733
271
 
734
272
  <script>
735
273
 
736
- var options = UIkit.util.$$('#js-size-switcher option').map(function (option) { return option.value; });
274
+ const {$$, addClass, on, removeClass } = UIkit.util;
737
275
 
738
- UIkit.util.on('#js-size-switcher', 'change', function () {
739
- var value = this.value;
740
- UIkit.util.$$('.uk-dropdown').forEach(function (table) {
741
- UIkit.util.removeClass(table, options);
742
- UIkit.util.addClass(table, value);
743
- });
276
+ on('#js-size-switcher', 'change', (e) => {
277
+ const options = $$('option', e.target).map(({value}) => value);
278
+ for (const dropdown of $$('.uk-dropdown')) {
279
+ removeClass(dropdown, options);
280
+ addClass(dropdown, e.target.value);
281
+ }
744
282
  });
745
283
 
746
284
  </script>
package/tests/filter.html CHANGED
@@ -20,18 +20,15 @@
20
20
 
21
21
  <script>
22
22
 
23
- var util = UIkit.util;
24
-
25
- util.ready(function () {
26
-
27
- util.on(document.body, 'beforeFilter afterFilter', function (e, filter, state) {
28
- console.log(e.type, filter, state);
29
- });
30
-
31
- util.on('#js-animation-switcher', 'change', function () {
32
- util.attr(util.$$('.js-filter-animation'), 'animation', this.value);
33
- });
34
-
23
+ const {$$, attr, on, ready} = UIkit.util;
24
+
25
+ ready(() => {
26
+ on(document.body, 'beforeFilter afterFilter', (e, filter, state) =>
27
+ console.log(e.type, filter, state)
28
+ );
29
+ on('#js-animation-switcher', 'change', () =>
30
+ attr($$('.js-filter-animation'), 'animation', this.value)
31
+ );
35
32
  });
36
33
 
37
34
  </script>
package/tests/form.html CHANGED
@@ -313,7 +313,7 @@
313
313
  <label><input class="uk-checkbox js-indeterminate" type="checkbox" disabled> D</label>
314
314
  </div>
315
315
 
316
- <script>UIkit.util.$$('.js-indeterminate').forEach(function (el) { el.indeterminate = true; })</script>
316
+ <script>UIkit.util.$$('.js-indeterminate').forEach(el => { el.indeterminate = true; })</script>
317
317
 
318
318
  </div>
319
319