uikit 3.16.27 → 3.17.1-dev.7c0766a6f

package/src/js/core/navbar.js

@@ -1,13 +1,44 @@
-import { $$, css, hasClass } from 'uikit-util';
+import {
+    $$,
+    addClass,
+    closest,
+    css,
+    hasClass,
+    observeResize,
+    offset,
+    on,
+    parent,
+    pointInRect,
+    removeClass,
+    replaceClass,
+    scrollParent,
+} from 'uikit-util';
+import { intersection, mutation } from '../api/observables';
 import Dropnav from './dropnav';
 
 export default {
     extends: Dropnav,
 
+    props: {
+        dropbarTransparentMode: Boolean,
+    },
+
     data: {
         clsDrop: 'uk-navbar-dropdown',
         selNavItem:
             '.uk-navbar-nav > li > a,a.uk-navbar-item,button.uk-navbar-item,.uk-navbar-item a,.uk-navbar-item button,.uk-navbar-toggle', // Simplify with :where() selector once browser target is Safari 14+
+        selTransparentTarget: '[class*="uk-section"]',
+        dropbarTransparentMode: false,
+    },
+
+    computed: {
+        dropbarOffset() {
+            return this.dropbarTransparentMode === 'behind' ? this.$el.offsetHeight : 0;
+        },
+
+        navbarContainer() {
+            return closest(this.$el, '.uk-navbar-container');
+        },
     },
 
     watch: {
@@ -30,4 +61,191 @@ export default {
             }
         },
     },
+
+    disconnect() {
+        this._colorListener?.();
+    },
+
+    observe: [
+        mutation({
+            target: ({ navbarContainer }) => navbarContainer,
+            handler() {
+                this.registerColorListener();
+            },
+            options: { attributes: true, attributeFilter: ['class'], attributeOldValue: true },
+        }),
+        intersection({
+            handler(records) {
+                this._isIntersecting = records[0].isIntersecting;
+                this.registerColorListener();
+            },
+            args: { intersecting: false },
+        }),
+    ],
+
+    events: [
+        {
+            name: 'show',
+
+            el() {
+                return this.dropContainer;
+            },
+
+            handler({ target }) {
+                const transparentMode = this.getTransparentMode(target);
+
+                if (!transparentMode || this._mode) {
+                    return;
+                }
+
+                const storePrevColor = () =>
+                    (this._mode = removeClasses(this.navbarContainer, 'uk-light', 'uk-dark'));
+
+                if (transparentMode === 'behind') {
+                    const mode = getDropbarBehindColor(this.$el);
+                    if (mode) {
+                        storePrevColor();
+                        addClass(this.navbarContainer, `uk-${mode}`);
+                    }
+                }
+
+                if (transparentMode === 'remove') {
+                    storePrevColor();
+                    removeClass(this.navbarContainer, 'uk-navbar-transparent');
+                }
+            },
+        },
+        {
+            name: 'hide',
+
+            el() {
+                return this.dropContainer;
+            },
+
+            async handler({ target }) {
+                const transparentMode = this.getTransparentMode(target);
+
+                if (!transparentMode || !this._mode) {
+                    return;
+                }
+
+                await awaitMacroTask();
+
+                if (this.getActive()) {
+                    return;
+                }
+
+                if (transparentMode === 'behind') {
+                    const mode = getDropbarBehindColor(this.$el);
+                    if (mode) {
+                        removeClass(this.navbarContainer, `uk-${mode}`);
+                    }
+                }
+
+                addClass(this.navbarContainer, this._mode);
+
+                if (transparentMode === 'remove') {
+                    addClass(this.navbarContainer, 'uk-navbar-transparent');
+                }
+
+                this._mode = null;
+            },
+        },
+    ],
+
+    methods: {
+        getTransparentMode(el) {
+            if (!this.navbarContainer) {
+                return;
+            }
+
+            if (this.dropbar && this.isDropbarDrop(el)) {
+                return this.dropbarTransparentMode;
+            }
+
+            const drop = this.getDropdown(el);
+
+            if (!drop || !hasClass(el, 'uk-dropbar')) {
+                return;
+            }
+
+            return drop.inset ? 'behind' : 'remove';
+        },
+
+        registerColorListener() {
+            const active =
+                this._isIntersecting &&
+                hasClass(this.navbarContainer, 'uk-navbar-transparent') &&
+                !isWithinMixBlendMode(this.navbarContainer) &&
+                !$$('.uk-drop', this.dropContainer)
+                    .map(this.getDropdown)
+                    .some(
+                        (drop) =>
+                            drop.isToggled() &&
+                            (drop.inset || this.getTransparentMode(drop.$el) === 'behind'),
+                    );
+
+            if (this._colorListener) {
+                if (!active) {
+                    this._colorListener();
+                    this._colorListener = null;
+                }
+                return;
+            }
+
+            if (!active) {
+                return;
+            }
+
+            this._colorListener = listenForPositionChange(this.navbarContainer, () => {
+                const { left, top, height } = offset(this.navbarContainer);
+                const startPoint = { x: left, y: Math.max(0, top) + height / 2 };
+                const target = $$(this.selTransparentTarget).find((target) =>
+                    pointInRect(startPoint, offset(target)),
+                );
+                const color = css(target, '--uk-navbar-color');
+                if (color) {
+                    replaceClass(this.navbarContainer, 'uk-light,uk-dark', `uk-${color}`);
+                }
+            });
+        },
+    },
 };
