uikit 3.13.8-dev.f030a8b39 → 3.13.9

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

package/src/js/api/hooks.js

@@ -105,7 +105,7 @@ export default function (UIkit) {
         const {
             $options: { computed },
         } = this;
-        const values = { ...this._computed };
+        const values = { ...(initial ? {} : this._computed) };
         this._computed = {};
 
         for (const key in computed) {

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

@@ -215,7 +215,10 @@ export default {
                 };
 
                 // Image
-                if (type === 'image' || src.match(/\.(avif|jpe?g|a?png|gif|svg|webp)($|\?)/i)) {
+                if (
+                    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 }));

package/src/js/components/tooltip.js

@@ -6,11 +6,9 @@ import {
     attr,
     flipPosition,
     hasAttr,
-    includes,
     isFocusable,
     isTouch,
     matches,
-    offset,
     on,
     once,
     pointerDown,
@@ -106,12 +104,10 @@ export default {
 
                 this.positionAt(this.tooltip, this.$el);
 
-                const [dir, align] = getAlignment(this.tooltip, this.$el, this.pos);
-
                 this.origin =
-                    this.axis === 'y'
-                        ? `${flipPosition(dir)}-${align}`
-                        : `${align}-${flipPosition(dir)}`;
+                    this.getAxis() === 'y'
+                        ? `${flipPosition(this.dir)}-${this.align}`
+                        : `${this.align}-${flipPosition(this.dir)}`;
             });
 
             this.toggleElement(this.tooltip, true);
@@ -147,34 +143,3 @@ function makeFocusable(el) {
         attr(el, 'tabindex', '0');
     }
 }
-
-function getAlignment(el, target, [dir, align]) {
-    const elOffset = offset(el);
-    const targetOffset = offset(target);
-    const properties = [
-        ['left', 'right'],
-        ['top', 'bottom'],
-    ];
-
-    for (const props of properties) {
-        if (elOffset[props[0]] >= targetOffset[props[1]]) {
-            dir = props[1];
-            break;
-        }
-        if (elOffset[props[1]] <= targetOffset[props[0]]) {
-            dir = props[0];
-            break;
-        }
-    }
-
-    const props = includes(properties[0], dir) ? properties[1] : properties[0];
-    if (elOffset[props[0]] === targetOffset[props[0]]) {
-        align = props[0];
-    } else if (elOffset[props[1]] === targetOffset[props[1]]) {
-        align = props[1];
-    } else {
-        align = 'center';
-    }
-
-    return [dir, align];
-}

package/src/js/core/accordion.js

@@ -48,7 +48,7 @@ export default {
     computed: {
         items: {
             get({ targets }, $el) {
-                return $$(targets, $el);
+                return $$(targets, $el).filter((el) => $(this.content, el));
             },
 
             watch(items, prev) {

package/src/js/core/drop.js

@@ -242,7 +242,13 @@ export default {
                             this.hide(false);
                         }
                     }),
-                    on(window, 'resize', () => this.$emit('resize')),
+                    on(window, 'resize', () => this.$emit()),
+                    on(
+                        document,
+                        'scroll',
+                        ({ target }) => target.contains(this.$el) && this.$emit(),
+                        true
+                    ),
                 ]) {
                     once(this.$el, 'hide', handler, { self: true });
                 }
@@ -283,8 +289,6 @@ export default {
                 this.position();
             }
         },
-
-        events: ['resize'],
     },
 
     methods: {
@@ -362,18 +366,17 @@ export default {
             const boundaryOffset = offset(boundary);
             const targetOffset = offset(this.target);
             const alignTo = this.boundaryAlign ? boundaryOffset : targetOffset;
-            const prop = this.axis === 'y' ? 'width' : 'height';
-
-            css(this.$el, `max-${prop}`, '');
 
             if (this.pos[1] === 'justify') {
+                const prop = this.getAxis() === 'y' ? 'width' : 'height';
                 css(this.$el, prop, alignTo[prop]);
-            } else if (this.$el.offsetWidth > boundaryOffset.width) {
+            } else if (
+                this.$el.offsetWidth >
+                Math.max(boundaryOffset.right - alignTo.left, alignTo.right - boundaryOffset.left)
+            ) {
                 addClass(this.$el, `${this.clsDrop}-stack`);
             }
 
-            css(this.$el, `max-${prop}`, boundaryOffset[prop]);
-
             this.positionAt(this.$el, this.boundaryAlign ? boundary : this.target, boundary);
         },
     },

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

