npm - uikit - Versions diffs - 3.13.8-dev.fd15ccb29 → 3.13.10-dev.4de12886e - Mend

uikit 3.13.8-dev.fd15ccb29 → 3.13.10-dev.4de12886e

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (73) hide show

package/CHANGELOG.md +33 -3
package/build/build.js +4 -1
package/dist/css/uikit-core-rtl.css +11 -2
package/dist/css/uikit-core-rtl.min.css +1 -1
package/dist/css/uikit-core.css +11 -2
package/dist/css/uikit-core.min.css +1 -1
package/dist/css/uikit-rtl.css +11 -2
package/dist/css/uikit-rtl.min.css +1 -1
package/dist/css/uikit.css +11 -2
package/dist/css/uikit.min.css +1 -1
package/dist/js/components/countdown.js +1 -1
package/dist/js/components/countdown.min.js +1 -1
package/dist/js/components/filter.js +1 -1
package/dist/js/components/filter.min.js +1 -1
package/dist/js/components/lightbox-panel.js +7 -3
package/dist/js/components/lightbox-panel.min.js +1 -1
package/dist/js/components/lightbox.js +7 -3
package/dist/js/components/lightbox.min.js +1 -1
package/dist/js/components/notification.js +1 -1
package/dist/js/components/notification.min.js +1 -1
package/dist/js/components/parallax.js +6 -2
package/dist/js/components/parallax.min.js +1 -1
package/dist/js/components/slider-parallax.js +6 -2
package/dist/js/components/slider-parallax.min.js +1 -1
package/dist/js/components/slider.js +1 -1
package/dist/js/components/slider.min.js +1 -1
package/dist/js/components/slideshow-parallax.js +6 -2
package/dist/js/components/slideshow-parallax.min.js +1 -1
package/dist/js/components/slideshow.js +1 -1
package/dist/js/components/slideshow.min.js +1 -1
package/dist/js/components/sortable.js +2 -2
package/dist/js/components/sortable.min.js +1 -1
package/dist/js/components/tooltip.js +4 -2
package/dist/js/components/tooltip.min.js +1 -1
package/dist/js/components/upload.js +1 -1
package/dist/js/components/upload.min.js +1 -1
package/dist/js/uikit-core.js +203 -134
package/dist/js/uikit-core.min.js +1 -1
package/dist/js/uikit-icons.js +1 -1
package/dist/js/uikit-icons.min.js +1 -1
package/dist/js/uikit.js +209 -136
package/dist/js/uikit.min.js +1 -1
package/package.json +1 -1
package/src/js/components/sortable.js +2 -3
package/src/js/core/drop.js +19 -12
package/src/js/core/height-match.js +1 -2
package/src/js/core/margin.js +1 -1
package/src/js/core/navbar.js +17 -7
package/src/js/core/scrollspy-nav.js +4 -9
package/src/js/core/sticky.js +26 -13
package/src/js/core/toggle.js +8 -8
package/src/js/mixin/modal.js +6 -2
package/src/js/mixin/parallax.js +5 -1
package/src/js/mixin/position.js +2 -0
package/src/js/uikit-core.js +0 -4
package/src/js/util/lang.js +0 -4
package/src/js/util/position.js +80 -24
package/src/js/util/viewport.js +42 -22
package/src/less/components/drop.less +0 -1
package/src/less/components/navbar.less +11 -0
package/src/less/components/search.less +2 -0
package/src/less/theme/search.less +6 -0
package/src/scss/components/drop.scss +0 -1
package/src/scss/components/navbar.scss +11 -0
package/src/scss/components/search.scss +2 -0
package/src/scss/mixins-theme.scss +1 -0
package/src/scss/mixins.scss +1 -0
package/src/scss/theme/search.scss +6 -0
package/tests/animation.html +216 -214
package/tests/navbar.html +37 -0
package/tests/sticky-parallax.html +16 -0
package/tests/sticky.html +212 -36
package/src/js/core/core.js +0 -25

