uikit 3.10.1 → 3.11.1-dev.fbcf9eec9

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.10.1",
+  "version": "3.11.1-dev.fbcf9eec9",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [
@@ -39,10 +39,10 @@
     "@rollup/plugin-replace": "^3.0.1",
     "archiver": "^5.3.0",
     "camelcase": "^6.3.0",
-    "clean-css": "^5.2.2",
+    "clean-css": "^5.2.4",
     "dateformat": "^5.0.2",
-    "esbuild": "^0.14.11",
-    "eslint": "^8.7.0",
+    "esbuild": "^0.14.19",
+    "eslint": "^8.8.0",
     "fs-extra": "^10.0.0",
     "glob": "^7.2.0",
     "inquirer": "^8.2.0",
@@ -50,7 +50,7 @@
     "minimist": "^1.2.5",
     "number-precision": "^1.5.1",
     "p-limit": "^4.0.0",
-    "rollup": "^2.64.0",
+    "rollup": "^2.67.1",
     "rollup-plugin-esbuild": "^4.8.2",
     "rollup-plugin-html": "^0.2.1",
     "rollup-plugin-modify": "^3.0.0",

package/src/js/api/hooks.js

@@ -123,23 +123,19 @@ export default function (UIkit) {
 
     function runWatches(initial) {
 
-        const {$options: {computed}, _computeds} = this;
+        const {$options: {computed}} = this;
+        const values = assign({}, this._computeds);
+        this._computeds = {};
 
         for (const key in computed) {
-
-            const hasPrev = hasOwn(_computeds, key);
-            const prev = _computeds[key];
-
-            delete _computeds[key];
-
             const {watch, immediate} = computed[key];
             if (watch && (
                 initial && immediate
-                || hasPrev && !isEqual(prev, this[key])
+                || hasOwn(values, key) && !isEqual(values[key], this[key])
             )) {
-                watch.call(this, this[key], prev);
+                watch.call(this, this[key], values[key]);
             }
-
         }
+
     }
 }

package/src/js/components/parallax.js

@@ -1,5 +1,5 @@
 import Parallax from '../mixin/parallax';
-import {clamp, css, parent, query, scrolledOver} from 'uikit-util';
+import {css, parent, query, scrolledOver, toPx} from 'uikit-util';
 
 export default {
 
@@ -7,20 +7,35 @@ export default {
 
     props: {
         target: String,
-        viewport: Number,
-        easing: Number
+        viewport: Number, // Deprecated
+        easing: Number,
+        start: String,
+        end: String
     },
 
     data: {
         target: false,
         viewport: 1,
-        easing: 1
+        easing: 1,
+        start: 0,
+        end: 0
     },
 
     computed: {
 
         target({target}, $el) {
             return getOffsetElement(target && query(target, $el) || $el);
+        },
+
+        start({start}) {
+            return parseCalc(start, this.target);
+        },
+
+        end({end, viewport}) {
+            return parseCalc(
+                end || (viewport = (1 - viewport) * 100) && `${viewport}vh+${viewport}%`,
+                this.target
+            );
         }
 
     },
@@ -38,11 +53,11 @@ export default {
             }
 
             const prev = percent;
-            percent = ease(scrolledOver(this.target) / (this.viewport || 1), this.easing);
+            percent = ease(scrolledOver(this.target, this.start, this.end), this.easing);
 
             return {
                 percent,
-                style: prev !== percent ? this.getCss(percent) : false
+                style: prev === percent ? false : this.getCss(percent)
             };
         },
 
@@ -62,8 +77,23 @@ export default {
 
 };
 
+const calcRe = /-?\d+(?:\.\d+)?(?:v[wh]|%|px)?/g;
+function parseCalc(calc, el) {
+    let match;
+    let result = 0;
+    calc = calc.toString().replace(/\s/g, '');
+    calcRe.lastIndex = 0;
+    while ((match = calcRe.exec(calc)) !== null) {
+        result += toPx(match, 'height', el, true);
+    }
+
+    return result;
+}
+
 function ease(percent, easing) {
-    return clamp(percent * (1 - (easing - easing * percent)));
+    return easing >= 0
+        ? Math.pow(percent, easing + 1)
+        : 1 - Math.pow(1 - percent, -easing + 1);
 }
 
 // SVG elements do not inherit from HTMLElement
@@ -72,5 +102,5 @@ function getOffsetElement(el) {
         ? 'offsetTop' in el
             ? el
             : getOffsetElement(parent(el))
-        : document.body;
+        : document.documentElement;
 }

package/src/js/core/grid.js

@@ -1,6 +1,6 @@
 import Margin from './margin';
 import Class from '../mixin/class';
-import {addClass, children, css, height as getHeight, hasClass, scrolledOver, sortBy, toFloat, toggleClass} from 'uikit-util';
+import {addClass, children, css, hasClass, scrolledOver, sortBy, toFloat, toggleClass} from 'uikit-util';
 
 export default {
 
@@ -94,7 +94,7 @@ export default {
 
                 return {
                     scrolled: this.parallax
-                        ? scrolledOver(this.$el, height ? height - getHeight(this.$el) : 0) * Math.abs(this.parallax)
+                        ? scrolledOver(this.$el) * Math.abs(this.parallax)
                         : false
                 };
             },

package/src/js/core/scrollspy.js

@@ -16,7 +16,7 @@ export default {
     },
 
     data: () => ({
-        cls: false,
+        cls: '',
         target: false,
         hidden: true,
         offsetTop: 0,

package/src/js/core/svg.js

@@ -57,15 +57,17 @@ export default {
     disconnected() {
 
         this.svg.then(svg => {
-            if (!this._connected) {
-
-                if (isVoidElement(this.$el)) {
-                    this.$el.hidden = false;
-                }
+            if (this._connected) {
+                return;
+            }
 
-                remove(svg);
-                this.svgEl = null;
+            if (isVoidElement(this.$el)) {
+                this.$el.hidden = false;
             }
+
+            remove(svg);
+            this.svgEl = null;
+
         });
 
         this.svg = null;