uikit 3.11.2-dev.fb043abc2 → 3.12.0

package/tests/utility.html

@@ -168,8 +168,8 @@
 
                             <div uk-overflow-auto="selContainer: .uk-height-medium; selContent: .js-wrapper">
                                 <div class="uk-grid-small" uk-grid>
-                                    <div class="uk-width-1-2"><img src="images/light.jpg" alt=""></div>
-                                    <div class="uk-width-1-2"><img src="images/dark.jpg" alt=""></div>
+                                    <div class="uk-width-1-2"><img src="images/light.jpg" width="1800" height="1200" alt=""></div>
+                                    <div class="uk-width-1-2"><img src="images/dark.jpg" width="1800" height="1200" alt=""></div>
                                 </div>
                             </div>
 
@@ -188,10 +188,10 @@
 
                             <div uk-overflow-auto="selContainer: .uk-height-medium; selContent: .js-wrapper">
                                 <div class="uk-grid-small" uk-grid>
-                                    <div class="uk-width-1-2"><img src="images/light.jpg" alt=""></div>
-                                    <div class="uk-width-1-2"><img src="images/dark.jpg" alt=""></div>
-                                    <div class="uk-width-1-2"><img src="images/photo.jpg" alt=""></div>
-                                    <div class="uk-width-1-2"><img src="images/photo2.jpg" alt=""></div>
+                                    <div class="uk-width-1-2"><img src="images/light.jpg" width="1800" height="1200" alt=""></div>
+                                    <div class="uk-width-1-2"><img src="images/dark.jpg" width="1800" height="1200" alt=""></div>
+                                    <div class="uk-width-1-2"><img src="images/photo.jpg" width="1800" height="1200" alt=""></div>
+                                    <div class="uk-width-1-2"><img src="images/photo2.jpg" width="1800" height="1200" alt=""></div>
                                 </div>
                             </div>
 
@@ -239,7 +239,24 @@
                 </div>
                 <div>
                     <p>Responsive Height (Image)</p>
-                    <p style="height: 100px; "><img class="uk-responsive-height" src="images/photo.jpg" alt=""></p>
+                    <p style="height: 100px; "><img class="uk-responsive-height" src="images/photo.jpg" width="1800" height="1200" alt=""></p>
+                </div>
+            </div>
+
+            <h2>Object Fit and Position</h2>
+
+            <div class="uk-child-width-1-3@s" uk-grid>
+                <div>
+                    <p>Object Fit Cover</p>
+                    <img class="uk-object-cover" src="images/photo.jpg" width="1000" height="1000" alt="" style="aspect-ratio: 1 / 1;">
+                </div>
+                <div>
+                    <p>Object Fit Contain</p>
+                    <img class="uk-object-contain" src="images/photo.jpg" width="1000" height="1000" alt="" style="aspect-ratio: 1 / 1;">
+                </div>
+                <div>
+                    <p>Object Fit Cover Left</p>
+                    <img class="uk-object-cover uk-object-top-left" src="images/photo.jpg" width="1000" height="1000" alt="" style="aspect-ratio: 1 / 1;">
                 </div>
             </div>
 
@@ -249,7 +266,7 @@
                 <div>
 
                     <div class="uk-inline uk-box-shadow-hover-small">
-                        <img class="uk-invisible" src="images/photo.jpg" alt="">
+                        <img class="uk-invisible" src="images/photo.jpg" width="1800" height="1200" alt="">
                         <div class="uk-position-center">Hover</div>
                     </div>
 
@@ -257,7 +274,7 @@
                 <div>
 
                     <div class="uk-inline uk-box-shadow-small">
-                        <img class="uk-invisible" src="images/photo.jpg" alt="">
+                        <img class="uk-invisible" src="images/photo.jpg" width="1800" height="1200" alt="">
                         <div class="uk-position-center">Small</div>
                     </div>
 
@@ -265,7 +282,7 @@
                 <div>
 
                     <div class="uk-inline uk-box-shadow-medium">
-                        <img class="uk-invisible" src="images/photo.jpg" alt="">
+                        <img class="uk-invisible" src="images/photo.jpg" width="1800" height="1200" alt="">
                         <div class="uk-position-center">Medium</div>
                     </div>
 