package/dist/js/uikit-core.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/*! UIkit 3.13.8-dev.fd15ccb29 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
+/*! UIkit 3.13.10-dev.4de12886e | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -141,10 +141,6 @@
       return (document == null ? void 0 : document.defaultView) || window;
     }
-    function toMs(time) {
-      return time ? endsWith(time, 'ms') ? toFloat(time) : toFloat(time) * 1000 : 0;
-    }
     function isEqual(value, other) {
       return (
         value === other ||
@@ -1788,7 +1784,7 @@
       return intersectRect(
       ...scrollParents(element).
       map((parent) => {
-        const { top, left, bottom, right } = offset(getViewport$1(parent));
+        const { top, left, bottom, right } = offsetViewport(parent);
         return {
           top: top - offsetTop,
@@ -1803,7 +1799,7 @@
     function scrollTop(element, top) {
       if (isWindow(element) || isDocument(element)) {
-        element = getScrollingElement(element);
+        element = scrollingElement(element);
       } else {
         element = toNode(element);
       }
@@ -1820,12 +1816,13 @@
       return parents.reduce(
       (fn, scrollElement, i) => {
         const { scrollTop, scrollHeight, offsetHeight } = scrollElement;
-        const maxScroll = scrollHeight - getViewportClientHeight(scrollElement);
-        const { height: elHeight, top: elTop } = offset(parents[i - 1] || element);
-        let top = Math.ceil(
-        elTop - offset(getViewport$1(scrollElement)).top - offsetBy + scrollTop);
+        const viewport = offsetViewport(scrollElement);
+        const maxScroll = scrollHeight - viewport.height;
+        const { height: elHeight, top: elTop } = parents[i - 1] ?
+        offsetViewport(parents[i - 1]) :
+        offset(element);
+        let top = Math.ceil(elTop - viewport.top - offsetBy + scrollTop);
         if (offsetBy > 0 && offsetHeight < elHeight + offsetBy) {
           top += offsetBy;
@@ -1883,7 +1880,7 @@
       const [scrollElement] = scrollParents(element, /auto|scroll/, true);
       const { scrollHeight, scrollTop } = scrollElement;
-      const viewportHeight = getViewportClientHeight(scrollElement);
+      const { height: viewportHeight } = offsetViewport(scrollElement);
       const maxScroll = scrollHeight - viewportHeight;
       const elementOffsetTop = offsetPosition(element)[0] - offsetPosition(scrollElement)[0];
@@ -1894,7 +1891,7 @@
     }
     function scrollParents(element, overflowRe, scrollable) {if (overflowRe === void 0) {overflowRe = /auto|scroll|hidden/;}if (scrollable === void 0) {scrollable = false;}
-      const scrollEl = getScrollingElement(element);
+      const scrollEl = scrollingElement(element);
       let ancestors = parents(element).reverse();
       ancestors = ancestors.slice(ancestors.indexOf(scrollEl) + 1);
@@ -1909,28 +1906,45 @@
       ancestors.filter(
       (parent) =>
       overflowRe.test(css(parent, 'overflow')) && (
-      !scrollable || parent.scrollHeight > getViewportClientHeight(parent)))).
+      !scrollable || parent.scrollHeight > offsetViewport(parent).height))).
       reverse();
     }
-    function getViewport$1(scrollElement) {
-      return scrollElement === getScrollingElement(scrollElement) ? window : scrollElement;
+    function offsetViewport(scrollElement) {
+      let viewportElement = getViewport$1(scrollElement);
+      // iOS 12 returns <body> as scrollingElement
+      if (viewportElement === scrollingElement(viewportElement)) {
+        viewportElement = document.documentElement;
+      }
+      let rect = offset(viewportElement);
+      for (let [prop, dir, start, end] of [
+      ['width', 'x', 'left', 'right'],
+      ['height', 'y', 'top', 'bottom']])
+      {
+        if (!isWindow(getViewport$1(viewportElement))) {
+          rect[start] += toFloat(css(viewportElement, "border" + ucfirst(start) + "Width"));
+        }
+        rect[prop] = rect[dir] = (
+        isWindow(viewportElement) ? scrollingElement(viewportElement) : viewportElement)["client" +
+        ucfirst(prop)];
+        rect[end] = rect[prop] + rect[start];
+      }
+      return rect;
     }
-    // iOS 12 returns <body> as scrollingElement
-    function getViewportClientHeight(scrollElement) {
-      return (
-      scrollElement === getScrollingElement(scrollElement) ?
-      document.documentElement :
-      scrollElement).
-      clientHeight;
+    function scrollingElement(element) {
+      const {
+        document: { scrollingElement } } =
+      toWindow(element);
+      return scrollingElement;
     }
-    function getScrollingElement(element) {
-      const { document } = toWindow(element);
-      return document.scrollingElement || document.documentElement;
+    function getViewport$1(scrollElement) {
+      return scrollElement === scrollingElement(scrollElement) ? window : scrollElement;
     }
     const dirs = [
@@ -1984,18 +1998,21 @@
     function attachToWithFlip(element, target, options) {
       const position = attachTo(element, target, options);
       const targetDim = offset(target);
-      const viewports = scrollParents(element).map(getViewport$1);
+      const viewports = scrollParents(element, /auto|scroll/);
+      const [scrollElement] = viewports;
       let {
         flip,
         attach: { element: elAttach, target: targetAttach },
         offset: elOffset,
         boundary,
-        viewport } =
+        viewport,
+        viewportPadding } =
       options;
       viewports.push(viewport);
+      const offsetPosition = { ...position };
       for (const i in dirs) {
         const [prop, dir, start, end] = dirs[i];
@@ -2006,9 +2023,16 @@
         const willFlip =
         !intersectLine(position, targetDim, i) && intersectLine(position, targetDim, 1 - i);
-        viewport = getIntersectionArea(
-        ...viewports,
-        willFlip || position[prop] > offset(boundary)[prop] ? null : boundary);
+        viewport = getIntersectionArea(...viewports.filter(Boolean).map(offsetViewport));
+        if (viewportPadding) {
+          viewport[start] += viewportPadding;
+          viewport[end] -= viewportPadding;
+        }
+        if (boundary && !(willFlip || position[prop] > offset(boundary)[prop])) {
+          viewport = getIntersectionArea(viewport, offset(boundary));
+        }
         const isInStartBoundary = position[start] >= viewport[start];
         const isInEndBoundary = position[end] <= viewport[end];
@@ -2041,6 +2065,41 @@
           0) -
           elOffset[i] * 2;
+          if (
+          !isInScrollArea(
+          {
+            ...position,
+            [start]: position[start] + offsetBy,
+            [end]: position[end] + offsetBy },
+          scrollElement,
+          i))
+          {
+            if (isInScrollArea(position, scrollElement, i)) {
+              continue;
+            }
+            if (options.recursion) {
+              return false;
+            }
+            const newPos = attachToWithFlip(element, target, {
+              ...options,
+              attach: {
+                element: elAttach.map(flipDir).reverse(),
+                target: targetAttach.map(flipDir).reverse() },
+              offset: elOffset.reverse(),
+              flip: flip === true ? flip : [...flip, dirs[1 - i][1]],
+              recursion: true });
+            if (newPos && isInScrollArea(newPos, scrollElement, 1 - i)) {
+              return newPos;
+            }
+          }
           // Move
         } else {
           offsetBy =
@@ -2051,11 +2110,11 @@
           position[start];
         }
-        position[start] = position[dir] = position[start] + offsetBy;
-        position[end] += offsetBy;
+        offsetPosition[start] = position[dir] = position[start] + offsetBy;
+        offsetPosition[end] += offsetBy;
       }
-      return position;
+      return offsetPosition;
     }
     function moveBy(start, end, dim) {
@@ -2063,21 +2122,23 @@
     }
     function getIntersectionArea() {
-      let intersection;for (var _len = arguments.length, elements = new Array(_len), _key = 0; _key < _len; _key++) {elements[_key] = arguments[_key];}
-      for (const el of elements.filter(Boolean)) {
-        const rect = offset(el);
-        if (!intersection) {
-          intersection = rect;
-          continue;
-        }
-        for (const prop of ['left', 'top']) {
-          intersection[prop] = Math.max(rect[prop], intersection[prop]);
-        }
-        for (const prop of ['right', 'bottom']) {
-          intersection[prop] = Math.min(rect[prop], intersection[prop]);
+      let area = {};for (var _len = arguments.length, rects = new Array(_len), _key = 0; _key < _len; _key++) {rects[_key] = arguments[_key];}
+      for (const rect of rects) {
+        for (const [,, start, end] of dirs) {
+          area[start] = Math.max(area[start] || 0, rect[start]);
+          area[end] = Math.min(...[area[end], rect[end]].filter(Boolean));
         }
       }
-      return intersection;
+      return area;
+    }
+    function isInScrollArea(position, scrollElement, dir) {
+      const viewport = offsetViewport(scrollElement);
+      const [prop,, start, end] = dirs[dir];
+      viewport[start] -= scrollElement["scroll" + ucfirst(start)];
+      viewport[end] = viewport[start] + scrollElement["scroll" + ucfirst(prop)];
+      return position[start] >= viewport[start] && position[end] <= viewport[end];
     }
     function intersectLine(dimA, dimB, dir) {
@@ -2085,6 +2146,15 @@
       return dimA[end] > dimB[start] && dimB[end] > dimA[start];
     }
+    function flipDir(prop) {
+      for (const i in dirs) {
+        const index = dirs[i].indexOf(prop);
+        if (~index) {
+          return dirs[1 - i][index % 2 + 2];
+        }
+      }
+    }
     var util = /*#__PURE__*/Object.freeze({
         __proto__: null,
         ajax: ajax,
@@ -2191,7 +2261,6 @@
         toNode: toNode,
         toNodes: toNodes,
         toWindow: toWindow,
-        toMs: toMs,
         isEqual: isEqual,
         swap: swap,
         last: last,
@@ -2230,9 +2299,7 @@
         scrollIntoView: scrollIntoView,
         scrolledOver: scrolledOver,
         scrollParents: scrollParents,
-        getViewport: getViewport$1,
-        getViewportClientHeight: getViewportClientHeight,
-        getScrollingElement: getScrollingElement
+        offsetViewport: offsetViewport
     });
     function globalAPI (UIkit) {
@@ -2891,7 +2958,7 @@
     UIkit.data = '__uikit__';
     UIkit.prefix = 'uk-';
     UIkit.options = {};
-    UIkit.version = '3.13.8-dev.fd15ccb29';
+    UIkit.version = '3.13.10-dev.4de12886e';
     globalAPI(UIkit);
     hooksAPI(UIkit);
@@ -2899,30 +2966,6 @@
     componentAPI(UIkit);
     instanceAPI(UIkit);
-    function Core () {
-      if (!inBrowser) {
-        return;
-      }
-      let started = 0;
-      on(
-      document,
-      'animationstart',
-      (_ref) => {let { target } = _ref;
-        if ((css(target, 'animationName') || '').match(/^uk-.*(left|right)/)) {
-          started++;
-          css(document.documentElement, 'overflowX', 'hidden');
-          setTimeout(() => {
-            if (! --started) {
-              css(document.documentElement, 'overflowX', '');
-            }
-          }, toMs(css(target, 'animationDuration')) + 100);
-        }
-      },
-      true);
-    }
     function boot (UIkit) {
       const { connect, disconnect } = UIkit;
@@ -3500,7 +3543,8 @@
       data: {
         pos: "bottom-" + (isRtl ? 'right' : 'left'),
         flip: true,
-        offset: false },
+        offset: false,
+        viewportPadding: 10 },
       connected() {
@@ -3539,6 +3583,7 @@
             attach,
             offset: offset$1,
             boundary,
+            viewportPadding: this.viewportPadding,
             flip: this.flip });
         } } };
