uikit 3.16.11-dev.85cdca725 → 3.16.11-dev.cc1aeb568

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.16.11-dev.85cdca725",
+  "version": "3.16.11-dev.cc1aeb568",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

package/src/js/api/computed.js

@@ -1,3 +1,5 @@
+import { runWatches } from './watch';
+import { callUpdate, prependUpdate } from './update';
 import { hasOwn, isUndefined } from 'uikit-util';
 
 export function initComputed(instance) {
@@ -12,13 +14,8 @@ export function initComputed(instance) {
     }
 }
 
-export function resetComputed(instance) {
-    const values = { ...instance._computed };
-    instance._computed = {};
-    return values;
-}
-
 export function registerComputed(instance, key, cb) {
+    instance._hasComputed = true;
     Object.defineProperty(instance, key, {
         enumerable: true,
 
@@ -43,3 +40,47 @@ export function registerComputed(instance, key, cb) {
         },
     });
 }
+
+export function initComputedUpdates(instance) {
+    if (!instance._hasComputed) {
+        return;
+    }
+
+    prependUpdate(instance, {
+        read: () => runWatches(instance, resetComputed(instance)),
+        events: ['resize', 'computed'],
+    });
+
+    registerComputedObserver();
+    instances.add(instance);
+}
+
+export function disconnectComputedUpdates(instance) {
+    instances?.delete(instance);
+    resetComputed(instance);
+}
+
+function resetComputed(instance) {
+    const values = { ...instance._computed };
+    instance._computed = {};
+    return values;
+}
+
+let observer;
+let instances;
+function registerComputedObserver() {
+    if (observer) {
+        return;
+    }
+
+    instances = new Set();
+    observer = new MutationObserver(() => {
+        for (const instance of instances) {
+            callUpdate(instance, 'computed');
+        }
+    });
+    observer.observe(document, {
+        childList: true,
+        subtree: true,
+    });
+}

package/src/js/api/hooks.js

@@ -1,9 +1,10 @@
+import { disconnectComputedUpdates, initComputedUpdates } from './computed';
 import { log } from './log';
 import { initWatches } from './watch';
-import { callUpdate, initUpdates } from './update';
+import { callUpdate, clearUpdateData, initUpdates } from './update';
 import { initEvents, unbindEvents } from './events';
 import { initProps, initPropsObserver } from './props';