@@ -273,7 +290,7 @@
                 <div>
 
                     <div class="uk-inline uk-box-shadow-large">
-                        <img class="uk-invisible" src="images/photo.jpg" alt="">
+                        <img class="uk-invisible" src="images/photo.jpg" width="1800" height="1200" alt="">
                         <div class="uk-position-center">Large</div>
                     </div>
 
@@ -281,84 +298,84 @@
                 <div>
 
                     <div class="uk-inline uk-box-shadow-xlarge">
-                        <img class="uk-invisible" src="images/photo.jpg" alt="">
+                        <img class="uk-invisible" src="images/photo.jpg" width="1800" height="1200" alt="">
                         <div class="uk-position-center">X-Large</div>
                     </div>
 
                 </div>
                 <div>
 
-                    <img class="uk-box-shadow-hover-xlarge" src="images/photo.jpg" alt="">
+                    <img class="uk-box-shadow-hover-xlarge" src="images/photo.jpg" width="1800" height="1200" alt="">
 
                 </div>
                 <div>
 
-                    <img class="uk-box-shadow-small" src="images/photo.jpg" alt="">
+                    <img class="uk-box-shadow-small" src="images/photo.jpg" width="1800" height="1200" alt="">
 
                 </div>
                 <div>
 
-                    <img class="uk-box-shadow-medium" src="images/photo.jpg" alt="">
+                    <img class="uk-box-shadow-medium" src="images/photo.jpg" width="1800" height="1200" alt="">
 
                 </div>
                 <div>
 
-                    <img class="uk-box-shadow-large" src="images/photo.jpg" alt="">
+                    <img class="uk-box-shadow-large" src="images/photo.jpg" width="1800" height="1200" alt="">
 
                 </div>
                 <div>
 
-                    <img class="uk-box-shadow-xlarge" src="images/photo.jpg" alt="">
+                    <img class="uk-box-shadow-xlarge" src="images/photo.jpg" width="1800" height="1200" alt="">
 
                 </div>
                 <div>
 
-                    <img class="uk-box-shadow-hover-xlarge" src="images/light.jpg" alt="">
+                    <img class="uk-box-shadow-hover-xlarge" src="images/light.jpg" width="1800" height="1200" alt="">
 
                 </div>
                 <div>
 
-                    <img class="uk-box-shadow-small" src="images/light.jpg" alt="">
+                    <img class="uk-box-shadow-small" src="images/light.jpg" width="1800" height="1200" alt="">
 
                 </div>
                 <div>
 
-                    <img class="uk-box-shadow-medium" src="images/light.jpg" alt="">
+                    <img class="uk-box-shadow-medium" src="images/light.jpg" width="1800" height="1200" alt="">
 
                 </div>
                 <div>
 
-                    <img class="uk-box-shadow-large" src="images/light.jpg" alt="">
+                    <img class="uk-box-shadow-large" src="images/light.jpg" width="1800" height="1200" alt="">
 
                 </div>
                 <div>
 
-                    <img class="uk-box-shadow-xlarge" src="images/light.jpg" alt="">
+                    <img class="uk-box-shadow-xlarge" src="images/light.jpg" width="1800" height="1200" alt="">
 
                 </div>
                 <div>
 
-                    <img class="uk-box-shadow-hover-xlarge" src="images/dark.jpg" alt="">
+                    <img class="uk-box-shadow-hover-xlarge" src="images/dark.jpg" width="1800" height="1200" alt="">
 
                 </div>
                 <div>
 
-                    <img class="uk-box-shadow-small" src="images/dark.jpg" alt="">
+                    <img class="uk-box-shadow-small" src="images/dark.jpg" width="1800" height="1200" alt="">
 
                 </div>
                 <div>
 
-                    <img class="uk-box-shadow-medium" src="images/dark.jpg" alt="">
+                    <img class="uk-box-shadow-medium" src="images/dark.jpg" width="1800" height="1200" alt="">
 
                 </div>
                 <div>
 
-                    <img class="uk-box-shadow-large" src="images/dark.jpg" alt="">
+                    <img class="uk-box-shadow-large" src="images/dark.jpg" width="1800" height="1200" alt="">
 
                 </div>
                 <div>
 
