uikit 3.11.2-dev.fb043abc2 → 3.12.2

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 (228) 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 +63 -20
  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 +144 -202
  19. package/dist/css/uikit-core-rtl.min.css +1 -1
  20. package/dist/css/uikit-core.css +144 -202
  21. package/dist/css/uikit-core.min.css +1 -1
  22. package/dist/css/uikit-rtl.css +146 -208
  23. package/dist/css/uikit-rtl.min.css +1 -1
  24. package/dist/css/uikit.css +146 -208
  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 -361
  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 +5317 -6554
  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 +8018 -9698
  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 +16 -30
  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 +161 -128
  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 +58 -45
  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/list.less +5 -1
  164. package/src/less/components/modal.less +3 -7
  165. package/src/less/components/navbar.less +0 -7
  166. package/src/less/components/progress.less +14 -36
  167. package/src/less/components/slider.less +3 -3
  168. package/src/less/components/slideshow.less +3 -3
  169. package/src/less/components/text.less +16 -32
  170. package/src/less/components/utility.less +25 -0
  171. package/src/scss/components/base.scss +10 -33
  172. package/src/scss/components/flex.scss +0 -9
  173. package/src/scss/components/form-range.scss +48 -95
  174. package/src/scss/components/form.scss +3 -4
  175. package/src/scss/components/height.scss +3 -0
  176. package/src/scss/components/icon.scss +2 -2
  177. package/src/scss/components/leader.scss +0 -1
  178. package/src/scss/components/lightbox.scss +0 -1
  179. package/src/scss/components/list.scss +5 -1
  180. package/src/scss/components/modal.scss +3 -7
  181. package/src/scss/components/navbar.scss +0 -7
  182. package/src/scss/components/progress.scss +14 -36
  183. package/src/scss/components/search.scss +1 -1
  184. package/src/scss/components/slider.scss +3 -3
  185. package/src/scss/components/slideshow.scss +3 -3
  186. package/src/scss/components/text.scss +16 -32
  187. package/src/scss/components/utility.scss +25 -0
  188. package/src/scss/mixins-theme.scss +1 -1
  189. package/src/scss/mixins.scss +1 -1
  190. package/src/scss/variables-theme.scss +9 -9
  191. package/src/scss/variables.scss +9 -9
  192. package/tests/align.html +10 -10
  193. package/tests/animation.html +2 -2
  194. package/tests/article.html +2 -2
  195. package/tests/base.html +3 -3
  196. package/tests/card.html +10 -10
  197. package/tests/column.html +3 -3
  198. package/tests/comment.html +9 -9
  199. package/tests/countdown.html +10 -8
  200. package/tests/dotnav.html +3 -3
  201. package/tests/image.html +296 -64
  202. package/tests/images/image-type.avif +0 -0
  203. package/tests/images/image-type.jpeg +0 -0
  204. package/tests/images/image-type.webp +0 -0
  205. package/tests/index.html +8 -8
  206. package/tests/js/index.js +114 -85
  207. package/tests/lightbox.html +10 -10
  208. package/tests/marker.html +2 -2
  209. package/tests/modal.html +8 -9
  210. package/tests/navbar.html +2 -2
  211. package/tests/overlay.html +7 -7
  212. package/tests/parallax.html +16 -7
  213. package/tests/position.html +12 -12
  214. package/tests/slidenav.html +12 -12
  215. package/tests/slider.html +20 -20
  216. package/tests/sortable.html +1 -1
  217. package/tests/sticky-parallax.html +57 -72
  218. package/tests/sticky.html +14 -3
  219. package/tests/svg.html +6 -6
  220. package/tests/table.html +11 -11
  221. package/tests/thumbnav.html +12 -12
  222. package/tests/transition.html +30 -30
  223. package/tests/utility.html +50 -33
  224. package/tests/video.html +1 -1
  225. package/tests/width.html +1 -1
  226. package/src/js/mixin/flex-bug.js +0 -56
  227. package/src/js/util/promise.js +0 -191
  228. package/tests/images/animated.gif +0 -0
