uikit 3.11.1 → 3.11.2-dev.03e47c2ff

package/dist/js/components/sortable.js

@@ -1,4 +1,4 @@
-/*! UIkit 3.11.1 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
+/*! UIkit 3.11.2-dev.03e47c2ff | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
 
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('uikit-util')) :
@@ -7,811 +7,777 @@
 })(this, (function (uikitUtil) { 'use strict';
 
     function getRows(items) {
-        return sortBy(items, 'top', 'bottom');
+      return sortBy(items, 'top', 'bottom');
     }
 
     function sortBy(items, startProp, endProp) {
+      const sorted = [[]];
 
-        var sorted = [[]];
-
-        for (var i = 0; i < items.length; i++) {
-
-            var el = items[i];
-
-            if (!uikitUtil.isVisible(el)) {
-                continue;
-            }
-
-            var dim = getOffset(el);
-
-            for (var j = sorted.length - 1; j >= 0; j--) {
-
-                var current = sorted[j];
-
-                if (!current[0]) {
-                    current.push(el);
-                    break;
-                }
-
-                var startDim = (void 0);
-                if (current[0].offsetParent === el.offsetParent) {
-                    startDim = getOffset(current[0]);
-                } else {
-                    dim = getOffset(el, true);
-                    startDim = getOffset(current[0], true);
-                }
+      for (const el of items) {
+        if (!uikitUtil.isVisible(el)) {
+          continue;
+        }
 
-                if (dim[startProp] >= startDim[endProp] - 1 && dim[startProp] !== startDim[startProp]) {
-                    sorted.push([el]);
-                    break;
-                }
+        let dim = getOffset(el);
+
+        for (let i = sorted.length - 1; i >= 0; i--) {
+          const current = sorted[i];
+
+          if (!current[0]) {
+            current.push(el);
+            break;
+          }
+
+          let startDim;
+          if (current[0].offsetParent === el.offsetParent) {
+            startDim = getOffset(current[0]);
+          } else {
+            dim = getOffset(el, true);
+            startDim = getOffset(current[0], true);
+          }
+
+          if (dim[startProp] >= startDim[endProp] - 1 && dim[startProp] !== startDim[startProp]) {
+            sorted.push([el]);
+            break;
+          }
+
+          if (dim[endProp] - 1 > startDim[startProp] || dim[startProp] === startDim[startProp]) {
+            current.push(el);
+            break;
+          }
+
+          if (i === 0) {
+            sorted.unshift([el]);
+            break;
+          }
+        }
+      }
 
-                if (dim[endProp] - 1 > startDim[startProp] || dim[startProp] === startDim[startProp]) {
-                    current.push(el);
-                    break;
-                }
+      return sorted;
+    }
 
-                if (j === 0) {
-                    sorted.unshift([el]);
-                    break;
-                }
+    function getOffset(element, offset) {if (offset === void 0) {offset = false;}
+      let { offsetTop, offsetLeft, offsetHeight, offsetWidth } = element;
 
-            }
+      if (offset) {
+        [offsetTop, offsetLeft] = uikitUtil.offsetPosition(element);
+      }
 
-        }
+      return {
+        top: offsetTop,
+        left: offsetLeft,
+        bottom: offsetTop + offsetHeight,
+        right: offsetLeft + offsetWidth };
 
-        return sorted;
     }
 
-    function getOffset(element, offset) {
-        var assign;
+    const clsLeave = 'uk-transition-leave';
+    const clsEnter = 'uk-transition-enter';
 
-        if ( offset === void 0 ) offset = false;
+    function fade(action, target, duration, stagger) {if (stagger === void 0) {stagger = 0;}
+      const index = transitionIndex(target, true);
+      const propsIn = { opacity: 1 };
+      const propsOut = { opacity: 0 };
 
-        var offsetTop = element.offsetTop;
-        var offsetLeft = element.offsetLeft;
-        var offsetHeight = element.offsetHeight;
-        var offsetWidth = element.offsetWidth;
+      const wrapIndexFn = (fn) => () => index === transitionIndex(target) ? fn() : Promise.reject();
 
-        if (offset) {
-            (assign = uikitUtil.offsetPosition(element), offsetTop = assign[0], offsetLeft = assign[1]);
-        }
+      const leaveFn = wrapIndexFn(() => {
+        uikitUtil.addClass(target, clsLeave);
 
-        return {
-            top: offsetTop,
-            left: offsetLeft,
-            bottom: offsetTop + offsetHeight,
-            right: offsetLeft + offsetWidth
-        };
-    }
+        return Promise.all(
+        getTransitionNodes(target).map(
+        (child, i) =>
+        new Promise((resolve) =>
+        setTimeout(
+        () =>
+        uikitUtil.Transition.start(child, propsOut, duration / 2, 'ease').then(
+        resolve),
 
-    var clsLeave = 'uk-transition-leave';
-    var clsEnter = 'uk-transition-enter';
+        i * stagger)))).
 
-    function fade(action, target, duration, stagger) {
-        if ( stagger === void 0 ) stagger = 0;
 
 
-        var index = transitionIndex(target, true);
-        var propsIn = {opacity: 1};
-        var propsOut = {opacity: 0};
+        then(() => uikitUtil.removeClass(target, clsLeave));
+      });
 
-        var wrapIndexFn = function (fn) { return function () { return index === transitionIndex(target) ? fn() : uikitUtil.Promise.reject(); }; };
+      const enterFn = wrapIndexFn(() => {
+        const oldHeight = uikitUtil.height(target);
 
-        var leaveFn = wrapIndexFn(function () {
+        uikitUtil.addClass(target, clsEnter);
+        action();
 
-            uikitUtil.addClass(target, clsLeave);
+        uikitUtil.css(uikitUtil.children(target), { opacity: 0 });
 
-            return uikitUtil.Promise.all(getTransitionNodes(target).map(function (child, i) { return new uikitUtil.Promise(function (resolve) { return setTimeout(function () { return uikitUtil.Transition.start(child, propsOut, duration / 2, 'ease').then(resolve); }, i * stagger); }
-                ); }
-            )).then(function () { return uikitUtil.removeClass(target, clsLeave); });
+        // Ensure UIkit updates have propagated
+        return new Promise((resolve) =>
+        requestAnimationFrame(() => {
+          const nodes = uikitUtil.children(target);
+          const newHeight = uikitUtil.height(target);
 
-        });
+          // Ensure Grid cells do not stretch when height is applied
+          uikitUtil.css(target, 'alignContent', 'flex-start');
+          uikitUtil.height(target, oldHeight);
 
-        var enterFn = wrapIndexFn(function () {
+          const transitionNodes = getTransitionNodes(target);
+          uikitUtil.css(nodes, propsOut);
 
-            var oldHeight = uikitUtil.height(target);
+          const transitions = transitionNodes.map(
+          (child, i) =>
+          new Promise((resolve) =>
+          setTimeout(
+          () =>
+          uikitUtil.Transition.start(child, propsIn, duration / 2, 'ease').then(
+          resolve),
 
-            uikitUtil.addClass(target, clsEnter);
-            action();
+          i * stagger)));
 
-            uikitUtil.css(uikitUtil.children(target), {opacity: 0});
 
-            // Ensure UIkit updates have propagated
-            return new uikitUtil.Promise(function (resolve) { return requestAnimationFrame(function () {
 
-                    var nodes = uikitUtil.children(target);
-                    var newHeight = uikitUtil.height(target);
 
-                    // Ensure Grid cells do not stretch when height is applied
-                    uikitUtil.css(target, 'alignContent', 'flex-start');
-                    uikitUtil.height(target, oldHeight);
+          if (oldHeight !== newHeight) {
+            transitions.push(
+            uikitUtil.Transition.start(
+            target,
+            { height: newHeight },
+            duration / 2 + transitionNodes.length * stagger,
+            'ease'));
 
-                    var transitionNodes = getTransitionNodes(target);
-                    uikitUtil.css(nodes, propsOut);
 
-                    var transitions = transitionNodes.map(function (child, i) { return new uikitUtil.Promise(function (resolve) { return setTimeout(function () { return uikitUtil.Transition.start(child, propsIn, duration / 2, 'ease').then(resolve); }, i * stagger); }
-                        ); }
-                    );
+          }
 
-                    if (oldHeight !== newHeight) {
-                        transitions.push(uikitUtil.Transition.start(target, {height: newHeight}, duration / 2 + transitionNodes.length * stagger, 'ease'));
-                    }
+          Promise.all(transitions).then(() => {
+            uikitUtil.removeClass(target, clsEnter);
+            if (index === transitionIndex(target)) {
+              uikitUtil.css(target, { height: '', alignContent: '' });
+              uikitUtil.css(nodes, { opacity: '' });
+              delete target.dataset.transition;
+            }
+            resolve();
+          });
+        }));
 
-                    uikitUtil.Promise.all(transitions).then(function () {
-                        uikitUtil.removeClass(target, clsEnter);
-                        if (index === transitionIndex(target)) {
-                            uikitUtil.css(target, {height: '', alignContent: ''});
-                            uikitUtil.css(nodes, {opacity: ''});
-                            delete target.dataset.transition;
-                        }
-                        resolve();
-                    });
-                }); }
-            );
-        });
+      });
 
-        return uikitUtil.hasClass(target, clsLeave)
-            ? waitTransitionend(target).then(enterFn)
-            : uikitUtil.hasClass(target, clsEnter)
-                ? waitTransitionend(target).then(leaveFn).then(enterFn)
-                : leaveFn().then(enterFn);
+      return uikitUtil.hasClass(target, clsLeave) ?
+      waitTransitionend(target).then(enterFn) :
+      uikitUtil.hasClass(target, clsEnter) ?
+      waitTransitionend(target).then(leaveFn).then(enterFn) :
+      leaveFn().then(enterFn);
     }
 
     function transitionIndex(target, next) {
-        if (next) {
-            target.dataset.transition = 1 + transitionIndex(target);
-        }
+      if (next) {
+        target.dataset.transition = 1 + transitionIndex(target);
+      }
 
-        return uikitUtil.toNumber(target.dataset.transition) || 0;
+      return uikitUtil.toNumber(target.dataset.transition) || 0;
     }
 
     function waitTransitionend(target) {
-        return uikitUtil.Promise.all(uikitUtil.children(target).filter(uikitUtil.Transition.inProgress).map(function (el) { return new uikitUtil.Promise(function (resolve) { return uikitUtil.once(el, 'transitionend transitioncanceled', resolve); }); }
-        ));
-    }
-
-    function getTransitionNodes(target) {
-        return getRows(uikitUtil.children(target)).reduce(function (nodes, row) { return nodes.concat(uikitUtil.sortBy(row.filter(function (el) { return uikitUtil.isInView(el); }), 'offsetLeft')); }, []);
-    }
-
-    function slide (action, target, duration) {
+      return Promise.all(
+      uikitUtil.children(target).
+      filter(uikitUtil.Transition.inProgress).
+      map(
+      (el) =>
+      new Promise((resolve) => uikitUtil.once(el, 'transitionend transitioncanceled', resolve))));
 
-        return new uikitUtil.Promise(function (resolve) { return requestAnimationFrame(function () {
 
-                var nodes = uikitUtil.children(target);
-
-                // Get current state
-                var currentProps = nodes.map(function (el) { return getProps(el, true); });
-                var targetProps = uikitUtil.css(target, ['height', 'padding']);
-
-                // Cancel previous animations
-                uikitUtil.Transition.cancel(target);
-                nodes.forEach(uikitUtil.Transition.cancel);
-                reset(target);
-
-                // Adding, sorting, removing nodes
-                action();
-
-                // Find new nodes
-                nodes = nodes.concat(uikitUtil.children(target).filter(function (el) { return !uikitUtil.includes(nodes, el); }));
-
-                // Wait for update to propagate
-                uikitUtil.Promise.resolve().then(function () {
-
-                    // Force update
-                    uikitUtil.fastdom.flush();
+    }
 
-                    // Get new state
-                    var targetPropsTo = uikitUtil.css(target, ['height', 'padding']);
-                    var ref = getTransitionProps(target, nodes, currentProps);
-                    var propsTo = ref[0];
-                    var propsFrom = ref[1];
+    function getTransitionNodes(target) {
+      return getRows(uikitUtil.children(target)).reduce(
+      (nodes, row) =>
+      nodes.concat(
+      uikitUtil.sortBy(
+      row.filter((el) => uikitUtil.isInView(el)),
+      'offsetLeft')),
 
-                    // Reset to previous state
-                    nodes.forEach(function (el, i) { return propsFrom[i] && uikitUtil.css(el, propsFrom[i]); });
-                    uikitUtil.css(target, uikitUtil.assign({display: 'block'}, targetProps));
 
-                    // Start transitions on next frame
-                    requestAnimationFrame(function () {
+      []);
 
-                        var transitions = nodes.map(function (el, i) { return uikitUtil.parent(el) === target && uikitUtil.Transition.start(el, propsTo[i], duration, 'ease'); }
-                            ).concat(uikitUtil.Transition.start(target, targetPropsTo, duration, 'ease'));
+    }
 
-                        uikitUtil.Promise.all(transitions).then(function () {
-                            nodes.forEach(function (el, i) { return uikitUtil.parent(el) === target && uikitUtil.css(el, 'display', propsTo[i].opacity === 0 ? 'none' : ''); });
-                            reset(target);
-                        }, uikitUtil.noop).then(resolve);
+    function slide (action, target, duration) {
+      return new Promise((resolve) =>
+      requestAnimationFrame(() => {
+        let nodes = uikitUtil.children(target);
+
+        // Get current state
+        const currentProps = nodes.map((el) => getProps(el, true));
+        const targetProps = uikitUtil.css(target, ['height', 'padding']);
+
+        // Cancel previous animations
+        uikitUtil.Transition.cancel(target);
+        nodes.forEach(uikitUtil.Transition.cancel);
+        reset(target);
+
+        // Adding, sorting, removing nodes
+        action();
+
+        // Find new nodes
+        nodes = nodes.concat(uikitUtil.children(target).filter((el) => !uikitUtil.includes(nodes, el)));
+
+        // Wait for update to propagate
+        Promise.resolve().then(() => {
+          // Force update
+          uikitUtil.fastdom.flush();
+
+          // Get new state
+          const targetPropsTo = uikitUtil.css(target, ['height', 'padding']);
+          const [propsTo, propsFrom] = getTransitionProps(target, nodes, currentProps);
+
+          // Reset to previous state
+          nodes.forEach((el, i) => propsFrom[i] && uikitUtil.css(el, propsFrom[i]));
+          uikitUtil.css(target, { display: 'block', ...targetProps });
+
+          // Start transitions on next frame
+          requestAnimationFrame(() => {
+            const transitions = nodes.
+            map(
+            (el, i) =>
+            uikitUtil.parent(el) === target &&
+            uikitUtil.Transition.start(el, propsTo[i], duration, 'ease')).
+
+            concat(uikitUtil.Transition.start(target, targetPropsTo, duration, 'ease'));
+
+            Promise.all(transitions).
+            then(() => {
+              nodes.forEach(
+              (el, i) =>
+              uikitUtil.parent(el) === target &&
+              uikitUtil.css(el, 'display', propsTo[i].opacity === 0 ? 'none' : ''));
+
+              reset(target);
+            }, uikitUtil.noop).
+            then(resolve);
+          });
+        });
+      }));
 
-                    });
-                });
-            }); });
     }
 
     function getProps(el, opacity) {
-
-        var zIndex = uikitUtil.css(el, 'zIndex');
-
-        return uikitUtil.isVisible(el)
-            ? uikitUtil.assign({
-                display: '',
-                opacity: opacity ? uikitUtil.css(el, 'opacity') : '0',
-                pointerEvents: 'none',
-                position: 'absolute',
-                zIndex: zIndex === 'auto' ? uikitUtil.index(el) : zIndex
-            }, getPositionWithMargin(el))
-            : false;
+      const zIndex = uikitUtil.css(el, 'zIndex');
+
+      return uikitUtil.isVisible(el) ?
+      {
+        display: '',
+        opacity: opacity ? uikitUtil.css(el, 'opacity') : '0',
+        pointerEvents: 'none',
+        position: 'absolute',
+        zIndex: zIndex === 'auto' ? uikitUtil.index(el) : zIndex,
+        ...getPositionWithMargin(el) } :
+
+      false;
     }
 
     function getTransitionProps(target, nodes, currentProps) {
+      const propsTo = nodes.map((el, i) =>
+      uikitUtil.parent(el) && i in currentProps ?
+      currentProps[i] ?
+      uikitUtil.isVisible(el) ?
+      getPositionWithMargin(el) :
+      { opacity: 0 } :
+      { opacity: uikitUtil.isVisible(el) ? 1 : 0 } :
+      false);
 
-        var propsTo = nodes.map(function (el, i) { return uikitUtil.parent(el) && i in currentProps
-                ? currentProps[i]
-                ? uikitUtil.isVisible(el)
-                    ? getPositionWithMargin(el)
-                    : {opacity: 0}
-                : {opacity: uikitUtil.isVisible(el) ? 1 : 0}
-                : false; });
-
-        var propsFrom = propsTo.map(function (props, i) {
 
-            var from = uikitUtil.parent(nodes[i]) === target && (currentProps[i] || getProps(nodes[i]));
+      const propsFrom = propsTo.map((props, i) => {
+        const from = uikitUtil.parent(nodes[i]) === target && (currentProps[i] || getProps(nodes[i]));
 
-            if (!from) {
-                return false;
-            }
+        if (!from) {
+          return false;
+        }
 
-            if (!props) {
-                delete from.opacity;
-            } else if (!('opacity' in props)) {
-                var opacity = from.opacity;
+        if (!props) {
+          delete from.opacity;
+        } else if (!('opacity' in props)) {
+          const { opacity } = from;
 
-                if (opacity % 1) {
-                    props.opacity = 1;
-                } else {
-                    delete from.opacity;
-                }
-            }
+          if (opacity % 1) {
+            props.opacity = 1;
+          } else {
+            delete from.opacity;
+          }
+        }
 
-            return from;
-        });
+        return from;
+      });
 
-        return [propsTo, propsFrom];
+      return [propsTo, propsFrom];
     }
 
     function reset(el) {
-        uikitUtil.css(el.children, {
-            height: '',
-            left: '',
-            opacity: '',
-            pointerEvents: '',
-            position: '',
-            top: '',
-            marginTop: '',
-            marginLeft: '',
-            transform: '',
-            width: '',
-            zIndex: ''
-        });
-        uikitUtil.css(el, {height: '', display: '', padding: ''});
+      uikitUtil.css(el.children, {
+        height: '',
+        left: '',
+        opacity: '',
+        pointerEvents: '',
+        position: '',
+        top: '',
+        marginTop: '',
+        marginLeft: '',
+        transform: '',
+        width: '',
+        zIndex: '' });
+
+      uikitUtil.css(el, { height: '', display: '', padding: '' });
     }
 
     function getPositionWithMargin(el) {
-        var ref = uikitUtil.offset(el);
-        var height = ref.height;
-        var width = ref.width;
-        var ref$1 = uikitUtil.position(el);
-        var top = ref$1.top;
-        var left = ref$1.left;
-        var ref$2 = uikitUtil.css(el, ['marginTop', 'marginLeft']);
-        var marginLeft = ref$2.marginLeft;
-        var marginTop = ref$2.marginTop;
-
-        return {top: top, left: left, height: height, width: width, marginLeft: marginLeft, marginTop: marginTop, transform: ''};
+      const { height, width } = uikitUtil.offset(el);
+      const { top, left } = uikitUtil.position(el);
+      const { marginLeft, marginTop } = uikitUtil.css(el, ['marginTop', 'marginLeft']);
+
+      return { top, left, height, width, marginLeft, marginTop, transform: '' };
     }
 
     var Animate = {
+      props: {
+        duration: Number,
+        animation: Boolean },
+
+
+      data: {
+        duration: 150,
+        animation: 'slide' },
+
+
+      methods: {
+        animate(action, target) {if (target === void 0) {target = this.$el;}
+          const name = this.animation;
+          const animationFn =
+          name === 'fade' ?
+          fade :
+          name === 'delayed-fade' ?
+          function () {for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}return fade(...args, 40);} :
+          name ?
+          slide :
+          () => {
+            action();
+            return Promise.resolve();
+          };
 
-        props: {
-            duration: Number,
-            animation: Boolean
-        },
-
-        data: {
-            duration: 150,
-            animation: 'slide'
-        },
-
-        methods: {
-
-            animate: function(action, target) {
-                var this$1$1 = this;
-                if ( target === void 0 ) target = this.$el;
-
-
-                var name = this.animation;
-                var animationFn = name === 'fade'
-                    ? fade
-                    : name === 'delayed-fade'
-                        ? function () {
-                            var args = [], len = arguments.length;
-                            while ( len-- ) args[ len ] = arguments[ len ];
+          return animationFn(action, target, this.duration).then(
+          () => this.$update(target, 'resize'),
+          uikitUtil.noop);
 
-                            return fade.apply(void 0, args.concat( [40] ));
-                }
-                        : name
-                            ? slide
-                            : function () {
-                                action();
-                                return uikitUtil.Promise.resolve();
-                            };
-
-                return animationFn(action, target, this.duration)
-                    .then(function () { return this$1$1.$update(target, 'resize'); }, uikitUtil.noop);
-            }
-
-        }
-    };
+        } } };
 
     var Class = {
-
-        connected: function() {
-            !uikitUtil.hasClass(this.$el, this.$name) && uikitUtil.addClass(this.$el, this.$name);
-        }
-
-    };
+      connected() {
+        !uikitUtil.hasClass(this.$el, this.$name) && uikitUtil.addClass(this.$el, this.$name);
+      } };
 
     var Component = {
+      mixins: [Class, Animate],
+
+      props: {
+        group: String,
+        threshold: Number,
+        clsItem: String,
+        clsPlaceholder: String,
+        clsDrag: String,
+        clsDragState: String,
+        clsBase: String,
+        clsNoDrag: String,
+        clsEmpty: String,
+        clsCustom: String,
+        handle: String },
+
+
+      data: {
+        group: false,
+        threshold: 5,
+        clsItem: 'uk-sortable-item',
+        clsPlaceholder: 'uk-sortable-placeholder',
+        clsDrag: 'uk-sortable-drag',
+        clsDragState: 'uk-drag',
+        clsBase: 'uk-sortable',
+        clsNoDrag: 'uk-sortable-nodrag',
+        clsEmpty: 'uk-sortable-empty',
+        clsCustom: '',
+        handle: false,
+        pos: {} },
+
+
+      created() {
+        for (const key of ['init', 'start', 'move', 'end']) {
+          const fn = this[key];
+          this[key] = (e) => {
+            uikitUtil.assign(this.pos, uikitUtil.getEventPos(e));
+            fn(e);
+          };
+        }
+      },
 
-        mixins: [Class, Animate],
-
-        props: {
-            group: String,
-            threshold: Number,
-            clsItem: String,
-            clsPlaceholder: String,
-            clsDrag: String,
-            clsDragState: String,
-            clsBase: String,
-            clsNoDrag: String,
-            clsEmpty: String,
-            clsCustom: String,
-            handle: String
-        },
-
-        data: {
-            group: false,
-            threshold: 5,
-            clsItem: 'uk-sortable-item',
-            clsPlaceholder: 'uk-sortable-placeholder',
-            clsDrag: 'uk-sortable-drag',
-            clsDragState: 'uk-drag',
-            clsBase: 'uk-sortable',
-            clsNoDrag: 'uk-sortable-nodrag',
-            clsEmpty: 'uk-sortable-empty',
-            clsCustom: '',
-            handle: false,
-            pos: {}
-        },
+      events: {
+        name: uikitUtil.pointerDown,
+        passive: false,
+        handler: 'init' },
 
-        created: function() {
-            var this$1$1 = this;
 
-            ['init', 'start', 'move', 'end'].forEach(function (key) {
-                var fn = this$1$1[key];
-                this$1$1[key] = function (e) {
-                    uikitUtil.assign(this$1$1.pos, uikitUtil.getEventPos(e));
-                    fn(e);
-                };
-            });
+      computed: {
+        target() {
+          return (this.$el.tBodies || [this.$el])[0];
         },
 
-        events: {
-
-            name: uikitUtil.pointerDown,
-            passive: false,
-            handler: 'init'
-
+        items() {
+          return uikitUtil.children(this.target);
         },
 
-        computed: {
-
-            target: function() {
-                return (this.$el.tBodies || [this.$el])[0];
-            },
-
-            items: function() {
-                return uikitUtil.children(this.target);
-            },
+        isEmpty: {
+          get() {
+            return uikitUtil.isEmpty(this.items);
+          },
 
-            isEmpty: {
+          watch(empty) {
+            uikitUtil.toggleClass(this.target, this.clsEmpty, empty);
+          },
 
-                get: function() {
-                    return uikitUtil.isEmpty(this.items);
-                },
+          immediate: true },
 
-                watch: function(empty) {
-                    uikitUtil.toggleClass(this.target, this.clsEmpty, empty);
-                },
 
-                immediate: true
+        handles: {
+          get(_ref, el) {let { handle } = _ref;
+            return handle ? uikitUtil.$$(handle, el) : this.items;
+          },
 
-            },
+          watch(handles, prev) {
+            uikitUtil.css(prev, { touchAction: '', userSelect: '' });
+            uikitUtil.css(handles, { touchAction: uikitUtil.hasTouch ? 'none' : '', userSelect: 'none' }); // touchAction set to 'none' causes a performance drop in Chrome 80
+          },
 
-            handles: {
+          immediate: true } },
 
-                get: function(ref, el) {
-                    var handle = ref.handle;
 
-                    return handle ? uikitUtil.$$(handle, el) : this.items;
-                },
 
-                watch: function(handles, prev) {
-                    uikitUtil.css(prev, {touchAction: '', userSelect: ''});
-                    uikitUtil.css(handles, {touchAction: uikitUtil.hasTouch ? 'none' : '', userSelect: 'none'}); // touchAction set to 'none' causes a performance drop in Chrome 80
-                },
-
-                immediate: true
-
-            }
-
-        },
-
-        update: {
-
-            write: function(data) {
-
-                if (!this.drag || !uikitUtil.parent(this.placeholder)) {
-                    return;
-                }
+      update: {
+        write(data) {
+          if (!this.drag || !uikitUtil.parent(this.placeholder)) {
+            return;
+          }
 
-                var ref = this;
-                var ref_pos = ref.pos;
-                var x = ref_pos.x;
-                var y = ref_pos.y;
-                var ref_origin = ref.origin;
-                var offsetTop = ref_origin.offsetTop;
-                var offsetLeft = ref_origin.offsetLeft;
-                var placeholder = ref.placeholder;
+          const {
+            pos: { x, y },
+            origin: { offsetTop, offsetLeft },
+            placeholder } =
+          this;
 
-                uikitUtil.css(this.drag, {
-                    top: y - offsetTop,
-                    left: x - offsetLeft
-                });
+          uikitUtil.css(this.drag, {
+            top: y - offsetTop,
+            left: x - offsetLeft });
 
-                var sortable = this.getSortable(document.elementFromPoint(x, y));
 
-                if (!sortable) {
-                    return;
-                }
+          const sortable = this.getSortable(document.elementFromPoint(x, y));
 
-                var items = sortable.items;
+          if (!sortable) {
+            return;
+          }
 
-                if (items.some(uikitUtil.Transition.inProgress)) {
-                    return;
-                }
+          const { items } = sortable;
 
-                var target = findTarget(items, {x: x, y: y});
+          if (items.some(uikitUtil.Transition.inProgress)) {
+            return;
+          }
 
-                if (items.length && (!target || target === placeholder)) {
-                    return;
-                }
+          const target = findTarget(items, { x, y });
 
-                var previous = this.getSortable(placeholder);
-                var insertTarget = findInsertTarget(sortable.target, target, placeholder, x, y, sortable === previous && data.moved !== target);
+          if (items.length && (!target || target === placeholder)) {
+            return;
+          }
 
-                if (insertTarget === false) {
-                    return;
-                }
+          const previous = this.getSortable(placeholder);
+          const insertTarget = findInsertTarget(
+          sortable.target,
+          target,
+          placeholder,
+          x,
+          y,
+          sortable === previous && data.moved !== target);
 
-                if (insertTarget && placeholder === insertTarget) {
-                    return;
-                }
 
-                if (sortable !== previous) {
-                    previous.remove(placeholder);
-                    data.moved = target;
-                } else {
-                    delete data.moved;
-                }
+          if (insertTarget === false) {
+            return;
+          }
 
-                sortable.insert(placeholder, insertTarget);
+          if (insertTarget && placeholder === insertTarget) {
+            return;
+          }
 
-                this.touched.add(sortable);
-            },
+          if (sortable !== previous) {
+            previous.remove(placeholder);
+            data.moved = target;
+          } else {
+            delete data.moved;
+          }
 
-            events: ['move']
+          sortable.insert(placeholder, insertTarget);
 
+          this.touched.add(sortable);
         },
 
-        methods: {
-
-            init: function(e) {
-
-                var target = e.target;
-                var button = e.button;
-                var defaultPrevented = e.defaultPrevented;
-                var ref = this.items.filter(function (el) { return uikitUtil.within(target, el); });
-                var placeholder = ref[0];
-
-                if (!placeholder
-                    || defaultPrevented
-                    || button > 0
-                    || uikitUtil.isInput(target)
-                    || uikitUtil.within(target, ("." + (this.clsNoDrag)))
-                    || this.handle && !uikitUtil.within(target, this.handle)
-                ) {
-                    return;
-                }
-
-                e.preventDefault();
+        events: ['move'] },
 
-                this.touched = new Set([this]);
-                this.placeholder = placeholder;
-                this.origin = uikitUtil.assign({target: target, index: uikitUtil.index(placeholder)}, this.pos);
 
-                uikitUtil.on(document, uikitUtil.pointerMove, this.move);
-                uikitUtil.on(document, uikitUtil.pointerUp, this.end);
+      methods: {
+        init(e) {
+          const { target, button, defaultPrevented } = e;
+          const [placeholder] = this.items.filter((el) => uikitUtil.within(target, el));
 
-                if (!this.threshold) {
-                    this.start(e);
-                }
-
-            },
-
-            start: function(e) {
-
-                this.drag = appendDrag(this.$container, this.placeholder);
-                var ref = this.placeholder.getBoundingClientRect();
-                var left = ref.left;
-                var top = ref.top;
-                uikitUtil.assign(this.origin, {offsetLeft: this.pos.x - left, offsetTop: this.pos.y - top});
-
-                uikitUtil.addClass(this.drag, this.clsDrag, this.clsCustom);
-                uikitUtil.addClass(this.placeholder, this.clsPlaceholder);
-                uikitUtil.addClass(this.items, this.clsItem);
-                uikitUtil.addClass(document.documentElement, this.clsDragState);
-
-                uikitUtil.trigger(this.$el, 'start', [this, this.placeholder]);
-
-                trackScroll(this.pos);
-
-                this.move(e);
-            },
-
-            move: function(e) {
-
-                if (this.drag) {
-                    this.$emit('move');
-                } else if (Math.abs(this.pos.x - this.origin.x) > this.threshold || Math.abs(this.pos.y - this.origin.y) > this.threshold) {
-                    this.start(e);
-                }
+          if (
+          !placeholder ||
+          defaultPrevented ||
+          button > 0 ||
+          uikitUtil.isInput(target) ||
+          uikitUtil.within(target, "." + this.clsNoDrag) ||
+          this.handle && !uikitUtil.within(target, this.handle))
+          {
+            return;
+          }
 
-            },
+          e.preventDefault();
 
-            end: function() {
-                var this$1$1 = this;
+          this.touched = new Set([this]);
+          this.placeholder = placeholder;
+          this.origin = { target, index: uikitUtil.index(placeholder), ...this.pos };
 
+          uikitUtil.on(document, uikitUtil.pointerMove, this.move);
+          uikitUtil.on(document, uikitUtil.pointerUp, this.end);
 
-                uikitUtil.off(document, uikitUtil.pointerMove, this.move);
-                uikitUtil.off(document, uikitUtil.pointerUp, this.end);
-                uikitUtil.off(window, 'scroll', this.scroll);
+          if (!this.threshold) {
+            this.start(e);
+          }
+        },
 
-                if (!this.drag) {
-                    return;
-                }
+        start(e) {
+          this.drag = appendDrag(this.$container, this.placeholder);
+          const { left, top } = this.placeholder.getBoundingClientRect();
+          uikitUtil.assign(this.origin, { offsetLeft: this.pos.x - left, offsetTop: this.pos.y - top });
 
-                untrackScroll();
+          uikitUtil.addClass(this.drag, this.clsDrag, this.clsCustom);
+          uikitUtil.addClass(this.placeholder, this.clsPlaceholder);
+          uikitUtil.addClass(this.items, this.clsItem);
+          uikitUtil.addClass(document.documentElement, this.clsDragState);
 
-                var sortable = this.getSortable(this.placeholder);
+          uikitUtil.trigger(this.$el, 'start', [this, this.placeholder]);
 
-                if (this === sortable) {
-                    if (this.origin.index !== uikitUtil.index(this.placeholder)) {
-                        uikitUtil.trigger(this.$el, 'moved', [this, this.placeholder]);
-                    }
-                } else {
-                    uikitUtil.trigger(sortable.$el, 'added', [sortable, this.placeholder]);
-                    uikitUtil.trigger(this.$el, 'removed', [this, this.placeholder]);
-                }
+          trackScroll(this.pos);
 
-                uikitUtil.trigger(this.$el, 'stop', [this, this.placeholder]);
+          this.move(e);
+        },
 
-                uikitUtil.remove(this.drag);
-                this.drag = null;
+        move(e) {
+          if (this.drag) {
+            this.$emit('move');
+          } else if (
+          Math.abs(this.pos.x - this.origin.x) > this.threshold ||
+          Math.abs(this.pos.y - this.origin.y) > this.threshold)
+          {
+            this.start(e);
+          }
+        },
 
-                this.touched.forEach(function (ref) {
-                        var clsPlaceholder = ref.clsPlaceholder;
-                        var clsItem = ref.clsItem;
+        end() {
+          uikitUtil.off(document, uikitUtil.pointerMove, this.move);
+          uikitUtil.off(document, uikitUtil.pointerUp, this.end);
 
-                        return this$1$1.touched.forEach(function (sortable) { return uikitUtil.removeClass(sortable.items, clsPlaceholder, clsItem); }
-                    );
-                }
-                );
-                this.touched = null;
-                uikitUtil.removeClass(document.documentElement, this.clsDragState);
+          if (!this.drag) {
+            return;
+          }
 
-            },
+          untrackScroll();
 
-            insert: function(element, target) {
-                var this$1$1 = this;
+          const sortable = this.getSortable(this.placeholder);
 
+          if (this === sortable) {
+            if (this.origin.index !== uikitUtil.index(this.placeholder)) {
+              uikitUtil.trigger(this.$el, 'moved', [this, this.placeholder]);
+            }
+          } else {
+            uikitUtil.trigger(sortable.$el, 'added', [sortable, this.placeholder]);
+            uikitUtil.trigger(this.$el, 'removed', [this, this.placeholder]);
+          }
 
-                uikitUtil.addClass(this.items, this.clsItem);
+          uikitUtil.trigger(this.$el, 'stop', [this, this.placeholder]);
 
-                var insert = function () { return target
-                    ? uikitUtil.before(target, element)
-                    : uikitUtil.append(this$1$1.target, element); };
+          uikitUtil.remove(this.drag);
+          this.drag = null;
 
-                this.animate(insert);
+          for (const { clsPlaceholder, clsItem } of this.touched) {
+            for (const sortable of this.touched) {
+              uikitUtil.removeClass(sortable.items, clsPlaceholder, clsItem);
+            }
+          }
+          this.touched = null;
+          uikitUtil.removeClass(document.documentElement, this.clsDragState);
+        },
 
-            },
+        insert(element, target) {
+          uikitUtil.addClass(this.items, this.clsItem);
 
-            remove: function(element) {
+          const insert = () => target ? uikitUtil.before(target, element) : uikitUtil.append(this.target, element);
 
-                if (!uikitUtil.within(element, this.target)) {
-                    return;
-                }
+          this.animate(insert);
+        },
 
-                this.animate(function () { return uikitUtil.remove(element); });
+        remove(element) {
+          if (!uikitUtil.within(element, this.target)) {
+            return;
+          }
 
-            },
+          this.animate(() => uikitUtil.remove(element));
+        },
 
-            getSortable: function(element) {
-                do {
-                    var sortable = this.$getComponent(element, 'sortable');
+        getSortable(element) {
+          do {
+            const sortable = this.$getComponent(element, 'sortable');
 
-                    if (sortable && (sortable === this || this.group !== false && sortable.group === this.group)) {
-                        return sortable;
-                    }
-                } while ((element = uikitUtil.parent(element)));
+            if (
+            sortable && (
+            sortable === this || this.group !== false && sortable.group === this.group))
+            {
+              return sortable;
             }
+          } while (element = uikitUtil.parent(element));
+        } } };
 
-        }
 
-    };
 
-    var trackTimer;
+    let trackTimer;
     function trackScroll(pos) {
+      let last = Date.now();
+      trackTimer = setInterval(() => {
+        let { x, y } = pos;
+        y += uikitUtil.scrollTop(window);
+
+        const dist = (Date.now() - last) * 0.3;
+        last = Date.now();
+
+        uikitUtil.scrollParents(document.elementFromPoint(x, pos.y), /auto|scroll/).
+        reverse().
+        some((scrollEl) => {
+          let { scrollTop: scroll, scrollHeight } = scrollEl;
+
+          const { top, bottom, height } = uikitUtil.offset(uikitUtil.getViewport(scrollEl));
+
+          if (top < y && top + 35 > y) {
+            scroll -= dist;
+          } else if (bottom > y && bottom - 35 < y) {
+            scroll += dist;
+          } else {
+            return;
+          }
 
-        var last = Date.now();
-        trackTimer = setInterval(function () {
-
-            var x = pos.x;
-            var y = pos.y;
-            y += window.pageYOffset;
-
-            var dist = (Date.now() - last) * .3;
-            last = Date.now();
-
-            uikitUtil.scrollParents(document.elementFromPoint(x, pos.y), /auto|scroll/).reverse().some(function (scrollEl) {
-
-                var scroll = scrollEl.scrollTop;
-                var scrollHeight = scrollEl.scrollHeight;
-
-                var ref = uikitUtil.offset(uikitUtil.getViewport(scrollEl));
-                var top = ref.top;
-                var bottom = ref.bottom;
-                var height = ref.height;
-
-                if (top < y && top + 35 > y) {
-                    scroll -= dist;
-                } else if (bottom > y && bottom - 35 < y) {
-                    scroll += dist;
-                } else {
-                    return;
-                }
-
-                if (scroll > 0 && scroll < scrollHeight - height) {
-                    uikitUtil.scrollTop(scrollEl, scroll);
-                    return true;
-                }
-
-            });
-
-        }, 15);
-
+          if (scroll > 0 && scroll < scrollHeight - height) {
+            uikitUtil.scrollTop(scrollEl, scroll);
+            return true;
+          }
+        });
+      }, 15);
     }
 
     function untrackScroll() {
-        clearInterval(trackTimer);
+      clearInterval(trackTimer);
     }
 
     function appendDrag(container, element) {
-        var clone = uikitUtil.append(container, element.outerHTML.replace(/(^<)(?:li|tr)|(?:li|tr)(\/>$)/g, '$1div$2'));
+      const clone = uikitUtil.append(
+      container,
+      element.outerHTML.replace(/(^<)(?:li|tr)|(?:li|tr)(\/>$)/g, '$1div$2'));
+
+
+      uikitUtil.css(clone, 'margin', '0', 'important');
+      uikitUtil.css(clone, {
+        boxSizing: 'border-box',
+        width: element.offsetWidth,
+        height: element.offsetHeight,
+        padding: uikitUtil.css(element, 'padding') });
 
-        uikitUtil.css(clone, 'margin', '0', 'important');
-        uikitUtil.css(clone, uikitUtil.assign({
-            boxSizing: 'border-box',
-            width: element.offsetWidth,
-            height: element.offsetHeight
-        }, uikitUtil.css(element, ['paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom'])));
 
-        uikitUtil.height(clone.firstElementChild, uikitUtil.height(element.firstElementChild));
+      uikitUtil.height(clone.firstElementChild, uikitUtil.height(element.firstElementChild));
 
-        return clone;
+      return clone;
     }
 
     function findTarget(items, point) {
-        return items[uikitUtil.findIndex(items, function (item) { return uikitUtil.pointInRect(point, item.getBoundingClientRect()); })];
+      return items[uikitUtil.findIndex(items, (item) => uikitUtil.pointInRect(point, item.getBoundingClientRect()))];
     }
 
     function findInsertTarget(list, target, placeholder, x, y, sameList) {
-
-        if (!uikitUtil.children(list).length) {
-            return;
+      if (!uikitUtil.children(list).length) {
+        return;
+      }
+
+      const rect = target.getBoundingClientRect();
+      if (!sameList) {
+        if (!isHorizontal(list, placeholder)) {
+          return y < rect.top + rect.height / 2 ? target : target.nextElementSibling;
         }
 
-        var rect = target.getBoundingClientRect();
-        if (!sameList) {
-
-            if (!isHorizontal(list, placeholder)) {
-                return y < rect.top + rect.height / 2
-                    ? target
-                    : target.nextElementSibling;
-            }
-
-            return target;
-        }
-
-        var placeholderRect = placeholder.getBoundingClientRect();
-        var sameRow = linesIntersect(
-            [rect.top, rect.bottom],
-            [placeholderRect.top, placeholderRect.bottom]
-        );
+        return target;
+      }
 
-        var pointerPos = sameRow ? x : y;
-        var lengthProp = sameRow ? 'width' : 'height';
-        var startProp = sameRow ? 'left' : 'top';
-        var endProp = sameRow ? 'right' : 'bottom';
+      const placeholderRect = placeholder.getBoundingClientRect();
+      const sameRow = linesIntersect(
+      [rect.top, rect.bottom],
+      [placeholderRect.top, placeholderRect.bottom]);
 
-        var diff = placeholderRect[lengthProp] < rect[lengthProp] ? rect[lengthProp] - placeholderRect[lengthProp] : 0;
 
-        if (placeholderRect[startProp] < rect[startProp]) {
+      const pointerPos = sameRow ? x : y;
+      const lengthProp = sameRow ? 'width' : 'height';
+      const startProp = sameRow ? 'left' : 'top';
+      const endProp = sameRow ? 'right' : 'bottom';
 
-            if (diff && pointerPos < rect[startProp] + diff) {
-                return false;
-            }
+      const diff =
+      placeholderRect[lengthProp] < rect[lengthProp] ?
+      rect[lengthProp] - placeholderRect[lengthProp] :
+      0;
 
-            return target.nextElementSibling;
+      if (placeholderRect[startProp] < rect[startProp]) {
+        if (diff && pointerPos < rect[startProp] + diff) {
+          return false;
         }
 
-        if (diff && pointerPos > rect[endProp] - diff) {
-            return false;
-        }
+        return target.nextElementSibling;
+      }
 
-        return target;
+      if (diff && pointerPos > rect[endProp] - diff) {
+        return false;
+      }
+
+      return target;
     }
 
     function isHorizontal(list, placeholder) {
-
-        var single = uikitUtil.children(list).length === 1;
-
-        if (single) {
-            uikitUtil.append(list, placeholder);
-        }
-
-        var items = uikitUtil.children(list);
-        var isHorizontal = items.some(function (el, i) {
-            var rectA = el.getBoundingClientRect();
-            return items.slice(i + 1).some(function (el) {
-                var rectB = el.getBoundingClientRect();
-                return !linesIntersect([rectA.left, rectA.right], [rectB.left, rectB.right]);
-            });
+      const single = uikitUtil.children(list).length === 1;
+
+      if (single) {
+        uikitUtil.append(list, placeholder);
+      }
+
+      const items = uikitUtil.children(list);
+      const isHorizontal = items.some((el, i) => {
+        const rectA = el.getBoundingClientRect();
+        return items.slice(i + 1).some((el) => {
+          const rectB = el.getBoundingClientRect();
+          return !linesIntersect([rectA.left, rectA.right], [rectB.left, rectB.right]);
         });
+      });
 
-        if (single) {
-            uikitUtil.remove(placeholder);
-        }
+      if (single) {
+        uikitUtil.remove(placeholder);
+      }
 
-        return isHorizontal;
+      return isHorizontal;
     }
 
     function linesIntersect(lineA, lineB) {
-        return lineA[1] > lineB[0] && lineB[1] > lineA[0];
+      return lineA[1] > lineB[0] && lineB[1] > lineA[0];
     }
 
     if (typeof window !== 'undefined' && window.UIkit) {
-        window.UIkit.component('sortable', Component);
+      window.UIkit.component('sortable', Component);
     }
 
     return Component;