uikit 3.12.3-dev.6377276f3 → 3.12.3-dev.8ce29ae1a

package/package.json

@@ -2,7 +2,7 @@
     "name": "uikit",
     "title": "UIkit",
     "description": "UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.",
-    "version": "3.12.3-dev.6377276f3",
+    "version": "3.12.3-dev.8ce29ae1a",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/js/api/hooks.js

@@ -11,7 +11,7 @@ export default function (UIkit) {
         }
 
         this._data = {};
-        this._computeds = {};
+        this._computed = {};
 
         this._initProps();
 
@@ -105,8 +105,8 @@ export default function (UIkit) {
         const {
             $options: { computed },
         } = this;
-        const values = { ...this._computeds };
-        this._computeds = {};
+        const values = { ...this._computed };
+        this._computed = {};
 
         for (const key in computed) {
             const { watch, immediate } = computed[key];

package/src/js/api/state.js

@@ -62,7 +62,7 @@ export default function (UIkit) {
     UIkit.prototype._initComputeds = function () {
         const { computed } = this.$options;
 
-        this._computeds = {};
+        this._computed = {};
 
         if (computed) {
             for (const key in computed) {
@@ -101,11 +101,9 @@ export default function (UIkit) {
                 }
             }
         }
-        for (const { events = [] } of this.$options.update || []) {
-            if (includes(events, 'scroll')) {
-                registerScrollListener(this._uid, () => this.$emit('scroll'));
-                break;
-            }
+
+        if (hasUpdateOfType(this.$options.update, 'scroll')) {
+            registerScrollListener(this._uid, () => this.$emit('scroll'));
         }
     };
 
@@ -116,7 +114,11 @@ export default function (UIkit) {
     };
 
     UIkit.prototype._initObservers = function () {
-        this._observers = [initChildListObserver(this), initPropsObserver(this)];
+        this._observers = [initPropsObserver(this)];
+
+        if (this.$options.computed) {
+            this.registerObserver(initChildListObserver(this));
+        }
     };
 
     UIkit.prototype.registerObserver = function (observer) {
@@ -170,22 +172,22 @@ function registerComputed(component, key, cb) {
         enumerable: true,
 
         get() {
-            const { _computeds, $props, $el } = component;
+            const { _computed, $props, $el } = component;
 
-            if (!hasOwn(_computeds, key)) {
-                _computeds[key] = (cb.get || cb).call(component, $props, $el);
+            if (!hasOwn(_computed, key)) {
+                _computed[key] = (cb.get || cb).call(component, $props, $el);
             }
 
-            return _computeds[key];
+            return _computed[key];
         },
 
         set(value) {
-            const { _computeds } = component;
+            const { _computed } = component;
 
-            _computeds[key] = cb.set ? cb.set.call(component, value) : value;
+            _computed[key] = cb.set ? cb.set.call(component, value) : value;
 
-            if (isUndefined(_computeds[key])) {
-                delete _computeds[key];
+            if (isUndefined(_computed[key])) {
+                delete _computed[key];
             }
         },
     });
@@ -313,6 +315,14 @@ function initPropsObserver(component) {
     return observer;
 }
 
+function hasUpdateOfType(updates = [], type) {
+    for (const { events = [] } of updates) {
+        if (includes(events, type)) {
+            return true;
+        }
+    }
+}
+
 const scrollListeners = new Map();
 let unbindScrollListener;
 function registerScrollListener(id, listener) {

package/src/js/components/parallax.js

@@ -1,8 +1,9 @@
+import Resize from '../mixin/resize';
 import Parallax from '../mixin/parallax';
 import { css, parent, query, scrolledOver, toPx } from 'uikit-util';
 
 export default {
-    mixins: [Parallax],
+    mixins: [Parallax, Resize],
 
     props: {
         target: String,

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

@@ -8,10 +8,12 @@ export default {
         selItem: '!li',
     },
 
-    computed: {
-        item({ selItem }, $el) {
-            return query(selItem, $el);
-        },
+    connected() {
+        this.item = query(this.selItem, this.$el);
+    },
+
+    disconnected() {
+        this.item = null;
     },
 
     events: [

package/src/js/core/core.js

@@ -1,25 +1,10 @@
-import { css, fastdom, inBrowser, observeResize, on, toMs } from 'uikit-util';
+import { css, inBrowser, on, toMs } from 'uikit-util';
 
-export default function (UIkit) {
+export default function () {
     if (!inBrowser) {
         return;
     }
 
-    // throttle 'resize'
-    let pendingResize;
-    const handleResize = () => {
-        if (pendingResize) {
-            return;
-        }
-        pendingResize = true;
-        fastdom.read(() => (pendingResize = false));
-        UIkit.update(null, 'resize');
-    };
-
-    on(window, 'load resize', handleResize);
-    on(document, 'loadedmetadata load', handleResize, true);
-    observeResize(document.documentElement, handleResize);
-
     let started = 0;
     on(
         document,

package/src/js/core/cover.js

@@ -1,8 +1,9 @@
 import Video from './video';
-import { css, Dimensions, observeResize, parent } from 'uikit-util';
+import { css, Dimensions, parent } from 'uikit-util';
+import Resize from '../mixin/resize';
 
 export default {
-    mixins: [Video],
+    mixins: [Resize, Video],
 
     props: {
         width: Number,
@@ -13,10 +14,6 @@ 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

@@ -224,9 +224,7 @@ export default {
 
                 this.tracker.init();
 
-                once(
-                    this.$el,
-                    'hide',
+                for (const handler of [
                     on(
                         document,
                         pointerDown,
@@ -248,19 +246,16 @@ export default {
                                 true
                             )
                     ),
-                    { self: true }
-                );
 
-                once(
-                    this.$el,
-                    'hide',
                     on(document, 'keydown', (e) => {
                         if (e.keyCode === 27) {
                             this.hide(false);
                         }
                     }),
-                    { self: true }
-                );
+                    on(window, 'resize', () => this.$emit('resize')),
+                ]) {
+                    once(this.$el, 'hide', handler, { self: true });
+                }
             },
         },
 

package/src/js/core/gif.js

@@ -1,7 +1,11 @@
-import { isInView } from 'uikit-util';
+import { isInView, observeIntersection } from 'uikit-util';
 
 // Deprecated
 export default {
+    connected() {
+        this.registerObserver(observeIntersection(this.$el, () => this.$emit()));
+    },
+
     update: {
         read(data) {
             const inview = isInView(this.$el);
@@ -16,7 +20,5 @@ export default {
         write() {
             this.$el.src = '' + this.$el.src; // force self-assign
         },
-
-        events: ['scroll', 'resize'],
     },
 };

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

@@ -1,5 +1,13 @@
 import { getRows } from './margin';
-import { $$, boxModelAdjust, css, dimensions, isVisible, toFloat } from 'uikit-util';
+import {
+    $$,
+    boxModelAdjust,
+    css,
+    dimensions,
+    isVisible,
+    observeMutation,
+    toFloat,
+} from 'uikit-util';
 
 export default {
     args: 'target',
@@ -19,6 +27,18 @@ export default {
         elements({ target }, $el) {
             return $$(target, $el);
         },
+
+        resizeTargets() {
+            this.$el.children;
+        },
+    },
+
+    connected() {
+        this.registerObserver(
+            observeMutation(this.$el, () => this.$reset(), {
+                childList: true,
+            })
+        );
     },
 
     update: {

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

@@ -11,7 +11,6 @@ import {
     offset,
     query,
     toFloat,
-    trigger,
 } from 'uikit-util';
 
 export default {
@@ -71,13 +70,9 @@ export default {
             return { minHeight, prev };
         },
 
-        write({ minHeight, prev }) {
+        write({ minHeight }) {
             css(this.$el, { minHeight });
 
-            if (minHeight !== prev) {
-                trigger(this.$el, 'resize');
-            }
-
             if (this.minHeight && toFloat(css(this.$el, 'minHeight')) < this.minHeight) {
                 css(this.$el, 'minHeight', this.minHeight);
             }

package/src/js/core/img.js

@@ -8,7 +8,6 @@ import {
     escape,
     fragment,
     hasAttr,
-    hasIntersectionObserver,
     includes,
     isArray,
     isEmpty,
@@ -60,7 +59,7 @@ export default {
     },
 
     connected() {
-        if (this.loading !== 'lazy' || !hasIntersectionObserver) {
+        if (this.loading !== 'lazy') {
             this.load();
             return;
         }

package/src/js/core/leader.js

@@ -1,9 +1,10 @@
 import Class from '../mixin/class';
 import Media from '../mixin/media';
 import { attr, getCssVar, toggleClass, unwrap, wrapInner } from 'uikit-util';
+import Resize from '../mixin/resize';
 
 export default {
-    mixins: [Class, Media],
+    mixins: [Class, Media, Resize],
 
     props: {
         fill: String,
@@ -31,26 +32,19 @@ export default {
     },
 
     update: {
-        read({ changed, width }) {
-            const prev = width;
-
-            width = Math.floor(this.$el.offsetWidth / 2);
+        read() {
+            const width = Math.trunc(this.$el.offsetWidth / 2);
 
             return {
                 width,
                 fill: this.fill,
-                changed: changed || prev !== width,
                 hide: !this.matchMedia,
             };
         },
 
-        write(data) {
-            toggleClass(this.wrapper, this.clsHide, data.hide);
-
-            if (data.changed) {
-                data.changed = false;
-                attr(this.wrapper, this.attrFill, new Array(data.width).join(data.fill));
-            }
+        write({ width, fill, hide }) {
+            toggleClass(this.wrapper, this.clsHide, hide);
+            attr(this.wrapper, this.attrFill, new Array(width).join(fill));
         },
 
         events: ['resize'],

package/src/js/core/margin.js

@@ -1,4 +1,11 @@
-import { isRtl, isVisible, offsetPosition, toggleClass } from 'uikit-util';
+import {
+    isRtl,
+    isVisible,
+    observeMutation,
+    observeResize,
+    offsetPosition,
+    toggleClass,
+} from 'uikit-util';
 
 export default {
     props: {
@@ -11,6 +18,16 @@ export default {
         firstColumn: 'uk-first-column',
     },
 
+    connected() {
+        this.registerObserver(
+            observeMutation(this.$el, () => this.$reset(), {
+                childList: true,
+            })
+        );
+
+        this.registerObserver(observeResize(this.$el.children, () => this.$emit('resize')));
+    },
+
     update: {
         read() {
             const rows = getRows(this.$el.children);

package/src/js/core/overflow-auto.js

@@ -1,8 +1,9 @@
 import Class from '../mixin/class';
-import { closest, css, dimensions, height, isVisible, toFloat, trigger } from 'uikit-util';
+import Resize from '../mixin/resize';
+import { closest, css, dimensions, height, isVisible } from 'uikit-util';
 
 export default {
-    mixins: [Class],
+    mixins: [Class, Resize],
 
     props: {
         selContainer: String,
@@ -24,6 +25,10 @@ export default {
         content({ selContent }, $el) {
             return closest($el, selContent);
         },
+
+        resizeTargets() {
+            return [this.container, this.content];
+        },
     },
 
     connected() {
@@ -37,7 +42,6 @@ export default {
             }
 
             return {
-                current: toFloat(css(this.$el, 'maxHeight')),
                 max: Math.max(
                     this.minHeight,
                     height(this.container) - (dimensions(this.content).height - height(this.$el))
@@ -45,11 +49,8 @@ export default {
             };
         },
 
-        write({ current, max }) {
+        write({ max }) {
             css(this.$el, 'maxHeight', max);
-            if (Math.round(current) !== Math.round(max)) {
-                trigger(this.$el, 'resize');
-            }
         },
 
         events: ['resize'],

package/src/js/core/sticky.js

@@ -1,5 +1,6 @@
 import Class from '../mixin/class';
 import Media from '../mixin/media';
+import Resize from '../mixin/resize';
 import {
     $,
     addClass,
@@ -32,7 +33,7 @@ import {
 } from 'uikit-util';
 
 export default {
-    mixins: [Class, Media],
+    mixins: [Class, Media, Resize],
 
     props: {
         position: String,
@@ -75,6 +76,10 @@ export default {
             return query(widthElement, $el) || this.placeholder;
         },
 
+        resizeTargets() {
+            return document.documentElement;
+        },
+
         isActive: {
             get() {
                 return hasClass(this.selTarget, this.clsActive);

package/src/js/core/svg.js

@@ -6,10 +6,10 @@ import {
     attr,
     includes,
     isTag,
-    isVisible,
     isVoidElement,
     memoize,
     noop,
+    observeIntersection,
     once,
     remove,
     removeAttr,
@@ -59,10 +59,24 @@ export default {
                 }
 
                 this.applyAttributes(svg, el);
-                this.$emit();
+
                 return (this.svgEl = svg);
             }
         }, noop);
+
+        if (this.strokeAnimation) {
+            this.svg.then((el) => {
+                if (this._connected) {
+                    applyAnimation(el);
+                    this.registerObserver(
+                        observeIntersection(el, (records, observer) => {
+                            applyAnimation(el);
+                            observer.disconnect();
+                        })
+                    );
+                }
+            });
+        }
     },
 
     disconnected() {
@@ -82,18 +96,6 @@ export default {
         this.svg = null;
     },
 
-    update: {
-        read() {
-            return !!(this.strokeAnimation && this.svgEl && isVisible(this.svgEl));
-        },
-
-        write() {
-            applyAnimation(this.svgEl);
-        },
-
-        type: ['resize'],
-    },
-
     methods: {
         async getSvg() {
             if (isTag(this.$el, 'img') && !this.$el.complete && this.$el.loading === 'lazy') {

package/src/js/core/video.js

@@ -23,13 +23,9 @@ export default {
         autoplay: true,
     },
 
-    computed: {
-        inView({ autoplay }) {
-            return autoplay === 'inview';
-        },
-    },
-
     connected() {
+        this.inView = this.autoplay === 'inview';
+
         if (this.inView && !hasAttr(this.$el, 'preload')) {
             this.$el.preload = 'none';
         }
@@ -60,7 +56,5 @@ export default {
                 play(this.$el);
             }
         },
-
-        events: ['resize', 'scroll'],
     },
 };

package/src/js/mixin/position.js

@@ -24,18 +24,10 @@ export default {
         clsPos: '',
     },
 
-    computed: {
-        pos({ pos }) {
-            return pos.split('-').concat('center').slice(0, 2);
-        },
-
-        dir() {
-            return this.pos[0];
-        },
-
-        align() {
-            return this.pos[1];
-        },
+    connected() {
+        this.pos = this.pos.split('-').concat('center').slice(0, 2);
+        this.dir = this.pos[0];
+        this.align = this.pos[1];
     },
 
     methods: {
@@ -44,6 +36,8 @@ export default {
 
             let { offset } = this;
             const axis = this.getAxis();
+            const dir = this.pos[0];
+            const align = this.pos[1];
 
             if (!isNumeric(offset)) {
                 const node = $(offset);
@@ -56,13 +50,11 @@ export default {
             const { x, y } = positionAt(
                 element,
                 target,
+                axis === 'x' ? `${flipPosition(dir)} ${align}` : `${align} ${flipPosition(dir)}`,
+                axis === 'x' ? `${dir} ${align}` : `${align} ${dir}`,
                 axis === 'x'
-                    ? `${flipPosition(this.dir)} ${this.align}`
-                    : `${this.align} ${flipPosition(this.dir)}`,
-                axis === 'x' ? `${this.dir} ${this.align}` : `${this.align} ${this.dir}`,
-                axis === 'x'
-                    ? `${this.dir === 'left' ? -offset : offset}`
-                    : ` ${this.dir === 'top' ? -offset : offset}`,
+                    ? `${dir === 'left' ? -offset : offset}`
+                    : ` ${dir === 'top' ? -offset : offset}`,
                 null,
                 this.flip,
                 boundary

package/src/js/mixin/resize.js

@@ -0,0 +1,13 @@
+import { observeResize } from 'uikit-util';
+
+export default {
+    computed: {
+        resizeTargets() {
+            return this.$el;
+        },
+    },
+
+    connected() {
+        this.registerObserver(observeResize(this.resizeTargets, () => this.$emit('resize')));
+    },
+};

package/src/js/mixin/slider.js

@@ -1,3 +1,4 @@
+import Resize from './resize';
 import SliderAutoplay from './slider-autoplay';
 import SliderDrag from './slider-drag';
 import SliderNav from './slider-nav';
@@ -15,7 +16,7 @@ import {
 } from 'uikit-util';
 
 export default {
-    mixins: [SliderAutoplay, SliderDrag, SliderNav],
+    mixins: [SliderAutoplay, SliderDrag, SliderNav, Resize],
 
     props: {
         clsActivated: Boolean,

package/src/js/util/class.js

@@ -20,12 +20,7 @@ export function replaceClass(element, ...args) {
 
 export function hasClass(element, cls) {
     [cls] = getClasses(cls);
-    for (const node of toNodes(element)) {
-        if (cls && node.classList.contains(cls)) {
-            return true;
-        }
-    }
-    return false;
+    return !!cls && toNodes(element).some((node) => node.classList.contains(cls));
 }
 
 export function toggleClass(element, cls, force) {