uikit 3.23.13 → 3.23.14-dev.be820cd99

package/eslint.config.mjs

@@ -10,7 +10,7 @@ export default [
     },
     {
         rules: {
-            'no-unused-vars': ['error', { caughtErrors: 'none' }],
+            'no-empty': ['error', { allowEmptyCatch: true }],
         },
         languageOptions: {
             ecmaVersion: 'latest',

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.23.13",
+  "version": "3.23.14-dev.be820cd99",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

package/src/images/backgrounds/form-checkbox.svg

@@ -1,3 +1,3 @@
-<svg width="14" height="11" viewBox="0 0 14 11" xmlns="http://www.w3.org/2000/svg">
-    <polygon fill="#000" points="12 1 5 7.5 2 5 1 5.5 5 10 13 1.5" />
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <polygon fill="#000" points="13 3.5 6 10 3 7.5 2 8 6 12.5 14 4 13 3.5" />
 </svg>

package/src/images/components/navbar-toggle-icon.svg

@@ -9,15 +9,22 @@
         }
 
         .uk-navbar-toggle-icon svg > .line-3 { opacity: 0; }
-        .uk-navbar-toggle-animate[aria-expanded="true"] svg > .line-3 { opacity: 1; }
+        [aria-expanded="true"].uk-navbar-toggle-icon svg > .line-3,
+        [aria-expanded="true"] > .uk-navbar-toggle-icon svg > .line-3 { opacity: 1; }
 
-        .uk-navbar-toggle-animate[aria-expanded="true"] svg > .line-2 { transform: rotate(45deg); }
-        .uk-navbar-toggle-animate[aria-expanded="true"] svg > .line-3 { transform: rotate(-45deg); }
+        [aria-expanded="true"].uk-navbar-toggle-icon svg > .line-2,
+        [aria-expanded="true"] > .uk-navbar-toggle-icon svg > .line-2 { transform: rotate(45deg); }
+        [aria-expanded="true"].uk-navbar-toggle-icon svg > .line-3,
+        [aria-expanded="true"] > .uk-navbar-toggle-icon svg > .line-3 { transform: rotate(-45deg); }
 
-        .uk-navbar-toggle-animate[aria-expanded="true"] svg > .line-1,
-        .uk-navbar-toggle-animate[aria-expanded="true"] svg > .line-4 { opacity: 0; }
-        .uk-navbar-toggle-animate[aria-expanded="true"] svg > .line-1 { transform: translateY(6px) scaleX(0); }
-        .uk-navbar-toggle-animate[aria-expanded="true"] svg > .line-4 { transform: translateY(-6px) scaleX(0); }
+        [aria-expanded="true"].uk-navbar-toggle-icon svg > .line-1,
+        [aria-expanded="true"] > .uk-navbar-toggle-icon svg > .line-1,
+        [aria-expanded="true"].uk-navbar-toggle-icon svg > .line-4,
+        [aria-expanded="true"] > .uk-navbar-toggle-icon svg > .line-4 { opacity: 0; }
+        [aria-expanded="true"].uk-navbar-toggle-icon svg > .line-1,
+        [aria-expanded="true"] >.uk-navbar-toggle-icon svg > .line-1 { transform: translateY(6px) scaleX(0); }
+        [aria-expanded="true"].uk-navbar-toggle-icon svg > .line-4,
+        [aria-expanded="true"] > .uk-navbar-toggle-icon svg > .line-4 { transform: translateY(-6px) scaleX(0); }
 
     </style>
     <rect class="line-1" y="3" width="20" height="2" />

package/src/js/api/options.js

@@ -149,7 +149,7 @@ export function parseOptions(options, args = []) {
                         return options;
                     }, {})
             : {};
-    } catch (e) {
+    } catch {
         return {};
     }
 }

package/src/js/components/lightbox-panel.js

@@ -285,7 +285,7 @@ export default {
                     allowfullscreen: '',
                     style: 'max-width: 100%; box-sizing: border-box;',
                     'uk-responsive': '',
-                    'uk-video': `${Boolean(this.videoAutoplay)}`,
+                    'uk-video': Boolean(this.videoAutoplay),
                 };
 
                 // Image
@@ -310,8 +310,9 @@ export default {
                         playsinline: '',
                         controls: inline ? null : '',
                         loop: inline ? '' : null,
+                        muted: inline ? '' : null,
                         poster: this.videoAutoplay ? null : item.poster,
-                        'uk-video': inline ? 'automute: true' : Boolean(this.videoAutoplay),
+                        'uk-video': Boolean(this.videoAutoplay),
                         ...attrs,
                     });
 