+
+function removeClasses(el, ...classes) {
+    for (const cls of classes) {
+        if (hasClass(el, cls)) {
+            removeClass(el, cls);
+            return cls;
+        }
+    }
+}
+
+async function awaitMacroTask() {
+    return new Promise((resolve) => setTimeout(resolve));
+}
+
+function getDropbarBehindColor(el) {
+    return css(el, '--uk-navbar-dropbar-behind-color');
+}
+
+function listenForPositionChange(el, handler) {
+    const parent = scrollParent(el, true);
+    const scrollEl = parent === document.documentElement ? document : parent;
+
+    const off = on(scrollEl, 'scroll', handler, { passive: true });
+    const observer = observeResize([el, parent], handler);
+
+    return () => {
+        off();
+        observer.disconnect();
+    };
+}
+
+function isWithinMixBlendMode(el) {
+    do {
+        if (css(el, 'mixBlendMode') !== 'normal') {
+            return true;
+        }
+    } while ((el = parent(el)));
+}

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

@@ -1,6 +1,7 @@
 import {
     $$,
     closest,
+    css,
     getTargetedElement,
     hasClass,
     isSameSiteAnchor,
@@ -16,7 +17,7 @@ import { intersection, scroll } from '../api/observables';
 export default {
     props: {
         cls: String,
-        closest: String,
+        closest: Boolean,
         scroll: Boolean,
         overflow: Boolean,
         offset: Number,
@@ -36,14 +37,14 @@ export default {
         },
 
         elements({ closest: selector }) {
-            return closest(this.links, selector || '*');
+            return this.links.map((el) => closest(el, selector || '*'));
         },
     },
 
     watch: {
         links(links) {
             if (this.scroll) {
-                this.$create('scroll', links, { offset: this.offset || 0 });
+                this.$create('scroll', links, { offset: this.offset });
             }
         },
     },
@@ -71,7 +72,9 @@ export default {
                     active = length - 1;
                 } else {
                     for (let i = 0; i < targets.length; i++) {
-                        if (offset(targets[i]).top - viewport.top - this.offset > 0) {
+                        const fixedEl = findFixedElement(targets[i]);
+                        const offsetBy = this.offset + (fixedEl ? offset(fixedEl).height : 0);
+                        if (offset(targets[i]).top - viewport.top - offsetBy > 0) {
                             break;
                         }
                         active = +i;
@@ -102,3 +105,9 @@ export default {
         },
     ],
 };
+
+function findFixedElement(target) {
+    return target.ownerDocument
+        .elementsFromPoint(1, 1)
+        .find((el) => ['fixed', 'sticky'].includes(css(el, 'position')) && !el.contains(target));
+}

package/src/js/core/scrollspy.js

@@ -80,7 +80,7 @@ export default {
 
             this.$emit();
         },
-        options: (instance) => ({ rootMargin: instance.margin }),
+        options: ({ margin }) => ({ rootMargin: margin }),
         args: { intersecting: false },
     }),
 

package/src/js/core/sticky.js

@@ -8,6 +8,7 @@ import {
     css,
     height as getHeight,
     offset as getOffset,
+    hasClass,
     intersectRect,
     isNumeric,
     isString,
@@ -139,8 +140,6 @@ export default {
         {
             name: 'transitionstart',
 
-            capture: true,
-
             handler() {
                 this.transitionInProgress = once(
                     this.$el,
@@ -177,7 +176,10 @@ export default {
 
                 const viewport = toPx('100vh', 'height');
                 const dynamicViewport = getHeight(window);
-                const maxScrollHeight = document.scrollingElement.scrollHeight - viewport;
+                const maxScrollHeight = Math.max(
+                    0,
+                    document.scrollingElement.scrollHeight - viewport,
+                );
 
                 let position = this.position;
                 if (this.overflowFlip && height > viewport) {
@@ -345,7 +347,9 @@ export default {
                     }
 
                     if (this.animation && scroll > topOffset) {
-                        Animation.cancel(this.$el);
+                        if (hasClass(this.$el, 'uk-animation-leave')) {
+                            return;
+                        }
                         Animation.out(this.$el, this.animation).then(() => this.hide(), noop);
                     } else {
                         this.hide();
@@ -353,7 +357,6 @@ export default {
                 } else if (this.isFixed) {
                     this.update();
                 } else if (this.animation && scroll > topOffset) {
-                    Animation.cancel(this.$el);
                     this.show();
                     Animation.in(this.$el, this.animation).catch(noop);
                 } else {
@@ -412,18 +415,14 @@ export default {
                 let position = 'fixed';
 
                 if (scroll > end) {
-                    offset += end - offsetParentTop;
+                    offset += end - offsetParentTop + overflowScroll - overflow;
                     position = 'absolute';
                 }
 
                 css(this.$el, { position, width, marginTop: 0 }, 'important');
             }
 
-            if (overflow) {
-                offset -= overflowScroll;
-            }
-
-            css(this.$el, 'top', offset);
+            css(this.$el, 'top', offset - overflowScroll);
 
             this.setActive(active);
             toggleClass(

package/src/js/mixin/internal/animate-fade.js

@@ -7,7 +7,6 @@ import {
     isInView,
     once,
     removeClass,
-    sortBy,
     toNumber,
     Transition,
 } from 'uikit-util';
@@ -118,16 +117,7 @@ function waitTransitionend(target) {
 }
 
 function getTransitionNodes(target) {
-    return getRows(children(target)).reduce(
-        (nodes, row) =>
-            nodes.concat(
-                sortBy(
-                    row.filter((el) => isInView(el)),
-                    'offsetLeft',
-                ),
-            ),
-        [],
-    );
+    return getRows(children(target)).flat().filter(isInView);
 }
 
 function awaitFrame() {

package/src/js/mixin/internal/slideshow-animations.js

@@ -20,7 +20,7 @@ export default {
 };
 
 export function translated(el) {
-    return Math.abs(css(el, 'transform').split(',')[4] / el.offsetWidth) || 0;
+    return Math.abs(css(el, 'transform').split(',')[4] / el.offsetWidth);
 }
 
 export function translate(value = 0, unit = '%') {

package/src/js/mixin/slider-reactive.js

@@ -5,7 +5,7 @@ export default {
                 return;
             }
 
-            const index = this.getValidIndex(this.index);
+            const index = this.getValidIndex();
 
             if (!~this.prevIndex || this.index !== index) {
                 this.show(index);

package/src/js/mixin/togglable.js

@@ -247,8 +247,6 @@ export async function toggleTransition(
 }
 
 function toggleAnimation(el, show, cmp) {
-    Animation.cancel(el);
-
     const { animation, duration, _toggle } = cmp;
 
     if (show) {

package/src/js/util/animation.js

@@ -4,6 +4,10 @@ import { once, trigger } from './event';
 import { startsWith, toNodes } from './lang';
 import { css, propName } from './style';
 
+const clsTransition = 'uk-transition';
+const clsTransitionEnd = 'transitionend';
+const clsTransitionCanceled = 'transitioncanceled';
+
 function transition(element, props, duration = 400, timing = 'linear') {
     duration = Math.round(duration);
     return Promise.all(
@@ -17,25 +21,25 @@ function transition(element, props, duration = 400, timing = 'linear') {
                         }
                     }
 
-                    const timer = setTimeout(() => trigger(element, 'transitionend'), duration);
+                    const timer = setTimeout(() => trigger(element, clsTransitionEnd), duration);
 
                     once(
                         element,
-                        'transitionend transitioncanceled',
+                        [clsTransitionEnd, clsTransitionCanceled],
                         ({ type }) => {
                             clearTimeout(timer);
-                            removeClass(element, 'uk-transition');
+                            removeClass(element, clsTransition);
                             css(element, {
                                 transitionProperty: '',
                                 transitionDuration: '',
                                 transitionTimingFunction: '',
                             });
-                            type === 'transitioncanceled' ? reject() : resolve(element);
+                            type === clsTransitionCanceled ? reject() : resolve(element);
                         },
                         { self: true },
                     );
 
-                    addClass(element, 'uk-transition');
+                    addClass(element, clsTransition);
                     css(element, {
                         transitionProperty: Object.keys(props).map(propName).join(','),
                         transitionDuration: `${duration}ms`,
@@ -51,37 +55,39 @@ export const Transition = {
     start: transition,
 
     async stop(element) {
-        trigger(element, 'transitionend');
+        trigger(element, clsTransitionEnd);
         await Promise.resolve();
     },
 
     async cancel(element) {
-        trigger(element, 'transitioncanceled');
+        trigger(element, clsTransitionCanceled);
         await Promise.resolve();
     },
 
     inProgress(element) {
-        return hasClass(element, 'uk-transition');
+        return hasClass(element, clsTransition);
     },
 };
 
 const animationPrefix = 'uk-animation-';
+const clsAnimationEnd = 'animationend';
+const clsAnimationCanceled = 'animationcanceled';
 
 function animate(element, animation, duration = 200, origin, out) {
     return Promise.all(
         toNodes(element).map(
             (element) =>
                 new Promise((resolve, reject) => {
-                    trigger(element, 'animationcanceled');
-                    const timer = setTimeout(() => trigger(element, 'animationend'), duration);
+                    trigger(element, clsAnimationCanceled);
+                    const timer = setTimeout(() => trigger(element, clsAnimationEnd), duration);
 
                     once(
                         element,
-                        'animationend animationcanceled',
+                        [clsAnimationEnd, clsAnimationCanceled],
                         ({ type }) => {
                             clearTimeout(timer);
 
-                            type === 'animationcanceled' ? reject() : resolve(element);
+                            type === clsAnimationCanceled ? reject() : resolve(element);
 
                             css(element, 'animationDuration', '');
                             removeClasses(element, `${animationPrefix}\\S*`);
@@ -115,6 +121,6 @@ export const Animation = {
     },
 
     cancel(element) {
-        trigger(element, 'animationcanceled');
+        trigger(element, clsAnimationCanceled);
     },
 };

package/src/js/util/class.js

@@ -1,32 +1,44 @@
-import { attr } from './attr';
-import { isUndefined, toNodes } from './lang';
+import { includes, isArray, isUndefined, toArray, toNodes } from './lang';
 
-export function addClass(element, ...args) {
-    apply(element, args, 'add');
+export function addClass(element, ...classes) {
+    for (const node of toNodes(element)) {
+        const add = toClasses(classes).filter((cls) => !hasClass(node, cls));
+        if (add.length) {
+            node.classList.add(...add);
+        }
+    }
 }
 
-export function removeClass(element, ...args) {
-    apply(element, args, 'remove');
+export function removeClass(element, ...classes) {
+    for (const node of toNodes(element)) {
+        const remove = toClasses(classes).filter((cls) => hasClass(node, cls));
+        if (remove.length) {
+            node.classList.remove(...remove);
+        }
+    }
 }
 
-export function removeClasses(element, cls) {
-    attr(element, 'class', (value) =>
-        (value || '').replace(new RegExp(`\\b${cls}\\b\\s?`, 'g'), ''),
-    );
+export function removeClasses(element, clsRegex) {
+    clsRegex = new RegExp(clsRegex);
+    for (const node of toNodes(element)) {
+        node.classList.remove(...toArray(node.classList).filter((cls) => cls.match(clsRegex)));
+    }
 }
 
-export function replaceClass(element, ...args) {
-    args[0] && removeClass(element, args[0]);
-    args[1] && addClass(element, args[1]);
+export function replaceClass(element, oldClass, newClass) {
+    newClass = toClasses(newClass);
+    oldClass = toClasses(oldClass).filter((cls) => !includes(newClass, cls));
+    removeClass(element, oldClass);
+    addClass(element, newClass);
 }
 
 export function hasClass(element, cls) {
-    [cls] = getClasses(cls);
-    return !!cls && toNodes(element).some((node) => node.classList.contains(cls));
+    [cls] = toClasses(cls);
+    return toNodes(element).some((node) => node.classList.contains(cls));
 }
 
 export function toggleClass(element, cls, force) {
-    const classes = getClasses(cls);
+    const classes = toClasses(cls);
 
     if (!isUndefined(force)) {
         force = !!force;
@@ -39,14 +51,6 @@ export function toggleClass(element, cls, force) {
     }
 }
 
-function apply(element, args, fn) {
-    args = args.reduce((args, arg) => args.concat(getClasses(arg)), []);
-
-    for (const node of toNodes(element)) {
-        node.classList[fn](...args);
-    }
-}
-
-function getClasses(str) {
-    return String(str).split(/[ ,]/).filter(Boolean);
+function toClasses(str) {
+    return isArray(str) ? str.map(toClasses).flat() : String(str).split(/[ ,]/).filter(Boolean);
 }

package/src/js/util/dom.js

@@ -72,7 +72,6 @@ export function unwrap(element) {
         .forEach((parent) => parent.replaceWith(...parent.childNodes));
 }
 
-const fragmentRe = /^\s*<(\w+|!)[^>]*>/;
 const singleTagRe = /^<(\w+)\s*\/?>(?:<\/\1>)?$/;
 
 export function fragment(html) {
@@ -81,14 +80,10 @@ export function fragment(html) {
         return document.createElement(matches[1]);
     }
 
-    const container = document.createElement('div');
-    if (fragmentRe.test(html)) {
-        container.insertAdjacentHTML('beforeend', html.trim());
-    } else {
-        container.textContent = html;
-    }
+    const container = document.createElement('template');
+    container.innerHTML = html.trim();
 
-    return unwrapSingle(container.childNodes);
+    return unwrapSingle(container.content.childNodes);
 }
 
 function unwrapSingle(nodes) {

package/src/js/util/filter.js

@@ -1,4 +1,4 @@
-import { isElement, isString, startsWith, toArray, toNode, toNodes } from './lang';
+import { isString, startsWith, toArray, toNode, toNodes } from './lang';
 
 const voidElements = {
     area: true,
@@ -50,11 +50,7 @@ export function matches(element, selector) {
 }
 
 export function closest(element, selector) {
-    return isElement(element)
-        ? element.closest(startsWith(selector, '>') ? selector.slice(1) : selector)
-        : toNodes(element)
-              .map((element) => closest(element, selector))
-              .filter(Boolean);
+    return toNode(element)?.closest(startsWith(selector, '>') ? selector.slice(1) : selector);
 }
 
 export function within(element, selector) {