uikit 3.14.2 → 3.14.3

package/dist/js/uikit-core.js

@@ -1,4 +1,4 @@
-/*! UIkit 3.14.2 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
+/*! UIkit 3.14.3 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
 
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -868,7 +868,6 @@
     }
 
     function transition(element, props, duration, timing) {if (duration === void 0) {duration = 400;}if (timing === void 0) {timing = 'linear';}
-      duration = Math.round(duration);
       return Promise.all(
       toNodes(element).map(
       (element) =>
@@ -1183,14 +1182,15 @@
     }
 
     function empty(element) {
-      return replaceChildren(element, '');
+      element = $(element);
+      element.innerHTML = '';
+      return element;
     }
 
     function html(parent, html) {
-      return isUndefined(html) ? $(parent).innerHTML : replaceChildren(parent, html);
+      return isUndefined(html) ? $(parent).innerHTML : append(empty(parent), html);
     }
 
-    const replaceChildren = applyFn('replaceChildren');
     const prepend = applyFn('prepend');
     const append = applyFn('append');
     const before = applyFn('before');
@@ -1887,7 +1887,7 @@
       return clamp((scrollTop - start) / (end - start));
     }
 
-    function scrollParents(element, overflowRe, scrollable) {if (overflowRe === void 0) {overflowRe = /auto|scroll|hidden|clip/;}if (scrollable === void 0) {scrollable = false;}
+    function scrollParents(element, overflowRe, scrollable) {if (overflowRe === void 0) {overflowRe = /auto|scroll|hidden/;}if (scrollable === void 0) {scrollable = false;}
       const scrollEl = scrollingElement(element);
 
       let ancestors = parents(element).reverse();
@@ -2178,7 +2178,6 @@
         isTag: isTag,
         empty: empty,
         html: html,
-        replaceChildren: replaceChildren,
         prepend: prepend,
         append: append,
         before: before,
@@ -2950,7 +2949,7 @@
     UIkit.data = '__uikit__';
     UIkit.prefix = 'uk-';
     UIkit.options = {};
-    UIkit.version = '3.14.2';
+    UIkit.version = '3.14.3';
 
     globalAPI(UIkit);
     hooksAPI(UIkit);
@@ -3059,7 +3058,7 @@
 
         initProps: {
           overflow: '',
-          maxHeight: '',
+          height: '',
           paddingTop: '',
           paddingBottom: '',
           marginTop: '',
@@ -3069,7 +3068,7 @@
 
         hideProps: {
           overflow: 'hidden',
-          maxHeight: 0,
+          height: 0,
           paddingTop: 0,
           paddingBottom: 0,
           marginTop: 0,
@@ -3084,7 +3083,7 @@
         },
 
         hasTransition(_ref2) {let { animation } = _ref2;
-          return startsWith(animation[0], 'slide');
+          return this.hasAnimation && animation[0] === true;
         } },
 
 
@@ -3108,9 +3107,9 @@
             isFunction(animate) ?
             animate :
             animate === false || !this.hasAnimation ?
-            toggleInstant(this) :
+            this._toggle :
             this.hasTransition ?
-            toggleTransition(this) :
+            toggleHeight(this) :
             toggleAnimation(this))(
             el, show);
 
@@ -3174,25 +3173,7 @@
 
 
 
-    function toggleInstant(_ref3) {let { _toggle } = _ref3;
-      return (el, show) => {
-        Animation.cancel(el);
-        Transition.cancel(el);
-        return _toggle(el, show);
-      };
-    }
-
-    function toggleTransition(cmp) {
-      switch (cmp.animation[0]) {
-        case 'slide-left':
-          return slideHorizontal(cmp);
-        case 'slide-right':
-          return slideHorizontal(cmp, true);}
-
-      return slide(cmp);
-    }
-
-    function slide(_ref4)
+    function toggleHeight(_ref3)
 
 
 
@@ -3200,17 +3181,14 @@
 
 
 
-    {let { isToggled, duration, velocity, initProps, hideProps, transition, _toggle } = _ref4;
+    {let { isToggled, duration, velocity, initProps, hideProps, transition, _toggle } = _ref3;
       return (el, show) => {
         const inProgress = Transition.inProgress(el);
-        const inner =
-        !inProgress && el.hasChildNodes() ?
+        const inner = el.hasChildNodes() ?
         toFloat(css(el.firstElementChild, 'marginTop')) +
         toFloat(css(el.lastElementChild, 'marginBottom')) :
         0;
-        const currentHeight = isVisible(el) ? toFloat(css(el, 'height')) + inner : 0;
-
-        const props = inProgress ? css(el, Object.keys(initProps)) : show ? hideProps : initProps;
+        const currentHeight = isVisible(el) ? height(el) + (inProgress ? 0 : inner) : 0;
 
         Transition.cancel(el);
 
@@ -3218,97 +3196,34 @@
           _toggle(el, true);
         }
 
-        css(el, 'maxHeight', '');
+        height(el, '');
 
         // Update child components first
         fastdom.flush();
 
-        const endHeight = toFloat(css(el, 'height')) + inner;
-        duration = velocity * endHeight + duration;
+        const endHeight = height(el) + (inProgress ? 0 : inner);
+        duration = velocity * el.offsetHeight + duration;
 
-        css(el, { ...props, maxHeight: currentHeight });
+        height(el, currentHeight);
 
         return (
         show ?
         Transition.start(
         el,
-        { ...initProps, overflow: 'hidden', maxHeight: endHeight },
-        duration * (1 - currentHeight / endHeight),
+        { ...initProps, overflow: 'hidden', height: endHeight },
+        Math.round(duration * (1 - currentHeight / endHeight)),
         transition) :
 
         Transition.start(
         el,
         hideProps,
-        duration * (currentHeight / endHeight),
+        Math.round(duration * (currentHeight / endHeight)),
         transition).
         then(() => _toggle(el, false))).
         then(() => css(el, initProps));
       };
     }
 
-    function slideHorizontal(_ref5, right) {let { isToggled, duration, velocity, transition, _toggle } = _ref5;
-      return (el, show) => {
-        const visible = isVisible(el);
-        const marginLeft = toFloat(css(el, 'marginLeft'));
-
-        Transition.cancel(el);
-
-        const [scrollElement] = scrollParents(el);
-        css(scrollElement, 'overflowX', 'hidden');
-
-        if (!isToggled(el)) {
-          _toggle(el, true);
-        }
-
-        const width = toFloat(css(el, 'width'));
-        duration = velocity * width + duration;
-
-        const percent = visible ? (width + marginLeft * (right ? -1 : 1)) / width * 100 : 0;
-        const offsetEl = offset(el);
-        const useClipPath = right ?
-        offsetEl.right < scrollElement.clientWidth :
-        Math.round(offsetEl.left) > 0;
-
-        css(el, {
-          clipPath: useClipPath ?
-          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 });
-
-
-        return (
-        show ?
-        Transition.start(
-        el,
-        {
-          clipPath: useClipPath ? "polygon(0 0,100% 0,100% 100%,0 100%)" : '',
-          marginLeft: 0 },
-
-        duration * (1 - percent / 100),
-        transition) :
-
-        Transition.start(
-        el,
-        {
-          clipPath: useClipPath ?
-          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: '' });
-        });
-      };
-    }
-
     function toggleAnimation(cmp) {
       return (el, show) => {
         Animation.cancel(el);
@@ -3342,7 +3257,7 @@
       data: {
         targets: '> *',
         active: false,
-        animation: ['slide'],
+        animation: [true],
         collapsible: true,
         multiple: false,
         clsOpen: 'uk-open',
@@ -3452,7 +3367,7 @@
               }
 
               hide(content, false);
-              await slide(this)(el._wrapper, show);
+              await toggleHeight(this)(el._wrapper, show);
               hide(content, !show);
 
               delete el._wrapper;
@@ -3486,7 +3401,7 @@
 
 
       data: {
-        animation: ['slide'],
+        animation: [true],
         selClose: '.uk-alert-close',
         duration: 150,
         hideProps: { opacity: 0, ...Togglable.data.hideProps } },
@@ -3672,17 +3587,23 @@
 
       connected() {
         this.pos = this.$props.pos.split('-').concat('center').slice(0, 2);
-        [this.dir, this.align] = this.pos;
-        this.axis = includes(['top', 'bottom'], this.dir) ? 'y' : 'x';
+        this.axis = includes(['top', 'bottom'], this.pos[0]) ? 'y' : 'x';
       },
 
       methods: {
         positionAt(element, target, boundary) {
-          let offset = [this.getPositionOffset(element), this.getShiftOffset(element)];
+          const [dir, align] = this.pos;
+
+          let offset = toPx(
+          this.offset === false ? getCssVar('position-offset', element) : this.offset,
+          this.axis === 'x' ? 'width' : 'height',
+          element);
+
+          offset = [includes(['left', 'top'], dir) ? -offset : +offset, 0];
 
           const attach = {
-            element: [flipPosition(this.dir), this.align],
-            target: [this.dir, this.align] };
+            element: [flipPosition(dir), align],
+            target: [dir, align] };
 
 
           if (this.axis === 'y') {
@@ -3692,41 +3613,13 @@
             offset = offset.reverse();
           }
 
-          // Ensure none positioned element does not generate scrollbars
-          const elDim = dimensions(element);
-          css(element, { top: -elDim.height, left: -elDim.width });
-
           positionAt(element, target, {
             attach,
             offset,
             boundary,
             flip: this.flip,
-            viewportOffset: this.getViewportOffset(element) });
-
-        },
-
-        getPositionOffset(element) {
-          return (
-            toPx(
-            this.offset === false ? getCssVar('position-offset', element) : this.offset,
-            this.axis === 'x' ? 'width' : 'height',
-            element) * (
-            includes(['left', 'top'], this.dir) ? -1 : 1));
-
-        },
-
-        getShiftOffset(element) {
-          return includes(['center', 'justify', 'stretch'], this.align) ?
-          0 :
-          toPx(
-          getCssVar('position-shift-offset', element),
-          this.axis === 'y' ? 'width' : 'height',
-          element) * (
-          includes(['left', 'top'], this.align) ? 1 : -1);
-        },
+            viewportOffset: toPx(getCssVar('position-viewport-offset', element)) });
 
-        getViewportOffset(element) {
-          return toPx(getCssVar('position-viewport-offset', element));
         } } };
 
     let active$1;
@@ -3744,8 +3637,7 @@
         delayShow: Number,
         delayHide: Number,
         display: String,
-        clsDrop: String,
-        animateOut: Boolean },
+        clsDrop: String },
 
 
       data: {
@@ -3759,8 +3651,7 @@
         clsDrop: false,
         animation: ['uk-animation-fade'],
         cls: 'uk-open',
-        container: false,
-        animateOut: false },
+        container: false },
 
 
       created() {
@@ -3948,7 +3839,7 @@
             }
           }),
 
-          ...(this.display === 'static' && this.align !== 'stretch' ?
+          ...(this.display === 'static' ?
           [] :
           (() => {
             const handler = () => this.$emit();
@@ -4009,7 +3900,7 @@
       methods: {
         show(target, delay) {if (target === void 0) {target = this.target;}if (delay === void 0) {delay = true;}
           if (this.isToggled() && target && this.target && target !== this.target) {
-            this.hide(false, false);
+            this.hide(false);
           }
 
           this.target = target;
@@ -4029,7 +3920,7 @@
             let prev;
             while (active$1 && prev !== active$1 && !within(this.$el, active$1.$el)) {
               prev = active$1;
-              active$1.hide(false, false);
+              active$1.hide(false);
             }
           }
 
@@ -4043,8 +3934,8 @@
 
         },
 
-        hide(delay, animate) {if (delay === void 0) {delay = true;}if (animate === void 0) {animate = true;}
-          const hide = () => this.toggleElement(this.$el, false, this.animateOut && animate);
+        hide(delay) {if (delay === void 0) {delay = true;}
+          const hide = () => this.toggleElement(this.$el, false, false);
 
           this.clearTimers();
 
@@ -4076,51 +3967,28 @@
         position() {
           removeClass(this.$el, this.clsDrop + "-stack");
           toggleClass(this.$el, this.clsDrop + "-boundary", this.boundaryAlign);
-          toggleClass(this.$el, this.clsDrop + "-stretch", this.align === 'stretch');
 
           const boundary = query(this.boundary, this.$el);
-          const target = boundary && this.boundaryAlign ? boundary : this.target;
-          const [scrollParent] = scrollParents(
-          boundary && this.boundaryAlign ? boundary : this.$el);
+          const scrollParentOffset = offset(
+          scrollParents(boundary && this.boundaryAlign ? boundary : this.$el)[0]);
 
-          const scrollParentOffset = offset(scrollParent);
           const boundaryOffset = boundary ? offset(boundary) : scrollParentOffset;
-          const viewportOffset = this.getViewportOffset(this.$el);
 
           css(this.$el, 'maxWidth', '');
-          const maxWidth = scrollParentOffset.width - 2 * viewportOffset;
+          const maxWidth =
+          scrollParentOffset.width -
+          2 * toPx(getCssVar('position-viewport-offset', this.$el));
 
-          if (this.align === 'justify') {
+          if (this.pos[1] === 'justify') {
             const prop = this.axis === 'y' ? 'width' : 'height';
             css(
             this.$el,
             prop,
             Math.min(
             (boundary ? boundaryOffset : offset(this.target))[prop],
-            scrollParentOffset[prop] - 2 * viewportOffset));
-
-
-          } else if (this.align === 'stretch') {
-            this.flip = this.axis === 'y' ? 'x' : 'y';
-            this.display = 'static';
-
-            const viewport = offsetViewport(scrollParent);
-            const targetDim = offset(target);
-            const elOffset = Math.abs(this.getPositionOffset(this.$el)) + viewportOffset;
-
-            css(this.$el, {
-              width:
-              this.axis === 'y' ?
-              viewport.width :
-              (this.dir === 'left' ?
-              targetDim.left - viewport.left :
-              viewport.right - targetDim.right) - elOffset,
-              height:
-              this.axis === 'x' ?
-              viewport.height :
-              (this.dir === 'top' ?
-              targetDim.top - viewport.top :
-              viewport.bottom - targetDim.bottom) - elOffset });
+            scrollParentOffset[prop] -
+            2 * toPx(getCssVar('position-viewport-offset', this.$el))));
+
 
           } else if (this.$el.offsetWidth > maxWidth) {
             addClass(this.$el, this.clsDrop + "-stack");
@@ -4128,7 +3996,11 @@
 
           css(this.$el, 'maxWidth', maxWidth);
 
-          this.positionAt(this.$el, target, boundary);
+          this.positionAt(
+          this.$el,
+          boundary && this.boundaryAlign ? boundary : this.target,
+          boundary);
+
         } } };
 
 
@@ -4613,7 +4485,7 @@
 
       resizeTargets() {
         // check for offsetTop change
-        return [this.$el, ...scrollParents(this.$el, /auto|scroll/)];
+        return [this.$el, document.documentElement];
       },
 
       update: {
@@ -4625,25 +4497,21 @@
           let minHeight = '';
           const box = boxModelAdjust(this.$el, 'height', 'content-box');
 
-          const [scrollElement] = scrollParents(this.$el, /auto|scroll/);
-          const { height: viewportHeight } = offsetViewport(scrollElement);
-
           if (this.expand) {
             minHeight = Math.max(
-            viewportHeight - (
-            dimensions(scrollElement).height - dimensions(this.$el).height) -
+            height(window) - (
+            dimensions(document.documentElement).height -
+            dimensions(this.$el).height) -
             box,
             0);
 
           } else {
             // on mobile devices (iOS and Android) window.innerHeight !== 100vh
-            minHeight = "calc(" + (
-            document.scrollingElement === scrollElement ? '100vh' : viewportHeight + "px");
-
+            minHeight = 'calc(100vh';
 
             if (this.offsetTop) {
-              const top = offsetPosition(this.$el)[0] - offsetPosition(scrollElement)[0];
-              minHeight += top > 0 && top < viewportHeight / 2 ? " - " + top + "px" : '';
+              const { top } = offset(this.$el);
+              minHeight += top > 0 && top < height(window) / 2 ? " - " + top + "px" : '';
             }
 
             if (this.offsetBottom === true) {
@@ -5977,8 +5845,8 @@
           return this.dropbar;
         },
 
-        handler(_, _ref9) {let { $el, align } = _ref9;
-          if (!hasClass($el, this.clsDrop) || align === 'stretch') {
+        handler(_, _ref9) {let { $el } = _ref9;
+          if (!hasClass($el, this.clsDrop)) {
             return;
           }
 
@@ -6001,8 +5869,8 @@
           return this.dropbar;
         },
 
-        handler(_, _ref10) {let { $el, align } = _ref10;
-          if (!hasClass($el, this.clsDrop) || align === 'stretch') {
+        handler(_, _ref10) {let { $el } = _ref10;
+          if (!hasClass($el, this.clsDrop)) {
             return;
           }
 
@@ -6052,8 +5920,8 @@
           return this.dropbar;
         },
 
-        handler(_, _ref12) {let { $el, align } = _ref12;
-          if (!hasClass($el, this.clsDrop) || align === 'stretch') {
+        handler(_, _ref12) {let { $el } = _ref12;
+          if (!hasClass($el, this.clsDrop)) {
             return;
           }
 
@@ -6079,7 +5947,7 @@
 
           el = oldHeight < newHeight && el;
 
-          css(el, 'clipPath', "polygon(0 0,100% 0,100% " + oldHeight + "px,0 " + oldHeight + "px)");
+          css(el, 'clip', "rect(0," + el.offsetWidth + "px," + oldHeight + "px,0)");
 
           height(dropbar, oldHeight);
 
@@ -6088,14 +5956,12 @@
           Transition.start(dropbar, { height: newHeight }, this.duration),
           Transition.start(
           el,
-          {
-            clipPath: "polygon(0 0,100% 0,100% " + newHeight + "px,0 " + newHeight + "px)" },
-
+          { clip: "rect(0," + el.offsetWidth + "px," + newHeight + "px,0)" },
           this.duration)]).
 
 
           catch(noop).
-          then(() => css(el, { clipPath: '' }));
+          then(() => css(el, { clip: '' }));
         },
 
         getDropdown(el) {