uikit 3.11.2-dev.c2430c233 → 3.11.2-dev.cfa6c7d5c

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 (213) 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 +41 -18
  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 +86 -185
  19. package/dist/css/uikit-core-rtl.min.css +1 -1
  20. package/dist/css/uikit-core.css +86 -185
  21. package/dist/css/uikit-core.min.css +1 -1
  22. package/dist/css/uikit-rtl.css +88 -191
  23. package/dist/css/uikit-rtl.min.css +1 -1
  24. package/dist/css/uikit.css +88 -191
  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 +344 -359
  37. package/dist/js/components/parallax.min.js +1 -1
  38. package/dist/js/components/slider-parallax.js +342 -358
  39. package/dist/js/components/slider-parallax.min.js +1 -1
  40. package/dist/js/components/slider.js +768 -843
  41. package/dist/js/components/slider.min.js +1 -1
  42. package/dist/js/components/slideshow-parallax.js +342 -358
  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 -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 +155 -167
  51. package/dist/js/components/upload.min.js +1 -1
  52. package/dist/js/uikit-core.js +5273 -6604
  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 +7995 -9704
  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 +65 -82
  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 +16 -30
  77. package/src/js/components/slider-parallax.js +13 -23
  78. package/src/js/components/slider.js +95 -64
  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 +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 +106 -92
  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 +30 -34
  94. package/src/js/core/icon.js +47 -52
  95. package/src/js/core/img.js +156 -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 +112 -88
  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 +161 -128
  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 +146 -105
  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 +25 -40
  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 +58 -45
  139. package/src/js/util/dom.js +39 -66
  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 +1 -6
  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 +75 -64
  153. package/src/less/components/base.less +10 -33
  154. package/src/less/components/form-range.less +48 -95
  155. package/src/less/components/form.less +0 -1
  156. package/src/less/components/height.less +3 -0
  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/progress.less +14 -36
  161. package/src/less/components/slider.less +0 -3
  162. package/src/less/components/slideshow.less +0 -3
  163. package/src/less/components/text.less +16 -32
  164. package/src/scss/components/base.scss +10 -33
  165. package/src/scss/components/form-range.scss +48 -95
  166. package/src/scss/components/form.scss +0 -1
  167. package/src/scss/components/height.scss +3 -0
  168. package/src/scss/components/leader.scss +0 -1
  169. package/src/scss/components/lightbox.scss +0 -1
  170. package/src/scss/components/modal.scss +3 -7
  171. package/src/scss/components/progress.scss +14 -36
  172. package/src/scss/components/slider.scss +0 -3
  173. package/src/scss/components/slideshow.scss +0 -3
  174. package/src/scss/components/text.scss +16 -32
  175. package/src/scss/mixins-theme.scss +1 -1
  176. package/src/scss/mixins.scss +1 -1
  177. package/src/scss/variables-theme.scss +3 -3
  178. package/src/scss/variables.scss +3 -3
  179. package/tests/align.html +10 -10
  180. package/tests/animation.html +2 -2
  181. package/tests/article.html +2 -2
  182. package/tests/base.html +3 -3
  183. package/tests/card.html +10 -10
  184. package/tests/column.html +3 -3
  185. package/tests/comment.html +9 -9
  186. package/tests/dotnav.html +3 -3
  187. package/tests/image.html +296 -64
  188. package/tests/images/image-type.avif +0 -0
  189. package/tests/images/image-type.jpeg +0 -0
  190. package/tests/images/image-type.webp +0 -0
  191. package/tests/index.html +8 -8
  192. package/tests/js/index.js +114 -85
  193. package/tests/lightbox.html +10 -10
  194. package/tests/marker.html +2 -2
  195. package/tests/modal.html +8 -9
  196. package/tests/navbar.html +2 -2
  197. package/tests/overlay.html +7 -7
  198. package/tests/parallax.html +14 -5
  199. package/tests/position.html +12 -12
  200. package/tests/slidenav.html +12 -12
  201. package/tests/slider.html +20 -20
  202. package/tests/sortable.html +1 -1
  203. package/tests/sticky-parallax.html +55 -70
  204. package/tests/svg.html +6 -6
  205. package/tests/table.html +11 -11
  206. package/tests/thumbnav.html +12 -12
  207. package/tests/transition.html +30 -30
  208. package/tests/utility.html +33 -33
  209. package/tests/video.html +1 -1
  210. package/tests/width.html +1 -1
  211. package/src/js/mixin/flex-bug.js +0 -56
  212. package/src/js/util/promise.js +0 -191
  213. package/tests/images/animated.gif +0 -0
