uikit 3.25.18-dev.9fa57fb → 3.25.18-dev.f49c4ef

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.18-dev.9fa57fb",
+    "version": "3.25.18-dev.f49c4ef",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/js/api/component.js

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

package/src/js/api/observables.js

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

package/src/js/api/options.js

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

package/src/js/api/props.js

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

package/src/js/api/state.js

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

package/src/js/components/index.js

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

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

@@ -280,103 +280,23 @@ export default {
                     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);
+                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;
+                        }
                     }
+                } catch {
+                    this.setError(item);
                 }
             },
         },
@@ -452,6 +372,111 @@ 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,14 +98,11 @@ function ensureThumb(toggles, items) {
             continue;
         }
 
-        const parent = parents(toggle)
-            .reverse()
-            .concat(toggle)
-            .find(
-                (parent) =>
-                    this.$el.contains(parent) &&
-                    (parent === toggle || $$(this.toggle, parent).length === 1),
-            );
+        const parent = [...parents(toggle).reverse(), toggle].find(
+            (parent) =>
+                this.$el.contains(parent) &&
+                (parent === toggle || $$(this.toggle, parent).length === 1),
+        );
 
         if (!parent) {
             continue;

package/src/js/components/marquee.js

@@ -0,0 +1,123 @@
+import {
+    $,
+    children,
+    css,
+    dimensions,
+    hasClass,
+    inBrowser,
+    isRtl,
+    pointerEnter,
+    pointerLeave,
+    toggleClass,
+    toPx,
+} from 'uikit-util';
+import { intersection, resize } from '../api/observables';
+import Class from '../mixin/class';
+
+const hasAnimationApi = inBrowser && window.Animation;
+
+export default {
+    mixins: [Class],
+
+    props: {
+        velocity: Number,
+        start: Number,
+        reverse: Boolean,
+        pause: Boolean,
+        pauseVelocity: Number,
+        fadeSize: null,
+    },
+
+    data: {
+        velocity: 25,
+        start: 0,
+        reverse: false,
+        pause: false,
+        pauseVelocity: 10,
+        selList: '.uk-marquee-items',
+        fadeSize: 0,
+    },
+
+    computed: {
+        list: ({ selList }, $el) => $(selList, $el),
+        items() {
+            return children(this.list);
+        },
+    },
+
+    observe: [
+        resize({
+            target: ({ $el, items }) => [$el, ...items],
+        }),
+        intersection({
+            handler(entries) {
+                for (const entry of entries) {
+                    entry.target.inert = !entry.isIntersecting;
+                }
+            },
+            target: ({ items }) => items,
+            args: { intersecting: false },
+            options: ({ $el }) => ({ root: $el }),
+        }),
+    ],
+
+    events: {
+        name: [pointerEnter, pointerLeave],
+        el: ({ $el }) => $el,
+        self: true,
+        filter: ({ pause }) => hasAnimationApi && pause,
+        handler(e) {
+            for (const el of this.items) {
+                for (const animation of el.getAnimations()) {
+                    animation.playbackRate =
+                        e.type === pointerEnter ? this.pauseVelocity / this.velocity : 1;
+                }
+            }
+        },
+    },
+
+    update: {
+        write() {
+            const prefix = this.$options.id;
+            const items = this.items;
+            const vertical = hasClass(this.$el, `${prefix}-vertical`);
+
+            css(items, 'offset', 'none');
+
+            const dir = vertical ? ['top', 'bottom'] : ['left', 'right'];
+            if (!vertical && isRtl) {
+                dir.reverse();
+            }
+
+            const listStart = dimensions(this.list)[dir[0]];
+            const listEnd = Math[!vertical && isRtl ? 'min' : 'max'](
+                ...items.map((el) => dimensions(el)[dir[1]]),
+            );
+
+            for (const el of items) {
+                const elEnd = dimensions(el)[dir[1]];
+                const line1 = listEnd - elEnd;
+                const line2 = elEnd - listStart;
+                const path = vertical
+                    ? `"M0 0 v${line1}M0 ${-line2} v${line2}"`
+                    : `"M0 0 h${line1}M${-line2} 0 h${line2}"`;
+                css(el, `--${prefix}-path`, path);
+            }
+
+            css(this.$el, {
+                [`--${prefix}-duration`]: `${Math.abs(listStart - listEnd) / this.velocity}s`,
+                [`--${prefix}-start`]: this.start,
+                [`--${prefix}-direction`]: this.reverse ? 'reverse' : 'normal',
+                '--uk-overflow-fade-size': this.fadeSize
+                    ? `${toPx(this.fadeSize, vertical ? 'height' : 'width', this.$el, true)}px`
+                    : '',
+            });
+
+            toggleClass(this.$el, `${prefix}-fade`, this.fadeSize);
+
+            css(items, 'offset', '');
+        },
+
+        events: ['resize'],
+    },
+};

package/src/js/components/slider.js

@@ -127,7 +127,7 @@ export default {
 
     observe: [
         resize({
-            target: ({ list, $el }) => [$el, ...children(list)],
+            target: ({ slides, $el }) => [$el, ...slides],
         }),
         intersection({
             handler(entries) {
@@ -135,7 +135,7 @@ export default {
                     target.ariaHidden = target.inert = !isIntersecting;
                 }
             },
-            target: ({ list }) => children(list),
+            target: ({ slides }) => slides,
             args: { intersecting: false },
             options: ({ $el }) => ({ root: $el, rootMargin: '0px -10px' }),
         }),

package/src/js/components/tooltip.js

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