uikit 3.25.29-dev.7b0f736 → 3.25.29-dev.f3e1c53

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.25.29-dev.7b0f736",
+    "version": "3.25.29-dev.f3e1c53",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/js/core/alert.js

@@ -9,12 +9,11 @@ export default {
     args: 'animation',
 
     props: {
-        animation: Boolean,
         close: String,
     },
 
     data: {
-        animation: true,
+        animation: [true],
         selClose: '.uk-alert-close',
         duration: 150,
     },
@@ -32,7 +31,11 @@ export default {
 
     methods: {
         async close() {
-            await this.toggleElement(this.$el, false, this.animation ? animate : false);
+            await this.toggleElement(
+                this.$el,
+                false,
+                this.animation[0] === true || this.animation[0] === 1 ? animate : true,
+            );
             this.$destroy(true);
         },
     },

package/src/js/core/dropnav.js

@@ -210,7 +210,7 @@ export default {
                             elements,
                             findIndex(elements, (el) => matches(el, ':focus')),
                         )
-                    ].focus();
+                    ]?.focus();
                     return;
                 }
 

package/src/js/core/grid.js

@@ -132,7 +132,7 @@ export default {
             },
 
             write({ columns, scrolled, scrollColumns, translates }) {
-                if (!scrolled && !translates) {
+                if (scrolled === false && !translates) {
                     return;
                 }
 

package/src/js/core/icon.js

@@ -140,17 +140,9 @@ export const Search = {
                 ? 'search-medium'
                 : this.$props.icon;
 
-        if (hasAttr(this.$el, 'aria-label')) {
-            return;
-        }
-
-        if (isToggle) {
-            this.$el.ariaLabel = this.t('toggle');
-        } else {
-            const button = this.$el.closest('a,button');
-            if (button) {
-                button.ariaLabel = this.t('submit');
-            }
+        const target = isToggle ? this.$el : this.$el.closest('a,button');
+        if (target && !hasAttr(target, 'aria-label')) {
+            target.ariaLabel = this.t(isToggle ? 'toggle' : 'submit');
         }
     },
 };
@@ -259,7 +251,9 @@ function install(UIkit) {
         if (UIkit._initialized) {
             apply(document.body, (el) =>
                 each(UIkit.getComponents(el), (cmp) => {
-                    cmp.$options.isIcon && cmp.icon in added && cmp.$reset();
+                    cmp.$options.isIcon &&
+                        (aliases[cmp.icon] || cmp.icon) in added &&
+                        cmp.$reset();
                 }),
             );
         }

package/src/js/core/img.js

@@ -7,7 +7,6 @@ import {
     data,
     escape,
     fragment,
-    includes,
     isArray,
     isEmpty,
     isTag,
@@ -88,8 +87,9 @@ function setSrcAttrs(el, src) {
         const elements = isTag(parentNode, 'picture') ? children(parentNode) : [el];
         elements.forEach((el) => setSourceProps(el, el));
     } else if (src) {
-        if (!includes(el.style.backgroundImage, src)) {
-            css(el, 'backgroundImage', `url(${escape(src)})`);
+        const previousBackground = el.style.backgroundImage;
+        css(el, 'backgroundImage', `url(${escape(src)})`);
+        if (el.style.backgroundImage !== previousBackground) {
             trigger(el, createEvent('load', false));
         }
     }

package/src/js/core/inverse.js

@@ -64,6 +64,7 @@ export default {
                     [...toNodes(target), document.documentElement],
                     handler,
                 );
+                const transitionObserver = observeResize([], handler);
                 const listener = [
                     on(document, 'scroll itemshown itemhidden', handler, {
                         passive: true,
@@ -71,11 +72,11 @@ export default {
                     }),
                     on(document, 'show hide transitionstart', (e) => {
                         handler();
-                        return observer.observe(e.target);
+                        return transitionObserver.observe(e.target);
                     }),
                     on(document, 'shown hidden transitionend transitioncancel', (e) => {
                         handler();
-                        return observer.unobserve(e.target);
+                        return transitionObserver.unobserve(e.target);
                     }),
                 ];
 
@@ -84,6 +85,7 @@ export default {
                     unobserve: observer.unobserve.bind(observer),
                     disconnect() {
                         observer.disconnect();
+                        transitionObserver.disconnect();
                         listener.forEach((off) => off());
                     },
                 };

package/src/js/core/margin.js

@@ -85,7 +85,7 @@ export function getRows(elements) {
             const offsetCurrent = getOffset(current[0], withOffset);
 
             if (offset.top >= offsetCurrent.bottom - 1 && offset.top !== offsetCurrent.top) {
-                sorted.push([el]);
+                sorted.splice(i + 1, 0, [el]);
                 break;
             }
 

package/src/js/core/modal.js

@@ -164,7 +164,7 @@ function install({ modal }) {
 
         return assign(
             new Promise((resolve) => {
-                const off = on(dialog.$el, 'hide', () => resolve(hideFn()));
+                const off = on(dialog.$el, 'hide', () => resolve(hideFn()), { self: true });
 
                 on(dialog.$el, 'submit', 'form', (e) => {
                     e.preventDefault();

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

@@ -5,8 +5,10 @@ import {
     getEventPos,
     hasClass,
     isInput,
+    isRtl,
     isTouch,
     on,
+    once,
     pointerCancel,
     pointerDown,
     pointerMove,
@@ -73,7 +75,9 @@ export default {
 
                 if (!overflow[i - 1]) {
                     const dir = i ? 'Top' : 'Left';
-                    const percent = overflow[i] ? this.$el[`scroll${dir}`] / overflow[i] : 0;
+                    // The horizontal mask runs left to right, even in RTL.
+                    const position = this.$el[`scroll${dir}`] + (!i && isRtl ? overflow[i] : 0);
+                    const percent = overflow[i] ? position / overflow[i] : 0;
 
                     const toValue = (value) =>
                         overflow[i] ? clamp((this.fadeDuration - value) / this.fadeDuration) : 1;
@@ -110,7 +114,7 @@ function handleMouseDrag(e) {
     let started;
 
     const off = on(document, pointerMove, move(e), pointerOptions);
-    on(document, [pointerUp, pointerCancel], end, { capture: true, once: true });
+    once(document, [pointerUp, pointerCancel], end, true);
 
     function move(e) {
         let origin = getEventPos(e);

package/src/js/core/switcher.js

@@ -108,6 +108,7 @@ export default {
 
             handler(e) {
                 if (
+                    !e.defaultPrevented &&
                     !matches(e.current, selDisabled) &&
                     (e.type === 'click' || e.keyCode === keyMap.SPACE)
                 ) {

package/src/js/mixin/event.js

@@ -3,7 +3,10 @@ import { on, once } from '../util/event';
 import { keyMap } from '../util/keys';
 
 export function maybeDefaultPreventClick(e) {
-    if (e.target.closest('a[href="#"],a[href=""]')) {
+    if (
+        (e.type === 'keydown' && e.keyCode === keyMap.SPACE) ||
+        e.target.closest('a[href="#"],a[href=""]')
+    ) {
         e.preventDefault();
     }
 }

package/src/js/util/lang.js

@@ -211,44 +211,19 @@ export function pointInRect(point, rect) {
     );
 }
 
-function ratio(dimensions, prop, value) {
-    const aProp = prop === 'width' ? 'height' : 'width';
+function cover(dimensions, maxDimensions) {
+    const scale = Math.max(
+        dimensions.width ? maxDimensions.width / dimensions.width : 0,
+        dimensions.height ? maxDimensions.height / dimensions.height : 0,
+    );
 
     return {
-        [aProp]: dimensions[prop]
-            ? Math.round((value * dimensions[aProp]) / dimensions[prop])
-            : dimensions[aProp],
-        [prop]: value,
+        width: Math.round(dimensions.width * scale),
+        height: Math.round(dimensions.height * scale),
     };
 }
 
-function contain(dimensions, maxDimensions) {
-    dimensions = { ...dimensions };
-
-    for (const prop in dimensions) {
-        dimensions =
-            dimensions[prop] > maxDimensions[prop]
-                ? ratio(dimensions, prop, maxDimensions[prop])
-                : dimensions;
-    }
-
-    return dimensions;
-}
-
-function cover(dimensions, maxDimensions) {
-    dimensions = contain(dimensions, maxDimensions);
-
-    for (const prop in dimensions) {
-        dimensions =
-            dimensions[prop] < maxDimensions[prop]
-                ? ratio(dimensions, prop, maxDimensions[prop])
-                : dimensions;
-    }
-
-    return dimensions;
-}
-
-export const Dimensions = { ratio, contain, cover };
+export const Dimensions = { cover };
 
 export function getIndex(i, elements, current = 0, finite = false) {
     elements = toNodes(elements);

package/src/js/util/scroll.js

@@ -1,6 +1,6 @@
 import { css, getEventPos, matches, on, once, resetProps, scrollParents, width } from 'uikit-util';
 
-let prevented;
+let scrollLocks = 0;
 export function preventBackgroundScroll(el) {
     // 'overscroll-behavior: contain' only works consistently if el overflows (Safari)
     const off = on(
@@ -44,21 +44,26 @@ export function preventBackgroundScroll(el) {
         { passive: true },
     );
 
-    if (prevented) {
-        return off;
-    }
-    prevented = true;
-
     const { scrollingElement } = document;
     const props = {
         overflowY: CSS.supports('overflow', 'clip') ? 'clip' : 'hidden',
         touchAction: 'none',
         scrollbarGutter: width(window) - scrollingElement.clientWidth ? 'stable' : '',
     };
-    css(scrollingElement, props);
+
+    if (!scrollLocks++) {
+        css(scrollingElement, props);
+    }
+
+    let released = false;
     return () => {
-        prevented = false;
+        if (released) {
+            return;
+        }
+        released = true;
         off();
-        resetProps(scrollingElement, props);
+        if (!--scrollLocks) {
+            resetProps(scrollingElement, props);
+        }
     };
 }

package/tests/alert.html

@@ -98,9 +98,9 @@
                     <tbody>
                         <tr>
                             <td><code>animation</code></td>
-                            <td>Boolean</td>
+                            <td>Boolean, String</td>
                             <td>true</td>
-                            <td>On close fade out.</td>
+                            <td>On close fade out. Set to false to disable animation or specify an animation class.</td>
                         </tr>
                         <tr>
                             <td><code>duration</code></td>

package/tests/overflow-fade.test.mjs

@@ -0,0 +1,69 @@
+import assert from 'node:assert/strict';
+import { readFile } from 'node:fs/promises';
+import test from 'node:test';
+import vm from 'node:vm';
+
+const source = await readFile(new URL('../src/js/core/overflow-fade.js', import.meta.url), 'utf8');
+function loadComponent(direction) {
+    return vm.runInNewContext(
+        source.replace(/^import[\s\S]*?from '[^']+';\s*/gm, '').replace('export default', 'component ='),
+        {
+            clamp: (value) => Math.min(1, Math.max(0, value)),
+            isRtl: direction === 'rtl',
+            css: (el, value) => (typeof value === 'string' ? el[value] : Object.assign(el.style, value)),
+            mutation: () => ({}),
+            resize: () => ({}),
+            toggleClass: () => {},
+            pointerDown: 'pointerdown',
+        },
+    );
+}
+
+function getOpacities(direction, scrollLeft, scrollTop = 0, horizontal = 200, vertical = 0) {
+    const component = loadComponent(direction);
+    const context = {
+        $el: {
+            direction,
+            scrollLeft,
+            scrollTop,
+            scrollWidth: 100 + horizontal,
+            clientWidth: 100,
+            scrollHeight: 100 + vertical,
+            clientHeight: 100,
+            style: {},
+        },
+        $options: { id: 'uk-overflow-fade' },
+        ...component.data,
+    };
+    component.update.write.call(context, component.update.read.call(context));
+    return [
+        context.$el.style['--uk-overflow-fade-start-opacity'],
+        context.$el.style['--uk-overflow-fade-end-opacity'],
+    ];
+}
+
+test('RTL horizontal fades follow physical left and right edges', () => {
+    assert.deepEqual(getOpacities('rtl', 0), [0, 1]);
+    assert.deepEqual(getOpacities('rtl', -100), [0, 0]);
+    assert.deepEqual(getOpacities('rtl', -200), [1, 0]);
+});
+
+test('LTR horizontal fades are unchanged', () => {
+    assert.deepEqual(getOpacities('ltr', 0), [1, 0]);
+    assert.deepEqual(getOpacities('ltr', 100), [0, 0]);
+    assert.deepEqual(getOpacities('ltr', 200), [0, 1]);
+});
+
+test('vertical fades are independent of direction', () => {
+    for (const direction of ['ltr', 'rtl']) {
+        assert.deepEqual(getOpacities(direction, 0, 0, 0, 200), [1, 0]);
+        assert.deepEqual(getOpacities(direction, 0, 100, 0, 200), [0, 0]);
+        assert.deepEqual(getOpacities(direction, 0, 200, 0, 200), [0, 1]);
+    }
+});
+
+test('elements without overflow remain opaque', () => {
+    for (const direction of ['ltr', 'rtl']) {
+        assert.deepEqual(getOpacities(direction, 0, 0, 0), [1, 1]);
+    }
+});