uikit 3.25.16 → 3.25.17-dev.20f2548

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

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/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>