uikit 3.16.24 → 3.16.25-dev.12f581d90

package/src/js/core/svg.js

@@ -1,6 +1,3 @@
-import Svg from '../mixin/svg';
-import { getMaxPathLength } from '../util/svg';
-import { mutation } from '../api/observables';
 import {
     $,
     addClass,
@@ -13,6 +10,9 @@ import {
     removeAttr,
     startsWith,
 } from 'uikit-util';
+import { mutation } from '../api/observables';
+import Svg from '../mixin/svg';
+import { getMaxPathLength } from '../util/svg';
 
 export default {
     mixins: [Svg],
@@ -63,7 +63,7 @@ export default {
         async getSvg() {
             if (isTag(this.$el, 'img') && !this.$el.complete && this.$el.loading === 'lazy') {
                 return new Promise((resolve) =>
-                    once(this.$el, 'load', () => resolve(this.getSvg()))
+                    once(this.$el, 'load', () => resolve(this.getSvg())),
                 );
             }
 

package/src/js/core/switcher.js

@@ -1,7 +1,3 @@
-import Togglable from '../mixin/togglable';
-import { keyMap } from '../util/keys';
-import { generateId } from '../api/instance';
-import { lazyload, swipe } from '../api/observables';
 import {
     $$,
     attr,
@@ -21,6 +17,10 @@ import {
     toggleClass,
     within,
 } from 'uikit-util';
+import { generateId } from '../api/instance';
+import { lazyload, swipe } from '../api/observables';
+import Togglable from '../mixin/togglable';
+import { keyMap } from '../util/keys';
 
 const selDisabled = '.uk-disabled *, .uk-disabled, [disabled]';
 
@@ -65,7 +65,7 @@ export default {
 
         children() {
             return children(this.$el).filter((child) =>
-                this.toggles.some((toggle) => within(toggle, child))
+                this.toggles.some((toggle) => within(toggle, child)),
             );
         },
     },
@@ -227,7 +227,7 @@ export default {
             const next = getIndex(
                 !isNode(item) || includes(toggles, item) ? item : 0,
                 toggles,
-                getIndex(this.toggles[prev], toggles)
+                getIndex(this.toggles[prev], toggles),
             );
             const active = getIndex(toggles[next], this.toggles);
 
@@ -242,7 +242,7 @@ export default {
             const animate = prev >= 0 && prev !== next;
             this.connects.forEach(async ({ children }) => {
                 const actives = toArray(children).filter(
-                    (child, i) => i !== active && hasClass(child, this.cls)
+                    (child, i) => i !== active && hasClass(child, this.cls),
                 );
 
                 await this.toggleElement(actives, false, animate);

package/src/js/core/tab.js

@@ -1,6 +1,6 @@
-import Switcher from './switcher';
-import Class from '../mixin/class';
 import { hasClass } from 'uikit-util';
+import Class from '../mixin/class';
+import Switcher from './switcher';
 
 export default {
     mixins: [Class],

package/src/js/core/toggle.js

@@ -1,6 +1,3 @@
-import Media from '../mixin/media';
-import Togglable from '../mixin/togglable';
-import { lazyload } from '../api/observables';
 import {
     attr,
     closest,
@@ -20,6 +17,9 @@ import {
     trigger,
     within,
 } from 'uikit-util';
+import { lazyload } from '../api/observables';
+import Media from '../mixin/media';
+import Togglable from '../mixin/togglable';
 
 const KEY_SPACE = 32;
 
@@ -85,7 +85,7 @@ export default {
                     pointerDown,
                     () => trigger(this.$el, 'blur'),
                     true,
-                    (e) => !within(e.target, this.$el)
+                    (e) => !within(e.target, this.$el),
                 );
 
                 // Prevent initial click to prevent double toggle through focus + click
@@ -222,7 +222,7 @@ export default {
             if (await this.toggleElement(toggled, false)) {
                 await this.toggleElement(
                     this.target.filter((el) => !includes(toggled, el)),
-                    true
+                    true,
                 );
             }
         },

package/src/js/core/video.js

@@ -1,5 +1,5 @@
-import { intersection, resize } from '../api/observables';
 import { hasAttr, isInView, isTag, isVideo, isVisible, mute, pause, play } from 'uikit-util';
+import { intersection, resize } from '../api/observables';
 
 export default {
     args: 'autoplay',

package/src/js/mixin/animate.js

@@ -1,6 +1,6 @@
+import { noop } from 'uikit-util';
 import fade from './internal/animate-fade';
 import slide from './internal/animate-slide';
-import { noop } from 'uikit-util';
 
 export default {
     props: {

package/src/js/mixin/i18n.js

@@ -13,7 +13,7 @@ export default {
             return (
                 (this.i18n?.[key] || this.$options.i18n?.[key])?.replace(
                     /%s/g,
-                    () => params[i++] || ''
+                    () => params[i++] || '',
                 ) || ''
             );
         },

package/src/js/mixin/internal/animate-fade.js

@@ -1,4 +1,3 @@
-import { getRows } from '../../core/margin';
 import {
     addClass,
     children,
@@ -12,6 +11,7 @@ import {
     toNumber,
     Transition,
 } from 'uikit-util';
+import { getRows } from '../../core/margin';
 
 const clsLeave = 'uk-transition-leave';
 const clsEnter = 'uk-transition-enter';
@@ -21,7 +21,7 @@ export default function fade(action, target, duration, stagger = 0) {
     const propsIn = { opacity: 1 };
     const propsOut = { opacity: 0 };
 
-    const wrapIndexFn = (fn) => () => index === transitionIndex(target) ? fn() : Promise.reject();
+    const wrapIndexFn = (fn) => () => (index === transitionIndex(target) ? fn() : Promise.reject());
 
     const leaveFn = wrapIndexFn(async () => {
         addClass(target, clsLeave);
@@ -33,12 +33,12 @@ export default function fade(action, target, duration, stagger = 0) {
                         setTimeout(
                             () =>
                                 Transition.start(child, propsOut, duration / 2, 'ease').then(
-                                    resolve
+                                    resolve,
                                 ),
-                            i * stagger
-                        )
-                    )
-            )
+                            i * stagger,
+                        ),
+                    ),
+            ),
         );
 
         removeClass(target, clsLeave);
@@ -76,8 +76,8 @@ export default function fade(action, target, duration, stagger = 0) {
                     target,
                     { height: newHeight },
                     duration / 2 + transitionNodes.length * stagger,
-                    'ease'
-                )
+                    'ease',
+                ),
             );
         }
 
@@ -112,8 +112,8 @@ function waitTransitionend(target) {
             .filter(Transition.inProgress)
             .map(
                 (el) =>
-                    new Promise((resolve) => once(el, 'transitionend transitioncanceled', resolve))
-            )
+                    new Promise((resolve) => once(el, 'transitionend transitioncanceled', resolve)),
+            ),
     );
 }
 
@@ -123,10 +123,10 @@ function getTransitionNodes(target) {
             nodes.concat(
                 sortBy(
                     row.filter((el) => isInView(el)),
-                    'offsetLeft'
-                )
+                    'offsetLeft',
+                ),
             ),
-        []
+        [],
     );
 }
 

package/src/js/mixin/internal/animate-slide.js

@@ -96,7 +96,7 @@ function getTransitionProps(target, nodes, currentProps) {
                     ? getPositionWithMargin(el)
                     : { opacity: 0 }
                 : { opacity: isVisible(el) ? 1 : 0 }
-            : false
+            : false,
     );
 
     const propsFrom = propsTo.map((props, i) => {

package/src/js/mixin/internal/scroll.js

@@ -17,7 +17,7 @@ export function preventBackgroundScroll(el) {
                 e.preventDefault();
             }
         },
-        { passive: false }
+        { passive: false },
     );
 
     if (prevented) {

package/src/js/mixin/modal.js

@@ -1,6 +1,3 @@
-import Class from './class';
-import Container from './container';
-import Togglable from './togglable';
 import {
     $,
     addClass,
@@ -23,7 +20,10 @@ import {
     toFloat,
     within,
 } from 'uikit-util';
+import Class from './class';
+import Container from './container';
 import { preventBackgroundScroll } from './internal/scroll';
+import Togglable from './togglable';
 
 const active = [];
 
@@ -160,7 +160,7 @@ export default {
                     this.$el,
                     'hidden',
                     () => handlers.forEach((handler) => handler && handler()),
-                    { self: true }
+                    { self: true },
                 );
 
                 addClass(document.documentElement, this.clsPage);
@@ -211,7 +211,7 @@ export default {
             if (this.container && parent(this.$el) !== this.container) {
                 append(this.container, this.$el);
                 return new Promise((resolve) =>
-                    requestAnimationFrame(() => this.show().then(resolve))
+                    requestAnimationFrame(() => this.show().then(resolve)),
                 );
             }
 
@@ -241,14 +241,17 @@ function animate(el, show, { transitionElement, _toggle }) {
                     });
                     clearTimeout(timer);
                 },
-                { self: true }
+                { self: true },
             );
 
-            const timer = setTimeout(() => {
-                off();
-                resolve();
-            }, toMs(css(transitionElement, 'transitionDuration')));
-        })
+            const timer = setTimeout(
+                () => {
+                    off();
+                    resolve();
+                },
+                toMs(css(transitionElement, 'transitionDuration')),
+            );
+        }),
     ).then(() => delete el._reject);
 }
 