-                    <img class="uk-box-shadow-xlarge" src="images/dark.jpg" alt="">
+                    <img class="uk-box-shadow-xlarge" src="images/dark.jpg" width="1800" height="1200" alt="">
 
                 </div>
             </div>
@@ -369,21 +386,21 @@
                 <div class="uk-width-1-6@m">
 
                     <div class="uk-box-shadow-bottom">
-                        <img src="images/photo.jpg" alt="">
+                        <img src="images/photo.jpg" width="1800" height="1200" alt="">
                     </div>
 
                 </div>
                 <div class="uk-width-1-3@m">
 
                     <div class="uk-box-shadow-bottom">
-                        <img src="images/photo.jpg" alt="">
+                        <img src="images/photo.jpg" width="1800" height="1200" alt="">
                     </div>
 
                 </div>
                 <div class="uk-width-1-2@m">
 
                     <div class="uk-box-shadow-bottom">
-                        <img src="images/photo.jpg" alt="">
+                        <img src="images/photo.jpg" width="1800" height="1200" alt="">
                     </div>
 
                 </div>
@@ -407,14 +424,14 @@
                 <div>
                     <p>Image</p>
                     <a class="uk-logo" href="#">
-                        <img src="images/photo.jpg" width="200" alt="">
+                        <img src="images/photo.jpg" width="200" height="133" alt="">
                     </a>
                 </div>
                 <div>
                     <p>+ Inverse Image</p>
                     <a class="uk-logo" href="#">
-                        <img src="images/photo.jpg" width="200" alt="">
-                        <img class="uk-logo-inverse" src="images/dark.jpg" width="200" alt="">
+                        <img src="images/photo.jpg" width="200" height="133" alt="">
+                        <img class="uk-logo-inverse" src="images/dark.jpg" width="200" height="133" alt="">
                     </a>
                 </div>
             </div>

package/tests/video.html

@@ -20,7 +20,7 @@
                     <h3>Autoplay</h3>
 
                     <button class="uk-button uk-button-default uk-margin-bottom" type="button" uk-toggle="target: +">Toggle Video</button>
-                    <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" controls playsinline uk-video="automute: true"></video>
+                    <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width="1920" height="1080" controls playsinline uk-video="automute: true"></video>
 
                 </div>
                 <div>

package/tests/width.html

@@ -73,7 +73,7 @@
                 <div><div class="uk-panel">Expand</div></div>
                 <div><div class="uk-panel">Expand</div></div>
                 <div><div class="uk-panel">Expandwithnonebreakingspace</div></div>
-                <div><div class="uk-panel"><img src="images/photo.jpg" alt=""></div></div>
+                <div><div class="uk-panel"><img src="images/photo.jpg" width="1800" height="1200" alt=""></div></div>
             </div>
 
             <div class="uk-grid-collapse uk-grid-match uk-child-width-expand uk-margin" uk-grid>

package/src/js/mixin/flex-bug.js

@@ -1,56 +0,0 @@
-import {$$, boxModelAdjust, css, isIE, toFloat} from 'uikit-util';
-
-// IE 11 fix (min-height on a flex container won't apply to its flex items)
-export default isIE ? {
-
-    props: {
-        selMinHeight: String
-    },
-
-    data: {
-        selMinHeight: false,
-        forceHeight: false
-    },
-
-    computed: {
-
-        elements({selMinHeight}, $el) {
-            return selMinHeight ? $$(selMinHeight, $el) : [$el];
-        }
-
-    },
-
-    update: [
-
-        {
-
-            read() {
-                css(this.elements, 'height', '');
-            },
-
-            order: -5,
-
-            events: ['resize']
-
-        },
-
-        {
-
-            write() {
-                this.elements.forEach(el => {
-                    const height = toFloat(css(el, 'minHeight'));
-                    if (height && (this.forceHeight || Math.round(height + boxModelAdjust(el, 'height', 'content-box')) >= el.offsetHeight)) {
-                        css(el, 'height', height);
-                    }
-                });
-            },
-
-            order: 5,
-
-            events: ['resize']
-
-        }
-
-    ]
-
-} : {};

package/src/js/util/promise.js

