uikit 3.13.11-dev.d3de726ee → 3.14.1-dev.b7e81c46b

package/dist/js/uikit.js

@@ -1,4 +1,4 @@
-/*! UIkit 3.13.11-dev.d3de726ee | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
+/*! UIkit 3.14.1-dev.b7e81c46b | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
 
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -208,48 +208,44 @@
 
     }
 
-    const Dimensions = {
-      ratio(dimensions, prop, value) {
-        const aProp = prop === 'width' ? 'height' : 'width';
+    function ratio(dimensions, prop, value) {
+      const aProp = prop === 'width' ? 'height' : 'width';
 
-        return {
-          [aProp]: dimensions[prop] ?
-          Math.round(value * dimensions[aProp] / dimensions[prop]) :
-          dimensions[aProp],
-          [prop]: value };
+      return {
+        [aProp]: dimensions[prop] ?
+        Math.round(value * dimensions[aProp] / dimensions[prop]) :
+        dimensions[aProp],
+        [prop]: value };
 
-      },
+    }
 
-      contain(dimensions, maxDimensions) {
-        dimensions = { ...dimensions };
+    function contain(dimensions, maxDimensions) {
+      dimensions = { ...dimensions };
 
-        each(
-        dimensions,
-        (_, prop) =>
+      for (const prop in dimensions) {
         dimensions =
         dimensions[prop] > maxDimensions[prop] ?
-        this.ratio(dimensions, prop, maxDimensions[prop]) :
-        dimensions);
-
+        ratio(dimensions, prop, maxDimensions[prop]) :
+        dimensions;
+      }
 
-        return dimensions;
-      },
+      return dimensions;
+    }
 
-      cover(dimensions, maxDimensions) {
-        dimensions = this.contain(dimensions, maxDimensions);
+    function cover$1(dimensions, maxDimensions) {
+      dimensions = contain(dimensions, maxDimensions);
 
-        each(
-        dimensions,
-        (_, prop) =>
+      for (const prop in dimensions) {
         dimensions =
         dimensions[prop] < maxDimensions[prop] ?
-        this.ratio(dimensions, prop, maxDimensions[prop]) :
-        dimensions);
-
+        ratio(dimensions, prop, maxDimensions[prop]) :
+        dimensions;
+      }
 
-        return dimensions;
-      } };
+      return dimensions;
+    }
 
+    const Dimensions = { ratio, contain, cover: cover$1 };
 
     function getIndex(i, elements, current, finite) {if (current === void 0) {current = 0;}if (finite === void 0) {finite = false;}
       elements = toNodes(elements);
@@ -1997,8 +1993,6 @@
     function attachToWithFlip(element, target, options) {
       const position = attachTo(element, target, options);
       const targetDim = offset(target);
-      const viewports = scrollParents(element, /auto|scroll/);
-      const [scrollElement] = viewports;
 
       let {
         flip,
@@ -2009,6 +2003,11 @@
         viewportPadding } =
       options;
 
+      let viewports = scrollParents(element);
+      if (boundary === target) {
+        viewports = viewports.filter((viewport) => viewport !== boundary);
+      }
+      const [scrollElement] = viewports;
       viewports.push(viewport);
 
       const offsetPosition = { ...position };
@@ -2027,7 +2026,7 @@
           viewport[end] -= viewportPadding;
         }
 
-        if (boundary && !(willFlip || position[prop] > offset(boundary)[prop])) {
+        if (boundary && !willFlip && position[prop] <= offset(boundary)[prop]) {
           viewport = getIntersectionArea(viewport, offset(boundary));
         }
 
@@ -2955,7 +2954,7 @@
     UIkit.data = '__uikit__';
     UIkit.prefix = 'uk-';
     UIkit.options = {};
-    UIkit.version = '3.13.11-dev.d3de726ee';
+    UIkit.version = '3.14.1-dev.b7e81c46b';
 
     globalAPI(UIkit);
     hooksAPI(UIkit);
@@ -3047,6 +3046,7 @@
         cls: Boolean,
         animation: 'list',
         duration: Number,
+        velocity: Number,
         origin: String,
         transition: String },
 
@@ -3055,8 +3055,9 @@
         cls: false,
         animation: [false],
         duration: 200,
+        velocity: 0.2,
         origin: false,
-        transition: 'linear',
+        transition: 'ease',
         clsEnter: 'uk-togglabe-enter',
         clsLeave: 'uk-togglabe-leave',
 
@@ -3066,7 +3067,8 @@
           paddingTop: '',
           paddingBottom: '',
           marginTop: '',
-          marginBottom: '' },
+          marginBottom: '',
+          boxShadow: '' },
 
 
         hideProps: {
@@ -3075,7 +3077,8 @@
           paddingTop: 0,
           paddingBottom: 0,
           marginTop: 0,
-          marginBottom: 0 } },
+          marginBottom: 0,
+          boxShadow: 'none' } },
 
 
 
@@ -3170,7 +3173,15 @@
 
 
 
-    function toggleHeight(_ref3) {let { isToggled, duration, initProps, hideProps, transition, _toggle } = _ref3;
+    function toggleHeight(_ref3)
+
+
+
+
+
+
+
+    {let { isToggled, duration, velocity, initProps, hideProps, transition, _toggle } = _ref3;
       return (el, show) => {
         const inProgress = Transition.inProgress(el);
         const inner = el.hasChildNodes() ?
@@ -3191,6 +3202,8 @@
         fastdom.flush();
 
         const endHeight = height(el) + (inProgress ? 0 : inner);
+        duration = velocity * el.offsetHeight + duration;
+
         height(el, currentHeight);
 
         return (
@@ -3238,7 +3251,6 @@
         multiple: Boolean,
         toggle: String,
         content: String,
-        transition: String,
         offset: Number },
 
 
@@ -3251,19 +3263,16 @@
         clsOpen: 'uk-open',
         toggle: '> .uk-accordion-title',
         content: '> .uk-accordion-content',
-        transition: 'ease',
         offset: 0 },
 
 
       computed: {
         items: {
           get(_ref, $el) {let { targets } = _ref;
-            return $$(targets, $el).filter((el) => $(this.content, el));
+            return $$(targets, $el);
           },
 
           watch(items, prev) {
-            items.forEach((el) => hide($(this.content, el), !hasClass(el, this.clsOpen)));
-
             if (prev || hasClass(items, this.clsOpen)) {
               return;
             }
@@ -3282,7 +3291,27 @@
 
         toggles(_ref2) {let { toggle } = _ref2;
           return this.items.map((item) => $(toggle, item));
-        } },
+        },
+
+        contents: {
+          get(_ref3) {let { content } = _ref3;
+            return this.items.map((item) => $(content, item));
+          },
+
+          watch(items) {
+            for (const el of items) {
+              hide(
+              el,
+              !hasClass(
+              this.items.find((item) => item.contains(el)),
+              this.clsOpen));
+
+
+            }
+          },
+
+          immediate: true } },
+
 
 
       connected() {
@@ -3479,25 +3508,38 @@
 
       update: {
         read() {
-          const el = this.$el;
-          const { offsetHeight: height, offsetWidth: width } =
-          getPositionedParent(el) || parent(el);
-          const dim = Dimensions.cover(
-          {
-            width: this.width || el.naturalWidth || el.videoWidth || el.clientWidth,
-            height: this.height || el.naturalHeight || el.videoHeight || el.clientHeight },
+          const { ratio, cover } = Dimensions;
+          const { $el, width, height } = this;
 
-          {
-            width: width + (width % 2 ? 1 : 0),
-            height: height + (height % 2 ? 1 : 0) });
+          let dim = { width, height };
 
+          if (!dim.width || !dim.height) {
+            const intrinsic = {
+              width: $el.naturalWidth || $el.videoWidth || $el.clientWidth,
+              height: $el.naturalHeight || $el.videoHeight || $el.clientHeight };
 
 
-          if (!dim.width || !dim.height) {
+            if (dim.width) {
+              dim = ratio(intrinsic, 'width', dim.width);
+            } else if (height) {
+              dim = ratio(intrinsic, 'height', dim.height);
+            } else {
+              dim = intrinsic;
+            }
+          }
+
+          const { offsetHeight: coverHeight, offsetWidth: coverWidth } =
+          getPositionedParent($el) || parent($el);
+          const coverDim = cover(dim, {
+            width: coverWidth + (coverWidth % 2 ? 1 : 0),
+            height: coverHeight + (coverHeight % 2 ? 1 : 0) });
+
+
+          if (!coverDim.width || !coverDim.height) {
             return false;
           }
 
-          return dim;
+          return coverDim;
         },
 
         write(_ref) {let { height, width } = _ref;
@@ -3599,6 +3641,7 @@
         boundaryAlign: Boolean,
         delayShow: Number,
         delayHide: Number,
+        display: String,
         clsDrop: String },
 
 
@@ -3609,6 +3652,7 @@
         boundaryAlign: false,
         delayShow: 0,
         delayHide: 800,
+        display: null,
         clsDrop: false,
         animation: ['uk-animation-fade'],
         cls: 'uk-open',
@@ -3799,7 +3843,23 @@
               this.hide(false);
             }
           }),
-          on(window, 'resize', () => this.$emit())])
+
+          ...(this.display === 'static' ?
+          [] :
+          (() => {
+            const handler = () => this.$emit();
+            return [
+            on(window, 'resize', handler),
+            on(document, 'scroll', handler, true),
+            (() => {
+              const observer = observeResize(
+              scrollParents(this.$el),
+              handler);
+
+              return () => observer.disconnect();
+            })()];
+
+          })())])
           {
             once(this.$el, 'hide', handler, { self: true });
           }
@@ -3919,7 +3979,8 @@
           const boundaryOffset = boundary ? offset(boundary) : scrollParentOffset;
 
           css(this.$el, 'maxWidth', '');
-          const maxWidth = scrollParentOffset.width - (boundary ? 0 : 2 * this.viewportPadding);
+          const maxWidth =
+          scrollParentOffset.width - (this.boundaryAlign ? 0 : 2 * this.viewportPadding);
 
           if (this.pos[1] === 'justify') {
             const prop = this.axis === 'y' ? 'width' : 'height';
@@ -4034,7 +4095,7 @@
 
 
       resizeTargets() {
-        return [this.$el, this.$el.children];
+        return [this.$el, ...toArray(this.$el.children)];
       },
 
       connected() {
@@ -4351,7 +4412,7 @@
 
 
       resizeTargets() {
-        return [this.$el, this.elements];
+        return [this.$el, ...this.elements];
       },
 
       update: {
@@ -9302,7 +9363,9 @@
 
       methods: {
         reset() {
-          each(this.getCss(0), (_, prop) => css(this.$el, prop, ''));
+          for (const prop in this.getCss(0)) {
+            css(this.$el, prop, '');
+          }
         },
 
         getCss(percent) {
@@ -9315,39 +9378,39 @@
 
 
 
-    function transformFn(prop, el, stops) {
-      let unit = getUnit(stops) || { x: 'px', y: 'px', rotate: 'deg' }[prop] || '';
+    function transformFn(prop, el, steps) {
+      let unit = getUnit(steps) || { x: 'px', y: 'px', rotate: 'deg' }[prop] || '';
       let transformFn;
 
       if (prop === 'x' || prop === 'y') {
         prop = "translate" + ucfirst(prop);
-        transformFn = (stop) => toFloat(toFloat(stop).toFixed(unit === 'px' ? 0 : 6));
+        transformFn = (step) => toFloat(toFloat(step).toFixed(unit === 'px' ? 0 : 6));
       } else if (prop === 'scale') {
         unit = '';
-        transformFn = (stop) =>
-        getUnit([stop]) ? toPx(stop, 'width', el, true) / el.offsetWidth : stop;
+        transformFn = (step) =>
+        getUnit([step]) ? toPx(step, 'width', el, true) / el.offsetWidth : step;
       }
 
-      if (stops.length === 1) {
-        stops.unshift(prop === 'scale' ? 1 : 0);
+      if (steps.length === 1) {
+        steps.unshift(prop === 'scale' ? 1 : 0);
       }
 
-      stops = parseStops(stops, transformFn);
+      steps = parseSteps(steps, transformFn);
 
       return (css, percent) => {
-        css.transform += " " + prop + "(" + getValue(stops, percent) + unit + ")";
+        css.transform += " " + prop + "(" + getValue(steps, percent) + unit + ")";
       };
     }
 
-    function colorFn(prop, el, stops) {
-      if (stops.length === 1) {
-        stops.unshift(getCssValue(el, prop, ''));
+    function colorFn(prop, el, steps) {
+      if (steps.length === 1) {
+        steps.unshift(getCssValue(el, prop, ''));
       }
 
-      stops = parseStops(stops, (stop) => parseColor(el, stop));
+      steps = parseSteps(steps, (step) => parseColor(el, step));
 
       return (css, percent) => {
-        const [start, end, p] = getStop(stops, percent);
+        const [start, end, p] = getStep(steps, percent);
         const value = start.
         map((value, i) => {
           value += p * (end[i] - value);
@@ -9367,80 +9430,80 @@
       map(toFloat);
     }
 
-    function filterFn(prop, el, stops) {
-      if (stops.length === 1) {
-        stops.unshift(0);
+    function filterFn(prop, el, steps) {
+      if (steps.length === 1) {
+        steps.unshift(0);
       }
 
-      const unit = getUnit(stops) || { blur: 'px', hue: 'deg' }[prop] || '%';
+      const unit = getUnit(steps) || { blur: 'px', hue: 'deg' }[prop] || '%';
       prop = { fopacity: 'opacity', hue: 'hue-rotate' }[prop] || prop;
-      stops = parseStops(stops);
+      steps = parseSteps(steps);
 
       return (css, percent) => {
-        const value = getValue(stops, percent);
+        const value = getValue(steps, percent);
         css.filter += " " + prop + "(" + (value + unit) + ")";
       };
     }
 
-    function cssPropFn(prop, el, stops) {
-      if (stops.length === 1) {
-        stops.unshift(getCssValue(el, prop, ''));
+    function cssPropFn(prop, el, steps) {
+      if (steps.length === 1) {
+        steps.unshift(getCssValue(el, prop, ''));
       }
 
-      stops = parseStops(stops);
+      steps = parseSteps(steps);
 
       return (css, percent) => {
-        css[prop] = getValue(stops, percent);
+        css[prop] = getValue(steps, percent);
       };
     }
 
-    function strokeFn(prop, el, stops) {
-      if (stops.length === 1) {
-        stops.unshift(0);
+    function strokeFn(prop, el, steps) {
+      if (steps.length === 1) {
+        steps.unshift(0);
       }
 
-      const unit = getUnit(stops);
+      const unit = getUnit(steps);
       const length = getMaxPathLength(el);
-      stops = parseStops(stops.reverse(), (stop) => {
-        stop = toFloat(stop);
-        return unit === '%' ? stop * length / 100 : stop;
+      steps = parseSteps(steps.reverse(), (step) => {
+        step = toFloat(step);
+        return unit === '%' ? step * length / 100 : step;
       });
 
-      if (!stops.some((_ref) => {let [value] = _ref;return value;})) {
+      if (!steps.some((_ref) => {let [value] = _ref;return value;})) {
         return noop;
       }
 
       css(el, 'strokeDasharray', length);
 
       return (css, percent) => {
-        css.strokeDashoffset = getValue(stops, percent);
+        css.strokeDashoffset = getValue(steps, percent);
       };
     }
 
-    function backgroundFn(prop, el, stops) {
-      if (stops.length === 1) {
-        stops.unshift(0);
+    function backgroundFn(prop, el, steps) {
+      if (steps.length === 1) {
+        steps.unshift(0);
       }
 
       prop = prop.substr(-1);
       const attr = prop === 'y' ? 'height' : 'width';
-      stops = parseStops(stops, (stop) => toPx(stop, attr, el));
+      steps = parseSteps(steps, (step) => toPx(step, attr, el));
 
       const bgPos = getCssValue(el, "background-position-" + prop, '');
 
       return getCssValue(el, 'backgroundSize', '') === 'cover' ?
-      backgroundCoverFn(prop, el, stops, bgPos, attr) :
-      setBackgroundPosFn(prop, stops, bgPos);
+      backgroundCoverFn(prop, el, steps, bgPos, attr) :
+      setBackgroundPosFn(prop, steps, bgPos);
     }
 
-    function backgroundCoverFn(prop, el, stops, bgPos, attr) {
+    function backgroundCoverFn(prop, el, steps, bgPos, attr) {
       const dimImage = getBackgroundImageDimensions(el);
 
       if (!dimImage.width) {
         return noop;
       }
 
-      const values = stops.map((_ref2) => {let [value] = _ref2;return value;});
+      const values = steps.map((_ref2) => {let [value] = _ref2;return value;});
       const min = Math.min(...values);
       const max = Math.max(...values);
       const down = values.indexOf(min) < values.indexOf(max);
@@ -9468,7 +9531,7 @@
 
       const dim = Dimensions.cover(dimImage, dimEl);
 
-      const fn = setBackgroundPosFn(prop, stops, pos + "px");
+      const fn = setBackgroundPosFn(prop, steps, pos + "px");
       return (css, percent) => {
         fn(css, percent);
         css.backgroundSize = dim.width + "px " + dim.height + "px";
@@ -9476,9 +9539,9 @@
       };
     }
 
-    function setBackgroundPosFn(prop, stops, pos) {
+    function setBackgroundPosFn(prop, steps, pos) {
       return function (css, percent) {
-        css["background-position-" + prop] = "calc(" + pos + " + " + getValue(stops, percent) + "px)";
+        css["background-position-" + prop] = "calc(" + pos + " + " + getValue(steps, percent) + "px)";
       };
     }
 
@@ -9513,12 +9576,12 @@
 
     }
 
-    function parseStops(stops, fn) {if (fn === void 0) {fn = toFloat;}
+    function parseSteps(steps, fn) {if (fn === void 0) {fn = toFloat;}
       const result = [];
-      const { length } = stops;
+      const { length } = steps;
       let nullIndex = 0;
       for (let i = 0; i < length; i++) {
-        let [value, percent] = isString(stops[i]) ? stops[i].trim().split(' ') : [stops[i]];
+        let [value, percent] = isString(steps[i]) ? steps[i].trim().split(' ') : [steps[i]];
         value = fn(value);
         percent = percent ? toFloat(percent) / 100 : null;
 
@@ -9555,24 +9618,24 @@
       return result;
     }
 
-    function getStop(stops, percent) {
-      const index = findIndex(stops.slice(1), (_ref3) => {let [, targetPercent] = _ref3;return percent <= targetPercent;}) + 1;
+    function getStep(steps, percent) {
+      const index = findIndex(steps.slice(1), (_ref3) => {let [, targetPercent] = _ref3;return percent <= targetPercent;}) + 1;
       return [
-      stops[index - 1][0],
-      stops[index][0],
-      (percent - stops[index - 1][1]) / (stops[index][1] - stops[index - 1][1])];
+      steps[index - 1][0],
+      steps[index][0],
+      (percent - steps[index - 1][1]) / (steps[index][1] - steps[index - 1][1])];
 
     }
 
-    function getValue(stops, percent) {
-      const [start, end, p] = getStop(stops, percent);
+    function getValue(steps, percent) {
+      const [start, end, p] = getStep(steps, percent);
       return isNumber(start) ? start + Math.abs(start - end) * p * (start < end ? 1 : -1) : +end;
     }
 
-    const unitRe = /^-?\d+([^\s]*)/;
-    function getUnit(stops, defaultUnit) {
-      for (const stop of stops) {
-        const match = stop.match == null ? void 0 : stop.match(unitRe);
+    const unitRe = /^-?\d+(\S*)/;
+    function getUnit(steps, defaultUnit) {
+      for (const step of steps) {
+        const match = step.match == null ? void 0 : step.match(unitRe);
         if (match) {
           return match[1];
         }