uikit 3.11.2-dev.44c622843 → 3.11.2-dev.536e1a374

package/src/js/components/lightbox-panel.js

@@ -7,7 +7,6 @@ import {
     $,
     addClass,
     append,
-    assign,
     attr,
     fragment,
     getImage,
@@ -219,29 +218,21 @@ export default {
                 if (type === 'image' || src.match(/\.(avif|jpe?g|a?png|gif|svg|webp)($|\?)/i)) {
                     try {
                         const { width, height } = await getImage(src, attrs.srcset, attrs.size);
-                        this.setItem(
-                            item,
-                            createEl('img', assign({ src, width, height, alt }, attrs))
-                        );
+                        this.setItem(item, createEl('img', { src, width, height, alt, ...attrs }));
                     } catch (e) {
                         this.setError(item);
                     }
 
                     // Video
                 } else if (type === 'video' || src.match(/\.(mp4|webm|ogv)($|\?)/i)) {
-                    const video = createEl(
-                        'video',
-                        assign(
-                            {
-                                src,
-                                poster,
-                                controls: '',
-                                playsinline: '',
-                                'uk-video': `${this.videoAutoplay}`,
-                            },
-                            attrs
-                        )
-                    );
+                    const video = createEl('video', {
+                        src,
+                        poster,
+                        controls: '',
+                        playsinline: '',
+                        'uk-video': `${this.videoAutoplay}`,
+                        ...attrs,
+                    });
 
                     on(video, 'loadedmetadata', () => {
                         attr(video, { width: video.videoWidth, height: video.videoHeight });
@@ -253,18 +244,13 @@ export default {
                 } else if (type === 'iframe' || src.match(/\.(html|php)($|\?)/i)) {
                     this.setItem(
                         item,
-                        createEl(
-                            'iframe',
-                            assign(
-                                {
-                                    src,
-                                    frameborder: '0',
-                                    allowfullscreen: '',
-                                    class: 'uk-lightbox-iframe',
-                                },
-                                attrs
-                            )
-                        )
+                        createEl('iframe', {
+                            src,
+                            frameborder: '0',
+                            allowfullscreen: '',
+                            class: 'uk-lightbox-iframe',
+                            ...attrs,
+                        })
                     );
 
                     // YouTube
@@ -275,20 +261,15 @@ export default {
                 ) {
                     this.setItem(
                         item,
-                        createEl(
-                            'iframe',
-                            assign(
-                                {
-                                    src: `https://www.youtube${matches[1] || ''}.com/embed/${
-                                        matches[2]
-                                    }${matches[3] ? `?${matches[3]}` : ''}`,
-                                    width: 1920,
-                                    height: 1080,
-                                },
-                                iframeAttrs,
-                                attrs
-                            )
-                        )
+                        createEl('iframe', {
+                            src: `https://www.youtube${matches[1] || ''}.com/embed/${matches[2]}${
+                                matches[3] ? `?${matches[3]}` : ''
+                            }`,
+                            width: 1920,
+                            height: 1080,
+                            ...iframeAttrs,
+                            ...attrs,
+                        })
                     );
 
                     // Vimeo
@@ -307,20 +288,15 @@ export default {
 
                         this.setItem(
                             item,
-                            createEl(
-                                'iframe',
-                                assign(
-                                    {
-                                        src: `https://player.vimeo.com/video/${matches[1]}${
-                                            matches[2] ? `?${matches[2]}` : ''
-                                        }`,
-                                        width,
-                                        height,
-                                    },
-                                    iframeAttrs,
-                                    attrs
-                                )
-                            )
+                            createEl('iframe', {
+                                src: `https://player.vimeo.com/video/${matches[1]}${
+                                    matches[2] ? `?${matches[2]}` : ''
+                                }`,
+                                width,
+                                height,
+                                ...iframeAttrs,
+                                ...attrs,
+                            })
                         );
                     } catch (e) {
                         this.setError(item);

package/src/js/components/lightbox.js

@@ -48,8 +48,7 @@ export default {
                 index = findIndex(items, ({ source: src }) => source === src);
             }
 
-            this.panel =
-                this.panel || this.$create('lightboxPanel', assign({}, this.$props, { items }));
+            this.panel = this.panel || this.$create('lightboxPanel', { ...this.$props, items });
 
             on(this.panel.$el, 'hidden', () => (this.panel = false));
 

package/src/js/components/slider.js

@@ -1,6 +1,7 @@
 import Class from '../mixin/class';
 import Slider, { speedUp } from '../mixin/slider';
 import SliderReactive from '../mixin/slider-reactive';
+import SliderPreload from './internal/slider-preload';
 import Transitioner, { getMax, getWidth } from './internal/slider-transitioner';
 import {
     $,
@@ -11,16 +12,14 @@ import {
     dimensions,
     findIndex,
     includes,
-    isEmpty,
     last,
-    sortBy,
     toFloat,
     toggleClass,
     toNumber,
 } from 'uikit-util';
 
 export default {
-    mixins: [Class, Slider, SliderReactive],
+    mixins: [Class, Slider, SliderReactive, SliderPreload],
 
     props: {
         center: Boolean,
@@ -72,48 +71,39 @@ export default {
             return ~index ? index : this.length - 1;
         },
 
-        sets({ sets }) {
-            if (!sets) {
+        sets({ sets: enabled }) {
+            if (!enabled) {
                 return;
             }
 
-            const width = dimensions(this.list).width / (this.center ? 2 : 1);
-
             let left = 0;
-            let leftCenter = width;
-            let slideLeft = 0;
-
-            sets = sortBy(this.slides, 'offsetLeft').reduce((sets, slide, i) => {
-                const slideWidth = dimensions(slide).width;
-                const slideRight = slideLeft + slideWidth;
+            const sets = [];
+            const width = dimensions(this.list).width;
+            for (let i in this.slides) {
+                const slideWidth = dimensions(this.slides[i]).width;
 
-                if (slideRight > left) {
-                    if (!this.center && i > this.maxIndex) {
-                        i = this.maxIndex;
-                    }
+                if (left + slideWidth > width) {
+                    left = 0;
+                }
 
-                    if (!includes(sets, i)) {
-                        const cmp = this.slides[i + 1];
-                        if (
-                            this.center &&
-                            cmp &&
-                            slideWidth < leftCenter - dimensions(cmp).width / 2
-                        ) {
-                            leftCenter -= slideWidth;
-                        } else {
-                            leftCenter = width;
-                            sets.push(i);
-                            left = slideLeft + width + (this.center ? slideWidth / 2 : 0);
-                        }
+                if (this.center) {
+                    if (
+                        left < width / 2 &&
+                        left + slideWidth + dimensions(this.slides[+i + 1]).width / 2 > width / 2
+                    ) {
+                        sets.push(+i);
+                        left = width / 2 - slideWidth / 2;
                     }
+                } else if (left === 0) {
+                    sets.push(Math.min(+i, this.maxIndex));
                 }
 
-                slideLeft += slideWidth;
+                left += slideWidth;
+            }
 
+            if (sets.length) {
                 return sets;
-            }, []);
-
-            return !isEmpty(sets) && sets;
+            }
         },
 
         transitionOptions() {
@@ -145,15 +135,7 @@ export default {
                 this._translate(1);
             }
 
-            const actives = this._getTransitioner(this.index).getActives();
-            const activeClasses = [
-                this.clsActive,
-                ((!this.sets || includes(this.sets, toFloat(this.index))) && this.clsActivated) ||
-                    '',
-            ];
-            for (const slide of this.slides) {
-                toggleClass(slide, activeClasses, includes(actives, slide));
-            }
+            this.updateActiveClasses();
         },
 
         events: ['resize'],
@@ -202,6 +184,10 @@ export default {
                 addClass(this._getTransitioner().getItemIn(), this.clsActive);
             }
         },
+
+        itemshown() {
+            this.updateActiveClasses();
+        },
     },
 
     methods: {
@@ -238,6 +224,18 @@ export default {
             }
         },
 
+        updateActiveClasses() {
+            const actives = this._getTransitioner(this.index).getActives();
+            const activeClasses = [
+                this.clsActive,
+                ((!this.sets || includes(this.sets, toFloat(this.index))) && this.clsActivated) ||
+                    '',
+            ];
+            for (const slide of this.slides) {
+                toggleClass(slide, activeClasses, includes(actives, slide));
+            }
+        },
+
         getValidIndex(index = this.index, prevIndex = this.prevIndex) {
             index = this.getIndex(index, prevIndex);
 
@@ -258,6 +256,25 @@ export default {
 
             return index;
         },
+
+        getAdjacentSlides() {
+            const { width } = dimensions(this.list);
+            const left = -width;
+            const right = width * 2;
+            const slideWidth = dimensions(this.slides[this.index]).width;
+            const slideLeft = this.center ? width / 2 - slideWidth / 2 : 0;
+            const slides = new Set();
+            for (const i of [-1, 1]) {
+                let currentLeft = slideLeft + (i > 0 ? slideWidth : 0);
+                let j = 0;
+                do {
+                    const slide = this.slides[this.getIndex(this.index + i + j++ * i)];
+                    currentLeft += dimensions(slide).width * i;
+                    slides.add(slide);
+                } while (this.slides.length > j && currentLeft > left && currentLeft < right);
+            }
+            return Array.from(slides);
+        },
     },
 };
 

package/src/js/components/slideshow.js

@@ -2,10 +2,11 @@ import Class from '../mixin/class';
 import Slideshow from '../mixin/slideshow';
 import Animations from './internal/slideshow-animations';
 import SliderReactive from '../mixin/slider-reactive';
+import SliderPreload from './internal/slider-preload';
 import { boxModelAdjust, css } from 'uikit-util';
 
 export default {
-    mixins: [Class, Slideshow, SliderReactive],
+    mixins: [Class, Slideshow, SliderReactive, SliderPreload],
 
     props: {
         ratio: String,
@@ -50,4 +51,10 @@ export default {
 
         events: ['resize'],
     },
+
+    methods: {
+        getAdjacentSlides() {
+            return [1, -1].map((i) => this.slides[this.getIndex(this.index + i)]);
+        },
+    },
 };

package/src/js/components/sortable.js

@@ -205,7 +205,7 @@ export default {
 
             this.touched = new Set([this]);
             this.placeholder = placeholder;
-            this.origin = assign({ target, index: index(placeholder) }, this.pos);
+            this.origin = { target, index: index(placeholder), ...this.pos };
 
             on(document, pointerMove, this.move);
             on(document, pointerUp, this.end);

package/src/js/components/upload.js

@@ -1,4 +1,4 @@
-import { addClass, ajax, matches, noop, on, removeClass, trigger } from 'uikit-util';
+import { addClass, ajax, matches, noop, on, removeClass, toArray, trigger } from 'uikit-util';
 
 export default {
     props: {
@@ -178,6 +178,7 @@ function match(pattern, path) {
 }
 
 function chunk(files, size) {
+    files = toArray(files);
     const chunks = [];
     for (let i = 0; i < files.length; i += size) {
         chunks.push(files.slice(i, i + size));

package/src/js/core/accordion.js

@@ -1,4 +1,5 @@
 import Class from '../mixin/class';
+import Lazyload from '../mixin/lazyload';
 import { default as Togglable, toggleHeight } from '../mixin/togglable';
 import {
     $,
@@ -17,7 +18,7 @@ import {
 } from 'uikit-util';
 
 export default {
-    mixins: [Class, Togglable],
+    mixins: [Class, Lazyload, Togglable],
 
     props: {
         targets: String,
@@ -73,6 +74,10 @@ export default {
         },
     },
 
+    connected() {
+        this.lazyload();
+    },
+
     events: [
         {
             name: 'click',

package/src/js/core/alert.js

@@ -1,6 +1,5 @@
 import Class from '../mixin/class';
 import Togglable from '../mixin/togglable';
-import { assign } from 'uikit-util';
 
 export default {
     mixins: [Class, Togglable],
@@ -15,7 +14,7 @@ export default {
         animation: [true],
         selClose: '.uk-alert-close',
         duration: 150,
-        hideProps: assign({ opacity: 0 }, Togglable.data.hideProps),
+        hideProps: { opacity: 0, ...Togglable.data.hideProps },
     },
 
     events: [

package/src/js/core/core.js

@@ -1,18 +1,4 @@
-import {
-    css,
-    fastdom,
-    getEventPos,
-    inBrowser,
-    isTouch,
-    on,
-    once,
-    parent,
-    pointerCancel,
-    pointerDown,
-    pointerUp,
-    toMs,
-    trigger,
-} from 'uikit-util';
+import { css, fastdom, inBrowser, observeResize, on, toMs } from 'uikit-util';
 
 export default function (UIkit) {
     if (!inBrowser) {
@@ -32,27 +18,7 @@ export default function (UIkit) {
 
     on(window, 'load resize', handleResize);
     on(document, 'loadedmetadata load', handleResize, true);
-
-    if ('ResizeObserver' in window) {
-        new ResizeObserver(handleResize).observe(document.documentElement);
-    }
-
-    // throttle `scroll` event (Safari triggers multiple `scroll` events per frame)
-    let pending;
-    on(
-        window,
-        'scroll',
-        (e) => {
-            if (pending) {
-                return;
-            }
-            pending = true;
-            fastdom.read(() => (pending = false));
-
-            UIkit.update(null, e.type);
-        },
-        { passive: true, capture: true }
-    );
+    observeResize(document.documentElement, handleResize);
 
     let started = 0;
     on(
@@ -71,43 +37,4 @@ export default function (UIkit) {
         },
         true
     );
-
-    on(
-        document,
-        pointerDown,
-        (e) => {
-            if (!isTouch(e)) {
-                return;
-            }
-
-            // Handle Swipe Gesture
-            const pos = getEventPos(e);
-            const target = 'tagName' in e.target ? e.target : parent(e.target);
-            once(document, `${pointerUp} ${pointerCancel} scroll`, (e) => {
-                const { x, y } = getEventPos(e);
-
-                // swipe
-                if (
-                    (e.type !== 'scroll' && target && x && Math.abs(pos.x - x) > 100) ||
-                    (y && Math.abs(pos.y - y) > 100)
-                ) {
-                    setTimeout(() => {
-                        trigger(target, 'swipe');
-                        trigger(target, `swipe${swipeDirection(pos.x, pos.y, x, y)}`);
-                    });
-                }
-            });
-        },
-        { passive: true }
-    );
-}
-
-function swipeDirection(x1, y1, x2, y2) {
-    return Math.abs(x1 - x2) >= Math.abs(y1 - y2)
-        ? x1 - x2 > 0
-            ? 'Left'
-            : 'Right'
-        : y1 - y2 > 0
-        ? 'Up'
-        : 'Down';
 }

package/src/js/core/cover.js

@@ -1,5 +1,5 @@
 import Video from './video';
-import { css, Dimensions, parent } from 'uikit-util';
+import { css, Dimensions, observeResize, parent } from 'uikit-util';
 
 export default {
     mixins: [Video],
@@ -13,6 +13,10 @@ export default {
         automute: true,
     },
 
+    connected() {
+        this.registerObserver(observeResize(this.$el, () => this.$emit('resize')));
+    },
+
     update: {
         read() {
             const el = this.$el;

package/src/js/core/drop.js

@@ -1,4 +1,5 @@
 import Container from '../mixin/container';
+import Lazyload from '../mixin/lazyload';
 import Position from '../mixin/position';
 import Togglable from '../mixin/togglable';
 import {
@@ -30,7 +31,7 @@ import {
 export let active;
 
 export default {
-    mixins: [Container, Position, Togglable],
+    mixins: [Container, Lazyload, Position, Togglable],
 
     args: 'pos',
 
@@ -84,6 +85,7 @@ export default {
                 mode: this.mode,
             }).$el;
             attr(this.target, 'aria-haspopup', true);
+            this.lazyload(this.target);
         }
     },
 

package/src/js/core/form-custom.js

@@ -60,7 +60,7 @@ export default {
             name: 'change',
 
             handler() {
-                this.$update();
+                this.$emit();
             },
         },
 
@@ -72,7 +72,7 @@ export default {
             },
 
             handler() {
-                this.$update();
+                this.$emit();
             },
         },
     ],

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

@@ -1,3 +1,4 @@
+import Class from '../mixin/class';
 import {
     boxModelAdjust,
     css,
@@ -14,6 +15,8 @@ import {
 } from 'uikit-util';
 
 export default {
+    mixins: [Class],
+
     props: {
         expand: Boolean,
         offsetTop: Boolean,

package/src/js/core/icon.js

@@ -68,14 +68,14 @@ const Icon = {
     },
 
     methods: {
-        getSvg() {
+        async getSvg() {
             const icon = getIcon(this.icon);
 
             if (!icon) {
-                return Promise.reject('Icon not found.');
+                throw 'Icon not found.';
             }
 
-            return Promise.resolve(icon);
+            return icon;
         },
     },
 };
@@ -137,9 +137,16 @@ export const Close = {
 export const Spinner = {
     extends: IconComponent,
 
-    async connected() {
-        const svg = await this.svg;
-        svg && this.ratio !== 1 && css($('circle', svg), 'strokeWidth', 1 / this.ratio);
+    methods: {
+        async getSvg() {
+            const icon = await Icon.methods.getSvg.call(this);
+
+            if (this.ratio !== 1) {
+                css($('circle', icon), 'strokeWidth', 1 / this.ratio);
+            }
+
+            return icon;
+        },
     },
 };