uikit 3.15.11-dev.cafcc5fd6 → 3.15.11-dev.fc8c92ba9

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.15.11-dev.cafcc5fd6",
+    "version": "3.15.11-dev.fc8c92ba9",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/js/api/state.js

@@ -108,11 +108,7 @@ export default function (UIkit) {
     };
 
     UIkit.prototype._initObservers = function () {
-        this._observers = [initPropsObserver(this)];
-
-        if (this.$options.computed) {
-            this.registerObserver(initChildListObserver(this));
-        }
+        this._observers = [initPropsObserver(this), initChildListObserver(this)];
     };
 
     UIkit.prototype.registerObserver = function (...observer) {
@@ -265,7 +261,18 @@ function normalizeData({ data = {} }, { args = [], props = {} }) {
 }
 
 function initChildListObserver(component) {
-    const { el } = component.$options;
+    let { el, computed } = component.$options;
+
+    if (!computed) {
+        return;
+    }
+
+    for (const key in computed) {
+        if (computed[key].document) {
+            el = el.ownerDocument;
+            break;
+        }
+    }
 
     const observer = new MutationObserver(() => component._callWatches());
     observer.observe(el, {

package/src/js/core/switcher.js

@@ -12,9 +12,7 @@ import {
     getIndex,
     hasClass,
     matches,
-    observeMutation,
     queryAll,
-    ready,
     toggleClass,
     toNodes,
     within,
@@ -51,23 +49,23 @@ export default {
                 if (this.swiping) {
                     css(connects, 'touchAction', 'pan-y pinch-zoom');
                 }
+            },
 
-                this._observer?.disconnect();
-                this.registerObserver(
-                    (this._observer = observeMutation(
-                        connects,
-                        (records) => {
-                            const index = this.index();
-                            for (const { target: el } of records) {
-                                children(el).forEach((child, i) =>
-                                    toggleClass(child, this.cls, i === index)
-                                );
-                                this.lazyload(this.$el, children(el));
-                            }
-                        },
-                        { childList: true }
-                    ))
-                );
+            document: true,
+            immediate: true,
+        },
+
+        connectChildren: {
+            get() {
+                return this.connects.map((el) => children(el)).flat();
+            },
+
+            watch() {
+                const index = this.index();
+                for (const el of this.connects) {
+                    children(el).forEach((child, i) => toggleClass(child, this.cls, i === index));
+                    this.lazyload(this.$el, children(el));
+                }
             },
 
             immediate: true,
@@ -99,11 +97,6 @@ export default {
         },
     },
 
-    connected() {
-        // check for connects
-        ready(() => this.$emit());
-    },
-
     events: [
         {
             name: 'click',

package/src/js/core/toggle.js

@@ -16,7 +16,6 @@ import {
     pointerEnter,
     pointerLeave,
     queryAll,
-    ready,
     trigger,
     within,
 } from 'uikit-util';
@@ -54,6 +53,7 @@ export default {
                 this.lazyload(this.$el, this.target);
             },
 
+            document: true,
             immediate: true,
         },
     },
@@ -62,9 +62,6 @@ export default {
         if (!includes(this.mode, 'media') && !isFocusable(this.$el)) {
             attr(this.$el, 'tabindex', '0');
         }
-
-        // check for target
-        ready(() => this.$emit());
     },
 
     events: [