uikit 3.15.4-dev.dbc0ede84 → 3.15.5-dev.ec9b624fd

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.15.4-dev.dbc0ede84",
+    "version": "3.15.5-dev.ec9b624fd",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/js/components/filter.js

@@ -5,6 +5,7 @@ import {
     css,
     data,
     each,
+    fastdom,
     children as getChildren,
     hasClass,
     includes,
@@ -42,7 +43,7 @@ export default {
             },
 
             watch() {
-                this.$emit();
+                this.updateState();
 
                 if (this.selActive !== false) {
                     const actives = $$(this.selActive, this.$el);
@@ -60,7 +61,7 @@ export default {
 
             watch(list, old) {
                 if (old && !isEqualList(list, old)) {
-                    this.$emit();
+                    this.updateState();
                 }
             },
 
@@ -68,12 +69,6 @@ export default {
         },
     },
 
-    update: {
-        write() {
-            this.setState(this.getState(), false);
-        },
-    },
-
     events: [
         {
             name: 'click',
@@ -113,19 +108,26 @@ export default {
 
             trigger(this.$el, 'beforeFilter', [this, state]);
 
-            for (const el of this.toggles) {
-                toggleClass(el, this.cls, !!matchFilter(el, this.attrItem, state));
-            }
+            this.toggles.forEach((el) =>
+                toggleClass(el, this.cls, !!matchFilter(el, this.attrItem, state))
+            );
 
             await Promise.all(
                 $$(this.target, this.$el).map((target) => {
-                    const filterFn = () => applyState(state, target, getChildren(target));
+                    const filterFn = () => {
+                        applyState(state, target, getChildren(target));
+                        this.$update(this.$el);
+                    };
                     return animate ? this.animate(filterFn, target) : filterFn();
                 })
             );
 
             trigger(this.$el, 'afterFilter', [this]);
         },
+
+        updateState() {
+            fastdom.write(() => this.setState(this.getState(), false));
+        },
     },
 };
 

package/src/js/core/accordion.js

@@ -1,19 +1,25 @@
 import Class from '../mixin/class';
 import Lazyload from '../mixin/lazyload';
-import { default as Togglable, toggleTransition } from '../mixin/togglable';
+import Togglable from '../mixin/togglable';
 import {
     $,
     $$,
     attr,
+    css,
     filter,
     getIndex,
     hasClass,
     includes,
     index,
     isInView,
+    noop,
     scrollIntoView,
+    toFloat,
     toggleClass,
+    Transition,
+    unwrap,
     within,
+    wrapAll,
 } from 'uikit-util';
 
 export default {
@@ -127,28 +133,25 @@ export default {
             }
 
             for (const el of items) {
-                this.toggleElement(el, !hasClass(el, this.clsOpen), async (el, show) => {
+                this.toggleElement(el, !hasClass(el, this.clsOpen), (el, show) => {
                     toggleClass(el, this.clsOpen, show);
                     attr($(this.$props.toggle, el), 'aria-expanded', show);
 
-                    const content = $(this.content, el);
-
                     if (animate === false || !this.animation) {
-                        content.hidden = !show;
-                        hide(content, !show);
+                        hide($(this.content, el), !show);
                         return;
                     }
 
-                    await toggleTransition(this)(content, show);
-
-                    if (show) {
-                        const toggle = $(this.$props.toggle, el);
-                        requestAnimationFrame(() => {
-                            if (!isInView(toggle)) {
-                                scrollIntoView(toggle, { offset: this.offset });
-                            }
-                        });
-                    }
+                    return transition(el, show, this).then(() => {
+                        if (show) {
+                            const toggle = $(this.$props.toggle, el);
+                            requestAnimationFrame(() => {
+                                if (!isInView(toggle)) {
+                                    scrollIntoView(toggle, { offset: this.offset });
+                                }
+                            });
+                        }
+                    }, noop);
                 });
             }
         },
@@ -158,3 +161,35 @@ export default {
 function hide(el, hide) {
     el && (el.hidden = hide);
 }
+
+async function transition(el, show, { content, duration, velocity, transition }) {
+    content = el._wrapper?.firstElementChild || $(content, el);
+
+    if (!el._wrapper) {
+        el._wrapper = wrapAll(content, '<div>');
+    }
+
+    const wrapper = el._wrapper;
+    css(wrapper, 'overflow', 'hidden');
+    const currentHeight = toFloat(css(wrapper, 'height'));
+
+    await Transition.cancel(wrapper);
+    hide(content, false);
+
+    const endHeight =
+        toFloat(css(content, 'height')) +
+        toFloat(css(content, 'marginTop')) +
+        toFloat(css(content, 'marginBottom'));
+    const percent = currentHeight / endHeight;
+    duration = (velocity * endHeight + duration) * (show ? 1 - percent : percent);
+    css(wrapper, 'height', currentHeight);
+
+    await Transition.start(wrapper, { height: show ? endHeight : 0 }, duration, transition);
+
+    unwrap(content);
+    delete el._wrapper;
+
+    if (!show) {
+        hide(content, true);
+    }
+}

package/src/js/core/alert.js

@@ -33,30 +33,28 @@ export default {
 
     methods: {
         async close() {
-            await this.toggleElement(this.$el, false, animate(this));
+            await this.toggleElement(this.$el, false, animate);
             this.$destroy(true);
         },
     },
 };
 
-function animate({ duration, transition, velocity }) {
-    return (el) => {
-        const height = toFloat(css(el, 'height'));
-        css(el, 'height', height);
-        return Transition.start(
-            el,
-            {
-                height: 0,
-                marginTop: 0,
-                marginBottom: 0,
-                paddingTop: 0,
-                paddingBottom: 0,
-                borderTop: 0,
-                borderBottom: 0,
-                opacity: 0,
-            },
-            velocity * height + duration,
-            transition
-        );
-    };
+function animate(el, show, { duration, transition, velocity }) {
+    const height = toFloat(css(el, 'height'));
+    css(el, 'height', height);
+    return Transition.start(
+        el,
+        {
+            height: 0,
+            marginTop: 0,
+            marginBottom: 0,
+            paddingTop: 0,
+            paddingBottom: 0,
+            borderTop: 0,
+            borderBottom: 0,
+            opacity: 0,
+        },
+        velocity * height + duration,
+        transition
+    );
 }

package/src/js/mixin/modal.js

@@ -240,42 +240,41 @@ export default {
                 );
             }
 
-            return this.toggleElement(this.$el, true, animate(this));
+            return this.toggleElement(this.$el, true, animate);
         },
 
         hide() {
-            return this.toggleElement(this.$el, false, animate(this));
+            return this.toggleElement(this.$el, false, animate);
         },
     },
 };
 
-function animate({ transitionElement, _toggle }) {
-    return (el, show) =>
-        new Promise((resolve, reject) =>
-            once(el, 'show hide', () => {
-                el._reject?.();
-                el._reject = reject;
-
-                _toggle(el, show);
-
-                const off = once(
-                    transitionElement,
-                    'transitionstart',
-                    () => {
-                        once(transitionElement, 'transitionend transitioncancel', resolve, {
-                            self: true,
-                        });
-                        clearTimeout(timer);
-                    },
-                    { self: true }
-                );
-
-                const timer = setTimeout(() => {
-                    off();
-                    resolve();
-                }, toMs(css(transitionElement, 'transitionDuration')));
-            })
-        ).then(() => delete el._reject);
+function animate(el, show, { transitionElement, _toggle }) {
+    return new Promise((resolve, reject) =>
+        once(el, 'show hide', () => {
+            el._reject?.();
+            el._reject = reject;
+
+            _toggle(el, show);
+
+            const off = once(
+                transitionElement,
+                'transitionstart',
+                () => {
+                    once(transitionElement, 'transitionend transitioncancel', resolve, {
+                        self: true,
+                    });
+                    clearTimeout(timer);
+                },
+                { self: true }
+            );
+
+            const timer = setTimeout(() => {
+                off();
+                resolve();
+            }, toMs(css(transitionElement, 'transitionDuration')));
+        })
+    ).then(() => delete el._reject);
 }
 
 function toMs(time) {

package/src/js/mixin/togglable.js

@@ -67,11 +67,11 @@ export default {
                             isFunction(animate)
                                 ? animate
                                 : animate === false || !this.hasAnimation
-                                ? toggleInstant(this)
+                                ? toggleInstant
                                 : this.hasTransition
-                                ? toggleTransition(this)
-                                : toggleAnimation(this)
-                        )(el, show);
+                                ? toggleTransition
+                                : toggleAnimation
+                        )(el, show, this);
 
                         const cls = show ? this.clsEnter : this.clsLeave;
 
@@ -131,16 +131,18 @@ export default {
     },
 };
 
-function toggleInstant({ _toggle }) {
-    return (el, show) => {
-        Animation.cancel(el);
-        Transition.cancel(el);
-        return _toggle(el, show);
-    };
+function toggleInstant(el, show, { _toggle }) {
+    Animation.cancel(el);
+    Transition.cancel(el);
+    return _toggle(el, show);
 }
 
-export function toggleTransition(cmp) {
-    const [mode = 'reveal', startProp = 'top'] = cmp.animation[0]?.split('-') || [];
+export async function toggleTransition(
+    el,
+    show,
+    { animation, duration, velocity, transition, _toggle }
+) {
+    const [mode = 'reveal', startProp = 'top'] = animation[0]?.split('-') || [];
 
     const dirs = [
         ['left', 'right'],
@@ -153,111 +155,105 @@ export function toggleTransition(cmp) {
     const marginProp = `margin-${dir[0]}`;
     const marginStartProp = `margin-${startProp}`;
 
-    return async (el, show) => {
-        let { duration, velocity, transition, _toggle } = cmp;
-
-        let currentDim = dimensions(el)[dimProp];
-
-        const inProgress = Transition.inProgress(el);
-        await Transition.cancel(el);
-
-        if (show) {
-            _toggle(el, true);
-        }
-
-        const prevProps = Object.fromEntries(
-            [
-                'padding',
-                'border',
-                'width',
-                'height',
-                'minWidth',
-                'minHeight',
-                'overflowY',
-                'overflowX',
-                marginProp,
-                marginStartProp,
-            ].map((key) => [key, el.style[key]])
-        );
-
-        const dim = dimensions(el);
-        const currentMargin = toFloat(css(el, marginProp));
-        const marginStart = toFloat(css(el, marginStartProp));
-        const endDim = dim[dimProp] + marginStart;
-
-        if (!inProgress && !show) {
-            currentDim += marginStart;
-        }
-
-        const [wrapper] = wrapInner(el, '<div>');
-        css(wrapper, {
-            boxSizing: 'border-box',
-            height: dim.height,
-            width: dim.width,
-            ...css(el, [
-                'overflow',
-                'padding',
-                'borderTop',
-                'borderRight',
-                'borderBottom',
-                'borderLeft',
-                'borderImage',
-                marginStartProp,
-            ]),
-        });
-
-        css(el, {
-            padding: 0,
-            border: 0,
-            minWidth: 0,
-            minHeight: 0,
-            [marginStartProp]: 0,
-            width: dim.width,
-            height: dim.height,
-            overflow: 'hidden',
-            [dimProp]: currentDim,
-        });
-
-        const percent = currentDim / endDim;
-        duration = (velocity * endDim + duration) * (show ? 1 - percent : percent);
-        const endProps = { [dimProp]: show ? endDim : 0 };
-
-        if (end) {
-            css(el, marginProp, endDim - currentDim + currentMargin);
-            endProps[marginProp] = show ? currentMargin : endDim + currentMargin;
+    let currentDim = dimensions(el)[dimProp];
+
+    const inProgress = Transition.inProgress(el);
+    await Transition.cancel(el);
+
+    if (show) {
+        _toggle(el, true);
+    }
+
+    const prevProps = Object.fromEntries(
+        [
+            'padding',
+            'border',
+            'width',
+            'height',
+            'minWidth',
+            'minHeight',
+            'overflowY',
+            'overflowX',
+            marginProp,
+            marginStartProp,
+        ].map((key) => [key, el.style[key]])
+    );
+
+    const dim = dimensions(el);
+    const currentMargin = toFloat(css(el, marginProp));
+    const marginStart = toFloat(css(el, marginStartProp));
+    const endDim = dim[dimProp] + marginStart;
+
+    if (!inProgress && !show) {
+        currentDim += marginStart;
+    }
+
+    const [wrapper] = wrapInner(el, '<div>');
+    css(wrapper, {
+        boxSizing: 'border-box',
+        height: dim.height,
+        width: dim.width,
+        ...css(el, [
+            'overflow',
+            'padding',
+            'borderTop',
+            'borderRight',
+            'borderBottom',
+            'borderLeft',
+            'borderImage',
+            marginStartProp,
+        ]),
+    });
+
+    css(el, {
+        padding: 0,
+        border: 0,
+        minWidth: 0,
+        minHeight: 0,
+        [marginStartProp]: 0,
+        width: dim.width,
+        height: dim.height,
+        overflow: 'hidden',
+        [dimProp]: currentDim,
+    });
+
+    const percent = currentDim / endDim;
+    duration = (velocity * endDim + duration) * (show ? 1 - percent : percent);
+    const endProps = { [dimProp]: show ? endDim : 0 };
+
+    if (end) {
+        css(el, marginProp, endDim - currentDim + currentMargin);
+        endProps[marginProp] = show ? currentMargin : endDim + currentMargin;
+    }
+
+    if (!end ^ (mode === 'reveal')) {
+        css(wrapper, marginProp, -endDim + currentDim);
+        Transition.start(wrapper, { [marginProp]: show ? 0 : -endDim }, duration, transition);
+    }
+
+    try {
+        await Transition.start(el, endProps, duration, transition);
+    } finally {
+        css(el, prevProps);
+        unwrap(wrapper.firstChild);
+
+        if (!show) {
+            _toggle(el, false);
         }
-
-        if (!end ^ (mode === 'reveal')) {
-            css(wrapper, marginProp, -endDim + currentDim);
-            Transition.start(wrapper, { [marginProp]: show ? 0 : -endDim }, duration, transition);
-        }
-
-        try {
-            await Transition.start(el, endProps, duration, transition);
-        } finally {
-            css(el, prevProps);
-            unwrap(wrapper.firstChild);
-
-            if (!show) {
-                _toggle(el, false);
-            }
-        }
-    };
+    }
 }
 
-function toggleAnimation(cmp) {
-    return (el, show) => {
-        Animation.cancel(el);
+function toggleAnimation(el, show, cmp) {
+    Animation.cancel(el);
 
-        const { animation, duration, _toggle } = cmp;
+    const { animation, duration, _toggle } = cmp;
 
-        if (show) {
-            _toggle(el, true);
-            return Animation.in(el, animation[0], duration, cmp.origin);
-        }
+    if (show) {
+        _toggle(el, true);
+        return Animation.in(el, animation[0], duration, cmp.origin);
+    }
 
-        return Animation.out(el, animation[1] || animation[0], duration, cmp.origin).then(() =>
-            _toggle(el, false)
-        );
-    };
+    return Animation.out(el, animation[1] || animation[0], duration, cmp.origin).then(() =>
+        _toggle(el, false)
+    );
 }

package/tests/accordion.html

@@ -191,7 +191,7 @@
                         <td><code>animation</code></td>
                         <td>Boolean</td>
                         <td>true</td>
-                        <td>Space-separated names of animations. Comma-separated for animation out.</td>
+                        <td>Reveal item directly or with a transition. </td>
                     </tr>
                     <tr>
                         <td><code>duration</code></td>