uikit 3.12.3-dev.ebebb4f57 → 3.13.0

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,
@@ -26,8 +27,8 @@ export default {
         },
     },
 
-    connected() {
-        css(this.$el, 'minHeight', this.minHeight);
+    resizeTargets() {
+        return [this.container, this.content];
     },
 
     update: {
@@ -37,7 +38,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 +45,8 @@ export default {
             };
         },
 
-        write({ current, max }) {
-            css(this.$el, 'maxHeight', max);
-            if (Math.round(current) !== Math.round(max)) {
-                trigger(this.$el, 'resize');
-            }
+        write({ max }) {
+            css(this.$el, { minHeight: this.minHeight, maxHeight: max });
         },
 
         events: ['resize'],

package/src/js/core/responsive.js

@@ -1,8 +1,15 @@
+import Resize from '../mixin/resize';
 import { addClass, Dimensions, height, isVisible, parent, width } from 'uikit-util';
 
 export default {
+    mixin: [Resize],
+
     props: ['width', 'height'],
 
+    resizeTargets() {
+        return [this.$el, parent(this.$el)];
+    },
+
     connected() {
         addClass(this.$el, 'uk-responsive-width');
     },

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,19 +1,21 @@
+import Scroll from '../mixin/scroll';
 import {
     $$,
-    addClass,
     closest,
-    escape,
     getViewport,
     getViewportClientHeight,
     hasClass,
     isVisible,
     offset,
-    removeClass,
     scrollParents,
+    toggleClass,
     trigger,
 } from 'uikit-util';
+import { getTargetElement } from './scroll';
 
 export default {
+    mixins: [Scroll],
+
     props: {
         cls: String,
         closest: String,
@@ -45,10 +47,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 +55,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 +71,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 +95,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

@@ -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: {
@@ -54,23 +57,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 };

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,
@@ -12,7 +14,6 @@ import {
     height as getHeight,
     offset as getOffset,
     getScrollingElement,
-    hasClass,
     isString,
     isVisible,
     noop,
@@ -32,7 +33,7 @@ import {
 } from 'uikit-util';
 
 export default {
-    mixins: [Class, Media],
+    mixins: [Class, Media, Resize, Scroll],
 
     props: {
         position: String,
@@ -45,7 +46,6 @@ export default {
         clsFixed: String,
         clsBelow: String,
         selTarget: String,
-        widthElement: Boolean,
         showOnUp: Boolean,
         targetOffset: Number,
     },
@@ -61,7 +61,6 @@ export default {
         clsFixed: 'uk-sticky-fixed',
         clsBelow: 'uk-sticky-below',
         selTarget: '',
-        widthElement: false,
         showOnUp: false,
         targetOffset: false,
     },
@@ -70,26 +69,10 @@ export default {
         selTarget({ selTarget }, $el) {
             return (selTarget && $(selTarget, $el)) || $el;
         },
+    },
 
-        widthElement({ widthElement }, $el) {
-            return query(widthElement, $el) || this.placeholder;
-        },
-
-        isActive: {
-            get() {
-                return hasClass(this.selTarget, this.clsActive);
-            },
-
-            set(value) {
-                if (value && !this.isActive) {
-                    replaceClass(this.selTarget, this.clsInactive, this.clsActive);
-                    trigger(this.$el, 'active');
-                } else if (!value && !hasClass(this.selTarget, this.clsInactive)) {
-                    replaceClass(this.selTarget, this.clsActive, this.clsInactive);
-                    trigger(this.$el, 'inactive');
-                }
-            },
-        },
+    resizeTargets() {
+        return document.documentElement;
     },
 
     connected() {
@@ -97,7 +80,7 @@ export default {
             $('+ .uk-sticky-placeholder', this.$el) ||
             $('<div class="uk-sticky-placeholder"></div>');
         this.isFixed = false;
-        this.isActive = false;
+        this.setActive(false);
     },
 
     disconnected() {
@@ -108,7 +91,6 @@ export default {
 
         remove(this.placeholder);
         this.placeholder = null;
-        this.widthElement = null;
     },
 
     events: [
@@ -203,8 +185,7 @@ export default {
                     topOffset,
                     height,
                     margin,
-                    width: dimensions(isVisible(this.widthElement) ? this.widthElement : this.$el)
-                        .width,
+                    width: dimensions(referenceElement).width,
                     top: offsetPosition(referenceElement)[0],
                 };
             },
@@ -218,8 +199,6 @@ export default {
                     after(this.$el, placeholder);
                     placeholder.hidden = true;
                 }
-
-                this.isActive = !!this.isActive; // force self-assign
             },
 
             events: ['resize'],
@@ -336,7 +315,7 @@ export default {
         },
 
         hide() {
-            this.isActive = false;
+            this.setActive(false);
             removeClass(this.$el, this.clsFixed, this.clsBelow);
             css(this.$el, { position: '', top: '', width: '' });
             this.placeholder.hidden = true;
@@ -373,10 +352,22 @@ export default {
                 width,
             });
 
-            this.isActive = active;
+            this.setActive(active);
             toggleClass(this.$el, this.clsBelow, scroll > topOffset + height);
             addClass(this.$el, this.clsFixed);
         },
+
+        setActive(active) {
+            const prev = this.active;
+            this.active = active;
+            if (active) {
+                replaceClass(this.selTarget, this.clsInactive, this.clsActive);
+                prev !== active && trigger(this.$el, 'active');
+            } else {
+                replaceClass(this.selTarget, this.clsActive, this.clsInactive);
+                prev !== active && trigger(this.$el, 'inactive');
+            }
+        },
     },
 };
 

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

@@ -13,6 +13,7 @@ import {
     hasClass,
     matches,
     queryAll,
+    ready,
     toggleClass,
     toNodes,
     within,
@@ -87,6 +88,9 @@ export default {
 
     connected() {
         this.lazyload(this.$el, this.connects);
+
+        // check for connects
+        ready(() => this.$emit());
     },
 
     events: [

package/src/js/core/toggle.js

@@ -16,6 +16,7 @@ import {
     pointerEnter,
     pointerLeave,
     queryAll,
+    ready,
     trigger,
     within,
 } from 'uikit-util';
@@ -41,13 +42,6 @@ export default {
         queued: true,
     },
 
-    connected() {
-        if (!includes(this.mode, 'media') && !isFocusable(this.$el)) {
-            attr(this.$el, 'tabindex', '0');
-        }
-        this.lazyload(this.$el, this.target);
-    },
-
     computed: {
         target: {
             get({ href, target }, $el) {
@@ -63,6 +57,17 @@ export default {
         },
     },
 
+    connected() {
+        if (!includes(this.mode, 'media') && !isFocusable(this.$el)) {
+            attr(this.$el, 'tabindex', '0');
+        }
+
+        this.lazyload(this.$el, this.target);
+
+        // check for target
+        ready(() => this.$emit());
+    },
+
     events: [
         {
             name: pointerDown,
@@ -189,22 +194,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'],
     },
 };

package/src/js/mixin/media.js

@@ -1,4 +1,13 @@
-import { getCssVar, isString, toFloat } from 'uikit-util';
+import {
+    getCssVar,
+    isString,
+    on,
+    trigger,
+    toFloat,
+    startsWith,
+    isNumeric,
+    createEvent,
+} from 'uikit-util';
 
 export default {
     props: {
@@ -9,17 +18,28 @@ export default {
         media: false,
     },
 
-    computed: {
-        matchMedia() {
-            const media = toMedia(this.media);
-            return !media || window.matchMedia(media).matches;
-        },
+    connected() {
+        const media = toMedia(this.media);
+        this.mediaObj = window.matchMedia(media);
+        const handler = () => {
+            this.matchMedia = this.mediaObj.matches;
+            trigger(this.$el, createEvent('mediachange', false, true, [this.mediaObj]));
+        };
+        this.offMediaObj = on(this.mediaObj, 'change', () => {
+            handler();
+            this.$emit('resize');
+        });
+        handler();
+    },
+
+    disconnected() {
+        this.offMediaObj?.();
     },
 };
 
 function toMedia(value) {
     if (isString(value)) {
-        if (value[0] === '@') {
+        if (startsWith(value, '@')) {
             const name = `breakpoint-${value.substr(1)}`;
             value = toFloat(getCssVar(name));
         } else if (isNaN(value)) {
@@ -27,5 +47,5 @@ function toMedia(value) {
         }
     }
 
-    return value && !isNaN(value) ? `(min-width: ${value}px)` : false;
+    return value && isNumeric(value) ? `(min-width: ${value}px)` : '';
 }

package/src/js/mixin/parallax.js

@@ -1,6 +1,7 @@
 import Media from '../mixin/media';
 import { getMaxPathLength } from '../core/svg';
 import {
+    createEvent,
     css,
     Dimensions,
     each,
@@ -255,7 +256,7 @@ function getBackgroundImageDimensions(el) {
         if (!image.naturalWidth) {
             image.onload = () => {
                 dimensions[src] = toDimensions(image);
-                trigger(el, 'load');
+                trigger(el, createEvent('load', false));
             };
             return toDimensions(image);
         }

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.$props.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,11 @@
+import { observeResize } from 'uikit-util';
+
+export default {
+    connected() {
+        this.registerObserver(
+            observeResize(this.$options.resizeTargets?.call(this) || this.$el, () =>
+                this.$emit('resize')
+            )
+        );
+    },
+};

package/src/js/mixin/scroll.js

@@ -0,0 +1,32 @@
+import { on } from 'uikit-util';
+
+export default {
+    connected() {
+        registerScrollListener(this._uid, () => this.$emit('scroll'));
+    },
+
+    disconnected() {
+        unregisterScrollListener(this._uid);
+    },
+};
+
+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;
+    }
+}