uikit 3.12.3-dev.6377276f3 → 3.12.3-dev.cbf065cc2

package/src/js/mixin/position.js

@@ -24,18 +24,10 @@ export default {
         clsPos: '',
     },
 
-    computed: {
-        pos({ pos }) {
-            return pos.split('-').concat('center').slice(0, 2);
-        },
-
-        dir() {
-            return this.pos[0];
-        },
-
-        align() {
-            return this.pos[1];
-        },
+    connected() {
+        this.pos = this.$props.pos.split('-').concat('center').slice(0, 2);
+        this.dir = this.pos[0];
+        this.align = this.pos[1];
     },
 
     methods: {
@@ -44,6 +36,8 @@ export default {
 
             let { offset } = this;
             const axis = this.getAxis();
+            const dir = this.pos[0];
+            const align = this.pos[1];
 
             if (!isNumeric(offset)) {
                 const node = $(offset);
@@ -56,13 +50,11 @@ export default {
             const { x, y } = positionAt(
                 element,
                 target,
+                axis === 'x' ? `${flipPosition(dir)} ${align}` : `${align} ${flipPosition(dir)}`,
+                axis === 'x' ? `${dir} ${align}` : `${align} ${dir}`,
                 axis === 'x'
-                    ? `${flipPosition(this.dir)} ${this.align}`
-                    : `${this.align} ${flipPosition(this.dir)}`,
-                axis === 'x' ? `${this.dir} ${this.align}` : `${this.align} ${this.dir}`,
-                axis === 'x'
-                    ? `${this.dir === 'left' ? -offset : offset}`
-                    : ` ${this.dir === 'top' ? -offset : offset}`,
+                    ? `${dir === 'left' ? -offset : offset}`
+                    : ` ${dir === 'top' ? -offset : offset}`,
                 null,
                 this.flip,
                 boundary

package/src/js/mixin/resize.js

@@ -0,0 +1,13 @@
+import { observeResize } from 'uikit-util';
+
+export default {
+    computed: {
+        resizeTargets() {
+            return this.$el;
+        },
+    },
+
+    connected() {
+        this.registerObserver(observeResize(this.resizeTargets, () => this.$emit('resize')));
+    },
+};

package/src/js/mixin/scroll.js

@@ -0,0 +1,32 @@
+import { on } from 'uikit-util';
+
+export default {
+    connected() {
+        registerScrollListener(this._uid, () => this.$emit('scroll'));
+    },
+
+    disconnected() {
+        unregisterScrollListener(this._uid);
+    },
+};
+
+const scrollListeners = new Map();
+let unbindScrollListener;
+function registerScrollListener(id, listener) {
+    unbindScrollListener =
+        unbindScrollListener ||
+        on(window, 'scroll', () => scrollListeners.forEach((listener) => listener()), {
+            passive: true,
+            capture: true,
+        });
+
+    scrollListeners.set(id, listener);
+}
+
+function unregisterScrollListener(id) {
+    scrollListeners.delete(id);
+    if (unbindScrollListener && !scrollListeners.size) {
+        unbindScrollListener();
+        unbindScrollListener = null;
+    }
+}

package/src/js/mixin/slider.js

@@ -1,3 +1,4 @@
+import Resize from './resize';
 import SliderAutoplay from './slider-autoplay';
 import SliderDrag from './slider-drag';
 import SliderNav from './slider-nav';
@@ -15,7 +16,7 @@ import {
 } from 'uikit-util';
 
 export default {
-    mixins: [SliderAutoplay, SliderDrag, SliderNav],
+    mixins: [SliderAutoplay, SliderDrag, SliderNav, Resize],
 
     props: {
         clsActivated: Boolean,

package/src/js/util/class.js

@@ -20,12 +20,7 @@ export function replaceClass(element, ...args) {
 
 export function hasClass(element, cls) {
     [cls] = getClasses(cls);
-    for (const node of toNodes(element)) {
-        if (cls && node.classList.contains(cls)) {
-            return true;
-        }
-    }
-    return false;
+    return !!cls && toNodes(element).some((node) => node.classList.contains(cls));
 }
 
 export function toggleClass(element, cls, force) {

package/src/js/util/observer.js

@@ -1,33 +1,70 @@
+import { on } from './event';
 import { toNodes } from './lang';
+import { fastdom } from './fastdom';
 
-// Old chromium based browsers (UC Browser) did not implement `isIntersecting`
-export const hasIntersectionObserver =
-    window.IntersectionObserver && 'isIntersecting' in IntersectionObserverEntry.prototype;
 export function observeIntersection(targets, cb, options, intersecting = true) {
-    if (!hasIntersectionObserver) {
-        return;
-    }
-
-    const observer = new IntersectionObserver((entries, observer) => {
-        if (!intersecting || entries.some((entry) => entry.isIntersecting)) {
-            cb(entries, observer);
-        }
-    }, options);
-    for (const el of toNodes(targets)) {
-        observer.observe(el);
-    }
-    return observer;
+    return observe(
+        IntersectionObserver,
+        targets,
+        intersecting
+            ? (entries, observer) => {
+                  if (entries.some((entry) => entry.isIntersecting)) {
+                      cb(entries, observer);
+                  }
+              }
+            : cb,
+        options
+    );
 }
 
 const hasResizeObserver = window.ResizeObserver;
 export function observeResize(targets, cb, options = { box: 'border-box' }) {
-    if (!hasResizeObserver) {
+    if (hasResizeObserver) {
+        return observe(ResizeObserver, targets, cb, options);
+    }
+
+    // Fallback Safari < 13.1
+    initResizeListener();
+    listeners.add(cb);
+
+    return {
+        disconnect() {
+            listeners.delete(cb);
+        },
+    };
+}
+
+let listeners;
+function initResizeListener() {
+    if (listeners) {
         return;
     }
 
-    const observer = new ResizeObserver((entries, observer) => {
-        cb(entries, observer);
-    });
+    listeners = new Set();
+
+    // throttle 'resize'
+    let pendingResize;
+    const handleResize = () => {
+        if (pendingResize) {
+            return;
+        }
+        pendingResize = true;
+        fastdom.read(() => (pendingResize = false));
+        for (const listener of listeners) {
+            listener();
+        }
+    };
+
+    on(window, 'load resize', handleResize);
+    on(document, 'loadedmetadata load', handleResize, true);
+}
+
+export function observeMutation(targets, cb, options) {
+    return observe(MutationObserver, targets, cb, options);
+}
+
+function observe(Observer, targets, cb, options) {
+    const observer = new Observer(cb);
     for (const el of toNodes(targets)) {
         observer.observe(el, options);
     }

package/tests/js/index.js

@@ -1,4 +1,4 @@
-/* global UIkit, TESTS */
+/* global TESTS */
 import { addClass, css, fastdom, on, prepend, removeClass, ucfirst } from 'uikit-util';
 
 const tests = TESTS;