@@ -1,4 +1,4 @@
1
- /*! UIkit 3.11.2-dev.c2430c233 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
1
+ /*! UIkit 3.11.2-dev.cfa6c7d5c | 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,479 @@
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],
100
-
101
- props: fillObject(keys(props), 'list'),
102
-
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
- }, {});
114
- }
92
+ props: fillObject(keys(props), 'list'),
115
93
 
116
- },
94
+ data: fillObject(keys(props), undefined),
117
95
 
118
- events: {
119
- bgimageload: function() {
120
- this.$emit();
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());
121
101
  }
122
- },
123
-
124
- methods: {
125
-
126
- reset: function() {
127
- var this$1$1 = this;
102
+ return result;
103
+ }, {});
104
+ } },
128
105
 
129
- uikitUtil.each(this.getCss(0), function (_, prop) { return uikitUtil.css(this$1$1.$el, prop, ''); });
130
- },
131
106
 
132
- getCss: function(percent) {
133
- var this$1$1 = this;
107
+ events: {
108
+ bgimageload() {
109
+ this.$emit();
110
+ } },
134
111
 
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
112
 
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
- }
222
-
223
- steps = steps.map(uikitUtil.toFloat);
196
+ stops = parseStops(stops);
224
197
 
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);
203
+ function strokeFn(prop, el, stops) {
204
+ if (stops.length === 1) {
205
+ stops.unshift(0);
206
+ }
238
207
 
239
- if (!steps.some(function (step) { return step; })) {
240
- return uikitUtil.noop;
241
- }
242
-
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) {
258
-
259
- if (steps.length === 1) {
260
- steps.unshift(0);
261
- }
226
+ function backgroundFn(prop, el, stops) {
227
+ if (stops.length === 1) {
228
+ stops.unshift(0);
229
+ }
262
230
 
263
- prop = prop.substr(-1);
264
- var attr = prop === 'y' ? 'height' : 'width';
265
- steps = steps.map(function (step) { return uikitUtil.toPx(step, attr, el); });
231
+ prop = prop.substr(-1);
232
+ const attr = prop === 'y' ? 'height' : 'width';
233
+ stops = parseStops(stops, (stop) => uikitUtil.toPx(stop, attr, el));
266
234
 
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]
235
+ const bgPos = getCssValue(el, "background-position-" + prop, '');
269
236
 
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
- }
282
-
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);
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);
286
253
 
287
- var diff = max - min;
288
- var pos = (down ? -diff : 0) - (down ? min : max);
254
+ const diff = max - min;
255
+ let pos = (down ? -diff : 0) - (down ? min : max);
289
256
 
290
- var dimEl = {
291
- width: el.offsetWidth,
292
- height: el.offsetHeight
293
- };
257
+ const dimEl = {
258
+ width: el.offsetWidth,
259
+ height: el.offsetHeight };
294
260
 
295
- var baseDim = uikitUtil.Dimensions.cover(dimImage, dimEl);
296
- var span = baseDim[attr] - dimEl[attr];
297
261
 
298
- if (span < diff) {
299
- dimEl[attr] = baseDim[attr] + diff - span;
300
- } else if (span > diff) {
262
+ const baseDim = uikitUtil.Dimensions.cover(dimImage, dimEl);
263
+ const span = baseDim[attr] - dimEl[attr];
301
264
 
302
- var posPercentage = dimEl[attr] / uikitUtil.toPx(bgPos, attr, el, true);
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);
303
269
 
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');
293
+ const src = uikitUtil.css(el, 'backgroundImage').replace(/^none|url\(["']?(.+?)["']?\)$/, '$1');
328
294
 
329
- if (dimensions[src]) {
330
- return dimensions[src];
331
- }
295
+ if (dimensions[src]) {
296
+ return dimensions[src];
297
+ }
332
298
 
333
- var image = new Image();
334
- if (src) {
335
- image.src = src;
299
+ const image = new Image();
300
+ if (src) {
301
+ image.src = src;
336
302
 
337
- if (!image.naturalWidth) {
338
- image.onload = function () {
339
- dimensions[src] = toDimensions(image);
340
- uikitUtil.trigger(el, 'bgimageload');
341
- };
342
- }
303
+ if (!image.naturalWidth) {
304
+ image.onload = () => {
305
+ dimensions[src] = toDimensions(image);
306
+ uikitUtil.trigger(el, 'bgimageload');
307
+ };
343
308
  }
309
+ }
344
310
 
345
- return dimensions[src] = toDimensions(image);
311
+ return dimensions[src] = toDimensions(image);
346
312
  }
347
313
 
348
314
  function toDimensions(image) {
349
- return {
350
- width: image.naturalWidth,
351
- height: image.naturalHeight
352
- };
315
+ return {
316
+ width: image.naturalWidth,
317
+ height: image.naturalHeight };
318
+
319
+ }
320
+
321
+ function parseStops(stops, fn) {if (fn === void 0) {fn = uikitUtil.toFloat;}
322
+ const result = [];
323
+ const { length } = stops;
324
+ let nullIndex = 0;
325
+ for (let i = 0; i < length; i++) {
326
+ let [value, percent] = uikitUtil.isString(stops[i]) ? stops[i].trim().split(' ') : [stops[i]];
327
+ value = fn(value);
328
+ percent = percent ? uikitUtil.toFloat(percent) / 100 : null;
329
+
330
+ if (i === 0) {
331
+ if (percent === null) {
332
+ percent = 0;
333
+ } else if (percent) {
334
+ result.push([value, 0]);
335
+ }
336
+ } else if (i === length - 1) {
337
+ if (percent === null) {
338
+ percent = 1;
339
+ } else if (percent !== 1) {
340
+ result.push([value, percent]);
341
+ percent = 1;
342
+ }
343
+ }
344
+
345
+ result.push([value, percent]);
346
+
347
+ if (percent === null) {
348
+ nullIndex++;
349
+ } else if (nullIndex) {
350
+ const leftPercent = result[i - nullIndex - 1][1];
351
+ const p = (percent - leftPercent) / (nullIndex + 1);
352
+ for (let j = nullIndex; j > 0; j--) {
353
+ result[i - j][1] = leftPercent + p * (nullIndex - j + 1);
354
+ }
355
+
356
+ nullIndex = 0;
357
+ }
358
+ }
359
+
360
+ return result;
353
361
  }
354
362
 
355
- function getStep(steps, percent) {
356
- var count = steps.length - 1;
357
- var index = Math.min(Math.floor(count * percent), count - 1);
363
+ function getStop(stops, percent) {
364
+ const index = uikitUtil.findIndex(stops.slice(1), (_ref3) => {let [, targetPercent] = _ref3;return percent <= targetPercent;}) + 1;
365
+ return [
366
+ stops[index - 1][0],
367
+ stops[index][0],
368
+ (percent - stops[index - 1][1]) / (stops[index][1] - stops[index - 1][1])];
358
369
 
359
- return steps
360
- .slice(index, index + 2)
361
- .concat(percent === 1 ? 1 : percent % (1 / count) * count);
362
370
  }
363
371
 
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;
372
+ function getValue(stops, percent) {
373
+ const [start, end, p] = getStop(stops, percent);
374
+ return uikitUtil.isNumber(start) ? start + Math.abs(start - end) * p * (start < end ? 1 : -1) : +end;
372
375
  }
373
376
 
374
- function getUnit(steps, defaultUnit) {
375
- return steps.reduce(function (unit, step) { return unit || uikitUtil.isString(step) && step.replace(/[\d-]/g, '').trim(); }, '') || defaultUnit;
377
+ const unitRe = /^-?\d+([^\s]*)/;
378
+ function getUnit(stops, defaultUnit) {
379
+ for (const stop of stops) {
380
+ const match = stop.match == null ? void 0 : stop.match(unitRe);
381
+ if (match) {
382
+ return match[1];
383
+ }
384
+ }
385
+ return defaultUnit;
376
386
  }
377
387
 
378
388
  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;
389
+ const prev = el.style[prop];
390
+ const val = uikitUtil.css(uikitUtil.css(el, prop, value), prop);
391
+ el.style[prop] = prev;
392
+ return val;
383
393
  }
384
394
 
385
395
  function fillObject(keys, value) {
386
- return keys.reduce(function (data, prop) {
387
- data[prop] = value;
388
- return data;
389
- }, {});
396
+ return keys.reduce((data, prop) => {
397
+ data[prop] = value;
398
+ return data;
399
+ }, {});
390
400
  }
391
401
 
392
402
  var Component = {
403
+ mixins: [Parallax],
393
404
 
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
- },
405
+ props: {
406
+ target: String,
407
+ viewport: Number, // Deprecated
408
+ easing: Number,
409
+ start: String,
410
+ end: String },
411
411
 
412
- computed: {
413
412
 
414
- target: function(ref, $el) {
415
- var target = ref.target;
413
+ data: {
414
+ target: false,
415
+ viewport: 1,
416
+ easing: 1,
417
+ start: 0,
418
+ end: 0 },
416
419
 
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
420
 
421
+ computed: {
422
+ target(_ref, $el) {let { target } = _ref;
423
+ return getOffsetElement(target && uikitUtil.query(target, $el) || $el);
438
424
  },
439
425
 
440
- update: {
426
+ start(_ref2) {let { start } = _ref2;
427
+ return uikitUtil.toPx(start, 'height', this.target, true);
428
+ },
441
429
 
442
- read: function(ref, types) {
443
- var percent = ref.percent;
430
+ end(_ref3) {let { end, viewport } = _ref3;
431
+ return uikitUtil.toPx(
432
+ end || (viewport = (1 - viewport) * 100) && viewport + "vh+" + viewport + "%",
433
+ 'height',
434
+ this.target,
435
+ true);
444
436
 
437
+ } },
445
438
 
446
- if (!types.has('scroll')) {
447
- percent = false;
448
- }
449
439
 
450
- if (!this.matchMedia) {
451
- return;
452
- }
440
+ update: {
441
+ read(_ref4, types) {let { percent } = _ref4;
442
+ if (!types.has('scroll')) {
443
+ percent = false;
444
+ }
453
445
 
454
- var prev = percent;
455
- percent = ease(uikitUtil.scrolledOver(this.target, this.start, this.end), this.easing);
446
+ if (!this.matchMedia) {
447
+ return;
448
+ }
456
449
 
457
- return {
458
- percent: percent,
459
- style: prev === percent ? false : this.getCss(percent)
460
- };
461
- },
450
+ const prev = percent;
451
+ percent = ease(uikitUtil.scrolledOver(this.target, this.start, this.end), this.easing);
462
452
 
463
- write: function(ref) {
464
- var style = ref.style;
453
+ return {
454
+ percent,
455
+ style: prev === percent ? false : this.getCss(percent) };
465
456
 
457
+ },
466
458
 
467
- if (!this.matchMedia) {
468
- this.reset();
469
- return;
470
- }
459
+ write(_ref5) {let { style } = _ref5;
460
+ if (!this.matchMedia) {
461
+ this.reset();
462
+ return;
463
+ }
471
464
 
472
- style && uikitUtil.css(this.$el, style);
465
+ style && uikitUtil.css(this.$el, style);
466
+ },
473
467
 
474
- },
468
+ events: ['scroll', 'resize'] } };
475
469
 
476
- events: ['scroll', 'resize']
477
- }
478
470
 
479
- };
480
471
 
481
472
  function ease(percent, easing) {
482
- return easing >= 0
483
- ? Math.pow(percent, easing + 1)
484
- : 1 - Math.pow(1 - percent, -easing + 1);
473
+ return easing >= 0 ? Math.pow(percent, easing + 1) : 1 - Math.pow(1 - percent, -easing + 1);
485
474
  }
486
475
 
487
476
  // SVG elements do not inherit from HTMLElement
488
477
  function getOffsetElement(el) {
489
- return el
490
- ? 'offsetTop' in el
491
- ? el
492
- : getOffsetElement(uikitUtil.parent(el))
493
- : document.documentElement;
478
+ return el ? 'offsetTop' in el ? el : getOffsetElement(uikitUtil.parent(el)) : document.documentElement;
494
479
  }
495
480
 
496
481
  if (typeof window !== 'undefined' && window.UIkit) {
497
- window.UIkit.component('parallax', Component);
482
+ window.UIkit.component('parallax', Component);
498
483
  }
499
484
 
500
485
  return Component;