@@ -1,4 +1,4 @@
1
- /*! UIkit 3.11.2-dev.fb043abc2 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
1
+ /*! UIkit 3.12.2 | 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,494 +7,480 @@
7
7
  })(this, (function (uikitUtil) { 'use strict';
8
8
 
9
9
  var Media = {
10
+ props: {
11
+ media: Boolean },
10
12
 
11
- props: {
12
- media: Boolean
13
- },
14
13
 
15
- data: {
16
- media: false
17
- },
14
+ data: {
15
+ media: false },
18
16
 
19
- computed: {
20
17
 
21
- matchMedia: function() {
22
- var media = toMedia(this.media);
23
- return !media || window.matchMedia(media).matches;
24
- }
18
+ computed: {
19
+ matchMedia() {
20
+ const media = toMedia(this.media);
21
+ return !media || window.matchMedia(media).matches;
22
+ } } };
25
23
 
26
- }
27
24
 
28
- };
29
25
 
30
26
  function toMedia(value) {
31
-
32
- if (uikitUtil.isString(value)) {
33
- if (value[0] === '@') {
34
- var name = "breakpoint-" + (value.substr(1));
35
- value = uikitUtil.toFloat(uikitUtil.getCssVar(name));
36
- } else if (isNaN(value)) {
37
- return value;
38
- }
27
+ if (uikitUtil.isString(value)) {
28
+ if (value[0] === '@') {
29
+ const name = "breakpoint-" + value.substr(1);
30
+ value = uikitUtil.toFloat(uikitUtil.getCssVar(name));
31
+ } else if (isNaN(value)) {
32
+ return value;
39
33
  }
34
+ }
40
35
 
41
- return value && !isNaN(value) ? ("(min-width: " + value + "px)") : false;
36
+ return value && !isNaN(value) ? "(min-width: " + value + "px)" : false;
42
37
  }
43
38
 
44
- uikitUtil.memoize(function (src) { return new uikitUtil.Promise(function (resolve, reject) {
45
-
46
- if (!src) {
47
- reject();
48
- return;
49
- }
50
-
51
- if (uikitUtil.startsWith(src, 'data:')) {
52
- resolve(decodeURIComponent(src.split(',')[1]));
53
- } else {
39
+ uikitUtil.memoize(async (src) => {
40
+ if (src) {
41
+ if (uikitUtil.startsWith(src, 'data:')) {
42
+ return decodeURIComponent(src.split(',')[1]);
43
+ } else {
44
+ return (await fetch(src)).text();
45
+ }
46
+ } else {
47
+ return Promise.reject();
48
+ }
49
+ });
54
50
 
55
- uikitUtil.ajax(src).then(
56
- function (xhr) { return resolve(xhr.response); },
57
- function () { return reject('SVG not found.'); }
58
- );
51
+ function getMaxPathLength(el) {
52
+ return Math.ceil(
53
+ Math.max(
54
+ 0,
55
+ ...uikitUtil.$$('[stroke]', el).map((stroke) => {
56
+ try {
57
+ return stroke.getTotalLength();
58
+ } catch (e) {
59
+ return 0;
60
+ }
61
+ })));
59
62
 
60
- }
61
- }); }
62
- );
63
63
 
64
- function getMaxPathLength(el) {
65
- return Math.ceil(Math.max.apply(Math, [ 0 ].concat( uikitUtil.$$('[stroke]', el).map(function (stroke) {
66
- try {
67
- return stroke.getTotalLength();
68
- } catch (e) {
69
- return 0;
70
- }
71
- }) )));
72
64
  }
73
65
 
74
- var props = {
75
- x: transformFn,
76
- y: transformFn,
77
- rotate: transformFn,
78
- scale: transformFn,
79
- color: colorFn,
80
- backgroundColor: colorFn,
81
- borderColor: colorFn,
82
- blur: filterFn,
83
- hue: filterFn,
84
- fopacity: filterFn,
85
- grayscale: filterFn,
86
- invert: filterFn,
87
- saturate: filterFn,
88
- sepia: filterFn,
89
- opacity: cssPropFn,
90
- stroke: strokeFn,
91
- bgx: backgroundFn,
92
- bgy: backgroundFn
93
- };
94
-
95
- var keys = Object.keys;
66
+ const props = {
67
+ x: transformFn,
68
+ y: transformFn,
69
+ rotate: transformFn,
70
+ scale: transformFn,
71
+ color: colorFn,
72
+ backgroundColor: colorFn,
73
+ borderColor: colorFn,
74
+ blur: filterFn,
75
+ hue: filterFn,
76
+ fopacity: filterFn,
77
+ grayscale: filterFn,
78
+ invert: filterFn,
79
+ saturate: filterFn,
80
+ sepia: filterFn,
81
+ opacity: cssPropFn,
82
+ stroke: strokeFn,
83
+ bgx: backgroundFn,
84
+ bgy: backgroundFn };
85
+
86
+
87
+ const { keys } = Object;
96
88
 
97
89
  var Parallax = {
90
+ mixins: [Media],
98
91
 
99
- mixins: [Media],
92
+ props: fillObject(keys(props), 'list'),
100
93
 
101
- props: fillObject(keys(props), 'list'),
94
+ data: fillObject(keys(props), undefined),
102
95
 
103
- data: fillObject(keys(props), undefined),
104
-
105
- computed: {
106
-
107
- props: function(properties, $el) {
108
- return keys(props).reduce(function (result, prop) {
109
- if (!uikitUtil.isUndefined(properties[prop])) {
110
- result[prop] = props[prop](prop, $el, properties[prop].slice());
111
- }
112
- return result;
113
- }, {});
96
+ computed: {
97
+ props(properties, $el) {
98
+ return keys(props).reduce((result, prop) => {
99
+ if (!uikitUtil.isUndefined(properties[prop])) {
100
+ result[prop] = props[prop](prop, $el, properties[prop].slice());
114
101
  }
102
+ return result;
103
+ }, {});
104
+ } },
115
105
 
116
- },
117
106
 
118
- events: {
119
- bgimageload: function() {
120
- this.$emit();
121
- }
122
- },
107
+ events: {
108
+ load() {
109
+ this.$emit();
110
+ } },
123
111
 
124
- methods: {
125
112
 
126
- reset: function() {
127
- var this$1$1 = this;
128
-
129
- uikitUtil.each(this.getCss(0), function (_, prop) { return uikitUtil.css(this$1$1.$el, prop, ''); });
130
- },
131
-
132
- getCss: function(percent) {
133
- var this$1$1 = this;
134
-
135
- return keys(this.props).reduce(function (css, prop) {
136
- this$1$1.props[prop](css, percent);
137
- return css;
138
- }, {transform: '', filter: ''});
139
- }
140
-
141
- }
113
+ methods: {
114
+ reset() {
115
+ uikitUtil.each(this.getCss(0), (_, prop) => uikitUtil.css(this.$el, prop, ''));
116
+ },
142
117
 
143
- };
118
+ getCss(percent) {
119
+ const css = { transform: '', filter: '' };
120
+ for (const prop in this.props) {
121
+ this.props[prop](css, percent);
122
+ }
123
+ return css;
124
+ } } };
144
125
 
145
- function transformFn(prop, el, steps) {
146
126
 
147
- var unit = getUnit(steps) || {x: 'px', y: 'px', rotate: 'deg'}[prop] || '';
148
127
 
149
- if (prop === 'x' || prop === 'y') {
150
- prop = "translate" + (uikitUtil.ucfirst(prop));
151
- }
128
+ function transformFn(prop, el, stops) {
129
+ const unit = getUnit(stops) || { x: 'px', y: 'px', rotate: 'deg' }[prop] || '';
130
+ let transformFn;
152
131
 
153
- steps = steps.map(uikitUtil.toFloat);
132
+ if (prop === 'x' || prop === 'y') {
133
+ prop = "translate" + uikitUtil.ucfirst(prop);
134
+ transformFn = (stop) => uikitUtil.toFloat(uikitUtil.toFloat(stop).toFixed(unit === 'px' ? 0 : 6));
135
+ }
154
136
 
155
- if (steps.length === 1) {
156
- steps.unshift(prop === 'scale' ? 1 : 0);
157
- }
137
+ if (stops.length === 1) {
138
+ stops.unshift(prop === 'scale' ? 1 : 0);
139
+ }
158
140
 
159
- return function (css, percent) {
160
- var value = getValue(steps, percent);
141
+ stops = parseStops(stops, transformFn);
161
142
 
162
- if (uikitUtil.startsWith(prop, 'translate')) {
163
- value = uikitUtil.toFloat(value).toFixed(unit === 'px' ? 0 : 6);
164
- }
165
-
166
- css.transform += " " + prop + "(" + value + unit + ")";
167
- };
143
+ return (css, percent) => {
144
+ css.transform += " " + prop + "(" + getValue(stops, percent) + unit + ")";
145
+ };
168
146
  }
169
147
 
170
- function colorFn(prop, el, steps) {
171
-
172
- if (steps.length === 1) {
173
- steps.unshift(getCssValue(el, prop, ''));
174
- }
175
-
176
- steps = steps.map(function (step) { return parseColor(el, step); });
177
-
178
- return function (css, percent) {
179
-
180
- var ref = getStep(steps, percent);
181
- var start = ref[0];
182
- var end = ref[1];
183
- var p = ref[2];
184
- var value = start.map(function (value, i) {
185
- value += p * (end[i] - value);
186
- return i === 3 ? uikitUtil.toFloat(value) : parseInt(value, 10);
187
- }).join(',');
188
- css[prop] = "rgba(" + value + ")";
189
- };
148
+ function colorFn(prop, el, stops) {
149
+ if (stops.length === 1) {
150
+ stops.unshift(getCssValue(el, prop, ''));
151
+ }
152
+
153
+ stops = parseStops(stops, (stop) => parseColor(el, stop));
154
+
155
+ return (css, percent) => {
156
+ const [start, end, p] = getStop(stops, percent);
157
+ const value = start.
158
+ map((value, i) => {
159
+ value += p * (end[i] - value);
160
+ return i === 3 ? uikitUtil.toFloat(value) : parseInt(value, 10);
161
+ }).
162
+ join(',');
163
+ css[prop] = "rgba(" + value + ")";
164
+ };
190
165
  }
191
166
 
192
167
  function parseColor(el, color) {
193
- return getCssValue(el, 'color', color)
194
- .split(/[(),]/g)
195
- .slice(1, -1)
196
- .concat(1)
197
- .slice(0, 4)
198
- .map(uikitUtil.toFloat);
168
+ return getCssValue(el, 'color', color).
169
+ split(/[(),]/g).
170
+ slice(1, -1).
171
+ concat(1).
172
+ slice(0, 4).
173
+ map(uikitUtil.toFloat);
199
174
  }
200
175
 
201
- function filterFn(prop, el, steps) {
202
-
203
- if (steps.length === 1) {
204
- steps.unshift(0);
205
- }
176
+ function filterFn(prop, el, stops) {
177
+ if (stops.length === 1) {
178
+ stops.unshift(0);
179
+ }
206
180
 
207
- var unit = getUnit(steps) || {blur: 'px', hue: 'deg'}[prop] || '%';
208
- prop = {fopacity: 'opacity', hue: 'hue-rotate'}[prop] || prop;
209
- steps = steps.map(uikitUtil.toFloat);
181
+ const unit = getUnit(stops) || { blur: 'px', hue: 'deg' }[prop] || '%';
182
+ prop = { fopacity: 'opacity', hue: 'hue-rotate' }[prop] || prop;
183
+ stops = parseStops(stops);
210
184
 
211
- return function (css, percent) {
212
- var value = getValue(steps, percent);
213
- css.filter += " " + prop + "(" + (value + unit) + ")";
214
- };
185
+ return (css, percent) => {
186
+ const value = getValue(stops, percent);
187
+ css.filter += " " + prop + "(" + (value + unit) + ")";
188
+ };
215
189
  }
216
190
 
217
- function cssPropFn(prop, el, steps) {
191
+ function cssPropFn(prop, el, stops) {
192
+ if (stops.length === 1) {
193
+ stops.unshift(getCssValue(el, prop, ''));
194
+ }
218
195
 
219
- if (steps.length === 1) {
220
- steps.unshift(getCssValue(el, prop, ''));
221
- }
196
+ stops = parseStops(stops);
222
197
 
223
- steps = steps.map(uikitUtil.toFloat);
224
-
225
- return function (css, percent) {
226
- css[prop] = getValue(steps, percent);
227
- };
198
+ return (css, percent) => {
199
+ css[prop] = getValue(stops, percent);
200
+ };
228
201
  }
229
202
 
230
- function strokeFn(prop, el, steps) {
231
-
232
- if (steps.length === 1) {
233
- steps.unshift(0);
234
- }
235
-
236
- var unit = getUnit(steps);
237
- steps = steps.map(uikitUtil.toFloat);
238
-
239
- if (!steps.some(function (step) { return step; })) {
240
- return uikitUtil.noop;
241
- }
203
+ function strokeFn(prop, el, stops) {
204
+ if (stops.length === 1) {
205
+ stops.unshift(0);
206
+ }
242
207
 
243
- var length = getMaxPathLength(el);
244
- uikitUtil.css(el, 'strokeDasharray', length);
208
+ const unit = getUnit(stops);
209
+ const length = getMaxPathLength(el);
210
+ stops = parseStops(stops.reverse(), (stop) => {
211
+ stop = uikitUtil.toFloat(stop);
212
+ return unit === '%' ? stop * length / 100 : stop;
213
+ });
245
214
 
246
- if (unit === '%') {
247
- steps = steps.map(function (step) { return step * length / 100; });
248
- }
215
+ if (!stops.some((_ref) => {let [value] = _ref;return value;})) {
216
+ return uikitUtil.noop;
217
+ }
249
218
 
250
- steps = steps.reverse();
219
+ uikitUtil.css(el, 'strokeDasharray', length);
251
220
 
252
- return function (css, percent) {
253
- css.strokeDashoffset = getValue(steps, percent);
254
- };
221
+ return (css, percent) => {
222
+ css.strokeDashoffset = getValue(stops, percent);
223
+ };
255
224
  }
256
225
 
257
- function backgroundFn(prop, el, steps) {
226
+ function backgroundFn(prop, el, stops) {
227
+ if (stops.length === 1) {
228
+ stops.unshift(0);
229
+ }
258
230
 
259
- if (steps.length === 1) {
260
- steps.unshift(0);
261
- }
231
+ prop = prop.substr(-1);
232
+ const attr = prop === 'y' ? 'height' : 'width';
233
+ stops = parseStops(stops, (stop) => uikitUtil.toPx(stop, attr, el));
262
234
 
263
- prop = prop.substr(-1);
264
- var attr = prop === 'y' ? 'height' : 'width';
265
- steps = steps.map(function (step) { return uikitUtil.toPx(step, attr, el); });
235
+ const bgPos = getCssValue(el, "background-position-" + prop, '');
266
236
 
267
- uikitUtil.css(el, ("background-position-" + prop), '');
268
- var bgPos = uikitUtil.css(el, 'backgroundPosition').split(' ')[prop === 'x' ? 0 : 1]; // IE 11 can't read background-position-[x|y]
269
-
270
- return getCssValue(el, 'backgroundSize', '') === 'cover'
271
- ? backgroundCoverFn(prop, el, steps, bgPos, attr)
272
- : setBackgroundPosFn(prop, steps, bgPos);
237
+ return getCssValue(el, 'backgroundSize', '') === 'cover' ?
238
+ backgroundCoverFn(prop, el, stops, bgPos, attr) :
239
+ setBackgroundPosFn(prop, stops, bgPos);
273
240
  }
274
241
 
275
- function backgroundCoverFn(prop, el, steps, bgPos, attr) {
242
+ function backgroundCoverFn(prop, el, stops, bgPos, attr) {
243
+ const dimImage = getBackgroundImageDimensions(el);
276
244
 
277
- var dimImage = getBackgroundImageDimensions(el);
245
+ if (!dimImage.width) {
246
+ return uikitUtil.noop;
247
+ }
278
248
 
279
- if (!dimImage.width) {
280
- return uikitUtil.noop;
281
- }
249
+ const values = stops.map((_ref2) => {let [value] = _ref2;return value;});
250
+ const min = Math.min(...values);
251
+ const max = Math.max(...values);
252
+ const down = values.indexOf(min) < values.indexOf(max);
282
253
 
283
- var min = Math.min.apply(Math, steps);
284
- var max = Math.max.apply(Math, steps);
285
- var down = steps.indexOf(min) < steps.indexOf(max);
254
+ const diff = max - min;
255
+ let pos = (down ? -diff : 0) - (down ? min : max);
286
256
 
287
- var diff = max - min;
288
- var pos = (down ? -diff : 0) - (down ? min : max);
257
+ const dimEl = {
258
+ width: el.offsetWidth,
259
+ height: el.offsetHeight };
289
260
 
290
- var dimEl = {
291
- width: el.offsetWidth,
292
- height: el.offsetHeight
293
- };
294
261
 
295
- var baseDim = uikitUtil.Dimensions.cover(dimImage, dimEl);
296
- var span = baseDim[attr] - dimEl[attr];
262
+ const baseDim = uikitUtil.Dimensions.cover(dimImage, dimEl);
263
+ const span = baseDim[attr] - dimEl[attr];
297
264
 
298
- if (span < diff) {
299
- dimEl[attr] = baseDim[attr] + diff - span;
300
- } else if (span > diff) {
265
+ if (span < diff) {
266
+ dimEl[attr] = baseDim[attr] + diff - span;
267
+ } else if (span > diff) {
268
+ const posPercentage = dimEl[attr] / uikitUtil.toPx(bgPos, attr, el, true);
301
269
 
302
- var posPercentage = dimEl[attr] / uikitUtil.toPx(bgPos, attr, el, true);
303
-
304
- if (posPercentage) {
305
- pos -= (span - diff) / posPercentage;
306
- }
270
+ if (posPercentage) {
271
+ pos -= (span - diff) / posPercentage;
307
272
  }
273
+ }
308
274
 
309
- var dim = uikitUtil.Dimensions.cover(dimImage, dimEl);
275
+ const dim = uikitUtil.Dimensions.cover(dimImage, dimEl);
310
276
 
311
- var fn = setBackgroundPosFn(prop, steps, (pos + "px"));
312
- return function (css, percent) {
313
- fn(css, percent);
314
- css.backgroundSize = (dim.width) + "px " + (dim.height) + "px";
315
- css.backgroundRepeat = 'no-repeat';
316
- };
277
+ const fn = setBackgroundPosFn(prop, stops, pos + "px");
278
+ return (css, percent) => {
279
+ fn(css, percent);
280
+ css.backgroundSize = dim.width + "px " + dim.height + "px";
281
+ css.backgroundRepeat = 'no-repeat';
282
+ };
317
283
  }
318
284
 
319
- function setBackgroundPosFn(prop, steps, pos) {
320
- return function (css, percent) {
321
- css[("background-position-" + prop)] = "calc(" + pos + " + " + (getValue(steps, percent)) + "px)";
322
- };
285
+ function setBackgroundPosFn(prop, stops, pos) {
286
+ return function (css, percent) {
287
+ css["background-position-" + prop] = "calc(" + pos + " + " + getValue(stops, percent) + "px)";
288
+ };
323
289
  }
324
290
 
325
- var dimensions = {};
291
+ const dimensions = {};
326
292
  function getBackgroundImageDimensions(el) {
327
- var src = uikitUtil.css(el, 'backgroundImage').replace(/^none|url\(["']?(.+?)["']?\)$/, '$1');
328
-
329
- if (dimensions[src]) {
330
- return dimensions[src];
293
+ const src = uikitUtil.css(el, 'backgroundImage').replace(/^none|url\(["']?(.+?)["']?\)$/, '$1');
294
+
295
+ if (dimensions[src]) {
296
+ return dimensions[src];
297
+ }
298
+
299
+ const image = new Image();
300
+ if (src) {
301
+ image.src = src;
302
+
303
+ if (!image.naturalWidth) {
304
+ image.onload = () => {
305
+ dimensions[src] = toDimensions(image);
306
+ uikitUtil.trigger(el, 'load');
307
+ };
308
+ return toDimensions(image);
331
309
  }
310
+ }
332
311
 
333
- var image = new Image();
334
- if (src) {
335
- image.src = src;
312
+ return dimensions[src] = toDimensions(image);
313
+ }
336
314
 
337
- if (!image.naturalWidth) {
338
- image.onload = function () {
339
- dimensions[src] = toDimensions(image);
340
- uikitUtil.trigger(el, 'bgimageload');
341
- };
342
- }
343
- }
315
+ function toDimensions(image) {
316
+ return {
317
+ width: image.naturalWidth,
318
+ height: image.naturalHeight };
344
319
 
345
- return dimensions[src] = toDimensions(image);
346
320
  }
347
321
 
348
- function toDimensions(image) {
349
- return {
350
- width: image.naturalWidth,
351
- height: image.naturalHeight
352
- };
322
+ function parseStops(stops, fn) {if (fn === void 0) {fn = uikitUtil.toFloat;}
323
+ const result = [];
324
+ const { length } = stops;
325
+ let nullIndex = 0;
326
+ for (let i = 0; i < length; i++) {
327
+ let [value, percent] = uikitUtil.isString(stops[i]) ? stops[i].trim().split(' ') : [stops[i]];
328
+ value = fn(value);
329
+ percent = percent ? uikitUtil.toFloat(percent) / 100 : null;
330
+
331
+ if (i === 0) {
332
+ if (percent === null) {
333
+ percent = 0;
334
+ } else if (percent) {
335
+ result.push([value, 0]);
336
+ }
337
+ } else if (i === length - 1) {
338
+ if (percent === null) {
339
+ percent = 1;
340
+ } else if (percent !== 1) {
341
+ result.push([value, percent]);
342
+ percent = 1;
343
+ }
344
+ }
345
+
346
+ result.push([value, percent]);
347
+
348
+ if (percent === null) {
349
+ nullIndex++;
350
+ } else if (nullIndex) {
351
+ const leftPercent = result[i - nullIndex - 1][1];
352
+ const p = (percent - leftPercent) / (nullIndex + 1);
353
+ for (let j = nullIndex; j > 0; j--) {
354
+ result[i - j][1] = leftPercent + p * (nullIndex - j + 1);
355
+ }
356
+
357
+ nullIndex = 0;
358
+ }
359
+ }
360
+
361
+ return result;
353
362
  }
354
363
 
355
- function getStep(steps, percent) {
356
- var count = steps.length - 1;
357
- var index = Math.min(Math.floor(count * percent), count - 1);
364
+ function getStop(stops, percent) {
365
+ const index = uikitUtil.findIndex(stops.slice(1), (_ref3) => {let [, targetPercent] = _ref3;return percent <= targetPercent;}) + 1;
366
+ return [
367
+ stops[index - 1][0],
368
+ stops[index][0],
369
+ (percent - stops[index - 1][1]) / (stops[index][1] - stops[index - 1][1])];
358
370
 
359
- return steps
360
- .slice(index, index + 2)
361
- .concat(percent === 1 ? 1 : percent % (1 / count) * count);
362
371
  }
363
372
 
364
- function getValue(steps, percent) {
365
- var ref = getStep(steps, percent);
366
- var start = ref[0];
367
- var end = ref[1];
368
- var p = ref[2];
369
- return uikitUtil.isNumber(start)
370
- ? start + Math.abs(start - end) * p * (start < end ? 1 : -1)
371
- : +end;
373
+ function getValue(stops, percent) {
374
+ const [start, end, p] = getStop(stops, percent);
375
+ return uikitUtil.isNumber(start) ? start + Math.abs(start - end) * p * (start < end ? 1 : -1) : +end;
372
376
  }
373
377
 
374
- function getUnit(steps, defaultUnit) {
375
- return steps.reduce(function (unit, step) { return unit || uikitUtil.isString(step) && step.replace(/[\d-]/g, '').trim(); }, '') || defaultUnit;
378
+ const unitRe = /^-?\d+([^\s]*)/;
379
+ function getUnit(stops, defaultUnit) {
380
+ for (const stop of stops) {
381
+ const match = stop.match == null ? void 0 : stop.match(unitRe);
382
+ if (match) {
383
+ return match[1];
384
+ }
385
+ }
386
+ return defaultUnit;
376
387
  }
377
388
 
378
389
  function getCssValue(el, prop, value) {
379
- var prev = el.style[prop];
380
- var val = uikitUtil.css(uikitUtil.css(el, prop, value), prop);
381
- el.style[prop] = prev;
382
- return val;
390
+ const prev = el.style[prop];
391
+ const val = uikitUtil.css(uikitUtil.css(el, prop, value), prop);
392
+ el.style[prop] = prev;
393
+ return val;
383
394
  }
384
395
 
385
396
  function fillObject(keys, value) {
386
- return keys.reduce(function (data, prop) {
387
- data[prop] = value;
388
- return data;
389
- }, {});
397
+ return keys.reduce((data, prop) => {
398
+ data[prop] = value;
399
+ return data;
400
+ }, {});
390
401
  }
391
402
 
392
403
  var Component = {
404
+ mixins: [Parallax],
393
405
 
394
- mixins: [Parallax],
395
-
396
- props: {
397
- target: String,
398
- viewport: Number, // Deprecated
399
- easing: Number,
400
- start: String,
401
- end: String
402
- },
403
-
404
- data: {
405
- target: false,
406
- viewport: 1,
407
- easing: 1,
408
- start: 0,
409
- end: 0
410
- },
406
+ props: {
407
+ target: String,
408
+ viewport: Number, // Deprecated
409
+ easing: Number,
410
+ start: String,
411
+ end: String },
411
412
 
412
- computed: {
413
413
 
414
- target: function(ref, $el) {
415
- var target = ref.target;
414
+ data: {
415
+ target: false,
416
+ viewport: 1,
417
+ easing: 1,
418
+ start: 0,
419
+ end: 0 },
416
420
 
417
- return getOffsetElement(target && uikitUtil.query(target, $el) || $el);
418
- },
419
-
420
- start: function(ref) {
421
- var start = ref.start;
422
-
423
- return uikitUtil.toPx(start, 'height', this.target, true);
424
- },
425
-
426
- end: function(ref) {
427
- var end = ref.end;
428
- var viewport = ref.viewport;
429
-
430
- return uikitUtil.toPx(
431
- end || (viewport = (1 - viewport) * 100) && (viewport + "vh+" + viewport + "%"),
432
- 'height',
433
- this.target,
434
- true
435
- );
436
- }
437
421
 
422
+ computed: {
423
+ target(_ref, $el) {let { target } = _ref;
424
+ return getOffsetElement(target && uikitUtil.query(target, $el) || $el);
438
425
  },
439
426
 
440
- update: {
427
+ start(_ref2) {let { start } = _ref2;
428
+ return uikitUtil.toPx(start, 'height', this.target, true);
429
+ },
441
430
 
442
- read: function(ref, types) {
443
- var percent = ref.percent;
431
+ end(_ref3) {let { end, viewport } = _ref3;
432
+ return uikitUtil.toPx(
433
+ end || (viewport = (1 - viewport) * 100) && viewport + "vh+" + viewport + "%",
434
+ 'height',
435
+ this.target,
436
+ true);
444
437
 
438
+ } },
445
439
 
446
- if (!types.has('scroll')) {
447
- percent = false;
448
- }
449
440
 
450
- if (!this.matchMedia) {
451
- return;
452
- }
441
+ update: {
442
+ read(_ref4, types) {let { percent } = _ref4;
443
+ if (!types.has('scroll')) {
444
+ percent = false;
445
+ }
453
446
 
454
- var prev = percent;
455
- percent = ease(uikitUtil.scrolledOver(this.target, this.start, this.end), this.easing);
447
+ if (!this.matchMedia) {
448
+ return;
449
+ }
456
450
 
457
- return {
458
- percent: percent,
459
- style: prev === percent ? false : this.getCss(percent)
460
- };
461
- },
451
+ const prev = percent;
452
+ percent = ease(uikitUtil.scrolledOver(this.target, this.start, this.end), this.easing);
462
453
 
463
- write: function(ref) {
464
- var style = ref.style;
454
+ return {
455
+ percent,
456
+ style: prev === percent ? false : this.getCss(percent) };
465
457
 
458
+ },
466
459
 
467
- if (!this.matchMedia) {
468
- this.reset();
469
- return;
470
- }
460
+ write(_ref5) {let { style } = _ref5;
461
+ if (!this.matchMedia) {
462
+ this.reset();
463
+ return;
464
+ }
471
465
 
472
- style && uikitUtil.css(this.$el, style);
466
+ style && uikitUtil.css(this.$el, style);
467
+ },
473
468
 
474
- },
469
+ events: ['scroll', 'resize'] } };
475
470
 
476
- events: ['scroll', 'resize']
477
- }
478
471
 
479
- };
480
472
 
481
473
  function ease(percent, easing) {
482
- return easing >= 0
483
- ? Math.pow(percent, easing + 1)
484
- : 1 - Math.pow(1 - percent, -easing + 1);
474
+ return easing >= 0 ? Math.pow(percent, easing + 1) : 1 - Math.pow(1 - percent, -easing + 1);
485
475
  }
486
476
 
487
477
  // SVG elements do not inherit from HTMLElement
488
478
  function getOffsetElement(el) {
489
- return el
490
- ? 'offsetTop' in el
491
- ? el
492
- : getOffsetElement(uikitUtil.parent(el))
493
- : document.documentElement;
479
+ return el ? 'offsetTop' in el ? el : getOffsetElement(uikitUtil.parent(el)) : document.documentElement;
494
480
  }
495
481
 
496
482
  if (typeof window !== 'undefined' && window.UIkit) {
497
- window.UIkit.component('parallax', Component);
483
+ window.UIkit.component('parallax', Component);
498
484
  }
499
485
 
500
486
  return Component;