uikit 3.25.28 → 3.25.29-dev.3bc1304

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

package/src/js/api/component.js

@@ -21,7 +21,7 @@ export function component(name, options) {
 
     App[name] = (element, data) => createComponent(name, element, data);
 
-    const opt = options.options ?? { ...options };
+    const opt = options.options || { ...options };
 
     opt.id = id;
     opt.name = name;

package/src/js/api/computed.js

@@ -74,7 +74,7 @@ export function initComputedUpdates(instance) {
 }
 
 function resetComputed(instance) {
-    const values = { ...instance._computed };
+    const values = instance._computed;
     instance._computed = {};
     return values;
 }

package/src/js/api/log.js

@@ -5,6 +5,6 @@ export function log(instance, eventName, eventData) {
         instance._uid,
         'font-weight:bold;',
         eventName,
-        [...(eventData ?? []), instance, instance.$el],
+        [...(eventData || []), instance, instance.$el],
     );
 }

package/src/js/api/observables.js

@@ -83,13 +83,14 @@ export function swipe(options) {
             const pos = getEventPos(e);
             const target = 'tagName' in e.target ? e.target : parent(e.target);
             once(document, `${pointerUp} ${pointerCancel} scroll`, (e) => {
+                if (e.type !== pointerUp || !target) {
+                    return;
+                }
+
                 const { x, y } = getEventPos(e);
 
                 // swipe
-                if (
-                    (e.type !== 'scroll' && target && x && Math.abs(pos.x - x) > 100) ||
-                    (y && Math.abs(pos.y - y) > 100)
-                ) {
+                if ((x && Math.abs(pos.x - x) > 100) || (y && Math.abs(pos.y - y) > 100)) {
                     setTimeout(() => {
                         trigger(target, 'swipe');
                         trigger(target, `swipe${swipeDirection(pos.x, pos.y, x, y)}`);

package/src/js/api/observer.js

@@ -3,19 +3,18 @@ import { registerComputed } from './computed';
 import { registerWatch } from './watch';
 
 export function initObservers(instance) {
-    for (const observer of instance.$options.observe || []) {
-        registerObservable(instance, observer);
+    for (const [index, observer] of (instance.$options.observe || []).entries()) {
+        registerObservable(instance, observer, `_observe${index}`);
     }
 }
 
-function registerObservable(instance, observable) {
+function registerObservable(instance, observable, key) {
     let { observe, target = instance.$el, handler, options, filter, args } = observable;
 
     if (filter && !filter.call(instance, instance)) {
         return;
     }
 
-    const key = `_observe${instance._disconnect.length}`;
     if (isFunction(target) && !hasOwn(instance, key)) {
         registerComputed(instance, key, () => {
             const targets = target.call(instance, instance);

package/src/js/api/update.js

@@ -20,24 +20,25 @@ export function callUpdate(instance, e = 'update') {
         return;
     }
 
-    if (!instance._updateCount) {
-        instance._updateCount = 0;
-        requestAnimationFrame(() => (instance._updateCount = 0));
-    }
-
     if (!instance._queued) {
         instance._queued = new Set();
         fastdom.read(() => {
             if (instance._connected) {
-                runUpdates(instance, instance._queued);
+                if (!instance._updateCount) {
+                    instance._updateCount = 0;
+                    requestAnimationFrame(() => (instance._updateCount = 0));
+                }
+
+                if (instance._updateCount < 10) {
+                    instance._updateCount++;
+                    runUpdates(instance, instance._queued);
+                }
             }
             instance._queued = null;
         });
     }
 
-    if (instance._updateCount++ < 20) {
-        instance._queued.add(e.type || e);
-    }
+    instance._queued.add(e.type || e);
 }
 
 function runUpdates(instance, types) {

package/src/js/components/upload.js

@@ -171,7 +171,7 @@ export default {
 function match(pattern, path) {
     const expression = pattern.replace(
         /\*\*|[.*+?^${}()|[\]\\]/g,
-        (s) => ({ '**': '.*', '*': '[^/]+', '?': '[^/]', '|': '|' })[s] ?? `\\${s}`,
+        (s) => ({ '**': '.*', '*': '[^/]+', '?': '[^/]', '|': '|' })[s] || `\\${s}`,
     );
 
     return new RegExp(`^(?:${expression})$`, 'i').test(path);

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/drop.js

@@ -114,11 +114,11 @@ export default {
         this._style = pick(this.$el.style, ['width', 'height']);
     },
 
+    beforeDisconnect() {
+        this.hide(false, false);
+    },
+
     disconnected() {
-        if (this.isActive()) {
-            this.hide(false);
-            active = null;
-        }
         css(this.$el, this._style);
     },
 

package/src/js/core/form-custom.js

@@ -1,4 +1,4 @@
-import { $, $$, isInput, matches, parent, selInput } from 'uikit-util';
+import { $, isInput, parent, selInput } from 'uikit-util';
 import Class from '../mixin/class';
 
 export default {
@@ -37,15 +37,10 @@ export default {
             return;
         }
 
-        let option;
         const prop = isInput(target) ? 'value' : 'textContent';
         const prev = target[prop];
-        const value = input.files?.[0]
-            ? input.files[0].name
-            : matches(input, 'select') &&
-                (option = $$('option', input).find((el) => el.selected))
-              ? option.textContent
-              : input.value;
+        const value =
+            input.files?.[0]?.name ?? input.selectedOptions?.[0]?.label ?? input.value;
 
         if (prev !== value) {
             target[prop] = value;

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');
         }
     },
 };

package/src/js/core/toggle.js

@@ -177,8 +177,6 @@ export default {
 
             filter: ({ mode }) => includes(mode, 'media'),
 
-            el: ({ target }) => target,
-
             handler(e, mediaObj) {
                 if (mediaObj.matches ^ this.isToggled(this.target)) {
                     this.toggle();

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/mixin/modal.js

@@ -239,7 +239,7 @@ function animate(el, show, { transitionElement, _toggle }) {
             _toggle(el, show);
 
             Promise.all(
-                (transitionElement?.getAnimations?.() ?? []).map(({ finished }) => finished),
+                (transitionElement?.getAnimations?.() || []).map(({ finished }) => finished),
             ).then(resolve, reject);
         }),
     ).then(() => {

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>