uikit 3.11.2-dev.4c11be04b → 3.11.2-dev.64133b093

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