uikit 3.15.24 → 3.15.25-dev.c6f5a4c4e

package/package.json

@@ -1,66 +1,66 @@
 {
-    "name": "uikit",
-    "title": "UIkit",
-    "description": "UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.",
-    "version": "3.15.24",
-    "main": "dist/js/uikit.js",
-    "style": "dist/css/uikit.css",
-    "sideEffects": [
-        "*.css",
-        "./src/js/*.js",
-        "./dist/**/*.js"
-    ],
-    "scripts": {
-        "build-scss": "node build/scss",
-        "compile": "yarn compile-less && yarn compile-js",
-        "compile-js": "node build/build",
-        "compile-less": "yarn icons && node build/less",
-        "compile-rtl": "yarn compile-less rtl",
-        "icons": "node build/icons",
-        "prefix": "node build/prefix",
-        "scope": "node build/scope",
-        "release": "node build/release",
-        "watch": "watch-run -i -p \"**/*.less\" -- node build/less",
-        "eslint": "eslint src/js",
-        "eslint-fix": "eslint --fix src/js"
-    },
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/uikit/uikit.git"
-    },
-    "license": "MIT",
-    "bugs": {
-        "url": "https://github.com/uikit/uikit/issues"
-    },
-    "homepage": "https://getuikit.com",
-    "devDependencies": {
-        "@babel/core": "^7.19.6",
-        "@babel/preset-env": "^7.19.1",
-        "@rollup/plugin-alias": "^4.0.2",
-        "@rollup/plugin-babel": "^6.0.2",
-        "@rollup/plugin-replace": "^5.0.1",
-        "archiver": "^5.3.1",
-        "camelcase": "^7.0.0",
-        "clean-css": "^5.3.2",
-        "dateformat": "^5.0.3",
-        "esbuild": "^0.17.3",
-        "eslint": "^8.32.0",
-        "eslint-config-prettier": "^8.5.0",
-        "fs-extra": "^11.1.0",
-        "glob": "^8.1.0",
-        "inquirer": "^9.1.4",
-        "less": "^4.1.3",
-        "minimist": "^1.2.7",
-        "number-precision": "^1.6.0",
-        "p-limit": "^4.0.0",
-        "prettier": "^2.8.4",
-        "rollup": "^3.2.3",
-        "rollup-plugin-esbuild": "^5.0.0",
-        "rollup-plugin-html": "^0.2.1",
-        "rollup-plugin-modify": "^3.0.0",
-        "rtlcss": "^4.0.0",
-        "semver": "^7.3.8",
-        "svgo": "^3.0.0",
-        "watch-run": "^1.2.5"
-    }
-}
+  "name": "uikit",
+  "title": "UIkit",
+  "description": "UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.",
+  "version": "3.15.25-dev.c6f5a4c4e",
+  "main": "dist/js/uikit.js",
+  "style": "dist/css/uikit.css",
+  "sideEffects": [
+    "*.css",
+    "./src/js/*.js",
+    "./dist/**/*.js"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/uikit/uikit.git"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/uikit/uikit/issues"
+  },
+  "homepage": "https://getuikit.com",
+  "devDependencies": {
+    "@babel/core": "^7.21.0",
+    "@babel/preset-env": "^7.20.2",
+    "@rollup/plugin-alias": "^4.0.3",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-replace": "^5.0.2",
+    "archiver": "^5.3.1",
+    "camelcase": "^7.0.1",
+    "clean-css": "^5.3.2",
+    "dateformat": "^5.0.3",
+    "esbuild": "^0.17.10",
+    "eslint": "^8.34.0",
+    "eslint-config-prettier": "^8.6.0",
+    "fs-extra": "^11.1.0",
+    "glob": "^8.1.0",
+    "inquirer": "^9.1.4",
+    "less": "^4.1.3",
+    "minimist": "^1.2.8",
+    "number-precision": "^1.6.0",
+    "p-limit": "^4.0.0",
+    "prettier": "^2.8.4",
+    "rollup": "^3.17.2",
+    "rollup-plugin-esbuild": "^5.0.0",
+    "rollup-plugin-html": "^0.2.1",
+    "rollup-plugin-modify": "^3.0.0",
+    "rtlcss": "^4.0.0",
+    "semver": "^7.3.8",
+    "svgo": "^3.0.2",
+    "watch-run": "^1.2.5"
+  },
+  "scripts": {
+    "build-scss": "node build/scss",
+    "compile": "yarn compile-less && yarn compile-js",
+    "compile-js": "node build/build",
+    "compile-less": "yarn icons && node build/less",
+    "compile-rtl": "yarn compile-less rtl",
+    "icons": "node build/icons",
+    "prefix": "node build/prefix",
+    "scope": "node build/scope",
+    "release": "node build/release",
+    "watch": "watch-run -i -p \"**/*.less\" -- node build/less",
+    "eslint": "eslint src/js",
+    "eslint-fix": "eslint --fix src/js"
+  }
+}