@@ -282,7 +285,7 @@ function listenForBackgroundClose(modal) {
                     modal.hide();
                 }
             },
-            true
+            true,
         );
     });
 }

package/src/js/mixin/parallax.js

@@ -1,5 +1,3 @@
-import Media from '../mixin/media';
-import { getMaxPathLength } from '../util/svg';
 import {
     clamp,
     createEvent,
@@ -16,6 +14,8 @@ import {
     trigger,
     ucfirst,
 } from 'uikit-util';
+import Media from '../mixin/media';
+import { getMaxPathLength } from '../util/svg';
 
 const props = {
     x: transformFn,

package/src/js/mixin/position.js

@@ -72,7 +72,7 @@ export default {
                 toPx(
                     this.offset === false ? css(element, '--uk-position-offset') : this.offset,
                     this.axis === 'x' ? 'width' : 'height',
-                    element
+                    element,
                 ) *
                 (includes(['left', 'top'], this.dir) ? -1 : 1) *
                 (this.inset ? -1 : 1)
@@ -85,7 +85,7 @@ export default {
                 : toPx(
                       css(element, '--uk-position-shift-offset'),
                       this.axis === 'y' ? 'width' : 'height',
-                      element
+                      element,
                   ) * (includes(['left', 'top'], this.align) ? 1 : -1);
         },
 

package/src/js/mixin/slider-drag.js

@@ -212,7 +212,7 @@ export default {
                         (this.dir > 0 && !dirChange) || (this.dir < 0 && dirChange)
                             ? 'next'
                             : 'previous',
-                        true
+                        true,
                     );
                 }
             }

package/src/js/mixin/slider-nav.js

@@ -7,14 +7,16 @@ import {
     closest,
     data,
     empty,
+    isInView,
     isNumeric,
     matches,
+    parent,
     toFloat,
-    toggleClass,
     toNumber,
+    toggleClass,
 } from 'uikit-util';
-import { keyMap } from '../util/keys';
 import { generateId } from '../api/instance';
+import { keyMap } from '../util/keys';
 
 export default {
     i18n: {
@@ -111,7 +113,7 @@ export default {
                     role: this.nav ? 'tabpanel' : 'group',
                     'aria-label': this.t('slideLabel', i + 1, this.length),
                     'aria-roledescription': this.nav ? null : 'slide',
-                })
+                }),
             );
         },
 
