uikit 3.16.11-dev.bde560a72 → 3.16.11-dev.cc1aeb568

package/src/js/core/dropnav.js

@@ -7,7 +7,6 @@ import {
     addClass,
     after,
     attr,
-    children,
     css,
     findIndex,
     getIndex,
@@ -70,82 +69,69 @@ export default {
             return query(dropbarAnchor, $el) || $el;
         },
 
-        dropbar: {
-            get({ dropbar }) {
-                if (!dropbar) {
-                    return null;
-                }
-
-                dropbar =
-                    this._dropbar ||
-                    query(dropbar, this.$el) ||
-                    $(`+ .${this.clsDropbar}`, this.$el);
+        dropbar({ dropbar }) {
+            if (!dropbar) {
+                return null;
+            }
 
-                return dropbar ? dropbar : (this._dropbar = $('<div></div>'));
-            },
-
-            watch(dropbar) {
-                addClass(
-                    dropbar,
-                    'uk-dropbar',
-                    'uk-dropbar-top',
-                    this.clsDropbar,
-                    `uk-${this.$options.name}-dropbar`
-                );
-            },
+            dropbar =
+                this._dropbar || query(dropbar, this.$el) || $(`+ .${this.clsDropbar}`, this.$el);
 
-            immediate: true,
+            return dropbar ? dropbar : (this._dropbar = $('<div></div>'));
         },
 
         dropContainer(_, $el) {
             return this.container || $el;
         },
 
-        dropdowns: {
-            get({ clsDrop }, $el) {
-                const dropdowns = $$(`.${clsDrop}`, $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);
-                        }
+            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) {
-                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,
-                    }
-                );
-            },
+            return dropdowns;
+        },
 
-            immediate: true,
+        items({ selNavItem }, $el) {
+            return $$(selNavItem, $el);
         },
+    },
 
-        items: {
-            get({ selNavItem }, $el) {
-                return $$(selNavItem, $el);
-            },
+    watch: {
+        dropbar(dropbar) {
+            addClass(
+                dropbar,
+                'uk-dropbar',
+                'uk-dropbar-top',
+                this.clsDropbar,
+                `uk-${this.$options.name}-dropbar`
+            );
+        },
 
-            watch(items) {
-                attr(children(this.$el), 'role', 'presentation');
-                attr(items, 'tabindex', -1);
-                attr(items[0], 'tabindex', 0);
-            },
+        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,
+                }
+            );
+        },
 
-            immediate: true,
+        items(items) {
+            attr(items, 'tabindex', -1);
+            attr(items[0], 'tabindex', 0);
         },
     },
 

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/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

@@ -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,37 +10,24 @@ 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: {
-        items: {
-            get({ selNavItem }, $el) {
-                return $$(selNavItem, $el);
-            },
-
-            watch(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
-                            : ''
-                    );
-                }
-
-                attr($$('.uk-navbar-nav', this.$el), 'role', 'group');
-                attr($$('.uk-navbar-nav > *', this.$el), 'role', 'presentation');
-                attr(items, 'tabindex', -1);
-                attr(items[0], 'tabindex', 0);
-            },
-
-            immediate: true,
+    watch: {
+        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-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,36 +34,35 @@ 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);
+            }
         },
     },
 
     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, {
@@ -88,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;
 
@@ -111,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

@@ -51,50 +51,16 @@ export default {
     },
 
     computed: {
-        connects: {
-            get({ connect }, $el) {
-                return queryAll(connect, $el);
-            },
-
-            watch(connects) {
-                if (this.swiping) {
-                    css(connects, 'touchAction', 'pan-y pinch-zoom');
-                }
-                this.$emit();
-            },
-
-            document: true,
-            immediate: true,
+        connects({ connect }, $el) {
+            return queryAll(connect, $el);
         },
 
-        connectChildren: {
-            get() {
-                return this.connects.map((el) => children(el)).flat();
-            },
-
-            watch() {
-                const index = this.index();
-                for (const el of this.connects) {
-                    children(el).forEach((child, i) => toggleClass(child, this.cls, i === index));
-                }
-                this.$emit();
-            },
-
-            immediate: true,
+        connectChildren() {
+            return this.connects.map((el) => children(el)).flat();
         },
 
-        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,
+        toggles({ toggle }, $el) {
+            return $$(toggle, $el);
         },
 
         children() {
@@ -104,6 +70,29 @@ export default {
         },
     },
 
+    watch: {
+        connects(connects) {
+            if (this.swiping) {
+                css(connects, 'touchAction', 'pan-y pinch-zoom');
+            }
+            this.$emit();
+        },
+
+        connectChildren() {
+            const index = this.index();
+            for (const el of this.connects) {
+                children(el).forEach((child, i) => toggleClass(child, this.cls, i === index));
+            }
+            this.$emit();
+        },
+
+        toggles(toggles) {
+            this.$emit();
+            const active = this.index();
+            this.show(~active ? active : toggles[this.active] || toggles[0]);
+        },
+    },
+
     connected() {
         attr(this.$el, 'role', 'tablist');
     },

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/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));