uikit 3.14.4-dev.8a8016a73 → 3.14.4-dev.a014fa609

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.14.4-dev.8a8016a73",
+    "version": "3.14.4-dev.a014fa609",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/js/core/drop.js

@@ -49,7 +49,7 @@ export default {
         stretch: Boolean,
         delayShow: Number,
         delayHide: Number,
-        display: String,
+        autoUpdate: Boolean,
         clsDrop: String,
         animateOut: Boolean,
         bgScroll: Boolean,
@@ -65,7 +65,7 @@ export default {
         stretch: false,
         delayShow: 0,
         delayHide: 800,
-        display: null,
+        autoUpdate: true,
         clsDrop: false,
         animateOut: false,
         bgScroll: true,
@@ -109,6 +109,7 @@ export default {
 
     disconnected() {
         if (this.isActive()) {
+            this.hide(false);
             active = null;
         }
     },
@@ -242,7 +243,8 @@ export default {
 
                 this.tracker.init();
 
-                for (const handler of [
+                const update = () => this.$emit();
+                const handlers = [
                     on(
                         document,
                         pointerDown,
@@ -271,29 +273,28 @@ export default {
                         }
                     }),
 
+                    on(window, 'resize', update),
+
+                    (() => {
+                        const observer = observeResize(
+                            scrollParents(this.$el).concat(this.targetEl),
+                            update
+                        );
+                        return () => observer.disconnect();
+                    })(),
+
+                    ...(this.autoUpdate
+                        ? [on([document, scrollParents(this.$el)], 'scroll', update)]
+                        : []),
+
                     ...(this.bgScroll
                         ? []
                         : [preventOverscroll(this.$el), preventBackgroundScroll()]),
+                ];
 
-                    ...(this.display === 'static'
-                        ? []
-                        : (() => {
-                              const handler = () => this.$emit();
-                              return [
-                                  on(window, 'resize', handler),
-                                  on([document, scrollParents(this.$el)], 'scroll', handler),
-                                  (() => {
-                                      const observer = observeResize(
-                                          scrollParents(this.$el),
-                                          handler
-                                      );
-                                      return () => observer.disconnect();
-                                  })(),
-                              ];
-                          })()),
-                ]) {
-                    once(this.$el, 'hide', handler, { self: true });
-                }
+                once(this.$el, 'hide', () => handlers.forEach((handler) => handler()), {
+                    self: true,
+                });
             },
         },
 

package/src/js/core/navbar.js

@@ -38,6 +38,8 @@ export default {
         offset: Number,
         boundary: Boolean,
         target: Boolean,
+        targetX: Boolean,
+        targetY: Boolean,
         clsDrop: String,
         delayShow: Number,
         delayHide: Number,
@@ -386,7 +388,7 @@ export default {
 
     methods: {
         getActive() {
-            return active && within(active.targetEl, this.$el) && active;
+            return includes(this.dropdowns, active?.$el) && active;
         },
 
         transitionTo(newHeight, el) {

package/src/js/mixin/modal.js

@@ -135,8 +135,8 @@ export default {
                 );
 
                 if (this.overlay) {
-                    once(this.$el, 'hidden', preventOverscroll(this.$el));
-                    once(this.$el, 'hidden', preventBackgroundScroll());
+                    once(this.$el, 'hidden', preventOverscroll(this.$el), { self: true });
+                    once(this.$el, 'hidden', preventBackgroundScroll(), { self: true });
                 }
 
                 if (this.stack) {

package/src/js/mixin/togglable.js

@@ -168,9 +168,16 @@ export function toggleTransition(cmp) {
         }
 
         const prevProps = Object.fromEntries(
-            ['padding', 'border', 'width', 'height', 'overflow', marginProp, marginStartProp].map(
-                (key) => [key, el.style[key]]
-            )
+            [
+                'padding',
+                'border',
+                'width',
+                'height',
+                'overflowY',
+                'overflowX',
+                marginProp,
+                marginStartProp,
+            ].map((key) => [key, el.style[key]])
         );
 
         const dim = dimensions(el);
@@ -188,6 +195,7 @@ export function toggleTransition(cmp) {
             height: dim.height,
             width: dim.width,
             ...css(el, [
+                'overflow',
                 'padding',
                 'borderTop',
                 'borderRight',

package/src/js/util/class.js

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

package/tests/drop.html

@@ -623,10 +623,10 @@
                             <td>Delay time in hover mode before a drop is hidden in ms.</td>
                         </tr>
                         <tr>
-                            <td><code>display</code></td>
-                            <td>`dynamic`|`static`</td>
-                            <td>`dynamic`</td>
-                            <td>Disable dynamic positioning while scrolling by setting this option to `static`.</td>
+                            <td><code>auto-update</code></td>
+                            <td>Boolean</td>
+                            <td>true</td>
+                            <td>Disable dynamic positioning while scrolling by setting this option to `false`.</td>
                         </tr>
                         <tr>
                             <td><code>boundary</code></td>

package/tests/dropbar.html

@@ -8,6 +8,8 @@
         <script src="js/test.js"></script>
         <style>
 
+            body { padding-bottom: 500px; }
+
             .test {
                 display: block;
                 position: relative;
@@ -150,7 +152,7 @@
                                 <ul class="uk-navbar-nav">
                                     <li>
                                         <a href="#">Fade</a>
-                                        <div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x; animate-out: true">
+                                        <div class="uk-dropbar uk-dropbar-top" uk-drop="target-y: !.uk-navbar-container; stretch: x; animate-out: true">
                                             <ul class="uk-nav uk-navbar-dropdown-nav">
                                                 <li class="uk-active"><a href="#">Active</a></li>
                                                 <li><a href="#">Item</a></li>
@@ -174,7 +176,7 @@
                                 <ul class="uk-navbar-nav">
                                     <li>
                                         <a href="#">Slide Top</a>
-                                        <div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x; animation: slide-top; animate-out: true">
+                                        <div class="uk-dropbar uk-dropbar-top" uk-drop="target-y: !.uk-navbar-container; stretch: x; animation: slide-top; animate-out: true">
                                             <ul class="uk-nav uk-navbar-dropdown-nav">
                                                 <li class="uk-active"><a href="#">Active</a></li>
                                                 <li><a href="#">Item</a></li>
@@ -198,7 +200,7 @@
                                 <ul class="uk-navbar-nav">
                                     <li>
                                         <a href="#">Slide Left</a>
-                                        <div class="uk-dropbar uk-dropbar-left" uk-drop="stretch: y; animation: slide-left; animate-out: true">
+                                        <div class="uk-dropbar uk-dropbar-left" uk-drop="target-y: !.uk-navbar-container; stretch: y; animation: slide-left; animate-out: true">
                                             <ul class="uk-nav uk-navbar-dropdown-nav">
                                                 <li class="uk-active"><a href="#">Active</a></li>
                                                 <li><a href="#">Item</a></li>
@@ -222,7 +224,7 @@
                                 <ul class="uk-navbar-nav">
                                     <li>
                                         <a href="#">Slide Right</a>
-                                        <div class="uk-dropbar uk-dropbar-right" uk-drop="stretch: y; animation: slide-right; animate-out: true">
+                                        <div class="uk-dropbar uk-dropbar-right" uk-drop="target-y: !.uk-navbar-container; stretch: y; animation: slide-right; animate-out: true">
                                             <ul class="uk-nav uk-navbar-dropdown-nav">
                                                 <li class="uk-active"><a href="#">Active</a></li>
                                                 <li><a href="#">Item</a></li>
@@ -251,7 +253,7 @@
                                 <ul class="uk-navbar-nav">
                                     <li>
                                         <a href="#">Fade</a>
-                                        <div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: true; animate-out: true">
+                                        <div class="uk-dropbar uk-dropbar-top" uk-drop="target-y: !.uk-navbar-container; stretch: true; animate-out: true">
 
                                             <ul class="uk-nav uk-navbar-dropdown-nav">
                                                 <li class="uk-active"><a href="#">Active</a></li>
@@ -299,7 +301,7 @@
                                 <ul class="uk-navbar-nav">
                                     <li>
                                         <a href="#">Slide Top</a>
-                                        <div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: true; animation: slide-top; animate-out: true">
+                                        <div class="uk-dropbar uk-dropbar-top" uk-drop="target-y: !.uk-navbar-container; stretch: true; animation: slide-top; animate-out: true">
 
                                             <ul class="uk-nav uk-navbar-dropdown-nav">
                                                 <li class="uk-active"><a href="#">Active</a></li>
@@ -347,7 +349,7 @@
                                 <ul class="uk-navbar-nav">
                                     <li>
                                         <a href="#">Slide Left</a>
-                                        <div class="uk-dropbar uk-dropbar-left" uk-drop="stretch: true; animation: slide-left; animate-out: true">
+                                        <div class="uk-dropbar uk-dropbar-left" uk-drop="target-y: !.uk-navbar-container; stretch: true; animation: slide-left; animate-out: true">
 
                                             <ul class="uk-nav uk-navbar-dropdown-nav">
                                                 <li class="uk-active"><a href="#">Active</a></li>
@@ -395,7 +397,7 @@
                                 <ul class="uk-navbar-nav">
                                     <li>
                                         <a href="#">Slide Right</a>
-                                        <div class="uk-dropbar uk-dropbar-right" uk-drop="stretch: true; animation: slide-right; animate-out: true">
+                                        <div class="uk-dropbar uk-dropbar-right" uk-drop="target-y: !.uk-navbar-container; stretch: true; animation: slide-right; animate-out: true">
 
                                             <ul class="uk-nav uk-navbar-dropdown-nav">
                                                 <li class="uk-active"><a href="#">Active</a></li>

package/tests/index.html

@@ -41,7 +41,7 @@
                             </li>
                             <li>
                                 <a href="#">Dropbar <span uk-navbar-parent-icon></span></a>
-                                <div class="uk-dropbar uk-dropbar-top" uk-drop="pos: bottom-left; stretch: x; animation: slide-top; animate-out: true">
+                                <div class="uk-dropbar uk-dropbar-top" uk-drop="pos: bottom-left; stretch: x; target-y: !.uk-navbar-container; animation: slide-top; animate-out: true">
                                     <ul class="uk-nav uk-navbar-dropdown-nav">
                                         <li class="uk-active"><a href="#">Active</a></li>
                                         <li class="uk-parent">

package/tests/navbar.html

@@ -1556,7 +1556,7 @@
 
         <nav class="uk-navbar-container uk-margin-top"><!-- Margin top only because of dropbar follows already in markup -->
             <div class="uk-container">
-                <div uk-navbar="dropbar: !.uk-navbar-container + .uk-navbar-dropbar">
+                <div uk-navbar="target-y: !.uk-navbar-container; dropbar: !.uk-navbar-container + .uk-navbar-dropbar">
                     <div class="uk-navbar-left">
 
                         <ul class="uk-navbar-nav">
@@ -1637,7 +1637,7 @@
                             </li>
                             <li>
                                 <a href="#">Stretch</a>
-                                <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
+                                <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false; target-y: !.uk-navbar-container">
                                     <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
                                         <div>
                                             <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -1679,7 +1679,7 @@
                             </li>
                             <li>
                                 <a href="#">Stretch Full</a>
-                                <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar-container; stretch: x; flip: false">
+                                <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar-container; stretch: x; flip: false; target-y: !.uk-navbar-container">
                                     <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
                                         <div>
                                             <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -1756,7 +1756,7 @@
 
         <nav class="uk-navbar-container uk-margin">
             <div class="uk-container">
-                <div uk-navbar="dropbar: true; dropbar-anchor: !.uk-navbar-container; align: right">
+                <div uk-navbar="target-y: !.uk-navbar-container; dropbar: true; dropbar-anchor: !.uk-navbar-container; align: right">
                     <div class="uk-navbar-left">
 
                         <ul class="uk-navbar-nav">
@@ -1863,7 +1863,7 @@
                             </li>
                             <li>
                                 <a href="#">Stretch</a>
-                                <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
+                                <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false; target-y: !.uk-navbar-container">
                                     <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
                                         <div>
                                             <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -1912,7 +1912,7 @@
 
         <nav class="uk-navbar-container uk-margin">
             <div class="uk-container">
-                <div uk-navbar="dropbar: true; dropbar-anchor: !.uk-navbar-container; align: center">
+                <div uk-navbar="target-y: !.uk-navbar-container; dropbar: true; dropbar-anchor: !.uk-navbar-container; align: center">
                     <div class="uk-navbar-left">
 
                         <ul class="uk-navbar-nav">
@@ -2019,7 +2019,7 @@
                             </li>
                             <li>
                                 <a href="#">Stretch</a>
-                                <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
+                                <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false; target-y: !.uk-navbar-container">
                                     <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
                                         <div>
                                             <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -2788,7 +2788,7 @@
                                     </ul>
                                 </div>
                             </li>
-                            <li><a href="#">sdaf asdf </a></li>
+                            <li><a href="#">Item</a></li>
                         </ul>
 
                         <div class="uk-navbar-item">
@@ -3129,7 +3129,19 @@
                             <td><code>target</code></td>
                             <td>Boolean, CSS selector</td>
                             <td>false</td>
-                            <td>Align Drop to navbar.</td>
+                            <td>The element the drops are positioned to (`true` for window).</td>
+                        </tr>
+                        <tr>
+                            <td><code>target-x</code></td>
+                            <td>Boolean, CSS selector</td>
+                            <td>false</td>
+                            <td>The element's X axis the drops are positioned to (`true` for window).</td>
+                        </tr>
+                        <tr>
+                            <td><code>target-y</code></td>
+                            <td>Boolean, CSS selector</td>
+                            <td>false</td>
+                            <td>The element's Y axis the drop are positioned to (`true` for window).</td>
                         </tr>
                         <tr>
                             <td><code>cls-drop</code></td>

package/tests/search.html

@@ -294,7 +294,7 @@
                 </div>
             </nav>
 
-            <nav class="uk-navbar-container uk-margin" uk-navbar="dropbar: +.uk-navbar-dropbar">
+            <nav class="uk-navbar-container uk-margin" uk-navbar="target-y: !.uk-navbar-container; dropbar: +.uk-navbar-dropbar">
                 <div class="uk-navbar-left">
 
                     <a class="uk-navbar-item uk-logo" href="#">Dropbar</a>
@@ -315,7 +315,7 @@
 
                     <div>
                         <a class="uk-navbar-toggle" href="#" uk-search-icon></a>
-                        <div class="uk-dropbar uk-dropbar-top" uk-drop="mode: click; cls-drop: uk-dropbar; boundary: !.uk-navbar; stretch: x; flip: false">
+                        <div class="uk-dropbar uk-dropbar-top" uk-drop="mode: click; cls-drop: uk-dropbar; boundary: !.uk-navbar; stretch: x; flip: false; target-y: !.uk-navbar-container">
 
                             <div class="uk-grid-small uk-flex-middle" uk-grid>
                                 <div class="uk-width-expand">

package/tests/sticky-navbar.html

@@ -121,7 +121,7 @@
             <div uk-sticky="end: #sticky-dropbar; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
                 <nav class="uk-navbar-container">
                     <div class="uk-container">
-                        <div uk-navbar="dropbar: true; dropbar-anchor: !.uk-navbar-container">
+                        <div uk-navbar="target-y: !.uk-navbar-container; dropbar: true; dropbar-anchor: !.uk-navbar-container">
                             <div class="uk-navbar-left">
 
                                 <a class="uk-navbar-item uk-logo" href="#">Sticky + Dropbar</a>
@@ -175,7 +175,7 @@
                             <div class="uk-navbar-right">
 
                                 <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
-                                <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false; target-y: !.uk-navbar-container">
                                     <ul class="uk-nav uk-navbar-dropdown-nav">
                                         <li class="uk-active"><a href="#">Active</a></li>
                                         <li class="uk-parent">
@@ -323,7 +323,7 @@
             <div uk-sticky="end: #scrollup-dropbar; show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
                 <nav class="uk-navbar-container">
                     <div class="uk-container uk-container-expand">
-                        <div uk-navbar="dropbar: true; dropbar-anchor: !.uk-navbar-container">
+                        <div uk-navbar="target-y: !.uk-navbar-container; dropbar: true; dropbar-anchor: !.uk-navbar-container">
                             <div class="uk-navbar-left">
 
                                 <a class="uk-navbar-item uk-logo" href="#">Scroll Up + Dropbar</a>
@@ -377,7 +377,7 @@
                             <div class="uk-navbar-right">
 
                                 <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
-                                <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false; target-y: !.uk-navbar-container">
                                     <ul class="uk-nav uk-navbar-dropdown-nav">
                                         <li class="uk-active"><a href="#">Active</a></li>
                                         <li class="uk-parent">
@@ -531,7 +531,7 @@
                 <div uk-sticky="start: 200; end: #transparent-dropbar; show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; cls-inactive: uk-navbar-transparent uk-light">
                     <nav class="uk-navbar-container">
                         <div class="uk-container uk-container-expand">
-                            <div uk-navbar="dropbar: true; dropbar-anchor: !.uk-navbar-container">
+                            <div uk-navbar="target-y: !.uk-navbar-container; dropbar: true; dropbar-anchor: !.uk-navbar-container">
                                 <div class="uk-navbar-left">
 
                                     <a class="uk-navbar-item uk-logo" href="#">Transparent + Dropbar</a>
@@ -585,7 +585,7 @@
                                 <div class="uk-navbar-right">
 
                                     <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
-                                    <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
+                                    <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false; target-y: !.uk-navbar-container">
                                         <ul class="uk-nav uk-navbar-dropdown-nav">
                                             <li class="uk-active"><a href="#">Active</a></li>
                                             <li class="uk-parent">