@@ -205,7 +207,6 @@ export default {
     methods: {
         updateNav() {
             const index = this.getValidIndex();
-            let focus;
             let focusEl;
             for (const el of this.navItems) {
                 const cmd = data(el, this.attrItem);
@@ -223,21 +224,19 @@ export default {
                     });
 
                     if (active) {
-                        focusEl = button;
+                        focusEl ||= matches(parent(el), ':focus-within') && button;
                     }
-
-                    focus ||= matches(button, ':focus');
                 } else {
                     toggleClass(
                         el,
                         'uk-invisible',
                         this.finite &&
                             ((cmd === 'previous' && index === 0) ||
-                                (cmd === 'next' && index >= this.maxIndex))
+                                (cmd === 'next' && index >= this.maxIndex)),
                     );
                 }
 
-                if (focus && focusEl) {
+                if (focusEl && isInView(focusEl)) {
                     focusEl.focus();
                 }
             }

package/src/js/mixin/slider.js

@@ -1,8 +1,3 @@
-import I18n from './i18n';
-import SliderNav from './slider-nav';
-import SliderDrag from './slider-drag';
-import SliderAutoplay from './slider-autoplay';
-import { resize } from '../api/observables';
 import {
     $,
     children,
@@ -14,6 +9,11 @@ import {
     removeClass,
     trigger,
 } from 'uikit-util';
+import { resize } from '../api/observables';
+import I18n from './i18n';
+import SliderAutoplay from './slider-autoplay';
+import SliderDrag from './slider-drag';
+import SliderNav from './slider-nav';
 
 export default {
     mixins: [SliderAutoplay, SliderDrag, SliderNav, I18n],
@@ -151,7 +151,7 @@ export default {
             return clamp(
                 getIndex(index, this.slides, prev, this.finite),
                 0,
-                Math.max(0, this.maxIndex)
+                Math.max(0, this.maxIndex),
             );
         },
 
@@ -177,7 +177,7 @@ export default {
             const { length } = this.stack;
             return this._transitioner[length > 1 ? 'forward' : 'show'](
                 length > 1 ? Math.min(this.duration, 75 + 75 / (length - 1)) : this.duration,
-                this.percent
+                this.percent,
             );
         },
 
@@ -191,13 +191,13 @@ export default {
             prev = this.prevIndex,
             next = this.index,
             dir = this.dir || 1,
-            options = this.transitionOptions
+            options = this.transitionOptions,
         ) {
             return new this.Transitioner(
                 isNumber(prev) ? this.slides[prev] : prev,
                 isNumber(next) ? this.slides[next] : next,
                 dir * (isRtl ? -1 : 1),
-                options
+                options,
             );
         },
     },

package/src/js/mixin/slideshow.js

@@ -1,7 +1,7 @@
+import { addClass, removeClass } from 'uikit-util';
 import Animations from './internal/slideshow-animations';
 import Transitioner from './internal/slideshow-transitioner';
 import Slider from './slider.js';
-import { addClass, removeClass } from 'uikit-util';
 
 export default {
     mixins: [Slider],

package/src/js/mixin/togglable.js

@@ -90,7 +90,7 @@ export default {
                                   return Promise.reject();
                               })
                             : done();
-                    })
+                    }),
                 );
                 return true;
             } catch (e) {
@@ -143,7 +143,7 @@ function toggleInstant(el, show, { _toggle }) {
 export async function toggleTransition(
     el,
     show,
-    { animation, duration, velocity, transition, _toggle }
+    { animation, duration, velocity, transition, _toggle },
 ) {
     const [mode = 'reveal', startProp = 'top'] = animation[0]?.split('-') || [];
 
@@ -179,7 +179,7 @@ export async function toggleTransition(
             'overflowX',
             marginProp,
             marginStartProp,
-        ].map((key) => [key, el.style[key]])
+        ].map((key) => [key, el.style[key]]),
     );
 
     const dim = dimensions(el);
@@ -257,6 +257,6 @@ function toggleAnimation(el, show, cmp) {
     }
 
     return Animation.out(el, animation[1] || animation[0], duration, cmp.origin).then(() =>
-        _toggle(el, false)
+        _toggle(el, false),
     );
 }

