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

package/src/js/core/scrollspy.js

@@ -1,11 +1,9 @@
-import Scroll from '../mixin/scroll';
+import { intersection } from '../api/observables';
 import {
     $$,
     css,
     filter,
     data as getData,
-    isEqual,
-    observeIntersection,
     once,
     removeClass,
     removeClasses,
@@ -14,8 +12,6 @@ import {
 } from 'uikit-util';
 
 export default {
-    mixins: [Scroll],
-
     args: 'cls',
 
     props: {
@@ -43,15 +39,11 @@ export default {
                 return target ? $$(target, $el) : [$el];
             },
 
-            watch(elements, prev) {
+            watch(elements) {
                 if (this.hidden) {
                     // use `opacity:0` instead of `visibility:hidden` to make content focusable with keyboard
                     css(filter(elements, `:not(.${this.inViewClass})`), 'opacity', 0);
                 }
-
-                if (!isEqual(elements, prev)) {
-                    this.$reset();
-                }
             },
 
             immediate: true,
@@ -60,32 +52,6 @@ export default {
 
     connected() {
         this._data.elements = new Map();
-        this.registerObserver(
-            observeIntersection(
-                this.elements,
-                (records) => {
-                    const elements = this._data.elements;
-                    for (const { target: el, isIntersecting } of records) {
-                        if (!elements.has(el)) {
-                            elements.set(el, {
-                                cls: getData(el, 'uk-scrollspy-class') || this.cls,
-                            });
-                        }
-
-                        const state = elements.get(el);
-                        if (!this.repeat && state.show) {
-                            continue;
-                        }
-
-                        state.show = isIntersecting;
-                    }
-
-                    this.$emit();
-                },
-                { rootMargin: this.margin },
-                false
-            )
-        );
     },
 
     disconnected() {
@@ -94,6 +60,31 @@ export default {
         }
     },
 
+    observe: intersection({
+        target: ({ elements }) => elements,
+        handler(records) {
+            const elements = this._data.elements;
+            for (const { target: el, isIntersecting } of records) {
+                if (!elements.has(el)) {
+                    elements.set(el, {
+                        cls: getData(el, 'uk-scrollspy-class') || this.cls,
+                    });
+                }
+
+                const state = elements.get(el);
+                if (!this.repeat && state.show) {
+                    continue;
+                }
+
+                state.show = isIntersecting;
+            }
+
+            this.$emit();
+        },
+        options: (instance) => ({ rootMargin: instance.margin }),
+        args: { intersecting: false },
+    }),
+
     update: [
         {
             write(data) {

package/src/js/core/sticky.js

@@ -1,7 +1,6 @@
 import Class from '../mixin/class';
 import Media from '../mixin/media';
-import Resize from '../mixin/resize';
-import Scroll from '../mixin/scroll';
+import { resize, scroll } from '../api/observables';
 import {
     $,
     addClass,
@@ -17,7 +16,6 @@ import {
     isString,
     isVisible,
     noop,
-    observeResize,
     offsetPosition,
     parent,
     query,
@@ -32,7 +30,7 @@ import {
 } from 'uikit-util';
 
 export default {
-    mixins: [Class, Media, Resize, Scroll],
+    mixins: [Class, Media],
 
     props: {
         position: String,
@@ -76,10 +74,6 @@ export default {
         },
     },
 
-    resizeTargets() {
-        return document.documentElement;
-    },
-
     connected() {
         this.start = coerce(this.start || this.top);
         this.end = coerce(this.end || this.bottom);
@@ -89,8 +83,6 @@ export default {
             $('<div class="uk-sticky-placeholder"></div>');
         this.isFixed = false;
         this.setActive(false);
-
-        this.registerObserver(observeResize(this.$el, () => !this.isFixed && this.$emit('resize')));
     },
 
     disconnected() {
@@ -104,6 +96,16 @@ export default {
         this.placeholder = null;
     },
 
+    observe: [
+        resize({
+            handler() {
+                !this.isFixed && this.$emit('resize');
+            },
+        }),
+        resize({ target: () => [document.documentElement] }),
+        scroll(),
+    ],
+
     events: [
         {
             name: 'resize',

package/src/js/core/svg.js

@@ -1,3 +1,5 @@
+import { registerObserver } from '../api/observer';
+import { getMaxPathLength } from '../util/svg';
 import {
     $,
     after,
@@ -15,7 +17,6 @@ import {
     startsWith,
     toFloat,
 } from 'uikit-util';
-import { getMaxPathLength } from '../mixin/utils';
 
 export default {
     args: 'src',
@@ -67,7 +68,8 @@ export default {
             this.svg.then((el) => {
                 if (this._connected && el) {
                     applyAnimation(el);
-                    this.registerObserver(
+                    registerObserver(
+                        this,
                         observeIntersection(el, (records, observer) => {
                             applyAnimation(el);
                             observer.disconnect();

package/src/js/core/switcher.js

@@ -1,6 +1,7 @@
-import Lazyload from '../mixin/lazyload';
-import Swipe from '../mixin/swipe';
 import Togglable from '../mixin/togglable';
+import { keyMap } from '../util/keys';
+import { generateId } from '../api/instance';
+import { lazyload, swipe } from '../api/observables';
 import {
     $$,
     attr,
@@ -20,12 +21,11 @@ import {
     toNodes,
     within,
 } from 'uikit-util';
-import { generateId, keyMap } from '../mixin/utils';
 
 const selDisabled = '.uk-disabled *, .uk-disabled, [disabled]';
 
 export default {
-    mixins: [Lazyload, Swipe, Togglable],
+    mixins: [Togglable],
 
     args: 'connect',
 
@@ -35,6 +35,7 @@ export default {
         itemNav: String,
         active: Number,
         followFocus: Boolean,
+        swiping: Boolean,
     },
 
     data: {
@@ -46,6 +47,7 @@ export default {
         attrItem: 'uk-switcher-item',
         selVertical: '.uk-nav',
         followFocus: false,
+        swiping: true,
     },
 
     computed: {
@@ -74,7 +76,6 @@ export default {
                 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));
                 }
                 this.$emit();
             },
@@ -101,16 +102,17 @@ export default {
                 this.toggles.some((toggle) => within(toggle, child))
             );
         },
-
-        swipeTarget() {
-            return this.connects;
-        },
     },
 
     connected() {
         attr(this.$el, 'role', 'tablist');
     },
 
+    observe: [
+        lazyload({ targets: ({ connectChildren }) => connectChildren }),
+        swipe({ target: ({ connects }) => connects, filter: ({ swiping }) => swiping }),
+    ],
+
     events: [
         {
             name: 'click keydown',

package/src/js/core/toggle.js

@@ -1,6 +1,6 @@
-import Lazyload from '../mixin/lazyload';
 import Media from '../mixin/media';
 import Togglable from '../mixin/togglable';
+import { lazyload } from '../api/observables';
 import {
     attr,
     closest,
@@ -23,7 +23,7 @@ import {
 const KEY_SPACE = 32;
 
 export default {
-    mixins: [Lazyload, Media, Togglable],
+    mixins: [Media, Togglable],
 
     args: 'target',
 
@@ -57,10 +57,10 @@ export default {
                 attr(this.$el, 'role', 'button');
             }
         }
-
-        this.lazyload(this.$el, () => this.target);
     },
 
+    observe: lazyload({ target: ({ target }) => target }),
+
     events: [
         {
             name: pointerDown,

package/src/js/core/video.js

@@ -1,15 +1,5 @@
-import {
-    css,
-    hasAttr,
-    isInView,
-    isTag,
-    isVideo,
-    isVisible,
-    mute,
-    observeIntersection,
-    pause,
-    play,
-} from 'uikit-util';
+import { intersection } from '../api/observables';
+import { css, hasAttr, isInView, isTag, isVideo, isVisible, mute, pause, play } from 'uikit-util';
 
 export default {
     args: 'autoplay',
@@ -38,10 +28,12 @@ export default {
         if (this.automute) {
             mute(this.$el);
         }
-
-        this.registerObserver(observeIntersection(this.$el, () => this.$emit(), {}, false));
     },
 
+    observe: intersection({
+        args: { intersecting: false },
+    }),
+
     update: {
         read({ visible }) {
             if (!isVideo(this.$el)) {

package/src/js/mixin/modal.js

@@ -10,6 +10,7 @@ import {
     endsWith,
     includes,
     isFocusable,
+    isSameSiteAnchor,
     last,
     matches,
     on,
@@ -22,7 +23,7 @@ import {
     toFloat,
     within,
 } from 'uikit-util';
-import { isSameSiteAnchor, preventBackgroundScroll } from './utils';
+import { preventBackgroundScroll } from '../util/scroll';
 
 const active = [];
 

package/src/js/mixin/parallax.js

@@ -1,5 +1,5 @@
 import Media from '../mixin/media';
-import { getMaxPathLength } from './utils';
+import { getMaxPathLength } from '../util/svg';
 import {
     createEvent,
     css,

package/src/js/mixin/slider-nav.js

@@ -12,7 +12,8 @@ import {
     toggleClass,
     toNumber,
 } from 'uikit-util';
-import { generateId, keyMap } from './utils';
+import { keyMap } from '../util/keys';
+import { generateId } from '../api/instance';
 
 export default {
     i18n: {

package/src/js/mixin/slider.js

@@ -1,8 +1,8 @@
 import I18n from './i18n';
-import Resize from './resize';
 import SliderNav from './slider-nav';
 import SliderDrag from './slider-drag';
 import SliderAutoplay from './slider-autoplay';
+import { resize } from '../api/observables';
 import {
     $,
     children,
@@ -16,7 +16,7 @@ import {
 } from 'uikit-util';
 
 export default {
-    mixins: [SliderAutoplay, SliderDrag, SliderNav, Resize, I18n],
+    mixins: [SliderAutoplay, SliderDrag, SliderNav, I18n],
 
     props: {
         clsActivated: Boolean,
@@ -78,6 +78,8 @@ export default {
         },
     },
 
+    observe: resize(),
+
     methods: {
         show(index, force = false) {
             if (this.dragging || !this.length) {
@@ -144,7 +146,11 @@ export default {
         },
 
         getIndex(index = this.index, prev = this.index) {
-            return clamp(getIndex(index, this.slides, prev, this.finite), 0, this.maxIndex);
+            return clamp(
+                getIndex(index, this.slides, prev, this.finite),
+                0,
+                Math.max(0, this.maxIndex)
+            );
         },
 
         getValidIndex(index = this.index, prevIndex = this.prevIndex) {

package/src/js/util/filter.js

@@ -84,3 +84,16 @@ export function children(element, selector) {
 export function index(element, ref) {
     return ref ? toNodes(element).indexOf(toNode(ref)) : children(parent(element)).indexOf(element);
 }
+
+export function isSameSiteAnchor(el) {
+    el = toNode(el);
+    return el && ['origin', 'pathname', 'search'].every((part) => el[part] === location[part]);
+}
+
+export function getTargetedElement(el) {
+    if (isSameSiteAnchor(el)) {
+        el = toNode(el);
+        const id = decodeURIComponent(el.hash).substring(1);
+        return document.getElementById(id) || document.getElementsByName(id)[0];
+    }
+}

package/src/js/util/index.js

@@ -10,7 +10,6 @@ export * from './filter';
 export * from './lang';
 export * from './mouse';
 export * from './observer';
-export * from './options';
 export * from './player';
 export * from './position';
 export * from './selector';

package/src/js/util/keys.js

@@ -0,0 +1,11 @@
+export const keyMap = {
+    TAB: 9,
+    ESC: 27,
+    SPACE: 32,
+    END: 35,
+    HOME: 36,
+    LEFT: 37,
+    UP: 38,
+    RIGHT: 39,
+    DOWN: 40,
+};

package/src/js/util/lang.js

@@ -10,15 +10,11 @@ export const hyphenate = memoize((str) => str.replace(hyphenateRe, '-$1').toLowe
 
 const camelizeRe = /-(\w)/g;
 
-export const camelize = memoize((str) => str.replace(camelizeRe, toUpper));
-
-export const ucfirst = memoize((str) =>
-    str.length ? toUpper(null, str.charAt(0)) + str.slice(1) : ''
+export const camelize = memoize((str) =>
+    (str.charAt(0).toLowerCase() + str.slice(1)).replace(camelizeRe, (_, c) => c.toUpperCase())
 );
 
-function toUpper(_, c) {
-    return c ? c.toUpperCase() : '';
-}
+export const ucfirst = memoize((str) => str.charAt(0).toUpperCase() + str.slice(1));
 
 export function startsWith(str, search) {
     return str?.startsWith?.(search);
@@ -180,6 +176,10 @@ export function uniqueBy(array, prop) {
     return array.filter(({ [prop]: check }) => (seen.has(check) ? false : seen.add(check)));
 }
 
+export function pick(obj, props) {
+    return props.reduce((res, prop) => ({ ...res, [prop]: obj[prop] }), {});
+}
+
 export function clamp(number, min = 0, max = 1) {
     return Math.min(Math.max(toNumber(number) || 0, min), max);
 }

package/src/js/util/observer.js

@@ -1,8 +1,8 @@
 import { on } from './event';
-import { toNodes } from './lang';
+import { noop, toNodes } from './lang';
 import { inBrowser } from './env';
 
-export function observeIntersection(targets, cb, options, intersecting = true) {
+export function observeIntersection(targets, cb, options = {}, intersecting = true) {
     const observer = new IntersectionObserver(
         intersecting
             ? (entries, observer) => {
@@ -31,6 +31,8 @@ export function observeResize(targets, cb, options = { box: 'border-box' }) {
     listeners.add(cb);
 
     return {
+        observe: noop,
+        unobserve: noop,
         disconnect() {
             listeners.delete(cb);
         },

package/src/js/util/scroll.js

@@ -0,0 +1,42 @@
+import { width } from './dimensions';
+import { on } from './event';
+import { css } from './style';
+import { scrollParents } from './viewport';
+
+let prevented;
+export function preventBackgroundScroll(el) {
+    // 'overscroll-behavior: contain' only works consistently if el overflows (Safari)
+    const off = on(
+        el,
+        'touchmove',
+        (e) => {
+            if (e.targetTouches.length !== 1) {
+                return;
+            }
+
+            let [{ scrollHeight, clientHeight }] = scrollParents(e.target);
+
+            if (clientHeight >= scrollHeight && e.cancelable) {
+                e.preventDefault();
+            }
+        },
+        { passive: false }
+    );
+
+    if (prevented) {
+        return off;
+    }
+    prevented = true;
+
+    const { scrollingElement } = document;
+    css(scrollingElement, {
+        overflowY: CSS.supports('overflow', 'clip') ? 'clip' : 'hidden',
+        touchAction: 'none',
+        paddingRight: width(window) - scrollingElement.clientWidth || '',
+    });
+    return () => {
+        prevented = false;
+        off();
+        css(scrollingElement, { overflowY: '', touchAction: '', paddingRight: '' });
+    };
+}

package/src/js/util/svg.js

@@ -0,0 +1,16 @@
+import { $$ } from './dom';
+
+export function getMaxPathLength(el) {
+    return Math.ceil(
+        Math.max(
+            0,
+            ...$$('[stroke]', el).map((stroke) => {
+                try {
+                    return stroke.getTotalLength();
+                } catch (e) {
+                    return 0;
+                }
+            })
+        )
+    );
+}

package/src/js/util/viewport.js

@@ -143,12 +143,12 @@ export function overflowParents(element) {
 export function offsetViewport(scrollElement) {
     const window = toWindow(scrollElement);
     const {
+        visualViewport,
         document: { documentElement },
     } = window;
     let viewportElement =
         scrollElement === scrollingElement(scrollElement) ? window : scrollElement;
 
-    const { visualViewport } = window;
     if (isWindow(viewportElement) && visualViewport) {
         let { height, width, scale, pageTop: top, pageLeft: left } = visualViewport;
         height = Math.round(height * scale);