uikit 3.25.16-dev.c408e8d → 3.25.17-dev.6dd3b35

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.16-dev.c408e8d",
+    "version": "3.25.17-dev.6dd3b35",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [
@@ -20,7 +20,7 @@
         "prefix": "node build/prefix",
         "scope": "node build/scope",
         "release": "node build/release",
-        "watch": "chokidar \"**/*.less\" --initial -i \"node_modules\" -c \"node build/less\""
+        "watch": "node build/watch.js"
     },
     "repository": {
         "type": "git",
@@ -31,26 +31,21 @@
         "url": "https://github.com/uikit/uikit/issues"
     },
     "homepage": "https://getuikit.com",
-    "packageManager": "pnpm@10.29.2",
+    "packageManager": "pnpm@10.33.0",
     "devDependencies": {
         "@eslint/js": "^10.0.1",
         "@rollup/plugin-alias": "^6.0.0",
         "archiver": "^7.0.1",
         "camelcase": "^9.0.0",
-        "chokidar-cli": "^3.0.0",
         "clean-css": "^5.3.3",
-        "date-fns": "^4.1.0",
         "esbuild": "^0.28.0",
         "eslint": "^10.0.0",
         "eslint-config-prettier": "^10.1.8",
         "execa": "^9.6.1",
-        "fs-extra": "^11.3.2",
         "glob": "^13.0.0",
         "globals": "^17.0.0",
         "inquirer": "^13.1.0",
         "less": "^4.5.1",
-        "minimist": "^1.2.8",
-        "number-precision": "^1.6.0",
         "p-limit": "^7.2.0",
         "prettier": "^3.7.4",
         "prettier-plugin-organize-imports": "^4.3.0",

package/src/js/components/filter.js

@@ -192,11 +192,19 @@ function matchFilter(
     { filter: stateFilter = { '': '' }, sort: [stateSort, stateOrder] },
 ) {
     const { filter = '', group = '', sort, order = 'asc' } = getFilter(el, attr);
+    const defaultFilterMatches = !group && filter === stateFilter[''];
+    const groupFilterMatches = group in stateFilter && filter === stateFilter[group];
+    const groupResetMatches = !filter && group && !(group in stateFilter) && !stateFilter[''];
+    const filterMatches = defaultFilterMatches || groupFilterMatches || groupResetMatches;
 
-    return isUndefined(sort)
-        ? (group in stateFilter && filter === stateFilter[group]) ||
-              (!filter && group && !(group in stateFilter) && !stateFilter[''])
-        : stateSort === sort && stateOrder === order;
+    if (isUndefined(sort)) {
+        return filterMatches;
+    }
+
+    const sortMatches = stateSort === sort && stateOrder === order;
+    const hasFilter = filter || group;
+
+    return sortMatches && (!hasFilter || filterMatches);
 }
 
 function sortItems(nodes, sort, order) {

package/src/js/components/upload.js

@@ -160,7 +160,9 @@ export default {
                         this.completeAll(xhr);
                     }
                 } catch (e) {
-                    this.error(e);
+                    if (e.name !== 'AbortError') {
+                        this.error(e);
+                    }
                 }
             };
 
@@ -206,7 +208,10 @@ async function ajax(url, options) {
         responseType: '',
         ...options,
     };
-    await env.beforeSend(env);
+    if ((await env.beforeSend(env)) === false) {
+        throw abortError(env.xhr);
+    }
+
     return send(env.url, env);
 }
 
@@ -243,7 +248,12 @@ function send(url, env) {
 
         on(xhr, 'error', () => reject(assign(Error('Network Error'), { xhr })));
         on(xhr, 'timeout', () => reject(assign(Error('Network Timeout'), { xhr })));
+        on(xhr, 'abort', () => reject(abortError(xhr)));
 
         xhr.send(env.data);
     });
 }
+
+function abortError(xhr) {
+    return assign(Error('Network Abort'), { xhr, name: 'AbortError' });
+}

package/src/js/core/drop.js

