uikit 3.20.8 → 3.20.9-dev.2cb573699

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit",
   "title": "UIkit",
   "description": "UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.",
-  "version": "3.20.8",
+  "version": "3.20.9-dev.2cb573699",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

package/src/js/api/component.js

@@ -78,7 +78,7 @@ export function attachToElement(element, instance) {
 export function detachFromElement(element, instance) {
     delete element[DATA]?.[instance.$options.name];
 
-    if (!isEmpty(element[DATA])) {
+    if (isEmpty(element[DATA])) {
         delete element[DATA];
     }
 }

package/src/js/api/events.js

@@ -24,7 +24,7 @@ export function registerEvent(instance, event, key) {
         : { name: key, handler: event };
     el = isFunction(el) ? el.call(instance, instance) : el || instance.$el;
 
-    if (!el || (isArray(el) && !el.length) || (filter && !filter.call(instance))) {
+    if (!el || (isArray(el) && !el.length) || (filter && !filter.call(instance, instance))) {
         return;
     }
 

package/src/js/components/filter.js

@@ -72,9 +72,7 @@ export default {
     events: {
         name: 'click keydown',
 
-        delegate() {
-            return `[${this.attrItem}],[data-${this.attrItem}]`;
-        },
+        delegate: ({ attrItem }) => `[${attrItem}],[data-${attrItem}]`,
 
         handler(e) {
             if (e.type === 'keydown' && e.keyCode !== keyMap.SPACE) {

package/src/js/components/internal/slider-transitioner.js

@@ -69,6 +69,10 @@ export default function (prev, next, dir, { center, easing, list }) {
         },
 
         translate(percent) {
+            if (percent === this.percent()) {
+                return;
+            }
+
             const distance = this.getDistance() * dir * (isRtl ? -1 : 1);
 
             css(

package/src/js/components/lightbox-panel.js

@@ -85,9 +85,7 @@ export default {
 
             self: true,
 
-            delegate() {
-                return `${this.selList} > *`;
-            },
+            delegate: ({ selList }) => `${selList} > *`,
 
             handler(e) {
                 if (!e.defaultPrevented) {

package/src/js/components/lightbox.js

@@ -31,9 +31,7 @@ export default {
     events: {
         name: 'click',
 
-        delegate() {
-            return `${this.toggle}:not(.uk-disabled)`;
-        },
+        delegate: ({ toggle }) => `${toggle}:not(.uk-disabled)`,
 
         handler(e) {
             e.preventDefault();

package/src/js/components/slider-parallax.js

@@ -18,9 +18,7 @@ export default {
 
             self: true,
 
-            el() {
-                return this.item;
-            },
+            el: ({ item }) => item,
 
             handler({ type, detail: { percent, duration, timing, dir } }) {
                 fastdom.read(() => {
@@ -43,9 +41,7 @@ export default {
 
             self: true,
 
-            el() {
-                return this.item;
-            },
+            el: ({ item }) => item,
 
             handler() {
                 Transition.cancel(this.$el);
@@ -57,9 +53,7 @@ export default {
 
             self: true,
 
-            el() {
-                return this.item;
-            },
+            el: ({ item }) => item,
 
             handler({ type, detail: { percent, dir } }) {
                 fastdom.read(() => {

package/src/js/components/slider.js

@@ -219,7 +219,7 @@ export default {
                 ),
             );
 
-            if (!this.center) {
+            if (!this.center || !this.length) {
                 return;
             }
 

package/src/js/core/accordion.js

@@ -101,9 +101,7 @@ export default {
         {
             name: 'click keydown',
 
-            delegate() {
-                return `${this.targets} ${this.$props.toggle}`;
-            },
+            delegate: ({ targets, $props }) => `${targets} ${$props.toggle}`,
 
             async handler(e) {
                 if (e.type === 'keydown' && e.keyCode !== keyMap.SPACE) {
@@ -123,9 +121,7 @@ export default {
 
             self: true,
 
-            delegate() {
-                return this.targets;
-            },
+            delegate: ({ targets }) => targets,
 
             handler() {
                 this.$emit();

package/src/js/core/alert.js

@@ -21,9 +21,7 @@ export default {
     events: {
         name: 'click',
 
-        delegate() {
-            return this.selClose;
-        },
+        delegate: ({ selClose }) => selClose,
 
         handler(e) {
             e.preventDefault();

package/src/js/core/cover.js

@@ -14,21 +14,19 @@ export default {
         automute: true,
     },
 
-    events: {
-        'load loadedmetadata'() {
-            this.$emit('resize');
-        },
+    created() {
+        this.useObjectFit = isTag(this.$el, 'img', 'video');
     },
 
     observe: resize({
-        target: ({ $el }) => [getPositionedParent($el) || parent($el)],
-        filter: ({ $el }) => !useObjectFit($el),
+        target: ({ $el }) => getPositionedParent($el) || parent($el),
+        filter: ({ useObjectFit }) => !useObjectFit,
     }),
 
     update: {
         read() {
-            if (useObjectFit(this.$el)) {
-                return;
+            if (this.useObjectFit) {
+                return false;
             }
 
             const { ratio, cover } = Dimensions;
@@ -80,7 +78,3 @@ function getPositionedParent(el) {
         }
     }
 }
-
-function useObjectFit(el) {
-    return isTag(el, 'img', 'video');
-}

package/src/js/core/drop.js

@@ -106,7 +106,7 @@ export default {
     },
 
     beforeConnect() {
-        this.clsDrop = this.$props.clsDrop || `uk-${this.$options.name}`;
+        this.clsDrop = this.$props.clsDrop || this.$options.id;
     },
 
     connected() {
@@ -131,9 +131,7 @@ export default {
         {
             name: 'click',
 
-            delegate() {
-                return '.uk-drop-close';
-            },
+            delegate: () => '.uk-drop-close',
 
             handler(e) {
                 e.preventDefault();
@@ -144,9 +142,7 @@ export default {
         {
             name: 'click',
 
-            delegate() {
-                return 'a[href*="#"]';
-            },
+            delegate: () => 'a[href*="#"]',
 
             handler({ defaultPrevented, current }) {
                 const { hash } = current;
@@ -212,9 +208,7 @@ export default {
         {
             name: `${pointerEnter} focusin`,
 
-            filter() {
-                return includes(this.mode, 'hover');
-            },
+            filter: ({ mode }) => includes(mode, 'hover'),
 
             handler(e) {
                 if (!isTouch(e)) {
@@ -226,9 +220,7 @@ export default {
         {
             name: `${pointerLeave} focusout`,
 
-            filter() {
-                return includes(this.mode, 'hover');
-            },
+            filter: ({ mode }) => includes(mode, 'hover'),
 
             handler(e) {
                 if (!isTouch(e) && e.relatedTarget) {

package/src/js/core/dropnav.js

@@ -128,9 +128,7 @@ export default {
         {
             name: 'mouseover focusin',
 
-            delegate() {
-                return this.selNavItem;
-            },
+            delegate: ({ selNavItem }) => selNavItem,
 
             handler({ current }) {
                 const active = this.getActive();
@@ -151,9 +149,7 @@ export default {
 
             self: true,
 
-            delegate() {
-                return this.selNavItem;
-            },
+            delegate: ({ selNavItem }) => selNavItem,
 
             handler(e) {
                 const { current, keyCode } = e;
@@ -171,13 +167,9 @@ export default {
         {
             name: 'keydown',
 
-            el() {
-                return this.dropContainer;
-            },
+            el: ({ dropContainer }) => dropContainer,
 
-            delegate() {
-                return `.${this.clsDrop}`;
-            },
+            delegate: ({ clsDrop }) => `.${clsDrop}`,
 
             handler(e) {
                 const { current, keyCode } = e;
@@ -220,13 +212,9 @@ export default {
         {
             name: 'mouseleave',
 
-            el() {
-                return this.dropbar;
-            },
+            el: ({ dropbar }) => dropbar,
 
-            filter() {
-                return this.dropbar;
-            },
+            filter: ({ dropbar }) => dropbar,
 
             handler() {
                 const active = this.getActive();
@@ -244,13 +232,9 @@ export default {
         {
             name: 'beforeshow',
 
-            el() {
-                return this.dropContainer;
-            },
+            el: ({ dropContainer }) => dropContainer,
 
-            filter() {
-                return this.dropbar;
-            },
+            filter: ({ dropbar }) => dropbar,
 
             handler({ target }) {
                 if (!this.isDropbarDrop(target)) {
@@ -268,13 +252,9 @@ export default {
         {
             name: 'show',
 
-            el() {
-                return this.dropContainer;
-            },
+            el: ({ dropContainer }) => dropContainer,
 
-            filter() {
-                return this.dropbar;
-            },
+            filter: ({ dropbar }) => dropbar,
 
             handler({ target }) {
                 if (!this.isDropbarDrop(target)) {
@@ -306,13 +286,9 @@ export default {
         {
             name: 'beforehide',
 
-            el() {
-                return this.dropContainer;
-            },
+            el: ({ dropContainer }) => dropContainer,
 
-            filter() {
-                return this.dropbar;
-            },
+            filter: ({ dropbar }) => dropbar,
 
             handler(e) {
                 const active = this.getActive();
@@ -333,13 +309,9 @@ export default {
         {
             name: 'hide',
 
-            el() {
-                return this.dropContainer;
-            },
+            el: ({ dropContainer }) => dropContainer,
 
-            filter() {
-                return this.dropbar;
-            },
+            filter: ({ dropbar }) => dropbar,
 
             handler({ target }) {
                 if (!this.isDropbarDrop(target)) {

package/src/js/core/form-custom.js

@@ -64,9 +64,7 @@ export default {
         {
             name: 'reset',
 
-            el() {
-                return this.$el.closest('form');
-            },
+            el: ({ $el }) => $el.closest('form'),
 
             handler() {
                 this.$emit();

package/src/js/core/grid.js

@@ -123,14 +123,11 @@ export default {
 
         {
             read({ rows, scrollColumns, parallaxStart, parallaxEnd }) {
-                if (scrollColumns && positionedAbsolute(rows)) {
-                    return false;
-                }
-
                 return {
-                    scrolled: scrollColumns
-                        ? scrolledOver(this.$el, parallaxStart, parallaxEnd)
-                        : false,
+                    scrolled:
+                        scrollColumns && !positionedAbsolute(rows)
+                            ? scrolledOver(this.$el, parallaxStart, parallaxEnd)
+                            : false,
                 };
             },
 

package/src/js/core/height-match.js

@@ -28,9 +28,7 @@ export default {
         // Hidden elements may change height when fonts load
         name: 'loadingdone',
 
-        el() {
-            return document.fonts;
-        },
+        el: () => document.fonts,
 
         handler() {
             this.$emit('resize');

package/src/js/core/height-placeholder.js

@@ -23,7 +23,7 @@ export default {
 
     update: {
         read() {
-            return { height: this.target.offsetHeight };
+            return this.target ? { height: this.target.offsetHeight } : false;
         },
 
         write({ height }) {

package/src/js/core/inverse.js

@@ -1,4 +1,14 @@
-import { $$, css, dimensions, matches, observeResize, on, replaceClass, toNodes } from 'uikit-util';
+import {
+    $$,
+    css,
+    dimensions,
+    matches,
+    observeResize,
+    on,
+    parent,
+    replaceClass,
+    toNodes,
+} from 'uikit-util';
 import { intersection, mutation } from '../api/observables';
 
 export default {
@@ -91,13 +101,14 @@ function findTargetColor(target) {
     let last;
     for (const percent of [0.25, 0.5, 0.75]) {
         const elements = target.ownerDocument.elementsFromPoint(
-            Math.max(0, left) + width * percent,
-            Math.max(0, top) + height / 2,
+            Math.max(0, left + width * percent),
+            Math.max(0, top + height / 2),
         );
 
         for (const element of elements) {
             if (
                 target.contains(element) ||
+                !isVisible(element) ||
                 (element.closest('[class*="-leave"]') &&
                     elements.some((el) => element !== el && matches(el, '[class*="-enter"]')))
             ) {
@@ -118,3 +129,19 @@ function findTargetColor(target) {
 
     return last ? `uk-${last}` : '';
 }
+
+// TODO: once it becomes Baseline `element.checkVisibility({ opacityProperty: true, visibilityProperty: true })`
+function isVisible(element) {
+    if (css(element, 'visibility') !== 'visible') {
+        return false;
+    }
+
+    while (element) {
+        if (css(element, 'opacity') === '0') {
+            return false;
+        }
+        element = parent(element);
+    }
+
+    return true;
+}

package/src/js/core/modal.js

@@ -126,7 +126,7 @@ function install({ modal }) {
             ({ i18n }) => `<form class="uk-form-stacked">
                 <div class="uk-modal-body">
                     <label>${isString(message) ? message : html(message)}</label>
-                    <input class="uk-input" value="${value || ''}" autofocus>
+                    <input class="uk-input" autofocus>
                 </div>
                 <div class="uk-modal-footer uk-text-right">
                     <button class="uk-button uk-button-default uk-modal-close" type="button">${
@@ -142,6 +142,7 @@ function install({ modal }) {
 
         const { $el } = promise.dialog;
         const input = $('input', $el);
+        input.value = value || '';
         on($el, 'show', () => input.select());
 
         return promise;

package/src/js/core/navbar.js

@@ -39,9 +39,7 @@ export default {
         {
             name: 'show',
 
-            el() {
-                return this.dropContainer;
-            },
+            el: ({ dropContainer }) => dropContainer,
 
             handler({ target }) {
                 if (
@@ -56,9 +54,7 @@ export default {
         {
             name: 'hide',
 
-            el() {
-                return this.dropContainer;
-            },
+            el: ({ dropContainer }) => dropContainer,
 
             async handler() {
                 await awaitMacroTask();

package/src/js/core/offcanvas.js

@@ -81,9 +81,7 @@ export default {
             self: true,
             passive: false,
 
-            filter() {
-                return this.overlay;
-            },
+            filter: ({ overlay }) => overlay,
 
             handler(e) {
                 e.cancelable && e.preventDefault();

package/src/js/core/scrollspy-nav.js

@@ -68,9 +68,9 @@ export default {
                 if (scrollTop === max) {
                     active = length - 1;
                 } else {
+                    const offsetBy = this.offset + offset(getCoveringElement()).height;
+
                     for (let i = 0; i < targets.length; i++) {
-                        const fixedEl = getCoveringElement(targets[i]);
-                        const offsetBy = this.offset + (fixedEl ? offset(fixedEl).height : 0);
                         if (offset(targets[i]).top - viewport.top - offsetBy > 0) {
                             break;
                         }

package/src/js/core/scrollspy.js

@@ -108,7 +108,7 @@ export default {
 
     methods: {
         toggle(el, inview) {
-            const state = this.elementData.get(el);
+            const state = this.elementData?.get(el);
 
             if (!state) {
                 return;

package/src/js/core/sticky.js

@@ -16,7 +16,6 @@ import {
     isVisible,
     noop,
     offsetPosition,
-    once,
     parent,
     query,
     remove,
@@ -97,32 +96,28 @@ export default {
     },
 
     observe: [
-        viewport({
-            handler() {
-                if (toPx('100vh', 'height') !== this._data.viewport) {
-                    this.$emit('resize');
-                }
-            },
-        }),
+        viewport(),
         scroll({ target: () => document.scrollingElement }),
         resize({
-            target: () => document.scrollingElement,
-            options: { box: 'content-box' },
+            target: ({ $el }) => [$el, parent($el), document.scrollingElement],
+            handler(entries) {
+                this.$emit(
+                    this._data.resized && entries.some(({ target }) => target === parent(this.$el))
+                        ? 'update'
+                        : 'resize',
+                );
+                this._data.resized = true;
+            },
         }),
-        resize(),
     ],
 
     events: [
         {
             name: 'load hashchange popstate',
 
-            el() {
-                return window;
-            },
+            el: () => window,
 
-            filter() {
-                return this.targetOffset !== false;
-            },
+            filter: ({ targetOffset }) => targetOffset !== false,
 
             handler() {
                 const { scrollingElement } = document;
@@ -146,29 +141,18 @@ export default {
                 });
             },
         },
-        {
-            name: 'transitionstart',
-
-            handler() {
-                this.transitionInProgress = once(
-                    this.$el,
-                    'transitionend transitioncancel',
-                    () => (this.transitionInProgress = null),
-                );
-            },
-        },
     ],
 
     update: [
         {
-            read({ height, width, margin, sticky }) {
+            read({ height, width, margin, sticky }, types) {
                 this.inactive = !this.matchMedia || !isVisible(this.$el);
 
                 if (this.inactive) {
                     return;
                 }
 
-                const hide = this.isFixed && !this.transitionInProgress;
+                const hide = this.isFixed && types.has('update');
                 if (hide) {
                     preventTransition(this.target);
                     this.hide();
@@ -243,6 +227,7 @@ export default {
                     top: offsetPosition(referenceElement)[0],
                     sticky,
                     viewport,
+                    maxScrollHeight,
                 };
             },
 
@@ -287,8 +272,9 @@ export default {
                 elHeight,
                 height,
                 sticky,
+                maxScrollHeight,
             }) {
-                const scroll = document.scrollingElement.scrollTop;
+                const scroll = Math.min(document.scrollingElement.scrollTop, maxScrollHeight);
                 const dir = prevScroll <= scroll ? 'down' : 'up';
                 const referenceElement = this.isFixed ? this.placeholder : this.$el;
 
@@ -490,7 +476,10 @@ function reset(el) {
     css(el, { position: '', top: '', marginTop: '', width: '' });
 }
 
-function preventTransition(el) {
-    addClass(el, 'uk-transition-disable');
-    requestAnimationFrame(() => removeClass(el, 'uk-transition-disable'));
+const clsTransitionDisable = 'uk-transition-disable';
+function preventTransition(element) {
+    if (!hasClass(element, clsTransitionDisable)) {
+        addClass(element, clsTransitionDisable);
+        requestAnimationFrame(() => removeClass(element, clsTransitionDisable));
+    }
 }