uikit 3.25.23-dev.0ea1d51 → 3.25.23-dev.9ebc131

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.25.23-dev.0ea1d51",
+    "version": "3.25.23-dev.9ebc131",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/js/api/component.js

@@ -2,7 +2,7 @@ import { $$, camelize, hyphenate, isEmpty, isPlainObject } from 'uikit-util';
 import App from './app';
 
 const PREFIX = 'uk-';
-const DATA = '__uikit__';
+const elementComponents = new WeakMap();
 
 export const components = {};
 
@@ -60,7 +60,7 @@ export function createComponent(name, element, data, ...args) {
 }
 
 export function getComponents(element) {
-    return element?.[DATA] || {};
+    return elementComponents.get(element) || {};
 }
 
 export function getComponent(element, name) {
@@ -68,17 +68,21 @@ export function getComponent(element, name) {
 }
 
 export function attachToElement(element, instance) {
-    if (!element[DATA]) {
-        element[DATA] = {};
+    let components = elementComponents.get(element);
+
+    if (!components) {
+        components = {};
+        elementComponents.set(element, components);
     }
 
-    element[DATA][instance.$options.name] = instance;
+    components[instance.$options.name] = instance;
 }
 
 export function detachFromElement(element, instance) {
-    delete element[DATA]?.[instance.$options.name];
+    const components = elementComponents.get(element);
+    delete components?.[instance.$options.name];
 
-    if (isEmpty(element[DATA])) {
-        delete element[DATA];
+    if (isEmpty(components)) {
+        elementComponents.delete(element);
     }
 }

package/src/js/components/tooltip.js

@@ -176,8 +176,10 @@ function getAlignment(el, target, [dir, align]) {
 
 function parseProps(options) {
     const { el, id, data } = options;
-    return ['delay', 'title'].reduce((obj, key) => ({ [key]: getData(el, key), ...obj }), {
+    return {
+        title: getData(el, 'title'),
+        delay: getData(el, 'delay'),
         ...parseOptions(getData(el, id), ['title']),
         ...data,
-    });
+    };
 }

package/src/js/core/accordion.js

@@ -26,6 +26,8 @@ import { maybeDefaultPreventClick } from '../mixin/event';
 import Togglable from '../mixin/togglable';
 import { keyMap } from '../util/keys';
 
+const wrappers = new WeakMap();
+
 export default {
     mixins: [Class, Togglable],
 
@@ -60,7 +62,9 @@ export default {
         },
 
         contents({ content }) {
-            return this.items.map((item) => item._wrapper?.firstElementChild || $(content, item));
+            return this.items.map(
+                (item) => wrappers.get(item)?.firstElementChild || $(content, item),
+            );
         },
     },
 
@@ -200,13 +204,13 @@ function hide(el, hide) {
 }
 
 async function transition(el, show, { content, duration, velocity, transition }) {
-    content = el._wrapper?.firstElementChild || $(content, el);
+    let wrapper = wrappers.get(el);
+    content = wrapper?.firstElementChild || $(content, el);
 
-    if (!el._wrapper) {
-        el._wrapper = wrapAll(content, '<div>');
+    if (!wrapper) {
+        wrapper = wrapAll(content, '<div>');
+        wrappers.set(el, wrapper);
     }
-
-    const wrapper = el._wrapper;
     css(wrapper, 'overflow', 'hidden');
     const currentHeight = toFloat(css(wrapper, 'height'));
 
@@ -224,7 +228,7 @@ async function transition(el, show, { content, duration, velocity, transition })
     await Transition.start(wrapper, { height: show ? endHeight : 0 }, duration, transition);
 
     unwrap(content);
-    delete el._wrapper;
+    wrappers.delete(el);
 
     if (!show) {
         hide(content, true);

package/src/js/core/drop.js

@@ -20,21 +20,17 @@ import {
     overflowParents,
     parent,
     pick,
-    pointerCancel,
-    pointerDown,
     pointerEnter,
     pointerLeave,
-    pointerUp,
     query,
     removeClass,
 } from 'uikit-util';
 import { generateId } from '../api/instance';
 import Class from '../mixin/class';
 import Container from '../mixin/container';
-import { maybeDefaultPreventClick } from '../mixin/event';
+import { maybeDefaultPreventClick, onEscape, onOutsidePointer } from '../mixin/event';
 import Position, { storeScrollPosition } from '../mixin/position';
 import Togglable from '../mixin/togglable';
-import { keyMap } from '../util/keys';
 import { preventBackgroundScroll } from '../util/scroll';
 
 export let active;
@@ -457,7 +453,6 @@ export default {
         },
     },
 };
-
 function getViewport(el, target) {
     return offsetViewport(overflowParents(target).find((parent) => parent.contains(el)));
 }
@@ -502,11 +497,7 @@ function listenForScroll(drop, fn = () => drop.$emit()) {
 }
 
 function listenForEscClose(drop) {
-    return on(document, 'keydown', (e) => {
-        if (e.keyCode === keyMap.ESC) {
-            drop.hide(false);
-        }
-    });
+    return onEscape(() => drop.hide(false));
 }
 
 function listenForScrollClose(drop) {
@@ -514,25 +505,12 @@ function listenForScrollClose(drop) {
 }
 
 function listenForBackgroundClose(drop) {
-    return on(document, pointerDown, ({ target }) => {
-        if (drop.$el.contains(target)) {
-            return;
-        }
-
-        once(
-            document,
-            `${pointerUp} ${pointerCancel} scroll`,
-            ({ defaultPrevented, type, target: newTarget }) => {
-                if (
-                    !defaultPrevented &&
-                    type === pointerUp &&
-                    target === newTarget &&
-                    !drop.targetEl?.contains(target)
-                ) {
-                    drop.hide(false);
-                }
-            },
-            true,
-        );
-    });
+    return onOutsidePointer(
+        (target) => {
+            if (!drop.targetEl?.contains(target)) {
+                drop.hide(false);
+            }
+        },
+        (target) => !drop.$el.contains(target),
+    );
 }

package/src/js/core/dropnav.js

@@ -79,7 +79,7 @@ export default {
             dropbar =
                 this._dropbar || query(dropbar, this.$el) || $(`+ .${this.clsDropbar}`, this.$el);
 
-            return dropbar ? dropbar : (this._dropbar = $('<div>'));
+            return dropbar || (this._dropbar = $('<div>'));
         },
 
         dropContainer(_, $el) {

package/src/js/core/overflow-fade.js

@@ -55,11 +55,12 @@ 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: [
+                    this.$el.scrollWidth - this.$el.clientWidth,
+                    this.$el.scrollHeight - this.$el.clientHeight,
+                ],
+            };
         },
 
         write({ overflow }) {

package/src/js/mixin/event.js

@@ -1,5 +1,36 @@
+import { pointerCancel, pointerDown, pointerUp } from '../util/env';
+import { on, once } from '../util/event';
+import { keyMap } from '../util/keys';
+
 export function maybeDefaultPreventClick(e) {
     if (e.target.closest('a[href="#"],a[href=""]')) {
         e.preventDefault();
     }
 }
+
+export function onEscape(handler, isEligible = () => true) {
+    return on(document, 'keydown', (e) => {
+        if (e.keyCode === keyMap.ESC && isEligible()) {
+            handler(e);
+        }
+    });
+}
+
+export function onOutsidePointer(handler, isOutside, isEligible) {
+    return on(document, pointerDown, ({ target }) => {
+        if (!isOutside(target) || (isEligible && !isEligible())) {
+            return;
+        }
+
+        once(
+            document,
+            `${pointerUp} ${pointerCancel} scroll`,
+            ({ defaultPrevented, type, target: newTarget }) => {
+                if (!defaultPrevented && type === pointerUp && target === newTarget) {
+                    handler(target);
+                }
+            },
+            true,
+        );
+    });
+}

package/src/js/mixin/modal.js

@@ -13,9 +13,6 @@ import {
     on,
     once,
     parent,
-    pointerCancel,
-    pointerDown,
-    pointerUp,
     removeClass,
     toFloat,
 } from 'uikit-util';
@@ -23,11 +20,13 @@ import { awaitFrame } from '../util/await';
 import { preventBackgroundScroll } from '../util/scroll';
 import Class from './class';
 import Container from './container';
-import { maybeDefaultPreventClick } from './event';
+import { maybeDefaultPreventClick, onEscape, onOutsidePointer } from './event';
 import Togglable from './togglable';
 
 const active = [];
 
+const pendingReject = new WeakMap();
+
 export default {
     mixins: [Class, Container, Togglable],
 
@@ -230,10 +229,13 @@ export default {
 };
 
 function animate(el, show, { transitionElement, _toggle }) {
+    let rejectAnimation;
+
     return new Promise((resolve, reject) =>
         once(el, 'show hide', () => {
-            el._reject?.();
-            el._reject = reject;
+            pendingReject.get(el)?.();
+            rejectAnimation = reject;
+            pendingReject.set(el, reject);
 
             _toggle(el, show);
 
@@ -257,11 +259,15 @@ function animate(el, show, { transitionElement, _toggle }) {
                 toMs(css(transitionElement, 'transitionDuration')),
             );
         }),
-    ).then(() => delete el._reject);
+    ).then(() => {
+        if (pendingReject.get(el) === rejectAnimation) {
+            pendingReject.delete(el);
+        }
+    });
 }
 
 function toMs(time) {
-    return time ? (endsWith(time, 'ms') ? toFloat(time) : toFloat(time) * 1000) : 0;
+    return toFloat(time) * (endsWith(time, 'ms') ? 1 : 1000);
 }
 
 function preventBackgroundFocus(modal) {
@@ -282,35 +288,21 @@ function preventBackgroundFocus(modal) {
 }
 
 function listenForBackgroundClose(modal) {
-    return on(document, pointerDown, ({ target }) => {
-        if (
-            last(active) !== modal ||
-            (modal.overlay && !modal.$el.contains(target)) ||
-            !modal.panel ||
-            modal.panel.contains(target)
-        ) {
-            return;
-        }
-
-        once(
-            document,
-            `${pointerUp} ${pointerCancel} scroll`,
-            ({ defaultPrevented, type, target: newTarget }) => {
-                if (!defaultPrevented && type === pointerUp && target === newTarget) {
-                    modal.hide();
-                }
-            },
-            true,
-        );
-    });
+    return onOutsidePointer(
+        () => modal.hide(),
+        (target) =>
+            (!modal.overlay || modal.$el.contains(target)) &&
+            Boolean(modal.panel) &&
+            !modal.panel.contains(target),
+        () => last(active) === modal,
+    );
 }
 
 function listenForEscClose(modal) {
-    return on(document, 'keydown', (e) => {
-        if (e.keyCode === 27 && last(active) === modal) {
-            modal.hide();
-        }
-    });
+    return onEscape(
+        () => modal.hide(),
+        () => last(active) === modal,
+    );
 }
 
 function setAriaExpanded(el, toggled) {