uikit 3.12.3-dev.ebebb4f57 → 3.13.0

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.ebebb4f57",
+    "version": "3.13.0",
     "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();
     },
 
@@ -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,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/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/accordion.js

@@ -5,6 +5,7 @@ import {
     $,
     $$,
     attr,
+    fastdom,
     filter,
     getIndex,
     hasClass,
@@ -135,9 +136,11 @@ export default {
 
                     if (show) {
                         const toggle = $(this.$props.toggle, el);
-                        if (!isInView(toggle)) {
-                            scrollIntoView(toggle, { offset: this.offset });
-                        }
+                        fastdom.read(() => {
+                            if (!isInView(toggle)) {
+                                scrollIntoView(toggle, { offset: this.offset });
+                            }
+                        });
                     }
                 });
             }

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

@@ -58,25 +58,12 @@ export default {
         container: false,
     },
 
-    computed: {
-        boundary({ boundary }, $el) {
-            return boundary === true ? window : query(boundary, $el);
-        },
-
-        clsDrop({ clsDrop }) {
-            return clsDrop || `uk-${this.$options.name}`;
-        },
-
-        clsPos() {
-            return this.clsDrop;
-        },
-    },
-
     created() {
         this.tracker = new MouseTracker();
     },
 
     connected() {
+        this.clsPos = this.clsDrop = this.$props.clsDrop || `uk-${this.$options.name}`;
         addClass(this.$el, this.clsDrop);
 
         if (this.toggle && !this.target) {
@@ -224,9 +211,7 @@ export default {
 
                 this.tracker.init();
 
-                once(
-                    this.$el,
-                    'hide',
+                for (const handler of [
                     on(
                         document,
                         pointerDown,
@@ -248,19 +233,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 });
+                }
             },
         },
 
@@ -370,28 +352,28 @@ export default {
         },
 
         position() {
+            const boundary = this.boundary === true ? window : query(this.boundary, this.$el);
             removeClass(this.$el, `${this.clsDrop}-stack`);
             toggleClass(this.$el, `${this.clsDrop}-boundary`, this.boundaryAlign);
 
-            const boundary = offset(this.boundary);
-            const alignTo = this.boundaryAlign ? boundary : offset(this.target);
+            const boundaryOffset = offset(boundary);
+            const alignTo = this.boundaryAlign ? boundaryOffset : offset(this.target);
 
             if (this.align === 'justify') {
                 const prop = this.getAxis() === 'y' ? 'width' : 'height';
                 css(this.$el, prop, alignTo[prop]);
             } else if (
-                this.boundary &&
+                boundary &&
                 this.$el.offsetWidth >
-                    Math.max(boundary.right - alignTo.left, alignTo.right - boundary.left)
+                    Math.max(
+                        boundaryOffset.right - alignTo.left,
+                        alignTo.right - boundaryOffset.left
+                    )
             ) {
                 addClass(this.$el, `${this.clsDrop}-stack`);
             }
 
-            this.positionAt(
-                this.$el,
-                this.boundaryAlign ? this.boundary : this.target,
-                this.boundary
-            );
+            this.positionAt(this.$el, this.boundaryAlign ? boundary : this.target, boundary);
         },
     },
 };

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

@@ -1,5 +1,5 @@
 import Class from '../mixin/class';
-import { $, $$, closest, isInput, matches, parent, query, selInput } from 'uikit-util';
+import { $, $$, closest, isInput, matches, parent, selInput } from 'uikit-util';
 
 export default {
     mixins: [Class],
@@ -27,7 +27,7 @@ export default {
             return (
                 target &&
                 ((target === true && parent(this.input) === $el && this.input.nextElementSibling) ||
-                    query(target, $el))
+                    $(target, $el))
             );
         },
     },
@@ -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/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

