uikit 3.13.8-dev.06ac04d2b → 3.13.8-dev.128538499

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.13.8-dev.06ac04d2b",
+    "version": "3.13.8-dev.128538499",
     "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 = { ...this._computed };
+        const values = { ...(initial ? {} : this._computed) };
         this._computed = {};
 
         for (const key in computed) {

package/src/js/core/scrollspy.js

@@ -4,11 +4,12 @@ import {
     css,
     filter,
     data as getData,
-    isInView,
+    observeIntersection,
     once,
     removeClass,
     removeClasses,
     toggleClass,
+    toPx,
     trigger,
 } from 'uikit-util';
 
@@ -45,16 +46,49 @@ export default {
                 return target ? $$(target, $el) : [$el];
             },
 
-            watch(elements) {
+            watch(elements, prev) {
                 if (this.hidden) {
                     css(filter(elements, `:not(.${this.inViewClass})`), 'visibility', 'hidden');
                 }
+
+                if (prev) {
+                    this.$reset();
+                }
             },
 
             immediate: true,
         },
     },
 
+    connected() {
+        this.registerObserver(
+            observeIntersection(
+                this.elements,
+                (records) => {
+                    for (const { target: el, isIntersecting } of records) {
+                        if (!el[stateKey]) {
+                            el[stateKey] = { cls: getData(el, 'uk-scrollspy-class') || this.cls };
+                        }
+
+                        if (!this.repeat && el[stateKey].show) {
+                            continue;
+                        }
+
+                        el[stateKey].show = isIntersecting;
+                    }
+
+                    this.$emit();
+                },
+                {
+                    rootMargin: `${toPx(this.offsetTop, 'height') - 1}px ${
+                        toPx(this.offsetLeft, 'width') - 1
+                    }px`,
+                },
+                false
+            )
+        );
+    },
+
     disconnected() {
         for (const el of this.elements) {
             removeClass(el, this.inViewClass, el[stateKey]?.cls || '');
@@ -64,24 +98,14 @@ export default {
 
     update: [
         {
-            read() {
+            write(data) {
                 for (const el of this.elements) {
-                    if (!el[stateKey]) {
-                        el[stateKey] = { cls: getData(el, 'uk-scrollspy-class') || this.cls };
-                    }
+                    const state = el[stateKey];
 
-                    if (!this.repeat && el[stateKey].show) {
+                    if (!state) {
                         continue;
                     }
 
-                    el[stateKey].show = isInView(el, this.offsetTop, this.offsetLeft);
-                }
-            },
-
-            write(data) {
-                for (const el of this.elements) {
-                    const state = el[stateKey];
-
                     if (state.show && !state.inview && !state.queued) {
                         state.queued = true;
 
@@ -99,8 +123,6 @@ export default {
                     }
                 }
             },
-
-            events: ['scroll', 'resize'],
         },
     ],
 

package/src/js/core/sticky.js

@@ -137,13 +137,13 @@ export default {
                     return false;
                 }
 
-                const hide = this.isActive && types.has('resize');
+                const hide = this.active && types.has('resize');
                 if (hide) {
                     css(this.selTarget, 'transition', '0s');
                     this.hide();
                 }
 
-                if (!this.isActive) {
+                if (!this.active) {
                     height = getOffset(this.$el).height;
                     margin = css(this.$el, 'margin');
                 }

package/src/js/mixin/media.js

@@ -20,6 +20,7 @@ export default {
 
     connected() {
         const media = toMedia(this.media);
+        this.matchMedia = true;
         if (media) {
             this.mediaObj = window.matchMedia(media);
             const handler = () => {