@@ -1,6 +1,6 @@
 import Resize from '../mixin/resize';
 import { getRows } from './margin';
-import { $$, boxModelAdjust, css, dimensions, isVisible, toFloat } from 'uikit-util';
+import { $$, boxModelAdjust, css, dimensions, isVisible } from 'uikit-util';
 
 export default {
     mixins: [Resize],
@@ -15,7 +15,6 @@ export default {
     data: {
         target: '> *',
         row: true,
-        forceHeight: true,
     },
 
     computed: {
@@ -31,7 +30,7 @@ export default {
     },
 
     resizeTargets() {
-        return this.elements;
+        return [this.$el, this.elements];
     },
 
     update: {
@@ -56,22 +55,14 @@ function match(elements) {
         return { heights: [''], elements };
     }
 
+    css(elements, 'minHeight', '');
     let heights = elements.map(getHeight);
-    let max = Math.max(...heights);
-    const hasMinHeight = elements.some((el) => el.style.minHeight);
-    const hasShrunk = elements.some((el, i) => !el.style.minHeight && heights[i] < max);
-
-    if (hasMinHeight && hasShrunk) {
-        css(elements, 'minHeight', '');
-        heights = elements.map(getHeight);
-        max = Math.max(...heights);
-    }
-
-    heights = elements.map((el, i) =>
-        heights[i] === max && toFloat(el.style.minHeight).toFixed(2) !== max.toFixed(2) ? '' : max
-    );
+    const max = Math.max(...heights);
 
-    return { heights, elements };
+    return {
+        heights: elements.map((el, i) => (heights[i].toFixed(2) === max.toFixed(2) ? '' : max)),
+        elements,
+    };
 }
 
 function getHeight(element) {

package/src/js/core/margin.js

@@ -15,7 +15,7 @@ export default {
     },
 
     resizeTargets() {
-        return this.$el.children;
+        return [this.$el, this.$el.children];
     },
 
     connected() {

package/src/js/core/navbar.js

@@ -61,8 +61,6 @@ export default {
         dropbar: false,
         dropbarAnchor: false,
         duration: 200,
-        forceHeight: true,
-        selMinHeight: navItem,
         container: false,
     },
 
@@ -299,7 +297,7 @@ export default {
                 return this.dropbar;
             },
 
-            handler(_, { $el, pos: [dir] = [] }) {
+            handler(_, { $el, dir }) {
                 if (!hasClass($el, this.clsDrop)) {
                     return;
                 }

package/src/js/core/scrollspy.js

@@ -4,15 +4,15 @@ import {
     css,
     filter,
     data as getData,
-    isInView,
+    observeIntersection,
     once,
     removeClass,
     removeClasses,
     toggleClass,
+    toPx,
     trigger,
 } from 'uikit-util';
 
-const stateKey = '_ukScrollspy';
 export default {
     mixins: [Scroll],
 
@@ -45,43 +45,64 @@ export default {
                 return target ? $$(target, $el) : [$el];
             },
 
-            watch(elements) {
+            watch(elements, prev) {
                 if (this.hidden) {
                     css(filter(elements, `:not(.${this.inViewClass})`), 'visibility', 'hidden');
                 }
+
+                if (prev) {
+                    this.$reset();
+                }
             },
 
             immediate: true,
         },
     },
 
+    connected() {
+        this._data.elements = new Map();
+        this.registerObserver(
+            observeIntersection(
+                this.elements,
+                (records) => {
+                    const elements = this._data.elements;
+                    for (const { target: el, isIntersecting } of records) {
+                        if (!elements.has(el)) {
+                            elements.set(el, {
+                                cls: getData(el, 'uk-scrollspy-class') || this.cls,
+                            });
+                        }
+
+                        const state = elements.get(el);
+                        if (!this.repeat && state.show) {
+                            continue;
+                        }
+
+                        state.show = isIntersecting;
+                    }
+
+                    this.$emit();
+                },
+                {
+                    rootMargin: `${toPx(this.offsetTop, 'height') - 1}px ${
+                        toPx(this.offsetLeft, 'width') - 1
+                    }px`,
+                },
+                false
+            )
+        );
+    },
+
     disconnected() {
-        for (const el of this.elements) {
-            removeClass(el, this.inViewClass, el[stateKey]?.cls || '');
-            delete el[stateKey];
+        for (const [el, state] of this._data.elements.entries()) {
+            removeClass(el, this.inViewClass, state?.cls || '');
         }
     },
 
     update: [
         {
-            read() {
-                for (const el of this.elements) {
-                    if (!el[stateKey]) {
-                        el[stateKey] = { cls: getData(el, 'uk-scrollspy-class') || this.cls };
-                    }
-
-                    if (!this.repeat && el[stateKey].show) {
-                        continue;
-                    }
-
-                    el[stateKey].show = isInView(el, this.offsetTop, this.offsetLeft);
-                }
-            },
-
             write(data) {
-                for (const el of this.elements) {
-                    const state = el[stateKey];
-
+                for (const [el, state] of data.elements.entries()) {
                     if (state.show && !state.inview && !state.queued) {
                         state.queued = true;
 
@@ -99,14 +120,12 @@ export default {
                     }
                 }
             },
-
-            events: ['scroll', 'resize'],
         },
     ],
 
     methods: {
         toggle(el, inview) {
-            const state = el[stateKey];
+            const state = this._data.elements.get(el);
 
             state.off?.();
 

package/src/js/core/sticky.js

@@ -137,13 +137,13 @@ export default {
                     return false;
                 }
 
-                const hide = this.isActive && types.has('resize');
+                const hide = this.active && types.has('resize');
                 if (hide) {
                     css(this.selTarget, 'transition', '0s');
                     this.hide();
                 }
 
-                if (!this.isActive) {
+                if (!this.active) {
                     height = getOffset(this.$el).height;
                     margin = css(this.$el, 'margin');
                 }

package/src/js/core/toggle.js

@@ -124,7 +124,7 @@ export default {
                 }
 
                 // Skip if state does not change e.g. hover + focus received
-                if (this._showState && show === (expanded !== this._showState)) {
+                if (this._showState && show && expanded !== this._showState) {
                     // Ensure reset if state has changed through click
                     if (!show) {
                         this._showState = null;

package/src/js/mixin/position.js

@@ -3,7 +3,6 @@ import {
     flipPosition,
     getCssVar,
     offset as getOffset,
-    includes,
     isNumeric,
     isRtl,
     positionAt,
@@ -25,42 +24,45 @@ export default {
 
     connected() {
         this.pos = this.$props.pos.split('-').concat('center').slice(0, 2);
-        this.axis = includes(['top', 'bottom'], this.pos[0]) ? 'y' : 'x';
+        this.dir = this.pos[0];
+        this.align = this.pos[1];
     },
 
     methods: {
         positionAt(element, target, boundary) {
-            const [dir, align] = this.pos;
+            const axis = this.getAxis();
+            const dir = this.pos[0];
+            const align = this.pos[1];
 
             let { offset } = this;
             if (!isNumeric(offset)) {
                 const node = $(offset);
                 offset = node
-                    ? getOffset(node)[this.axis === 'x' ? 'left' : 'top'] -
-                      getOffset(target)[this.axis === 'x' ? 'right' : 'bottom']
+                    ? getOffset(node)[axis === 'x' ? 'left' : 'top'] -
+                      getOffset(target)[axis === 'x' ? 'right' : 'bottom']
                     : 0;
             }
             offset = toPx(offset) + toPx(getCssVar('position-offset', element));
-            offset = [includes(['left', 'top'], dir) ? -offset : +offset, 0];
 
-            const attach = {
-                element: [flipPosition(dir), align],
-                target: [dir, align],
-            };
+            const { x, y } = positionAt(
+                element,
+                target,
+                axis === 'x' ? `${flipPosition(dir)} ${align}` : `${align} ${flipPosition(dir)}`,
+                axis === 'x' ? `${dir} ${align}` : `${align} ${dir}`,
+                axis === 'x'
+                    ? `${dir === 'left' ? -offset : offset}`
+                    : ` ${dir === 'top' ? -offset : offset}`,
+                null,
+                this.flip,
+                boundary
+            ).target;
 
-            if (this.axis === 'y') {
-                for (const prop in attach) {
-                    attach[prop] = attach[prop].reverse();
-                }
-                offset = offset.reverse();
-            }
+            this.dir = axis === 'x' ? x : y;
+            this.align = axis === 'x' ? y : x;
+        },
 
-            positionAt(element, target, {
-                attach,
-                offset,
-                boundary,
-                flip: this.flip,
-            });
+        getAxis() {
+            return this.dir === 'top' || this.dir === 'bottom' ? 'y' : 'x';
         },
     },
 };