uikit 3.25.17-dev.80dfe87 → 3.25.17-dev.8c70e44

package/src/js/core/accordion.js

@@ -6,6 +6,7 @@ import {
     css,
     dimensions,
     filter,
+    findIndex,
     getIndex,
     hasClass,
     includes,
@@ -22,15 +23,14 @@ 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, Togglable],
+    mixins: [Class, Connect],
 
     props: {
-        animation: Boolean,
         targets: String,
         active: null,
         collapsible: Boolean,
@@ -38,18 +38,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: {
@@ -79,6 +86,13 @@ export default {
             }
         },
 
+        connectChildren() {
+            this.showConnects(
+                findIndex(this.items, (el) => hasClass(el, this.clsOpen)),
+                false,
+            );
+        },
+
         toggles() {
             this.$emit();
         },
@@ -146,51 +160,86 @@ 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': 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 = () => {
+                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),
+            ]);
         },
     },
 };

package/src/js/core/drop.js

@@ -392,6 +392,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 = [
@@ -403,7 +404,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',
@@ -436,11 +437,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',
@@ -476,7 +477,7 @@ function listenForResize(drop) {
         observeViewportResize(update),
         observeResize(overflowParents(drop.$el).concat(drop.target), update),
     ];
-    return () => off.map((observer) => observer.disconnect());
+    return () => off.forEach((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}`)
-                            .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/height-match.js

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

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-fade.js

@@ -55,11 +55,11 @@ export default {
 
     update: {
         read() {
-            const overflow = [];
-            for (const prop of ['Width', 'Height']) {
-                overflow.push(this.$el[`scroll${prop}`] - this.$el[`client${prop}`]);
-            }
-            return { overflow };
+            return {
+                overflow: ['Width', 'Height'].map(
+                    (prop) => this.$el[`scroll${prop}`] - this.$el[`client${prop}`],
+                ),
+            };
         },
 
         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) && 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,24 @@ 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 { 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 +39,6 @@ export default {
         toggle: '> * > :first-child',
         itemNav: false,
         active: 0,
-        cls: 'uk-active',
         attrItem: 'uk-switcher-item',
         selVertical: '.uk-nav',
         followFocus: false,
@@ -50,15 +46,6 @@ 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) {
@@ -95,10 +82,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: [
         {
@@ -180,28 +164,33 @@ 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.id = generateId(this, toggle);
 
-            toggle.role = 'tab';
+            const controls = [];
 
-            if (!item) {
-                continue;
-            }
+            for (const { children } of this.connects) {
+                const item = children[index];
 
-            toggle.id = generateId(this, toggle);
-            item.id = generateId(this, item);
+                if (!item) {
+                    continue;
+                }
+
+                attr(item, {
+                    id: generateId(this, item),
+                    role: 'tabpanel',
+                    'aria-labelledby': toggle.id,
+                });
+                controls.push(item.id);
+            }
 
-            toggle.ariaControls = item.id;
-            attr(item, { role: 'tabpanel', 'aria-labelledby': toggle.id });
+            attr(toggle, {
+                role: 'tab',
+                'aria-controls': controls.join(' '),
+            });
         }
         attr(this.$el, 'aria-orientation', matches(this.$el, this.selVertical) ? 'vertical' : null);
     },
@@ -240,16 +229,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);
         },
     },
 };