uikit 3.13.8-dev.2fb6bed58 → 3.13.8-dev.4bb05e5fe

package/dist/js/uikit.js

@@ -1,4 +1,4 @@
-/*! UIkit 3.13.8-dev.2fb6bed58 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
+/*! UIkit 3.13.8-dev.4bb05e5fe | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
 
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -1740,11 +1740,11 @@
       }
     }
 
-    const stateKey$1 = '_ukPlayer';
+    const stateKey = '_ukPlayer';
     let counter = 0;
     function enableApi(el) {
-      if (el[stateKey$1]) {
-        return el[stateKey$1];
+      if (el[stateKey]) {
+        return el[stateKey];
       }
 
       const youtube = isYoutube(el);
@@ -1753,7 +1753,7 @@
       const id = ++counter;
       let poller;
 
-      return el[stateKey$1] = new Promise((resolve) => {
+      return el[stateKey] = new Promise((resolve) => {
         youtube &&
         once(el, 'load', () => {
           const listener = () => post(el, { event: 'listening', id });
@@ -2006,7 +2006,10 @@
         const willFlip =
         !intersectLine(position, targetDim, i) && intersectLine(position, targetDim, 1 - i);
 
-        viewport = getIntersectionArea(...viewports, willFlip ? null : boundary);
+        viewport = getIntersectionArea(
+        ...viewports,
+        willFlip || position[prop] > offset(boundary)[prop] ? null : boundary);
+
         const isInStartBoundary = position[start] >= viewport[start];
         const isInEndBoundary = position[end] <= viewport[end];
 
@@ -2408,7 +2411,7 @@
         const {
           $options: { computed } } =
         this;
-        const values = { ...this._computed };
+        const values = { ...(initial ? {} : this._computed) };
         this._computed = {};
 
         for (const key in computed) {
@@ -2888,7 +2891,7 @@
     UIkit.data = '__uikit__';
     UIkit.prefix = 'uk-';
     UIkit.options = {};
-    UIkit.version = '3.13.8-dev.2fb6bed58';
+    UIkit.version = '3.13.8-dev.4bb05e5fe';
 
     globalAPI(UIkit);
     hooksAPI(UIkit);
@@ -3215,7 +3218,7 @@
       computed: {
         items: {
           get(_ref, $el) {let { targets } = _ref;
-            return $$(targets, $el);
+            return $$(targets, $el).filter((el) => $(this.content, el));
           },
 
           watch(items, prev) {
@@ -3502,21 +3505,19 @@
 
       connected() {
         this.pos = this.$props.pos.split('-').concat('center').slice(0, 2);
-        this.dir = this.pos[0];
-        this.align = this.pos[1];
+        this.axis = includes(['top', 'bottom'], this.pos[0]) ? 'y' : 'x';
       },
 
       methods: {
         positionAt(element, target, boundary) {
           const [dir, align] = this.pos;
-          const axis = this.getAxis(dir);
 
           let { offset: offset$1 } = this;
           if (!isNumeric(offset$1)) {
             const node = $(offset$1);
             offset$1 = node ?
-            offset(node)[axis === 'x' ? 'left' : 'top'] -
-            offset(target)[axis === 'x' ? 'right' : 'bottom'] :
+            offset(node)[this.axis === 'x' ? 'left' : 'top'] -
+            offset(target)[this.axis === 'x' ? 'right' : 'bottom'] :
             0;
           }
           offset$1 = toPx(offset$1) + toPx(getCssVar('position-offset', element));
@@ -3527,7 +3528,7 @@
             target: [dir, align] };
 
 
-          if (axis === 'y') {
+          if (this.axis === 'y') {
             for (const prop in attach) {
               attach[prop] = attach[prop].reverse();
             }
@@ -3540,47 +3541,8 @@
             boundary,
             flip: this.flip });
 
-
-          [this.dir, this.align] = getAlignment(element, target, this.pos);
-        },
-
-        getAxis(dir) {if (dir === void 0) {dir = this.dir;}
-          return includes(['top', 'bottom'], dir) ? 'y' : 'x';
         } } };
 
-
-
-    function getAlignment(el, target, _ref) {let [dir, align] = _ref;
-      const elOffset = offset(el);
-      const targetOffset = offset(target);
-      const properties = [
-      ['left', 'right'],
-      ['top', 'bottom']];
-
-
-      for (const props of properties) {
-        if (elOffset[props[0]] >= targetOffset[props[1]]) {
-          dir = props[1];
-          break;
-        }
-        if (elOffset[props[1]] <= targetOffset[props[0]]) {
-          dir = props[0];
-          break;
-        }
-      }
-
-      const props = includes(properties[0], dir) ? properties[1] : properties[0];
-      if (elOffset[props[0]] === targetOffset[props[0]]) {
-        align = props[0];
-      } else if (elOffset[props[1]] === targetOffset[props[1]]) {
-        align = props[1];
-      } else {
-        align = 'center';
-      }
-
-      return [dir, align];
-    }
-
     let active$1;
 
     var drop = {
@@ -3915,17 +3877,18 @@
           const boundaryOffset = offset(boundary);
           const targetOffset = offset(this.target);
           const alignTo = this.boundaryAlign ? boundaryOffset : targetOffset;
+          const prop = this.axis === 'y' ? 'width' : 'height';
+
+          css(this.$el, "max-" + prop, '');
 
           if (this.pos[1] === 'justify') {
-            const prop = this.getAxis() === 'y' ? 'width' : 'height';
             css(this.$el, prop, alignTo[prop]);
-          } else if (
-          this.$el.offsetWidth >
-          Math.max(boundaryOffset.right - alignTo.left, alignTo.right - boundaryOffset.left))
-          {
+          } else if (this.$el.offsetWidth > boundaryOffset.width) {
             addClass(this.$el, this.clsDrop + "-stack");
           }
 
+          css(this.$el, "max-" + prop, boundaryOffset[prop]);
+
           this.positionAt(this.$el, this.boundaryAlign ? boundary : this.target, boundary);
         } } };
 
@@ -4325,8 +4288,7 @@
 
       data: {
         target: '> *',
-        row: true,
-        forceHeight: true },
+        row: true },
 
 
       computed: {
@@ -4367,22 +4329,14 @@
         return { heights: [''], elements };
       }
 
+      css(elements, 'minHeight', '');
       let heights = elements.map(getHeight);
-      let max = Math.max(...heights);
-      const hasMinHeight = elements.some((el) => el.style.minHeight);
-      const hasShrunk = elements.some((el, i) => !el.style.minHeight && heights[i] < max);
-
-      if (hasMinHeight && hasShrunk) {
-        css(elements, 'minHeight', '');
-        heights = elements.map(getHeight);
-        max = Math.max(...heights);
-      }
-
-      heights = elements.map((el, i) =>
-      heights[i] === max && toFloat(el.style.minHeight).toFixed(2) !== max.toFixed(2) ? '' : max);
+      const max = Math.max(...heights);
 
+      return {
+        heights: elements.map((el, i) => heights[i].toFixed(2) === max.toFixed(2) ? '' : max),
+        elements };
 
-      return { heights, elements };
     }
 
     function getHeight(element) {
@@ -5039,16 +4993,19 @@
 
       connected() {
         const media = toMedia(this.media);
-        this.mediaObj = window.matchMedia(media);
-        const handler = () => {
-          this.matchMedia = this.mediaObj.matches;
-          trigger(this.$el, createEvent('mediachange', false, true, [this.mediaObj]));
-        };
-        this.offMediaObj = on(this.mediaObj, 'change', () => {
+        this.matchMedia = true;
+        if (media) {
+          this.mediaObj = window.matchMedia(media);
+          const handler = () => {
+            this.matchMedia = this.mediaObj.matches;
+            trigger(this.$el, createEvent('mediachange', false, true, [this.mediaObj]));
+          };
+          this.offMediaObj = on(this.mediaObj, 'change', () => {
+            handler();
+            this.$emit('resize');
+          });
           handler();
-          this.$emit('resize');
-        });
-        handler();
+        }
       },
 
       disconnected() {var _this$offMediaObj;
@@ -5549,8 +5506,6 @@
         dropbar: false,
         dropbarAnchor: false,
         duration: 200,
-        forceHeight: true,
-        selMinHeight: navItem,
         container: false },
 
 
@@ -5787,7 +5742,7 @@
           return this.dropbar;
         },
 
-        handler(_, _ref10) {let { $el, dir } = _ref10;
+        handler(_, _ref10) {let { $el, pos: [dir] = [] } = _ref10;
           if (!hasClass($el, this.clsDrop)) {
             return;
           }
@@ -6332,7 +6287,6 @@
       return document.getElementById(decodeURIComponent(el.hash).substring(1));
     }
 
-    const stateKey = '_ukScrollspy';
     var scrollspy = {
       mixins: [Scroll],
 
@@ -6365,43 +6319,64 @@
             return target ? $$(target, $el) : [$el];
           },
 
-          watch(elements) {
+          watch(elements, prev) {
             if (this.hidden) {
               css(filter$1(elements, ":not(." + this.inViewClass + ")"), 'visibility', 'hidden');
             }
+
+            if (prev) {
+              this.$reset();
+            }
           },
 
           immediate: true } },
 
 
 
-      disconnected() {
-        for (const el of this.elements) {var _el$stateKey;
-          removeClass(el, this.inViewClass, ((_el$stateKey = el[stateKey]) == null ? void 0 : _el$stateKey.cls) || '');
-          delete el[stateKey];
-        }
-      },
+      connected() {
+        this._data.elements = new Map();
+        this.registerObserver(
+        observeIntersection(
+        this.elements,
+        (records) => {
+          const elements = this._data.elements;
+          for (const { target: el, isIntersecting } of records) {
+            if (!elements.has(el)) {
+              elements.set(el, {
+                cls: data(el, 'uk-scrollspy-class') || this.cls });
 
-      update: [
-      {
-        read() {
-          for (const el of this.elements) {
-            if (!el[stateKey]) {
-              el[stateKey] = { cls: data(el, 'uk-scrollspy-class') || this.cls };
             }
 
-            if (!this.repeat && el[stateKey].show) {
+            const state = elements.get(el);
+            if (!this.repeat && state.show) {
               continue;
             }
 
-            el[stateKey].show = isInView(el, this.offsetTop, this.offsetLeft);
+            state.show = isIntersecting;
           }
+
+          this.$emit();
         },
+        {
+          rootMargin: toPx(this.offsetTop, 'height') - 1 + "px " + (
+          toPx(this.offsetLeft, 'width') - 1) + "px" },
 
-        write(data) {
-          for (const el of this.elements) {
-            const state = el[stateKey];
 
+        false));
+
+
+      },
+
+      disconnected() {
+        for (const [el, state] of this._data.elements.entries()) {
+          removeClass(el, this.inViewClass, (state == null ? void 0 : state.cls) || '');
+        }
+      },
+
+      update: [
+      {
+        write(data) {
+          for (const [el, state] of data.elements.entries()) {
             if (state.show && !state.inview && !state.queued) {
               state.queued = true;
 
@@ -6418,15 +6393,13 @@
               this.toggle(el, false);
             }
           }
-        },
-
-        events: ['scroll', 'resize'] }],
+        } }],
 
 
 
       methods: {
         toggle(el, inview) {
-          const state = el[stateKey];
+          const state = this._data.elements.get(el);
 
           state.off == null ? void 0 : state.off();
 
@@ -6649,13 +6622,13 @@
             return false;
           }
 
-          const hide = this.isActive && types.has('resize');
+          const hide = this.active && types.has('resize');
           if (hide) {
             css(this.selTarget, 'transition', '0s');
             this.hide();
           }
 
-          if (!this.isActive) {
+          if (!this.active) {
             height$1 = offset(this.$el).height;
             margin = css(this.$el, 'margin');
           }
@@ -7177,7 +7150,7 @@
           }
 
           // Skip if state does not change e.g. hover + focus received
-          if (this._showState && show === (expanded !== this._showState)) {
+          if (this._showState && show && expanded !== this._showState) {
             // Ensure reset if state has changed through click
             if (!show) {
               this._showState = null;
@@ -8850,7 +8823,10 @@
 
 
           // Image
-          if (type === 'image' || src.match(/\.(avif|jpe?g|a?png|gif|svg|webp)($|\?)/i)) {
+          if (
+          type === 'image' ||
+          src.match(/\.(avif|jpe?g|jfif|a?png|gif|svg|webp)($|\?)/i))
+          {
             try {
               const { width, height } = await getImage(src, attrs.srcset, attrs.size);
               this.setItem(item, createEl('img', { src, width, height, alt, ...attrs }));
@@ -10769,10 +10745,12 @@
 
             this.positionAt(this.tooltip, this.$el);
 
+            const [dir, align] = getAlignment(this.tooltip, this.$el, this.pos);
+
             this.origin =
-            this.getAxis() === 'y' ?
-            flipPosition(this.dir) + "-" + this.align :
-            this.align + "-" + flipPosition(this.dir);
+            this.axis === 'y' ?
+            flipPosition(dir) + "-" + align :
+            align + "-" + flipPosition(dir);
           });
 
           this.toggleElement(this.tooltip, true);
@@ -10809,6 +10787,37 @@
       }
     }
 
+    function getAlignment(el, target, _ref) {let [dir, align] = _ref;
+      const elOffset = offset(el);
+      const targetOffset = offset(target);
+      const properties = [
+      ['left', 'right'],
+      ['top', 'bottom']];
+
+
+      for (const props of properties) {
+        if (elOffset[props[0]] >= targetOffset[props[1]]) {
+          dir = props[1];
+          break;
+        }
+        if (elOffset[props[1]] <= targetOffset[props[0]]) {
+          dir = props[0];
+          break;
+        }
+      }
+
+      const props = includes(properties[0], dir) ? properties[1] : properties[0];
+      if (elOffset[props[0]] === targetOffset[props[0]]) {
+        align = props[0];
+      } else if (elOffset[props[1]] === targetOffset[props[1]]) {
+        align = props[1];
+      } else {
+        align = 'center';
+      }
+
+      return [dir, align];
+    }
+
     var upload = {
       props: {
         allow: String,