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

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