uikit 3.16.27 → 3.17.1-dev.7c0766a6f

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

package/src/js/api/boot.js

@@ -25,13 +25,13 @@ function init(App) {
     }
 
     new MutationObserver((records) => records.forEach(applyChildListMutation)).observe(document, {
-        childList: true,
         subtree: true,
+        childList: true,
     });
 
     new MutationObserver((records) => records.forEach(applyAttributeMutation)).observe(document, {
-        attributes: true,
         subtree: true,
+        attributes: true,
     });
 
     App._initialized = true;

package/src/js/api/computed.js

@@ -80,7 +80,7 @@ function registerComputedObserver() {
         }
     });
     observer.observe(document, {
-        childList: true,
         subtree: true,
+        childList: true,
     });
 }

package/src/js/api/observables.js

@@ -59,10 +59,7 @@ export function viewport(options) {
 export function scroll(options) {
     return observe(
         (target, handler) => ({
-            disconnect: on(toScrollTargets(target), 'scroll', handler, {
-                passive: true,
-                capture: true,
-            }),
+            disconnect: on(toScrollTargets(target), 'scroll', handler, { passive: true }),
         }),
         options,
         'scroll',

package/src/js/components/notification.js

@@ -27,7 +27,7 @@ export default {
         message: '',
         status: '',
         timeout: 5000,
-        group: null,
+        group: '',
         pos: 'top-center',
         clsContainer: 'uk-notification',
         clsClose: 'uk-notification-close',

package/src/js/components/slideshow.js

@@ -1,10 +1,12 @@
-import { boxModelAdjust, css } from 'uikit-util';
+import { boxModelAdjust, css, inBrowser } from 'uikit-util';
 import Class from '../mixin/class';
 import SliderReactive from '../mixin/slider-reactive';
 import Slideshow from '../mixin/slideshow';
 import SliderPreload from './internal/slider-preload';
 import Animations from './internal/slideshow-animations';
 
+const supportsAspectRatio = inBrowser && CSS.supports('aspect-ratio', '1/1');
+
 export default {
     mixins: [Class, Slideshow, SliderReactive, SliderPreload],
 
@@ -24,9 +26,24 @@ export default {
         Animations,
     },
 
+    watch: {
+        list(list) {
+            if (list && supportsAspectRatio) {
+                css(list, {
+                    aspectRatio: this.ratio.replace(':', '/'),
+                    minHeight: this.minHeight || '',
+                    maxHeight: this.maxHeight || '',
+                    minWidth: '100%',
+                    maxWidth: '100%',
+                });
+            }
+        },
+    },
+
     update: {
+        // deprecated: Remove with iOS 17
         read() {
-            if (!this.list) {
+            if (!this.list || supportsAspectRatio) {
                 return false;
             }
 

package/src/js/core/cover.js

@@ -1,7 +1,17 @@
-import { css, Dimensions, parent } from 'uikit-util';
+import { attr, css, Dimensions, isTag, parent } from 'uikit-util';
 import { resize } from '../api/observables';
 import Video from './video';
 
+const coverProps = {
+    top: 0, // resets the css from [uk-cover]
+    left: 0, // resets the css from [uk-cover]
+    width: '100%',
+    height: '100%',
+    transform: 'none',
+    objectFit: 'cover',
+    objectPosition: 'center',
+};
+
 export default {
     mixins: [Video],
 
@@ -22,10 +32,29 @@ export default {
 
     observe: resize({
         target: ({ $el }) => [getPositionedParent($el) || parent($el)],
+        filter: ({ _useObjectFit }) => !_useObjectFit,
     }),
 
+    connected() {
+        this._useObjectFit = isTag(this.$el, 'img', 'video');
+
+        if (this._useObjectFit) {
+            css(this.$el, coverProps);
+        }
+    },
+
+    disconnected() {
+        if (this._useObjectFit) {
+            attr(this.$el, 'style', '');
+        }
+    },
+
     update: {
         read() {
+            if (this._useObjectFit) {
+                return;
+            }
+
             const { ratio, cover } = Dimensions;
             const { $el, width, height } = this;
 

package/src/js/core/drop.js

@@ -58,6 +58,7 @@ export default {
         clsDrop: String,
         animateOut: Boolean,
         bgScroll: Boolean,
+        closeOnScroll: Boolean,
     },
 
     data: {
@@ -79,6 +80,7 @@ export default {
         animation: ['uk-animation-fade'],
         cls: 'uk-open',
         container: false,
+        closeOnScroll: false,
     },
 
     computed: {
@@ -247,14 +249,10 @@ export default {
             self: true,
 
             handler(e, toggled) {
-                attr(this.targetEl, 'aria-expanded', toggled ? true : null);
-
-                if (!toggled) {
-                    return;
+                if (toggled) {
+                    this.clearTimers();
+                    this.position();
                 }
-
-                this.clearTimers();
-                this.position();
             },
         },
 
@@ -267,12 +265,14 @@ export default {
                 active = this;
 
                 this.tracker.init();
+                attr(this.targetEl, 'aria-expanded', true);
 
                 const handlers = [
                     listenForResize(this),
                     listenForEscClose(this),
                     listenForBackgroundClose(this),
                     this.autoUpdate && listenForScroll(this),
+                    this.closeOnScroll && listenForScrollClose(this),
                     !this.bgScroll && preventBackgroundScroll(this.$el),
                 ];
 
@@ -306,6 +306,7 @@ export default {
 
                 active = this.isActive() ? null : active;
                 this.tracker.cancel();
+                attr(this.targetEl, 'aria-expanded', null);
             },
         },
     ],
@@ -360,6 +361,7 @@ export default {
 
             this.clearTimers();
 
+            this.isDelayedHide = delay;
             this.isDelaying = getPositionedElements(this.$el).some((el) =>
                 this.tracker.movesTo(el),
             );
@@ -483,8 +485,8 @@ function listenForResize(drop) {
     return () => off.map((observer) => observer.disconnect());
 }
 
-function listenForScroll(drop) {
-    return on([document, ...overflowParents(drop.$el)], 'scroll', () => drop.$emit(), {
+function listenForScroll(drop, fn = () => drop.$emit()) {
+    return on([document, ...overflowParents(drop.$el)], 'scroll', fn, {
         passive: true,
     });
 }
@@ -497,6 +499,10 @@ function listenForEscClose(drop) {
     });
 }
 
+function listenForScrollClose(drop) {
+    return listenForScroll(drop, () => drop.hide(false));
+}
+
 function listenForBackgroundClose(drop) {
     return on(document, pointerDown, ({ target }) => {
         if (!within(target, drop.$el)) {

package/src/js/core/dropnav.js

@@ -47,6 +47,7 @@ export default {
         targetY: Boolean,
         animation: Boolean,
         animateOut: Boolean,
+        closeOnScroll: Boolean,
     },
 
     data: {
@@ -77,6 +78,10 @@ export default {
             return dropbar ? dropbar : (this._dropbar = $('<div></div>'));
         },
 
+        dropbarOffset() {
+            return 0;
+        },
+
         dropContainer(_, $el) {
             return this.container || $el;
         },
@@ -291,9 +296,16 @@ export default {
                     const minTop = Math.min(...targetOffsets.map(({ top }) => top));
                     const maxBottom = Math.max(...targetOffsets.map(({ bottom }) => bottom));
                     const dropbarOffset = offset(this.dropbar);
-                    css(this.dropbar, 'top', this.dropbar.offsetTop - (dropbarOffset.top - minTop));
+                    css(
+                        this.dropbar,
+                        'top',
+                        this.dropbar.offsetTop - (dropbarOffset.top - minTop) - this.dropbarOffset,
+                    );
                     this.transitionTo(
-                        maxBottom - minTop + toFloat(css(target, 'marginBottom')),
+                        maxBottom -
+                            minTop +
+                            toFloat(css(target, 'marginBottom')) +
+                            this.dropbarOffset,
                         target,
                     );
                 };
@@ -319,6 +331,8 @@ export default {
                 if (
                     matches(this.dropbar, ':hover') &&
                     active.$el === e.target &&
+                    includes(active.mode, 'hover') &&
+                    active.isDelayedHide &&
                     !this.items.some((el) => active.targetEl !== el && matches(el, ':focus'))
                 ) {
                     e.preventDefault();

package/src/js/core/grid.js

@@ -1,13 +1,13 @@
 import {
     addClass,
-    children,
     css,
     hasClass,
+    isRtl,
     scrolledOver,
-    sortBy,
     sumBy,
     toFloat,
     toggleClass,
+    toPx,
 } from 'uikit-util';
 import { scroll } from '../api/observables';
 import Class from '../mixin/class';
@@ -22,7 +22,10 @@ export default {
 
     props: {
         masonry: Boolean,
-        parallax: Number,
+        parallax: String,
+        parallaxStart: String,
+        parallaxEnd: String,
+        parallaxJustify: Boolean,
     },
 
     data: {
@@ -30,18 +33,21 @@ export default {
         clsStack: 'uk-grid-stack',
         masonry: false,
         parallax: 0,
+        parallaxStart: 0,
+        parallaxEnd: 0,
+        parallaxJustify: false,
     },
 
     connected() {
-        this.masonry && addClass(this.$el, 'uk-flex-top uk-flex-wrap-top');
+        this.masonry && addClass(this.$el, 'uk-flex-top', 'uk-flex-wrap-top');
     },
 
-    observe: scroll({ filter: ({ parallax }) => parallax }),
+    observe: scroll({ filter: ({ parallax, parallaxJustify }) => parallax || parallaxJustify }),
 
     update: [
         {
-            write({ columns }) {
-                toggleClass(this.$el, this.clsStack, columns.length < 2);
+            write({ rows }) {
+                toggleClass(this.$el, this.clsStack, !rows[0][1]);
             },
 
             events: ['resize'],
@@ -49,43 +55,62 @@ export default {
 
         {
             read(data) {
-                let { columns, rows } = data;
+                const { rows } = data;
+                let { masonry, parallax, parallaxJustify, margin } = this;
+
+                parallax = Math.max(0, toPx(parallax));
 
                 // Filter component makes elements positioned absolute
                 if (
-                    !columns.length ||
-                    (!this.masonry && !this.parallax) ||
-                    positionedAbsolute(this.$el)
+                    !(masonry || parallax || parallaxJustify) ||
+                    positionedAbsolute(rows) ||
+                    rows[0].some((el, i) =>
+                        rows.some((row) => row[i] && row[i].offsetWidth !== el.offsetWidth),
+                    )
                 ) {
-                    data.translates = false;
-                    return false;
+                    return (data.translates = data.scrollColumns = false);
                 }
 
-                let translates = false;
-
-                const nodes = children(this.$el);
-                const columnHeights = columns.map((column) => sumBy(column, 'offsetHeight'));
-                const margin = getMarginTop(nodes, this.margin) * (rows.length - 1);
-                const elHeight = Math.max(...columnHeights) + margin;
+                let gutter = getGutter(rows, margin);
 
-                if (this.masonry) {
-                    columns = columns.map((column) => sortBy(column, 'offsetTop'));
-                    translates = getTranslates(rows, columns);
+                let columns;
+                let translates;
+                if (masonry) {
+                    [columns, translates] = applyMasonry(rows, gutter, masonry === 'next');
+                } else {
+                    columns = transpose(rows);
                 }
 
-                let padding = Math.abs(this.parallax);
-                if (padding) {
-                    padding = columnHeights.reduce(
-                        (newPadding, hgt, i) =>
-                            Math.max(
-                                newPadding,
-                                hgt + margin + (i % 2 ? padding : padding / 8) - elHeight,
-                            ),
-                        0,
+                const columnHeights = columns.map(
+                    (column) => sumBy(column, 'offsetHeight') + gutter * (column.length - 1),
+                );
+                const height = Math.max(0, ...columnHeights);
+
+                let scrollColumns;
+                let parallaxStart;
+                let parallaxEnd;
+                if (parallax || parallaxJustify) {
+                    scrollColumns = columnHeights.map((hgt, i) =>
+                        parallaxJustify ? height - hgt + parallax : parallax / (i % 2 || 8),
                     );
+                    if (!parallaxJustify) {
+                        parallax = Math.max(
+                            ...columnHeights.map((hgt, i) => hgt + scrollColumns[i] - height),
+                        );
+                    }
+                    parallaxStart = toPx(this.parallaxStart, 'height', this.$el, true);
+                    parallaxEnd = toPx(this.parallaxEnd, 'height', this.$el, true);
                 }
 
-                return { padding, columns, translates, height: translates ? elHeight : '' };
+                return {
+                    columns,
+                    translates,
+                    scrollColumns,
+                    parallaxStart,
+                    parallaxEnd,
+                    padding: parallax,
+                    height: translates ? height : '',
+                };
             },
 
             write({ height, padding }) {
@@ -97,36 +122,33 @@ export default {
         },
 
         {
-            read() {
-                if (this.parallax && positionedAbsolute(this.$el)) {
+            read({ rows, scrollColumns, parallaxStart, parallaxEnd }) {
+                if (scrollColumns && positionedAbsolute(rows)) {
                     return false;
                 }
 
                 return {
-                    scrolled: this.parallax
-                        ? scrolledOver(this.$el) * Math.abs(this.parallax)
+                    scrolled: scrollColumns
+                        ? scrolledOver(this.$el, parallaxStart, parallaxEnd)
                         : false,
                 };
             },
 
-            write({ columns, scrolled, translates }) {
-                if (scrolled === false && !translates) {
+            write({ columns, scrolled, scrollColumns, translates }) {
+                if (!scrolled && !translates) {
                     return;
                 }
 
                 columns.forEach((column, i) =>
-                    column.forEach((el, j) =>
-                        css(
-                            el,
-                            'transform',
-                            !scrolled && !translates
-                                ? ''
-                                : `translateY(${
-                                      (translates && -translates[i][j]) +
-                                      (scrolled ? (i % 2 ? scrolled : scrolled / 8) : 0)
-                                  }px)`,
-                        ),
-                    ),
+                    column.forEach((el, j) => {
+                        let [x, y] = (translates && translates[i][j]) || [0, 0];
+
+                        if (scrolled) {
+                            y += scrolled * scrollColumns[i];
+                        }
+
+                        css(el, 'transform', `translate(${x}px, ${y}px)`);
+                    }),
                 );
             },
 
@@ -135,24 +157,57 @@ export default {
     ],
 };
 
-function positionedAbsolute(el) {
-    return children(el).some((el) => css(el, 'position') === 'absolute');
+function positionedAbsolute(rows) {
+    return rows.flat().some((el) => css(el, 'position') === 'absolute');
 }
 
-function getTranslates(rows, columns) {
-    const rowHeights = rows.map((row) => Math.max(...row.map((el) => el.offsetHeight)));
+function applyMasonry(rows, gutter, next) {
+    const columns = [];
+    const translates = [];
+    const columnHeights = Array(rows[0].length).fill(0);
+    let rowHeights = 0;
+    for (let row of rows) {
+        if (isRtl) {
+            row = row.reverse();
+        }
+
+        let height = 0;
+        for (const j in row) {
+            const { offsetWidth, offsetHeight } = row[j];
+            const index = next ? j : columnHeights.indexOf(Math.min(...columnHeights));
+            push(columns, index, row[j]);
+            push(translates, index, [
+                (index - j) * offsetWidth * (isRtl ? -1 : 1),
+                columnHeights[index] - rowHeights,
+            ]);
+            columnHeights[index] += offsetHeight + gutter;
+            height = Math.max(height, offsetHeight);
+        }
+
+        rowHeights += height + gutter;
+    }
+
+    return [columns, translates];
+}
 
-    return columns.map((elements) => {
-        let prev = 0;
-        return elements.map(
-            (element, row) =>
-                (prev += row ? rowHeights[row - 1] - elements[row - 1].offsetHeight : 0),
-        );
-    });
+function getGutter(rows, cls) {
+    const node = rows.flat().find((el) => hasClass(el, cls));
+    return toFloat(node ? css(node, 'marginTop') : css(rows[0][0], 'paddingLeft'));
 }
 
-function getMarginTop(nodes, cls) {
-    const [node] = nodes.filter((el) => hasClass(el, cls));
+function transpose(rows) {
+    const columns = [];
+    for (const row of rows) {
+        for (const i in row) {
+            push(columns, i, row[i]);
+        }
+    }
+    return columns;
+}
 
-    return toFloat(node ? css(node, 'marginTop') : css(nodes[0], 'paddingLeft'));
+function push(array, index, value) {
+    if (!array[index]) {
+        array[index] = [];
+    }
+    array[index].push(value);
 }

package/src/js/core/height-viewport.js

@@ -62,7 +62,10 @@ export default {
             } else {
                 if (this.offsetTop) {
                     if (isScrollingElement) {
-                        const top = offsetPosition(this.$el)[0] - offsetPosition(scrollElement)[0];
+                        const offsetTopEl =
+                            this.offsetTop === true ? this.$el : query(this.offsetTop, this.$el);
+                        const top =
+                            offsetPosition(offsetTopEl)[0] - offsetPosition(scrollElement)[0];
                         minHeight += top > 0 && top < viewportHeight / 2 ? ` - ${top}px` : '';
                     } else {
                         minHeight += ` - ${css(scrollElement, 'paddingTop')}`;

package/src/js/core/margin.js

@@ -1,4 +1,4 @@
-import { children, isRtl, isVisible, offsetPosition, toggleClass } from 'uikit-util';
+import { children, isRtl, isVisible, offsetPosition, toArray, toggleClass } from 'uikit-util';
 import { mutation, resize } from '../api/observables';
 
 export default {
@@ -27,19 +27,16 @@ export default {
 
     update: {
         read() {
-            const rows = getRows(this.$el.children);
-
             return {
-                rows,
-                columns: getColumns(rows),
+                rows: getRows(toArray(this.$el.children)),
             };
         },
 
-        write({ columns, rows }) {
+        write({ rows }) {
             for (const row of rows) {
-                for (const column of row) {
-                    toggleClass(column, this.margin, rows[0] !== row);
-                    toggleClass(column, this.firstColumn, columns[0].includes(column));
+                for (const el of row) {
+                    toggleClass(el, this.margin, rows[0] !== row);
+                    toggleClass(el, this.firstColumn, row[isRtl ? row.length - 1 : 0] === el);
                 }
             }
         },
@@ -48,32 +45,18 @@ export default {
     },
 };
 
-export function getRows(items) {
-    return sortBy(items, 'top', 'bottom');
-}
-
-function getColumns(rows) {
-    const columns = [];
-
-    for (const row of rows) {
-        const sorted = sortBy(row, 'left', 'right');
-        for (let j = 0; j < sorted.length; j++) {
-            columns[j] = columns[j] ? columns[j].concat(sorted[j]) : sorted[j];
-        }
-    }
-
-    return isRtl ? columns.reverse() : columns;
-}
-
-function sortBy(items, startProp, endProp) {
+export function getRows(elements) {
     const sorted = [[]];
+    const withOffset = elements.some(
+        (el, i) => i && elements[i - 1].offsetParent !== el.offsetParent,
+    );
 
-    for (const el of items) {
+    for (const el of elements) {
         if (!isVisible(el)) {
             continue;
         }
 
-        let dim = getOffset(el);
+        const offset = getOffset(el, withOffset);
 
         for (let i = sorted.length - 1; i >= 0; i--) {
             const current = sorted[i];
@@ -83,21 +66,22 @@ function sortBy(items, startProp, endProp) {
                 break;
             }
 
-            let startDim;
-            if (current[0].offsetParent === el.offsetParent) {
-                startDim = getOffset(current[0]);
-            } else {
-                dim = getOffset(el, true);
-                startDim = getOffset(current[0], true);
-            }
+            const offsetCurrent = getOffset(current[0], withOffset);
 
-            if (dim[startProp] >= startDim[endProp] - 1 && dim[startProp] !== startDim[startProp]) {
+            if (offset.top >= offsetCurrent.bottom - 1 && offset.top !== offsetCurrent.top) {
                 sorted.push([el]);
                 break;
             }
 
-            if (dim[endProp] - 1 > startDim[startProp] || dim[startProp] === startDim[startProp]) {
-                current.push(el);
+            if (offset.bottom - 1 > offsetCurrent.top || offset.top === offsetCurrent.top) {
+                let j = current.length - 1;
+                for (; j >= 0; j--) {
+                    const offsetCurrent = getOffset(current[j], withOffset);
+                    if (offset.left >= offsetCurrent.left) {
+                        break;
+                    }
+                }
+                current.splice(j + 1, 0, el);
                 break;
             }