uikit 3.11.2-dev.f2970ffaa → 3.12.0

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 (226) 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 +55 -19
  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 +133 -201
  19. package/dist/css/uikit-core-rtl.min.css +1 -1
  20. package/dist/css/uikit-core.css +133 -201
  21. package/dist/css/uikit-core.min.css +1 -1
  22. package/dist/css/uikit-rtl.css +135 -207
  23. package/dist/css/uikit-rtl.min.css +1 -1
  24. package/dist/css/uikit.css +135 -207
  25. package/dist/css/uikit.min.css +1 -1
  26. package/dist/js/components/countdown.js +66 -138
  27. package/dist/js/components/countdown.min.js +1 -1
  28. package/dist/js/components/filter.js +408 -439
  29. package/dist/js/components/filter.min.js +1 -1
  30. package/dist/js/components/lightbox-panel.js +1091 -1319
  31. package/dist/js/components/lightbox-panel.min.js +1 -1
  32. package/dist/js/components/lightbox.js +1137 -1396
  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 +347 -372
  37. package/dist/js/components/parallax.min.js +1 -1
  38. package/dist/js/components/slider-parallax.js +345 -360
  39. package/dist/js/components/slider-parallax.min.js +1 -1
  40. package/dist/js/components/slider.js +749 -843
  41. package/dist/js/components/slider.min.js +1 -1
  42. package/dist/js/components/slideshow-parallax.js +345 -360
  43. package/dist/js/components/slideshow-parallax.min.js +1 -1
  44. package/dist/js/components/slideshow.js +628 -798
  45. package/dist/js/components/slideshow.min.js +1 -1
  46. package/dist/js/components/sortable.js +587 -620
  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 +156 -167
  51. package/dist/js/components/upload.min.js +1 -1
  52. package/dist/js/uikit-core.js +5324 -6527
  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 +8006 -9663
  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 +15 -28
  62. package/src/js/api/global.js +6 -12
  63. package/src/js/api/hooks.js +14 -33
  64. package/src/js/api/instance.js +7 -15
  65. package/src/js/api/state.js +199 -187
  66. package/src/js/components/countdown.js +32 -85
  67. package/src/js/components/filter.js +70 -66
  68. package/src/js/components/index.js +13 -13
  69. package/src/js/components/internal/lightbox-animations.js +14 -25
  70. package/src/js/components/internal/slider-preload.js +9 -0
  71. package/src/js/components/internal/slider-transitioner.js +66 -45
  72. package/src/js/components/internal/slideshow-animations.js +46 -64
  73. package/src/js/components/lightbox-panel.js +107 -105
  74. package/src/js/components/lightbox.js +17 -39
  75. package/src/js/components/notification.js +49 -43
  76. package/src/js/components/parallax.js +21 -46
  77. package/src/js/components/slider-parallax.js +13 -23
  78. package/src/js/components/slider.js +117 -89
  79. package/src/js/components/slideshow-parallax.js +1 -1
  80. package/src/js/components/slideshow.js +15 -13
  81. package/src/js/components/sortable.js +125 -106
  82. package/src/js/components/tooltip.js +41 -31
  83. package/src/js/components/upload.js +53 -63
  84. package/src/js/core/accordion.js +58 -48
  85. package/src/js/core/alert.js +9 -17
  86. package/src/js/core/core.js +17 -69
  87. package/src/js/core/cover.js +15 -15
  88. package/src/js/core/drop.js +110 -94
  89. package/src/js/core/form-custom.js +22 -27
  90. package/src/js/core/gif.js +3 -7
  91. package/src/js/core/grid.js +57 -58
  92. package/src/js/core/height-match.js +16 -29
  93. package/src/js/core/height-viewport.js +30 -34
  94. package/src/js/core/icon.js +47 -52
  95. package/src/js/core/img.js +153 -143
  96. package/src/js/core/index.js +39 -39
  97. package/src/js/core/leader.js +9 -18
  98. package/src/js/core/margin.js +21 -37
  99. package/src/js/core/modal.js +49 -36
  100. package/src/js/core/nav.js +2 -4
  101. package/src/js/core/navbar.js +113 -85
  102. package/src/js/core/offcanvas.js +51 -54
  103. package/src/js/core/overflow-auto.js +13 -17
  104. package/src/js/core/responsive.js +14 -12
  105. package/src/js/core/scroll.js +10 -20
  106. package/src/js/core/scrollspy-nav.js +34 -31
  107. package/src/js/core/scrollspy.js +37 -54
  108. package/src/js/core/sticky.js +175 -123
  109. package/src/js/core/svg.js +68 -83
  110. package/src/js/core/switcher.js +56 -47
  111. package/src/js/core/tab.js +7 -10
  112. package/src/js/core/toggle.js +69 -68
  113. package/src/js/core/video.js +22 -21
  114. package/src/js/mixin/animate.js +19 -20
  115. package/src/js/mixin/class.js +2 -4
  116. package/src/js/mixin/container.js +7 -11
  117. package/src/js/mixin/internal/animate-fade.js +73 -30
  118. package/src/js/mixin/internal/animate-slide.js +58 -41
  119. package/src/js/mixin/internal/slideshow-animations.js +7 -14
  120. package/src/js/mixin/internal/slideshow-transitioner.js +10 -17
  121. package/src/js/mixin/lazyload.js +20 -0
  122. package/src/js/mixin/media.js +5 -10
  123. package/src/js/mixin/modal.js +89 -66
  124. package/src/js/mixin/parallax.js +149 -107
  125. package/src/js/mixin/position.js +26 -20
  126. package/src/js/mixin/slider-autoplay.js +12 -21
  127. package/src/js/mixin/slider-drag.js +64 -65
  128. package/src/js/mixin/slider-nav.js +26 -35
  129. package/src/js/mixin/slider-reactive.js +2 -8
  130. package/src/js/mixin/slider.js +47 -60
  131. package/src/js/mixin/slideshow.js +12 -22
  132. package/src/js/mixin/swipe.js +72 -0
  133. package/src/js/mixin/togglable.js +89 -63
  134. package/src/js/uikit-core.js +2 -4
  135. package/src/js/uikit.js +2 -4
  136. package/src/js/util/ajax.js +25 -40
  137. package/src/js/util/animation.js +77 -75
  138. package/src/js/util/attr.js +17 -21
  139. package/src/js/util/class.js +14 -52
  140. package/src/js/util/dimensions.js +78 -49
  141. package/src/js/util/dom.js +37 -66
  142. package/src/js/util/env.js +7 -12
  143. package/src/js/util/event.js +60 -59
  144. package/src/js/util/fastdom.js +1 -6
  145. package/src/js/util/filter.js +18 -36
  146. package/src/js/util/index.js +1 -1
  147. package/src/js/util/lang.js +82 -121
  148. package/src/js/util/mouse.js +19 -17
  149. package/src/js/util/observer.js +36 -0
  150. package/src/js/util/options.js +35 -49
  151. package/src/js/util/player.js +41 -36
  152. package/src/js/util/position.js +54 -46
  153. package/src/js/util/selector.js +43 -58
  154. package/src/js/util/style.js +39 -49
  155. package/src/js/util/viewport.js +75 -64
  156. package/src/less/components/base.less +10 -33
  157. package/src/less/components/flex.less +0 -9
  158. package/src/less/components/form-range.less +48 -95
  159. package/src/less/components/form.less +0 -1
  160. package/src/less/components/height.less +3 -0
  161. package/src/less/components/leader.less +0 -1
  162. package/src/less/components/lightbox.less +0 -1
  163. package/src/less/components/modal.less +3 -7
  164. package/src/less/components/navbar.less +0 -7
  165. package/src/less/components/progress.less +14 -36
  166. package/src/less/components/slider.less +0 -3
  167. package/src/less/components/slideshow.less +0 -3
  168. package/src/less/components/text.less +16 -32
  169. package/src/less/components/utility.less +25 -0
  170. package/src/scss/components/base.scss +10 -33
  171. package/src/scss/components/flex.scss +0 -9
  172. package/src/scss/components/form-range.scss +48 -95
  173. package/src/scss/components/form.scss +3 -4
  174. package/src/scss/components/height.scss +3 -0
  175. package/src/scss/components/icon.scss +2 -2
  176. package/src/scss/components/leader.scss +0 -1
  177. package/src/scss/components/lightbox.scss +0 -1
  178. package/src/scss/components/modal.scss +3 -7
  179. package/src/scss/components/navbar.scss +0 -7
  180. package/src/scss/components/progress.scss +14 -36
  181. package/src/scss/components/search.scss +1 -1
  182. package/src/scss/components/slider.scss +0 -3
  183. package/src/scss/components/slideshow.scss +0 -3
  184. package/src/scss/components/text.scss +16 -32
  185. package/src/scss/components/utility.scss +25 -0
  186. package/src/scss/mixins-theme.scss +1 -1
  187. package/src/scss/mixins.scss +1 -1
  188. package/src/scss/variables-theme.scss +9 -9
  189. package/src/scss/variables.scss +9 -9
  190. package/tests/align.html +10 -10
  191. package/tests/animation.html +2 -2
  192. package/tests/article.html +2 -2
  193. package/tests/base.html +3 -3
  194. package/tests/card.html +10 -10
  195. package/tests/column.html +3 -3
  196. package/tests/comment.html +9 -9
  197. package/tests/countdown.html +10 -8
  198. package/tests/dotnav.html +3 -3
  199. package/tests/image.html +296 -64
  200. package/tests/images/image-type.avif +0 -0
  201. package/tests/images/image-type.jpeg +0 -0
  202. package/tests/images/image-type.webp +0 -0
  203. package/tests/index.html +8 -8
  204. package/tests/js/index.js +114 -85
  205. package/tests/lightbox.html +10 -10
  206. package/tests/marker.html +2 -2
  207. package/tests/modal.html +8 -9
  208. package/tests/navbar.html +2 -2
  209. package/tests/overlay.html +7 -7
  210. package/tests/parallax.html +16 -7
  211. package/tests/position.html +12 -12
  212. package/tests/slidenav.html +12 -12
  213. package/tests/slider.html +20 -20
  214. package/tests/sortable.html +1 -1
  215. package/tests/sticky-parallax.html +87 -99
  216. package/tests/sticky.html +56 -24
  217. package/tests/svg.html +6 -6
  218. package/tests/table.html +11 -11
  219. package/tests/thumbnav.html +12 -12
  220. package/tests/transition.html +30 -30
  221. package/tests/utility.html +50 -33
  222. package/tests/video.html +1 -1
  223. package/tests/width.html +1 -1
  224. package/src/js/mixin/flex-bug.js +0 -56
  225. package/src/js/util/promise.js +0 -191
  226. package/tests/images/animated.gif +0 -0
