uikit 3.15.10 → 3.15.11-dev.536b75ef2

package/dist/js/uikit.js

@@ -1,4 +1,4 @@
-/*! UIkit 3.15.10 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
+/*! UIkit 3.15.11-dev.536b75ef2 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
 
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -1953,7 +1953,7 @@
 
       let offsetPosition = position;
       for (const [i, [prop,, start, end]] of Object.entries(dirs)) {
-        const viewport = getViewport$1(target[i], viewportOffset, boundary, i);
+        const viewport = getViewport$2(element, target[i], viewportOffset, boundary, i);
 
         if (isWithin(position, viewport, i)) {
           continue;
@@ -1973,7 +1973,7 @@
 
           offsetBy = flip(element, target, options, i)[start] - position[start];
 
-          const scrollArea = getScrollArea(target[i], viewportOffset, i);
+          const scrollArea = getScrollArea(element, target[i], viewportOffset, i);
 
           if (!isWithin(applyOffset(position, offsetBy, i), scrollArea, i)) {
             if (isWithin(position, scrollArea, i)) {
@@ -2053,8 +2053,8 @@
       return attach === 'center' ? dim / 2 : attach === end ? dim : 0;
     }
 
-    function getViewport$1(element, viewportOffset, boundary, i) {
-      let viewport = getIntersectionArea(...scrollParents(element).map(offsetViewport));
+    function getViewport$2(element, target, viewportOffset, boundary, i) {
+      let viewport = getIntersectionArea(...commonScrollParents(element, target).map(offsetViewport));
 
       if (viewportOffset) {
         viewport[dirs[i][2]] += viewportOffset;
@@ -2071,15 +2071,19 @@
       return viewport;
     }
 
-    function getScrollArea(element, viewportOffset, i) {
+    function getScrollArea(element, target, viewportOffset, i) {
       const [prop,, start, end] = dirs[i];
-      const [scrollElement] = scrollParents(element);
+      const [scrollElement] = commonScrollParents(element, target);
       const viewport = offsetViewport(scrollElement);
       viewport[start] -= scrollElement["scroll" + ucfirst(start)] - viewportOffset;
       viewport[end] = viewport[start] + scrollElement["scroll" + ucfirst(prop)] - viewportOffset;
       return viewport;
     }
 
+    function commonScrollParents(element, target) {
+      return scrollParents(target).filter((parent) => within(element, parent));
+    }
+
     function getIntersectionArea() {
       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) {
@@ -2571,11 +2575,7 @@
       };
 
       UIkit.prototype._initObservers = function () {
-        this._observers = [initPropsObserver(this)];
-
-        if (this.$options.computed) {
-          this.registerObserver(initChildListObserver(this));
-        }
+        this._observers = [initPropsObserver(this), initChildListObserver(this)];
       };
 
       UIkit.prototype.registerObserver = function () {
@@ -2728,7 +2728,18 @@
     }
 
     function initChildListObserver(component) {
-      const { el } = component.$options;
+      let { el, computed } = component.$options;
+
+      if (!computed) {
+        return;
+      }
+
+      for (const key in computed) {
+        if (computed[key].document) {
+          el = el.ownerDocument;
+          break;
+        }
+      }
 
       const observer = new MutationObserver(() => component._callWatches());
       observer.observe(el, {
@@ -2937,7 +2948,7 @@
     UIkit.data = '__uikit__';
     UIkit.prefix = 'uk-';
     UIkit.options = {};
-    UIkit.version = '3.15.10';
+    UIkit.version = '3.15.11-dev.536b75ef2';
 
     globalAPI(UIkit);
     hooksAPI(UIkit);
@@ -4507,7 +4518,7 @@
           // Ensure none positioned element does not generate scrollbars
           this.$el.hidden = true;
 
-          const viewports = this.target.map((target) => offsetViewport(scrollParents(target)[0]));
+          const viewports = this.target.map((target) => getViewport$1(this.$el, target));
           const viewportOffset = this.getViewportOffset(this.$el);
 
           const dirs = [
@@ -4573,6 +4584,10 @@
       return result;
     }
 
+    function getViewport$1(el, target) {
+      return offsetViewport(scrollParents(target).find((parent) => within(el, parent)));
+    }
+
     var formCustom = {
       mixins: [Class],
 
@@ -5132,13 +5147,12 @@
         ratio: Number,
         class: String,
         strokeAnimation: Boolean,
-        focusable: Boolean, // IE 11
         attributes: 'list' },
 
 
       data: {
         ratio: 1,
-        include: ['style', 'class', 'focusable'],
+        include: ['style', 'class'],
         class: '',
         strokeAnimation: false },
 
@@ -5317,14 +5331,7 @@
     }
 
     function equals(el, other) {
-      return isTag(el, 'svg') && isTag(other, 'svg') && innerHTML(el) === innerHTML(other);
-    }
-
-    function innerHTML(el) {
-      return (
-      el.innerHTML ||
-      new XMLSerializer().serializeToString(el).replace(/<svg.*?>(.*?)<\/svg>/g, '$1')).
-      replace(/\s/g, '');
+      return isTag(el, 'svg') && isTag(other, 'svg') && el.innerHTML === other.innerHTML;
     }
 
     var closeIcon = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" xmlns=\"http://www.w3.org/2000/svg\"><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" x1=\"1\" y1=\"1\" x2=\"13\" y2=\"13\"/><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" x1=\"13\" y1=\"1\" x2=\"1\" y2=\"13\"/></svg>";
@@ -5396,9 +5403,7 @@
 
       props: ['icon'],
 
-      data: {
-        include: ['focusable'] },
-
+      data: { include: [] },
 
       isIcon: true,
 
@@ -6767,7 +6772,8 @@
 
           watch(elements, prev) {
             if (this.hidden) {
-              css(filter$1(elements, ":not(." + this.inViewClass + ")"), 'visibility', 'hidden');
+              // use `opacity:0` instead of `visibility:hidden` to make content focusable with keyboard
+              css(filter$1(elements, ":not(." + this.inViewClass + ")"), 'opacity', 0);
             }
 
             if (!isEqual(elements, prev)) {
@@ -6853,7 +6859,7 @@
 
           state.off == null ? void 0 : state.off();
 
-          css(el, 'visibility', !inview && this.hidden ? 'hidden' : '');
+          css(el, 'opacity', !inview && this.hidden ? 0 : '');
 
           toggleClass(el, this.inViewClass, inview);
           toggleClass(el, state.cls);
@@ -7385,27 +7391,27 @@
             return queryAll(connect, $el);
           },
 
-          watch(connects) {var _this$_observer;
+          watch(connects) {
             if (this.swiping) {
               css(connects, 'touchAction', 'pan-y pinch-zoom');
             }
+          },
+
+          document: true,
+          immediate: true },
 
-            (_this$_observer = this._observer) == null ? void 0 : _this$_observer.disconnect();
-            this.registerObserver(
-            this._observer = observeMutation(
-            connects,
-            (records) => {
-              const index = this.index();
-              for (const { target: el } of records) {
-                children(el).forEach((child, i) =>
-                toggleClass(child, this.cls, i === index));
-
-                this.lazyload(this.$el, children(el));
-              }
-            },
-            { childList: true }));
 
+        connectChildren: {
+          get() {
+            return this.connects.map((el) => children(el)).flat();
+          },
 
+          watch() {
+            const index = this.index();
+            for (const el of this.connects) {
+              children(el).forEach((child, i) => toggleClass(child, this.cls, i === index));
+              this.lazyload(this.$el, children(el));
+            }
           },
 
           immediate: true },
@@ -7437,11 +7443,6 @@
         } },
 
 
-      connected() {
-        // check for connects
-        ready(() => this.$emit());
-      },
-
       events: [
       {
         name: 'click',
@@ -7574,6 +7575,7 @@
             this.lazyload(this.$el, this.target);
           },
 
+          document: true,
           immediate: true } },
 
 
@@ -7582,9 +7584,6 @@
         if (!includes(this.mode, 'media') && !isFocusable(this.$el)) {
           attr(this.$el, 'tabindex', '0');
         }
-
-        // check for target
-        ready(() => this.$emit());
       },
 
       events: [
@@ -9513,7 +9512,7 @@
 
           this.panel = this.panel || this.$create('lightboxPanel', { ...this.$props, items });
 
-          on(this.panel.$el, 'hidden', () => this.panel = false);
+          on(this.panel.$el, 'hidden', () => this.panel = null);
 
           return this.panel.show(index);
         },
@@ -11246,7 +11245,10 @@
 
       disconnected() {
         this.hide();
-        attr(this.$el, 'title', this._hasTitle ? this.title : null);
+
+        if (!attr(this.$el, 'title')) {
+          attr(this.$el, 'title', this._hasTitle ? this.title : null);
+        }
       },
 
       methods: {