uikit 3.11.2-dev.92f357b93 → 3.11.2-dev.946d2efea

package/src/js/core/core.js

@@ -1,18 +1,4 @@
-import {
-    css,
-    fastdom,
-    getEventPos,
-    inBrowser,
-    isTouch,
-    on,
-    once,
-    parent,
-    pointerCancel,
-    pointerDown,
-    pointerUp,
-    toMs,
-    trigger,
-} from 'uikit-util';
+import { css, fastdom, inBrowser, observeResize, on, toMs } from 'uikit-util';
 
 export default function (UIkit) {
     if (!inBrowser) {
@@ -32,27 +18,7 @@ export default function (UIkit) {
 
     on(window, 'load resize', handleResize);
     on(document, 'loadedmetadata load', handleResize, true);
-
-    if ('ResizeObserver' in window) {
-        new ResizeObserver(handleResize).observe(document.documentElement);
-    }
-
-    // throttle `scroll` event (Safari triggers multiple `scroll` events per frame)
-    let pending;
-    on(
-        window,
-        'scroll',
-        (e) => {
-            if (pending) {
-                return;
-            }
-            pending = true;
-            fastdom.read(() => (pending = false));
-
-            UIkit.update(null, e.type);
-        },
-        { passive: true, capture: true }
-    );
+    observeResize(document.documentElement, handleResize);
 
     let started = 0;
     on(
@@ -71,43 +37,4 @@ export default function (UIkit) {
         },
         true
     );
-
-    on(
-        document,
-        pointerDown,
-        (e) => {
-            if (!isTouch(e)) {
-                return;
-            }
-
-            // Handle Swipe Gesture
-            const pos = getEventPos(e);
-            const target = 'tagName' in e.target ? e.target : parent(e.target);
-            once(document, `${pointerUp} ${pointerCancel} scroll`, (e) => {
-                const { x, y } = getEventPos(e);
-
-                // swipe
-                if (
-                    (e.type !== 'scroll' && target && x && Math.abs(pos.x - x) > 100) ||
-                    (y && Math.abs(pos.y - y) > 100)
-                ) {
-                    setTimeout(() => {
-                        trigger(target, 'swipe');
-                        trigger(target, `swipe${swipeDirection(pos.x, pos.y, x, y)}`);
-                    });
-                }
-            });
-        },
-        { passive: true }
-    );
-}
-
-function swipeDirection(x1, y1, x2, y2) {
-    return Math.abs(x1 - x2) >= Math.abs(y1 - y2)
-        ? x1 - x2 > 0
-            ? 'Left'
-            : 'Right'
-        : y1 - y2 > 0
-        ? 'Up'
-        : 'Down';
 }

package/src/js/core/cover.js

@@ -1,5 +1,5 @@
 import Video from './video';
-import { css, Dimensions, parent } from 'uikit-util';
+import { css, Dimensions, observeResize, parent } from 'uikit-util';
 
 export default {
     mixins: [Video],
@@ -13,6 +13,10 @@ export default {
         automute: true,
     },
 
+    connected() {
+        this.registerObserver(observeResize(this.$el, () => this.$emit('resize')));
+    },
+
     update: {
         read() {
             const el = this.$el;

package/src/js/core/drop.js

@@ -1,4 +1,5 @@
 import Container from '../mixin/container';
+import Lazyload from '../mixin/lazyload';
 import Position from '../mixin/position';
 import Togglable from '../mixin/togglable';
 import {
@@ -30,7 +31,7 @@ import {
 export let active;
 
 export default {
-    mixins: [Container, Position, Togglable],
+    mixins: [Container, Lazyload, Position, Togglable],
 
     args: 'pos',
 
@@ -84,6 +85,7 @@ export default {
                 mode: this.mode,
             }).$el;
             attr(this.target, 'aria-haspopup', true);
+            this.lazyload(this.target);
         }
     },
 

package/src/js/core/form-custom.js

@@ -60,7 +60,7 @@ export default {
             name: 'change',
 
             handler() {
-                this.$update();
+                this.$emit();
             },
         },
 
@@ -72,7 +72,7 @@ export default {
             },
 
             handler() {
-                this.$update();
+                this.$emit();
             },
         },
     ],

package/src/js/core/height-viewport.js

@@ -1,3 +1,4 @@
+import Class from '../mixin/class';
 import {
     boxModelAdjust,
     css,
@@ -14,6 +15,8 @@ import {
 } from 'uikit-util';
 
 export default {
+    mixins: [Class],
+
     props: {
         expand: Boolean,
         offsetTop: Boolean,

package/src/js/core/icon.js

@@ -68,14 +68,14 @@ const Icon = {
     },
 
     methods: {
-        getSvg() {
+        async getSvg() {
             const icon = getIcon(this.icon);
 
             if (!icon) {
-                return Promise.reject('Icon not found.');
+                throw 'Icon not found.';
             }
 
-            return Promise.resolve(icon);
+            return icon;
         },
     },
 };
@@ -137,9 +137,16 @@ export const Close = {
 export const Spinner = {
     extends: IconComponent,
 
-    async connected() {
-        const svg = await this.svg;
-        svg && this.ratio !== 1 && css($('circle', svg), 'strokeWidth', 1 / this.ratio);
+    methods: {
+        async getSvg() {
+            const icon = await Icon.methods.getSvg.call(this);
+
+            if (this.ratio !== 1) {
+                css($('circle', icon), 'strokeWidth', 1 / this.ratio);
+            }
+
+            return icon;
+        },
     },
 };
 

package/src/js/core/img.js

@@ -8,10 +8,12 @@ import {
     escape,
     fragment,
     hasAttr,
+    hasIntersectionObserver,
     includes,
     isArray,
     isEmpty,
     isTag,
+    observeIntersection,
     parent,
     parseOptions,
     queryAll,
@@ -23,7 +25,6 @@ import {
 } from 'uikit-util';
 
 const nativeLazyLoad = 'loading' in HTMLImageElement.prototype;
-const nativeIsIntersecting = 'isIntersecting' in IntersectionObserverEntry.prototype; // Old chromium based browsers (UC Browser) did not implement `isIntersecting`
 
 export default {
     args: 'dataSrc',
@@ -53,13 +54,13 @@ export default {
             },
 
             watch() {
-                this.observe();
+                this.$reset();
             },
         },
     },
 
     connected() {
-        if (this.loading !== 'lazy' || !window.IntersectionObserver || !nativeIsIntersecting) {
+        if (this.loading !== 'lazy' || !hasIntersectionObserver) {
             this.load();
             return;
         }
@@ -75,28 +76,27 @@ export default {
 
         ensureSrcAttribute(this.$el);
 
-        const rootMargin = `${toPx(this.offsetTop, 'height')}px ${toPx(
-            this.offsetLeft,
-            'width'
-        )}px`;
-        this.observer = new IntersectionObserver(
-            (entries) => {
-                if (entries.some((entry) => entry.isIntersecting)) {
+        this.registerObserver(
+            observeIntersection(
+                this.target,
+                (entries, observer) => {
                     this.load();
-                    this.observer.disconnect();
+                    observer.disconnect();
+                },
+                {
+                    rootMargin: `${toPx(this.offsetTop, 'height')}px ${toPx(
+                        this.offsetLeft,
+                        'width'
+                    )}px`,
                 }
-            },
-            { rootMargin }
+            )
         );
-        this.observe();
     },
 
     disconnected() {
         if (this._data.image) {
             this._data.image.onload = '';
         }
-
-        this.observer?.disconnect();
     },
 
     update: {
@@ -132,14 +132,6 @@ export default {
             setSrcAttrs(this.$el, image.currentSrc);
             return (this._data.image = image);
         },
-
-        observe() {
-            if (this._connected && !this._data.image) {
-                for (const el of this.target) {
-                    this.observer.observe(el);
-                }
-            }
-        },
     },
 };
 
@@ -172,7 +164,9 @@ function getImageFromElement(el, src, sources) {
 
     wrapInPicture(img, sources);
     setSourceProps(el, img);
-    img.onload = () => setSrcAttrs(el, img.currentSrc);
+    img.onload = () => {
+        setSrcAttrs(el, img.currentSrc);
+    };
     attr(img, 'src', src);
     return img;
 }

package/src/js/core/offcanvas.js

@@ -1,4 +1,5 @@
 import Modal from '../mixin/modal';
+import Swipe from '../mixin/swipe';
 import {
     $,
     addClass,
@@ -15,7 +16,7 @@ import {
 } from 'uikit-util';
 
 export default {
-    mixins: [Modal],
+    mixins: [Modal, Swipe],
 
     args: 'mode',
 

package/src/js/core/sticky.js

@@ -10,13 +10,12 @@ import {
     dimensions,
     fastdom,
     height as getHeight,
+    offset as getOffset,
     getScrollingElement,
     hasClass,
-    isNumeric,
     isString,
     isVisible,
     noop,
-    offset,
     offsetPosition,
     parent,
     query,
@@ -29,6 +28,7 @@ import {
     toPx,
     trigger,
     within,
+    intersectRect,
 } from 'uikit-util';
 
 export default {
@@ -67,21 +67,6 @@ export default {
     },
 
     computed: {
-        position({ position }, $el) {
-            return position === 'auto'
-                ? (this.isFixed ? this.placeholder : $el).offsetHeight > getHeight(window)
-                    ? 'bottom'
-                    : 'top'
-                : position;
-        },
-
-        offset({ offset }, $el) {
-            if (this.position === 'bottom') {
-                offset += '+100vh-100%';
-            }
-            return toPx(offset, 'height', $el);
-        },
-
         selTarget({ selTarget }, $el) {
             return (selTarget && $(selTarget, $el)) || $el;
         },
@@ -134,34 +119,29 @@ export default {
                 return window;
             },
 
+            filter() {
+                return this.targetOffset !== false;
+            },
+
             handler() {
-                if (!(this.targetOffset !== false && location.hash && scrollTop(window) > 0)) {
+                if (!location.hash || scrollTop(window) === 0) {
                     return;
                 }
 
-                const target = $(location.hash);
-
-                if (target) {
-                    fastdom.read(() => {
-                        const { top } = offset(target);
-                        const elTop = offset(this.$el).top;
-                        const elHeight = this.$el.offsetHeight;
-
-                        if (
-                            this.isFixed &&
-                            elTop + elHeight >= top &&
-                            elTop <= top + target.offsetHeight
-                        ) {
-                            scrollTop(
-                                window,
-                                top -
-                                    elHeight -
-                                    (isNumeric(this.targetOffset) ? this.targetOffset : 0) -
-                                    this.offset
-                            );
-                        }
-                    });
-                }
+                fastdom.read(() => {
+                    const targetOffset = getOffset($(location.hash));
+                    const elOffset = getOffset(this.$el);
+
+                    if (this.isFixed && intersectRect(targetOffset, elOffset)) {
+                        scrollTop(
+                            window,
+                            targetOffset.top -
+                                elOffset.height -
+                                toPx(this.targetOffset, 'height') -
+                                toPx(this.offset, 'height')
+                        );
+                    }
+                });
             },
         },
     ],
@@ -177,35 +157,49 @@ export default {
 
                 const hide = this.isActive && types.has('resize');
                 if (hide) {
+                    css(this.selTarget, 'transition', '0s');
                     this.hide();
                 }
 
                 if (!this.isActive) {
-                    height = this.$el.offsetHeight;
+                    height = getOffset(this.$el).height;
                     margin = css(this.$el, 'margin');
                 }
 
                 if (hide) {
                     this.show();
+                    fastdom.write(() => css(this.selTarget, 'transition', ''));
                 }
 
-                const overflow = Math.max(0, height + this.offset - getHeight(window));
-
                 const referenceElement = this.isFixed ? this.placeholder : this.$el;
-                const topOffset = offset(referenceElement).top;
-                const offsetParentTop = offset(referenceElement.offsetParent).top;
+                const windowHeight = getHeight(window);
+
+                let position = this.position;
+                if (position === 'auto' && height > windowHeight) {
+                    position = 'bottom';
+                }
+
+                let offset = toPx(this.offset, 'height', referenceElement);
+                if (position === 'bottom') {
+                    offset += windowHeight - height;
+                }
+
+                const overflow = Math.max(0, height + offset - windowHeight);
+                const topOffset = getOffset(referenceElement).top;
+                const offsetParentTop = getOffset(referenceElement.offsetParent).top;
 
                 const top = parseProp(this.top, this.$el, topOffset);
                 const bottom = parseProp(this.bottom, this.$el, topOffset + height, true);
 
-                const start = Math.max(top, topOffset) - this.offset;
+                const start = Math.max(top, topOffset) - offset;
                 const end = bottom
-                    ? bottom - this.$el.offsetHeight + overflow - this.offset
-                    : getScrollingElement(this.$el).scrollHeight - getHeight(window);
+                    ? bottom - getOffset(this.$el).height + overflow - offset
+                    : getScrollingElement(this.$el).scrollHeight - windowHeight;
 
                 return {
                     start,
                     end,
+                    offset,
                     overflow,
                     topOffset,
                     offsetParentTop,
@@ -322,7 +316,7 @@ export default {
                     }
                 } else if (this.isFixed) {
                     this.update();
-                } else if (this.animation) {
+                } else if (this.animation && scroll > topOffset) {
                     Animation.cancel(this.$el);
                     this.show();
                     Animation.in(this.$el, this.animation).catch(noop);
@@ -350,33 +344,33 @@ export default {
         },
 
         update() {
-            const {
+            let {
                 width,
                 scroll = 0,
                 overflow,
                 overflowScroll = 0,
                 start,
                 end,
+                offset,
                 topOffset,
                 height,
                 offsetParentTop,
             } = this._data;
             const active = start !== 0 || scroll > start;
-            let top = this.offset;
             let position = 'fixed';
 
             if (scroll > end) {
-                top = end + this.offset - offsetParentTop;
+                offset += end - offsetParentTop;
                 position = 'absolute';
             }
 
             if (overflow) {
-                top -= overflowScroll;
+                offset -= overflowScroll;
             }
 
             css(this.$el, {
                 position,
-                top: `${top}px`,
+                top: `${offset}px`,
                 width,
             });
 
@@ -397,7 +391,7 @@ function parseProp(value, el, propOffset, padding) {
     } else {
         const refElement = value === true ? parent(el) : query(value, el);
         return (
-            offset(refElement).bottom -
+            getOffset(refElement).bottom -
             (padding && refElement && within(el, refElement)
                 ? toFloat(css(refElement, 'paddingBottom'))
                 : 0)

package/src/js/core/switcher.js

@@ -1,3 +1,5 @@
+import Lazyload from '../mixin/lazyload';
+import Swipe from '../mixin/swipe';
 import Togglable from '../mixin/togglable';
 import {
     $$,
@@ -17,7 +19,7 @@ import {
 } from 'uikit-util';
 
 export default {
-    mixins: [Togglable],
+    mixins: [Lazyload, Swipe, Togglable],
 
     args: 'connect',
 
@@ -26,7 +28,6 @@ export default {
         toggle: String,
         itemNav: String,
         active: Number,
-        swiping: Boolean,
     },
 
     data: {
@@ -34,7 +35,6 @@ export default {
         toggle: '> * > :first-child',
         itemNav: false,
         active: 0,
-        swiping: true,
         cls: 'uk-active',
         attrItem: 'uk-switcher-item',
     },
@@ -79,6 +79,14 @@ export default {
                 this.toggles.some((toggle) => within(toggle, child))
             );
         },
+
+        swipeTarget() {
+            return this.connects;
+        },
+    },
+
+    connected() {
+        this.lazyload(this.$el, this.connects);
     },
 
     events: [

package/src/js/core/toggle.js

@@ -1,3 +1,4 @@
+import Lazyload from '../mixin/lazyload';
 import Media from '../mixin/media';
 import Togglable from '../mixin/togglable';
 import {
@@ -22,7 +23,7 @@ import {
 const KEY_SPACE = 32;
 
 export default {
-    mixins: [Media, Togglable],
+    mixins: [Lazyload, Media, Togglable],
 
     args: 'target',
 
@@ -44,6 +45,7 @@ export default {
         if (!includes(this.mode, 'media') && !isFocusable(this.$el)) {
             attr(this.$el, 'tabindex', '0');
         }
+        this.lazyload(this.$el, this.target);
     },
 
     computed: {
@@ -135,7 +137,7 @@ export default {
             name: 'keydown',
 
             filter() {
-                return includes(this.mode, 'click') && isTag(this.$el, 'input');
+                return includes(this.mode, 'click') && !isTag(this.$el, 'input');
             },
 
             handler(e) {

package/src/js/core/video.js

@@ -1,4 +1,14 @@
-import { css, hasAttr, isInView, isVideo, isVisible, mute, pause, play } from 'uikit-util';
+import {
+    css,
+    hasAttr,
+    isInView,
+    isVideo,
+    isVisible,
+    mute,
+    observeIntersection,
+    pause,
+    play,
+} from 'uikit-util';
 
 export default {
     args: 'autoplay',
@@ -27,6 +37,8 @@ export default {
         if (this.automute) {
             mute(this.$el);
         }
+
+        this.registerObserver(observeIntersection(this.$el, () => this.$emit('resize')));
     },
 
     update: {

package/src/js/mixin/lazyload.js

@@ -0,0 +1,20 @@
+import { $$, isFunction, observeIntersection, removeAttr, toNodes } from 'uikit-util';
+
+export default {
+    methods: {
+        lazyload(observeTargets = this.$el, targets = this.$el) {
+            this.registerObserver(
+                observeIntersection(observeTargets, (entries, observer) => {
+                    for (const el of toNodes(isFunction(targets) ? targets() : targets)) {
+                        $$('[loading="lazy"]', el).forEach((el) => removeAttr(el, 'loading'));
+                    }
+                    for (const el of entries
+                        .filter(({ isIntersecting }) => isIntersecting)
+                        .map(({ target }) => target)) {
+                        observer.unobserve(el);
+                    }
+                })
+            );
+        },
+    },
+};