package/tests/comment.html CHANGED
@@ -22,7 +22,7 @@
22
22
  <header class="uk-comment-header">
23
23
  <div class="uk-grid-medium uk-flex-middle" uk-grid>
24
24
  <div class="uk-width-auto">
25
- <img class="uk-comment-avatar" src="images/avatar.jpg" width="50" alt="">
25
+ <img class="uk-comment-avatar" src="images/avatar.jpg" width="50" height="50" alt="">
26
26
  </div>
27
27
  <div class="uk-width-expand">
28
28
  <h4 class="uk-comment-title uk-margin-remove"><a class="uk-link-reset" href="#">Author</a></h4>
@@ -43,7 +43,7 @@
43
43
  <header class="uk-comment-header uk-position-relative">
44
44
  <div class="uk-grid-medium uk-flex-middle" uk-grid>
45
45
  <div class="uk-width-auto">
46
- <img class="uk-comment-avatar" src="images/avatar.jpg" width="50" alt="">
46
+ <img class="uk-comment-avatar" src="images/avatar.jpg" width="50" height="50" alt="">
47
47
  </div>
48
48
  <div class="uk-width-expand">
49
49
  <h4 class="uk-comment-title uk-margin-remove"><a class="uk-link-reset" href="#">Author</a></h4>
