uikit 3.11.1-dev.fbcf9eec9 → 3.11.2-dev.06fe7f1d0

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