uikit 3.11.2-dev.ab82450f4 → 3.11.2-dev.b4d9c97d5

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