uikit 3.25.27-dev.9e97c1f → 3.25.27

package/src/js/core/accordion.js

@@ -6,7 +6,6 @@ import {
     css,
     dimensions,
     filter,
-    findIndex,
     getIndex,
     hasClass,
     includes,
@@ -23,16 +22,17 @@ 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, Connect],
+    mixins: [Class, Togglable],
 
     props: {
+        animation: Boolean,
         targets: String,
         active: null,
         collapsible: Boolean,
@@ -40,25 +40,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: {
@@ -90,13 +83,6 @@ export default {
             }
         },
 
-        connectChildren() {
-            this.showConnects(
-                findIndex(this.items, (el) => hasClass(el, this.clsOpen)),
-                false,
-            );
-        },
-
         toggles() {
             this.$emit();
         },
@@ -163,69 +149,52 @@ export default {
                 continue;
             }
 
-            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),
-            ];
+            toggle.id = generateId(this, toggle);
+            content.id = generateId(this, content);
 
+            const active = includes(activeItems, this.items[index]);
             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 = () =>
-                findIndex(this.items, (i) => i !== item && includes(activeItems, i));
-
-            return Promise.all([
-                ...items.map(toggle),
-                this.showConnects(isActive ? hideIndex() : next, animate),
-            ]);
+                        return transition(el, show, this);
+                    }),
+                ),
+            );
         },
     },
 };

package/src/js/core/drop.js

@@ -391,7 +391,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 = [
@@ -403,7 +402,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',
@@ -436,11 +435,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',

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}`), 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/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/scroll.js

@@ -1,9 +1,12 @@
 import {
     $,
+    attr,
     getTargetedElement,
+    isFocusable,
     isSameSiteAnchor,
     off,
     on,
+    once,
     scrollIntoView,
     trigger,
 } from 'uikit-util';
@@ -31,6 +34,14 @@ export default {
 
             if (trigger(this.$el, 'beforescroll', [this, el])) {
                 await scrollIntoView(el, { offset: this.offset });
+
+                if (!isFocusable(el)) {
+                    attr(el, 'tabindex', '-1');
+                    once(el, 'blur', () => attr(el, 'tabindex', null));
+                }
+
+                el.focus({ preventScroll: true });
+
                 trigger(this.$el, 'scrolled', [this, el]);
             }
         },

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,23 +9,27 @@ import {
     getIndex,
     hasClass,
     isNumeric,
+    isTag,
     matches,
     queryAll,
+    toArray,
     toggleClass,
 } from 'uikit-util';
-import { swipe } from '../api/observables';
-import Connect from '../mixin/connect';
+import { generateId } from '../api/instance';
+import { lazyload, swipe } from '../api/observables';
 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: [Connect],
+    mixins: [Togglable],
 
     args: 'connect',
 
     props: {
+        connect: String,
         toggle: String,
         itemNav: String,
         active: Number,
@@ -38,6 +42,7 @@ export default {
         toggle: '> * > :first-child',
         itemNav: false,
         active: 0,
+        cls: 'uk-active',
         attrItem: 'uk-switcher-item',
         selVertical: '.uk-nav',
         followFocus: false,
@@ -45,6 +50,15 @@ 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) {
@@ -81,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: [
         {
@@ -156,17 +173,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 controls = this.connects
-                .map(({ children }) => children[index]?.id)
-                .filter(Boolean);
+            const toggle = this.toggles[index];
+            const item = this.connects[0]?.children[index];
 
-            attr(this.toggles[index], {
-                role: 'tab',
-                'aria-controls': controls.join(' '),
-            });
+            toggle.role = 'tab';
+
+            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.$el, 'aria-orientation', matches(this.$el, this.selVertical) ? 'vertical' : null);
     },
@@ -205,7 +233,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);
+                }
+            });
         },
     },
 };