@@ -62,7 +62,7 @@
62
62
  <header class="uk-comment-header uk-position-relative">
63
63
  <div class="uk-grid-medium uk-flex-middle" uk-grid>
64
64
  <div class="uk-width-auto">
65
- <img class="uk-comment-avatar" src="images/avatar.jpg" width="50" alt="">
65
+ <img class="uk-comment-avatar" src="images/avatar.jpg" width="50" height="50" alt="">
66
66
  </div>
67
67
  <div class="uk-width-expand">
68
68
  <h4 class="uk-comment-title uk-margin-remove"><a class="uk-link-reset" href="#">Author</a></h4>
@@ -81,7 +81,7 @@
81
81
  <header class="uk-comment-header uk-position-relative">
82
82
  <div class="uk-grid-medium uk-flex-middle" uk-grid>
83
83
  <div class="uk-width-auto">
84
- <img class="uk-comment-avatar" src="images/avatar.jpg" width="50" alt="">
84
+ <img class="uk-comment-avatar" src="images/avatar.jpg" width="50" height="50" alt="">
85
85
  </div>
86
86
  <div class="uk-width-expand">
87
87
  <h4 class="uk-comment-title uk-margin-remove"><a class="uk-link-reset" href="#">Author</a></h4>
@@ -100,7 +100,7 @@
100
100
  <header class="uk-comment-header uk-position-relative">