package/src/js/uikit-core.js

@@ -1,7 +1,7 @@
-import UIkit from './api/index';
+import { each } from 'uikit-util';
 import boot from './api/boot';
+import UIkit from './api/index';
 import * as components from './core/index';
-import { each } from 'uikit-util';
 
 // register components
 each(components, (component, name) => UIkit.component(name, component));

package/src/js/uikit.js

@@ -1,6 +1,6 @@
-import UIkit from './uikit-core';
-import * as components from './components/index';
 import { each } from 'uikit-util';
+import * as components from './components/index';
+import UIkit from './uikit-core';
 
 each(components, (component, name) => UIkit.component(name, component));
 

package/src/js/util/animation.js

@@ -1,8 +1,8 @@
 import { attr } from './attr';
+import { addClass, hasClass, removeClass, removeClasses } from './class';
 import { once, trigger } from './event';
-import { css, propName } from './style';
 import { startsWith, toNodes } from './lang';
-import { addClass, hasClass, removeClass, removeClasses } from './class';
+import { css, propName } from './style';
 
 function transition(element, props, duration = 400, timing = 'linear') {
     duration = Math.round(duration);
@@ -32,7 +32,7 @@ function transition(element, props, duration = 400, timing = 'linear') {
                             });
                             type === 'transitioncanceled' ? reject() : resolve(element);
                         },
