uikit 3.12.3-dev.0e7855b18 → 3.12.3-dev.3c9ee4dfd

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.0e7855b18",
+    "version": "3.12.3-dev.3c9ee4dfd",
     "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

@@ -4,7 +4,6 @@ import {
     data as getData,
     hasOwn,
     hyphenate,
-    includes,
     isArray,
     isFunction,
     isNumeric,
@@ -62,7 +61,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,22 +100,19 @@ export default function (UIkit) {
                 }
             }
         }
-        for (const { events = [] } of this.$options.update || []) {
-            if (includes(events, 'scroll')) {
-                registerScrollListener(this._uid, () => this.$emit('scroll'));
-                break;
-            }
-        }
     };
 
     UIkit.prototype._unbindEvents = function () {
         this._events.forEach((unbind) => unbind());
         delete this._events;
-        unregisterScrollListener(this._uid);
     };
 
     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 +166,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];
             }
         },
     });
@@ -312,24 +308,3 @@ function initPropsObserver(component) {
 
     return observer;
 }
-
-const scrollListeners = new Map();
-let unbindScrollListener;
-function registerScrollListener(id, listener) {
-    unbindScrollListener =
-        unbindScrollListener ||
-        on(window, 'scroll', () => scrollListeners.forEach((listener) => listener()), {
-            passive: true,
-            capture: true,
-        });
-
-    scrollListeners.set(id, listener);
-}
-
-function unregisterScrollListener(id) {
-    scrollListeners.delete(id);
-    if (unbindScrollListener && !scrollListeners.size) {
-        unbindScrollListener();
-        unbindScrollListener = null;
-    }
-}

package/src/js/components/countdown.js

@@ -17,7 +17,7 @@ export default {
     },
 
     connected() {
-        this.date = Date.parse(this.date);
+        this.date = Date.parse(this.$props.date);
         this.start();
     },
 

package/src/js/components/parallax.js

@@ -1,8 +1,10 @@
+import Resize from '../mixin/resize';
+import Scroll from '../mixin/scroll';
 import Parallax from '../mixin/parallax';
 import { css, parent, query, scrolledOver, toPx } from 'uikit-util';
 
 export default {
-    mixins: [Parallax],
+    mixins: [Parallax, Resize, Scroll],
 
     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/grid.js

@@ -1,5 +1,6 @@
 import Margin from './margin';
 import Class from '../mixin/class';
+import Scroll from '../mixin/scroll';
 import {
     addClass,
     children,
@@ -14,7 +15,7 @@ import {
 export default {
     extends: Margin,
 
-    mixins: [Class],
+    mixins: [Class, Scroll],
 
     name: 'grid',
 

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

@@ -1,4 +1,5 @@
 import Class from '../mixin/class';
+import Resize from '../mixin/resize';
 import {
     boxModelAdjust,
     css,
@@ -11,11 +12,10 @@ import {
     offset,
     query,
     toFloat,
-    trigger,
 } from 'uikit-util';
 
 export default {
-    mixins: [Class],
+    mixins: [Class, Resize],
 
     props: {
         expand: Boolean,
@@ -31,6 +31,13 @@ export default {
         minHeight: 0,
     },
 
+    computed: {
+        resizeTargets() {
+            // check for offsetTop change
+            return [this.$el, document.documentElement];
+        },
+    },
+
     update: {
         read({ minHeight: prev }) {
             if (!isVisible(this.$el)) {
@@ -71,13 +78,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/scrollspy-nav.js

@@ -1,3 +1,4 @@
+import Scroll from '../mixin/scroll';
 import {
     $$,
     closest,
@@ -13,6 +14,8 @@ import {
 import { getTargetElement } from './scroll';
 
 export default {
+    mixins: [Scroll],
+
     props: {
         cls: String,
         closest: String,

package/src/js/core/scrollspy.js

@@ -1,3 +1,4 @@
+import Scroll from '../mixin/scroll';
 import {
     $$,
     css,
@@ -13,6 +14,8 @@ import {
 
 const stateKey = '_ukScrollspy';
 export default {
+    mixins: [Scroll],
+
     args: 'cls',
 
     props: {

package/src/js/core/sticky.js

@@ -1,5 +1,7 @@
 import Class from '../mixin/class';
 import Media from '../mixin/media';
+import Resize from '../mixin/resize';
+import Scroll from '../mixin/scroll';
 import {
     $,
     addClass,
@@ -32,7 +34,7 @@ import {
 } from 'uikit-util';
 
 export default {
-    mixins: [Class, Media],
+    mixins: [Class, Media, Resize, Scroll],
 
     props: {
         position: String,
@@ -75,6 +77,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/toggle.js

@@ -189,22 +189,25 @@ export default {
                 }
             },
         },
-    ],
 
-    update: {
-        read() {
-            return includes(this.mode, 'media') && this.media ? { match: this.matchMedia } : false;
-        },
+        {
+            name: 'mediachange',
 
-        write({ match }) {
-            const toggled = this.isToggled(this.target);
-            if (match ? !toggled : toggled) {
-                this.toggle();
-            }
-        },
+            filter() {
+                return includes(this.mode, 'media');
+            },
 
-        events: ['resize'],
-    },
+            el() {
+                return this.target;
+            },
+
+            handler(e, mediaObj) {
+                if (mediaObj.matches ^ this.isToggled(this.target)) {
+                    this.toggle();
+                }
+            },
+        },
+    ],
 
     methods: {
         async toggle(type) {

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'],
     },
 };