@@ -1,191 +0,0 @@
-/* global setImmediate */
-import {inBrowser} from './env';
-import {isFunction, isObject} from './lang';
-
-export const Promise = inBrowser && window.Promise || PromiseFn;
-
-export class Deferred {
-    constructor() {
-        this.promise = new Promise((resolve, reject) => {
-            this.reject = reject;
-            this.resolve = resolve;
-        });
-    }
-}
-
-/**
- * Promises/A+ polyfill v1.1.4 (https://github.com/bramstein/promis)
- */
-
-const RESOLVED = 0;
-const REJECTED = 1;
-const PENDING = 2;
-
-const async = inBrowser && window.setImmediate || setTimeout;
-
-function PromiseFn(executor) {
-
-    this.state = PENDING;
-    this.value = undefined;
-    this.deferred = [];
-
-    const promise = this;
-
-    try {
-        executor(
-            x => {
-                promise.resolve(x);
-            },
-            r => {
-                promise.reject(r);
-            }
-        );
-    } catch (e) {
-        promise.reject(e);
-    }
-}
-
-PromiseFn.reject = function (r) {
-    return new PromiseFn((resolve, reject) => {
-        reject(r);
-    });
-};
-
-PromiseFn.resolve = function (x) {
-    return new PromiseFn((resolve, reject) => {
-        resolve(x);
-    });
-};
-
-PromiseFn.all = function all(iterable) {
-    return new PromiseFn((resolve, reject) => {
-        const result = [];
-        let count = 0;
-
-        if (iterable.length === 0) {
-            resolve(result);
-        }
-
-        function resolver(i) {
-            return function (x) {
-                result[i] = x;
-                count += 1;
-
-                if (count === iterable.length) {
-                    resolve(result);
-                }
-            };
-        }
-
-        for (let i = 0; i < iterable.length; i += 1) {
-            PromiseFn.resolve(iterable[i]).then(resolver(i), reject);
-        }
-    });
-};
-
-PromiseFn.race = function race(iterable) {
-    return new PromiseFn((resolve, reject) => {
-        for (let i = 0; i < iterable.length; i += 1) {
-            PromiseFn.resolve(iterable[i]).then(resolve, reject);
-        }
-    });
-};
-
-const p = PromiseFn.prototype;
-
-p.resolve = function resolve(x) {
-    const promise = this;
-
-    if (promise.state === PENDING) {
-        if (x === promise) {
-            throw new TypeError('Promise settled with itself.');
-        }
-
-        let called = false;
-
-        try {
-            const then = x && x.then;
-
-            if (x !== null && isObject(x) && isFunction(then)) {
-                then.call(
-                    x,
-                    x => {
-                        if (!called) {
-                            promise.resolve(x);
-                        }
-                        called = true;
-                    },
-                    r => {
-                        if (!called) {
-                            promise.reject(r);
-                        }
-                        called = true;
-                    }
-                );
-                return;
-            }
-        } catch (e) {
-            if (!called) {
-                promise.reject(e);
-            }
-            return;
-        }
-
-        promise.state = RESOLVED;
-        promise.value = x;
-        promise.notify();
-    }
-};
-
-p.reject = function reject(reason) {
-    const promise = this;
-
-    if (promise.state === PENDING) {
-        if (reason === promise) {
-            throw new TypeError('Promise settled with itself.');
-        }
-
-        promise.state = REJECTED;
-        promise.value = reason;
-        promise.notify();
-    }
-};
-
-p.notify = function notify() {
-    async(() => {
-        if (this.state !== PENDING) {
-            while (this.deferred.length) {
-                const [onResolved, onRejected, resolve, reject] = this.deferred.shift();
-
-                try {
-                    if (this.state === RESOLVED) {
-                        if (isFunction(onResolved)) {
-                            resolve(onResolved.call(undefined, this.value));
-                        } else {
-                            resolve(this.value);
-                        }
-                    } else if (this.state === REJECTED) {
-                        if (isFunction(onRejected)) {
-                            resolve(onRejected.call(undefined, this.value));
-                        } else {
-                            reject(this.value);
-                        }
-                    }
-                } catch (e) {
-                    reject(e);
-                }
-            }
-        }
-    });
-};
-
-p.then = function then(onResolved, onRejected) {
-    return new PromiseFn((resolve, reject) => {
-        this.deferred.push([onResolved, onRejected, resolve, reject]);
-        this.notify();
-    });
-};
-
-p.catch = function (onRejected) {
-    return this.then(undefined, onRejected);
-};