uikit 3.25.20-dev.e4f47fc → 3.25.20

package/src/js/core/accordion.js

@@ -6,7 +6,6 @@ import {
     css,
     dimensions,
     filter,
-    findIndex,
     getIndex,
     hasClass,
     includes,
@@ -23,14 +22,15 @@ 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';
 
 export default {
-    mixins: [Class, Connect],
+    mixins: [Class, Togglable],
 
     props: {
+        animation: Boolean,
         targets: String,
         active: null,
         collapsible: Boolean,
@@ -38,25 +38,18 @@ 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: {
@@ -86,13 +79,6 @@ export default {
             }
         },
 
-        connectChildren() {
-            this.showConnects(
-                findIndex(this.items, (el) => hasClass(el, this.clsOpen)),
-                false,
-            );
-        },
-
         toggles() {
             this.$emit();
         },
@@ -160,86 +146,51 @@ export default {
             }
 
             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];
-            for (const { children } of this.connects) {
-                const item = children[index];
-
-                if (!item) {
-                    continue;
-                }
-
-                attr(item, {
-                    id: generateId(this, item),
-                    role: 'tabpanel',
-                    'aria-labelledby': toggle.id,
-                });
-                controls.push(item.id);
-            }
-
             attr(toggle, {
                 role: isTag(toggle, 'a') ? 'button' : null,
-                'aria-controls': controls.join(' '),
+                'aria-controls': content.id,
                 '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: {
-        async toggle(item, animate) {
-            animate = animate !== false;
-
-            const next = getIndex(item, this.items);
-
-            item = this.items[next];
+        toggle(item, animate) {
+            item = this.items[getIndex(item, this.items)];
             let items = [item];
             const activeItems = filter(this.items, `.${this.clsOpen}`);
-            const isActive = includes(activeItems, item);
 
-            if (isActive && !this.collapsible && activeItems.length < 2) {
-                return;
+            if (!this.multiple && !includes(activeItems, items[0])) {
+                items = items.concat(activeItems);
             }
 
-            if (!isActive && !this.multiple) {
-                items.push(...activeItems);
+            if (!this.collapsible && activeItems.length < 2 && includes(activeItems, item)) {
+                items = [];
             }
 
-            const toggle = (el) =>
-                this.toggleElement(el, !includes(activeItems, el), (el, show) => {
-                    toggleClass(el, this.clsOpen, show);
-
-                    if (!animate || !this.hasAnimation) {
-                        hide($(this.content, el), !show);
-                        return;
-                    }
+            return Promise.all(
+                items.map((el) =>
+                    this.toggleElement(el, !includes(activeItems, el), (el, show) => {
+                        toggleClass(el, this.clsOpen, show);
 
-                    return transition(el, show, this);
-                });
+                        if (animate === false || !this.animation) {
+                            hide($(this.content, el), !show);
+                            return;
+                        }
 
-            const hideIndex = () => {
-                const index = findIndex(children(this.connects[0]), (el) => hasClass(el, this.cls));
-
-                return index === next
-                    ? findIndex(this.items, (i) => i !== item && includes(activeItems, i))
-                    : index;
-            };
-
-            return Promise.all([
-                ...items.map(toggle),
-                this.showConnects(isActive ? hideIndex() : next, animate),
-            ]);
+                        return transition(el, show, this);
+                    }),
+                ),
+            );
         },
     },
 };

package/src/js/core/drop.js

@@ -392,7 +392,6 @@ 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 = [
@@ -404,7 +403,7 @@ export default {
                 if (this.axis !== axis && includes([axis, true], this.stretch)) {
                     css(this.$el, {
                         [prop]: Math.min(
-                            boundaryOffsets[i][prop],
+                            offset(this.boundary[i])[prop],
                             viewports[i][prop] - 2 * viewportOffset,
                         ),
                         [`overflow-${axis}`]: 'auto',
@@ -437,11 +436,11 @@ export default {
                             (targetOffset[start] > elOffset[start]
                                 ? targetOffset[this.inset ? end : start] -
                                   Math.max(
-                                      boundaryOffsets[i][start],
+                                      offset(this.boundary[i])[start],
                                       viewports[i][start] + viewportOffset,
                                   )
                                 : Math.min(
-                                      boundaryOffsets[i][end],
+                                      offset(this.boundary[i])[end],
                                       viewports[i][end] - viewportOffset,
                                   ) - targetOffset[this.inset ? start : end]) - positionOffset,
                         [`overflow-${axis}`]: 'auto',
@@ -477,7 +476,7 @@ function listenForResize(drop) {
         observeViewportResize(update),
         observeResize(overflowParents(drop.$el).concat(drop.target), update),
     ];
-    return () => off.forEach((observer) => observer.disconnect());
+    return () => off.map((observer) => observer.disconnect());
 }
 
 function listenForScroll(drop, fn = () => drop.$emit()) {

package/src/js/core/dropnav.js

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

package/src/js/core/grid.js

@@ -1,4 +1,14 @@
-import { addClass, css, isRtl, scrolledOver, sumBy, toFloat, toggleClass, toPx } from 'uikit-util';
+import {
+    addClass,
+    css,
+    hasClass,
+    isRtl,
+    scrolledOver,
+    sumBy,
+    toFloat,
+    toggleClass,
+    toPx,
+} from 'uikit-util';
 import { scroll } from '../api/observables';
 import Class from '../mixin/class';
 import Margin from './margin';
@@ -19,8 +29,7 @@ export default {
     },
 
     data: {
-        margin: '',
-        firstRow: 'uk-first-row',
+        margin: 'uk-grid-margin',
         clsStack: 'uk-grid-stack',
         masonry: false,
         parallax: 0,
@@ -47,7 +56,7 @@ export default {
         {
             read(data) {
                 const { rows } = data;
-                let { masonry, parallax, parallaxJustify } = this;
+                let { masonry, parallax, parallaxJustify, margin } = this;
 
                 parallax = Math.max(0, toPx(parallax));
 
@@ -62,7 +71,7 @@ export default {
                     return (data.translates = data.scrollColumns = false);
                 }
 
-                let gutter = toFloat(css(this.$el, 'row-gap'));
+                let gutter = getGutter(rows, margin);
 
                 let columns;
                 let translates;
@@ -176,6 +185,11 @@ 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/height-match.js

@@ -20,7 +20,8 @@ export default {
     },
 
     observe: resize({
-        target: ({ $el, elements }) => [$el, ...elements.flatMap((el) => [el, ...el.children])],
+        target: ({ $el, elements }) =>
+            elements.reduce((elements, el) => elements.concat(el, ...el.children), [$el]),
     }),
 
     events: {

package/src/js/core/margin.js

@@ -4,13 +4,11 @@ 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',
     },
 
@@ -54,7 +52,6 @@ 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-fade.js

@@ -55,11 +55,11 @@ export default {
 
     update: {
         read() {
-            return {
-                overflow: ['Width', 'Height'].map(
-                    (prop) => this.$el[`scroll${prop}`] - this.$el[`client${prop}`],
-                ),
-            };
+            const overflow = [];
+            for (const prop of ['Width', 'Height']) {
+                overflow.push(this.$el[`scroll${prop}`] - this.$el[`client${prop}`]);
+            }
+            return { overflow };
         },
 
         write({ overflow }) {

package/src/js/core/sticky.js

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

package/src/js/core/switcher.js

@@ -9,24 +9,27 @@ import {
     getIndex,
     hasClass,
     isNumeric,
+    isTag,
     matches,
     queryAll,
+    toArray,
     toggleClass,
 } from 'uikit-util';
 import { generateId } from '../api/instance';
-import { swipe } from '../api/observables';
-import Connect from '../mixin/connect';
+import { lazyload, swipe } from '../api/observables';
 import { maybeDefaultPreventClick } from '../mixin/event';
+import Togglable from '../mixin/togglable';
 import { keyMap } from '../util/keys';
 
 const selDisabled = '.uk-disabled *, .uk-disabled, [disabled]';
 
 export default {
-    mixins: [Connect],
+    mixins: [Togglable],
 
     args: 'connect',
 
     props: {
+        connect: String,
         toggle: String,
         itemNav: String,
         active: Number,
@@ -39,6 +42,7 @@ export default {
         toggle: '> * > :first-child',
         itemNav: false,
         active: 0,
+        cls: 'uk-active',
         attrItem: 'uk-switcher-item',
         selVertical: '.uk-nav',
         followFocus: false,
@@ -46,6 +50,15 @@ export default {
     },
 
     computed: {
+        connects: {
+            get: ({ connect }, $el) => queryAll(connect, $el),
+            observe: ({ connect }) => connect,
+        },
+
+        connectChildren() {
+            return this.connects.map((el) => children(el)).flat();
+        },
+
         toggles: ({ toggle }, $el) => $$(toggle, $el),
 
         children(_, $el) {
@@ -82,7 +95,10 @@ export default {
         this.$el.role = 'tablist';
     },
 
-    observe: swipe({ target: ({ connects }) => connects, filter: ({ swiping }) => swiping }),
+    observe: [
+        lazyload({ targets: ({ connectChildren }) => connectChildren }),
+        swipe({ target: ({ connects }) => connects, filter: ({ swiping }) => swiping }),
+    ],
 
     events: [
         {
@@ -164,33 +180,28 @@ 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];
-            toggle.id = generateId(this, toggle);
-
-            const controls = [];
+            const item = this.connects[0]?.children[index];
 
-            for (const { children } of this.connects) {
-                const item = children[index];
+            toggle.role = 'tab';
 
-                if (!item) {
-                    continue;
-                }
-
-                attr(item, {
-                    id: generateId(this, item),
-                    role: 'tabpanel',
-                    'aria-labelledby': toggle.id,
-                });
-                controls.push(item.id);
+            if (!item) {
+                continue;
             }
 
-            attr(toggle, {
-                role: 'tab',
-                'aria-controls': controls.join(' '),
-            });
+            toggle.id = generateId(this, toggle);
+            item.id = generateId(this, item);
+
+            toggle.ariaControls = item.id;
+            attr(item, { role: 'tabpanel', 'aria-labelledby': toggle.id });
         }
         attr(this.$el, 'aria-orientation', matches(this.$el, this.selVertical) ? 'vertical' : null);
     },
@@ -229,7 +240,16 @@ export default {
                 });
             });
 
-            return this.showConnects(next, prev >= 0 && prev !== next);
+            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);
+                }
+            });
         },
     },
 };