@@ -460,13 +460,14 @@ function getViewport(el, target) {
 }
 
 function createToggleComponent(drop) {
-    const { $el } = drop.$create('toggle', query(drop.toggle, drop.$el), {
-        target: drop.$el,
-        mode: drop.mode,
-    });
-    $el.ariaHasPopup = true;
+    const el = query(drop.toggle, drop.$el);
+
+    if (el) {
+        drop.$create('toggle', el, { target: drop.$el, mode: drop.mode });
+        el.ariaHasPopup = true;
+    }
 
-    return $el;
+    return el;
 }
 
 function listenForResize(drop) {

package/src/js/mixin/class.js

@@ -1,7 +1,14 @@
-import { addClass } from 'uikit-util';
+import { addClass, hasClass, removeClass } from 'uikit-util';
 
 export default {
     connected() {
+        this._cmpCls = hasClass(this.$el, this.$options.id);
         addClass(this.$el, this.$options.id);
     },
+
+    disconnected() {
+        if (!this._cmpCls) {
+            removeClass(this.$el, this.$options.id);
+        }
+    },
 };

package/src/js/mixin/modal.js

@@ -3,6 +3,7 @@ import {
     addClass,
     append,
     css,
+    dimensions,
     endsWith,
     includes,
     isFocusable,
@@ -265,9 +266,18 @@ function toMs(time) {
 
 function preventBackgroundFocus(modal) {
     return on(document, 'focusin', (e) => {
-        if (last(active) === modal && !modal.$el.contains(e.target)) {
-            modal.$el.focus();
+        if (last(active) !== modal || modal.$el.contains(e.target)) {
+            return;
+        }
+
+        const { left, top, width, height } = dimensions(e.target);
+        const topEl = document.elementFromPoint(left + width / 2, top + height / 2);
+
+        if (topEl && (e.target.contains(topEl) || topEl.contains(e.target))) {
+            return;
         }
+
+        modal.$el.focus();
     });
 }
 

package/src/js/mixin/togglable.js

@@ -51,13 +51,15 @@ export default {
 
     methods: {
         async toggleElement(targets, toggle, animate) {
-            try {
+            const CANCELLED = {};
+
+            return (
                 await Promise.all(
                     toNodes(targets).map((el) => {
                         const show = isBoolean(toggle) ? toggle : !this.isToggled(el);
 
                         if (!trigger(el, `before${show ? 'show' : 'hide'}`, [this])) {
-                            return Promise.reject();
+                            return CANCELLED;
                         }
 
                         const promise = (
@@ -90,15 +92,12 @@ export default {
                         return promise
                             ? promise.then(done, () => {
                                   removeClass(el, cls);
-                                  return Promise.reject();
+                                  return CANCELLED;
                               })
                             : done();
                     }),
-                );
-                return true;
-            } catch {
-                return false;
-            }
+                )
+            ).every((r) => r !== CANCELLED);
         },
 
         isToggled(el = this.$el) {

package/src/js/util/viewport.js

@@ -140,7 +140,7 @@ export function scrollParents(element, scrollable = false, props = []) {
     let ancestors = parents(element).reverse();
     ancestors = ancestors.slice(ancestors.indexOf(scrollEl) + 1);
 
-    const fixedIndex = findIndex(ancestors, (el) => css(el, 'position') === 'fixed');
+    const fixedIndex = findIndex(ancestors, (el) => hasPosition(el, 'fixed'));
     if (~fixedIndex) {
         ancestors = ancestors.slice(fixedIndex);
     }

package/src/less/components/slideshow.less

@@ -83,6 +83,11 @@
 
 .uk-slideshow-items > :not(.uk-active) { display: none; }
 
+/*
+ * Reset animations on hidden slides so the Ken Burns effect restarts in Safari.
+ */
+.uk-slideshow-items > :not(.uk-active) [class*="uk-animation-"] { animation-name: none; }
+
 
 // Hooks
 // ========================================================================

package/src/scss/components/slideshow.scss

@@ -85,6 +85,11 @@
 
 .uk-slideshow-items > :not(.uk-active) { display: none; }
 
+/*
+ * Reset animations on hidden slides so the Ken Burns effect restarts in Safari.
+ */
+.uk-slideshow-items > :not(.uk-active) [class*="uk-animation-"] { animation-name: none; }
+
 
 // Hooks
 // ========================================================================

package/tests/upload.html

@@ -34,9 +34,21 @@
 
             <progress id="js-progressbar" class="uk-progress" value="0" max="100" hidden></progress>
 
+            <h2>Abort After Send</h2>
+
+            <p>Select one or more files and check the console. The request aborts from <code>loadStart</code>, so <code>abort</code> should fire while <code>error</code> and <code>completeAll</code> should not.</p>
+
+            <div class="js-upload-abort" uk-form-custom>
+                <input type="file" multiple>
+                <button class="uk-button uk-button-danger" type="button" tabindex="-1">Select and abort</button>
+            </div>
+
+            <progress id="js-abort-progressbar" class="uk-progress" value="0" max="100" hidden></progress>
+
             <script>
 
                 const bar =  UIkit.util.$('#js-progressbar');
+                const abortBar = UIkit.util.$('#js-abort-progressbar');
 
                 UIkit.upload('.js-upload', {
 
@@ -96,6 +108,61 @@
 
                 });
 
+                UIkit.upload('.js-upload-abort', {
+
+                    url: '',
+                    multiple: true,
+
+                    beforeSend() {
+                        console.log('abort test beforeSend', arguments);
+                    },
+
+                    loadStart(e) {
+                        console.log('abort test loadStart', arguments);
+
+                        abortBar.hidden = false;
+                        abortBar.max = e.total;
+                        abortBar.value = e.loaded;
+
+                        e.target.abort();
+                    },
+
+                    progress(e) {
+                        console.log('abort test progress', arguments);
+
+                        abortBar.max = e.total;
+                        abortBar.value = e.loaded;
+                    },
+
+                    loadEnd(e) {
+                        console.log('abort test loadEnd', arguments);
+
+                        abortBar.max = e.total;
+                        abortBar.value = e.loaded;
+                    },
+
+                    abort() {
+                        console.log('abort test abort', arguments);
+
+                        setTimeout(() => {
+                            abortBar.hidden = true;
+                        }, 300);
+                    },
+
+                    error() {
+                        console.error('abort test error', arguments);
+                    },
+
+                    complete() {
+                        console.error('abort test complete', arguments);
+                    },
+
+                    completeAll() {
+                        console.error('abort test completeAll', arguments);
+                    }
+
+                });
+
             </script>
 
             <h2>JavaScript Options</h2>