uikit 3.15.3-dev.e9711b588 → 3.15.4-dev.c21737f52

package/dist/js/uikit.js

@@ -1,4 +1,4 @@
-/*! UIkit 3.15.3-dev.e9711b588 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
+/*! UIkit 3.15.4-dev.c21737f52 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
 
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -1492,7 +1492,7 @@
           return;
         }
         pendingResize = true;
-        fastdom.read(() => pendingResize = false);
+        requestAnimationFrame(() => pendingResize = false);
         for (const listener of listeners) {
           listener();
         }
@@ -2730,7 +2730,7 @@
     function initChildListObserver(component) {
       const { el } = component.$options;
 
-      const observer = new MutationObserver(() => component.$emit());
+      const observer = new MutationObserver(() => component._callWatches());
       observer.observe(el, {
         childList: true,
         subtree: true });
@@ -2899,7 +2899,7 @@
         opt.install == null ? void 0 : opt.install(UIkit, opt, name);
 
         if (UIkit._initialized && !opt.functional) {
-          fastdom.read(() => UIkit[name]("[uk-" + id + "],[data-uk-" + id + "]"));
+          requestAnimationFrame(() => UIkit[name]("[uk-" + id + "],[data-uk-" + id + "]"));
         }
 
         return components[name] = isPlainObject(options) ? opt : options;
@@ -2945,7 +2945,7 @@
     UIkit.data = '__uikit__';
     UIkit.prefix = 'uk-';
     UIkit.options = {};
-    UIkit.version = '3.15.3-dev.e9711b588';
+    UIkit.version = '3.15.4-dev.c21737f52';
 
     globalAPI(UIkit);
     hooksAPI(UIkit);
@@ -2960,7 +2960,7 @@
         return;
       }
 
-      fastdom.read(function () {
+      requestAnimationFrame(function () {
         if (document.body) {
           apply(document.body, connect);
         }
@@ -3100,7 +3100,6 @@
             const done = () => {
               removeClass(el, cls);
               trigger(el, show ? 'shown' : 'hidden', [this]);
-              this.$update(el);
             };
 
             return promise ?
@@ -3145,7 +3144,6 @@
 
           if (changed) {
             trigger(el, 'toggled', [toggled, this]);
-            this.$update(el);
           }
         } } };
 
@@ -3407,7 +3405,7 @@
 
               if (show) {
                 const toggle = $(this.$props.toggle, el);
-                fastdom.read(() => {
+                requestAnimationFrame(() => {
                   if (!isInView(toggle)) {
                     scrollIntoView(toggle, { offset: this.offset });
                   }
@@ -4753,7 +4751,7 @@
     var grid = {
       extends: Margin,
 
-      mixins: [Class, Scroll],
+      mixins: [Class],
 
       name: 'grid',
 
@@ -4771,6 +4769,11 @@
 
       connected() {
         this.masonry && addClass(this.$el, 'uk-flex-top uk-flex-wrap-top');
+        this.parallax && registerScrollListener(this._uid, () => this.$emit('scroll'));
+      },
+
+      disconnected() {
+        unregisterScrollListener(this._uid);
       },
 
       update: [
@@ -6826,8 +6829,6 @@
           trigger(el, inview ? 'inview' : 'outview');
 
           state.inview = inview;
-
-          this.$update(el);
         } } };
 
     var scrollspyNav = {
@@ -7875,10 +7876,10 @@
 
       const wrapIndexFn = (fn) => () => index === transitionIndex(target) ? fn() : Promise.reject();
 
-      const leaveFn = wrapIndexFn(() => {
+      const leaveFn = wrapIndexFn(async () => {
         addClass(target, clsLeave);
 
-        return Promise.all(
+        await Promise.all(
         getTransitionNodes(target).map(
         (child, i) =>
         new Promise((resolve) =>
@@ -7887,14 +7888,16 @@
         Transition.start(child, propsOut, duration / 2, 'ease').then(
         resolve),
 
-        i * stagger)))).
+        i * stagger))));
 
 
 
-        then(() => removeClass(target, clsLeave));
+
+
+        removeClass(target, clsLeave);
       });
 
-      const enterFn = wrapIndexFn(() => {
+      const enterFn = wrapIndexFn(async () => {
         const oldHeight = height(target);
 
         addClass(target, clsEnter);
@@ -7903,53 +7906,42 @@
         css(children(target), { opacity: 0 });
 
         // Ensure UIkit updates have propagated
-        return new Promise((resolve) =>
-        requestAnimationFrame(() => {
-          const nodes = children(target);
-          const newHeight = height(target);
-
-          // Ensure Grid cells do not stretch when height is applied
-          css(target, 'alignContent', 'flex-start');
-          height(target, oldHeight);
-
-          const transitionNodes = getTransitionNodes(target);
-          css(nodes, propsOut);
-
-          const transitions = transitionNodes.map(
-          (child, i) =>
-          new Promise((resolve) =>
-          setTimeout(
-          () =>
-          Transition.start(child, propsIn, duration / 2, 'ease').then(
-          resolve),
+        await awaitFrame$1();
 
-          i * stagger)));
+        const nodes = children(target);
+        const newHeight = height(target);
 
+        // Ensure Grid cells do not stretch when height is applied
+        css(target, 'alignContent', 'flex-start');
+        height(target, oldHeight);
 
+        const transitionNodes = getTransitionNodes(target);
+        css(nodes, propsOut);
 
+        const transitions = transitionNodes.map(async (child, i) => {
+          await awaitTimeout(i * stagger);
+          await Transition.start(child, propsIn, duration / 2, 'ease');
+        });
 
-          if (oldHeight !== newHeight) {
-            transitions.push(
-            Transition.start(
-            target,
-            { height: newHeight },
-            duration / 2 + transitionNodes.length * stagger,
-            'ease'));
-
+        if (oldHeight !== newHeight) {
+          transitions.push(
+          Transition.start(
+          target,
+          { height: newHeight },
+          duration / 2 + transitionNodes.length * stagger,
+          'ease'));
 
-          }
 
-          Promise.all(transitions).then(() => {
-            removeClass(target, clsEnter);
-            if (index === transitionIndex(target)) {
-              css(target, { height: '', alignContent: '' });
-              css(nodes, { opacity: '' });
-              delete target.dataset.transition;
-            }
-            resolve();
-          });
-        }));
+        }
 
+        await Promise.all(transitions).then(() => {
+          removeClass(target, clsEnter);
+          if (index === transitionIndex(target)) {
+            css(target, { height: '', alignContent: '' });
+            css(nodes, { opacity: '' });
+            delete target.dataset.transition;
+          }
+        });
       });
 
       return hasClass(target, clsLeave) ?
@@ -7991,63 +7983,62 @@
 
     }
 
-    function slide (action, target, duration) {
-      return new Promise((resolve) =>
-      requestAnimationFrame(() => {
-        let nodes = children(target);
+    function awaitFrame$1() {
+      return new Promise((resolve) => requestAnimationFrame(resolve));
+    }
 
-        // Get current state
-        const currentProps = nodes.map((el) => getProps(el, true));
-        const targetProps = css(target, ['height', 'padding']);
+    function awaitTimeout(timeout) {
+      return new Promise((resolve) => setTimeout(resolve, timeout));
+    }
 
-        // Cancel previous animations
-        Transition.cancel(target);
-        nodes.forEach(Transition.cancel);
-        reset(target);
+    async function slide (action, target, duration) {
+      await awaitFrame();
 
-        // Adding, sorting, removing nodes
-        action();
+      let nodes = children(target);
 
-        // Find new nodes
-        nodes = nodes.concat(children(target).filter((el) => !includes(nodes, el)));
-
-        // Wait for update to propagate
-        Promise.resolve().then(() => {
-          // Force update
-          fastdom.flush();
-
-          // Get new state
-          const targetPropsTo = css(target, ['height', 'padding']);
-          const [propsTo, propsFrom] = getTransitionProps(target, nodes, currentProps);
-
-          // Reset to previous state
-          nodes.forEach((el, i) => propsFrom[i] && css(el, propsFrom[i]));
-          css(target, { display: 'block', ...targetProps });
-
-          // Start transitions on next frame
-          requestAnimationFrame(() => {
-            const transitions = nodes.
-            map(
-            (el, i) =>
-            parent(el) === target &&
-            Transition.start(el, propsTo[i], duration, 'ease')).
-
-            concat(Transition.start(target, targetPropsTo, duration, 'ease'));
-
-            Promise.all(transitions).
-            then(() => {
-              nodes.forEach(
-              (el, i) =>
-              parent(el) === target &&
-              css(el, 'display', propsTo[i].opacity === 0 ? 'none' : ''));
-
-              reset(target);
-            }, noop).
-            then(resolve);
-          });
-        });
-      }));
+      // Get current state
+      const currentProps = nodes.map((el) => getProps(el, true));
+      const targetProps = css(target, ['height', 'padding']);
+
+      // Cancel previous animations
+      Transition.cancel(target);
+      nodes.forEach(Transition.cancel);
+      reset(target);
+
+      // Adding, sorting, removing nodes
+      action();
+
+      // Find new nodes
+      nodes = nodes.concat(children(target).filter((el) => !includes(nodes, el)));
+
+      // Wait for update to propagate
+      await Promise.resolve();
+
+      // Force update
+      fastdom.flush();
 
+      // Get new state
+      const targetPropsTo = css(target, ['height', 'padding']);
+      const [propsTo, propsFrom] = getTransitionProps(target, nodes, currentProps);
+
+      // Reset to previous state
+      nodes.forEach((el, i) => propsFrom[i] && css(el, propsFrom[i]));
+      css(target, { display: 'block', ...targetProps });
+
+      // Start transitions on next frame
+      await awaitFrame();
+
+      const transitions = nodes.
+      map((el, i) => parent(el) === target && Transition.start(el, propsTo[i], duration, 'ease')).
+      concat(Transition.start(target, targetPropsTo, duration, 'ease'));
+
+      await Promise.all(transitions).then(() => {
+        nodes.forEach(
+        (el, i) =>
+        parent(el) === target && css(el, 'display', propsTo[i].opacity === 0 ? 'none' : ''));
+
+        reset(target);
+      }, noop);
     }
 
     function getProps(el, opacity) {
@@ -8126,6 +8117,10 @@
       return { top, left, height, width, marginLeft, marginTop, transform: '' };
     }
 
+    function awaitFrame() {
+      return new Promise((resolve) => requestAnimationFrame(resolve));
+    }
+
     var Animate = {
       props: {
         duration: Number,
@@ -8183,7 +8178,7 @@
           },
 
           watch() {
-            this.updateState();
+            this.$emit();
 
             if (this.selActive !== false) {
               const actives = $$(this.selActive, this.$el);
@@ -8201,7 +8196,7 @@
 
           watch(list, old) {
             if (old && !isEqualList(list, old)) {
-              this.updateState();
+              this.$emit();
             }
           },
 
@@ -8209,6 +8204,12 @@
 
 
 
+      update: {
+        write() {
+          this.setState(this.getState(), false);
+        } },
+
+
       events: [
       {
         name: 'click',
@@ -8248,25 +8249,18 @@
 
           trigger(this.$el, 'beforeFilter', [this, state]);
 
-          this.toggles.forEach((el) =>
-          toggleClass(el, this.cls, !!matchFilter(el, this.attrItem, state)));
-
+          for (const el of this.toggles) {
+            toggleClass(el, this.cls, !!matchFilter(el, this.attrItem, state));
+          }
 
           await Promise.all(
           $$(this.target, this.$el).map((target) => {
-            const filterFn = () => {
-              applyState(state, target, children(target));
-              this.$update(this.$el);
-            };
+            const filterFn = () => applyState(state, target, children(target));
             return animate ? this.animate(filterFn, target) : filterFn();
           }));
 
 
           trigger(this.$el, 'afterFilter', [this]);
-        },
-
-        updateState() {
-          fastdom.write(() => this.setState(this.getState(), false));
         } } };
 
 
@@ -8961,7 +8955,7 @@
             trigger(next, 'itemshown', [this]);
 
             return new Promise((resolve) => {
-              fastdom.write(() => {
+              requestAnimationFrame(() => {
                 stack.shift();
                 if (stack.length) {
                   this.show(stack.shift(), true);
@@ -9951,7 +9945,7 @@
       return isNumber(start) ? start + Math.abs(start - end) * p * (start < end ? 1 : -1) : +end;
     }
 
-    const unitRe = /^-?\d+(\S*)/;
+    const unitRe = /^-?\d+(\S+)/;
     function getUnit(stops, defaultUnit) {
       for (const stop of stops) {
         const match = stop.match == null ? void 0 : stop.match(unitRe);