-import { disconnectObservers, initObservers, initWatchObserver } from './observer';
+import { disconnectObservers, initObservers } from './observer';
 
 export function callHook(instance, hook) {
     LOG && log(instance, hook);
@@ -15,9 +16,6 @@ export function callConnected(instance) {
         return;
     }
 
-    instance._data = {};
-    instance._computed = {};
-
     initProps(instance);
 
     callHook(instance, 'beforeConnect');
@@ -29,7 +27,7 @@ export function callConnected(instance) {
     initObservers(instance);
 
     initPropsObserver(instance);
-    initWatchObserver(instance);
+    initComputedUpdates(instance);
 
     callHook(instance, 'connected');
     callUpdate(instance);
@@ -41,10 +39,13 @@ export function callDisconnected(instance) {
     }
 
     callHook(instance, 'beforeDisconnect');
-    disconnectObservers(instance);
+
     unbindEvents(instance);
+    clearUpdateData(instance);
+    disconnectObservers(instance);
+    disconnectComputedUpdates(instance);
+
     callHook(instance, 'disconnected');
 
     instance._connected = false;
-    delete instance._watch;
 }

package/src/js/api/observer.js

@@ -1,5 +1,5 @@
+import { registerWatch } from './watch';
 import { registerComputed } from './computed';
-import { callWatches, registerWatch } from './watch';
 import { hasOwn, includes, isArray, isFunction, isString } from 'uikit-util';
 
 export function initObservers(instance) {
@@ -33,7 +33,7 @@ function registerObservable(instance, observable) {
     }
 
     const key = `_observe${instance._observers.length}`;
-    if (isFunction(target) && !(key in instance)) {
+    if (isFunction(target) && !hasOwn(instance, key)) {
         registerComputed(instance, key, () => target.call(instance, instance));
     }
 
@@ -43,42 +43,24 @@ function registerObservable(instance, observable) {
         options = options.call(instance, instance);
     }
 
-    const observer = observe(key in instance ? instance[key] : target, handler, options, args);
+    const targets = hasOwn(instance, key) ? instance[key] : target;
+    const observer = observe(targets, handler, options, args);
 
     if (isFunction(target) && isArray(instance[key]) && observer.unobserve) {
-        registerWatch(
-            instance,
-            {
-                handler(targets, prev) {
-                    for (const target of prev) {
-                        !includes(targets, target) && observer.unobserve(target);
-                    }
-
-                    for (const target of targets) {
-                        !includes(prev, target) && observer.observe(target);
-                    }
-                },
-                immediate: false,
-            },
-            key
-        );
+        registerWatch(instance, { handler: updateTargets(observer), immediate: false }, key);
     }
 
     registerObserver(instance, observer);
 }
 
-export function initWatchObserver(instance) {
-    let { el, computed } = instance.$options;
-
-    if (!computed && !instance._watches) {
-        return;
-    }
-
-    const observer = new MutationObserver(() => callWatches(instance));
-    observer.observe(instance._observeTarget || el, {
-        childList: true,
-        subtree: true,
-    });
+function updateTargets(observer) {
+    return (targets, prev) => {
+        for (const target of prev) {
+            !includes(targets, target) && observer.unobserve(target);
+        }
 
-    registerObserver(instance, observer);
+        for (const target of targets) {
+            !includes(prev, target) && observer.observe(target);
+        }
+    };
 }

package/src/js/api/update.js

@@ -1,6 +1,7 @@
 import { assign, fastdom, isPlainObject } from 'uikit-util';
 
 export function initUpdates(instance) {
+    instance._data = {};
     instance._updates = [...(instance.$options.update || [])];
 }
 
@@ -8,12 +9,16 @@ export function prependUpdate(instance, update) {
     instance._updates.unshift(update);
 }
 
+export function clearUpdateData(instance) {
+    delete instance._data;
+}
+
 export function callUpdate(instance, e = 'update') {
     if (!instance._connected) {
         return;
     }
 
-    if (!instance.$options.update) {
+    if (!instance._updates.length) {
         return;
     }
 

package/src/js/api/watch.js

@@ -1,5 +1,3 @@
-import { resetComputed } from './computed';
-import { prependUpdate } from './update';
 import { hasOwn, isEqual, isPlainObject } from 'uikit-util';
 
 export function initWatches(instance) {
@@ -10,7 +8,6 @@ export function initWatches(instance) {
         }
     }
     instance._initial = true;
-    prependUpdate(instance, { read: () => callWatches(instance), events: ['resize'] });
 }
 
 export function registerWatch(instance, watch, name) {
@@ -18,30 +15,17 @@ export function registerWatch(instance, watch, name) {
         name,
         ...(isPlainObject(watch) ? watch : { handler: watch }),
     });
-
-    if (watch.document) {
-        instance._observeTarget = instance.$options.el.ownerDocumentocument;
-    }
 }
 
-export function callWatches(instance) {
-    if (!instance._connected) {
-        return;
-    }
-
-    runWatches(instance, instance._initial);
-    instance._initial = false;
-}
-
-function runWatches(instance, initial) {
-    const values = resetComputed(instance);
-
+export function runWatches(instance, values) {
     for (const { name, handler, immediate = true } of instance._watches) {
         if (
-            (initial && immediate) ||
-            (hasOwn(values, name) && !isEqual(values[name], instance[name]))
+            instance._initial
+                ? immediate
+                : hasOwn(values, name) && !isEqual(values[name], instance[name])
         ) {
-            handler.call(instance, instance[name], initial ? undefined : values[name]);
+            handler.call(instance, instance[name], instance._initial ? undefined : values[name]);
         }
     }
+    instance._initial = false;
 }

package/src/js/core/drop.js

@@ -3,7 +3,7 @@ import Position from '../mixin/position';
 import Container from '../mixin/container';
 import Togglable from '../mixin/togglable';
 import { keyMap } from '../util/keys';
-import { preventBackgroundScroll } from '../util/scroll';
+import { preventBackgroundScroll } from '../mixin/internal/scroll';
 import {
     addClass,
     append,

package/src/js/core/dropnav.js

@@ -105,45 +105,33 @@ export default {
     },
 
     watch: {
-        dropbar: {
-            handler(dropbar) {
-                addClass(
-                    dropbar,
-                    'uk-dropbar',
-                    'uk-dropbar-top',
-                    this.clsDropbar,
-                    `uk-${this.$options.name}-dropbar`
-                );
-            },
-
-            immediate: true,
+        dropbar(dropbar) {
+            addClass(
+                dropbar,
+                'uk-dropbar',
+                'uk-dropbar-top',
+                this.clsDropbar,
+                `uk-${this.$options.name}-dropbar`
+            );
         },
 
-        dropdowns: {
-            handler(dropdowns) {
-                this.$create(
-                    'drop',
-                    dropdowns.filter((el) => !this.getDropdown(el)),
-                    {
-                        ...this.$props,
-                        flip: false,
-                        shift: true,
-                        pos: `bottom-${this.align}`,
-                        boundary: this.boundary === true ? this.$el : this.boundary,
-                    }
-                );
-            },
-
-            immediate: true,
+        dropdowns(dropdowns) {
+            this.$create(
+                'drop',
+                dropdowns.filter((el) => !this.getDropdown(el)),
+                {
+                    ...this.$props,
+                    flip: false,
+                    shift: true,
+                    pos: `bottom-${this.align}`,
+                    boundary: this.boundary === true ? this.$el : this.boundary,
+                }
+            );
         },
 
-        items: {
-            handler(items) {
-                attr(items, 'tabindex', -1);
-                attr(items[0], 'tabindex', 0);
-            },
-
-            immediate: true,
+        items(items) {
+            attr(items, 'tabindex', -1);
+            attr(items[0], 'tabindex', 0);
         },
     },
 

package/src/js/core/img.js

@@ -58,9 +58,10 @@ export default {
     },
 
     disconnected() {
-        if (this._data.image) {
-            this._data.image.onload = '';
+        if (this.img) {
+            this.img.onload = '';
         }
+        delete this.img;
     },
 
     observe: intersection({
@@ -75,8 +76,8 @@ export default {
 
     methods: {
         load() {
-            if (this._data.image) {
-                return this._data.image;
+            if (this.img) {
+                return this.img;
             }
 
             const image = isImg(this.$el)
@@ -85,7 +86,7 @@ export default {
 
             removeAttr(image, 'loading');
             setSrcAttrs(this.$el, image.currentSrc);
-            return (this._data.image = image);
+            return (this.img = image);
         },
     },
 };

package/src/js/core/navbar.js

@@ -11,27 +11,23 @@ export default {
     },
 
     watch: {
-        items: {
-            handler() {
-                const justify = hasClass(this.$el, 'uk-navbar-justify');
-                for (const container of $$(
-                    '.uk-navbar-nav, .uk-navbar-left, .uk-navbar-right',
-                    this.$el
-                )) {
-                    css(
-                        container,
-                        'flexGrow',
-                        justify
-                            ? $$(
-                                  '.uk-navbar-nav > li > a, .uk-navbar-item, .uk-navbar-toggle',
-                                  container
-                              ).length
-                            : ''
-                    );
-                }
-            },
-
-            immediate: true,
+        items() {
+            const justify = hasClass(this.$el, 'uk-navbar-justify');
+            for (const container of $$(
+                '.uk-navbar-nav, .uk-navbar-left, .uk-navbar-right',
+                this.$el
+            )) {
+                css(
+                    container,
+                    'flexGrow',
+                    justify
+                        ? $$(
+                              '.uk-navbar-nav > li > a, .uk-navbar-item, .uk-navbar-toggle',
+                              container
+                          ).length
+                        : ''
+                );
+            }
         },
     },
 };

package/src/js/core/scrollspy.js

@@ -49,19 +49,20 @@ export default {
     },
 
     connected() {
-        this._data.elements = new Map();
+        this.elementData = new Map();
     },
 
     disconnected() {
-        for (const [el, state] of this._data.elements.entries()) {
+        for (const [el, state] of this.elementData.entries()) {
             removeClass(el, this.inViewClass, state?.cls || '');
         }
+        delete this.elementData;
     },
 
     observe: intersection({
         target: ({ elements }) => elements,
         handler(records) {
-            const elements = this._data.elements;
+            const elements = this.elementData;
             for (const { target: el, isIntersecting } of records) {
                 if (!elements.has(el)) {
                     elements.set(el, {
@@ -86,7 +87,7 @@ export default {
     update: [
         {
             write(data) {
-                for (const [el, state] of data.elements.entries()) {
+                for (const [el, state] of this.elementData.entries()) {
                     if (state.show && !state.inview && !state.queued) {
                         state.queued = true;
 
@@ -109,7 +110,7 @@ export default {
 
     methods: {
         toggle(el, inview) {
-            const state = this._data.elements.get(el);
+            const state = this.elementData.get(el);
 
             if (!state) {
                 return;

package/src/js/core/switcher.js

@@ -71,15 +71,11 @@ export default {
     },
 
     watch: {
-        connects: {
-            handler(connects) {
-                if (this.swiping) {
-                    css(connects, 'touchAction', 'pan-y pinch-zoom');
-                }
-                this.$emit();
-            },
-
-            document: true,
+        connects(connects) {
+            if (this.swiping) {
+                css(connects, 'touchAction', 'pan-y pinch-zoom');
+            }
+            this.$emit();
         },
 
         connectChildren() {

package/src/js/core/toggle.js

@@ -42,13 +42,9 @@ export default {
     },
 
     computed: {
-        target: {
-            get({ href, target }, $el) {
-                target = queryAll(target || href, $el);
-                return (target.length && target) || [$el];
-            },
-
-            document: true,
+        target({ href, target }, $el) {
+            target = queryAll(target || href, $el);
+            return (target.length && target) || [$el];
         },
     },
 

package/src/js/{util → mixin/internal}/scroll.js

@@ -1,8 +1,4 @@
-import { width } from './dimensions';
-import { on } from './event';
-import { matches } from './filter';
-import { css } from './style';
-import { scrollParents } from './viewport';
+import { css, matches, on, scrollParents, width } from 'uikit-util';
 
 let prevented;
 export function preventBackgroundScroll(el) {

package/src/js/mixin/modal.js

@@ -23,7 +23,7 @@ import {
     toFloat,
     within,
 } from 'uikit-util';
-import { preventBackgroundScroll } from '../util/scroll';
+import { preventBackgroundScroll } from './internal/scroll';
 
 const active = [];
 

package/tests/drop.html

@@ -360,7 +360,6 @@
                         </div>
                         <div class="uk-flex uk-flex-between uk-flex-wrap gap">
 
-
                             <div>
                                 <button class="uk-button uk-button-default" type="button">Bottom Right</button>
                                 <div class="js-options uk-dropdown" uk-drop="pos: bottom-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

package/tests/dropnav.html

@@ -807,7 +807,7 @@
                     </tbody>
                 </table>
             </div>
-    
+
         </div>
 
         <script>

package/tests/icon.html

@@ -120,7 +120,6 @@
                                 <li><span class="uk-margin-small-right" uk-icon="icon: tablet-landscape"></span> tablet-landscape</li>
                                 <li><span class="uk-margin-small-right" uk-icon="icon: phone-landscape"></span> phone-landscape</li>
 
-
                             </ul>
 
                         </div>
@@ -386,7 +385,6 @@
                         <li><a class="uk-icon-link" href="#" uk-icon="icon: yelp"></a></li>
                         <li><a class="uk-icon-link" href="#" uk-icon="icon: youtube"></a></li>
 
-
                     </ul>
 
                     <h2>Button</h2>

package/tests/modal.html

@@ -138,7 +138,6 @@
 
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 
-
             <h2>JavaScript Options</h2>
 
             <div class="uk-overflow-auto">

package/tests/nav.html

@@ -441,6 +441,5 @@
 
         </script>
 
-
     </body>
 </html>

package/tests/navbar.html

@@ -1575,7 +1575,6 @@
             </div>
         </nav>
 
-
         <div class="uk-container uk-margin-medium-top">
 
             <h2>Icons and Subtitles</h2>

package/tests/progress.html

@@ -55,6 +55,5 @@
 
         </script>
 
-
     </body>
 </html>

package/tests/scroll.html

@@ -76,7 +76,6 @@
                     </div>
                 </div>
 
-
             </div>
 
             <a id="bottom" class="uk-button uk-button-default" href uk-scroll>Go Up!</a>

package/tests/sticky-navbar.html

@@ -91,7 +91,7 @@
                                         <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
                                     </ul>
                                 </div>
-        
+
                             </div>
                         </div>
                     </div>
@@ -192,7 +192,7 @@
                                         <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
                                     </ul>
                                 </div>
-        
+
                             </div>
                         </div>
                     </div>
@@ -293,7 +293,7 @@
                                         <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
                                     </ul>
                                 </div>
-        
+
                             </div>
                         </div>
                     </div>
@@ -394,7 +394,7 @@
                                         <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
                                     </ul>
                                 </div>
-        
+
                             </div>
                         </div>
                     </div>
@@ -497,7 +497,7 @@
                                             <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
                                         </ul>
                                     </div>
-            
+
                                 </div>
                             </div>
                         </div>
@@ -602,7 +602,7 @@
                                             <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
                                         </ul>
                                     </div>
-            
+
                                 </div>
                             </div>
                         </div>