package/src/images/icons/android-robot.svg

@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <path d="m17.61,7.96v4.64c-.06,1.48-2.17,1.48-2.23,0v-4.64c.06-1.48,2.17-1.48,2.23,0Z" />
+    <path d="m4.62,7.96v4.64c-.06,1.48-2.17,1.48-2.23,0v-4.64c.06-1.48,2.17-1.48,2.23,0Z" />
+    <path d="m12.78,2.85c-.11-.07-.23-.13-.34-.19.13-.23.65-1.17.79-1.42.07-.12-.05-.27-.18-.23-.04.01-.07.04-.09.08l-.79,1.43c-1.32-.6-2.98-.6-4.3,0-.13-.23-.65-1.18-.79-1.43-.04-.07-.14-.1-.21-.06-.08.04-.1.14-.06.21,0,0,.79,1.42.79,1.42-1.49.77-2.53,2.28-2.53,3.99-.02,0,9.93,0,9.93,0,.01-1.55-.87-2.98-2.19-3.8Zm-5.07,1.98c-.23,0-.41-.19-.41-.41.01-.27.21-.41.41-.41s.4.14.42.41c0,.22-.18.42-.41.41Zm4.58,0c-.23,0-.42-.19-.41-.41.01-.28.21-.41.41-.41s.4.14.41.41c0,.23-.19.41-.41.41Z" />
+    <path d="m14.97,7.03v7.2c0,.66-.54,1.2-1.2,1.2h-.8v2.46c-.06,1.48-2.16,1.48-2.23,0,0,0,0-2.46,0-2.46h-1.48v2.46c0,.61-.5,1.11-1.11,1.11s-1.11-.5-1.11-1.11v-2.46h-.8c-.66,0-1.2-.54-1.2-1.2,0,0,0-7.2,0-7.2h9.93Z" />
+</svg>

package/src/images/icons/android.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <path d="m14.88,6.77l1.66-2.87c.09-.16.04-.37-.12-.46-.16-.09-.37-.04-.46.12l-1.68,2.91c-1.28-.59-2.73-.91-4.28-.91s-3,.33-4.28.91l-1.68-2.91c-.09-.16-.3-.22-.46-.12-.16.09-.22.3-.12.46l1.66,2.87C2.26,8.32.32,11.22,0,14.61h20c-.32-3.39-2.26-6.29-5.12-7.84h0Zm-9.47,5.03c-.46,0-.84-.38-.84-.84s.38-.84.84-.84.84.38.84.84c0,.46-.37.84-.84.84Zm9.18,0c-.46,0-.84-.38-.84-.84s.38-.84.84-.84.84.38.84.84c0,.46-.37.84-.84.84Z" />
+</svg>

