uikit 3.12.3-dev.cbf065cc2 → 3.13.1-dev.4a671f35d

package/dist/js/uikit.js

@@ -1,4 +1,4 @@
-/*! UIkit 3.12.3-dev.cbf065cc2 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
+/*! UIkit 3.13.1-dev.4a671f35d | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
 
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -456,40 +456,41 @@
     }
 
     const contextSanitizeRe = /([!>+~-])(?=\s+[!>+~-]|\s*$)/g;
+    const sanatize = memoize((selector) => selector.replace(contextSanitizeRe, '$1 *'));
 
     function _query(selector, context, queryFn) {if (context === void 0) {context = document;}
       if (!selector || !isString(selector)) {
         return selector;
       }
 
-      selector = selector.replace(contextSanitizeRe, '$1 *');
+      selector = sanatize(selector);
 
       if (isContextSelector(selector)) {
-        selector = splitSelector(selector).
-        map((selector) => {
+        const split = splitSelector(selector);
+        selector = '';
+        for (let sel of split) {
           let ctx = context;
 
-          if (selector[0] === '!') {
-            const selectors = selector.substr(1).trim().split(' ');
+          if (sel[0] === '!') {
+            const selectors = sel.substr(1).trim().split(' ');
             ctx = closest(parent(context), selectors[0]);
-            selector = selectors.slice(1).join(' ').trim();
+            sel = selectors.slice(1).join(' ').trim();
+            if (!sel.length && split.length === 1) {
+              return ctx;
+            }
           }
 
-          if (selector[0] === '-') {
-            const selectors = selector.substr(1).trim().split(' ');
+          if (sel[0] === '-') {
+            const selectors = sel.substr(1).trim().split(' ');
             const prev = (ctx || context).previousElementSibling;
-            ctx = matches(prev, selector.substr(1)) ? prev : null;
-            selector = selectors.slice(1).join(' ');
+            ctx = matches(prev, sel.substr(1)) ? prev : null;
+            sel = selectors.slice(1).join(' ');
           }
 
-          if (!ctx) {
-            return null;
+          if (ctx) {
+            selector += "" + (selector ? ',' : '') + domPath(ctx) + " " + sel;
           }
-
-          return domPath(ctx) + " " + selector;
-        }).
-        filter(Boolean).
-        join(',');
+        }
 
         context = document;
       }
@@ -2893,7 +2894,7 @@
     UIkit.data = '__uikit__';
     UIkit.prefix = 'uk-';
     UIkit.options = {};
-    UIkit.version = '3.12.3-dev.cbf065cc2';
+    UIkit.version = '3.13.1-dev.4a671f35d';
 
     globalAPI(UIkit);
     hooksAPI(UIkit);
@@ -3308,9 +3309,11 @@
 
               if (show) {
                 const toggle = $(this.$props.toggle, el);
-                if (!isInView(toggle)) {
-                  scrollIntoView(toggle, { offset: this.offset });
-                }
+                fastdom.read(() => {
+                  if (!isInView(toggle)) {
+                    scrollIntoView(toggle, { offset: this.offset });
+                  }
+                });
               }
             });
           }
@@ -3407,14 +3410,12 @@
         } } };
 
     var Resize = {
-      computed: {
-        resizeTargets() {
-          return this.$el;
-        } },
+      connected() {var _this$$options$resize;
+        this.registerObserver(
+        observeResize(((_this$$options$resize = this.$options.resizeTargets) == null ? void 0 : _this$$options$resize.call(this)) || this.$el, () =>
+        this.$emit('resize')));
 
 
-      connected() {
-        this.registerObserver(observeResize(this.resizeTargets, () => this.$emit('resize')));
       } };
 
     var cover = {
@@ -3573,25 +3574,12 @@
         container: false },
 
 
-      computed: {
-        boundary(_ref, $el) {let { boundary } = _ref;
-          return boundary === true ? window : query(boundary, $el);
-        },
-
-        clsDrop(_ref2) {let { clsDrop } = _ref2;
-          return clsDrop || "uk-" + this.$options.name;
-        },
-
-        clsPos() {
-          return this.clsDrop;
-        } },
-
-
       created() {
         this.tracker = new MouseTracker();
       },
 
       connected() {
+        this.clsPos = this.clsDrop = this.$props.clsDrop || "uk-" + this.$options.name;
         addClass(this.$el, this.clsDrop);
 
         if (this.toggle && !this.target) {
@@ -3631,7 +3619,7 @@
           return 'a[href^="#"]';
         },
 
-        handler(_ref3) {let { defaultPrevented, current: { hash } } = _ref3;
+        handler(_ref) {let { defaultPrevented, current: { hash } } = _ref;
           if (!defaultPrevented && hash && !within(hash, this.$el)) {
             this.hide(false);
           }
@@ -3743,12 +3731,12 @@
           on(
           document,
           pointerDown,
-          (_ref4) => {let { target } = _ref4;return (
+          (_ref2) => {let { target } = _ref2;return (
               !within(target, this.$el) &&
               once(
               document,
               pointerUp + " " + pointerCancel + " scroll",
-              (_ref5) => {let { defaultPrevented, type, target: newTarget } = _ref5;
+              (_ref3) => {let { defaultPrevented, type, target: newTarget } = _ref3;
                 if (
                 !defaultPrevented &&
                 type === pointerUp &&
@@ -3787,7 +3775,7 @@
       {
         name: 'hide',
 
-        handler(_ref6) {let { target } = _ref6;
+        handler(_ref4) {let { target } = _ref4;
           if (this.$el !== target) {
             active$1 =
             active$1 === null && within(target, this.$el) && this.isToggled() ?
@@ -3880,28 +3868,28 @@
         },
 
         position() {
+          const boundary = this.boundary === true ? window : query(this.boundary, this.$el);
           removeClass(this.$el, this.clsDrop + "-stack");
           toggleClass(this.$el, this.clsDrop + "-boundary", this.boundaryAlign);
 
-          const boundary = offset(this.boundary);
-          const alignTo = this.boundaryAlign ? boundary : offset(this.target);
+          const boundaryOffset = offset(boundary);
+          const alignTo = this.boundaryAlign ? boundaryOffset : offset(this.target);
 
           if (this.align === 'justify') {
             const prop = this.getAxis() === 'y' ? 'width' : 'height';
             css(this.$el, prop, alignTo[prop]);
           } else if (
-          this.boundary &&
+          boundary &&
           this.$el.offsetWidth >
-          Math.max(boundary.right - alignTo.left, alignTo.right - boundary.left))
+          Math.max(
+          boundaryOffset.right - alignTo.left,
+          alignTo.right - boundaryOffset.left))
+
           {
             addClass(this.$el, this.clsDrop + "-stack");
           }
 
-          this.positionAt(
-          this.$el,
-          this.boundaryAlign ? this.boundary : this.target,
-          this.boundary);
-
+          this.positionAt(this.$el, this.boundaryAlign ? boundary : this.target, boundary);
         } } };
 
 
@@ -3938,7 +3926,7 @@
           return (
             target && (
             target === true && parent(this.input) === $el && this.input.nextElementSibling ||
-            query(target, $el)));
+            $(target, $el)));
 
         } },
 
@@ -3985,28 +3973,9 @@
           this.$emit();
         } }] };
 
-    // Deprecated
-    var gif = {
-      connected() {
-        this.registerObserver(observeIntersection(this.$el, () => this.$emit()));
-      },
-
-      update: {
-        read(data) {
-          const inview = isInView(this.$el);
-
-          if (!inview || data.isInView === inview) {
-            return false;
-          }
-
-          data.isInView = inview;
-        },
-
-        write() {
-          this.$el.src = '' + this.$el.src; // force self-assign
-        } } };
-
     var Margin = {
+      mixins: [Resize],
+
       props: {
         margin: String,
         firstColumn: Boolean },
@@ -4017,14 +3986,16 @@
         firstColumn: 'uk-first-column' },
 
 
+      resizeTargets() {
+        return this.$el.children;
+      },
+
       connected() {
         this.registerObserver(
         observeMutation(this.$el, () => this.$reset(), {
           childList: true }));
 
 
-
-        this.registerObserver(observeResize(this.$el.children, () => this.$emit('resize')));
       },
 
       update: {
@@ -4242,7 +4213,7 @@
 
       {
         read() {
-          if (positionedAbsolute(this.$el)) {
+          if (this.parallax && positionedAbsolute(this.$el)) {
             return false;
           }
 
@@ -4320,21 +4291,19 @@
 
 
       computed: {
-        elements(_ref, $el) {let { target } = _ref;
-          return $$(target, $el);
-        },
-
-        resizeTargets() {
-          this.$el.children;
-        } },
+        elements: {
+          get(_ref, $el) {let { target } = _ref;
+            return $$(target, $el);
+          },
 
+          watch() {
+            this.$reset();
+          } } },
 
-      connected() {
-        this.registerObserver(
-        observeMutation(this.$el, () => this.$reset(), {
-          childList: true }));
 
 
+      resizeTargets() {
+        return this.elements;
       },
 
       update: {
@@ -4410,12 +4379,10 @@
         minHeight: 0 },
 
 
-      computed: {
-        resizeTargets() {
-          // check for offsetTop change
-          return [this.$el, document.documentElement];
-        } },
-
+      resizeTargets() {
+        // check for offsetTop change
+        return [this.$el, document.documentElement];
+      },
 
       update: {
         read(_ref) {let { minHeight: prev } = _ref;
@@ -4775,37 +4742,30 @@
 
       beforeConnect() {
         addClass(this.$el, 'uk-slidenav');
-      },
-
-      computed: {
-        icon(_ref, $el) {let { icon } = _ref;
-          return hasClass($el, 'uk-slidenav-large') ? icon + "-large" : icon;
-        } } };
-
+        const icon = this.$props.icon;
+        this.icon = hasClass(this.$el, 'uk-slidenav-large') ? icon + "-large" : icon;
+      } };
 
 
     const Search = {
       extends: IconComponent,
 
-      computed: {
-        icon(_ref2, $el) {let { icon } = _ref2;
-          return hasClass($el, 'uk-search-icon') && parents($el, '.uk-search-large').length ?
-          'search-large' :
-          parents($el, '.uk-search-navbar').length ?
-          'search-navbar' :
-          icon;
-        } } };
-
+      beforeConnect() {
+        this.icon =
+        hasClass(this.$el, 'uk-search-icon') && parents(this.$el, '.uk-search-large').length ?
+        'search-large' :
+        parents(this.$el, '.uk-search-navbar').length ?
+        'search-navbar' :
+        this.$props.icon;
+      } };
 
 
     const Close = {
       extends: IconComponent,
 
-      computed: {
-        icon() {
-          return "close-" + (hasClass(this.$el, 'uk-close-large') ? 'large' : 'icon');
-        } } };
-
+      beforeConnect() {
+        this.icon = "close-" + (hasClass(this.$el, 'uk-close-large') ? 'large' : 'icon');
+      } };
 
 
     const Spinner = {
@@ -4882,29 +4842,19 @@
         loading: 'lazy' },
 
 
-      computed: {
-        target: {
-          get(_ref) {let { target } = _ref;
-            return [this.$el, ...queryAll(target, this.$el)];
-          },
-
-          watch() {
-            this.$reset();
-          } } },
-
-
-
       connected() {
         if (this.loading !== 'lazy') {
           this.load();
           return;
         }
 
+        const target = [this.$el, ...queryAll(this.$props.target, this.$el)];
+
         if (nativeLazyLoad && isImg(this.$el)) {
           this.$el.loading = 'lazy';
           setSrcAttrs(this.$el);
 
-          if (this.target.length === 1) {
+          if (target.length === 1) {
             return;
           }
         }
@@ -4913,7 +4863,7 @@
 
         this.registerObserver(
         observeIntersection(
-        this.target,
+        target,
         (entries, observer) => {
           this.load();
           observer.disconnect();
@@ -5102,17 +5052,13 @@
         media: false },
 
 
-      computed: {
-        matchMedia() {var _this$mediaObj;
-          return (_this$mediaObj = this.mediaObj) == null ? void 0 : _this$mediaObj.matches;
-        } },
-
-
       connected() {
         const media = toMedia(this.media);
         this.mediaObj = window.matchMedia(media);
-        const handler = () =>
-        trigger(this.$el, createEvent('mediachange', false, true, [this.mediaObj]));
+        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');
@@ -6305,15 +6251,11 @@
 
         content(_ref2, $el) {let { selContent } = _ref2;
           return closest($el, selContent);
-        },
-
-        resizeTargets() {
-          return [this.container, this.content];
         } },
 
 
-      connected() {
-        css(this.$el, 'minHeight', this.minHeight);
+      resizeTargets() {
+        return [this.container, this.content];
       },
 
       update: {
@@ -6331,14 +6273,20 @@
         },
 
         write(_ref3) {let { max } = _ref3;
-          css(this.$el, 'maxHeight', max);
+          css(this.$el, { minHeight: this.minHeight, maxHeight: max });
         },
 
         events: ['resize'] } };
 
     var responsive = {
+      mixin: [Resize],
+
       props: ['width', 'height'],
 
+      resizeTargets() {
+        return [this.$el, parent(this.$el)];
+      },
+
       connected() {
         addClass(this.$el, 'uk-responsive-width');
       },
@@ -6459,6 +6407,10 @@
               el[stateKey] = { cls: data(el, 'uk-scrollspy-class') || this.cls };
             }
 
+            if (!this.repeat && el[stateKey].show) {
+              continue;
+            }
+
             el[stateKey].show = isInView(el, this.offsetTop, this.offsetLeft);
           }
         },
@@ -6623,7 +6575,6 @@
         clsFixed: String,
         clsBelow: String,
         selTarget: String,
-        widthElement: Boolean,
         showOnUp: Boolean,
         targetOffset: Number },
 
@@ -6639,7 +6590,6 @@
         clsFixed: 'uk-sticky-fixed',
         clsBelow: 'uk-sticky-below',
         selTarget: '',
-        widthElement: false,
         showOnUp: false,
         targetOffset: false },
 
@@ -6647,39 +6597,19 @@
       computed: {
         selTarget(_ref, $el) {let { selTarget } = _ref;
           return selTarget && $(selTarget, $el) || $el;
-        },
-
-        widthElement(_ref2, $el) {let { widthElement } = _ref2;
-          return query(widthElement, $el) || this.placeholder;
-        },
-
-        resizeTargets() {
-          return document.documentElement;
-        },
-
-        isActive: {
-          get() {
-            return hasClass(this.selTarget, this.clsActive);
-          },
-
-          set(value) {
-            if (value && !this.isActive) {
-              replaceClass(this.selTarget, this.clsInactive, this.clsActive);
-              trigger(this.$el, 'active');
-            } else if (!value && !hasClass(this.selTarget, this.clsInactive)) {
-              replaceClass(this.selTarget, this.clsActive, this.clsInactive);
-              trigger(this.$el, 'inactive');
-            }
-          } } },
+        } },
 
 
+      resizeTargets() {
+        return document.documentElement;
+      },
 
       connected() {
         this.placeholder =
         $('+ .uk-sticky-placeholder', this.$el) ||
         $('<div class="uk-sticky-placeholder"></div>');
         this.isFixed = false;
-        this.isActive = false;
+        this.setActive(false);
       },
 
       disconnected() {
@@ -6690,7 +6620,6 @@
 
         remove$1(this.placeholder);
         this.placeholder = null;
-        this.widthElement = null;
       },
 
       events: [
@@ -6730,7 +6659,7 @@
 
       update: [
       {
-        read(_ref3, types) {let { height: height$1, margin } = _ref3;
+        read(_ref2, types) {let { height: height$1, margin } = _ref2;
           this.inactive = !this.matchMedia || !isVisible(this.$el);
 
           if (this.inactive) {
@@ -6785,13 +6714,12 @@
             topOffset,
             height: height$1,
             margin,
-            width: dimensions$1(isVisible(this.widthElement) ? this.widthElement : this.$el).
-            width,
+            width: dimensions$1(referenceElement).width,
             top: offsetPosition(referenceElement)[0] };
 
         },
 
-        write(_ref4) {let { height, margin } = _ref4;
+        write(_ref3) {let { height, margin } = _ref3;
           const { placeholder } = this;
 
           css(placeholder, { height, margin });
@@ -6800,22 +6728,20 @@
             after(this.$el, placeholder);
             placeholder.hidden = true;
           }
-
-          this.isActive = !!this.isActive; // force self-assign
         },
 
         events: ['resize'] },
 
 
       {
-        read(_ref5)
+        read(_ref4)
 
 
 
 
 
 
-        {let { scroll: prevScroll = 0, dir: prevDir = 'down', overflow, overflowScroll = 0, start, end } = _ref5;
+        {let { scroll: prevScroll = 0, dir: prevDir = 'down', overflow, overflowScroll = 0, start, end } = _ref4;
           const scroll = scrollTop(window);
           const dir = prevScroll <= scroll ? 'down' : 'up';
 
@@ -6918,7 +6844,7 @@
         },
 
         hide() {
-          this.isActive = false;
+          this.setActive(false);
           removeClass(this.$el, this.clsFixed, this.clsBelow);
           css(this.$el, { position: '', top: '', width: '' });
           this.placeholder.hidden = true;
@@ -6955,9 +6881,21 @@
             width });
 
 
-          this.isActive = active;
+          this.setActive(active);
           toggleClass(this.$el, this.clsBelow, scroll > topOffset + height);
           addClass(this.$el, this.clsFixed);
+        },
+
+        setActive(active) {
+          const prev = this.active;
+          this.active = active;
+          if (active) {
+            replaceClass(this.selTarget, this.clsInactive, this.clsActive);
+            prev !== active && trigger(this.$el, 'active');
+          } else {
+            replaceClass(this.selTarget, this.clsActive, this.clsInactive);
+            prev !== active && trigger(this.$el, 'inactive');
+          }
         } } };
 
 
@@ -7049,6 +6987,9 @@
 
       connected() {
         this.lazyload(this.$el, this.connects);
+
+        // check for connects
+        ready(() => this.$emit());
       },
 
       events: [
@@ -7177,13 +7118,6 @@
         queued: true },
 
 
-      connected() {
-        if (!includes(this.mode, 'media') && !isFocusable(this.$el)) {
-          attr(this.$el, 'tabindex', '0');
-        }
-        this.lazyload(this.$el, this.target);
-      },
-
       computed: {
         target: {
           get(_ref, $el) {let { href, target } = _ref;
@@ -7199,6 +7133,17 @@
 
 
 
+      connected() {
+        if (!includes(this.mode, 'media') && !isFocusable(this.$el)) {
+          attr(this.$el, 'tabindex', '0');
+        }
+
+        this.lazyload(this.$el, this.target);
+
+        // check for target
+        ready(() => this.$emit());
+      },
+
       events: [
       {
         name: pointerDown,
@@ -7393,7 +7338,6 @@
         Drop: drop,
         Dropdown: drop,
         FormCustom: formCustom,
-        Gif: gif,
         Grid: grid,
         HeightMatch: heightMatch,
         HeightViewport: heightViewport,
@@ -7453,7 +7397,7 @@
 
 
       connected() {
-        this.date = Date.parse(this.date);
+        this.date = Date.parse(this.$props.date);
         this.start();
       },
 
@@ -9503,7 +9447,7 @@
         if (!image.naturalWidth) {
           image.onload = () => {
             dimensions[src] = toDimensions(image);
-            trigger(el, 'load');
+            trigger(el, createEvent('load', false));
           };
           return toDimensions(image);
         }