uikit 3.11.2-dev.92f357b93 → 3.11.2-dev.946d2efea

package/dist/js/uikit-core.js

@@ -1,4 +1,4 @@
-/*! UIkit 3.11.2-dev.92f357b93 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
+/*! UIkit 3.11.2-dev.946d2efea | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
 
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -729,8 +729,12 @@
       return new Promise((resolve, reject) => {
         const img = new Image();
 
-        img.onerror = (e) => reject(e);
-        img.onload = () => resolve(img);
+        img.onerror = (e) => {
+          reject(e);
+        };
+        img.onload = () => {
+          resolve(img);
+        };
 
         sizes && (img.sizes = sizes);
         srcset && (img.srcset = srcset);
@@ -1016,8 +1020,8 @@
       const currentOffset = dimensions(element);
 
       if (element) {
-        const { pageYOffset, pageXOffset } = toWindow(element);
-        const offsetBy = { height: pageYOffset, width: pageXOffset };
+        const { scrollY, scrollX } = toWindow(element);
+        const offsetBy = { height: scrollY, width: scrollX };
 
         for (const dir in dirs$1) {
           for (const i in dirs$1[dir]) {
@@ -1083,8 +1087,8 @@
 
         if (css(element, 'position') === 'fixed') {
           const win = toWindow(element);
-          offset[0] += win.pageYOffset;
-          offset[1] += win.pageXOffset;
+          offset[0] += win.scrollY;
+          offset[1] += win.scrollX;
           return offset;
         }
       } while (element = element.offsetParent);
@@ -1238,7 +1242,7 @@
     function wrapInner(element, structure) {
       return toNodes(
       toNodes(element).map((element) =>
-      element.hasChildNodes ?
+      element.hasChildNodes() ?
       wrapAll(toNodes(element.childNodes), structure) :
       append(element, structure)));
 
@@ -1252,14 +1256,23 @@
       forEach((parent) => parent.replaceWith(...parent.childNodes));
     }
 
+    const fragmentRe = /^\s*<(\w+|!)[^>]*>/;
+    const singleTagRe = /^<(\w+)\s*\/?>(?:<\/\1>)?$/;
+
     function fragment(html) {
-      const template = document.createElement('template');
-      template.innerHTML = html.trim();
-      const nodes = toNodes(template.content.childNodes);
-      for (const node of nodes) {
-        document.adoptNode(node);
+      const matches = singleTagRe.exec(html);
+      if (matches) {
+        return document.createElement(matches[1]);
+      }
+
+      const container = document.createElement('div');
+      if (fragmentRe.test(html)) {
+        container.insertAdjacentHTML('beforeend', html.trim());
+      } else {
+        container.textContent = html;
       }
-      return unwrapSingle(nodes);
+
+      return unwrapSingle(container.childNodes);
     }
 
     function unwrapSingle(nodes) {
@@ -1457,6 +1470,41 @@
       return { x: x1 + ua * (x2 - x1), y: y1 + ua * (y2 - y1) };
     }
 
+    // Old chromium based browsers (UC Browser) did not implement `isIntersecting`
+    const hasIntersectionObserver =
+    window.IntersectionObserver && 'isIntersecting' in IntersectionObserverEntry.prototype;
+    function observeIntersection(targets, cb, options, intersecting) {if (intersecting === void 0) {intersecting = true;}
+      if (!hasIntersectionObserver) {
+        return;
+      }
+
+      const observer = new IntersectionObserver((entries, observer) => {
+        if (!intersecting || entries.some((entry) => entry.isIntersecting)) {
+          cb(entries, observer);
+        }
+      }, options);
+      for (const el of toNodes(targets)) {
+        observer.observe(el);
+      }
+      return observer;
+    }
+
+    const hasResizeObserver = window.ResizeObserver;
+    function observeResize(targets, cb, options) {if (options === void 0) {options = { box: 'border-box' };}
+      if (!hasResizeObserver) {
+        return;
+      }
+
+      const observer = new ResizeObserver((entries, observer) => {
+        cb(entries, observer);
+      });
+      for (const el of toNodes(targets)) {
+        observer.observe(el, options);
+      }
+
+      return observer;
+    }
+
     const strats = {};
 
     strats.events =
@@ -2134,6 +2182,9 @@
         memoize: memoize,
         Deferred: Deferred,
         MouseTracker: MouseTracker,
+        hasIntersectionObserver: hasIntersectionObserver,
+        observeIntersection: observeIntersection,
+        observeResize: observeResize,
         mergeOptions: mergeOptions,
         parseOptions: parseOptions,
         play: play,
@@ -2311,8 +2362,8 @@
       };
 
       function runUpdates(types) {
-        for (const { read, write, events } of this.$options.update) {
-          if (!types.has('update') && (!events || !events.some((type) => types.has(type)))) {
+        for (const { read, write, events = [] } of this.$options.update) {
+          if (!types.has('update') && !events.some((type) => types.has(type))) {
             continue;
           }
 
@@ -2433,204 +2484,236 @@
             }
           }
         }
+        for (const { events = [] } of this.$options.update || []) {
+          if (includes(events, 'scroll')) {
+            registerScrollListener(this._uid, () => this.$emit('scroll'));
+            break;
+          }
+        }
       };
 
       UIkit.prototype._unbindEvents = function () {
         this._events.forEach((unbind) => unbind());
         delete this._events;
+        unregisterScrollListener(this._uid);
       };
 
       UIkit.prototype._initObservers = function () {
         this._observers = [initChildListObserver(this), initPropsObserver(this)];
       };
 
+      UIkit.prototype.registerObserver = function (observer) {
+        this._observers.push(observer);
+      };
+
       UIkit.prototype._disconnectObservers = function () {
         this._observers.forEach((observer) => observer == null ? void 0 : observer.disconnect());
       };
+    }
 
-      function getProps(opts, name) {
-        const data$1 = {};
-        const { args = [], props = {}, el } = opts;
-
-        if (!props) {
-          return data$1;
-        }
+    function getProps(opts, name) {
+      const data$1 = {};
+      const { args = [], props = {}, el } = opts;
 
-        for (const key in props) {
-          const prop = hyphenate(key);
-          let value = data(el, prop);
+      if (!props) {
+        return data$1;
+      }
 
-          if (isUndefined(value)) {
-            continue;
-          }
+      for (const key in props) {
+        const prop = hyphenate(key);
+        let value = data(el, prop);
 
-          value = props[key] === Boolean && value === '' ? true : coerce(props[key], value);
+        if (isUndefined(value)) {
+          continue;
+        }
 
-          if (prop === 'target' && (!value || startsWith(value, '_'))) {
-            continue;
-          }
+        value = props[key] === Boolean && value === '' ? true : coerce(props[key], value);
 
-          data$1[key] = value;
+        if (prop === 'target' && (!value || startsWith(value, '_'))) {
+          continue;
         }
 
-        const options = parseOptions(data(el, name), args);
+        data$1[key] = value;
+      }
 
-        for (const key in options) {
-          const prop = camelize(key);
-          if (props[prop] !== undefined) {
-            data$1[prop] = coerce(props[prop], options[key]);
-          }
-        }
+      const options = parseOptions(data(el, name), args);
 
-        return data$1;
+      for (const key in options) {
+        const prop = camelize(key);
+        if (props[prop] !== undefined) {
+          data$1[prop] = coerce(props[prop], options[key]);
+        }
       }
 
-      function registerComputed(component, key, cb) {
-        Object.defineProperty(component, key, {
-          enumerable: true,
+      return data$1;
+    }
 
-          get() {
-            const { _computeds, $props, $el } = component;
+    function registerComputed(component, key, cb) {
+      Object.defineProperty(component, key, {
+        enumerable: true,
 
-            if (!hasOwn(_computeds, key)) {
-              _computeds[key] = (cb.get || cb).call(component, $props, $el);
-            }
+        get() {
+          const { _computeds, $props, $el } = component;
 
-            return _computeds[key];
-          },
+          if (!hasOwn(_computeds, key)) {
+            _computeds[key] = (cb.get || cb).call(component, $props, $el);
+          }
 
-          set(value) {
-            const { _computeds } = component;
+          return _computeds[key];
+        },
 
-            _computeds[key] = cb.set ? cb.set.call(component, value) : value;
+        set(value) {
+          const { _computeds } = component;
 
-            if (isUndefined(_computeds[key])) {
-              delete _computeds[key];
-            }
-          } });
+          _computeds[key] = cb.set ? cb.set.call(component, value) : value;
 
+          if (isUndefined(_computeds[key])) {
+            delete _computeds[key];
+          }
+        } });
+
+    }
+
+    function registerEvent(component, event, key) {
+      if (!isPlainObject(event)) {
+        event = { name: key, handler: event };
       }
 
-      function registerEvent(component, event, key) {
-        if (!isPlainObject(event)) {
-          event = { name: key, handler: event };
-        }
+      let { name, el, handler, capture, passive, delegate, filter, self } = event;
+      el = isFunction(el) ? el.call(component) : el || component.$el;
 
-        let { name, el, handler, capture, passive, delegate, filter, self } = event;
-        el = isFunction(el) ? el.call(component) : el || component.$el;
+      if (isArray(el)) {
+        el.forEach((el) => registerEvent(component, { ...event, el }, key));
+        return;
+      }
 
-        if (isArray(el)) {
-          el.forEach((el) => registerEvent(component, { ...event, el }, key));
-          return;
-        }
+      if (!el || filter && !filter.call(component)) {
+        return;
+      }
 
-        if (!el || filter && !filter.call(component)) {
-          return;
-        }
+      component._events.push(
+      on(
+      el,
+      name,
+      delegate ? isString(delegate) ? delegate : delegate.call(component) : null,
+      isString(handler) ? component[handler] : handler.bind(component),
+      { passive, capture, self }));
 
-        component._events.push(
-        on(
-        el,
-        name,
-        delegate ? isString(delegate) ? delegate : delegate.call(component) : null,
-        isString(handler) ? component[handler] : handler.bind(component),
-        { passive, capture, self }));
 
+    }
 
-      }
+    function notIn(options, key) {
+      return options.every((arr) => !arr || !hasOwn(arr, key));
+    }
 
-      function notIn(options, key) {
-        return options.every((arr) => !arr || !hasOwn(arr, key));
+    function coerce(type, value) {
+      if (type === Boolean) {
+        return toBoolean(value);
+      } else if (type === Number) {
+        return toNumber(value);
+      } else if (type === 'list') {
+        return toList(value);
       }
 
-      function coerce(type, value) {
-        if (type === Boolean) {
-          return toBoolean(value);
-        } else if (type === Number) {
-          return toNumber(value);
-        } else if (type === 'list') {
-          return toList(value);
-        }
+      return type ? type(value) : value;
+    }
 
-        return type ? type(value) : value;
+    function toList(value) {
+      return isArray(value) ?
+      value :
+      isString(value) ?
+      value.
+      split(/,(?![^(]*\))/).
+      map((value) => isNumeric(value) ? toNumber(value) : toBoolean(value.trim())) :
+      [value];
+    }
+
+    function normalizeData(_ref, _ref2) {let { data = {} } = _ref;let { args = [], props = {} } = _ref2;
+      if (isArray(data)) {
+        data = data.slice(0, args.length).reduce((data, value, index) => {
+          if (isPlainObject(value)) {
+            assign(data, value);
+          } else {
+            data[args[index]] = value;
+          }
+          return data;
+        }, {});
       }
 
-      function toList(value) {
-        return isArray(value) ?
-        value :
-        isString(value) ?
-        value.
-        split(/,(?![^(]*\))/).
-        map((value) => isNumeric(value) ? toNumber(value) : toBoolean(value.trim())) :
-        [value];
+      for (const key in data) {
+        if (isUndefined(data[key])) {
+          delete data[key];
+        } else if (props[key]) {
+          data[key] = coerce(props[key], data[key]);
+        }
       }
 
-      function normalizeData(_ref, _ref2) {let { data = {} } = _ref;let { args = [], props = {} } = _ref2;
-        if (isArray(data)) {
-          data = data.slice(0, args.length).reduce((data, value, index) => {
-            if (isPlainObject(value)) {
-              assign(data, value);
-            } else {
-              data[args[index]] = value;
-            }
-            return data;
-          }, {});
-        }
+      return data;
+    }
 
-        for (const key in data) {
-          if (isUndefined(data[key])) {
-            delete data[key];
-          } else if (props[key]) {
-            data[key] = coerce(props[key], data[key]);
-          }
-        }
+    function initChildListObserver(component) {
+      const { el } = component.$options;
 
-        return data;
-      }
+      const observer = new MutationObserver(() => component.$emit());
+      observer.observe(el, {
+        childList: true,
+        subtree: true });
 
-      function initChildListObserver(component) {
-        const { el } = component.$options;
 
-        const observer = new MutationObserver(() => component.$emit());
-        observer.observe(el, {
-          childList: true,
-          subtree: true });
+      return observer;
+    }
 
+    function initPropsObserver(component) {
+      const { $name, $options, $props } = component;
+      const { attrs, props, el } = $options;
 
-        return observer;
+      if (!props || attrs === false) {
+        return;
       }
 
-      function initPropsObserver(component) {
-        const { $name, $options, $props } = component;
-        const { attrs, props, el } = $options;
+      const attributes = isArray(attrs) ? attrs : Object.keys(props);
+      const filter = attributes.map((key) => hyphenate(key)).concat($name);
 
-        if (!props || attrs === false) {
-          return;
+      const observer = new MutationObserver((records) => {
+        const data = getProps($options, $name);
+        if (
+        records.some((_ref3) => {let { attributeName } = _ref3;
+          const prop = attributeName.replace('data-', '');
+          return (
+          prop === $name ? attributes : [camelize(prop), camelize(attributeName)]).
+          some((prop) => !isUndefined(data[prop]) && data[prop] !== $props[prop]);
+        }))
+        {
+          component.$reset();
         }
+      });
 
-        const attributes = isArray(attrs) ? attrs : Object.keys(props);
-        const filter = attributes.map((key) => hyphenate(key)).concat($name);
+      observer.observe(el, {
+        attributes: true,
+        attributeFilter: filter.concat(filter.map((key) => "data-" + key)) });
 
-        const observer = new MutationObserver((records) => {
-          const data = getProps($options, $name);
-          if (
-          records.some((_ref3) => {let { attributeName } = _ref3;
-            const prop = attributeName.replace('data-', '');
-            return (
-            prop === $name ? attributes : [camelize(prop), camelize(attributeName)]).
-            some((prop) => !isUndefined(data[prop]) && data[prop] !== $props[prop]);
-          }))
-          {
-            component.$reset();
-          }
-        });
 
-        observer.observe(el, {
-          attributes: true,
-          attributeFilter: filter.concat(filter.map((key) => "data-" + key)) });
+      return observer;
+    }
+
+    const scrollListeners = new Map();
+    let unbindScrollListener;
+    function registerScrollListener(id, listener) {
+      unbindScrollListener =
+      unbindScrollListener ||
+      on(window, 'scroll', () => scrollListeners.forEach((listener) => listener()), {
+        passive: true,
+        capture: true });
+
 
+      scrollListeners.set(id, listener);
+    }
 
-        return observer;
+    function unregisterScrollListener(id) {
+      scrollListeners.delete(id);
+      if (unbindScrollListener && !scrollListeners.size) {
+        unbindScrollListener();
+        unbindScrollListener = null;
       }
     }
 
@@ -2807,7 +2890,7 @@
     UIkit.data = '__uikit__';
     UIkit.prefix = 'uk-';
     UIkit.options = {};
-    UIkit.version = '3.11.2-dev.92f357b93';
+    UIkit.version = '3.11.2-dev.946d2efea';
 
     globalAPI(UIkit);
     hooksAPI(UIkit);
@@ -2833,27 +2916,7 @@
 
       on(window, 'load resize', handleResize);
       on(document, 'loadedmetadata load', handleResize, true);
-
-      if ('ResizeObserver' in window) {
-        new ResizeObserver(handleResize).observe(document.documentElement);
-      }
-
-      // throttle `scroll` event (Safari triggers multiple `scroll` events per frame)
-      let pending;
-      on(
-      window,
-      'scroll',
-      (e) => {
-        if (pending) {
-          return;
-        }
-        pending = true;
-        fastdom.read(() => pending = false);
-
-        UIkit.update(null, e.type);
-      },
-      { passive: true, capture: true });
-
+      observeResize(document.documentElement, handleResize);
 
       let started = 0;
       on(
@@ -2872,45 +2935,6 @@
       },
       true);
 
-
-      on(
-      document,
-      pointerDown,
-      (e) => {
-        if (!isTouch(e)) {
-          return;
-        }
-
-        // Handle Swipe Gesture
-        const pos = getEventPos(e);
-        const target = 'tagName' in e.target ? e.target : parent(e.target);
-        once(document, pointerUp + " " + pointerCancel + " scroll", (e) => {
-          const { x, y } = getEventPos(e);
-
-          // swipe
-          if (
-          e.type !== 'scroll' && target && x && Math.abs(pos.x - x) > 100 ||
-          y && Math.abs(pos.y - y) > 100)
-          {
-            setTimeout(() => {
-              trigger(target, 'swipe');
-              trigger(target, "swipe" + swipeDirection(pos.x, pos.y, x, y));
-            });
-          }
-        });
-      },
-      { passive: true });
-
-    }
-
-    function swipeDirection(x1, y1, x2, y2) {
-      return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ?
-      x1 - x2 > 0 ?
-      'Left' :
-      'Right' :
-      y1 - y2 > 0 ?
-      'Up' :
-      'Down';
     }
 
     function boot (UIkit) {
@@ -2975,6 +2999,23 @@
         !hasClass(this.$el, this.$name) && addClass(this.$el, this.$name);
       } };
 
+    var Lazyload = {
+      methods: {
+        lazyload(observeTargets, targets) {if (observeTargets === void 0) {observeTargets = this.$el;}if (targets === void 0) {targets = this.$el;}
+          this.registerObserver(
+          observeIntersection(observeTargets, (entries, observer) => {
+            for (const el of toNodes(isFunction(targets) ? targets() : targets)) {
+              $$('[loading="lazy"]', el).forEach((el) => removeAttr(el, 'loading'));
+            }
+            for (const el of entries.
+            filter((_ref) => {let { isIntersecting } = _ref;return isIntersecting;}).
+            map((_ref2) => {let { target } = _ref2;return target;})) {
+              observer.unobserve(el);
+            }
+          }));
+
+        } } };
+
     var Togglable = {
       props: {
         cls: Boolean,
@@ -3106,7 +3147,7 @@
     function toggleHeight(_ref3) {let { isToggled, duration, initProps, hideProps, transition, _toggle } = _ref3;
       return (el, show) => {
         const inProgress = Transition.inProgress(el);
-        const inner = el.hasChildNodes ?
+        const inner = el.hasChildNodes() ?
         toFloat(css(el.firstElementChild, 'marginTop')) +
         toFloat(css(el.lastElementChild, 'marginBottom')) :
         0;
@@ -3162,7 +3203,7 @@
     }
 
     var Accordion = {
-      mixins: [Class, Togglable],
+      mixins: [Class, Lazyload, Togglable],
 
       props: {
         targets: String,
@@ -3218,6 +3259,10 @@
         } },
 
 
+      connected() {
+        this.lazyload();
+      },
+
       events: [
       {
         name: 'click',
@@ -3353,6 +3398,8 @@
         if (this.automute) {
           mute(this.$el);
         }
+
+        this.registerObserver(observeIntersection(this.$el, () => this.$emit('resize')));
       },
 
       update: {
@@ -3389,6 +3436,10 @@
         automute: true },
 
 
+      connected() {
+        this.registerObserver(observeResize(this.$el, () => this.$emit('resize')));
+      },
+
       update: {
         read() {
           const el = this.$el;
@@ -3514,7 +3565,7 @@
     let active$1;
 
     var drop = {
-      mixins: [Container, Position, Togglable],
+      mixins: [Container, Lazyload, Position, Togglable],
 
       args: 'pos',
 
@@ -3568,6 +3619,7 @@
             mode: this.mode }).
           $el;
           attr(this.target, 'aria-haspopup', true);
+          this.lazyload(this.target);
         }
       },
 
@@ -3943,7 +3995,7 @@
         name: 'change',
 
         handler() {
-          this.$update();
+          this.$emit();
         } },
 
 
@@ -3955,7 +4007,7 @@
         },
 
         handler() {
-          this.$update();
+          this.$emit();
         } }] };
 
     // Deprecated
@@ -4312,6 +4364,8 @@
     }
 
     var heightViewport = {
+      mixins: [Class],
+
       props: {
         expand: Boolean,
         offsetTop: Boolean,
@@ -4657,14 +4711,14 @@
       },
 
       methods: {
-        getSvg() {
+        async getSvg() {
           const icon = getIcon(this.icon);
 
           if (!icon) {
-            return Promise.reject('Icon not found.');
+            throw 'Icon not found.';
           }
 
-          return Promise.resolve(icon);
+          return icon;
         } } };
 
     const IconComponent = {
@@ -4722,10 +4776,17 @@
     const Spinner = {
       extends: IconComponent,
 
-      async connected() {
-        const svg = await this.svg;
-        svg && this.ratio !== 1 && css($('circle', svg), 'strokeWidth', 1 / this.ratio);
-      } };
+      methods: {
+        async getSvg() {
+          const icon = await Icon.methods.getSvg.call(this);
+
+          if (this.ratio !== 1) {
+            css($('circle', icon), 'strokeWidth', 1 / this.ratio);
+          }
+
+          return icon;
+        } } };
+
 
 
     const parsed = {};
@@ -4764,7 +4825,6 @@
     }
 
     const nativeLazyLoad = ('loading' in HTMLImageElement.prototype);
-    const nativeIsIntersecting = ('isIntersecting' in IntersectionObserverEntry.prototype); // Old chromium based browsers (UC Browser) did not implement `isIntersecting`
 
     var img = {
       args: 'dataSrc',
@@ -4794,13 +4854,13 @@
           },
 
           watch() {
-            this.observe();
+            this.$reset();
           } } },
 
 
 
       connected() {
-        if (this.loading !== 'lazy' || !window.IntersectionObserver || !nativeIsIntersecting) {
+        if (this.loading !== 'lazy' || !hasIntersectionObserver) {
           this.load();
           return;
         }
@@ -4816,28 +4876,27 @@
 
         ensureSrcAttribute(this.$el);
 
-        const rootMargin = toPx(this.offsetTop, 'height') + "px " + toPx(
-        this.offsetLeft,
-        'width') + "px";
-
-        this.observer = new IntersectionObserver(
-        (entries) => {
-          if (entries.some((entry) => entry.isIntersecting)) {
-            this.load();
-            this.observer.disconnect();
-          }
+        this.registerObserver(
+        observeIntersection(
+        this.target,
+        (entries, observer) => {
+          this.load();
+          observer.disconnect();
         },
-        { rootMargin });
+        {
+          rootMargin: toPx(this.offsetTop, 'height') + "px " + toPx(
+          this.offsetLeft,
+          'width') + "px" }));
+
+
+
 
-        this.observe();
       },
 
-      disconnected() {var _this$observer;
+      disconnected() {
         if (this._data.image) {
           this._data.image.onload = '';
         }
-
-        (_this$observer = this.observer) == null ? void 0 : _this$observer.disconnect();
       },
 
       update: {
@@ -4872,14 +4931,6 @@
           removeAttr(image, 'loading');
           setSrcAttrs(this.$el, image.currentSrc);
           return this._data.image = image;
-        },
-
-        observe() {
-          if (this._connected && !this._data.image) {
-            for (const el of this.target) {
-              this.observer.observe(el);
-            }
-          }
         } } };
 
 
@@ -4913,7 +4964,9 @@
 
       wrapInPicture(img, sources);
       setSourceProps(el, img);
-      img.onload = () => setSrcAttrs(el, img.currentSrc);
+      img.onload = () => {
+        setSrcAttrs(el, img.currentSrc);
+      };
       attr(img, 'src', src);
       return img;
     }
@@ -5901,8 +5954,69 @@
       RIGHT: 39,
       DOWN: 40 };
 
+    var Swipe = {
+      props: {
+        swiping: Boolean },
+
+
+      data: {
+        swiping: true },
+
+
+      computed: {
+        swipeTarget(props, $el) {
+          return $el;
+        } },
+
+
+      connected() {
+        if (!this.swiping) {
+          return;
+        }
+
+        registerEvent(this, {
+          el: this.swipeTarget,
+          name: pointerDown,
+          passive: true,
+          handler(e) {
+            if (!isTouch(e)) {
+              return;
+            }
+
+            // Handle Swipe Gesture
+            const pos = getEventPos(e);
+            const target = 'tagName' in e.target ? e.target : parent(e.target);
+            once(document, pointerUp + " " + pointerCancel + " scroll", (e) => {
+              const { x, y } = getEventPos(e);
+
+              // swipe
+              if (
+              e.type !== 'scroll' && target && x && Math.abs(pos.x - x) > 100 ||
+              y && Math.abs(pos.y - y) > 100)
+              {
+                setTimeout(() => {
+                  trigger(target, 'swipe');
+                  trigger(target, "swipe" + swipeDirection(pos.x, pos.y, x, y));
+                });
+              }
+            });
+          } });
+
+      } };
+
+
+    function swipeDirection(x1, y1, x2, y2) {
+      return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ?
+      x1 - x2 > 0 ?
+      'Left' :
+      'Right' :
+      y1 - y2 > 0 ?
+      'Up' :
+      'Down';
+    }
+
     var offcanvas = {
-      mixins: [Modal],
+      mixins: [Modal, Swipe],
 
       args: 'mode',
 
@@ -6483,26 +6597,11 @@
 
 
       computed: {
-        position(_ref, $el) {let { position } = _ref;
-          return position === 'auto' ?
-          (this.isFixed ? this.placeholder : $el).offsetHeight > height(window) ?
-          'bottom' :
-          'top' :
-          position;
-        },
-
-        offset(_ref2, $el) {let { offset } = _ref2;
-          if (this.position === 'bottom') {
-            offset += '+100vh-100%';
-          }
-          return toPx(offset, 'height', $el);
-        },
-
-        selTarget(_ref3, $el) {let { selTarget } = _ref3;
+        selTarget(_ref, $el) {let { selTarget } = _ref;
           return selTarget && $(selTarget, $el) || $el;
         },
 
-        widthElement(_ref4, $el) {let { widthElement } = _ref4;
+        widthElement(_ref2, $el) {let { widthElement } = _ref2;
           return query(widthElement, $el) || this.placeholder;
         },
 
@@ -6550,41 +6649,36 @@
           return window;
         },
 
+        filter() {
+          return this.targetOffset !== false;
+        },
+
         handler() {
-          if (!(this.targetOffset !== false && location.hash && scrollTop(window) > 0)) {
+          if (!location.hash || scrollTop(window) === 0) {
             return;
           }
 
-          const target = $(location.hash);
-
-          if (target) {
-            fastdom.read(() => {
-              const { top } = offset(target);
-              const elTop = offset(this.$el).top;
-              const elHeight = this.$el.offsetHeight;
+          fastdom.read(() => {
+            const targetOffset = offset($(location.hash));
+            const elOffset = offset(this.$el);
 
-              if (
-              this.isFixed &&
-              elTop + elHeight >= top &&
-              elTop <= top + target.offsetHeight)
-              {
-                scrollTop(
-                window,
-                top -
-                elHeight - (
-                isNumeric(this.targetOffset) ? this.targetOffset : 0) -
-                this.offset);
+            if (this.isFixed && intersectRect(targetOffset, elOffset)) {
+              scrollTop(
+              window,
+              targetOffset.top -
+              elOffset.height -
+              toPx(this.targetOffset, 'height') -
+              toPx(this.offset, 'height'));
 
-              }
-            });
-          }
+            }
+          });
         } }],
 
 
 
       update: [
       {
-        read(_ref5, types) {let { height: height$1, margin } = _ref5;
+        read(_ref3, types) {let { height: height$1, margin } = _ref3;
           this.inactive = !this.matchMedia || !isVisible(this.$el);
 
           if (this.inactive) {
@@ -6593,35 +6687,49 @@
 
           const hide = this.isActive && types.has('resize');
           if (hide) {
+            css(this.selTarget, 'transition', '0s');
             this.hide();
           }
 
           if (!this.isActive) {
-            height$1 = this.$el.offsetHeight;
+            height$1 = offset(this.$el).height;
             margin = css(this.$el, 'margin');
           }
 
           if (hide) {
             this.show();
+            fastdom.write(() => css(this.selTarget, 'transition', ''));
           }
 
-          const overflow = Math.max(0, height$1 + this.offset - height(window));
-
           const referenceElement = this.isFixed ? this.placeholder : this.$el;
+          const windowHeight = height(window);
+
+          let position = this.position;
+          if (position === 'auto' && height$1 > windowHeight) {
+            position = 'bottom';
+          }
+
+          let offset$1 = toPx(this.offset, 'height', referenceElement);
+          if (position === 'bottom') {
+            offset$1 += windowHeight - height$1;
+          }
+
+          const overflow = Math.max(0, height$1 + offset$1 - windowHeight);
           const topOffset = offset(referenceElement).top;
           const offsetParentTop = offset(referenceElement.offsetParent).top;
 
           const top = parseProp(this.top, this.$el, topOffset);
           const bottom = parseProp(this.bottom, this.$el, topOffset + height$1, true);
 
-          const start = Math.max(top, topOffset) - this.offset;
+          const start = Math.max(top, topOffset) - offset$1;
           const end = bottom ?
-          bottom - this.$el.offsetHeight + overflow - this.offset :
-          getScrollingElement(this.$el).scrollHeight - height(window);
+          bottom - offset(this.$el).height + overflow - offset$1 :
+          getScrollingElement(this.$el).scrollHeight - windowHeight;
 
           return {
             start,
             end,
+            offset: offset$1,
             overflow,
             topOffset,
             offsetParentTop,
@@ -6633,7 +6741,7 @@
 
         },
 
-        write(_ref6) {let { height, margin } = _ref6;
+        write(_ref4) {let { height, margin } = _ref4;
           const { placeholder } = this;
 
           css(placeholder, { height, margin });
@@ -6650,14 +6758,14 @@
 
 
       {
-        read(_ref7)
+        read(_ref5)
 
 
 
 
 
 
-        {let { scroll: prevScroll = 0, dir: prevDir = 'down', overflow, overflowScroll = 0, start, end } = _ref7;
+        {let { scroll: prevScroll = 0, dir: prevDir = 'down', overflow, overflowScroll = 0, start, end } = _ref5;
           const scroll = scrollTop(window);
           const dir = prevScroll <= scroll ? 'down' : 'up';
 
@@ -6738,7 +6846,7 @@
             }
           } else if (this.isFixed) {
             this.update();
-          } else if (this.animation) {
+          } else if (this.animation && scroll > topOffset) {
             Animation.cancel(this.$el);
             this.show();
             Animation.in(this.$el, this.animation).catch(noop);
@@ -6766,33 +6874,33 @@
         },
 
         update() {
-          const {
+          let {
             width,
             scroll = 0,
             overflow,
             overflowScroll = 0,
             start,
             end,
+            offset,
             topOffset,
             height,
             offsetParentTop } =
           this._data;
           const active = start !== 0 || scroll > start;
-          let top = this.offset;
           let position = 'fixed';
 
           if (scroll > end) {
-            top = end + this.offset - offsetParentTop;
+            offset += end - offsetParentTop;
             position = 'absolute';
           }
 
           if (overflow) {
-            top -= overflowScroll;
+            offset -= overflowScroll;
           }
 
           css(this.$el, {
             position,
-            top: top + "px",
+            top: offset + "px",
             width });
 
 
@@ -6822,7 +6930,7 @@
     }
 
     var Switcher = {
-      mixins: [Togglable],
+      mixins: [Lazyload, Swipe, Togglable],
 
       args: 'connect',
 
@@ -6830,8 +6938,7 @@
         connect: String,
         toggle: String,
         itemNav: String,
-        active: Number,
-        swiping: Boolean },
+        active: Number },
 
 
       data: {
@@ -6839,7 +6946,6 @@
         toggle: '> * > :first-child',
         itemNav: false,
         active: 0,
-        swiping: true,
         cls: 'uk-active',
         attrItem: 'uk-switcher-item' },
 
@@ -6883,9 +6989,17 @@
           return children(this.$el).filter((child) =>
           this.toggles.some((toggle) => within(toggle, child)));
 
+        },
+
+        swipeTarget() {
+          return this.connects;
         } },
 
 
+      connected() {
+        this.lazyload(this.$el, this.connects);
+      },
+
       events: [
       {
         name: 'click',
@@ -6994,7 +7108,7 @@
     const KEY_SPACE = 32;
 
     var toggle = {
-      mixins: [Media, Togglable],
+      mixins: [Lazyload, Media, Togglable],
 
       args: 'target',
 
@@ -7016,6 +7130,7 @@
         if (!includes(this.mode, 'media') && !isFocusable(this.$el)) {
           attr(this.$el, 'tabindex', '0');
         }
+        this.lazyload(this.$el, this.target);
       },
 
       computed: {
@@ -7107,7 +7222,7 @@
         name: 'keydown',
 
         filter() {
-          return includes(this.mode, 'click') && isTag(this.$el, 'input');
+          return includes(this.mode, 'click') && !isTag(this.$el, 'input');
         },
 
         handler(e) {