package/src/images/icons/apple.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <path d="m17.23,6.93c-.1.08-1.95,1.12-1.95,3.43,0,2.67,2.35,3.62,2.42,3.64-.01.06-.37,1.29-1.24,2.55-.77,1.11-1.58,2.22-2.8,2.22s-1.54-.71-2.95-.71-1.87.73-2.99.73-1.9-1.03-2.8-2.29c-1.04-1.48-1.88-3.78-1.88-5.96,0-3.5,2.28-5.36,4.51-5.36,1.19,0,2.18.78,2.93.78s1.82-.83,3.17-.83c.51,0,2.36.05,3.57,1.79h0Zm-4.21-3.27c.56-.66.96-1.59.96-2.51,0-.13-.01-.26-.03-.36-.91.03-1.99.61-2.65,1.36-.51.58-.99,1.5-.99,2.44,0,.14.02.28.03.33.06.01.15.02.24.02.82,0,1.85-.55,2.44-1.28h0Z" />
+</svg>

package/src/images/icons/microsoft.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <path d="m2,2h7.58v7.58H2V2Zm8.42,0h7.58v7.58h-7.58V2ZM2,10.42h7.58v7.58H2v-7.58Zm8.42,0h7.58v7.58h-7.58" />
+</svg>

package/src/js/components/countdown.js

@@ -89,13 +89,13 @@ export default {
 };
 
 function getTimeSpan(date) {
-    const total = date - Date.now();
+    const total = (date - Date.now()) / 1000;
 
     return {
         total,
-        seconds: (total / 1000) % 60,
-        minutes: (total / 1000 / 60) % 60,
-        hours: (total / 1000 / 60 / 60) % 24,
-        days: total / 1000 / 60 / 60 / 24,
+        seconds: total % 60,
+        minutes: (total / 60) % 60,
+        hours: (total / 60 / 60) % 24,
+        days: total / 60 / 60 / 24,
     };
 }

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

@@ -7,7 +7,6 @@ import {
     append,
     attr,
     fragment,
-    getImage,
     getIndex,
     html,
     on,
@@ -213,12 +212,9 @@ export default {
                     type === 'image' ||
                     src.match(/\.(avif|jpe?g|jfif|a?png|gif|svg|webp)($|\?)/i)
                 ) {
-                    try {
-                        const { width, height } = await getImage(src, attrs.srcset, attrs.size);
-                        this.setItem(item, createEl('img', { src, width, height, alt, ...attrs }));
-                    } catch (e) {
-                        this.setError(item);
-                    }
+                    const img = createEl('img', { src, alt, ...attrs });
+                    on(img, 'load', () => this.setItem(item, img));
+                    on(img, 'error', () => this.setError(item));
 
                     // Video
                 } else if (type === 'video' || src.match(/\.(mp4|webm|ogv)($|\?)/i)) {
@@ -228,16 +224,10 @@ export default {
                         controls: '',
                         playsinline: '',
                         'uk-video': `${this.videoAutoplay}`,
+                        ...attrs,
                     });
 
-                    on(video, 'loadedmetadata', () => {
-                        attr(video, {
-                            width: video.videoWidth,
-                            height: video.videoHeight,
-                            ...attrs,
-                        });
-                        this.setItem(item, video);
-                    });
+                    on(video, 'loadedmetadata', () => this.setItem(item, video));
                     on(video, 'error', () => this.setError(item));
 
                     // Iframe
@@ -279,9 +269,7 @@ export default {
                                 `https://vimeo.com/api/oembed.json?maxwidth=1920&url=${encodeURI(
                                     src
                                 )}`,
-                                {
-                                    credentials: 'omit',
-                                }
+                                { credentials: 'omit' }
                             )
                         ).json();
 

package/src/js/components/sortable.js

@@ -398,10 +398,9 @@ function findInsertTarget(list, target, placeholder, x, y, sameList) {
         [placeholderRect.top, placeholderRect.bottom]
     );
 
-    const pointerPos = sameRow ? x : y;
-    const lengthProp = sameRow ? 'width' : 'height';
-    const startProp = sameRow ? 'left' : 'top';
-    const endProp = sameRow ? 'right' : 'bottom';
+    const [pointerPos, lengthProp, startProp, endProp] = sameRow
+        ? [x, 'width', 'left', 'right']
+        : [y, 'height', 'top', 'bottom'];
 
     const diff =
         placeholderRect[lengthProp] < rect[lengthProp]

