uikit 3.14.1-dev.dadc910c0 → 3.14.1-dev.e15dd286c

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.1-dev.dadc910c0",
+    "version": "3.14.1-dev.e15dd286c",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

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

@@ -45,13 +45,13 @@ export default {
                 return target ? $$(target, $el) : [$el];
             },
 
-            watch(elements, prev) {
+            watch(elements) {
                 if (this.hidden) {
                     css(filter(elements, `:not(.${this.inViewClass})`), 'visibility', 'hidden');
                 }
 
-                if (prev) {
-                    this.$reset();
+                for (const element of elements) {
+                    this._observer.observe(element);
                 }
             },
 
@@ -61,9 +61,10 @@ export default {
 
     connected() {
         this._data.elements = new Map();
+
         this.registerObserver(
-            observeIntersection(
-                this.elements,
+            (this._observer = observeIntersection(
+                [],
                 (records) => {
                     const elements = this._data.elements;
                     for (const { target: el, isIntersecting } of records) {
@@ -89,7 +90,7 @@ export default {
                     }px`,
                 },
                 false
-            )
+            ))
         );
     },
 
@@ -97,6 +98,8 @@ export default {
         for (const [el, state] of this._data.elements.entries()) {
             removeClass(el, this.inViewClass, state?.cls || '');
         }
+
+        this._observer = null;
     },
 
     update: [

package/src/js/mixin/parallax.js

@@ -79,39 +79,39 @@ export default {
     },
 };
 
-function transformFn(prop, el, steps) {
-    let unit = getUnit(steps) || { x: 'px', y: 'px', rotate: 'deg' }[prop] || '';
+function transformFn(prop, el, stops) {
+    let unit = getUnit(stops) || { x: 'px', y: 'px', rotate: 'deg' }[prop] || '';
     let transformFn;
 
     if (prop === 'x' || prop === 'y') {
         prop = `translate${ucfirst(prop)}`;
-        transformFn = (step) => toFloat(toFloat(step).toFixed(unit === 'px' ? 0 : 6));
+        transformFn = (stop) => toFloat(toFloat(stop).toFixed(unit === 'px' ? 0 : 6));
     } else if (prop === 'scale') {
         unit = '';
-        transformFn = (step) =>
-            getUnit([step]) ? toPx(step, 'width', el, true) / el.offsetWidth : step;
+        transformFn = (stop) =>
+            getUnit([stop]) ? toPx(stop, 'width', el, true) / el.offsetWidth : stop;
     }
 
-    if (steps.length === 1) {
-        steps.unshift(prop === 'scale' ? 1 : 0);
+    if (stops.length === 1) {
+        stops.unshift(prop === 'scale' ? 1 : 0);
     }
 
-    steps = parseSteps(steps, transformFn);
+    stops = parseStops(stops, transformFn);
 
     return (css, percent) => {
-        css.transform += ` ${prop}(${getValue(steps, percent)}${unit})`;
+        css.transform += ` ${prop}(${getValue(stops, percent)}${unit})`;
     };
 }
 
-function colorFn(prop, el, steps) {
-    if (steps.length === 1) {
-        steps.unshift(getCssValue(el, prop, ''));
+function colorFn(prop, el, stops) {
+    if (stops.length === 1) {
+        stops.unshift(getCssValue(el, prop, ''));
     }
 
-    steps = parseSteps(steps, (step) => parseColor(el, step));
+    stops = parseStops(stops, (stop) => parseColor(el, stop));
 
     return (css, percent) => {
-        const [start, end, p] = getStep(steps, percent);
+        const [start, end, p] = getStop(stops, percent);
         const value = start
             .map((value, i) => {
                 value += p * (end[i] - value);
@@ -131,80 +131,80 @@ function parseColor(el, color) {
         .map(toFloat);
 }
 
-function filterFn(prop, el, steps) {
-    if (steps.length === 1) {
-        steps.unshift(0);
+function filterFn(prop, el, stops) {
+    if (stops.length === 1) {
+        stops.unshift(0);
     }
 
-    const unit = getUnit(steps) || { blur: 'px', hue: 'deg' }[prop] || '%';
+    const unit = getUnit(stops) || { blur: 'px', hue: 'deg' }[prop] || '%';
     prop = { fopacity: 'opacity', hue: 'hue-rotate' }[prop] || prop;
-    steps = parseSteps(steps);
+    stops = parseStops(stops);
 
     return (css, percent) => {
-        const value = getValue(steps, percent);
+        const value = getValue(stops, percent);
         css.filter += ` ${prop}(${value + unit})`;
     };
 }
 
-function cssPropFn(prop, el, steps) {
-    if (steps.length === 1) {
-        steps.unshift(getCssValue(el, prop, ''));
+function cssPropFn(prop, el, stops) {
+    if (stops.length === 1) {
+        stops.unshift(getCssValue(el, prop, ''));
     }
 
-    steps = parseSteps(steps);
+    stops = parseStops(stops);
 
     return (css, percent) => {
-        css[prop] = getValue(steps, percent);
+        css[prop] = getValue(stops, percent);
     };
 }
 
-function strokeFn(prop, el, steps) {
-    if (steps.length === 1) {
-        steps.unshift(0);
+function strokeFn(prop, el, stops) {
+    if (stops.length === 1) {
+        stops.unshift(0);
     }
 
-    const unit = getUnit(steps);
+    const unit = getUnit(stops);
     const length = getMaxPathLength(el);
-    steps = parseSteps(steps.reverse(), (step) => {
-        step = toFloat(step);
-        return unit === '%' ? (step * length) / 100 : step;
+    stops = parseStops(stops.reverse(), (stop) => {
+        stop = toFloat(stop);
+        return unit === '%' ? (stop * length) / 100 : stop;
     });
 
-    if (!steps.some(([value]) => value)) {
+    if (!stops.some(([value]) => value)) {
         return noop;
     }
 
     css(el, 'strokeDasharray', length);
 
     return (css, percent) => {
-        css.strokeDashoffset = getValue(steps, percent);
+        css.strokeDashoffset = getValue(stops, percent);
     };
 }
 
-function backgroundFn(prop, el, steps) {
-    if (steps.length === 1) {
-        steps.unshift(0);
+function backgroundFn(prop, el, stops) {
+    if (stops.length === 1) {
+        stops.unshift(0);
     }
 
     prop = prop.substr(-1);
     const attr = prop === 'y' ? 'height' : 'width';
-    steps = parseSteps(steps, (step) => toPx(step, attr, el));
+    stops = parseStops(stops, (stop) => toPx(stop, attr, el));
 
     const bgPos = getCssValue(el, `background-position-${prop}`, '');
 
     return getCssValue(el, 'backgroundSize', '') === 'cover'
-        ? backgroundCoverFn(prop, el, steps, bgPos, attr)
-        : setBackgroundPosFn(prop, steps, bgPos);
+        ? backgroundCoverFn(prop, el, stops, bgPos, attr)
+        : setBackgroundPosFn(prop, stops, bgPos);
 }
 
-function backgroundCoverFn(prop, el, steps, bgPos, attr) {
+function backgroundCoverFn(prop, el, stops, bgPos, attr) {
     const dimImage = getBackgroundImageDimensions(el);
 
     if (!dimImage.width) {
         return noop;
     }
 
-    const values = steps.map(([value]) => value);
+    const values = stops.map(([value]) => value);
     const min = Math.min(...values);
     const max = Math.max(...values);
     const down = values.indexOf(min) < values.indexOf(max);
@@ -232,7 +232,7 @@ function backgroundCoverFn(prop, el, steps, bgPos, attr) {
 
     const dim = Dimensions.cover(dimImage, dimEl);
 
-    const fn = setBackgroundPosFn(prop, steps, `${pos}px`);
+    const fn = setBackgroundPosFn(prop, stops, `${pos}px`);
     return (css, percent) => {
         fn(css, percent);
         css.backgroundSize = `${dim.width}px ${dim.height}px`;
@@ -240,9 +240,9 @@ function backgroundCoverFn(prop, el, steps, bgPos, attr) {
     };
 }
 
-function setBackgroundPosFn(prop, steps, pos) {
+function setBackgroundPosFn(prop, stops, pos) {
     return function (css, percent) {
-        css[`background-position-${prop}`] = `calc(${pos} + ${getValue(steps, percent)}px)`;
+        css[`background-position-${prop}`] = `calc(${pos} + ${getValue(stops, percent)}px)`;
     };
 }
 
@@ -277,12 +277,12 @@ function toDimensions(image) {
     };
 }
 
-function parseSteps(steps, fn = toFloat) {
+function parseStops(stops, fn = toFloat) {
     const result = [];
-    const { length } = steps;
+    const { length } = stops;
     let nullIndex = 0;
     for (let i = 0; i < length; i++) {
-        let [value, percent] = isString(steps[i]) ? steps[i].trim().split(' ') : [steps[i]];
+        let [value, percent] = isString(stops[i]) ? stops[i].trim().split(' ') : [stops[i]];
         value = fn(value);
         percent = percent ? toFloat(percent) / 100 : null;
 
@@ -319,24 +319,24 @@ function parseSteps(steps, fn = toFloat) {
     return result;
 }
 
-function getStep(steps, percent) {
-    const index = findIndex(steps.slice(1), ([, targetPercent]) => percent <= targetPercent) + 1;
+function getStop(stops, percent) {
+    const index = findIndex(stops.slice(1), ([, targetPercent]) => percent <= targetPercent) + 1;
     return [
-        steps[index - 1][0],
-        steps[index][0],
-        (percent - steps[index - 1][1]) / (steps[index][1] - steps[index - 1][1]),
+        stops[index - 1][0],
+        stops[index][0],
+        (percent - stops[index - 1][1]) / (stops[index][1] - stops[index - 1][1]),
     ];
 }
 
-function getValue(steps, percent) {
-    const [start, end, p] = getStep(steps, percent);
+function getValue(stops, percent) {
+    const [start, end, p] = getStop(stops, percent);
     return isNumber(start) ? start + Math.abs(start - end) * p * (start < end ? 1 : -1) : +end;
 }
 
-const unitRe = /^-?\d+([^\s]*)/;
-function getUnit(steps, defaultUnit) {
-    for (const step of steps) {
-        const match = step.match?.(unitRe);
+const unitRe = /^-?\d+(\S*)/;
+function getUnit(stops, defaultUnit) {
+    for (const stop of stops) {
+        const match = stop.match?.(unitRe);
         if (match) {
             return match[1];
         }

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

package/tests/parallax.html

@@ -35,27 +35,27 @@
                     </div>
                 </div>
 
-                <h2>Start and End Steps</h2>
+                <h2>Start and End Stops</h2>
 
-                <div id="test-start-end-steps" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');" uk-parallax="bgy: -200">
+                <div id="test-start-end-stops" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');" uk-parallax="bgy: -200">
                     <div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">
                         <h1 uk-parallax="opacity: 0,1; y: -200,0; scale: 2,1;">Headline</h1>
                         <p uk-parallax="opacity: 0,1; y: 200,0; scale: 0,1;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                     </div>
                 </div>
 
-                <h2>Multiple Steps</h2>
+                <h2>Multiple Stops</h2>
 
-                <div id="test-multiple-steps" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');" uk-parallax="bgx: 0,200,0,200">
+                <div id="test-multiple-stops" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');" uk-parallax="bgx: 0,200,0,200">
                     <div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">
                         <h1 uk-parallax="x: -200,200,-200,200; scale: 2,1,2,1;">Headline</h1>
                         <p uk-parallax="x: 200,-200,200,-200; scale: 1,0,1,0,1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                     </div>
                 </div>
 
-                <h2>Step Positions</h2>
+                <h2>Stop Positions</h2>
 
-                <div id="test-step-positions" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');" uk-parallax="bgx: 0,50 50%, 200">
+                <div id="test-stop-positions" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');" uk-parallax="bgx: 0,50 50%, 200">
                     <div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">
                         <h1 uk-parallax="x: -200,200 20%,-200 80%,200; scale: 1,1 50%,2;">Headline</h1>
                         <p uk-parallax="x: 200,-200 20%,200 80%,-200; scale: 1,1 50%,2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
@@ -190,7 +190,7 @@
 
                 <h2>Animated properties</h2>
 
-                <p>You can define multiple animation steps by using a comma separated list of values. (e.g. x: 0,50,150). A step can be defined by a value and a position. If you don't specify the position of a step, it is placed halfway between the one that precedes it and the one that follows it.</p>
+                <p>You can define multiple animation stops by using a comma separated list of values. (e.g. x: 0,50,150). A stop can be defined by a value and a position. If you don't specify the position of a stop, it is placed halfway between the one that precedes it and the one that follows it.</p>
 
                 <div class="uk-overflow-auto">
                     <table class="uk-table uk-table-striped">