uikit 3.16.4-dev.fd2458e3b → 3.16.5-dev.dda1f1b31

package/src/js/components/tooltip.js

@@ -20,7 +20,8 @@ import {
     remove,
     within,
 } from 'uikit-util';
-import { generateId, keyMap } from '../mixin/utils';
+import { keyMap } from '../util/keys';
+import { generateId } from '../api/instance';
 
 export default {
     mixins: [Container, Togglable, Position],

package/src/js/core/accordion.js

@@ -1,7 +1,8 @@
 import Class from '../mixin/class';
-import Lazyload from '../mixin/lazyload';
 import Togglable from '../mixin/togglable';
-import { generateId, keyMap } from '../mixin/utils';
+import { keyMap } from '../util/keys';
+import { generateId } from '../api/instance';
+import { lazyload } from '../api/observables';
 import {
     $,
     $$,
@@ -25,7 +26,7 @@ import {
 } from 'uikit-util';
 
 export default {
-    mixins: [Class, Lazyload, Togglable],
+    mixins: [Class, Togglable],
 
     props: {
         animation: Boolean,
@@ -109,9 +110,7 @@ export default {
         },
     },
 
-    connected() {
-        this.lazyload();
-    },
+    observe: lazyload(),
 
     events: [
         {

package/src/js/core/cover.js

@@ -1,9 +1,9 @@
+import { resize } from '../api/observables';
 import Video from './video';
 import { css, Dimensions, parent } from 'uikit-util';
-import Resize from '../mixin/resize';
 
 export default {
-    mixins: [Resize, Video],
+    mixins: [Video],
 
     props: {
         width: Number,
@@ -20,9 +20,9 @@ export default {
         },
     },
 
-    resizeTargets() {
-        return [this.$el, getPositionedParent(this.$el) || parent(this.$el)];
-    },
+    observe: resize({
+        target: ({ $el }) => [$el, getPositionedParent($el) || parent($el)],
+    }),
 
     update: {
         read() {
@@ -31,16 +31,16 @@ export default {
 
             let dim = { width, height };
 
-            if (!dim.width || !dim.height) {
+            if (!width || !height) {
                 const intrinsic = {
                     width: $el.naturalWidth || $el.videoWidth || $el.clientWidth,
                     height: $el.naturalHeight || $el.videoHeight || $el.clientHeight,
                 };
 
-                if (dim.width) {
-                    dim = ratio(intrinsic, 'width', dim.width);
+                if (width) {
+                    dim = ratio(intrinsic, 'width', width);
                 } else if (height) {
-                    dim = ratio(intrinsic, 'height', dim.height);
+                    dim = ratio(intrinsic, 'height', height);
                 } else {
                     dim = intrinsic;
                 }

package/src/js/core/drop.js

@@ -1,7 +1,9 @@
-import Container from '../mixin/container';
-import Lazyload from '../mixin/lazyload';
+import { lazyload } from '../api/observables';
 import Position from '../mixin/position';
+import Container from '../mixin/container';
 import Togglable from '../mixin/togglable';
+import { keyMap } from '../util/keys';
+import { preventBackgroundScroll } from '../util/scroll';
 import {
     addClass,
     append,
@@ -10,6 +12,7 @@ import {
     css,
     hasClass,
     includes,
+    isSameSiteAnchor,
     isTouch,
     matches,
     MouseTracker,
@@ -20,6 +23,7 @@ import {
     once,
     overflowParents,
     parent,
+    pick,
     pointerCancel,
     pointerDown,
     pointerEnter,
@@ -29,12 +33,11 @@ import {
     removeClass,
     within,
 } from 'uikit-util';
-import { isSameSiteAnchor, keyMap, preventBackgroundScroll } from '../mixin/utils';
 
 export let active;
 
 export default {
-    mixins: [Container, Lazyload, Position, Togglable],
+    mixins: [Container, Position, Togglable],
 
     args: 'pos',
 
@@ -111,7 +114,7 @@ export default {
             this.targetEl = createToggleComponent(this);
         }
 
-        this._style = (({ width, height }) => ({ width, height }))(this.$el.style);
+        this._style = pick(this.$el.style, ['width', 'height']);
     },
 
     disconnected() {
@@ -122,6 +125,11 @@ export default {
         css(this.$el, this._style);
     },
 
+    observe: lazyload({
+        target: ({ toggle, $el }) => query(toggle, $el),
+        targets: ({ $el }) => $el,
+    }),
+
     events: [
         {
             name: 'click',
@@ -461,7 +469,6 @@ function createToggleComponent(drop) {
         mode: drop.mode,
     });
     attr($el, 'aria-haspopup', true);
-    drop.lazyload($el);
 
     return $el;
 }

package/src/js/core/dropnav.js

@@ -29,7 +29,7 @@ import {
     Transition,
     within,
 } from 'uikit-util';
-import { keyMap } from '../mixin/utils';
+import { keyMap } from '../util/keys';
 
 export default {
     mixins: [Class, Container],

package/src/js/core/grid.js

@@ -1,6 +1,6 @@
+import { scroll } from '../api/observables';
 import Margin from './margin';
 import Class from '../mixin/class';
-import { registerScrollListener, unregisterScrollListener } from '../mixin/scroll';
 import {
     addClass,
     children,
@@ -34,12 +34,9 @@ export default {
 
     connected() {
         this.masonry && addClass(this.$el, 'uk-flex-top uk-flex-wrap-top');
-        this.parallax && registerScrollListener(this._uid, () => this.$emit('scroll'));
     },
 
-    disconnected() {
-        unregisterScrollListener(this._uid);
-    },
+    observe: scroll({ filter: ({ parallax }) => parallax }),
 
     update: [
         {

package/src/js/core/height-match.js

@@ -1,10 +1,8 @@
-import Resize from '../mixin/resize';
 import { getRows } from './margin';
-import { $$, boxModelAdjust, css, dimensions, isVisible } from 'uikit-util';
+import { resize } from '../api/observables';
+import { $$, boxModelAdjust, css, dimensions, isVisible, pick } from 'uikit-util';
 
 export default {
-    mixins: [Resize],
-
     args: 'target',
 
     props: {
@@ -29,9 +27,9 @@ export default {
         },
     },
 
-    resizeTargets() {
-        return [this.$el, ...this.elements];
-    },
+    observe: resize({
+        target: ({ $el, elements }) => [$el, ...elements],
+    }),
 
     update: {
         read() {
@@ -55,7 +53,6 @@ function match(elements) {
         return { heights: [''], elements };
     }
 
-    css(elements, 'minHeight', '');
     let heights = elements.map(getHeight);
     const max = Math.max(...heights);
 
@@ -66,17 +63,13 @@ function match(elements) {
 }
 
 function getHeight(element) {
-    let style = false;
+    const style = pick(element.style, ['display', 'minHeight']);
+
     if (!isVisible(element)) {
-        style = element.style.display;
         css(element, 'display', 'block', 'important');
     }
-
+    css(element, 'minHeight', '');
     const height = dimensions(element).height - boxModelAdjust(element, 'height', 'content-box');
-
-    if (style !== false) {
-        css(element, 'display', style);
-    }
-
+    css(element, style);
     return height;
 }

package/src/js/core/height-viewport.js

@@ -1,4 +1,3 @@
-import Resize from '../mixin/resize';
 import {
     boxModelAdjust,
     css,
@@ -13,10 +12,9 @@ import {
     scrollParents,
     toFloat,
 } from 'uikit-util';
+import { resize } from '../api/observables';
 
 export default {
-    mixins: [Resize],
-
     props: {
         expand: Boolean,
         offsetTop: Boolean,
@@ -31,10 +29,10 @@ export default {
         minHeight: 0,
     },
 
-    resizeTargets() {
-        // check for offsetTop change
-        return [this.$el, ...scrollParents(this.$el)];
-    },
+    // check for offsetTop change
+    observe: resize({
+        target: ({ $el }) => [$el, ...scrollParents($el)],
+    }),
 
     update: {
         read({ minHeight: prev }) {

package/src/js/core/img.js

@@ -1,3 +1,5 @@
+import { parseOptions } from '../api/options';
+import { intersection } from '../api/observables';
 import {
     append,
     attr,
@@ -13,9 +15,7 @@ import {
     isArray,
     isEmpty,
     isTag,
-    observeIntersection,
     parent,
-    parseOptions,
     queryAll,
     removeAttr,
     startsWith,
@@ -49,29 +49,12 @@ export default {
             return;
         }
 
-        const target = [this.$el, ...queryAll(this.$props.target, this.$el)];
-
         if (nativeLazyLoad && isImg(this.$el)) {
             this.$el.loading = 'lazy';
             setSrcAttrs(this.$el);
-
-            if (target.length === 1) {
-                return;
-            }
         }
 
         ensureSrcAttribute(this.$el);
-
-        this.registerObserver(
-            observeIntersection(
-                target,
-                (entries, observer) => {
-                    this.load();
-                    observer.disconnect();
-                },
-                { rootMargin: this.margin }
-            )
-        );
     },
 
     disconnected() {
@@ -80,6 +63,16 @@ export default {
         }
     },
 
+    observe: intersection({
+        target: ({ $el, $props }) => [$el, ...queryAll($props.target, $el)],
+        handler(entries, observer) {
+            this.load();
+            observer.disconnect();
+        },
+        options: ({ margin }) => ({ rootMargin: margin }),
+        filter: ({ loading }) => loading === 'lazy',
+    }),
+
     methods: {
         load() {
             if (this._data.image) {

package/src/js/core/leader.js

@@ -1,10 +1,10 @@
 import Class from '../mixin/class';
 import Media from '../mixin/media';
+import { resize } from '../api/observables';
 import { attr, css, toggleClass, unwrap, wrapInner } from 'uikit-util';
-import Resize from '../mixin/resize';
 
 export default {
-    mixins: [Class, Media, Resize],
+    mixins: [Class, Media],
 
     props: {
         fill: String,
@@ -31,6 +31,8 @@ export default {
         unwrap(this.wrapper.childNodes);
     },
 
+    observe: resize(),
+
     update: {
         read() {
             const width = Math.trunc(this.$el.offsetWidth / 2);

package/src/js/core/margin.js

@@ -1,16 +1,7 @@
-import Resize from '../mixin/resize';
-import {
-    isRtl,
-    isVisible,
-    observeMutation,
-    offsetPosition,
-    toArray,
-    toggleClass,
-} from 'uikit-util';
+import { isRtl, isVisible, offsetPosition, toArray, toggleClass } from 'uikit-util';
+import { mutation, resize } from '../api/observables';
 
 export default {
-    mixins: [Resize],
-
     props: {
         margin: String,
         firstColumn: Boolean,
@@ -21,19 +12,18 @@ export default {
         firstColumn: 'uk-first-column',
     },
 
-    resizeTargets() {
-        return [this.$el, ...toArray(this.$el.children)];
-    },
-
-    connected() {
-        this.registerObserver(
-            observeMutation(this.$el, () => this.$reset(), {
+    observe: [
+        mutation({
+            options: {
                 childList: true,
                 attributes: true,
                 attributeFilter: ['style'],
-            })
-        );
-    },
+            },
+        }),
+        resize({
+            target: ({ $el }) => [$el, ...toArray($el.children)],
+        }),
+    ],
 
     update: {
         read() {

package/src/js/core/modal.js

@@ -140,7 +140,7 @@ function install({ modal }) {
             escClose: true,
             role: 'alertdialog',
             ...options,
-            i18n: { ...modal.i18n, ...options.i18n },
+            i18n: { ...modal.i18n, ...options?.i18n },
         };
 
         const dialog = modal.dialog(tmpl(options), options);

package/src/js/core/offcanvas.js

@@ -1,5 +1,5 @@
 import Modal from '../mixin/modal';
-import Swipe from '../mixin/swipe';
+import { swipe } from '../api/observables';
 import {
     $,
     addClass,
@@ -16,7 +16,7 @@ import {
 } from 'uikit-util';
 
 export default {
-    mixins: [Modal, Swipe],
+    mixins: [Modal],
 
     args: 'mode',
 
@@ -24,6 +24,7 @@ export default {
         mode: String,
         flip: Boolean,
         overlay: Boolean,
+        swiping: Boolean,
     },
 
     data: {
@@ -40,6 +41,7 @@ export default {
         clsOverlay: 'uk-offcanvas-overlay',
         selClose: '.uk-offcanvas-close',
         container: false,
+        swiping: true,
     },
 
     computed: {
@@ -68,6 +70,8 @@ export default {
         },
     },
 
+    observe: swipe({ filter: ({ swiping }) => swiping }),
+
     update: {
         read() {
             if (this.isToggled() && !isVisible(this.$el)) {

package/src/js/core/overflow-auto.js

@@ -1,9 +1,9 @@
 import Class from '../mixin/class';
-import Resize from '../mixin/resize';
+import { resize } from '../api/observables';
 import { closest, css, dimensions, height, isVisible } from 'uikit-util';
 
 export default {
-    mixins: [Class, Resize],
+    mixins: [Class],
 
     props: {
         selContainer: String,
@@ -27,9 +27,9 @@ export default {
         },
     },
 
-    resizeTargets() {
-        return [this.container, this.content];
-    },
+    observe: resize({
+        target: ({ container, content }) => [container, content],
+    }),
 
     update: {
         read() {

package/src/js/core/responsive.js

@@ -1,19 +1,17 @@
-import Resize from '../mixin/resize';
+import { resize } from '../api/observables';
 import { addClass, Dimensions, height, isVisible, parent, width } from 'uikit-util';
 
 export default {
-    mixins: [Resize],
-
     props: ['width', 'height'],
 
-    resizeTargets() {
-        return [this.$el, parent(this.$el)];
-    },
-
     connected() {
         addClass(this.$el, 'uk-responsive-width');
     },
 
+    observe: resize({
+        target: ({ $el }) => [$el, parent($el)],
+    }),
+
     update: {
         read() {
             return isVisible(this.$el) && this.width && this.height

package/src/js/core/scroll.js

@@ -1,5 +1,13 @@
-import { $, off, on, scrollIntoView, trigger, within } from 'uikit-util';
-import { getTargetElement, isSameSiteAnchor } from '../mixin/utils';
+import {
+    $,
+    getTargetedElement,
+    isSameSiteAnchor,
+    off,
+    on,
+    scrollIntoView,
+    trigger,
+    within,
+} from 'uikit-util';
 
 export default {
     props: {
@@ -30,19 +38,19 @@ export default {
     },
 };
 
-const components = new Set();
+const instances = new Set();
 function registerClick(cmp) {
-    if (!components.size) {
+    if (!instances.size) {
         on(document, 'click', clickHandler);
     }
 
-    components.add(cmp);
+    instances.add(cmp);
 }
 
 function unregisterClick(cmp) {
-    components.delete(cmp);
+    instances.delete(cmp);
 
-    if (!components.size) {
+    if (!instances.size) {
         off(document, 'click', clickHandler);
     }
 }
@@ -52,10 +60,11 @@ function clickHandler(e) {
         return;
     }
 
-    for (const component of components) {
-        if (within(e.target, component.$el) && isSameSiteAnchor(component.$el)) {
+    for (const instance of instances) {
+        if (within(e.target, instance.$el) && isSameSiteAnchor(instance.$el)) {
             e.preventDefault();
-            component.scrollTo(getTargetElement(component.$el));
+            window.history.pushState({}, '', instance.$el.href);
+            instance.scrollTo(getTargetedElement(instance.$el));
         }
     }
 }

package/src/js/core/scrollspy-nav.js

@@ -1,8 +1,10 @@
-import Scroll from '../mixin/scroll';
+import { scroll } from '../api/observables';
 import {
     $$,
     closest,
+    getTargetedElement,
     hasClass,
+    isSameSiteAnchor,
     isVisible,
     offset,
     offsetViewport,
@@ -10,11 +12,8 @@ import {
     toggleClass,
     trigger,
 } from 'uikit-util';
-import { getTargetElement, isSameSiteAnchor } from '../mixin/utils';
 
 export default {
-    mixins: [Scroll],
-
     props: {
         cls: String,
         closest: String,
@@ -51,10 +50,12 @@ export default {
         },
     },
 
+    observe: scroll(),
+
     update: [
         {
             read() {
-                const targets = this.links.map(getTargetElement).filter(Boolean);
+                const targets = this.links.map(getTargetedElement).filter(Boolean);
 
                 const { length } = targets;