101
101
  <div class="uk-grid-medium uk-flex-middle" uk-grid>
102
102
  <div class="uk-width-auto">
103
- <img class="uk-comment-avatar" src="images/avatar.jpg" width="50" alt="">
103
+ <img class="uk-comment-avatar" src="images/avatar.jpg" width="50" height="50" alt="">
104
104
  </div>
105
105
  <div class="uk-width-expand">
106
106
  <h4 class="uk-comment-title uk-margin-remove"><a class="uk-link-reset" href="#">Author</a></h4>
@@ -123,7 +123,7 @@
123
123
  <header class="uk-comment-header uk-position-relative">
124
124
  <div class="uk-grid-medium uk-flex-middle" uk-grid>
125
125
  <div class="uk-width-auto">
126
- <img class="uk-comment-avatar" src="images/avatar.jpg" width="50" alt="">
126
+ <img class="uk-comment-avatar" src="images/avatar.jpg" width="50" height="50" alt="">
127
127
  </div>
128
128
  <div class="uk-width-expand">
129
129
  <h4 class="uk-comment-title uk-margin-remove"><a class="uk-link-reset" href="#">Author</a></h4>
@@ -145,7 +145,7 @@
145
145
  <header class="uk-comment-header uk-position-relative">
146
146
  <div class="uk-grid-medium uk-flex-middle" uk-grid>
147
147
  <div class="uk-width-auto">
148
- <img class="uk-comment-avatar" src="images/avatar.jpg" width="50" alt="">
148
+ <img class="uk-comment-avatar" src="images/avatar.jpg" width="50" height="50" alt="">
149
149
  </div>
150
150
  <div class="uk-width-expand">
151
151
  <h4 class="uk-comment-title uk-margin-remove"><a class="uk-link-reset" href="#">Author</a></h4>
@@ -164,7 +164,7 @@
164
164
  <header class="uk-comment-header uk-position-relative">
165
165
  <div class="uk-grid-medium uk-flex-middle" uk-grid>
166
166
  <div class="uk-width-auto">
167
- <img class="uk-comment-avatar" src="images/avatar.jpg" width="50" alt="">
167
+ <img class="uk-comment-avatar" src="images/avatar.jpg" width="50" height="50" alt="">
168
168
  </div>
169
169
  <div class="uk-width-expand">
170
170
  <h4 class="uk-comment-title uk-margin-remove"><a class="uk-link-reset" href="#">Author</a></h4>
@@ -183,7 +183,7 @@
183
183
  <header class="uk-comment-header uk-position-relative">
184
184
  <div class="uk-grid-medium uk-flex-middle" uk-grid>
185
185
  <div class="uk-width-auto">
186
- <img class="uk-comment-avatar" src="images/avatar.jpg" width="50" alt="">
186
+ <img class="uk-comment-avatar" src="images/avatar.jpg" width="50" height="50" alt="">
187
187
  </div>