@@ -16,11 +16,21 @@ export default {
     },
 
     computed: {
-        elements({ target }, $el) {
-            return $$(target, $el);
+        elements: {
+            get({ target }, $el) {
+                return $$(target, $el);
+            },
+
+            watch() {
+                this.$reset();
+            },
         },
     },
 
+    resizeTargets() {
+        return this.elements;
+    },
+
     update: {
         read() {
             return {

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,11 @@ export default {
         minHeight: 0,
     },
 
+    resizeTargets() {
+        // check for offsetTop change
+        return [this.$el, document.documentElement];
+    },
+
     update: {
         read({ minHeight: prev }) {
             if (!isVisible(this.$el)) {
@@ -71,13 +76,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/icon.js

@@ -101,36 +101,29 @@ export const Slidenav = {
 
     beforeConnect() {
         addClass(this.$el, 'uk-slidenav');
-    },
-
-    computed: {
-        icon({ icon }, $el) {
-            return hasClass($el, 'uk-slidenav-large') ? `${icon}-large` : icon;
-        },
+        const icon = this.$props.icon;
+        this.icon = hasClass(this.$el, 'uk-slidenav-large') ? `${icon}-large` : icon;
     },
 };
 
 export const Search = {
     extends: IconComponent,
 
-    computed: {
-        icon({ icon }, $el) {
-            return hasClass($el, 'uk-search-icon') && parents($el, '.uk-search-large').length
+    beforeConnect() {
+        this.icon =
+            hasClass(this.$el, 'uk-search-icon') && parents(this.$el, '.uk-search-large').length
                 ? 'search-large'
-                : parents($el, '.uk-search-navbar').length
+                : parents(this.$el, '.uk-search-navbar').length
                 ? 'search-navbar'
-                : icon;
-        },
+                : this.$props.icon;
     },
 };
 
 export const Close = {
     extends: IconComponent,
 
-    computed: {
-        icon() {
-            return `close-${hasClass(this.$el, 'uk-close-large') ? 'large' : 'icon'}`;
-        },
+    beforeConnect() {
+        this.icon = `close-${hasClass(this.$el, 'uk-close-large') ? 'large' : 'icon'}`;
     },
 };
 

package/src/js/core/img.js

@@ -8,7 +8,6 @@ import {
     escape,
     fragment,
     hasAttr,
-    hasIntersectionObserver,
     includes,
     isArray,
     isEmpty,
@@ -47,29 +46,19 @@ export default {
         loading: 'lazy',
     },
 
-    computed: {
-        target: {
-            get({ target }) {
-                return [this.$el, ...queryAll(target, this.$el)];
-            },
-
-            watch() {
-                this.$reset();
-            },
-        },
-    },
-
     connected() {
-        if (this.loading !== 'lazy' || !hasIntersectionObserver) {
+        if (this.loading !== 'lazy') {
             this.load();
             return;
         }
 
+        const target = [this.$el, ...queryAll(this.$props.target, this.$el)];
+
         if (nativeLazyLoad && isImg(this.$el)) {
             this.$el.loading = 'lazy';
             setSrcAttrs(this.$el);
 
-            if (this.target.length === 1) {
+            if (target.length === 1) {
                 return;
             }
         }
@@ -78,7 +67,7 @@ export default {
 
         this.registerObserver(
             observeIntersection(
-                this.target,
+                target,
                 (entries, observer) => {
                     this.load();
                     observer.disconnect();

package/src/js/core/index.js

@@ -3,7 +3,6 @@ export { default as Alert } from './alert';
 export { default as Cover } from './cover';
 export { default as Drop, default as Dropdown } from './drop';
 export { default as FormCustom } from './form-custom';
-export { default as Gif } from './gif';
 export { default as Grid } from './grid';
 export { default as HeightMatch } from './height-match';
 export { default as HeightViewport } from './height-viewport';

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,6 +1,9 @@
-import { isRtl, isVisible, offsetPosition, toggleClass } from 'uikit-util';
+import Resize from '../mixin/resize';
+import { isRtl, isVisible, observeMutation, offsetPosition, toggleClass } from 'uikit-util';
 
 export default {
+    mixins: [Resize],
+
     props: {
         margin: String,
         firstColumn: Boolean,
@@ -11,6 +14,18 @@ export default {
         firstColumn: 'uk-first-column',
     },
 
+    resizeTargets() {
+        return this.$el.children;
+    },
+
+    connected() {
+        this.registerObserver(
+            observeMutation(this.$el, () => this.$reset(), {
+                childList: true,
+            })
+        );
+    },
+
     update: {
         read() {
             const rows = getRows(this.$el.children);