uikit 3.14.4-dev.4bd89c5ca → 3.14.4-dev.6923b7e2c

package/src/js/core/navbar.js

@@ -19,6 +19,7 @@ import {
     offset,
     once,
     parent,
+    parents,
     query,
     remove,
     selFocusable,
@@ -36,7 +37,7 @@ export default {
         align: String,
         offset: Number,
         boundary: Boolean,
-        boundaryAlign: Boolean,
+        target: Boolean,
         clsDrop: String,
         delayShow: Number,
         delayHide: Number,
@@ -53,9 +54,12 @@ export default {
         offset: undefined,
         delayShow: undefined,
         delayHide: undefined,
-        boundaryAlign: undefined,
-        flip: 'x',
+        flip: false,
+        shift: true,
         boundary: true,
+        target: false,
+        targetX: false,
+        targetY: false,
         dropbar: false,
         dropbarAnchor: false,
         duration: 200,
@@ -90,7 +94,7 @@ export default {
             },
 
             watch(dropbar) {
-                addClass(dropbar, 'uk-navbar-dropbar');
+                addClass(dropbar, 'uk-dropbar', 'uk-dropbar-top', 'uk-navbar-dropbar');
             },
 
             immediate: true,
@@ -106,7 +110,7 @@ export default {
 
                 if (this.dropContainer !== $el) {
                     for (const el of $$(`.${clsDrop}`, this.dropContainer)) {
-                        const target = this.getDropdown(el)?.target;
+                        const target = this.getDropdown(el)?.targetEl;
                         if (!includes(dropdowns, el) && target && within(target, this.$el)) {
                             dropdowns.push(el);
                         }
@@ -168,8 +172,8 @@ export default {
                 if (
                     active &&
                     includes(active.mode, 'hover') &&
-                    active.target &&
-                    !within(active.target, current) &&
+                    active.targetEl &&
+                    !within(active.targetEl, current) &&
                     !active.isDelaying
                 ) {
                     active.hide(false);
@@ -191,7 +195,7 @@ export default {
                 if (keyCode === keyMap.DOWN && hasAttr(current, 'aria-expanded')) {
                     e.preventDefault();
 
-                    if (!active || active.target !== current) {
+                    if (!active || active.targetEl !== current) {
                         current.click();
                         once(this.dropContainer, 'show', ({ target }) =>
                             focusFirstFocusableElement(target)
@@ -242,7 +246,7 @@ export default {
                 }
 
                 if (keyCode === keyMap.ESC) {
-                    active?.target?.focus();
+                    active?.targetEl?.focus();
                 }
 
                 handleNavItemNavigation(e, this.toggles, active);
@@ -313,39 +317,19 @@ export default {
                     return;
                 }
 
-                this._observer = observeResize(target, () =>
+                this._observer = observeResize(target, () => {
+                    const targetOffsets = parents(target, `.${this.clsDrop}`)
+                        .concat(target)
+                        .map((el) => offset(el));
+                    const minTop = Math.min(...targetOffsets.map(({ top }) => top));
+                    const maxBottom = Math.max(...targetOffsets.map(({ bottom }) => bottom));
+                    const dropbarOffset = offset(this.dropbar);
+                    css(this.dropbar, 'top', this.dropbar.offsetTop - (dropbarOffset.top - minTop));
                     this.transitionTo(
-                        offset(target).bottom -
-                            offset(this.dropbar).top +
-                            toFloat(css(target, 'marginBottom')),
+                        maxBottom - minTop + toFloat(css(target, 'marginBottom')),
                         target
-                    )
-                );
-            },
-        },
-
-        {
-            name: 'beforeposition',
-
-            el() {
-                return this.dropContainer;
-            },
-
-            filter() {
-                return this.dropbar;
-            },
-
-            handler(e, element, target, options) {
-                if (!this.isDropbarDrop(element)) {
-                    return;
-                }
-
-                const dropbarOffset = offset(this.dropbar);
-
-                css(element, 'maxWidth', dropbarOffset.width - options.viewportOffset * 2);
-
-                options.offset[1] = dropbarOffset.top - offset(target).bottom;
-                options.viewportOffset += dropbarOffset.left;
+                    );
+                });
             },
         },
 
@@ -366,7 +350,7 @@ export default {
                 if (
                     matches(this.dropbar, ':hover') &&
                     active?.$el === e.target &&
-                    !this.toggles.some((el) => active.target !== el && matches(el, ':focus'))
+                    !this.toggles.some((el) => active.targetEl !== el && matches(el, ':focus'))
                 ) {
                     e.preventDefault();
                 }
@@ -402,7 +386,7 @@ export default {
 
     methods: {
         getActive() {
-            return active && within(active.target, this.$el) && active;
+            return active && within(active.targetEl, this.$el) && active;
         },
 
         transitionTo(newHeight, el) {
@@ -435,15 +419,14 @@ export default {
         },
 
         isDropbarDrop(el) {
-            const drop = this.getDropdown(el);
-            return drop && hasClass(el, this.clsDrop) && drop.align !== 'stretch';
+            return this.getDropdown(el) && hasClass(el, this.clsDrop);
         },
     },
 };
 
 function handleNavItemNavigation(e, toggles, active) {
     const { current, keyCode } = e;
-    const target = active?.target || current;
+    const target = active?.targetEl || current;
     const i = toggles.indexOf(target);
 
     // Left

package/src/js/core/scroll.js

@@ -1,4 +1,4 @@
-import { $, scrollIntoView, trigger } from 'uikit-util';
+import { $, off, on, scrollIntoView, trigger, within } from 'uikit-util';
 
 export default {
     props: {
@@ -9,6 +9,14 @@ export default {
         offset: 0,
     },
 
+    connected() {
+        registerClick(this);
+    },
+
+    disconnected() {
+        unregisterClick(this);
+    },
+
     methods: {
         async scrollTo(el) {
             el = (el && $(el)) || document.body;
@@ -19,18 +27,37 @@ export default {
             }
         },
     },
+};
 
-    events: {
-        click(e) {
-            if (e.defaultPrevented) {
-                return;
-            }
+const components = new Set();
+function registerClick(cmp) {
+    if (!components.size) {
+        on(document, 'click', clickHandler);
+    }
+
+    components.add(cmp);
+}
 
+function unregisterClick(cmp) {
+    components.delete(cmp);
+
+    if (!components.length) {
+        off(document, 'click', clickHandler);
+    }
+}
+
+function clickHandler(e) {
+    if (e.defaultPrevented) {
+        return;
+    }
+
+    for (const component of components) {
+        if (within(e.target, component.$el)) {
             e.preventDefault();
-            this.scrollTo(getTargetElement(this.$el));
-        },
-    },
-};
+            component.scrollTo(getTargetElement(component.$el));
+        }
+    }
+}
 
 export function getTargetElement(el) {
     return document.getElementById(decodeURIComponent(el.hash).substring(1));

package/src/js/mixin/media.js

@@ -1,6 +1,6 @@
 import {
     createEvent,
-    getCssVar,
+    css,
     isNumeric,
     isString,
     on,
@@ -19,7 +19,7 @@ export default {
     },
 
     connected() {
-        const media = toMedia(this.media);
+        const media = toMedia(this.media, this.$el);
         this.matchMedia = true;
         if (media) {
             this.mediaObj = window.matchMedia(media);
@@ -40,11 +40,10 @@ export default {
     },
 };
 
-function toMedia(value) {
+function toMedia(value, element) {
     if (isString(value)) {
         if (startsWith(value, '@')) {
-            const name = `breakpoint-${value.substr(1)}`;
-            value = toFloat(getCssVar(name));
+            value = toFloat(css(element, `--uk-breakpoint-${value.substr(1)}`));
         } else if (isNaN(value)) {
             return value;
         }

package/src/js/mixin/position.js

@@ -2,13 +2,11 @@ import {
     css,
     dimensions,
     flipPosition,
-    getCssVar,
     includes,
     isRtl,
     positionAt,
     scrollParents,
     toPx,
-    trigger,
 } from 'uikit-util';
 
 export default {
@@ -16,12 +14,16 @@ export default {
         pos: String,
         offset: null,
         flip: Boolean,
+        shift: Boolean,
+        inset: Boolean,
     },
 
     data: {
         pos: `bottom-${isRtl ? 'right' : 'left'}`,
-        flip: true,
         offset: false,
+        flip: true,
+        shift: true,
+        inset: false,
     },
 
     connected() {
@@ -35,7 +37,7 @@ export default {
             let offset = [this.getPositionOffset(element), this.getShiftOffset(element)];
 
             const attach = {
-                element: [flipPosition(this.dir), this.align],
+                element: [this.inset ? this.dir : flipPosition(this.dir), this.align],
                 target: [this.dir, this.align],
             };
 
@@ -53,21 +55,14 @@ export default {
             const elDim = dimensions(element);
             css(element, { top: -elDim.height, left: -elDim.width });
 
-            const args = [
-                element,
-                target,
-                {
-                    attach,
-                    offset,
-                    boundary,
-                    flip: this.flip,
-                    viewportOffset: this.getViewportOffset(element),
-                },
-            ];
-
-            trigger(element, 'beforeposition', args);
-
-            positionAt(...args);
+            positionAt(element, target, {
+                attach,
+                offset,
+                boundary,
+                flip: this.flip,
+                shift: this.shift,
+                viewportOffset: this.getViewportOffset(element),
+            });
 
             // Restore scroll position
             scrollElement.scrollTop = scrollTop;
@@ -77,25 +72,27 @@ export default {
         getPositionOffset(element) {
             return (
                 toPx(
-                    this.offset === false ? getCssVar('position-offset', element) : this.offset,
+                    this.offset === false ? css(element, '--uk-position-offset') : this.offset,
                     this.axis === 'x' ? 'width' : 'height',
                     element
-                ) * (includes(['left', 'top'], this.dir) ? -1 : 1)
+                ) *
+                (includes(['left', 'top'], this.dir) ? -1 : 1) *
+                (this.inset ? -1 : 1)
             );
         },
 
         getShiftOffset(element) {
-            return includes(['center', 'justify', 'stretch'], this.align)
+            return this.align === 'center'
                 ? 0
                 : toPx(
-                      getCssVar('position-shift-offset', element),
+                      css(element, '--uk-position-shift-offset'),
                       this.axis === 'y' ? 'width' : 'height',
                       element
                   ) * (includes(['left', 'top'], this.align) ? 1 : -1);
         },
 
         getViewportOffset(element) {
-            return toPx(getCssVar('position-viewport-offset', element));
+            return toPx(css(element, '--uk-position-viewport-offset'));
         },
     },
 };

package/src/js/mixin/togglable.js

@@ -3,7 +3,7 @@ import {
     addClass,
     Animation,
     css,
-    fastdom,
+    dimensions,
     hasClass,
     includes,
     isBoolean,
@@ -11,13 +11,14 @@ import {
     isVisible,
     noop,
     removeClass,
-    scrollParents,
     startsWith,
     toFloat,
     toggleClass,
     toNodes,
     Transition,
     trigger,
+    unwrap,
+    wrapInner,
 } from 'uikit-util';
 
 export default {
@@ -39,26 +40,6 @@ export default {
         transition: 'ease',
         clsEnter: 'uk-togglabe-enter',
         clsLeave: 'uk-togglabe-leave',
-
-        initProps: {
-            overflow: '',
-            maxHeight: '',
-            paddingTop: '',
-            paddingBottom: '',
-            marginTop: '',
-            marginBottom: '',
-            boxShadow: '',
-        },
-
-        hideProps: {
-            overflow: 'hidden',
-            maxHeight: 0,
-            paddingTop: 0,
-            paddingBottom: 0,
-            marginTop: 0,
-            marginBottom: 0,
-            boxShadow: 'none',
-        },
     },
 
     computed: {
@@ -67,7 +48,7 @@ export default {
         },
 
         hasTransition({ animation }) {
-            return startsWith(animation[0], 'slide');
+            return ['slide', 'reveal'].some((transition) => startsWith(animation[0], transition));
         },
     },
 
@@ -160,122 +141,97 @@ function toggleInstant({ _toggle }) {
     };
 }
 
-function toggleTransition(cmp) {
-    switch (cmp.animation[0]) {
-        case 'slide-left':
-            return slideHorizontal(cmp);
-        case 'slide-right':
-            return slideHorizontal(cmp, true);
-    }
-    return slide(cmp);
-}
+export function toggleTransition(cmp) {
+    const [mode = 'reveal', startProp = 'top'] = cmp.animation[0]?.split('-') || [];
 
-export function slide({
-    isToggled,
-    duration,
-    velocity,
-    initProps,
-    hideProps,
-    transition,
-    _toggle,
-}) {
-    return (el, show) => {
-        const inProgress = Transition.inProgress(el);
-        const inner =
-            !inProgress && el.hasChildNodes()
-                ? toFloat(css(el.firstElementChild, 'marginTop')) +
-                  toFloat(css(el.lastElementChild, 'marginBottom'))
-                : 0;
-        const currentHeight = isVisible(el) ? toFloat(css(el, 'height')) + inner : 0;
+    const dirs = [
+        ['left', 'right'],
+        ['top', 'bottom'],
+    ];
+    const dir = dirs[includes(dirs[0], startProp) ? 0 : 1];
+    const end = dir[1] === startProp;
+    const props = ['width', 'height'];
+    const dimProp = props[dirs.indexOf(dir)];
+    const marginProp = `margin-${dir[0]}`;
+    const marginStartProp = `margin-${startProp}`;
 
-        const props = inProgress ? css(el, Object.keys(initProps)) : show ? hideProps : initProps;
+    return async (el, show) => {
+        let { duration, velocity, transition, _toggle } = cmp;
 
-        Transition.cancel(el);
+        let currentDim = dimensions(el)[dimProp];
+
+        const inProgress = Transition.inProgress(el);
+        await Transition.cancel(el);
 
-        if (!isToggled(el)) {
+        if (show) {
             _toggle(el, true);
         }
 
-        css(el, 'maxHeight', '');
-
-        // Update child components first
-        fastdom.flush();
-
-        const endHeight = toFloat(css(el, 'height')) + inner;
-        duration = velocity * endHeight + duration;
-
-        css(el, { ...props, maxHeight: currentHeight });
-
-        return (
-            show
-                ? Transition.start(
-                      el,
-                      { ...initProps, overflow: 'hidden', maxHeight: endHeight },
-                      duration * (1 - currentHeight / endHeight),
-                      transition
-                  )
-                : Transition.start(
-                      el,
-                      hideProps,
-                      duration * (currentHeight / endHeight),
-                      transition
-                  ).then(() => _toggle(el, false))
-        ).then(() => css(el, initProps));
-    };
-}
-
-function slideHorizontal({ isToggled, duration, velocity, transition, _toggle }, right) {
-    return (el, show) => {
-        const visible = isVisible(el);
-        const marginLeft = toFloat(css(el, 'marginLeft'));
-
-        Transition.cancel(el);
+        const prevProps = Object.fromEntries(
+            ['padding', 'border', 'width', 'height', 'overflow', marginProp, marginStartProp].map(
+                (key) => [key, el.style[key]]
+            )
+        );
 
-        const [scrollElement] = scrollParents(el.offsetParent);
-        css(scrollElement, 'overflowX', 'hidden');
+        const dim = dimensions(el);
+        const currentMargin = toFloat(css(el, marginProp));
+        const marginStart = toFloat(css(el, marginStartProp));
+        const endDim = dim[dimProp] + marginStart;
 
-        if (!isToggled(el)) {
-            _toggle(el, true);
+        if (!inProgress && !show) {
+            currentDim += marginStart;
         }
 
-        const width = toFloat(css(el, 'width'));
-        duration = velocity * width + duration;
-
-        const percent = visible ? ((width + marginLeft * (right ? -1 : 1)) / width) * 100 : 0;
+        const [wrapper] = wrapInner(el, '<div>');
+        css(wrapper, {
+            boxSizing: 'border-box',
+            height: dim.height,
+            width: dim.width,
+            ...css(el, [
+                'padding',
+                'borderTop',
+                'borderRight',
+                'borderBottom',
+                'borderLeft',
+                'borderImage',
+                marginStartProp,
+            ]),
+        });
 
         css(el, {
-            clipPath: right
-                ? `polygon(0 0,${percent}% 0,${percent}% 100%,0 100%)`
-                : `polygon(${100 - percent}% 0,100% 0,100% 100%,${100 - percent}% 100%)`,
-            marginLeft: (((100 - percent) * (right ? 1 : -1)) / 100) * width,
+            padding: 0,
+            border: 0,
+            [marginStartProp]: 0,
+            width: dim.width,
+            height: dim.height,
+            overflow: 'hidden',
+            [dimProp]: currentDim,
         });
 
-        return (
-            show
-                ? Transition.start(
-                      el,
-                      {
-                          clipPath: `polygon(0 0,100% 0,100% 100%,0 100%)`,
-                          marginLeft: 0,
-                      },
-                      duration * (1 - percent / 100),
-                      transition
-                  )
-                : Transition.start(
-                      el,
-                      {
-                          clipPath: right
-                              ? `polygon(0 0,0 0,0 100%,0 100%)`
-                              : `polygon(100% 0,100% 0,100% 100%,100% 100%)`,
-                          marginLeft: (right ? 1 : -1) * width,
-                      },
-                      duration * (percent / 100),
-                      transition
-                  ).then(() => _toggle(el, false))
-        ).then(() => {
-            css(scrollElement, 'overflowX', '');
-            css(el, { clipPath: '', marginLeft: '' });
-        });
+        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);
+            }
+        }
     };
 }
 

package/src/js/util/animation.js

@@ -50,13 +50,14 @@ export function transition(element, props, duration = 400, timing = 'linear') {
 export const Transition = {
     start: transition,
 
-    stop(element) {
+    async stop(element) {
         trigger(element, 'transitionend');
-        return Promise.resolve();
+        await Promise.resolve();
     },
 
-    cancel(element) {
+    async cancel(element) {
         trigger(element, 'transitioncanceled');
+        await Promise.resolve();
     },
 
     inProgress(element) {

package/src/js/util/filter.js

@@ -51,12 +51,8 @@ export function matches(element, selector) {
 }
 
 export function closest(element, selector) {
-    if (startsWith(selector, '>')) {
-        selector = selector.slice(1);
-    }
-
     return isElement(element)
-        ? element.closest(selector)
+        ? element.closest(startsWith(selector, '>') ? selector.slice(1) : selector)
         : toNodes(element)
               .map((element) => closest(element, selector))
               .filter(Boolean);
@@ -64,8 +60,8 @@ export function closest(element, selector) {
 
 export function within(element, selector) {
     return isString(selector)
-        ? matches(element, selector) || !!closest(element, selector)
-        : element === selector || toNode(selector).contains(toNode(element));
+        ? !!closest(element, selector)
+        : toNode(selector).contains(toNode(element));
 }
 
 export function parents(element, selector) {