uikit 3.11.1 → 3.11.2-dev.03e47c2ff

package/dist/js/components/tooltip.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,435 +7,403 @@
 })(this, (function (uikitUtil) { 'use strict';
 
     var Container = {
+      props: {
+        container: Boolean },
 
-        props: {
-            container: Boolean
-        },
-
-        data: {
-            container: true
-        },
 
-        computed: {
+      data: {
+        container: true },
 
-            container: function(ref) {
-                var container = ref.container;
 
-                return container === true && this.$container || container && uikitUtil.$(container);
-            }
-
-        }
-
-    };
+      computed: {
+        container(_ref) {let { container } = _ref;
+          return container === true && this.$container || container && uikitUtil.$(container);
+        } } };
 
     var Togglable = {
-
-        props: {
-            cls: Boolean,
-            animation: 'list',
-            duration: Number,
-            origin: String,
-            transition: String
+      props: {
+        cls: Boolean,
+        animation: 'list',
+        duration: Number,
+        origin: String,
+        transition: String },
+
+
+      data: {
+        cls: false,
+        animation: [false],
+        duration: 200,
+        origin: false,
+        transition: 'linear',
+        clsEnter: 'uk-togglabe-enter',
+        clsLeave: 'uk-togglabe-leave',
+
+        initProps: {
+          overflow: '',
+          height: '',
+          paddingTop: '',
+          paddingBottom: '',
+          marginTop: '',
+          marginBottom: '' },
+
+
+        hideProps: {
+          overflow: 'hidden',
+          height: 0,
+          paddingTop: 0,
+          paddingBottom: 0,
+          marginTop: 0,
+          marginBottom: 0 } },
+
+
+
+      computed: {
+        hasAnimation(_ref) {let { animation } = _ref;
+          return !!animation[0];
         },
 
-        data: {
-            cls: false,
-            animation: [false],
-            duration: 200,
-            origin: false,
-            transition: 'linear',
-            clsEnter: 'uk-togglabe-enter',
-            clsLeave: 'uk-togglabe-leave',
-
-            initProps: {
-                overflow: '',
-                height: '',
-                paddingTop: '',
-                paddingBottom: '',
-                marginTop: '',
-                marginBottom: ''
-            },
-
-            hideProps: {
-                overflow: 'hidden',
-                height: 0,
-                paddingTop: 0,
-                paddingBottom: 0,
-                marginTop: 0,
-                marginBottom: 0
-            }
-
-        },
+        hasTransition(_ref2) {let { animation } = _ref2;
+          return this.hasAnimation && animation[0] === true;
+        } },
 
-        computed: {
 
-            hasAnimation: function(ref) {
-                var animation = ref.animation;
+      methods: {
+        toggleElement(targets, toggle, animate) {
+          return new Promise((resolve) =>
+          Promise.all(
+          uikitUtil.toNodes(targets).map((el) => {
+            const show = uikitUtil.isBoolean(toggle) ? toggle : !this.isToggled(el);
 
-                return !!animation[0];
-            },
-
-            hasTransition: function(ref) {
-                var animation = ref.animation;
-
-                return this.hasAnimation && animation[0] === true;
+            if (!uikitUtil.trigger(el, "before" + (show ? 'show' : 'hide'), [this])) {
+              return Promise.reject();
             }
 
-        },
-
-        methods: {
-
-            toggleElement: function(targets, toggle, animate) {
-                var this$1$1 = this;
-
-                return new uikitUtil.Promise(function (resolve) { return uikitUtil.Promise.all(uikitUtil.toNodes(targets).map(function (el) {
-
-                        var show = uikitUtil.isBoolean(toggle) ? toggle : !this$1$1.isToggled(el);
-
-                        if (!uikitUtil.trigger(el, ("before" + (show ? 'show' : 'hide')), [this$1$1])) {
-                            return uikitUtil.Promise.reject();
-                        }
-
-                        var promise = (
-                            uikitUtil.isFunction(animate)
-                                ? animate
-                                : animate === false || !this$1$1.hasAnimation
-                                ? this$1$1._toggle
-                                : this$1$1.hasTransition
-                                    ? toggleHeight(this$1$1)
-                                    : toggleAnimation(this$1$1)
-                        )(el, show);
-
-                        var cls = show ? this$1$1.clsEnter : this$1$1.clsLeave;
+            const promise = (
+            uikitUtil.isFunction(animate) ?
+            animate :
+            animate === false || !this.hasAnimation ?
+            this._toggle :
+            this.hasTransition ?
+            toggleHeight(this) :
+            toggleAnimation(this))(
+            el, show);
+
+            const cls = show ? this.clsEnter : this.clsLeave;
+
+            uikitUtil.addClass(el, cls);
+
+            uikitUtil.trigger(el, show ? 'show' : 'hide', [this]);
+
+            const done = () => {
+              uikitUtil.removeClass(el, cls);
+              uikitUtil.trigger(el, show ? 'shown' : 'hidden', [this]);
+              this.$update(el);
+            };
+
+            return promise ?
+            promise.then(done, () => {
+              uikitUtil.removeClass(el, cls);
+              return Promise.reject();
+            }) :
+            done();
+          })).
+          then(resolve, uikitUtil.noop));
 
-                        uikitUtil.addClass(el, cls);
-
-                        uikitUtil.trigger(el, show ? 'show' : 'hide', [this$1$1]);
-
-                        var done = function () {
-                            uikitUtil.removeClass(el, cls);
-                            uikitUtil.trigger(el, show ? 'shown' : 'hidden', [this$1$1]);
-                            this$1$1.$update(el);
-                        };
+        },
 
-                        return promise ? promise.then(done, function () {
-                            uikitUtil.removeClass(el, cls);
-                            return uikitUtil.Promise.reject();
-                        }) : done();
+        isToggled(el) {if (el === void 0) {el = this.$el;}
+          [el] = uikitUtil.toNodes(el);
+          return uikitUtil.hasClass(el, this.clsEnter) ?
+          true :
+          uikitUtil.hasClass(el, this.clsLeave) ?
+          false :
+          this.cls ?
+          uikitUtil.hasClass(el, this.cls.split(' ')[0]) :
+          uikitUtil.isVisible(el);
+        },
 
-                    })).then(resolve, uikitUtil.noop); }
-                );
-            },
+        _toggle(el, toggled) {
+          if (!el) {
+            return;
+          }
 
-            isToggled: function(el) {
-                var assign;
+          toggled = Boolean(toggled);
 
-                if ( el === void 0 ) el = this.$el;
-                (assign = uikitUtil.toNodes(el), el = assign[0]);
-                return uikitUtil.hasClass(el, this.clsEnter)
-                    ? true
-                    : uikitUtil.hasClass(el, this.clsLeave)
-                        ? false
-                        : this.cls
-                            ? uikitUtil.hasClass(el, this.cls.split(' ')[0])
-                            : uikitUtil.isVisible(el);
-            },
+          let changed;
+          if (this.cls) {
+            changed = uikitUtil.includes(this.cls, ' ') || toggled !== uikitUtil.hasClass(el, this.cls);
+            changed && uikitUtil.toggleClass(el, this.cls, uikitUtil.includes(this.cls, ' ') ? undefined : toggled);
+          } else {
+            changed = toggled === el.hidden;
+            changed && (el.hidden = !toggled);
+          }
 
-            _toggle: function(el, toggled) {
+          uikitUtil.$$('[autofocus]', el).some((el) => uikitUtil.isVisible(el) ? el.focus() || true : el.blur());
 
-                if (!el) {
-                    return;
-                }
+          if (changed) {
+            uikitUtil.trigger(el, 'toggled', [toggled, this]);
+            this.$update(el);
+          }
+        } } };
 
-                toggled = Boolean(toggled);
 
-                var changed;
-                if (this.cls) {
-                    changed = uikitUtil.includes(this.cls, ' ') || toggled !== uikitUtil.hasClass(el, this.cls);
-                    changed && uikitUtil.toggleClass(el, this.cls, uikitUtil.includes(this.cls, ' ') ? undefined : toggled);
-                } else {
-                    changed = toggled === el.hidden;
-                    changed && (el.hidden = !toggled);
-                }
 
-                uikitUtil.$$('[autofocus]', el).some(function (el) { return uikitUtil.isVisible(el) ? el.focus() || true : el.blur(); });
+    function toggleHeight(_ref3) {let { isToggled, duration, initProps, hideProps, transition, _toggle } = _ref3;
+      return (el, show) => {
+        const inProgress = uikitUtil.Transition.inProgress(el);
+        const inner = el.hasChildNodes ?
+        uikitUtil.toFloat(uikitUtil.css(el.firstElementChild, 'marginTop')) +
+        uikitUtil.toFloat(uikitUtil.css(el.lastElementChild, 'marginBottom')) :
+        0;
+        const currentHeight = uikitUtil.isVisible(el) ? uikitUtil.height(el) + (inProgress ? 0 : inner) : 0;
 
-                if (changed) {
-                    uikitUtil.trigger(el, 'toggled', [toggled, this]);
-                    this.$update(el);
-                }
-            }
+        uikitUtil.Transition.cancel(el);
 
+        if (!isToggled(el)) {
+          _toggle(el, true);
         }
 
-    };
-
-    function toggleHeight(ref) {
-        var isToggled = ref.isToggled;
-        var duration = ref.duration;
-        var initProps = ref.initProps;
-        var hideProps = ref.hideProps;
-        var transition = ref.transition;
-        var _toggle = ref._toggle;
-
-        return function (el, show) {
-
-            var inProgress = uikitUtil.Transition.inProgress(el);
-            var inner = el.hasChildNodes ? uikitUtil.toFloat(uikitUtil.css(el.firstElementChild, 'marginTop')) + uikitUtil.toFloat(uikitUtil.css(el.lastElementChild, 'marginBottom')) : 0;
-            var currentHeight = uikitUtil.isVisible(el) ? uikitUtil.height(el) + (inProgress ? 0 : inner) : 0;
-
-            uikitUtil.Transition.cancel(el);
-
-            if (!isToggled(el)) {
-                _toggle(el, true);
-            }
-
-            uikitUtil.height(el, '');
-
-            // Update child components first
-            uikitUtil.fastdom.flush();
-
-            var endHeight = uikitUtil.height(el) + (inProgress ? 0 : inner);
-            uikitUtil.height(el, currentHeight);
-
-            return (show
-                ? uikitUtil.Transition.start(el, uikitUtil.assign({}, initProps, {overflow: 'hidden', height: endHeight}), Math.round(duration * (1 - currentHeight / endHeight)), transition)
-                : uikitUtil.Transition.start(el, hideProps, Math.round(duration * (currentHeight / endHeight)), transition).then(function () { return _toggle(el, false); })
-            ).then(function () { return uikitUtil.css(el, initProps); });
-
-        };
+        uikitUtil.height(el, '');
+
+        // Update child components first
+        uikitUtil.fastdom.flush();
+
+        const endHeight = uikitUtil.height(el) + (inProgress ? 0 : inner);
+        uikitUtil.height(el, currentHeight);
+
+        return (
+        show ?
+        uikitUtil.Transition.start(
+        el,
+        { ...initProps, overflow: 'hidden', height: endHeight },
+        Math.round(duration * (1 - currentHeight / endHeight)),
+        transition) :
+
+        uikitUtil.Transition.start(
+        el,
+        hideProps,
+        Math.round(duration * (currentHeight / endHeight)),
+        transition).
+        then(() => _toggle(el, false))).
+        then(() => uikitUtil.css(el, initProps));
+      };
     }
 
     function toggleAnimation(cmp) {
-        return function (el, show) {
+      return (el, show) => {
+        uikitUtil.Animation.cancel(el);
 
-            uikitUtil.Animation.cancel(el);
+        const { animation, duration, _toggle } = cmp;
 
-            var animation = cmp.animation;
-            var duration = cmp.duration;
-            var _toggle = cmp._toggle;
+        if (show) {
+          _toggle(el, true);
+          return uikitUtil.Animation.in(el, animation[0], duration, cmp.origin);
+        }
 
-            if (show) {
-                _toggle(el, true);
-                return uikitUtil.Animation.in(el, animation[0], duration, cmp.origin);
-            }
+        return uikitUtil.Animation.out(el, animation[1] || animation[0], duration, cmp.origin).then(() =>
+        _toggle(el, false));
 
-            return uikitUtil.Animation.out(el, animation[1] || animation[0], duration, cmp.origin).then(function () { return _toggle(el, false); });
-        };
+      };
     }
 
     var Position = {
+      props: {
+        pos: String,
+        offset: null,
+        flip: Boolean,
+        clsPos: String },
 
-        props: {
-            pos: String,
-            offset: null,
-            flip: Boolean,
-            clsPos: String
-        },
 
-        data: {
-            pos: ("bottom-" + (uikitUtil.isRtl ? 'right' : 'left')),
-            flip: true,
-            offset: false,
-            clsPos: ''
-        },
+      data: {
+        pos: "bottom-" + (uikitUtil.isRtl ? 'right' : 'left'),
+        flip: true,
+        offset: false,
+        clsPos: '' },
 
-        computed: {
-
-            pos: function(ref) {
-                var pos = ref.pos;
-
-                return pos.split('-').concat('center').slice(0, 2);
-            },
-
-            dir: function() {
-                return this.pos[0];
-            },
-
-            align: function() {
-                return this.pos[1];
-            }
 
+      computed: {
+        pos(_ref) {let { pos } = _ref;
+          return pos.split('-').concat('center').slice(0, 2);
         },
 
-        methods: {
-
-            positionAt: function(element, target, boundary) {
-
-                uikitUtil.removeClasses(element, ((this.clsPos) + "-(top|bottom|left|right)(-[a-z]+)?"));
-
-                var ref = this;
-                var offset = ref.offset;
-                var axis = this.getAxis();
-
-                if (!uikitUtil.isNumeric(offset)) {
-                    var node = uikitUtil.$(offset);
-                    offset = node
-                        ? uikitUtil.offset(node)[axis === 'x' ? 'left' : 'top'] - uikitUtil.offset(target)[axis === 'x' ? 'right' : 'bottom']
-                        : 0;
-                }
-
-                var ref$1 = uikitUtil.positionAt(
-                    element,
-                    target,
-                    axis === 'x' ? ((uikitUtil.flipPosition(this.dir)) + " " + (this.align)) : ((this.align) + " " + (uikitUtil.flipPosition(this.dir))),
-                    axis === 'x' ? ((this.dir) + " " + (this.align)) : ((this.align) + " " + (this.dir)),
-                    axis === 'x' ? ("" + (this.dir === 'left' ? -offset : offset)) : (" " + (this.dir === 'top' ? -offset : offset)),
-                    null,
-                    this.flip,
-                    boundary
-                ).target;
-                var x = ref$1.x;
-                var y = ref$1.y;
-
-                this.dir = axis === 'x' ? x : y;
-                this.align = axis === 'x' ? y : x;
-
-                uikitUtil.toggleClass(element, ((this.clsPos) + "-" + (this.dir) + "-" + (this.align)), this.offset === false);
-
-            },
-
-            getAxis: function() {
-                return this.dir === 'top' || this.dir === 'bottom' ? 'y' : 'x';
-            }
-
-        }
-
-    };
-
-    var obj;
-
-    var Component = {
-
-        mixins: [Container, Togglable, Position],
-
-        args: 'title',
-
-        props: {
-            delay: Number,
-            title: String
+        dir() {
+          return this.pos[0];
         },
 
-        data: {
-            pos: 'top',
-            title: '',
-            delay: 0,
-            animation: ['uk-animation-scale-up'],
-            duration: 100,
-            cls: 'uk-active',
-            clsPos: 'uk-tooltip'
+        align() {
+          return this.pos[1];
+        } },
+
+
+      methods: {
+        positionAt(element, target, boundary) {
+          uikitUtil.removeClasses(element, this.clsPos + "-(top|bottom|left|right)(-[a-z]+)?");
+
+          let { offset } = this;
+          const axis = this.getAxis();
+
+          if (!uikitUtil.isNumeric(offset)) {
+            const node = uikitUtil.$(offset);
+            offset = node ?
+            uikitUtil.offset(node)[axis === 'x' ? 'left' : 'top'] -
+            uikitUtil.offset(target)[axis === 'x' ? 'right' : 'bottom'] :
+            0;
+          }
+
+          const { x, y } = uikitUtil.positionAt(
+          element,
+          target,
+          axis === 'x' ?
+          uikitUtil.flipPosition(this.dir) + " " + this.align :
+          this.align + " " + uikitUtil.flipPosition(this.dir),
+          axis === 'x' ? this.dir + " " + this.align : this.align + " " + this.dir,
+          axis === 'x' ? "" + (
+          this.dir === 'left' ? -offset : offset) : " " + (
+          this.dir === 'top' ? -offset : offset),
+          null,
+          this.flip,
+          boundary).
+          target;
+
+          this.dir = axis === 'x' ? x : y;
+          this.align = axis === 'x' ? y : x;
+
+          uikitUtil.toggleClass(element, this.clsPos + "-" + this.dir + "-" + this.align, this.offset === false);
         },
 
-        beforeConnect: function() {
-            this._hasTitle = uikitUtil.hasAttr(this.$el, 'title');
-            uikitUtil.attr(this.$el, 'title', '');
-            this.updateAria(false);
-            makeFocusable(this.$el);
-        },
+        getAxis() {
+          return this.dir === 'top' || this.dir === 'bottom' ? 'y' : 'x';
+        } } };
 
-        disconnected: function() {
-            this.hide();
-            uikitUtil.attr(this.$el, 'title', this._hasTitle ? this.title : null);
+    var Component = {
+      mixins: [Container, Togglable, Position],
+
+      args: 'title',
+
+      props: {
+        delay: Number,
+        title: String },
+
+
+      data: {
+        pos: 'top',
+        title: '',
+        delay: 0,
+        animation: ['uk-animation-scale-up'],
+        duration: 100,
+        cls: 'uk-active',
+        clsPos: 'uk-tooltip' },
+
+
+      beforeConnect() {
+        this._hasTitle = uikitUtil.hasAttr(this.$el, 'title');
+        uikitUtil.attr(this.$el, 'title', '');
+        this.updateAria(false);
+        makeFocusable(this.$el);
+      },
+
+      disconnected() {
+        this.hide();
+        uikitUtil.attr(this.$el, 'title', this._hasTitle ? this.title : null);
+      },
+
+      methods: {
+        show() {
+          if (this.isToggled(this.tooltip || null) || !this.title) {
+            return;
+          }
+
+          this._unbind = uikitUtil.once(
+          document, "show keydown " +
+          uikitUtil.pointerDown,
+          this.hide,
+          false,
+          (e) =>
+          e.type === uikitUtil.pointerDown && !uikitUtil.within(e.target, this.$el) ||
+          e.type === 'keydown' && e.keyCode === 27 ||
+          e.type === 'show' && e.detail[0] !== this && e.detail[0].$name === this.$name);
+
+
+          clearTimeout(this.showTimer);
+          this.showTimer = setTimeout(this._show, this.delay);
         },
 
-        methods: {
-
-            show: function() {
-                var this$1$1 = this;
-
-
-                if (this.isToggled(this.tooltip || null) || !this.title) {
-                    return;
-                }
-
-                this._unbind = uikitUtil.once(document, ("show keydown " + uikitUtil.pointerDown), this.hide, false, function (e) { return e.type === uikitUtil.pointerDown && !uikitUtil.within(e.target, this$1$1.$el)
-                    || e.type === 'keydown' && e.keyCode === 27
-                    || e.type === 'show' && e.detail[0] !== this$1$1 && e.detail[0].$name === this$1$1.$name; }
-                );
+        async hide() {
+          if (uikitUtil.matches(this.$el, 'input:focus')) {
+            return;
+          }
 
-                clearTimeout(this.showTimer);
-                this.showTimer = setTimeout(this._show, this.delay);
-            },
+          clearTimeout(this.showTimer);
 
-            hide: function() {
-                var this$1$1 = this;
+          if (!this.isToggled(this.tooltip || null)) {
+            return;
+          }
 
+          await this.toggleElement(this.tooltip, false, false);
+          uikitUtil.remove(this.tooltip);
+          this.tooltip = null;
+          this._unbind();
+        },
 
-                if (uikitUtil.matches(this.$el, 'input:focus')) {
-                    return;
-                }
-
-                clearTimeout(this.showTimer);
-
-                if (!this.isToggled(this.tooltip || null)) {
-                    return;
-                }
-
-                this.toggleElement(this.tooltip, false, false).then(function () {
-                    uikitUtil.remove(this$1$1.tooltip);
-                    this$1$1.tooltip = null;
-                    this$1$1._unbind();
-                });
-            },
-
-            _show: function() {
-                var this$1$1 = this;
+        _show() {
+          this.tooltip = uikitUtil.append(
+          this.container, "<div class=\"" +
+          this.clsPos + "\"> <div class=\"" +
+          this.clsPos + "-inner\">" + this.title + "</div> </div>");
 
 
-                this.tooltip = uikitUtil.append(this.container,
-                    ("<div class=\"" + (this.clsPos) + "\"> <div class=\"" + (this.clsPos) + "-inner\">" + (this.title) + "</div> </div>")
-                );
 
-                uikitUtil.on(this.tooltip, 'toggled', function (e, toggled) {
+          uikitUtil.on(this.tooltip, 'toggled', (e, toggled) => {
+            this.updateAria(toggled);
 
-                    this$1$1.updateAria(toggled);
+            if (!toggled) {
+              return;
+            }
 
-                    if (!toggled) {
-                        return;
-                    }
+            this.positionAt(this.tooltip, this.$el);
 
-                    this$1$1.positionAt(this$1$1.tooltip, this$1$1.$el);
+            this.origin =
+            this.getAxis() === 'y' ?
+            uikitUtil.flipPosition(this.dir) + "-" + this.align :
+            this.align + "-" + uikitUtil.flipPosition(this.dir);
+          });
 
-                    this$1$1.origin = this$1$1.getAxis() === 'y'
-                        ? ((uikitUtil.flipPosition(this$1$1.dir)) + "-" + (this$1$1.align))
-                        : ((this$1$1.align) + "-" + (uikitUtil.flipPosition(this$1$1.dir)));
-                });
+          this.toggleElement(this.tooltip, true);
+        },
 
-                this.toggleElement(this.tooltip, true);
+        updateAria(toggled) {
+          uikitUtil.attr(this.$el, 'aria-expanded', toggled);
+        } },
 
-            },
 
-            updateAria: function(toggled) {
-                uikitUtil.attr(this.$el, 'aria-expanded', toggled);
-            }
+      events: {
+        focus: 'show',
+        blur: 'hide',
 
+        [uikitUtil.pointerEnter + " " + uikitUtil.pointerLeave](e) {
+          if (!uikitUtil.isTouch(e)) {
+            this[e.type === uikitUtil.pointerEnter ? 'show' : 'hide']();
+          }
         },
 
-        events: ( obj = {
+        // Clicking a button does not give it focus on all browsers and platforms
+        // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#clicking_and_focus
+        [uikitUtil.pointerDown](e) {
+          if (uikitUtil.isTouch(e)) {
+            this.show();
+          }
+        } } };
 
-            focus: 'show',
-            blur: 'hide'
 
-        }, obj[(uikitUtil.pointerEnter + " " + uikitUtil.pointerLeave)] = function (e) {
-                if (!uikitUtil.isTouch(e)) {
-                    this[e.type === uikitUtil.pointerEnter ? 'show' : 'hide']();
-                }
-            }, obj[uikitUtil.pointerDown] = function (e) {
-                if (uikitUtil.isTouch(e)) {
-                    this.show();
-                }
-            }, obj )
-
-    };
 
     function makeFocusable(el) {
-        if (!uikitUtil.isFocusable(el)) {
-            uikitUtil.attr(el, 'tabindex', '0');
-        }
+      if (!uikitUtil.isFocusable(el)) {
+        uikitUtil.attr(el, 'tabindex', '0');
+      }
     }
 
     if (typeof window !== 'undefined' && window.UIkit) {
-        window.UIkit.component('tooltip', Component);
+      window.UIkit.component('tooltip', Component);
     }
 
     return Component;