package/src/js/components/tooltip.js

@@ -121,14 +121,9 @@ export default {
                         passive: true,
                     }),
                 ];
-                once(
-                    this.tooltip,
-                    'hide',
-                    () => handlers.forEach((handler) => handler && handler()),
-                    {
-                        self: true,
-                    }
-                );
+                once(this.tooltip, 'hide', () => handlers.forEach((handler) => handler()), {
+                    self: true,
+                });
             });
 
             this.toggleElement(this.tooltip, true);

package/src/js/components/upload.js

@@ -140,7 +140,7 @@ export default {
                         responseType: this.type,
                         beforeSend: (env) => {
                             const { xhr } = env;
-                            xhr.upload && on(xhr.upload, 'progress', this.progress);
+                            on(xhr.upload, 'progress', this.progress);
                             for (const type of ['loadStart', 'load', 'loadEnd', 'abort']) {
                                 on(xhr, type.toLowerCase(), this[type]);
                             }

package/src/js/core/drop.js

@@ -108,12 +108,7 @@ export default {
         addClass(this.$el, this.clsDrop);
 
         if (this.toggle && !this.targetEl) {
-            this.targetEl = this.$create('toggle', query(this.toggle, this.$el), {
-                target: this.$el,
-                mode: this.mode,
-            }).$el;
-            attr(this.targetEl, 'aria-haspopup', true);
-            this.lazyload(this.targetEl);
+            this.targetEl = createToggleComponent(this);
         }
 
         this._style = (({ width, height }) => ({ width, height }))(this.$el.style);
@@ -262,51 +257,11 @@ export default {
 
                 this.tracker.init();
 
-                const update = () => this.$emit();
                 const handlers = [
-                    on(
-                        document,
-                        pointerDown,
-                        ({ target }) =>
-                            !within(target, this.$el) &&
-                            once(
-                                document,
-                                `${pointerUp} ${pointerCancel} scroll`,
-                                ({ defaultPrevented, type, target: newTarget }) => {
-                                    if (
-                                        !defaultPrevented &&
-                                        type === pointerUp &&
-                                        target === newTarget &&
-                                        !(this.targetEl && within(target, this.targetEl))
-                                    ) {
-                                        this.hide(false);
-                                    }
-                                },
-                                true
-                            )
-                    ),
-
-                    on(document, 'keydown', (e) => {
-                        if (e.keyCode === 27) {
-                            this.hide(false);
-                        }
-                    }),
-
-                    on(window, 'resize', update),
-
-                    (() => {
-                        const observer = observeResize(
-                            overflowParents(this.$el).concat(this.target),
-                            update
-                        );
-                        return () => observer.disconnect();
-                    })(),
-
-                    this.autoUpdate &&
-                        on([document, ...overflowParents(this.$el)], 'scroll', update, {
-                            passive: true,
-                        }),
-
+                    listenForBackgroundClick(this),
+                    listenForEscClose(this),
+                    listenForResize(this),
+                    this.autoUpdate && listenForScroll(this),
                     !this.bgScroll && preventBackgroundScroll(this.$el),
                 ];
 
@@ -495,3 +450,60 @@ function getPositionedElements(el) {
 function getViewport(el, target) {
     return offsetViewport(overflowParents(target).find((parent) => within(el, parent)));
 }
+
+function createToggleComponent(drop) {
+    const { $el } = drop.$create('toggle', query(drop.toggle, drop.$el), {
+        target: drop.$el,
+        mode: drop.mode,
+    });
+    attr($el, 'aria-haspopup', true);
+    drop.lazyload($el);
+
+    return $el;
+}
+
+function listenForResize(drop) {
+    const update = () => drop.$emit();
+    const off = on(window, 'resize', update);
+    const observer = observeResize(overflowParents(drop.$el).concat(drop.target), update);
+    return () => {
+        observer.disconnect();
+        off();
+    };
+}
+
+function listenForScroll(drop) {
+    return on([document, ...overflowParents(drop.$el)], 'scroll', () => drop.$emit(), {
+        passive: true,
+    });
+}
+
+function listenForEscClose(drop) {
+    return on(document, 'keydown', (e) => {
+        if (e.keyCode === 27) {
+            drop.hide(false);
+        }
+    });
+}
+
+function listenForBackgroundClick(drop) {
+    return on(document, pointerDown, ({ target }) => {
+        if (!within(target, drop.$el)) {
+            once(
+                document,
+                `${pointerUp} ${pointerCancel} scroll`,
+                ({ defaultPrevented, type, target: newTarget }) => {
+                    if (
+                        !defaultPrevented &&
+                        type === pointerUp &&
+                        target === newTarget &&
+                        !(drop.targetEl && within(target, drop.targetEl))
+                    ) {
+                        drop.hide(false);
+                    }
+                },
+                true
+            );
+        }
+    });
+}

package/src/js/core/navbar.js

@@ -267,7 +267,7 @@ export default {
         },
 
         {
-            name: 'beforeshow',
+            name: 'show',
 
             el() {
                 return this.dropContainer;
@@ -287,27 +287,9 @@ export default {
                 }
 
                 addClass(target, `${this.clsDrop}-dropbar`);
-            },
-        },
-
-        {
-            name: 'show',
-
-            el() {
-                return this.dropContainer;
-            },
-
-            filter() {
-                return this.dropbar;
-            },
-
-            handler({ target }) {
-                if (!this.isDropbarDrop(target)) {
-                    return;
-                }
 
                 const drop = this.getDropdown(target);
-                this._observer = observeResize([drop.$el, ...drop.target], () => {
+                const adjustHeight = () => {
                     const targetOffsets = parents(target, `.${this.clsDrop}`)
                         .concat(target)
                         .map((el) => offset(el));
@@ -319,7 +301,9 @@ export default {
                         maxBottom - minTop + toFloat(css(target, 'marginBottom')),
                         target
                     );
-                });
+                };
+                this._observer = observeResize([drop.$el, ...drop.target], adjustHeight);
+                adjustHeight();
             },
         },
 
@@ -379,18 +363,18 @@ export default {
             return includes(this.dropdowns, active?.$el) && active;
         },
 
-        transitionTo(newHeight, el) {
+        async transitionTo(newHeight, el) {
             const { dropbar } = this;
             const oldHeight = height(dropbar);
 
             el = oldHeight < newHeight && el;
 
-            css(el, 'clipPath', `polygon(0 0,100% 0,100% ${oldHeight}px,0 ${oldHeight}px)`);
+            await Transition.cancel([el, dropbar]);
 
+            css(el, 'clipPath', `polygon(0 0,100% 0,100% ${oldHeight}px,0 ${oldHeight}px)`);
             height(dropbar, oldHeight);
 
-            Transition.cancel([el, dropbar]);
-            Promise.all([
+            await Promise.all([
                 Transition.start(dropbar, { height: newHeight }, this.duration),
                 Transition.start(
                     el,
@@ -398,10 +382,8 @@ export default {
                         clipPath: `polygon(0 0,100% 0,100% ${newHeight}px,0 ${newHeight}px)`,
                     },
                     this.duration
-                ),
-            ])
-                .catch(noop)
-                .then(() => css(el, { clipPath: '' }));
+                ).finally(() => css(el, { clipPath: '' })),
+            ]).catch(noop);
         },
 
         getDropdown(el) {

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

@@ -10,6 +10,7 @@ import {
     parent,
     position,
     Transition,
+    trigger,
 } from 'uikit-util';
 
 export default async function (action, target, duration) {
@@ -46,6 +47,10 @@ export default async function (action, target, duration) {
     nodes.forEach((el, i) => propsFrom[i] && css(el, propsFrom[i]));
     css(target, targetProps);
 
+    // Trigger update in e.g. parallax component
+    trigger(target, 'scroll');
+    fastdom.flush();
+
     // Start transitions on next frame
     await awaitFrame();
 

package/src/js/mixin/modal.js

@@ -135,70 +135,25 @@ export default {
             self: true,
 
             handler() {
-                once(
-                    this.$el,
-                    'hide',
-                    on(document, 'focusin', (e) => {
-                        if (last(active) === this && !within(e.target, this.$el)) {
-                            this.$el.focus();
-                        }
-                    })
-                );
-
-                if (this.overlay) {
-                    once(this.$el, 'hidden', preventBackgroundScroll(this.$el), { self: true });
-                }
-
                 if (this.stack) {
                     css(this.$el, 'zIndex', toFloat(css(this.$el, 'zIndex')) + active.length);
                 }
 
-                addClass(document.documentElement, this.clsPage);
+                const handlers = [
+                    this.overlay && preventBackgroundFocus(this),
+                    this.overlay && preventBackgroundScroll(this.$el),
+                    this.bgClose && listenForBackgroundClose(this),
+                    this.escClose && listenForEscClose(this),
+                ];
 
-                if (this.bgClose) {
-                    once(
-                        this.$el,
-                        'hide',
-                        on(document, pointerDown, ({ target }) => {
-                            if (
-                                last(active) !== this ||
-                                (this.overlay && !within(target, this.$el)) ||
-                                within(target, this.panel)
-                            ) {
-                                return;
-                            }
-
-                            once(
-                                document,
-                                `${pointerUp} ${pointerCancel} scroll`,
-                                ({ defaultPrevented, type, target: newTarget }) => {
-                                    if (
-                                        !defaultPrevented &&
-                                        type === pointerUp &&
-                                        target === newTarget
-                                    ) {
-                                        this.hide();
-                                    }
-                                },
-                                true
-                            );
-                        }),
-                        { self: true }
-                    );
-                }
+                once(
+                    this.$el,
+                    'hidden',
+                    () => handlers.forEach((handler) => handler && handler()),
+                    { self: true }
+                );
 
-                if (this.escClose) {
-                    once(
-                        this.$el,
-                        'hide',
-                        on(document, 'keydown', (e) => {
-                            if (e.keyCode === 27 && last(active) === this) {
-                                this.hide();
-                            }
-                        }),
-                        { self: true }
-                    );
-                }
+                addClass(document.documentElement, this.clsPage);
             },
         },
 
@@ -291,6 +246,45 @@ function toMs(time) {
     return time ? (endsWith(time, 'ms') ? toFloat(time) : toFloat(time) * 1000) : 0;
 }
 
+function preventBackgroundFocus(modal) {
+    return on(document, 'focusin', (e) => {
+        if (last(active) === modal && !within(e.target, modal.$el)) {
+            modal.$el.focus();
+        }
+    });
+}
+
+function listenForBackgroundClose(modal) {
+    return on(document, pointerDown, ({ target }) => {
+        if (
+            last(active) !== modal ||
+            (modal.overlay && !within(target, modal.$el)) ||
+            within(target, modal.panel)
+        ) {
+            return;
+        }
+
+        once(
+            document,
+            `${pointerUp} ${pointerCancel} scroll`,
+            ({ defaultPrevented, type, target: newTarget }) => {
+                if (!defaultPrevented && type === pointerUp && target === newTarget) {
+                    modal.hide();
+                }
+            },
+            true
+        );
+    });
+}
+
+function listenForEscClose(modal) {
+    return on(document, 'keydown', (e) => {
+        if (e.keyCode === 27 && last(active) === modal) {
+            modal.hide();
+        }
+    });
+}
+
 let prevented;
 export function preventBackgroundScroll(el) {
     // 'overscroll-behavior: contain' only works consistently if el overflows (Safari)

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

@@ -62,7 +62,7 @@ export default {
         },
 
         stopAutoplay() {
-            this.interval && clearInterval(this.interval);
+            clearInterval(this.interval);
         },
     },
 };