uikit 3.15.11-dev.08224920a → 3.15.11-dev.536b75ef2

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.08224920a",
+    "version": "3.15.11-dev.536b75ef2",
     "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/components/lightbox.js

@@ -50,7 +50,7 @@ export default {
 
             this.panel = this.panel || this.$create('lightboxPanel', { ...this.$props, items });
 
-            on(this.panel.$el, 'hidden', () => (this.panel = false));
+            on(this.panel.$el, 'hidden', () => (this.panel = null));
 
             return this.panel.show(index);
         },

package/src/js/components/tooltip.js

@@ -51,7 +51,10 @@ export default {
 
     disconnected() {
         this.hide();
-        attr(this.$el, 'title', this._hasTitle ? this.title : null);
+
+        if (!attr(this.$el, 'title')) {
+            attr(this.$el, 'title', this._hasTitle ? this.title : null);
+        }
     },
 
     methods: {

package/src/js/core/drop.js

@@ -429,7 +429,7 @@ export default {
             // Ensure none positioned element does not generate scrollbars
             this.$el.hidden = true;
 
-            const viewports = this.target.map((target) => offsetViewport(scrollParents(target)[0]));
+            const viewports = this.target.map((target) => getViewport(this.$el, target));
             const viewportOffset = this.getViewportOffset(this.$el);
 
             const dirs = [
@@ -494,3 +494,7 @@ function getPositionedElements(el) {
     apply(el, (el) => css(el, 'position') !== 'static' && result.push(el));
     return result;
 }
+
+function getViewport(el, target) {
+    return offsetViewport(scrollParents(target).find((parent) => within(el, parent)));
+}

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: [

package/src/js/util/position.js

@@ -1,3 +1,4 @@
+import { within } from './filter';
 import { offset } from './dimensions';
 import { clamp, isArray, ucfirst } from './lang';
 import { offsetViewport, scrollParents } from './viewport';
@@ -32,7 +33,7 @@ function getPosition(element, target, options) {
 
     let offsetPosition = position;
     for (const [i, [prop, , start, end]] of Object.entries(dirs)) {
-        const viewport = getViewport(target[i], viewportOffset, boundary, i);
+        const viewport = getViewport(element, target[i], viewportOffset, boundary, i);
 
         if (isWithin(position, viewport, i)) {
             continue;
@@ -52,7 +53,7 @@ function getPosition(element, target, options) {
 
             offsetBy = flip(element, target, options, i)[start] - position[start];
 
-            const scrollArea = getScrollArea(target[i], viewportOffset, i);
+            const scrollArea = getScrollArea(element, target[i], viewportOffset, i);
 
             if (!isWithin(applyOffset(position, offsetBy, i), scrollArea, i)) {
                 if (isWithin(position, scrollArea, i)) {
@@ -132,8 +133,8 @@ function moveBy(attach, end, dim) {
     return attach === 'center' ? dim / 2 : attach === end ? dim : 0;
 }
 
-function getViewport(element, viewportOffset, boundary, i) {
-    let viewport = getIntersectionArea(...scrollParents(element).map(offsetViewport));
+function getViewport(element, target, viewportOffset, boundary, i) {
+    let viewport = getIntersectionArea(...commonScrollParents(element, target).map(offsetViewport));
 
     if (viewportOffset) {
         viewport[dirs[i][2]] += viewportOffset;
@@ -150,15 +151,19 @@ function getViewport(element, viewportOffset, boundary, i) {
     return viewport;
 }
 
-function getScrollArea(element, viewportOffset, i) {
+function getScrollArea(element, target, viewportOffset, i) {
     const [prop, , start, end] = dirs[i];
-    const [scrollElement] = scrollParents(element);
+    const [scrollElement] = commonScrollParents(element, target);
     const viewport = offsetViewport(scrollElement);
     viewport[start] -= scrollElement[`scroll${ucfirst(start)}`] - viewportOffset;
     viewport[end] = viewport[start] + scrollElement[`scroll${ucfirst(prop)}`] - viewportOffset;
     return viewport;
 }
 
+function commonScrollParents(element, target) {
+    return scrollParents(target).filter((parent) => within(element, parent));
+}
+
 function getIntersectionArea(...rects) {
     let area = {};
     for (const rect of rects) {