uikit 3.11.1 → 3.11.2-dev.03e47c2ff

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 +59 -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 -362
  37. package/dist/js/components/parallax.min.js +1 -1
  38. package/dist/js/components/slider-parallax.js +343 -350
  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 -350
  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 +5430 -6690
  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 +8143 -9784
  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 +29 -36
  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 +194 -123
  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 +175 -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 +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.1 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
1
+ /*! UIkit 3.11.2-dev.03e47c2ff | 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,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],
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);
223
+ return (css, percent) => {
224
+ css.strokeDashoffset = getValue(stops, percent);
225
+ };
226
+ }
241
227
 
242
- if (unit === '%') {
243
- steps = steps.map(function (step) { return step * length / 100; });
244
- }
228
+ function backgroundFn(prop, el, stops) {
229
+ if (stops.length === 1) {
230
+ stops.unshift(0);
231
+ }
245
232
 
246
- steps = steps.reverse();
233
+ prop = prop.substr(-1);
234
+ const attr = prop === 'y' ? 'height' : 'width';
235
+ stops = parseStops(stops, (stop) => uikitUtil.toPx(stop, attr, el));
247
236
 
248
- return function (css, percent) {
249
- css.strokeDashoffset = getValue(steps, percent);
250
- };
237
+ const bgPos = getCssValue(el, "background-position-" + prop, '');
238
+
239
+ return getCssValue(el, 'backgroundSize', '') === 'cover' ?
240
+ backgroundCoverFn(prop, el, stops, bgPos, attr) :
241
+ setBackgroundPosFn(prop, stops, bgPos);
251
242
  }
252
243
 
253
- function backgroundFn(prop, el, steps) {
244
+ function backgroundCoverFn(prop, el, stops, bgPos, attr) {
245
+ const dimImage = getBackgroundImageDimensions(el);
254
246
 
255
- if (steps.length === 1) {
256
- steps.unshift(0);
257
- }
247
+ if (!dimImage.width) {
248
+ return uikitUtil.noop;
249
+ }
258
250
 
259
- prop = prop.substr(-1);
260
- var attr = prop === 'y' ? 'height' : 'width';
261
- steps = steps.map(function (step) { return uikitUtil.toPx(step, attr, el); });
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);
262
255
 
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]
256
+ const diff = max - min;
257
+ let pos = (down ? -diff : 0) - (down ? min : max);
265
258
 
266
- return getCssValue(el, 'backgroundSize', '') === 'cover'
267
- ? backgroundCoverFn.call(this, prop, el, steps, bgPos, attr)
268
- : setBackgroundPosFn(prop, steps, bgPos);
269
- }
259
+ const dimEl = {
260
+ width: el.offsetWidth,
261
+ height: el.offsetHeight };
270
262
 
271
- function backgroundCoverFn(prop, el, steps, bgPos, attr) {
272
263
 
273
- var image = getBackgroundImage.call(this, el);
264
+ const baseDim = uikitUtil.Dimensions.cover(dimImage, dimEl);
265
+ const span = baseDim[attr] - dimEl[attr];
274
266
 
275
- if (!image.naturalWidth) {
276
- return uikitUtil.noop;
277
- }
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);
278
271
 
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);
272
+ if (posPercentage) {
273
+ pos -= (span - diff) / posPercentage;
274
+ }
275
+ }
282
276
 
283
- var diff = max - min;
284
- var pos = (down ? -diff : 0) - (down ? min : max);
277
+ const dim = uikitUtil.Dimensions.cover(dimImage, dimEl);
285
278
 
286
- var dimEl = {
287
- width: el.offsetWidth,
288
- height: el.offsetHeight
289
- };
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
+ };
285
+ }
290
286
 
291
- var dimImage = {
292
- width: image.naturalWidth,
293
- height: image.naturalHeight
294
- };
287
+ function setBackgroundPosFn(prop, stops, pos) {
288
+ return function (css, percent) {
289
+ css["background-position-" + prop] = "calc(" + pos + " + " + getValue(stops, percent) + "px)";
290
+ };
291
+ }
295
292
 
296
- var baseDim = uikitUtil.Dimensions.cover(dimImage, dimEl);
297
- var span = baseDim[attr] - dimEl[attr];
293
+ const dimensions = {};
294
+ function getBackgroundImageDimensions(el) {
295
+ const src = uikitUtil.css(el, 'backgroundImage').replace(/^none|url\(["']?(.+?)["']?\)$/, '$1');
298
296
 
299
- if (span < diff) {
300
- dimEl[attr] = baseDim[attr] + diff - span;
301
- } else if (span > diff) {
297
+ if (dimensions[src]) {
298
+ return dimensions[src];
299
+ }
302
300
 
303
- var posPercentage = dimEl[attr] / uikitUtil.toPx(bgPos, attr, el, true);
301
+ const image = new Image();
302
+ if (src) {
303
+ image.src = src;
304
304
 
305
- if (posPercentage) {
306
- pos -= (span - diff) / posPercentage;
307
- }
305
+ if (!image.naturalWidth) {
306
+ image.onload = () => {
307
+ dimensions[src] = toDimensions(image);
308
+ uikitUtil.trigger(el, 'bgimageload');
309
+ };
308
310
  }
311
+ }
309
312
 
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
- };
313
+ return dimensions[src] = toDimensions(image);
318
314
  }
319
315
 
320
- function setBackgroundPosFn(prop, steps, pos) {
321
- return function (css, percent) {
322
- css[("background-position-" + prop)] = "calc(" + pos + " + " + (getValue(steps, percent)) + "px)";
323
- };
316
+ function toDimensions(image) {
317
+ return {
318
+ width: image.naturalWidth,
319
+ height: image.naturalHeight };
320
+
324
321
  }
325
322
 
326
- function getBackgroundImage(el) {
327
- var this$1$1 = this;
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
+ }
328
346
 
329
- var src = uikitUtil.css(el, 'backgroundImage').replace(/^none|url\(["']?(.+?)["']?\)$/, '$1');
347
+ result.push([value, percent]);
330
348
 
331
- var data = this._data;
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
+ }
332
357
 
333
- if (data[src]) {
334
- return data[src];
358
+ nullIndex = 0;
335
359
  }
360
+ }
336
361
 
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
- }
362
+ return result;
346
363
  }
347
364
 
348
- function getStep(steps, percent) {
349
- var count = steps.length - 1;
350
- var index = Math.min(Math.floor(count * percent), count - 1);
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])];
351
371
 
352
- return steps
353
- .slice(index, index + 2)
354
- .concat(percent === 1 ? 1 : percent % (1 / count) * count);
355
372
  }
356
373
 
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;
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;
365
377
  }
366
378
 
367
- function getUnit(steps, defaultUnit) {
368
- return steps.reduce(function (unit, step) { return unit || uikitUtil.isString(step) && step.replace(/[\d-]/g, '').trim(); }, '') || defaultUnit;
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;
369
388
  }
370
389
 
371
390
  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;
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;
376
395
  }
377
396
 
378
397
  function fillObject(keys, value) {
379
- return keys.reduce(function (data, prop) {
380
- data[prop] = value;
381
- return data;
382
- }, {});
398
+ return keys.reduce((data, prop) => {
399
+ data[prop] = value;
400
+ return data;
401
+ }, {});
383
402
  }
384
403
 
385
404
  var Component = {
405
+ mixins: [Parallax],
386
406
 
387
- mixins: [Parallax],
407
+ data: {
408
+ selItem: '!li' },
388
409
 
389
- data: {
390
- selItem: '!li'
391
- },
392
410
 
393
- computed: {
411
+ computed: {
412
+ item(_ref, $el) {let { selItem } = _ref;
413
+ return uikitUtil.query(selItem, $el);
414
+ } },
394
415
 
395
- item: function(ref, $el) {
396
- var selItem = ref.selItem;
397
-
398
- return uikitUtil.query(selItem, $el);
399
- }
400
-
401
- },
402
416
 
403
- events: [
417
+ events: [
418
+ {
419
+ name: 'itemin itemout',
404
420
 
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;
421
+ self: true,
422
422
 
423
+ el() {
424
+ return this.item;
425
+ },
423
426
 
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
- });
427
+ handler(_ref2) {let { type, detail: { percent, duration, timing, dir } } = _ref2;
428
+ uikitUtil.fastdom.read(() => {
429
+ const propsFrom = this.getCss(getCurrentPercent(type, dir, percent));
430
+ const propsTo = this.getCss(isIn(type) ? 0.5 : dir > 0 ? 1 : 0);
431
+ uikitUtil.fastdom.write(() => {
432
+ uikitUtil.css(this.$el, propsFrom);
433
+ uikitUtil.Transition.start(this.$el, propsTo, duration, timing).catch(uikitUtil.noop);
434
+ });
435
+ });
436
+ } },
432
437
 
433
- }
434
- },
435
438
 
436
- {
437
- name: 'transitioncanceled transitionend',
439
+ {
440
+ name: 'transitioncanceled transitionend',
438
441
 
439
- self: true,
442
+ self: true,
440
443
 
441
- el: function() {
442
- return this.item;
443
- },
444
+ el() {
445
+ return this.item;
446
+ },
444
447
 
445
- handler: function() {
446
- uikitUtil.Transition.cancel(this.$el);
447
- }
448
+ handler() {
449
+ uikitUtil.Transition.cancel(this.$el);
450
+ } },
448
451
 
449
- },
450
452
 
451
- {
452
- name: 'itemtranslatein itemtranslateout',
453
+ {
454
+ name: 'itemtranslatein itemtranslateout',
453
455
 
454
- self: true,
456
+ self: true,
455
457
 
456
- el: function() {
457
- return this.item;
458
- },
458
+ el() {
459
+ return this.item;
460
+ },
459
461
 
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;
462
+ handler(_ref3) {let { type, detail: { percent, dir } } = _ref3;
463
+ uikitUtil.fastdom.read(() => {
464
+ const props = this.getCss(getCurrentPercent(type, dir, percent));
465
+ uikitUtil.fastdom.write(() => uikitUtil.css(this.$el, props));
466
+ });
467
+ } }] };
466
468
 
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
469
 
474
- ]
475
470
 
476
- };
477
471
 
478
472
  function isIn(type) {
479
- return uikitUtil.endsWith(type, 'in');
473
+ return uikitUtil.endsWith(type, 'in');
480
474
  }
481
475
 
482
476
  function getCurrentPercent(type, dir, percent) {
477
+ percent /= 2;
483
478
 
484
- percent /= 2;
485
-
486
- return isIn(type) ^ dir < 0 ? percent : 1 - percent;
479
+ return isIn(type) ^ dir < 0 ? percent : 1 - percent;
487
480
  }
488
481
 
489
482
  if (typeof window !== 'undefined' && window.UIkit) {
490
- window.UIkit.component('sliderParallax', Component);
483
+ window.UIkit.component('sliderParallax', Component);
491
484
  }
492
485
 
493
486
  return Component;