uikit 3.14.0 → 3.14.1-dev.c39bbab1a

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.14.0",
+    "version": "3.14.1-dev.c39bbab1a",
     "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 = { ...(initial ? {} : this._computed) };
+        const values = { ...this._computed };
         this._computed = {};
 
         for (const key in computed) {

package/src/js/components/filter.js

@@ -194,7 +194,7 @@ function matchFilter(
 }
 
 function isEqualList(listA, listB) {
-    return listA.length === listB.length && listA.every((el) => ~listB.indexOf(el));
+    return listA.length === listB.length && listA.every((el) => listB.includes(el));
 }
 
 function getSelector({ filter }) {

package/src/js/core/accordion.js

@@ -28,7 +28,6 @@ export default {
         multiple: Boolean,
         toggle: String,
         content: String,
-        transition: String,
         offset: Number,
     },
 
@@ -41,19 +40,16 @@ export default {
         clsOpen: 'uk-open',
         toggle: '> .uk-accordion-title',
         content: '> .uk-accordion-content',
-        transition: 'ease',
         offset: 0,
     },
 
     computed: {
         items: {
             get({ targets }, $el) {
-                return $$(targets, $el).filter((el) => $(this.content, el));
+                return $$(targets, $el);
             },
 
             watch(items, prev) {
-                items.forEach((el) => hide($(this.content, el), !hasClass(el, this.clsOpen)));
-
                 if (prev || hasClass(items, this.clsOpen)) {
                     return;
                 }
@@ -73,6 +69,26 @@ export default {
         toggles({ toggle }) {
             return this.items.map((item) => $(toggle, item));
         },
+
+        contents: {
+            get({ content }) {
+                return this.items.map((item) => $(content, item));
+            },
+
+            watch(items) {
+                for (const el of items) {
+                    hide(
+                        el,
+                        !hasClass(
+                            this.items.find((item) => item.contains(el)),
+                            this.clsOpen
+                        )
+                    );
+                }
+            },
+
+            immediate: true,
+        },
     },
 
     connected() {

package/src/js/core/margin.js

@@ -47,7 +47,7 @@ export default {
             for (const row of rows) {
                 for (const column of row) {
                     toggleClass(column, this.margin, rows[0] !== row);
-                    toggleClass(column, this.firstColumn, !!~columns[0].indexOf(column));
+                    toggleClass(column, this.firstColumn, columns[0].includes(column));
                 }
             }
         },

package/src/js/core/scrollspy.js

@@ -4,6 +4,7 @@ import {
     css,
     filter,
     data as getData,
+    isEqual,
     observeIntersection,
     once,
     removeClass,
@@ -50,7 +51,7 @@ export default {
                     css(filter(elements, `:not(.${this.inViewClass})`), 'visibility', 'hidden');
                 }
 
-                if (prev) {
+                if (!isEqual(elements, prev)) {
                     this.$reset();
                 }
             },

package/src/js/mixin/parallax.js

@@ -333,7 +333,7 @@ function getValue(stops, percent) {
     return isNumber(start) ? start + Math.abs(start - end) * p * (start < end ? 1 : -1) : +end;
 }
 
-const unitRe = /^-?\d+([^\s]*)/;
+const unitRe = /^-?\d+(\S*)/;
 function getUnit(stops, defaultUnit) {
     for (const stop of stops) {
         const match = stop.match?.(unitRe);

package/src/js/mixin/position.js

@@ -60,7 +60,7 @@ export default {
                 attach,
                 offset,
                 boundary,
-                viewportPadding: this.viewportPadding,
+                viewportPadding: this.boundaryAlign ? 0 : this.viewportPadding,
                 flip: this.flip,
             });
         },

package/src/js/mixin/togglable.js

@@ -24,6 +24,7 @@ export default {
         cls: Boolean,
         animation: 'list',
         duration: Number,
+        velocity: Number,
         origin: String,
         transition: String,
     },
@@ -32,8 +33,9 @@ export default {
         cls: false,
         animation: [false],
         duration: 200,
+        velocity: 0.2,
         origin: false,
-        transition: 'linear',
+        transition: 'ease',
         clsEnter: 'uk-togglabe-enter',
         clsLeave: 'uk-togglabe-leave',
 
@@ -44,6 +46,7 @@ export default {
             paddingBottom: '',
             marginTop: '',
             marginBottom: '',
+            boxShadow: '',
         },
 
         hideProps: {
@@ -53,6 +56,7 @@ export default {
             paddingBottom: 0,
             marginTop: 0,
             marginBottom: 0,
+            boxShadow: 'none',
         },
     },
 
@@ -147,7 +151,15 @@ export default {
     },
 };
 
-export function toggleHeight({ isToggled, duration, initProps, hideProps, transition, _toggle }) {
+export function toggleHeight({
+    isToggled,
+    duration,
+    velocity,
+    initProps,
+    hideProps,
+    transition,
+    _toggle,
+}) {
     return (el, show) => {
         const inProgress = Transition.inProgress(el);
         const inner = el.hasChildNodes()
@@ -168,6 +180,8 @@ export function toggleHeight({ isToggled, duration, initProps, hideProps, transi
         fastdom.flush();
 
         const endHeight = height(el) + (inProgress ? 0 : inner);
+        duration = velocity * el.offsetHeight + duration;
+
         height(el, currentHeight);
 
         return (

package/tests/notification.html

@@ -107,7 +107,7 @@
                             <td><code>timeout</code></td>
                             <td>Number</td>
                             <td>5000</td>
-                            <td>Visibility duration before a notification disappears.</td>
+                            <td>Visibility duration before a notification disappears. If set to `0`, notification will not hide automatically.</td>
                         </tr>
                         <tr>
                             <td><code>group</code></td>