uikit 3.25.27-dev.2d5695a → 3.25.27-dev.9e97c1f

package/src/js/components/marquee.js

@@ -0,0 +1,156 @@
+import {
+    $,
+    children,
+    css,
+    dimensions,
+    getIndex,
+    hasClass,
+    inBrowser,
+    isRtl,
+    pointerEnter,
+    pointerLeave,
+    toggleClass,
+    toPx,
+} from 'uikit-util';
+import { intersection, preloadMedia, 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);
+        },
+    },
+
+    watch: {
+        items() {
+            this.$emit();
+        },
+    },
+
+    observe: [
+        resize({
+            target: ({ $el, items }) => [$el, ...items],
+        }),
+        intersection({
+            handler(entries) {
+                let active;
+                for (const entry of entries) {
+                    entry.target.inert = !entry.isIntersecting;
+                    active ||= entry.isIntersecting && entry.target;
+                }
+
+                if (!active) {
+                    return;
+                }
+
+                const { items } = this;
+                const index = items.indexOf(active);
+                if (!~index) {
+                    return;
+                }
+
+                const direction = this.reverse ? 1 : -1;
+                for (let offset = 1; offset < items.length; offset++) {
+                    const item = items[getIndex(index + direction * offset, items)];
+                    if (item.inert) {
+                        preloadMedia(item);
+                        break;
+                    }
+                }
+            },
+            target: ({ items }) => items,
+            args: { intersecting: false },
+            options: ({ $el }) => ({ root: $el }),
+        }),
+    ],
+
+    methods: {
+        vertical() {
+            return hasClass(this.$el, `${this.$options.id}-vertical`);
+        },
+    },
+
+    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 = this.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 itemEnds = items.map((el) => dimensions(el)[dir[1]]);
+            const listEnd = Math[!vertical && isRtl ? 'min' : 'max'](...itemEnds);
+
+            for (const [index, el] of items.entries()) {
+                const elEnd = itemEnds[index];
+                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/notification.js

@@ -25,6 +25,7 @@ export default {
         message: '',
         status: '',
         timeout: 5000,
+        duration: 400,
         group: '',
         pos: 'top-center',
         clsContainer: 'uk-notification',
@@ -67,10 +68,11 @@ export default {
 
     async connected() {
         const margin = toFloat(css(this.$el, this.marginProp));
-        await Transition.start(css(this.$el, this.startProps), {
-            opacity: 1,
-            [this.marginProp]: margin,
-        });
+        await Transition.start(
+            css(this.$el, this.startProps),
+            { opacity: 1, [this.marginProp]: margin },
+            this.duration,
+        );
 
         if (this.timeout) {
             this.timer = setTimeout(this.close, this.timeout);
@@ -114,7 +116,7 @@ export default {
             }
 
             if (!immediate) {
-                await Transition.start(this.$el, this.startProps);
+                await Transition.start(this.$el, this.startProps, this.duration);
             }
 
             removeFn(this.$el);

package/src/js/core/accordion.js

@@ -6,6 +6,7 @@ import {
     css,
     dimensions,
     filter,
+    findIndex,
     getIndex,
     hasClass,
     includes,
@@ -22,17 +23,16 @@ import {
 import { generateId } from '../api/instance';
 import { lazyload } from '../api/observables';
 import Class from '../mixin/class';
+import Connect from '../mixin/connect';
 import { maybeDefaultPreventClick } from '../mixin/event';
-import Togglable from '../mixin/togglable';
 import { keyMap } from '../util/keys';
 
 const wrappers = new WeakMap();
 
 export default {
-    mixins: [Class, Togglable],
+    mixins: [Class, Connect],
 
     props: {
-        animation: Boolean,
         targets: String,
         active: null,
         collapsible: Boolean,
@@ -40,18 +40,25 @@ export default {
         toggle: String,
         content: String,
         offset: Number,
+        switcherConnect: String,
     },
 
     data: {
         targets: '> *',
         active: false,
-        animation: true,
+        animation: [true],
         collapsible: true,
         multiple: false,
         clsOpen: 'uk-open',
+        cls: 'uk-active',
         toggle: '.uk-accordion-title',
         content: '.uk-accordion-content',
         offset: 0,
+        switcherConnect: '',
+    },
+
+    beforeConnect() {
+        this.connect = this.$props.connect = this.switcherConnect;
     },
 
     computed: {
@@ -83,6 +90,13 @@ export default {
             }
         },
 
+        connectChildren() {
+            this.showConnects(
+                findIndex(this.items, (el) => hasClass(el, this.clsOpen)),
+                false,
+            );
+        },
+
         toggles() {
             this.$emit();
         },
@@ -149,52 +163,69 @@ export default {
                 continue;
             }
 
-            toggle.id = generateId(this, toggle);
-            content.id = generateId(this, content);
-
             const active = includes(activeItems, this.items[index]);
+
+            attr(content, {
+                id: generateId(this, content),
+                role: 'region',
+                'aria-labelledby': toggle.id,
+            });
+            if (isTag(content, 'ul')) {
+                attr(children(content), 'role', 'presentation');
+            }
+
+            const controls = [
+                content.id,
+                ...this.connects.map(({ children }) => children[index]?.id).filter(Boolean),
+            ];
+
             attr(toggle, {
                 role: isTag(toggle, 'a') ? 'button' : null,
-                'aria-controls': content.id,
+                'aria-controls': controls.join(' '),
                 'aria-expanded': active,
                 'aria-disabled': !this.collapsible && activeItems.length < 2 && active,
             });
-
-            attr(content, { role: 'region', 'aria-labelledby': toggle.id });
-            if (isTag(content, 'ul')) {
-                attr(children(content), 'role', 'presentation');
-            }
         }
     },
 
     methods: {
-        toggle(item, animate) {
-            item = this.items[getIndex(item, this.items)];
+        async toggle(item, animate) {
+            animate = animate !== false;
+
+            const next = getIndex(item, this.items);
+
+            item = this.items[next];
             let items = [item];
             const activeItems = filter(this.items, `.${this.clsOpen}`);
+            const isActive = includes(activeItems, item);
 
-            if (!this.multiple && !includes(activeItems, items[0])) {
-                items = items.concat(activeItems);
+            if (isActive && !this.collapsible && activeItems.length < 2) {
+                return;
             }
 
-            if (!this.collapsible && activeItems.length < 2 && includes(activeItems, item)) {
-                items = [];
+            if (!isActive && !this.multiple) {
+                items.push(...activeItems);
             }
 
-            return Promise.all(
-                items.map((el) =>
-                    this.toggleElement(el, !includes(activeItems, el), (el, show) => {
-                        toggleClass(el, this.clsOpen, show);
+            const toggle = (el) =>
+                this.toggleElement(el, !includes(activeItems, el), (el, show) => {
+                    toggleClass(el, this.clsOpen, show);
 
-                        if (animate === false || !this.animation) {
-                            hide($(this.content, el), !show);
-                            return;
-                        }
+                    if (!animate || !this.hasAnimation) {
+                        hide($(this.content, el), !show);
+                        return;
+                    }
 
-                        return transition(el, show, this);
-                    }),
-                ),
-            );
+                    return transition(el, show, this);
+                });
+
+            const hideIndex = () =>
+                findIndex(this.items, (i) => i !== item && includes(activeItems, i));
+
+            return Promise.all([
+                ...items.map(toggle),
+                this.showConnects(isActive ? hideIndex() : next, animate),
+            ]);
         },
     },
 };

package/src/js/core/alert.js

@@ -32,7 +32,7 @@ export default {
 
     methods: {
         async close() {
-            await this.toggleElement(this.$el, false, animate);
+            await this.toggleElement(this.$el, false, this.animation ? animate : false);
             this.$destroy(true);
         },
     },

package/src/js/core/drop.js

@@ -391,6 +391,7 @@ export default {
             this.$el.hidden = true;
 
             const viewports = this.target.map((target) => getViewport(this.$el, target));
+            const boundaryOffsets = this.boundary.map((el) => offset(el));
             const viewportOffset = this.getViewportOffset(this.$el);
 
             const dirs = [
@@ -402,7 +403,7 @@ export default {
                 if (this.axis !== axis && includes([axis, true], this.stretch)) {
                     css(this.$el, {
                         [prop]: Math.min(
-                            offset(this.boundary[i])[prop],
+                            boundaryOffsets[i][prop],
                             viewports[i][prop] - 2 * viewportOffset,
                         ),
                         [`overflow-${axis}`]: 'auto',
@@ -435,11 +436,11 @@ export default {
                             (targetOffset[start] > elOffset[start]
                                 ? targetOffset[this.inset ? end : start] -
                                   Math.max(
-                                      offset(this.boundary[i])[start],
+                                      boundaryOffsets[i][start],
                                       viewports[i][start] + viewportOffset,
                                   )
                                 : Math.min(
-                                      offset(this.boundary[i])[end],
+                                      boundaryOffsets[i][end],
                                       viewports[i][end] - viewportOffset,
                                   ) - targetOffset[this.inset ? start : end]) - positionOffset,
                         [`overflow-${axis}`]: 'auto',

package/src/js/core/dropnav.js

@@ -277,9 +277,9 @@ export default {
                 const drop = this.getDropdown(target);
                 const adjustHeight = () => {
                     const maxBottom = Math.max(
-                        ...parents(target, `.${this.clsDrop}`)
-                            .concat(target)
-                            .map((el) => offset(el).bottom),
+                        ...[...parents(target, `.${this.clsDrop}`), target].map(
+                            (el) => offset(el).bottom,
+                        ),
                     );
 
                     offset(this.dropbar, {

package/src/js/core/grid.js

@@ -1,14 +1,4 @@
-import {
-    addClass,
-    css,
-    hasClass,
-    isRtl,
-    scrolledOver,
-    sumBy,
-    toFloat,
-    toggleClass,
-    toPx,
-} from 'uikit-util';
+import { addClass, css, isRtl, scrolledOver, sumBy, toFloat, toggleClass, toPx } from 'uikit-util';
 import { scroll } from '../api/observables';
 import Class from '../mixin/class';
 import Margin from './margin';
@@ -29,7 +19,8 @@ export default {
     },
 
     data: {
-        margin: 'uk-grid-margin',
+        margin: '',
+        firstRow: 'uk-first-row',
         clsStack: 'uk-grid-stack',
         masonry: false,
         parallax: 0,
@@ -56,7 +47,7 @@ export default {
         {
             read(data) {
                 const { rows } = data;
-                let { masonry, parallax, parallaxJustify, margin } = this;
+                let { masonry, parallax, parallaxJustify } = this;
 
                 parallax = Math.max(0, toPx(parallax));
 
@@ -71,7 +62,7 @@ export default {
                     return (data.translates = data.scrollColumns = false);
                 }
 
-                let gutter = getGutter(rows, margin);
+                let gutter = toFloat(css(this.$el, 'row-gap'));
 
                 let columns;
                 let translates;
@@ -185,11 +176,6 @@ function applyMasonry(rows, gutter, next) {
     return [columns, translates];
 }
 
-function getGutter(rows, cls) {
-    const node = rows.flat().find((el) => hasClass(el, cls));
-    return toFloat(node ? css(node, 'marginTop') : css(rows[0][0], 'paddingLeft'));
-}
-
 function transpose(rows) {
     const columns = [];
     for (const row of rows) {

package/src/js/core/margin.js

@@ -4,11 +4,13 @@ import { mutation, resize } from '../api/observables';
 export default {
     props: {
         margin: String,
+        firstRow: Boolean,
         firstColumn: Boolean,
     },
 
     data: {
         margin: 'uk-margin-small-top',
+        firstRow: false,
         firstColumn: 'uk-first-column',
     },
 
@@ -52,6 +54,7 @@ export default {
             for (const row of rows) {
                 for (const el of row) {
                     toggleClass(el, this.margin, rows[0] !== row);
+                    toggleClass(el, this.firstRow, rows[0] === row);
                     toggleClass(el, this.firstColumn, row[isRtl ? row.length - 1 : 0] === el);
                 }
             }

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

@@ -1,4 +1,4 @@
-import { css, dimensions, height, isVisible } from 'uikit-util';
+import { boxModelAdjust, css, dimensions, isVisible } from 'uikit-util';
 import { resize } from '../api/observables';
 import Class from '../mixin/class';
 
@@ -48,3 +48,7 @@ export default {
         events: ['resize'],
     },
 };
+
+function height(el) {
+    return dimensions(el).height - boxModelAdjust(el, 'height', css(el, 'boxSizing'));
+}

package/src/js/core/sticky.js

@@ -464,7 +464,7 @@ function parseProp(value, el, propOffset, padding) {
         return 0;
     }
 
-    if (isNumeric(value) || (isString(value) && value.match(/^-?\d/))) {
+    if (isNumeric(value) || (isString(value) && /^-?\d/.test(value))) {
         return propOffset + toPx(value, 'height', el, true);
     } else {
         const refElement = value === true ? getVisibleParent(el) : query(value, el);

package/src/js/core/switcher.js

@@ -9,27 +9,23 @@ import {
     getIndex,
     hasClass,
     isNumeric,
-    isTag,
     matches,
     queryAll,
-    toArray,
     toggleClass,
 } from 'uikit-util';
-import { generateId } from '../api/instance';
-import { lazyload, swipe } from '../api/observables';
+import { swipe } from '../api/observables';
+import Connect from '../mixin/connect';
 import { maybeDefaultPreventClick } from '../mixin/event';
-import Togglable from '../mixin/togglable';
 import { getNavigationIndex, keyMap } from '../util/keys';
 
 const selDisabled = '.uk-disabled *, .uk-disabled, [disabled]';
 
 export default {
-    mixins: [Togglable],
+    mixins: [Connect],
 
     args: 'connect',
 
     props: {
-        connect: String,
         toggle: String,
         itemNav: String,
         active: Number,
@@ -42,7 +38,6 @@ export default {
         toggle: '> * > :first-child',
         itemNav: false,
         active: 0,
-        cls: 'uk-active',
         attrItem: 'uk-switcher-item',
         selVertical: '.uk-nav',
         followFocus: false,
@@ -50,15 +45,6 @@ export default {
     },
 
     computed: {
-        connects: {
-            get: ({ connect }, $el) => queryAll(connect, $el),
-            observe: ({ connect }) => connect,
-        },
-
-        connectChildren() {
-            return this.connects.flatMap((el) => children(el));
-        },
-
         toggles: ({ toggle }, $el) => $$(toggle, $el),
 
         children(_, $el) {
@@ -95,10 +81,7 @@ export default {
         this.$el.role = 'tablist';
     },
 
-    observe: [
-        lazyload({ targets: ({ connectChildren }) => connectChildren }),
-        swipe({ target: ({ connects }) => connects, filter: ({ swiping }) => swiping }),
-    ],
+    observe: swipe({ target: ({ connects }) => connects, filter: ({ swiping }) => swiping }),
 
     events: [
         {
@@ -173,28 +156,17 @@ export default {
     ],
 
     update() {
-        for (const el of this.connects) {
-            if (isTag(el, 'ul')) {
-                el.role = 'presentation';
-            }
-        }
         attr(children(this.$el), 'role', 'presentation');
 
         for (const index in this.toggles) {
-            const toggle = this.toggles[index];
-            const item = this.connects[0]?.children[index];
-
-            toggle.role = 'tab';
+            const controls = this.connects
+                .map(({ children }) => children[index]?.id)
+                .filter(Boolean);
 
-            if (!item) {
-                continue;
-            }
-
-            toggle.id = generateId(this, toggle);
-            item.id = generateId(this, item);
-
-            attr(toggle, 'aria-controls', item.id);
-            attr(item, { role: 'tabpanel', 'aria-labelledby': toggle.id });
+            attr(this.toggles[index], {
+                role: 'tab',
+                'aria-controls': controls.join(' '),
+            });
         }
         attr(this.$el, 'aria-orientation', matches(this.$el, this.selVertical) ? 'vertical' : null);
     },
@@ -233,16 +205,7 @@ export default {
                 });
             });
 
-            const animate = prev >= 0 && prev !== next;
-            this.connects.forEach(async ({ children }) => {
-                const actives = toArray(children).filter(
-                    (child, i) => i !== next && hasClass(child, this.cls),
-                );
-
-                if (await this.toggleElement(actives, false, animate)) {
-                    await this.toggleElement(children[next], true, animate);
-                }
-            });
+            return this.showConnects(next, prev >= 0 && prev !== next);
         },
     },
 };