uikit 3.20.9-dev.50e5c71c4 → 3.20.9-dev.a82d76e5b

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.9-dev.50e5c71c4",
+  "version": "3.20.9-dev.a82d76e5b",
   "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/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="" 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">${

package/tests/modal.html

@@ -487,7 +487,7 @@
             on('#js-modal-prompt', 'click', async e => {
                 e.preventDefault();
                 e.target.blur();
-                const name = await modal.prompt('Name:', 'Your "name"');
+                const name = await modal.prompt('Name:', 'Your name');
                 console.log('Prompted:', name);
             });