@@ -3757,7 +3802,7 @@
               this.hide(false);
             }
           }),
-          on(window, 'resize', () => this.$emit('resize'))])
+          on(window, 'resize', () => this.$emit())])
           {
             once(this.$el, 'hide', handler, { self: true });
           }
@@ -3797,9 +3842,7 @@
           if (this.isToggled() && !hasClass(this.$el, this.clsEnter)) {
             this.position();
           }
-        },
-        events: ['resize'] },
+        } },
       methods: {
@@ -3870,26 +3913,33 @@
         },
         position() {
-          const boundary = query(this.boundary, this.$el) || window;
           removeClass(this.$el, this.clsDrop + "-stack");
           toggleClass(this.$el, this.clsDrop + "-boundary", this.boundaryAlign);
-          const boundaryOffset = offset(boundary);
-          const targetOffset = offset(this.target);
-          const alignTo = this.boundaryAlign ? boundaryOffset : targetOffset;
-          const prop = this.axis === 'y' ? 'width' : 'height';
+          const boundary = query(this.boundary, this.$el);
+          const [scrollParent] = scrollParents(this.$el);
+          const scrollParentOffset = offsetViewport(scrollParent);
+          const boundaryOffset = boundary ? offset(boundary) : scrollParentOffset;
-          css(this.$el, "max-" + prop, '');
+          css(this.$el, 'maxWidth', '');
+          const maxWidth = scrollParentOffset.width - (boundary ? 0 : 2 * this.viewportPadding);
           if (this.pos[1] === 'justify') {
+            const prop = this.axis === 'y' ? 'width' : 'height';
+            const targetOffset = offset(this.target);
+            const alignTo = this.boundaryAlign ? boundaryOffset : targetOffset;
             css(this.$el, prop, alignTo[prop]);
-          } else if (this.$el.offsetWidth > boundaryOffset.width) {
+          } else if (this.$el.offsetWidth > maxWidth) {
             addClass(this.$el, this.clsDrop + "-stack");
           }
-          css(this.$el, "max-" + prop, boundaryOffset[prop]);
+          css(this.$el, 'maxWidth', maxWidth);
+          this.positionAt(
+          this.$el,
+          boundary && this.boundaryAlign ? boundary : this.target,
+          boundary);
-          this.positionAt(this.$el, this.boundaryAlign ? boundary : this.target, boundary);
         } } };
