uikit 3.16.10 → 3.16.11-dev.55a0fc5b5

package/src/js/core/dropnav.js

@@ -7,7 +7,6 @@ import {
     addClass,
     after,
     attr,
-    children,
     css,
     findIndex,
     getIndex,
@@ -70,21 +69,44 @@ export default {
             return query(dropbarAnchor, $el) || $el;
         },
 
-        dropbar: {
-            get({ dropbar }) {
-                if (!dropbar) {
-                    return null;
+        dropbar({ dropbar }) {
+            if (!dropbar) {
+                return null;
+            }
+
+            dropbar =
+                this._dropbar || query(dropbar, this.$el) || $(`+ .${this.clsDropbar}`, this.$el);
+
+            return dropbar ? dropbar : (this._dropbar = $('<div></div>'));
+        },
+
+        dropContainer(_, $el) {
+            return this.container || $el;
+        },
+
+        dropdowns({ clsDrop }, $el) {
+            const dropdowns = $$(`.${clsDrop}`, $el);
+
+            if (this.dropContainer !== $el) {
+                for (const el of $$(`.${clsDrop}`, this.dropContainer)) {
+                    const target = this.getDropdown(el)?.targetEl;
+                    if (!includes(dropdowns, el) && target && within(target, this.$el)) {
+                        dropdowns.push(el);
+                    }
                 }
+            }
 
-                dropbar =
-                    this._dropbar ||
-                    query(dropbar, this.$el) ||
-                    $(`+ .${this.clsDropbar}`, this.$el);
+            return dropdowns;
+        },
 
-                return dropbar ? dropbar : (this._dropbar = $('<div></div>'));
-            },
+        items({ selNavItem }, $el) {
+            return $$(selNavItem, $el);
+        },
+    },
 
-            watch(dropbar) {
+    watch: {
+        dropbar: {
+            handler(dropbar) {
                 addClass(
                     dropbar,
                     'uk-dropbar',
@@ -97,27 +119,8 @@ export default {
             immediate: true,
         },
 
-        dropContainer(_, $el) {
-            return this.container || $el;
-        },
-
         dropdowns: {
-            get({ clsDrop }, $el) {
-                const dropdowns = $$(`.${clsDrop}`, $el);
-
-                if (this.dropContainer !== $el) {
-                    for (const el of $$(`.${clsDrop}`, this.dropContainer)) {
-                        const target = this.getDropdown(el)?.targetEl;
-                        if (!includes(dropdowns, el) && target && within(target, this.$el)) {
-                            dropdowns.push(el);
-                        }
-                    }
-                }
-
-                return dropdowns;
-            },
-
-            watch(dropdowns) {
+            handler(dropdowns) {
                 this.$create(
                     'drop',
                     dropdowns.filter((el) => !this.getDropdown(el)),
@@ -135,13 +138,8 @@ export default {
         },
 
         items: {
-            get({ selNavItem }, $el) {
-                return $$(selNavItem, $el);
-            },
-
-            watch(items) {
-                attr(children(this.$el), 'role', 'presentation');
-                attr(items, { tabindex: -1, role: 'menuitem' });
+            handler(items) {
+                attr(items, 'tabindex', -1);
                 attr(items[0], 'tabindex', 0);
             },
 
@@ -149,10 +147,6 @@ export default {
         },
     },
 
-    connected() {
-        attr(this.$el, 'role', 'menubar');
-    },
-
     disconnected() {
         remove(this._dropbar);
         delete this._dropbar;

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

@@ -16,14 +16,8 @@ export default {
     },
 
     computed: {
-        elements: {
-            get({ target }, $el) {
-                return $$(target, $el);
-            },
-
-            watch() {
-                this.$reset();
-            },
+        elements({ target }, $el) {
+            return $$(target, $el);
         },
     },
 

package/src/js/core/navbar.js

@@ -1,5 +1,5 @@
 import Dropnav from './dropnav';
-import { $$, attr, css, hasClass } from 'uikit-util';
+import { $$, css, hasClass } from 'uikit-util';
 
 export default {
     extends: Dropnav,
@@ -10,13 +10,9 @@ export default {
             '.uk-navbar-nav > li > a,a.uk-navbar-item,button.uk-navbar-item,.uk-navbar-item a,.uk-navbar-item button,.uk-navbar-toggle', // Simplify with :where() selector once browser target is Safari 14+
     },
 
-    computed: {
+    watch: {
         items: {
-            get({ selNavItem }, $el) {
-                return $$(selNavItem, $el);
-            },
-
-            watch(items) {
+            handler() {
                 const justify = hasClass(this.$el, 'uk-navbar-justify');
                 for (const container of $$(
                     '.uk-navbar-nav, .uk-navbar-left, .uk-navbar-right',
@@ -33,11 +29,6 @@ export default {
                             : ''
                     );
                 }
-
-                attr($$('.uk-navbar-nav', this.$el), 'role', 'group');
-                attr($$('.uk-navbar-nav > *', this.$el), 'role', 'presentation');
-                attr(items, { tabindex: -1, role: 'menuitem' });
-                attr(items[0], 'tabindex', 0);
             },
 
             immediate: true,

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

@@ -31,18 +31,8 @@ export default {
     },
 
     computed: {
-        links: {
-            get(_, $el) {
-                return $$('a[href*="#"]', $el).filter((el) => el.hash && isSameSiteAnchor(el));
-            },
-
-            watch(links) {
-                if (this.scroll) {
-                    this.$create('scroll', links, { offset: this.offset || 0 });
-                }
-            },
-
-            immediate: true,
+        links(_, $el) {
+            return $$('a[href*="#"]', $el).filter((el) => el.hash && isSameSiteAnchor(el));
         },
 
         elements({ closest: selector }) {
@@ -50,6 +40,14 @@ export default {
         },
     },
 
+    watch: {
+        links(links) {
+            if (this.scroll) {
+                this.$create('scroll', links, { offset: this.offset || 0 });
+            }
+        },
+    },
+
     observe: scroll(),
 
     update: [

package/src/js/core/scrollspy.js

@@ -34,19 +34,17 @@ export default {
     }),
 
     computed: {
-        elements: {
-            get({ target }, $el) {
-                return target ? $$(target, $el) : [$el];
-            },
-
-            watch(elements) {
-                if (this.hidden) {
-                    // use `opacity:0` instead of `visibility:hidden` to make content focusable with keyboard
-                    css(filter(elements, `:not(.${this.inViewClass})`), 'opacity', 0);
-                }
-            },
+        elements({ target }, $el) {
+            return target ? $$(target, $el) : [$el];
+        },
+    },
 
-            immediate: true,
+    watch: {
+        elements(elements) {
+            if (this.hidden) {
+                // use `opacity:0` instead of `visibility:hidden` to make content focusable with keyboard
+                css(filter(elements, `:not(.${this.inViewClass})`), 'opacity', 0);
+            }
         },
     },
 

package/src/js/core/switcher.js

@@ -51,56 +51,49 @@ export default {
     },
 
     computed: {
-        connects: {
-            get({ connect }, $el) {
-                return queryAll(connect, $el);
-            },
+        connects({ connect }, $el) {
+            return queryAll(connect, $el);
+        },
 
-            watch(connects) {
-                if (this.swiping) {
-                    css(connects, 'touchAction', 'pan-y pinch-zoom');
-                }
-                this.$emit();
-            },
+        connectChildren() {
+            return this.connects.map((el) => children(el)).flat();
+        },
 
-            document: true,
-            immediate: true,
+        toggles({ toggle }, $el) {
+            return $$(toggle, $el);
         },
 
-        connectChildren: {
-            get() {
-                return this.connects.map((el) => children(el)).flat();
-            },
+        children() {
+            return children(this.$el).filter((child) =>
+                this.toggles.some((toggle) => within(toggle, child))
+            );
+        },
+    },
 
-            watch() {
-                const index = this.index();
-                for (const el of this.connects) {
-                    children(el).forEach((child, i) => toggleClass(child, this.cls, i === index));
+    watch: {
+        connects: {
+            handler(connects) {
+                if (this.swiping) {
+                    css(connects, 'touchAction', 'pan-y pinch-zoom');
                 }
                 this.$emit();
             },
 
-            immediate: true,
+            document: true,
         },
 
-        toggles: {
-            get({ toggle }, $el) {
-                return $$(toggle, $el);
-            },
-
-            watch(toggles) {
-                this.$emit();
-                const active = this.index();
-                this.show(~active ? active : toggles[this.active] || toggles[0]);
-            },
-
-            immediate: true,
+        connectChildren() {
+            const index = this.index();
+            for (const el of this.connects) {
+                children(el).forEach((child, i) => toggleClass(child, this.cls, i === index));
+            }
+            this.$emit();
         },
 
-        children() {
-            return children(this.$el).filter((child) =>
-                this.toggles.some((toggle) => within(toggle, child))
-            );
+        toggles(toggles) {
+            this.$emit();
+            const active = this.index();
+            this.show(~active ? active : toggles[this.active] || toggles[0]);
         },
     },
 

package/src/js/mixin/slider-nav.js

@@ -1,11 +1,12 @@
 import {
     $,
     $$,
+    append,
     attr,
     children,
     closest,
     data,
-    html,
+    empty,
     isNumeric,
     matches,
     toFloat,
@@ -30,106 +31,109 @@ export default {
     },
 
     computed: {
-        nav: {
-            get({ selNav }, $el) {
-                return $(selNav, $el);
-            },
-
-            watch(nav, prev) {
-                attr(nav, 'role', 'tablist');
-
-                if (prev) {
-                    this.$emit();
-                }
-            },
+        nav({ selNav }, $el) {
+            return $(selNav, $el);
+        },
 
-            immediate: true,
+        navChildren() {
+            return children(this.nav);
         },
 
         selNavItem({ attrItem }) {
             return `[${attrItem}],[data-${attrItem}]`;
         },
 
-        navItems: {
-            get(_, $el) {
-                return $$(this.selNavItem, $el);
-            },
-
-            watch() {
-                this.$emit();
-            },
+        navItems(_, $el) {
+            return $$(this.selNavItem, $el);
         },
     },
 
-    connected() {
-        attr(this.$el, {
-            role: this.role,
-            ariaRoleDescription: 'carousel',
-        });
-    },
+    watch: {
+        nav(nav, prev) {
+            attr(nav, 'role', 'tablist');
 
-    update: [
-        {
-            write() {
-                this.slides.forEach((slide, i) =>
-                    attr(slide, {
-                        role: this.nav ? 'tabpanel' : 'group',
-                        'aria-label': this.t('slideLabel', i + 1, this.length),
-                        'aria-roledescription': this.nav ? null : 'slide',
-                    })
-                );
-
-                if (this.nav && this.length !== this.nav.children.length) {
-                    html(
-                        this.nav,
-                        this.slides
-                            .map((_, i) => `<li ${this.attrItem}="${i}"><a href></a></li>`)
-                            .join('')
-                    );
-                }
+            if (prev) {
+                this.$emit();
+            }
+        },
 
-                attr(children(this.nav).concat(this.list), 'role', 'presentation');
+        list(list) {
+            attr(list, 'role', 'presentation');
+        },
+
+        navChildren(children) {
+            attr(children, 'role', 'presentation');
+        },
 
-                for (const el of this.navItems) {
-                    const cmd = data(el, this.attrItem);
-                    const button = $('a,button', el) || el;
+        navItems(items) {
+            for (const el of items) {
+                const cmd = data(el, this.attrItem);
+                const button = $('a,button', el) || el;
 
-                    let ariaLabel;
-                    let ariaControls = null;
-                    if (isNumeric(cmd)) {
-                        const item = toNumber(cmd);
-                        const slide = this.slides[item];
+                let ariaLabel;
+                let ariaControls = null;
+                if (isNumeric(cmd)) {
+                    const item = toNumber(cmd);
+                    const slide = this.slides[item];
 
-                        if (slide) {
-                            if (!slide.id) {
-                                slide.id = generateId(this, slide, `-item-${cmd}`);
-                            }
-                            ariaControls = slide.id;
+                    if (slide) {
+                        if (!slide.id) {
+                            slide.id = generateId(this, slide, `-item-${cmd}`);
                         }
+                        ariaControls = slide.id;
+                    }
 
-                        ariaLabel = this.t('slideX', toFloat(cmd) + 1);
-
-                        attr(button, 'role', 'tab');
-                    } else {
-                        if (this.list) {
-                            if (!this.list.id) {
-                                this.list.id = generateId(this, this.list, '-items');
-                            }
+                    ariaLabel = this.t('slideX', toFloat(cmd) + 1);
 
-                            ariaControls = this.list.id;
+                    attr(button, 'role', 'tab');
+                } else {
+                    if (this.list) {
+                        if (!this.list.id) {
+                            this.list.id = generateId(this, this.list, '-items');
                         }
 
-                        ariaLabel = this.t(cmd);
+                        ariaControls = this.list.id;
                     }
 
-                    attr(button, {
-                        'aria-controls': ariaControls,
-                        'aria-label': attr(button, 'aria-label') || ariaLabel,
-                    });
+                    ariaLabel = this.t(cmd);
                 }
-            },
+
+                attr(button, {
+                    'aria-controls': ariaControls,
+                    'aria-label': attr(button, 'aria-label') || ariaLabel,
+                });
+            }
+        },
+
+        slides(slides) {
+            slides.forEach((slide, i) =>
+                attr(slide, {
+                    role: this.nav ? 'tabpanel' : 'group',
+                    'aria-label': this.t('slideLabel', i + 1, this.length),
+                    'aria-roledescription': this.nav ? null : 'slide',
+                })
+            );
         },
 
+        length(length) {
+            const navLength = this.navChildren.length;
+            if (this.nav && length !== navLength) {
+                empty(this.nav);
+                for (let i = 0; i < length; i++) {
+                    append(this.nav, `<li ${this.attrItem}="${i}"><a href></a></li>`);
+                }
+            }
+        },
+    },
+
+    connected() {
+        attr(this.$el, {
+            role: this.role,
+            ariaRoleDescription: 'carousel',
+        });
+    },
+
+    update: [
         {
             write() {
                 this.navItems.concat(this.nav).forEach((el) => el && (el.hidden = !this.maxIndex));

package/src/js/mixin/slider.js

@@ -63,14 +63,8 @@ export default {
             return this.length - 1;
         },
 
-        slides: {
-            get() {
-                return children(this.list);
-            },
-
-            watch() {
-                this.$emit();
-            },
+        slides() {
+            return children(this.list);
         },
 
         length() {
@@ -78,6 +72,14 @@ export default {
         },
     },
 
+    watch: {
+        slides(slides, prev) {
+            if (prev) {
+                this.$emit();
+            }
+        },
+    },
+
     observe: resize(),
 
     methods: {

package/src/js/util/fastdom.js

@@ -8,8 +8,8 @@ export const fastdom = {
     reads: [],
     writes: [],
 
-    read(task, prepend) {
-        this.reads[prepend ? 'unshift' : 'push'](task);
+    read(task) {
+        this.reads.push(task);
         scheduleFlush();
         return task;
     },