@@ -373,7 +374,7 @@ export default {
                                 ...attrs,
                             }),
                         );
-                    } catch (e) {
+                    } catch {
                         this.setError(item);
                     }
                 }
@@ -460,7 +461,8 @@ function toThumbnavItem(item, videoAutoplay) {
                     src: item.thumb,
                     loop: '',
                     playsinline: '',
-                    'uk-video': `autoplay: ${Boolean(videoAutoplay)}; automute: true`,
+                    muted: '',
+                    'uk-video': videoAutoplay === 'inline',
                 })
               : createEl('canvas');
 

package/src/js/components/upload.js

@@ -217,9 +217,7 @@ function send(url, env) {
             if (prop in xhr) {
                 try {
                     xhr[prop] = env[prop];
-                } catch (e) {
-                    // noop
-                }
+                } catch {}
             }
         }
 

package/src/js/core/drop.js

@@ -28,6 +28,7 @@ import {
     query,
     removeClass,
 } from 'uikit-util';
+import Class from '../mixin/class';
 import Container from '../mixin/container';
 import { maybeDefaultPreventClick } from '../mixin/event';
 import Position, { storeScrollPosition } from '../mixin/position';
@@ -38,7 +39,7 @@ import { preventBackgroundScroll } from '../util/scroll';
 export let active;
 
 export default {
-    mixins: [Container, Position, Togglable],
+    mixins: [Class, Container, Position, Togglable],
 
     args: 'pos',
 
@@ -55,7 +56,6 @@ export default {
         delayShow: Number,
         delayHide: Number,
         autoUpdate: Boolean,
-        clsDrop: String,
         animateOut: Boolean,
         bgScroll: Boolean,
         closeOnScroll: Boolean,
@@ -74,7 +74,6 @@ export default {
         delayShow: 0,
         delayHide: 800,
         autoUpdate: true,
-        clsDrop: false,
         animateOut: false,
         bgScroll: true,
         animation: ['uk-animation-fade'],
@@ -107,12 +106,8 @@ export default {
         this.tracker = new MouseTracker();
     },
 
-    beforeConnect() {
-        this.clsDrop = this.$props.clsDrop || this.$options.id;
-    },
-
     connected() {
-        addClass(this.$el, 'uk-drop', this.clsDrop);
+        addClass(this.$el, 'uk-drop');
 
         if (this.toggle && !this.targetEl) {
             this.targetEl = createToggleComponent(this);

package/src/js/core/dropnav.js

@@ -37,7 +37,6 @@ export default {
 
     props: {
         align: String,
-        clsDrop: String,
         boundary: Boolean,
         dropbar: Boolean,
         dropbarAnchor: Boolean,
@@ -62,6 +61,7 @@ export default {
         boundary: true,
         dropbar: false,
         dropbarAnchor: false,
+        flip: true,
         delayShow: 160,
         duration: 200,
         container: false,
@@ -79,7 +79,7 @@ export default {
             dropbar =
                 this._dropbar || query(dropbar, this.$el) || $(`+ .${this.clsDropbar}`, this.$el);
 
-            return dropbar ? dropbar : (this._dropbar = $('<div></div>'));
+            return dropbar ? dropbar : (this._dropbar = $('<div>'));
         },
 
         dropContainer(_, $el) {
@@ -404,10 +404,10 @@ export default {
                 this.dropdowns.filter((el) => !this.getDropdown(el)),
                 {
                     ...this.$props,
-                    flip: false,
+                    flip: this.flip && !this.$props.dropbar,
                     shift: true,
                     pos: `bottom-${this.align}`,
-                    boundary: this.boundary === true ? this.$el : this.boundary,
+                    boundaryX: this.boundary === true ? this.$el : this.boundary,
                 },
             );
         },

package/src/js/core/img.js

@@ -138,7 +138,7 @@ function parseSources(sources) {
     if (startsWith(sources, '[')) {
         try {
             sources = JSON.parse(sources);
-        } catch (e) {
+        } catch {
             sources = [];
         }
     } else {

package/src/js/core/index.js

@@ -18,6 +18,7 @@ export { default as Nav } from './nav';
 export { default as Navbar } from './navbar';
 export { default as Offcanvas } from './offcanvas';
 export { default as OverflowAuto } from './overflow-auto';
+export { default as OverflowFade } from './overflow-fade';
 export { default as Responsive } from './responsive';
 export { default as Scroll } from './scroll';
 export { default as Scrollspy } from './scrollspy';

package/src/js/core/navbar.js

@@ -1,4 +1,5 @@
 import { $$, addClass, css, hasClass, offset, removeClass } from 'uikit-util';
+import { awaitTimeout } from '../util/await';
 import { active } from './drop';
 import Dropnav from './dropnav';
 
@@ -12,6 +13,7 @@ export default {
     },
 
     data: {
+        flip: false,
         delayShow: 200,
         clsDrop: 'uk-navbar-dropdown',
         selNavItem:
@@ -59,7 +61,7 @@ export default {
             el: ({ dropContainer }) => dropContainer,
 
             async handler() {
-                await awaitMacroTask();
+                await awaitTimeout();
 
                 if (this._transparent && (!active || !this.dropContainer.contains(active.$el))) {
                     addClass(this.navbarContainer, clsNavbarTransparent);
@@ -92,7 +94,3 @@ export default {
         },
     },
 };
-
-function awaitMacroTask() {
-    return new Promise((resolve) => setTimeout(resolve));
-}

package/src/js/core/overflow-fade.js

@@ -0,0 +1,67 @@
+import { children, clamp, css, toggleClass } from 'uikit-util';
+import { mutation, resize } from '../api/observables';
+
+export default {
+    data: {
+        fadeDuration: 0.05,
+    },
+
+    events: {
+        name: 'scroll',
+
+        self: true,
+
+        passive: true,
+
+        handler() {
+            this.$emit();
+        },
+    },
+
+    observe: [
+        mutation({
+            options: {
+                subtree: true,
+                childList: true,
+            },
+        }),
+        resize({
+            target: ({ $el }) => [$el, ...children($el)],
+        }),
+    ],
+
+    update: {
+        read() {
+            const overflow = [];
+            for (const prop of ['Width', 'Height']) {
+                overflow.push(this.$el[`scroll${prop}`] - this.$el[`client${prop}`]);
+            }
+            return { overflow };
+        },
+
+        write({ overflow }) {
+            for (let i = 0; i < 2; i++) {
+                toggleClass(
+                    this.$el,
+                    `${this.$options.id}-${i ? 'vertical' : 'horizontal'}`,
+                    overflow[i] && !overflow[i - 1],
+                );
+
+                if (!overflow[i - 1]) {
+                    const dir = i ? 'Top' : 'Left';
+                    const percent = overflow[i] ? this.$el[`scroll${dir}`] / overflow[i] : 0;
+
+                    const toValue = (value) =>
+                        overflow[i] ? clamp((this.fadeDuration - value) / this.fadeDuration) : 1;
+
+                    css(this.$el, {
+                        '--uk-overflow-fade-start-opacity': toValue(percent),
+                        '--uk-overflow-fade-end-opacity': toValue(1 - percent),
+                    });
+                }
+            }
+        },
+
+        events: ['resize'],
+    },
+};

package/src/js/core/scrollspy.js

@@ -9,6 +9,7 @@ import {
     trigger,
 } from 'uikit-util';
 import { intersection } from '../api/observables';
+import { awaitTimeout } from '../util/await';
 
 const clsInView = 'uk-scrollspy-inview';
 
@@ -52,7 +53,7 @@ export default {
 
     disconnected() {
         for (const [el, state] of this.elementData.entries()) {
-            removeClass(el, clsInView, state?.cls || '');
+            removeClass(el, clsInView, state.cls || '');
         }
         delete this.elementData;
     },
@@ -89,15 +90,14 @@ export default {
                     if (state.show && !state.inview && !state.queued) {
                         state.queued = true;
 
-                        data.promise = (data.promise || Promise.resolve())
-                            .then(() => new Promise((resolve) => setTimeout(resolve, this.delay)))
-                            .then(() => {
-                                this.toggle(el, true);
-                                setTimeout(() => {
-                                    state.queued = false;
-                                    this.$emit();
-                                }, 300);
-                            });
+                        data.promise = (data.promise || Promise.resolve()).then(async () => {
+                            await awaitTimeout(state.show ? this.delay : 0);
+                            this.toggle(el, true);
+                            setTimeout(() => {
+                                state.queued = false;
+                                this.$emit();
+                            }, 300);
+                        });
                     } else if (!state.show && state.inview && !state.queued && this.repeat) {
                         this.toggle(el, false);
                     }

package/src/js/core/sticky.js

@@ -30,6 +30,7 @@ import {
 import { resize, scroll, viewport } from '../api/observables';
 import Class from '../mixin/class';
 import Media from '../mixin/media';
+import { awaitFrame, awaitTimeout } from '../util/await';
 
 export default {
     mixins: [Class, Media],
@@ -123,26 +124,26 @@ export default {
 
             filter: ({ targetOffset }) => targetOffset !== false,
 
-            handler() {
+            async handler() {
                 const { scrollingElement } = document;
 
                 if (!location.hash || scrollingElement.scrollTop === 0) {
                     return;
                 }
 
-                setTimeout(() => {
-                    const targetOffset = getOffset($(location.hash));
-                    const elOffset = getOffset(this.$el);
-
-                    if (this.isFixed && intersectRect(targetOffset, elOffset)) {
-                        scrollingElement.scrollTop = Math.ceil(
-                            targetOffset.top -
-                                elOffset.height -
-                                toPx(this.targetOffset, 'height', this.placeholder) -
-                                toPx(this.offset, 'height', this.placeholder),
-                        );
-                    }
-                });
+                await awaitTimeout();
+
+                const targetOffset = getOffset($(location.hash));
+                const elOffset = getOffset(this.$el);
+
+                if (this.isFixed && intersectRect(targetOffset, elOffset)) {
+                    scrollingElement.scrollTop = Math.ceil(
+                        targetOffset.top -
+                            elOffset.height -
+                            toPx(this.targetOffset, 'height', this.placeholder) -
+                            toPx(this.offset, 'height', this.placeholder),
+                    );
+                }
             },
         },
     ],
@@ -491,10 +492,11 @@ function reset(el) {
 }
 
 const clsTransitionDisable = 'uk-transition-disable';
-function preventTransition(element) {
+async function preventTransition(element) {
     if (!hasClass(element, clsTransitionDisable)) {
         addClass(element, clsTransitionDisable);
-        requestAnimationFrame(() => removeClass(element, clsTransitionDisable));
+        await awaitFrame();
+        removeClass(element, clsTransitionDisable);
     }
 }
 

package/src/js/core/toggle.js

@@ -96,9 +96,7 @@ export default {
         },
 
         {
-            // mouseenter mouseleave are added because of Firefox bug,
-            // where pointerleave is triggered immediately after pointerenter on scroll
-            name: `mouseenter mouseleave ${pointerEnter} ${pointerLeave} focus blur`,
+            name: `${pointerEnter} ${pointerLeave} focus blur`,
 
             filter: ({ mode }) => includes(mode, 'hover'),
 
@@ -107,14 +105,14 @@ export default {
                     return;
                 }
 
-                const show = includes(['mouseenter', pointerEnter, 'focus'], e.type);
+                const show = includes([pointerEnter, 'focus'], e.type);
                 const expanded = this.isToggled(this.target);
 
                 // Skip hide if still hovered or focused
                 if (
                     !show &&
                     (!isBoolean(this._showState) ||
-                        (e.type !== 'blur' && matches(this.$el, ':focus')) ||
+                        (e.type === pointerLeave && matches(this.$el, ':focus')) ||
                         (e.type === 'blur' && matches(this.$el, ':hover')))
                 ) {
                     // Reset showState if already hidden

package/src/js/core/video.js

@@ -9,6 +9,7 @@ import {
     play,
     pointerEnter,
     pointerLeave,
+    query,
 } from 'uikit-util';
 import { intersection } from '../api/observables';
 
@@ -18,31 +19,37 @@ export default {
     props: {
         automute: Boolean,
         autoplay: Boolean,
+        restart: Boolean,
+        hoverTarget: Boolean,
     },
 
     data: {
         automute: false,
         autoplay: true,
+        restart: false,
+        hoverTarget: false,
     },
 
     beforeConnect() {
-        if (this.autoplay === 'inview' && !hasAttr(this.$el, 'preload')) {
+        const isVideo = isTag(this.$el, 'video');
+        if (this.autoplay === 'inview' && isVideo && !hasAttr(this.$el, 'preload')) {
             this.$el.preload = 'none';
         }
 
-        if (isTag(this.$el, 'iframe') && !hasAttr(this.$el, 'allow')) {
+        if (!isVideo && !hasAttr(this.$el, 'allow')) {
             this.$el.allow = 'autoplay';
         }
 
         if (this.autoplay === 'hover') {
-            if (isTag(this.$el, 'video')) {
+            if (isVideo) {
                 this.$el.tabIndex = 0;
             } else {
                 this.autoplay = true;
             }
         }
 
-        if (this.automute) {
+        // If the video is added to the DOM through JS, the muted attribute is ignored
+        if (this.automute || hasAttr(this.$el, 'muted')) {
             mute(this.$el);
         }
     },
@@ -51,13 +58,15 @@ export default {
         {
             name: `${pointerEnter} focusin`,
 
+            el: ({ hoverTarget, $el }) => query(hoverTarget, $el) || $el,
+
             filter: ({ autoplay }) => includes(autoplay, 'hover'),
 
             handler(e) {
                 if (!isTouch(e) || !isPlaying(this.$el)) {
                     play(this.$el);
                 } else {
-                    pause(this.$el);
+                    pauseHover(this.$el, this.restart);
                 }
             },
         },
@@ -65,11 +74,13 @@ export default {
         {
             name: `${pointerLeave} focusout`,
 
+            el: ({ hoverTarget, $el }) => query(hoverTarget, $el) || $el,
+
             filter: ({ autoplay }) => includes(autoplay, 'hover'),
 
             handler(e) {
                 if (!isTouch(e)) {
-                    pause(this.$el);
+                    pauseHover(this.$el, this.restart);
                 }
             },
         },
@@ -77,15 +88,23 @@ export default {
 
     observe: [
         intersection({
-            filter: ({ autoplay }) => autoplay !== 'hover',
-            handler([{ isIntersecting }]) {
+            filter: ({ $el }) => $el.preload === 'none',
+            handler([{ target }]) {
+                target.preload = '';
+                this.$reset();
+            },
+        }),
+
+        intersection({
+            filter: ({ $el, autoplay }) => autoplay !== 'hover' && $el.preload !== 'none',
+            handler([{ isIntersecting, target }]) {
                 if (!document.fullscreenElement) {
                     if (isIntersecting) {
                         if (this.autoplay) {
-                            play(this.$el);
+                            play(target);
                         }
                     } else {
-                        pause(this.$el);
+                        pauseHover(target, this.restart);
                     }
                 }
             },
@@ -100,3 +119,10 @@ export default {
 function isPlaying(videoEl) {
     return !videoEl.paused && !videoEl.ended;
 }
+
+function pauseHover(el, restart) {
+    pause(el);
+    if (restart && isTag(el, 'video')) {
+        el.currentTime = 0;
+    }
+}

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

@@ -4,6 +4,7 @@ import {
     css,
     hasClass,
     height,
+    isInView,
     isVisible,
     once,
     removeClass,
@@ -12,6 +13,7 @@ import {
     Transition,
 } from 'uikit-util';
 import { getRows } from '../../core/margin';
+import { awaitTimeout } from '../../util/await';
 
 const clsLeave = 'uk-transition-leave';
 const clsEnter = 'uk-transition-enter';
@@ -28,12 +30,21 @@ export default function fade(action, target, duration, stagger = 0) {
         addClass(target, clsLeave);
 
         await (stagger
-            ? Promise.all(
-                  getTransitionNodes(target).map(async (child, i) => {
-                      await awaitTimeout(i * stagger);
-                      return Transition.start(child, propsOut, duration / 2, 'ease');
-                  }),
-              )
+            ? getTransitionNodes(target).reduce(async (promise, child, i, array) => {
+                  await promise;
+
+                  if (!isInView(child) || !isCurrentIndex()) {
+                      css(child, propsOut);
+                      return;
+                  }
+
+                  await awaitTimeout(stagger);
+
+                  const transition = Transition.start(child, propsOut, duration / 2, 'ease');
+                  if (array.length - 1 === i) {
+                      await transition;
+                  }
+              }, Promise.resolve())
             : Transition.start(target, propsOut, duration / 2, 'ease'));
 
         removeClass(target, clsLeave);
@@ -64,13 +75,23 @@ export default function fade(action, target, duration, stagger = 0) {
             const nodes = getTransitionNodes(target);
             css(children(target), propsOut);
 
-            transitions = nodes.map(async (child, i) => {
-                await awaitTimeout(i * stagger);
-                await Transition.start(child, propsIn, duration / 2, 'ease');
-                if (isCurrentIndex()) {
+            transitions = nodes.reduce(async (promise, child, i, array) => {
+                await promise;
+
+                if (!isInView(child) || !isCurrentIndex()) {
                     resetProps(child, propsIn);
+                    return;
                 }
-            });
+
+                await awaitTimeout(stagger);
+
+                const transition = Transition.start(child, propsIn, duration / 2, 'ease').then(
+                    () => isCurrentIndex() && resetProps(child, propsIn),
+                );
+                if (array.length - 1 === i) {
+                    await transition;
+                }
+            }, Promise.resolve());
 
             targetDuration += nodes.length * stagger;
         }
@@ -118,7 +139,3 @@ function waitTransitionend(target) {
 function getTransitionNodes(target) {
     return getRows(children(target)).flat().filter(isVisible);
 }
-
-function awaitTimeout(timeout) {
-    return new Promise((resolve) => setTimeout(resolve, timeout));
-}