@@ -3987,7 +4037,7 @@
       resizeTargets() {
-        return this.$el.children;
+        return [this.$el, this.$el.children];
       },
       connected() {
@@ -4288,8 +4338,7 @@
       data: {
         target: '> *',
-        row: true,
-        forceHeight: true },
+        row: true },
       computed: {
@@ -4305,7 +4354,7 @@
       resizeTargets() {
-        return this.elements;
+        return [this.$el, this.elements];
       },
       update: {
@@ -5295,7 +5344,7 @@
       return (el, show) =>
       new Promise((resolve, reject) =>
       once(el, 'show hide', () => {
-        el._reject && el._reject();
+        el._reject == null ? void 0 : el._reject();
         el._reject = reject;
         _toggle(el, show);
@@ -5320,6 +5369,10 @@
       then(() => delete el._reject);
     }
+    function toMs(time) {
+      return time ? endsWith(time, 'ms') ? toFloat(time) : toFloat(time) * 1000 : 0;
+    }
     var modal = {
       install,
@@ -5473,8 +5526,6 @@
         toggle: '> a',
         content: '> ul' } };
-    const navItem = '.uk-navbar-nav > li > a, .uk-navbar-item, .uk-navbar-toggle';
     var navbar = {
       mixins: [Class, Container],
@@ -5494,7 +5545,7 @@
       data: {
-        dropdown: navItem,
+        dropdown: '.uk-navbar-nav > li > a, .uk-navbar-item, .uk-navbar-toggle',
         align: isRtl ? 'right' : 'left',
         clsDrop: 'uk-navbar-dropdown',
         mode: undefined,
@@ -5507,8 +5558,6 @@
         dropbar: false,
         dropbarAnchor: false,
         duration: 200,
-        forceHeight: true,
-        selMinHeight: navItem,
         container: false },
@@ -5582,9 +5631,23 @@
           immediate: true },
-        toggles(_ref6, $el) {let { dropdown } = _ref6;
-          return $$(dropdown, $el);
-        } },
+        toggles: {
+          get(_ref6, $el) {let { dropdown } = _ref6;
+            return $$(dropdown, $el);
+          },
+          watch() {
+            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 ? $$(this.dropdown, container).length : '');
+            }
+          },
+          immediate: true } },
       disconnected() {
@@ -6479,19 +6542,15 @@
           const [scrollElement] = scrollParents(targets, /auto|scroll/, true);
           const { scrollTop, scrollHeight } = scrollElement;
-          const max = scrollHeight - getViewportClientHeight(scrollElement);
+          const viewport = offsetViewport(scrollElement);
+          const max = scrollHeight - viewport.height;
           let active = false;
           if (scrollTop === max) {
             active = length - 1;
           } else {
             for (const i in targets) {
-              if (
-              offset(targets[i]).top -
-              offset(getViewport$1(scrollElement)).top -
-              this.offset >
-              0)
-              {
+              if (offset(targets[i]).top - viewport.top - this.offset > 0) {
                 break;
               }
               active = +i;
@@ -6525,8 +6584,10 @@
       props: {
         position: String,
-        top: null,
+        top: Boolean,
         bottom: Boolean,
+        start: Boolean,
+        end: Boolean,
         offset: String,
         animation: String,
         clsActive: String,
@@ -6540,8 +6601,10 @@
       data: {
         position: 'top',
-        top: 0,
+        top: false,
         bottom: false,
+        start: false,
+        end: false,
         offset: 0,
         animation: '',
         clsActive: 'uk-active',
@@ -6564,6 +6627,9 @@
       },
       connected() {
+        this.start = this.start || this.top;
+        this.end = this.end || this.bottom;
         this.placeholder =
         $('+ .uk-sticky-placeholder', this.$el) ||
         $('<div class="uk-sticky-placeholder"></div>');
@@ -6657,13 +6723,17 @@
           const overflow = Math.max(0, height$1 + offset$1 - windowHeight);
           const topOffset = offset(referenceElement).top;
-          const top = parseProp(this.top, this.$el, topOffset);
-          const bottom = parseProp(this.bottom, this.$el, topOffset + height$1, true);
-          const start = Math.max(top, topOffset) - offset$1;
-          const end = bottom ?
-          bottom - offset(this.$el).height + overflow - offset$1 :
-          getScrollingElement(this.$el).scrollHeight - windowHeight;
+          const start =
+          (this.start === false ?
+          topOffset :
+          parseProp(this.start, this.$el, topOffset)) - offset$1;
+          const end =
+          this.end === false ?
+          document.scrollingElement.scrollHeight - windowHeight :
+          parseProp(this.end, this.$el, topOffset + height$1, true) -
+          offset(this.$el).height +
+          overflow -
+          offset$1;
           return {
             start,
@@ -6709,7 +6779,9 @@
             prevDir,
             scroll,
             prevScroll,
-            offsetParentTop: offset(this.$el.offsetParent).top,
+            offsetParentTop: offset(
+            (this.isFixed ? this.placeholder : this.$el).offsetParent).
+            top,
             overflowScroll: clamp(
             overflowScroll + clamp(scroll, start, end) - clamp(prevScroll, start, end),
             0,
@@ -6864,8 +6936,8 @@
         return 0;
       }
-      if (isString(value) && value.match(/^-?\d/)) {
-        return propOffset + toPx(value);
+      if (isNumeric(value) || isString(value) && value.match(/^-?\d/)) {
+        return propOffset + toPx(value, 'height', el, true);
       } else {
         const refElement = value === true ? parent(el) : query(value, el);
         return (
@@ -7185,15 +7257,7 @@
       {
         name: 'click',
-        filter() {
-          return includes(this.mode, 'click');
-        },
         handler(e) {
-          if (this._preventClick) {
-            return this._preventClick = null;
-          }
           let link;
           if (
           closest(e.target, 'a[href="#"], a[href=""]') ||
@@ -7204,6 +7268,14 @@
             e.preventDefault();
           }
+          if (this._preventClick) {
+            return this._preventClick = null;
+          }
+          if (!includes(this.mode, 'click')) {
+            return;
+          }
           this.toggle();
         } },
@@ -7329,9 +7401,6 @@
     // register components
     each(components, (component, name) => UIkit.component(name, component));
-    // core functionality
-    UIkit.use(Core);
     boot(UIkit);
     return UIkit;