uikit 3.25.20-dev.e4f47fc → 3.25.20

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.25.20-dev.e4f47fc",
+    "version": "3.25.20",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/js/api/component.js

@@ -48,10 +48,11 @@ export function createComponent(name, element, data, ...args) {
         const instance = getComponent(element, name);
 
         if (instance) {
-            if (!data) {
+            if (data) {
+                instance.$destroy();
+            } else {
                 return instance;
             }
-            instance.$destroy();
         }
 
         return new Component({ el: element, data });

package/src/js/api/observables.js

@@ -43,8 +43,10 @@ export function lazyload(options = {}) {
                     .forEach((el) => removeAttr(el, 'loading'));
             }
 
-            for (const { target } of entries.filter(({ isIntersecting }) => isIntersecting)) {
-                observer.unobserve(target);
+            for (const el of entries
+                .filter(({ isIntersecting }) => isIntersecting)
+                .map(({ target }) => target)) {
+                observer.unobserve(el);
             }
         },
         ...options,

package/src/js/api/options.js

@@ -153,14 +153,11 @@ export function parseOptions(options, args = []) {
 export function coerce(type, value) {
     if (type === Boolean) {
         return toBoolean(value);
-    }
-    if (type === Number) {
+    } else if (type === Number) {
         return toNumber(value);
-    }
-    if (type === 'list') {
+    } else if (type === 'list') {
         return toList(value);
-    }
-    if (type === Object && isString(value)) {
+    } else if (type === Object && isString(value)) {
         return parseOptions(value);
     }
 

package/src/js/api/props.js

@@ -67,7 +67,10 @@ function getProps(opts) {
 
 const getAttributes = memoize((id, props) => {
     const attributes = Object.keys(props);
-    const filter = [...attributes, id].flatMap((key) => [hyphenate(key), `data-${hyphenate(key)}`]);
+    const filter = attributes
+        .concat(id)
+        .map((key) => [hyphenate(key), `data-${hyphenate(key)}`])
+        .flat();
     return { attributes, filter };
 });
 

package/src/js/api/state.js

@@ -43,13 +43,14 @@ function initMethods(instance) {
 
 function normalizeData({ data = {} }, { args = [], props = {} }) {
     if (isArray(data)) {
-        data = data
-            .slice(0, args.length)
-            .reduce(
-                (data, value, index) =>
-                    assign(data, isPlainObject(value) ? value : { [args[index]]: value }),
-                {},
-            );
+        data = data.slice(0, args.length).reduce((data, value, index) => {
+            if (isPlainObject(value)) {
+                assign(data, value);
+            } else {
+                data[args[index]] = value;
+            }
+            return data;
+        }, {});
     }
 
     for (const key in data) {

package/src/js/components/index.js

@@ -2,7 +2,6 @@ export { default as Countdown } from './countdown';
 export { default as Filter } from './filter';
 export { default as Lightbox } from './lightbox';
 export { default as LightboxPanel } from './lightbox-panel';
-export { default as Marquee } from './marquee';
 export { default as Notification } from './notification';
 export { default as Parallax } from './parallax';
 export { default as Slider } from './slider';

package/src/js/components/internal/lightbox-animations.js

@@ -5,17 +5,36 @@ import { scale3d } from './slideshow-animations';
 export default {
     ...Animations,
     fade: {
-        percent: (current) => 1 - css(current, 'opacity'),
+        show() {
+            return [{ opacity: 0 }, { opacity: 1 }];
+        },
 
-        translate: (percent) => [{ opacity: 1 - percent }, { opacity: percent }],
+        percent(current) {
+            return 1 - css(current, 'opacity');
+        },
+
+        translate(percent) {
+            return [{ opacity: 1 - percent }, { opacity: percent }];
+        },
     },
 
     scale: {
-        percent: (current) => 1 - css(current, 'opacity'),
+        show() {
+            return [
+                { opacity: 0, transform: scale3d(1 - 0.2) },
+                { opacity: 1, transform: scale3d(1) },
+            ];
+        },
+
+        percent(current) {
+            return 1 - css(current, 'opacity');
+        },
 
-        translate: (percent) => [
-            { opacity: 1 - percent, transform: scale3d(1 - 0.2 * percent) },
-            { opacity: percent, transform: scale3d(1 - 0.2 + 0.2 * percent) },
-        ],
+        translate(percent) {
+            return [
+                { opacity: 1 - percent, transform: scale3d(1 - 0.2 * percent) },
+                { opacity: percent, transform: scale3d(1 - 0.2 + 0.2 * percent) },
+            ];
+        },
     },
 };

package/src/js/components/internal/slideshow-animations.js

@@ -4,24 +4,55 @@ import Animations, { translate, translated } from '../../mixin/internal/slidesho
 export default {
     ...Animations,
     fade: {
-        percent: (current) => 1 - css(current, 'opacity'),
-        translate: (percent) => [{ opacity: 1 - percent, zIndex: 0 }, { zIndex: -1 }],
+        show() {
+            return [{ opacity: 0, zIndex: 0 }, { zIndex: -1 }];
+        },
+
+        percent(current) {
+            return 1 - css(current, 'opacity');
+        },
+
+        translate(percent) {
+            return [{ opacity: 1 - percent, zIndex: 0 }, { zIndex: -1 }];
+        },
     },
 
     scale: {
-        percent: (current) => 1 - css(current, 'opacity'),
+        show() {
+            return [{ opacity: 0, transform: scale3d(1 + 0.5), zIndex: 0 }, { zIndex: -1 }];
+        },
+
+        percent(current) {
+            return 1 - css(current, 'opacity');
+        },
 
-        translate: (percent) => [
-            { opacity: 1 - percent, transform: scale3d(1 + 0.5 * percent), zIndex: 0 },
-            { zIndex: -1 },
-        ],
+        translate(percent) {
+            return [
+                { opacity: 1 - percent, transform: scale3d(1 + 0.5 * percent), zIndex: 0 },
+                { zIndex: -1 },
+            ];
+        },
     },
 
     pull: {
-        percent: (current, next, dir) => (dir < 0 ? 1 - translated(next) : translated(current)),
+        show(dir) {
+            return dir < 0
+                ? [
+                      { transform: translate(30), zIndex: -1 },
+                      { transform: translate(), zIndex: 0 },
+                  ]
+                : [
+                      { transform: translate(-100), zIndex: 0 },
+                      { transform: translate(), zIndex: -1 },
+                  ];
+        },
 
-        translate: (percent, dir) =>
-            dir < 0
+        percent(current, next, dir) {
+            return dir < 0 ? 1 - translated(next) : translated(current);
+        },
+
+        translate(percent, dir) {
+            return dir < 0
                 ? [
                       { transform: translate(30 * percent), zIndex: -1 },
                       { transform: translate(-100 * (1 - percent)), zIndex: 0 },
@@ -29,14 +60,29 @@ export default {
                 : [
                       { transform: translate(-percent * 100), zIndex: 0 },
                       { transform: translate(30 * (1 - percent)), zIndex: -1 },
-                  ],
+                  ];
+        },
     },
 
     push: {
-        percent: (current, next, dir) => (dir > 0 ? 1 - translated(next) : translated(current)),
+        show(dir) {
+            return dir < 0
+                ? [
+                      { transform: translate(100), zIndex: 0 },
+                      { transform: translate(), zIndex: -1 },
+                  ]
+                : [
+                      { transform: translate(-30), zIndex: -1 },
+                      { transform: translate(), zIndex: 0 },
+                  ];
+        },
+
+        percent(current, next, dir) {
+            return dir > 0 ? 1 - translated(next) : translated(current);
+        },
 
-        translate: (percent, dir) =>
-            dir < 0
+        translate(percent, dir) {
+            return dir < 0
                 ? [
                       { transform: translate(percent * 100), zIndex: 0 },
                       { transform: translate(-30 * (1 - percent)), zIndex: -1 },
@@ -44,7 +90,8 @@ export default {
                 : [
                       { transform: translate(-30 * percent), zIndex: -1 },
                       { transform: translate(100 * (1 - percent)), zIndex: 0 },
-                  ],
+                  ];
+        },
     },
 };
 

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

@@ -280,23 +280,103 @@ export default {
                     return;
                 }
 
-                try {
-                    for (const loader of [
-                        loadImage,
-                        loadVideo,
-                        loadIframe,
-                        loadYouTube,
-                        loadVimeo,
-                    ]) {
-                        const content = await loader({ src, type, attrs, item, cmp: this });
-
-                        if (content) {
-                            this.setItem(item, content);
-                            return;
-                        }
+                let matches;
+                const iframeAttrs = {
+                    allowfullscreen: '',
+                    style: 'max-width: 100%; box-sizing: border-box;',
+                    'uk-responsive': '',
+                    'uk-video': Boolean(this.videoAutoplay),
+                };
+
+                // Image
+                if (type === 'image' || isImage(src)) {
+                    const img = createEl('img');
+
+                    wrapInPicture(img, item.sources);
+                    attr(img, {
+                        src,
+                        ...pick(item, ['alt', 'srcset', 'sizes']),
+                        ...attrs,
+                    });
+
+                    on(img, 'load', () => this.setItem(item, parent(img) || img));
+                    on(img, 'error', () => this.setError(item));
+
+                    // Video
+                } else if (type === 'video' || isVideo(src)) {
+                    const inline = this.videoAutoplay === 'inline';
+                    const video = createEl('video', {
+                        src,
+                        playsinline: '',
+                        controls: inline ? null : '',
+                        loop: inline ? '' : null,
+                        muted: inline ? '' : null,
+                        poster: this.videoAutoplay ? null : item.poster,
+                        'uk-video': Boolean(this.videoAutoplay),
+                        ...attrs,
+                    });
+
+                    on(video, 'loadedmetadata', () => this.setItem(item, video));
+                    on(video, 'error', () => this.setError(item));
+
+                    // Iframe
+                } else if (type === 'iframe' || src.match(/\.(html|php)($|\?)/i)) {
+                    this.setItem(
+                        item,
+                        createEl('iframe', {
+                            src,
+                            allowfullscreen: '',
+                            class: 'uk-lightbox-iframe',
+                            ...attrs,
+                        }),
+                    );
+
+                    // YouTube
+                } else if (
+                    (matches = src.match(
+                        /\/\/(?:.*?youtube(-nocookie)?\..*?(?:[?&]v=|\/shorts\/)|youtu\.be\/)([\w-]{11})[&?]?(.*)?/,
+                    ))
+                ) {
+                    this.setItem(
+                        item,
+                        createEl('iframe', {
+                            src: `https://www.youtube${matches[1] || ''}.com/embed/${matches[2]}${
+                                matches[3] ? `?${matches[3]}` : ''
+                            }`,
+                            width: 1920,
+                            height: 1080,
+                            ...iframeAttrs,
+                            ...attrs,
+                        }),
+                    );
+
+                    // Vimeo
+                } else if ((matches = src.match(/\/\/.*?vimeo\.[a-z]+\/(\d+)[&?]?(.*)?/))) {
+                    try {
+                        const { height, width } = await (
+                            await fetch(
+                                `https://vimeo.com/api/oembed.json?maxwidth=1920&url=${encodeURI(
+                                    src,
+                                )}`,
+                                { credentials: 'omit' },
+                            )
+                        ).json();
+
+                        this.setItem(
+                            item,
+                            createEl('iframe', {
+                                src: `https://player.vimeo.com/video/${matches[1]}${
+                                    matches[2] ? `?${matches[2]}` : ''
+                                }`,
+                                width,
+                                height,
+                                ...iframeAttrs,
+                                ...attrs,
+                            }),
+                        );
+                    } catch {
+                        this.setError(item);
                     }
-                } catch {
-                    this.setError(item);
                 }
             },
         },
@@ -372,111 +452,6 @@ function createEl(tag, attrs) {
     return el;
 }
 
-async function loadImage({ src, type, attrs, item }) {
-    if (type !== 'image' && !isImage(src)) {
-        return;
-    }
-
-    const img = createEl('img');
-
-    wrapInPicture(img, item.sources);
-    attr(img, {
-        src,
-        ...pick(item, ['alt', 'srcset', 'sizes']),
-        ...attrs,
-    });
-
-    await img.decode();
-
-    return parent(img) || img;
-}
-
-function loadVideo({ src, type, attrs, item, cmp }) {
-    if (type !== 'video' && !isVideo(src)) {
-        return;
-    }
-
-    const inline = cmp.videoAutoplay === 'inline';
-    const video = createEl('video', {
-        src,
-        playsinline: '',
-        controls: inline ? null : '',
-        loop: inline ? '' : null,
-        muted: inline ? '' : null,
-        poster: cmp.videoAutoplay ? null : item.poster,
-        'uk-video': Boolean(cmp.videoAutoplay),
-        ...attrs,
-    });
-
-    return new Promise((resolve, reject) => {
-        on(video, 'loadedmetadata', () => resolve(video));
-        on(video, 'error', reject);
-    });
-}
-
-function loadIframe({ src, type, attrs }) {
-    if (type !== 'iframe' && !/\.(html|php)($|\?)/i.test(src)) {
-        return;
-    }
-
-    return createEl('iframe', {
-        src,
-        allowfullscreen: '',
-        class: 'uk-lightbox-iframe',
-        ...attrs,
-    });
-}
-
-function loadYouTube({ src, attrs, cmp }) {
-    const matches = src.match(
-        /\/\/(?:.*?youtube(-nocookie)?\..*?(?:[?&]v=|\/shorts\/)|youtu\.be\/)([\w-]{11})[&?]?(.*)?/,
-    );
-
-    if (!matches) {
-        return;
-    }
-
-    return createEl('iframe', {
-        src: `https://www.youtube${matches[1] || ''}.com/embed/${matches[2]}${matches[3] ? `?${matches[3]}` : ''}`,
-        width: 1920,
-        height: 1080,
-        ...getIframeAttrs(cmp),
-        ...attrs,
-    });
-}
-
-async function loadVimeo({ src, attrs, cmp }) {
-    const matches = src.match(/\/\/.*?vimeo\.[a-z]+\/(\d+)[&?]?(.*)?/);
-
-    if (!matches) {
-        return;
-    }
-
-    const { height, width } = await (
-        await fetch(
-            `https://vimeo.com/api/oembed.json?maxwidth=1920&url=${encodeURIComponent(src)}`,
-            { credentials: 'omit' },
-        )
-    ).json();
-
-    return createEl('iframe', {
-        src: `https://player.vimeo.com/video/${matches[1]}${matches[2] ? `?${matches[2]}` : ''}`,
-        width,
-        height,
-        ...getIframeAttrs(cmp),
-        ...attrs,
-    });
-}
-
-function getIframeAttrs(cmp) {
-    return {
-        allowfullscreen: '',
-        style: 'max-width: 100%; box-sizing: border-box;',
-        'uk-responsive': '',
-        'uk-video': Boolean(cmp.videoAutoplay),
-    };
-}
-
 function toThumbnavItem(item, videoAutoplay) {
     const el =
         item.poster || (item.thumb && (item.type === 'image' || isImage(item.thumb)))

package/src/js/components/lightbox.js

@@ -98,11 +98,14 @@ function ensureThumb(toggles, items) {
             continue;
         }
 
-        const parent = [...parents(toggle).reverse(), toggle].find(
-            (parent) =>
-                this.$el.contains(parent) &&
-                (parent === toggle || $$(this.toggle, parent).length === 1),
-        );
+        const parent = parents(toggle)
+            .reverse()
+            .concat(toggle)
+            .find(
+                (parent) =>
+                    this.$el.contains(parent) &&
+                    (parent === toggle || $$(this.toggle, parent).length === 1),
+            );
 
         if (!parent) {
             continue;

package/src/js/components/tooltip.js

@@ -176,10 +176,8 @@ function getAlignment(el, target, [dir, align]) {
 
 function parseProps(options) {
     const { el, id, data } = options;
-    return {
-        delay: getData(el, 'delay'),
-        title: getData(el, 'title'),
+    return ['delay', 'title'].reduce((obj, key) => ({ [key]: getData(el, key), ...obj }), {
         ...parseOptions(getData(el, id), ['title']),
         ...data,
-    };
+    });
 }