-                        { self: true }
+                        { self: true },
                     );
 
                     addClass(element, 'uk-transition');
@@ -42,8 +42,8 @@ function transition(element, props, duration = 400, timing = 'linear') {
                         transitionTimingFunction: timing,
                         ...props,
                     });
-                })
-        )
+                }),
+        ),
     );
 }
 
@@ -86,7 +86,7 @@ function animate(element, animation, duration = 200, origin, out) {
                             css(element, 'animationDuration', '');
                             removeClasses(element, `${animationPrefix}\\S*`);
                         },
-                        { self: true }
+                        { self: true },
                     );
 
                     css(element, 'animationDuration', `${duration}ms`);
@@ -96,8 +96,8 @@ function animate(element, animation, duration = 200, origin, out) {
                         origin && addClass(element, `uk-transform-origin-${origin}`);
                         out && addClass(element, `${animationPrefix}reverse`);
                     }
-                })
-        )
+                }),
+        ),
     );
 }
 

package/src/js/util/class.js

@@ -11,7 +11,7 @@ export function removeClass(element, ...args) {
 
 export function removeClasses(element, cls) {
     attr(element, 'class', (value) =>
-        (value || '').replace(new RegExp(`\\b${cls}\\b\\s?`, 'g'), '')
+        (value || '').replace(new RegExp(`\\b${cls}\\b\\s?`, 'g'), ''),
     );
 }
 

package/src/js/util/dimensions.js

@@ -1,6 +1,5 @@
-import { on } from './event';
-import { css } from './style';
 import { $, append, remove } from './dom';
+import { on } from './event';
 import {
     isDocument,
     isElement,
@@ -14,6 +13,7 @@ import {
     toWindow,
     ucfirst,
 } from './lang';
+import { css } from './style';
 
 const dirs = {
     width: ['left', 'right'],
@@ -137,7 +137,7 @@ function dimension(prop) {
             return css(
                 element,
                 prop,
-                !value && value !== 0 ? '' : +value + boxModelAdjust(element, prop) + 'px'
+                !value && value !== 0 ? '' : +value + boxModelAdjust(element, prop) + 'px',
             );
         }
     };
@@ -149,7 +149,7 @@ export function boxModelAdjust(element, prop, sizing = 'border-box') {
               dirs[prop].map(ucfirst),
               (prop) =>
                   toFloat(css(element, `padding${prop}`)) +
-                  toFloat(css(element, `border${prop}Width`))
+                  toFloat(css(element, `border${prop}Width`)),
           )
         : 0;
 }
@@ -182,7 +182,7 @@ export function toPx(value, property = 'width', element = window, offsetDim = fa
                       : offsetDim
                       ? element[`offset${ucfirst(property)}`]
                       : dimensions(element)[property],
-                  value
+                  value,
               )
             : value;
     });

package/src/js/util/dom.js

@@ -1,7 +1,7 @@
 import { once } from './event';
 import { parent } from './filter';
-import { find, findAll } from './selector';
 import { isElement, isString, isUndefined, startsWith, toArray, toNode, toNodes } from './lang';
+import { find, findAll } from './selector';
 
 export function ready(fn) {
     if (document.readyState !== 'loading') {
@@ -60,8 +60,8 @@ export function wrapInner(element, structure) {
         toNodes(element).map((element) =>
             element.hasChildNodes()
                 ? wrapAll(toArray(element.childNodes), structure)
-                : append(element, structure)
-        )
+                : append(element, structure),
+        ),
     );
 }