uikit 3.10.2-dev.c8aa7eda2 → 3.11.1

package/dist/js/components/parallax.min.js

@@ -1 +1 @@
-/*! UIkit 3.10.2-dev.c8aa7eda2 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */(function(t,p){typeof exports=="object"&&typeof module!="undefined"?module.exports=p(require("uikit-util")):typeof define=="function"&&define.amd?define("uikitparallax",["uikit-util"],p):(t=typeof globalThis!="undefined"?globalThis:t||self,t.UIkitParallax=p(t.UIkit.util))})(this,function(t){"use strict";var p={props:{media:Boolean},data:{media:!1},computed:{matchMedia:function(){var e=z(this.media);return!e||window.matchMedia(e).matches}}};function z(e){if(t.isString(e)){if(e[0]==="@"){var r="breakpoint-"+e.substr(1);e=t.toFloat(t.getCssVar(r))}else if(isNaN(e))return e}return e&&!isNaN(e)?"(min-width: "+e+"px)":!1}t.memoize(function(e){return new t.Promise(function(r,a){if(!e){a();return}t.startsWith(e,"data:")?r(decodeURIComponent(e.split(",")[1])):t.ajax(e).then(function(s){return r(s.response)},function(){return a("SVG not found.")})})});function I(e){return Math.ceil(Math.max.apply(Math,[0].concat(t.$$("[stroke]",e).map(function(r){try{return r.getTotalLength()}catch{return 0}}))))}var x=["x","y","bgx","bgy","rotate","scale","color","backgroundColor","borderColor","opacity","blur","hue","grayscale","invert","saturate","sepia","fopacity","stroke"],$={mixins:[p],props:x.reduce(function(e,r){return e[r]="list",e},{}),data:x.reduce(function(e,r){return e[r]=void 0,e},{}),computed:{props:function(e,r){var a=this;return x.reduce(function(s,n){if(t.isUndefined(e[n]))return s;var f=n.match(/color/i),d=f||n==="opacity",c,g,i,o=e[n].slice();d&&t.css(r,n,""),o.length<2&&o.unshift((n==="scale"?1:d?t.css(r,n):0)||0);var b=W(o);if(f){var l=r.style,h=l.color;o=o.map(function(m){return F(r,m)}),r.style.color=h}else if(t.startsWith(n,"bg")){var u=n==="bgy"?"height":"width";if(o=o.map(function(m){return t.toPx(m,u,r)}),t.css(r,"background-position-"+n[2],""),g=t.css(r,"backgroundPosition").split(" ")[n[2]==="x"?0:1],a.covers){var v=Math.min.apply(Math,o),y=Math.max.apply(Math,o),C=o.indexOf(v)<o.indexOf(y);i=y-v,o=o.map(function(m){return m-(C?v:y)}),c=(C?-i:0)+"px"}else c=g}else o=o.map(t.toFloat);if(n==="stroke"){if(!o.some(function(m){return m}))return s;var S=I(r);t.css(r,"strokeDasharray",S),b==="%"&&(o=o.map(function(m){return m*S/100})),o=o.reverse(),n="strokeDashoffset"}return s[n]={steps:o,unit:b,pos:c,bgPos:g,diff:i},s},{})},bgProps:function(){var e=this;return["bgx","bgy"].filter(function(r){return r in e.props})},covers:function(e,r){return O(r)}},disconnected:function(){delete this._image},update:{read:function(e){var r=this;if(!!this.matchMedia){if(!e.image&&this.covers&&this.bgProps.length){var a=t.css(this.$el,"backgroundImage").replace(/^none|url\(["']?(.+?)["']?\)$/,"$1");if(a){var s=new Image;s.src=a,e.image=s,s.naturalWidth||(s.onload=function(){return r.$update()})}}var n=e.image;if(!(!n||!n.naturalWidth)){var f={width:this.$el.offsetWidth,height:this.$el.offsetHeight},d={width:n.naturalWidth,height:n.naturalHeight},c=t.Dimensions.cover(d,f);this.bgProps.forEach(function(g){var i=r.props[g],o=i.diff,b=i.bgPos,l=i.steps,h=g==="bgy"?"height":"width",u=c[h]-f[h];if(u<o)f[h]=c[h]+o-u;else if(u>o){var v=f[h]/t.toPx(b,h,r.$el);v&&(r.props[g].steps=l.map(function(y){return y-(u-o)/v}))}c=t.Dimensions.cover(d,f)}),e.dim=c}}},write:function(e){var r=e.dim;if(!this.matchMedia){t.css(this.$el,{backgroundSize:"",backgroundRepeat:""});return}r&&t.css(this.$el,{backgroundSize:r.width+"px "+r.height+"px",backgroundRepeat:"no-repeat"})},events:["resize"]},methods:{reset:function(){var e=this;t.each(this.getCss(0),function(r,a){return t.css(e.$el,a,"")})},getCss:function(e){var r=this,a=r.props;return Object.keys(a).reduce(function(s,n){var f=a[n],d=f.steps,c=f.unit,g=f.pos,i=N(d,e);switch(n){case"x":case"y":{c=c||"px",s.transform+=" translate"+t.ucfirst(n)+"("+t.toFloat(i).toFixed(c==="px"?0:2)+c+")";break}case"rotate":c=c||"deg",s.transform+=" rotate("+(i+c)+")";break;case"scale":s.transform+=" scale("+i+")";break;case"bgy":case"bgx":s["background-position-"+n[2]]="calc("+g+" + "+i+"px)";break;case"color":case"backgroundColor":case"borderColor":{var o=w(d,e),b=o[0],l=o[1],h=o[2];s[n]="rgba("+b.map(function(u,v){return u+=h*(l[v]-u),v===3?t.toFloat(u):parseInt(u,10)}).join(",")+")";break}case"blur":c=c||"px",s.filter+=" blur("+(i+c)+")";break;case"hue":c=c||"deg",s.filter+=" hue-rotate("+(i+c)+")";break;case"fopacity":c=c||"%",s.filter+=" opacity("+(i+c)+")";break;case"grayscale":case"invert":case"saturate":case"sepia":c=c||"%",s.filter+=" "+n+"("+(i+c)+")";break;default:s[n]=i}return s},{transform:"",filter:""})}}};function F(e,r){return t.css(t.css(e,"color",r),"color").split(/[(),]/g).slice(1,-1).concat(1).slice(0,4).map(t.toFloat)}function w(e,r){var a=e.length-1,s=Math.min(Math.floor(a*r),a-1),n=e.slice(s,s+2);return n.push(r===1?1:r%(1/a)*a),n}function N(e,r,a){a===void 0&&(a=2);var s=w(e,r),n=s[0],f=s[1],d=s[2];return(t.isNumber(n)?n+Math.abs(n-f)*d*(n<f?1:-1):+f).toFixed(a)}function W(e){return e.reduce(function(r,a){return t.isString(a)&&a.replace(/-|\d/g,"").trim()||r},"")}function O(e){var r=e.style,a=r.backgroundSize,s=t.css(t.css(e,"backgroundSize",""),"backgroundSize")==="cover";return e.style.backgroundSize=a,s}var M={mixins:[$],props:{target:String,viewport:Number,easing:Number},data:{target:!1,viewport:1,easing:1},computed:{target:function(e,r){var a=e.target;return P(a&&t.query(a,r)||r)}},update:{read:function(e,r){var a=e.percent;if(r.has("scroll")||(a=!1),!!this.matchMedia){var s=a;return a=D(t.scrolledOver(this.target)/(this.viewport||1),this.easing),{percent:a,style:s!==a?this.getCss(a):!1}}},write:function(e){var r=e.style;if(!this.matchMedia){this.reset();return}r&&t.css(this.$el,r)},events:["scroll","resize"]}};function D(e,r){return t.clamp(e*(1-(r-r*e)))}function P(e){return e?"offsetTop"in e?e:P(t.parent(e)):document.body}return typeof window!="undefined"&&window.UIkit&&window.UIkit.component("parallax",M),M});
+/*! UIkit 3.11.1 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */(function(a,s){typeof exports=="object"&&typeof module<"u"?module.exports=s(require("uikit-util")):typeof define=="function"&&define.amd?define("uikitparallax",["uikit-util"],s):(a=typeof globalThis<"u"?globalThis:a||self,a.UIkitParallax=s(a.UIkit.util))})(this,function(a){"use strict";var s={props:{media:Boolean},data:{media:!1},computed:{matchMedia:function(){var r=p(this.media);return!r||window.matchMedia(r).matches}}};function p(r){if(a.isString(r)){if(r[0]==="@"){var t="breakpoint-"+r.substr(1);r=a.toFloat(a.getCssVar(t))}else if(isNaN(r))return r}return r&&!isNaN(r)?"(min-width: "+r+"px)":!1}a.memoize(function(r){return new a.Promise(function(t,n){if(!r){n();return}a.startsWith(r,"data:")?t(decodeURIComponent(r.split(",")[1])):a.ajax(r).then(function(e){return t(e.response)},function(){return n("SVG not found.")})})});function B(r){return Math.ceil(Math.max.apply(Math,[0].concat(a.$$("[stroke]",r).map(function(t){try{return t.getTotalLength()}catch{return 0}}))))}var m={x,y:x,rotate:x,scale:x,color:M,backgroundColor:M,borderColor:M,blur:c,hue:c,fopacity:c,grayscale:c,invert:c,saturate:c,sepia:c,opacity:q,stroke:H,bgx:C,bgy:C},l=Object.keys,E={mixins:[s],props:S(l(m),"list"),data:S(l(m),void 0),computed:{props:function(r,t){var n=this;return l(m).reduce(function(e,o){return a.isUndefined(r[o])||(e[o]=m[o].call(n,o,t,r[o].slice())),e},{})}},methods:{reset:function(){var r=this;a.each(this.getCss(0),function(t,n){return a.css(r.$el,n,"")})},getCss:function(r){var t=this;return l(this.props).reduce(function(n,e){return t.props[e](n,r),n},{transform:"",filter:""})}}};function x(r,t,n){var e=F(n)||{x:"px",y:"px",rotate:"deg"}[r]||"";return(r==="x"||r==="y")&&(r="translate"+a.ucfirst(r)),n=n.map(a.toFloat),n.length===1&&n.unshift(r==="scale"?1:0),function(o,f){var i=g(n,f);a.startsWith(r,"translate")&&(i=a.toFloat(i).toFixed(e==="px"?0:6)),o.transform+=" "+r+"("+i+e+")"}}function M(r,t,n){return n.length===1&&n.unshift(b(t,r,"")),n=n.map(function(e){return R(t,e)}),function(e,o){var f=P(n,o),i=f[0],v=f[1],y=f[2],h=i.map(function(d,u){return d+=y*(v[u]-d),u===3?a.toFloat(d):parseInt(d,10)}).join(",");e[r]="rgba("+h+")"}}function R(r,t){return b(r,"color",t).split(/[(),]/g).slice(1,-1).concat(1).slice(0,4).map(a.toFloat)}function c(r,t,n){n.length===1&&n.unshift(0);var e=F(n)||{blur:"px",hue:"deg"}[r]||"%";return r={fopacity:"opacity",hue:"hue-rotate"}[r]||r,n=n.map(a.toFloat),function(o,f){var i=g(n,f);o.filter+=" "+r+"("+(i+e)+")"}}function q(r,t,n){return n.length===1&&n.unshift(b(t,r,"")),n=n.map(a.toFloat),function(e,o){e[r]=g(n,o)}}function H(r,t,n){n.length===1&&n.unshift(0);var e=F(n);if(n=n.map(a.toFloat),!n.some(function(f){return f}))return a.noop;var o=B(t);return a.css(t,"strokeDasharray",o),e==="%"&&(n=n.map(function(f){return f*o/100})),n=n.reverse(),function(f,i){f.strokeDashoffset=g(n,i)}}function C(r,t,n){n.length===1&&n.unshift(0),r=r.substr(-1);var e=r==="y"?"height":"width";n=n.map(function(f){return a.toPx(f,e,t)}),a.css(t,"background-position-"+r,"");var o=a.css(t,"backgroundPosition").split(" ")[r==="x"?0:1];return b(t,"backgroundSize","")==="cover"?L.call(this,r,t,n,o,e):I(r,n,o)}function L(r,t,n,e,o){var f=_.call(this,t);if(!f.naturalWidth)return a.noop;var i=Math.min.apply(Math,n),v=Math.max.apply(Math,n),y=n.indexOf(i)<n.indexOf(v),h=v-i,d=(y?-h:0)-(y?i:v),u={width:t.offsetWidth,height:t.offsetHeight},j={width:f.naturalWidth,height:f.naturalHeight},z=a.Dimensions.cover(j,u),w=z[o]-u[o];if(w<h)u[o]=z[o]+h-w;else if(w>h){var T=u[o]/a.toPx(e,o,t,!0);T&&(d-=(w-h)/T)}var V=a.Dimensions.cover(j,u),A=I(r,n,d+"px");return function($,J){A($,J),$.backgroundSize=V.width+"px "+V.height+"px",$.backgroundRepeat="no-repeat"}}function I(r,t,n){return function(e,o){e["background-position-"+r]="calc("+n+" + "+g(t,o)+"px)"}}function _(r){var t=this,n=a.css(r,"backgroundImage").replace(/^none|url\(["']?(.+?)["']?\)$/,"$1"),e=this._data;if(e[n])return e[n];if(n){var o=new Image;return o.src=n,o.naturalWidth||(o.onload=function(){return t.$update()}),e[n]=o}}function P(r,t){var n=r.length-1,e=Math.min(Math.floor(n*t),n-1);return r.slice(e,e+2).concat(t===1?1:t%(1/n)*n)}function g(r,t){var n=P(r,t),e=n[0],o=n[1],f=n[2];return a.isNumber(e)?e+Math.abs(e-o)*f*(e<o?1:-1):+o}function F(r,t){return r.reduce(function(n,e){return n||a.isString(e)&&e.replace(/[\d-]/g,"").trim()},"")||t}function b(r,t,n){var e=r.style[t],o=a.css(a.css(r,t,n),t);return r.style[t]=e,o}function S(r,t){return r.reduce(function(n,e){return n[e]=t,n},{})}var N={mixins:[E],props:{target:String,viewport:Number,easing:Number,start:String,end:String},data:{target:!1,viewport:1,easing:1,start:0,end:0},computed:{target:function(r,t){var n=r.target;return D(n&&a.query(n,t)||t)},start:function(r){var t=r.start;return W(t,this.target)},end:function(r){var t=r.end,n=r.viewport;return W(t||(n=(1-n)*100)&&n+"vh+"+n+"%",this.target)}},update:{read:function(r,t){var n=r.percent;if(t.has("scroll")||(n=!1),!!this.matchMedia){var e=n;return n=G(a.scrolledOver(this.target,this.start,this.end),this.easing),{percent:n,style:e===n?!1:this.getCss(n)}}},write:function(r){var t=r.style;if(!this.matchMedia){this.reset();return}t&&a.css(this.$el,t)},events:["scroll","resize"]}},O=/-?\d+(?:\.\d+)?(?:v[wh]|%|px)?/g;function W(r,t){var n,e=0;for(r=r.toString().replace(/\s/g,""),O.lastIndex=0;(n=O.exec(r))!==null;)e+=a.toPx(n[0],"height",t,!0);return e}function G(r,t){return t>=0?Math.pow(r,t+1):1-Math.pow(1-r,-t+1)}function D(r){return r?"offsetTop"in r?r:D(a.parent(r)):document.documentElement}return typeof window<"u"&&window.UIkit&&window.UIkit.component("parallax",N),N});

package/dist/js/components/slider-parallax.js

@@ -1,4 +1,4 @@
-/*! UIkit 3.10.2-dev.c8aa7eda2 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
+/*! UIkit 3.11.1 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
 
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('uikit-util')) :
@@ -71,357 +71,315 @@
         }) )));
     }
 
-    var props = ['x', 'y', 'bgx', 'bgy', 'rotate', 'scale', 'color', 'backgroundColor', 'borderColor', 'opacity', 'blur', 'hue', 'grayscale', 'invert', 'saturate', 'sepia', 'fopacity', 'stroke'];
+    var props = {
+        x: transformFn,
+        y: transformFn,
+        rotate: transformFn,
+        scale: transformFn,
+        color: colorFn,
+        backgroundColor: colorFn,
+        borderColor: colorFn,
+        blur: filterFn,
+        hue: filterFn,
+        fopacity: filterFn,
+        grayscale: filterFn,
+        invert: filterFn,
+        saturate: filterFn,
+        sepia: filterFn,
+        opacity: cssPropFn,
+        stroke: strokeFn,
+        bgx: backgroundFn,
+        bgy: backgroundFn
+    };
+
+    var keys = Object.keys;
 
     var Parallax = {
 
         mixins: [Media],
 
-        props: props.reduce(function (props, prop) {
-            props[prop] = 'list';
-            return props;
-        }, {}),
+        props: fillObject(keys(props), 'list'),
 
-        data: props.reduce(function (data, prop) {
-            data[prop] = undefined;
-            return data;
-        }, {}),
+        data: fillObject(keys(props), undefined),
 
         computed: {
 
             props: function(properties, $el) {
                 var this$1$1 = this;
 
-
-                return props.reduce(function (props, prop) {
-
-                    if (uikitUtil.isUndefined(properties[prop])) {
-                        return props;
+                return keys(props).reduce(function (result, prop) {
+                    if (!uikitUtil.isUndefined(properties[prop])) {
+                        result[prop] = props[prop].call(this$1$1, prop, $el, properties[prop].slice());
                     }
+                    return result;
+                }, {});
+            }
 
-                    var isColor = prop.match(/color/i);
-                    var isCssProp = isColor || prop === 'opacity';
-
-                    var pos, bgPos, diff;
-                    var steps = properties[prop].slice();
-
-                    if (isCssProp) {
-                        uikitUtil.css($el, prop, '');
-                    }
-
-                    if (steps.length < 2) {
-                        steps.unshift((prop === 'scale'
-                            ? 1
-                            : isCssProp
-                                ? uikitUtil.css($el, prop)
-                                : 0) || 0);
-                    }
-
-                    var unit = getUnit(steps);
-
-                    if (isColor) {
-
-                        var ref = $el.style;
-                        var color = ref.color;
-                        steps = steps.map(function (step) { return parseColor($el, step); });
-                        $el.style.color = color;
-
-                    } else if (uikitUtil.startsWith(prop, 'bg')) {
+        },
 
-                        var attr = prop === 'bgy' ? 'height' : 'width';
-                        steps = steps.map(function (step) { return uikitUtil.toPx(step, attr, $el); });
+        methods: {
 
-                        uikitUtil.css($el, ("background-position-" + (prop[2])), '');
-                        bgPos = uikitUtil.css($el, 'backgroundPosition').split(' ')[prop[2] === 'x' ? 0 : 1]; // IE 11 can't read background-position-[x|y]
+            reset: function() {
+                var this$1$1 = this;
 
-                        if (this$1$1.covers) {
+                uikitUtil.each(this.getCss(0), function (_, prop) { return uikitUtil.css(this$1$1.$el, prop, ''); });
+            },
 
-                            var min = Math.min.apply(Math, steps);
-                            var max = Math.max.apply(Math, steps);
-                            var down = steps.indexOf(min) < steps.indexOf(max);
+            getCss: function(percent) {
+                var this$1$1 = this;
 
-                            diff = max - min;
+                return keys(this.props).reduce(function (css, prop) {
+                    this$1$1.props[prop](css, percent);
+                    return css;
+                }, {transform: '', filter: ''});
+            }
 
-                            steps = steps.map(function (step) { return step - (down ? min : max); });
-                            pos = (down ? -diff : 0) + "px";
+        }
 
-                        } else {
+    };
 
-                            pos = bgPos;
+    function transformFn(prop, el, steps) {
 
-                        }
+        var unit = getUnit(steps) || {x: 'px', y: 'px', rotate: 'deg'}[prop] || '';
 
-                    } else {
+        if (prop === 'x' || prop === 'y') {
+            prop = "translate" + (uikitUtil.ucfirst(prop));
+        }
 
-                        steps = steps.map(uikitUtil.toFloat);
+        steps = steps.map(uikitUtil.toFloat);
 
-                    }
+        if (steps.length === 1) {
+            steps.unshift(prop === 'scale' ? 1 : 0);
+        }
 
-                    if (prop === 'stroke') {
+        return function (css, percent) {
+            var value = getValue(steps, percent);
 
-                        if (!steps.some(function (step) { return step; })) {
-                            return props;
-                        }
+            if (uikitUtil.startsWith(prop, 'translate')) {
+                value = uikitUtil.toFloat(value).toFixed(unit === 'px' ? 0 : 6);
+            }
 
-                        var length = getMaxPathLength($el);
-                        uikitUtil.css($el, 'strokeDasharray', length);
+            css.transform += " " + prop + "(" + value + unit + ")";
+        };
+    }
 
-                        if (unit === '%') {
-                            steps = steps.map(function (step) { return step * length / 100; });
-                        }
+    function colorFn(prop, el, steps) {
 
-                        steps = steps.reverse();
+        if (steps.length === 1) {
+            steps.unshift(getCssValue(el, prop, ''));
+        }
 
-                        prop = 'strokeDashoffset';
-                    }
+        steps = steps.map(function (step) { return parseColor(el, step); });
 
-                    props[prop] = {steps: steps, unit: unit, pos: pos, bgPos: bgPos, diff: diff};
+        return function (css, percent) {
 
-                    return props;
+            var ref = getStep(steps, percent);
+            var start = ref[0];
+            var end = ref[1];
+            var p = ref[2];
+            var value = start.map(function (value, i) {
+                value += p * (end[i] - value);
+                return i === 3 ? uikitUtil.toFloat(value) : parseInt(value, 10);
+            }).join(',');
+            css[prop] = "rgba(" + value + ")";
+        };
+    }
 
-                }, {});
+    function parseColor(el, color) {
+        return getCssValue(el, 'color', color)
+            .split(/[(),]/g)
+            .slice(1, -1)
+            .concat(1)
+            .slice(0, 4)
+            .map(uikitUtil.toFloat);
+    }
 
-            },
+    function filterFn(prop, el, steps) {
 
-            bgProps: function() {
-                var this$1$1 = this;
+        if (steps.length === 1) {
+            steps.unshift(0);
+        }
 
-                return ['bgx', 'bgy'].filter(function (bg) { return bg in this$1$1.props; });
-            },
+        var unit = getUnit(steps) || {blur: 'px', hue: 'deg'}[prop] || '%';
+        prop = {fopacity: 'opacity', hue: 'hue-rotate'}[prop] || prop;
+        steps = steps.map(uikitUtil.toFloat);
 
-            covers: function(_, $el) {
-                return covers($el);
-            }
+        return function (css, percent) {
+            var value = getValue(steps, percent);
+            css.filter += " " + prop + "(" + (value + unit) + ")";
+        };
+    }
 
-        },
+    function cssPropFn(prop, el, steps) {
 
-        disconnected: function() {
-            delete this._image;
-        },
+        if (steps.length === 1) {
+            steps.unshift(getCssValue(el, prop, ''));
+        }
 
-        update: {
+        steps = steps.map(uikitUtil.toFloat);
 
-            read: function(data) {
-                var this$1$1 = this;
+        return function (css, percent) {
+            css[prop] = getValue(steps, percent);
+        };
+    }
 
+    function strokeFn(prop, el, steps) {
 
-                if (!this.matchMedia) {
-                    return;
-                }
+        if (steps.length === 1) {
+            steps.unshift(0);
+        }
 
-                if (!data.image && this.covers && this.bgProps.length) {
-                    var src = uikitUtil.css(this.$el, 'backgroundImage').replace(/^none|url\(["']?(.+?)["']?\)$/, '$1');
+        var unit = getUnit(steps);
+        steps = steps.map(uikitUtil.toFloat);
 
-                    if (src) {
-                        var img = new Image();
-                        img.src = src;
-                        data.image = img;
+        if (!steps.some(function (step) { return step; })) {
+            return uikitUtil.noop;
+        }
 
-                        if (!img.naturalWidth) {
-                            img.onload = function () { return this$1$1.$update(); };
-                        }
-                    }
+        var length = getMaxPathLength(el);
+        uikitUtil.css(el, 'strokeDasharray', length);
 
-                }
+        if (unit === '%') {
+            steps = steps.map(function (step) { return step * length / 100; });
+        }
 
-                var image = data.image;
+        steps = steps.reverse();
 
-                if (!image || !image.naturalWidth) {
-                    return;
-                }
+        return function (css, percent) {
+            css.strokeDashoffset = getValue(steps, percent);
+        };
+    }
 
-                var dimEl = {
-                    width: this.$el.offsetWidth,
-                    height: this.$el.offsetHeight
-                };
-                var dimImage = {
-                    width: image.naturalWidth,
-                    height: image.naturalHeight
-                };
+    function backgroundFn(prop, el, steps) {
 
-                var dim = uikitUtil.Dimensions.cover(dimImage, dimEl);
+        if (steps.length === 1) {
+            steps.unshift(0);
+        }
 
-                this.bgProps.forEach(function (prop) {
+        prop = prop.substr(-1);
+        var attr = prop === 'y' ? 'height' : 'width';
+        steps = steps.map(function (step) { return uikitUtil.toPx(step, attr, el); });
 
-                    var ref = this$1$1.props[prop];
-                    var diff = ref.diff;
-                    var bgPos = ref.bgPos;
-                    var steps = ref.steps;
-                    var attr = prop === 'bgy' ? 'height' : 'width';
-                    var span = dim[attr] - dimEl[attr];
+        uikitUtil.css(el, ("background-position-" + prop), '');
+        var bgPos = uikitUtil.css(el, 'backgroundPosition').split(' ')[prop === 'x' ? 0 : 1]; // IE 11 can't read background-position-[x|y]
 
-                    if (span < diff) {
-                        dimEl[attr] = dim[attr] + diff - span;
-                    } else if (span > diff) {
+        return getCssValue(el, 'backgroundSize', '') === 'cover'
+            ? backgroundCoverFn.call(this, prop, el, steps, bgPos, attr)
+            : setBackgroundPosFn(prop, steps, bgPos);
+    }
 
-                        var posPercentage = dimEl[attr] / uikitUtil.toPx(bgPos, attr, this$1$1.$el);
+    function backgroundCoverFn(prop, el, steps, bgPos, attr) {
 
-                        if (posPercentage) {
-                            this$1$1.props[prop].steps = steps.map(function (step) { return step - (span - diff) / posPercentage; });
-                        }
-                    }
+        var image = getBackgroundImage.call(this, el);
 
-                    dim = uikitUtil.Dimensions.cover(dimImage, dimEl);
-                });
+        if (!image.naturalWidth) {
+            return uikitUtil.noop;
+        }
 
-                data.dim = dim;
-            },
+        var min = Math.min.apply(Math, steps);
+        var max = Math.max.apply(Math, steps);
+        var down = steps.indexOf(min) < steps.indexOf(max);
 
-            write: function(ref) {
-                var dim = ref.dim;
+        var diff = max - min;
+        var pos = (down ? -diff : 0) - (down ? min : max);
 
+        var dimEl = {
+            width: el.offsetWidth,
+            height: el.offsetHeight
+        };
 
-                if (!this.matchMedia) {
-                    uikitUtil.css(this.$el, {backgroundSize: '', backgroundRepeat: ''});
-                    return;
-                }
+        var dimImage = {
+            width: image.naturalWidth,
+            height: image.naturalHeight
+        };
 
-                dim && uikitUtil.css(this.$el, {
-                    backgroundSize: ((dim.width) + "px " + (dim.height) + "px"),
-                    backgroundRepeat: 'no-repeat'
-                });
+        var baseDim = uikitUtil.Dimensions.cover(dimImage, dimEl);
+        var span = baseDim[attr] - dimEl[attr];
 
-            },
+        if (span < diff) {
+            dimEl[attr] = baseDim[attr] + diff - span;
+        } else if (span > diff) {
 
-            events: ['resize']
+            var posPercentage = dimEl[attr] / uikitUtil.toPx(bgPos, attr, el, true);
 
-        },
+            if (posPercentage) {
+                pos -= (span - diff) / posPercentage;
+            }
+        }
 
-        methods: {
+        var dim = uikitUtil.Dimensions.cover(dimImage, dimEl);
 
-            reset: function() {
-                var this$1$1 = this;
+        var fn = setBackgroundPosFn(prop, steps, (pos + "px"));
+        return function (css, percent) {
+            fn(css, percent);
+            css.backgroundSize = (dim.width) + "px " + (dim.height) + "px";
+            css.backgroundRepeat = 'no-repeat';
+        };
+    }
 
-                uikitUtil.each(this.getCss(0), function (_, prop) { return uikitUtil.css(this$1$1.$el, prop, ''); });
-            },
+    function setBackgroundPosFn(prop, steps, pos) {
+        return function (css, percent) {
+            css[("background-position-" + prop)] = "calc(" + pos + " + " + (getValue(steps, percent)) + "px)";
+        };
+    }
 
-            getCss: function(percent) {
+    function getBackgroundImage(el) {
+        var this$1$1 = this;
 
-                var ref = this;
-                var props = ref.props;
-                return Object.keys(props).reduce(function (css, prop) {
-
-                    var ref = props[prop];
-                    var steps = ref.steps;
-                    var unit = ref.unit;
-                    var pos = ref.pos;
-                    var value = getValue(steps, percent);
-
-                    switch (prop) {
-
-                        // transforms
-                        case 'x':
-                        case 'y': {
-                            unit = unit || 'px';
-                            css.transform += " translate" + (uikitUtil.ucfirst(prop)) + "(" + (uikitUtil.toFloat(value).toFixed(unit === 'px' ? 0 : 2)) + unit + ")";
-                            break;
-                        }
-                        case 'rotate':
-                            unit = unit || 'deg';
-                            css.transform += " rotate(" + (value + unit) + ")";
-                            break;
-                        case 'scale':
-                            css.transform += " scale(" + value + ")";
-                            break;
-
-                        // bg image
-                        case 'bgy':
-                        case 'bgx':
-                            css[("background-position-" + (prop[2]))] = "calc(" + pos + " + " + value + "px)";
-                            break;
-
-                        // color
-                        case 'color':
-                        case 'backgroundColor':
-                        case 'borderColor': {
-
-                            var ref$1 = getStep(steps, percent);
-                            var start = ref$1[0];
-                            var end = ref$1[1];
-                            var p = ref$1[2];
-
-                            css[prop] = "rgba(" + (start.map(function (value, i) {
-                                    value += p * (end[i] - value);
-                                    return i === 3 ? uikitUtil.toFloat(value) : parseInt(value, 10);
-                                }).join(',')) + ")";
-                            break;
-                        }
-                        // CSS Filter
-                        case 'blur':
-                            unit = unit || 'px';
-                            css.filter += " blur(" + (value + unit) + ")";
-                            break;
-                        case 'hue':
-                            unit = unit || 'deg';
-                            css.filter += " hue-rotate(" + (value + unit) + ")";
-                            break;
-                        case 'fopacity':
-                            unit = unit || '%';
-                            css.filter += " opacity(" + (value + unit) + ")";
-                            break;
-                        case 'grayscale':
-                        case 'invert':
-                        case 'saturate':
-                        case 'sepia':
-                            unit = unit || '%';
-                            css.filter += " " + prop + "(" + (value + unit) + ")";
-                            break;
-                        default:
-                            css[prop] = value;
-                    }
+        var src = uikitUtil.css(el, 'backgroundImage').replace(/^none|url\(["']?(.+?)["']?\)$/, '$1');
 
-                    return css;
+        var data = this._data;
 
-                }, {transform: '', filter: ''});
+        if (data[src]) {
+            return data[src];
+        }
 
+        if (src) {
+            var img = new Image();
+            img.src = src;
+            if (!img.naturalWidth) {
+                img.onload = function () { return this$1$1.$update(); };
             }
 
+            return data[src] = img;
         }
-
-    };
-
-    function parseColor(el, color) {
-        return uikitUtil.css(uikitUtil.css(el, 'color', color), 'color')
-            .split(/[(),]/g)
-            .slice(1, -1)
-            .concat(1)
-            .slice(0, 4)
-            .map(uikitUtil.toFloat);
     }
 
     function getStep(steps, percent) {
         var count = steps.length - 1;
         var index = Math.min(Math.floor(count * percent), count - 1);
-        var step = steps.slice(index, index + 2);
-
-        step.push(percent === 1 ? 1 : percent % (1 / count) * count);
 
-        return step;
+        return steps
+            .slice(index, index + 2)
+            .concat(percent === 1 ? 1 : percent % (1 / count) * count);
     }
 
-    function getValue(steps, percent, digits) {
-        if ( digits === void 0 ) digits = 2;
-
+    function getValue(steps, percent) {
         var ref = getStep(steps, percent);
         var start = ref[0];
         var end = ref[1];
         var p = ref[2];
-        return (uikitUtil.isNumber(start)
+        return uikitUtil.isNumber(start)
             ? start + Math.abs(start - end) * p * (start < end ? 1 : -1)
-            : +end
-        ).toFixed(digits);
+            : +end;
     }
 
-    function getUnit(steps) {
-        return steps.reduce(function (unit, step) { return uikitUtil.isString(step) && step.replace(/-|\d/g, '').trim() || unit; }, '');
+    function getUnit(steps, defaultUnit) {
+        return steps.reduce(function (unit, step) { return unit || uikitUtil.isString(step) && step.replace(/[\d-]/g, '').trim(); }, '') || defaultUnit;
     }
 
-    function covers(el) {
-        var ref = el.style;
-        var backgroundSize = ref.backgroundSize;
-        var covers = uikitUtil.css(uikitUtil.css(el, 'backgroundSize', ''), 'backgroundSize') === 'cover';
-        el.style.backgroundSize = backgroundSize;
-        return covers;
+    function getCssValue(el, prop, value) {
+        var prev = el.style[prop];
+        var val = uikitUtil.css(uikitUtil.css(el, prop, value), prop);
+        el.style[prop] = prev;
+        return val;
+    }
+
+    function fillObject(keys, value) {
+        return keys.reduce(function (data, prop) {
+            data[prop] = value;
+            return data;
+        }, {});
     }
 
     var Component = {