uikit 3.12.2 → 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.2",
+    "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/countdown.js

@@ -70,7 +70,7 @@ export default {
                     continue;
                 }
 
-                let digits = String(Math.floor(timespan[unit]));
+                let digits = String(Math.trunc(timespan[unit]));
 
                 digits = digits.length < 2 ? `0${digits}` : digits;
 

package/src/js/components/lightbox.js

@@ -56,7 +56,7 @@ export default {
         },
 
         hide() {
-            return this.panel && this.panel.hide();
+            return this.panel?.hide();
         },
     },
 };

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/components/slider.js

@@ -45,7 +45,7 @@ export default {
             return (
                 finite ||
                 Math.ceil(getWidth(this.list)) <
-                    Math.floor(dimensions(this.list).width + getMaxElWidth(this.list) + this.center)
+                    Math.trunc(dimensions(this.list).width + getMaxElWidth(this.list) + this.center)
             );
         },
 

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/form-custom.js

@@ -42,13 +42,12 @@ export default {
         let option;
         const prop = isInput(target) ? 'value' : 'textContent';
         const prev = target[prop];
-        const value =
-            input.files && input.files[0]
-                ? input.files[0].name
-                : matches(input, 'select') &&
-                  (option = $$('option', input).filter((el) => el.selected)[0]) // eslint-disable-line prefer-destructuring
-                ? option.textContent
-                : input.value;
+        const value = input.files?.[0]
+            ? input.files[0].name
+            : matches(input, 'select') &&
+              (option = $$('option', input).filter((el) => el.selected)[0]) // eslint-disable-line prefer-destructuring
+            ? option.textContent
+            : input.value;
 
         if (prev !== value) {
             target[prop] = value;

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/scroll.js

@@ -1,4 +1,4 @@
-import { $, escape, scrollIntoView, trigger } from 'uikit-util';
+import { $, scrollIntoView, trigger } from 'uikit-util';
 
 export default {
     props: {
@@ -27,7 +27,11 @@ export default {
             }
 
             e.preventDefault();
-            this.scrollTo(`#${escape(decodeURIComponent((this.$el.hash || '').substr(1)))}`);
+            this.scrollTo(getTargetElement(this.$el));
         },
     },
 };
+
+export function getTargetElement(el) {
+    return document.getElementById(decodeURIComponent(el.hash).substring(1));
+}

package/src/js/core/scrollspy-nav.js

@@ -1,17 +1,16 @@
 import {
     $$,
-    addClass,
     closest,
-    escape,
     getViewport,
     getViewportClientHeight,
     hasClass,
     isVisible,
     offset,
-    removeClass,
     scrollParents,
+    toggleClass,
     trigger,
 } from 'uikit-util';
+import { getTargetElement } from './scroll';
 
 export default {
     props: {
@@ -45,10 +44,6 @@ export default {
             immediate: true,
         },
 
-        targets() {
-            return $$(this.links.map((el) => escape(el.hash).substr(1)).join(','));
-        },
-
         elements({ closest: selector }) {
             return closest(this.links, selector || '*');
         },
@@ -57,13 +52,15 @@ export default {
     update: [
         {
             read() {
-                const { length } = this.targets;
+                const targets = this.links.map(getTargetElement).filter(Boolean);
+
+                const { length } = targets;
 
                 if (!length || !isVisible(this.$el)) {
                     return false;
                 }
 
-                const [scrollElement] = scrollParents(this.targets, /auto|scroll/, true);
+                const [scrollElement] = scrollParents(targets, /auto|scroll/, true);
                 const { scrollTop, scrollHeight } = scrollElement;
                 const max = scrollHeight - getViewportClientHeight(scrollElement);
                 let active = false;
@@ -71,15 +68,17 @@ export default {
                 if (scrollTop === max) {
                     active = length - 1;
                 } else {
-                    this.targets.every((el, i) => {
+                    for (const i in targets) {
                         if (
-                            offset(el).top - offset(getViewport(scrollElement)).top - this.offset <=
+                            offset(targets[i]).top -
+                                offset(getViewport(scrollElement)).top -
+                                this.offset >
                             0
                         ) {
-                            active = i;
-                            return true;
+                            break;
                         }
-                    });
+                        active = +i;
+                    }
 
                     if (active === false && this.overflow) {
                         active = 0;
@@ -93,8 +92,9 @@ export default {
                 const changed = active !== false && !hasClass(this.elements[active], this.cls);
 
                 this.links.forEach((el) => el.blur());
-                removeClass(this.elements, this.cls);
-                addClass(this.elements[active], this.cls);
+                for (const i in this.elements) {
+                    toggleClass(this.elements[i], this.cls, +i === active);
+                }
 
                 if (changed) {
                     trigger(this.$el, 'active', [active, this.elements[active]]);

package/src/js/core/scrollspy.js

@@ -54,23 +54,14 @@ export default {
 
     disconnected() {
         for (const el of this.elements) {
-            removeClass(el, this.inViewClass, el[stateKey] ? el[stateKey].cls : '');
+            removeClass(el, this.inViewClass, el[stateKey]?.cls || '');
             delete el[stateKey];
         }
     },
 
     update: [
         {
-            read(data) {
-                // Let child components be applied at least once first
-                if (!data.update) {
-                    Promise.resolve().then(() => {
-                        this.$emit();
-                        data.update = true;
-                    });
-                    return false;
-                }
-
+            read() {
                 for (const el of this.elements) {
                     if (!el[stateKey]) {
                         el[stateKey] = { cls: getData(el, 'uk-scrollspy-class') || this.cls };
@@ -110,7 +101,7 @@ export default {
         toggle(el, inview) {
             const state = el[stateKey];
 
-            state.off && state.off();
+            state.off?.();
 
             css(el, 'visibility', !inview && this.hidden ? 'hidden' : '');
 
@@ -118,9 +109,12 @@ export default {
             toggleClass(el, state.cls);
 
             if (/\buk-animation-/.test(state.cls)) {
-                state.off = once(el, 'animationcancel animationend', () =>
-                    removeClasses(el, 'uk-animation-[\\w-]+')
-                );
+                const removeAnimationClasses = () => removeClasses(el, 'uk-animation-[\\w-]+');
+                if (inview) {
+                    state.off = once(el, 'animationcancel animationend', removeAnimationClasses);
+                } else {
+                    removeAnimationClasses();
+                }
             }
 
             trigger(el, inview ? 'inview' : 'outview');