188
188
  <div class="uk-width-expand">
189
189
  <h4 class="uk-comment-title uk-margin-remove"><a class="uk-link-reset" href="#">Author</a></h4>
package/tests/countdown.html CHANGED
@@ -16,7 +16,7 @@
16
16
 
17
17
  <h2>Grid</h2>
18
18
 
19
- <div class="uk-grid-small uk-child-width-auto uk-margin" uk-grid js-countdown>
19
+ <div class="uk-grid-small uk-child-width-auto uk-margin" uk-grid uk-countdown>
20
20
  <div>
21
21
  <div class="uk-countdown-number uk-countdown-days"></div>
22
22
  </div>
@@ -34,7 +34,7 @@
34
34
  </div>
35
35
  </div>
36
36
 
37
- <div class="uk-grid-small uk-child-width-auto" uk-grid js-countdown>
37
+ <div class="uk-grid-small uk-child-width-auto" uk-grid uk-countdown>
38
38
  <div>
39
39
  <div class="uk-countdown-number uk-countdown-days"></div>
40
40
  <div class="uk-countdown-label uk-margin-small uk-text-center uk-visible@s">Days</div>
@@ -58,7 +58,7 @@
58
58
 
59
59
  <h2>Text</h2>
60
60
 
61
- <div class="uk-margin" js-countdown>
61
+ <div class="uk-margin" uk-countdown>
62
62
  <span class="uk-countdown-number uk-countdown-days uk-text-middle"></span>
63
63
  <span class="uk-countdown-separator uk-text-middle">:</span>
64
64
  <span class="uk-countdown-number uk-countdown-hours uk-text-middle"></span>
@@ -68,7 +68,7 @@
68
68
  <span class="uk-countdown-number uk-countdown-seconds uk-text-middle"></span>
69
69
  </div>
70
70
 
71
- <div js-countdown>
71
+ <div uk-countdown>
72
72
  <span class="uk-countdown-number">
73
73
  <span class="uk-countdown-days"></span><small>d</small>
74
74
  </span>
@@ -110,11 +110,13 @@
110
110
 
111
111
  <script>
112
112
 
113
- var date = (new Date(Date.now() + 864e5 * 7)).toISOString();
113
+ let date = new Date(Date.now());
114
+ date.setDate(date.getDate() + 7);
115
+ date = date.toISOString();
114
116
 
115
- UIkit.util.$$('[js-countdown]').forEach(function(el) {
116
- UIkit.countdown(el, {date: date});
117
- });
117
+ for (const el of document.querySelectorAll('[uk-countdown]')) {
118
+ el.setAttribute('date', date);
119
+ }
118
120
 
119
121
  </script>
120
122
  </body>
package/tests/dotnav.html CHANGED
@@ -42,7 +42,7 @@
42
42
  <div>
43
43
 
44
44
  <div class="uk-inline uk-light">
45
- <img src="images/photo.jpg" alt="">
45
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
46
46
  <div class="uk-position-small uk-position-bottom-center">
47
47
  <ul class="uk-dotnav">
48
48
  <li class="uk-active"><a href="#">Item 1</a></li>
@@ -69,7 +69,7 @@
69
69
  <div>
70
70
 
71
71
  <div class="uk-inline uk-light">
72
- <img src="images/dark.jpg" alt="">
72
+ <img src="images/dark.jpg" width="1800" height="1200" alt="">
73
73
  <div class="uk-position-small uk-position-bottom-center">
74
74
  <ul class="uk-dotnav">
75
75
  <li class="uk-active"><a href="#">Item 1</a></li>
@@ -96,7 +96,7 @@
96
96
  <div>
97
97
 
98
98
  <div class="uk-inline uk-dark">
99
- <img src="images/light.jpg" alt="">
99
+ <img src="images/light.jpg" width="1800" height="1200" alt="">
100
100
  <div class="uk-position-small uk-position-bottom-center">
101
101
  <ul class="uk-dotnav">
102
102
  <li class="uk-active"><a href="#">Item 1</a></li>