uikit 3.13.2-dev.13a8eb3ff → 3.13.2-dev.9467fe2c3

package/dist/js/uikit.js

@@ -1,4 +1,4 @@
-/*! UIkit 3.13.2-dev.13a8eb3ff | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
+/*! UIkit 3.13.2-dev.9467fe2c3 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
 
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -767,21 +767,22 @@
           property = propName(property);
 
           if (isUndefined(value)) {
-            return getStyle(element, property);
-          } else if (!value && !isNumber(value)) {
-            element.style.removeProperty(property);
+            return getComputedStyle(element).getPropertyValue(property);
           } else {
             element.style.setProperty(
             property,
-            isNumeric(value) && !cssNumber[property] ? value + "px" : value,
+            isNumeric(value) && !cssNumber[property] ?
+            value + "px" :
+            value || isNumber(value) ?
+            value :
+            '',
             priority);
 
           }
         } else if (isArray(property)) {
-          const styles = getStyles(element);
           const props = {};
           for (const prop of property) {
-            props[prop] = styles[propName(prop)];
+            props[prop] = css(element, prop);
           }
           return props;
         } else if (isObject(property)) {
@@ -792,19 +793,9 @@
       return elements[0];
     }
 
-    function getStyles(element, pseudoElt) {
-      return toWindow(element).getComputedStyle(element, pseudoElt);
-    }
-
-    function getStyle(element, property, pseudoElt) {
-      return getStyles(element, pseudoElt)[property];
-    }
-
     const propertyRe = /^\s*(["'])?(.*?)\1\s*$/;
-    function getCssVar(name) {
-      return getStyles(document.documentElement).
-      getPropertyValue("--uk-" + name).
-      replace(propertyRe, '$2');
+    function getCssVar(name, element) {if (element === void 0) {element = document.documentElement;}
+      return css(element, "--uk-" + name).replace(propertyRe, '$2');
     }
 
     // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-setproperty
@@ -813,6 +804,10 @@
     const cssPrefixes = ['webkit', 'moz'];
 
     function vendorPropName(name) {
+      if (name[0] === '-') {
+        return name;
+      }
+
       name = hyphenate(name);
 
       const { style } = document.documentElement;
@@ -2894,7 +2889,7 @@
     UIkit.data = '__uikit__';
     UIkit.prefix = 'uk-';
     UIkit.options = {};
-    UIkit.version = '3.13.2-dev.13a8eb3ff';
+    UIkit.version = '3.13.2-dev.9467fe2c3';
 
     globalAPI(UIkit);
     hooksAPI(UIkit);
@@ -3386,7 +3381,7 @@
           mute(this.$el);
         }
 
-        this.registerObserver(observeIntersection(this.$el, () => this.$emit('scroll'), {}, false));
+        this.registerObserver(observeIntersection(this.$el, () => this.$emit(), {}, false));
       },
 
       update: {
@@ -3497,15 +3492,13 @@
       props: {
         pos: String,
         offset: null,
-        flip: Boolean,
-        clsPos: String },
+        flip: Boolean },
 
 
       data: {
         pos: "bottom-" + (isRtl ? 'right' : 'left'),
         flip: true,
-        offset: false,
-        clsPos: '' },
+        offset: false },
 
 
       connected() {
@@ -3516,13 +3509,11 @@
 
       methods: {
         positionAt(element, target, boundary) {
-          removeClasses(element, this.clsPos + "-(top|bottom|left|right)(-[a-z]+)?");
-
-          let { offset: offset$1 } = this;
           const axis = this.getAxis();
           const dir = this.pos[0];
           const align = this.pos[1];
 
+          let { offset: offset$1 } = this;
           if (!isNumeric(offset$1)) {
             const node = $(offset$1);
             offset$1 = node ?
@@ -3530,6 +3521,7 @@
             offset(target)[axis === 'x' ? 'right' : 'bottom'] :
             0;
           }
+          offset$1 += toPx(getCssVar('position-margin-offset', element));
 
           const { x, y } = positionAt(
           element,
@@ -3546,8 +3538,6 @@
 
           this.dir = axis === 'x' ? x : y;
           this.align = axis === 'x' ? y : x;
-
-          toggleClass(element, this.clsPos + "-" + this.dir + "-" + this.align, this.offset === false);
         },
 
         getAxis() {
@@ -3589,7 +3579,7 @@
       },
 
       connected() {
-        this.clsPos = this.clsDrop = this.$props.clsDrop || "uk-" + this.$options.name;
+        this.clsDrop = this.$props.clsDrop || "uk-" + this.$options.name;
         addClass(this.$el, this.clsDrop);
 
         if (this.toggle && !this.target) {
@@ -3655,7 +3645,7 @@
           if (this.isToggled()) {
             this.hide(false);
           } else {
-            this.show(toggle.$el, false);
+            this.show(toggle == null ? void 0 : toggle.$el, false);
           }
         } },
 
@@ -3667,7 +3657,7 @@
 
         handler(e, toggle) {
           e.preventDefault();
-          this.show(toggle.$el);
+          this.show(toggle == null ? void 0 : toggle.$el);
         } },
 
 
@@ -3878,23 +3868,20 @@
         },
 
         position() {
-          const boundary = this.boundary === true ? window : query(this.boundary, this.$el);
+          const boundary = query(this.boundary, this.$el) || window;
           removeClass(this.$el, this.clsDrop + "-stack");
           toggleClass(this.$el, this.clsDrop + "-boundary", this.boundaryAlign);
 
           const boundaryOffset = offset(boundary);
-          const alignTo = this.boundaryAlign ? boundaryOffset : offset(this.target);
+          const targetOffset = offset(this.target);
+          const alignTo = this.boundaryAlign ? boundaryOffset : targetOffset;
 
           if (this.align === 'justify') {
             const prop = this.getAxis() === 'y' ? 'width' : 'height';
             css(this.$el, prop, alignTo[prop]);
           } else if (
-          boundary &&
           this.$el.offsetWidth >
-          Math.max(
-          boundaryOffset.right - alignTo.left,
-          alignTo.right - boundaryOffset.left))
-
+          Math.max(boundaryOffset.right - alignTo.left, alignTo.right - boundaryOffset.left))
           {
             addClass(this.$el, this.clsDrop + "-stack");
           }
@@ -5788,10 +5775,16 @@
           return this.dropbar;
         },
 
-        handler() {
+        handler(_, _ref9) {let { $el } = _ref9;
+          if (!hasClass($el, this.clsDrop)) {
+            return;
+          }
+
           if (!parent(this.dropbar)) {
             after(this.dropbarAnchor || this.$el, this.dropbar);
           }
+
+          addClass($el, this.clsDrop + "-dropbar");
         } },
 
 
@@ -5806,17 +5799,15 @@
           return this.dropbar;
         },
 
-        handler(_, _ref9) {let { $el, dir } = _ref9;
+        handler(_, _ref10) {let { $el, dir } = _ref10;
           if (!hasClass($el, this.clsDrop)) {
             return;
           }
 
-          this.clsDrop && addClass($el, this.clsDrop + "-dropbar");
-
           if (dir === 'bottom') {
             this.transitionTo(
-            $el.offsetHeight +
-            toFloat(css($el, 'marginTop')) +
+            offset($el).bottom -
+            offset(this.dropbar).top +
             toFloat(css($el, 'marginBottom')),
             $el);
 
@@ -5835,7 +5826,7 @@
           return this.dropbar;
         },
 
-        handler(e, _ref10) {let { $el } = _ref10;
+        handler(e, _ref11) {let { $el } = _ref11;
           const active = this.getActive();
 
           if (
@@ -5859,7 +5850,7 @@
           return this.dropbar;
         },
 
-        handler(_, _ref11) {let { $el } = _ref11;
+        handler(_, _ref12) {let { $el } = _ref12;
           if (!hasClass($el, this.clsDrop)) {
             return;
           }
@@ -10720,8 +10711,7 @@
         delay: 0,
         animation: ['uk-animation-scale-up'],
         duration: 100,
-        cls: 'uk-active',
-        clsPos: 'uk-tooltip' },
+        cls: 'uk-active' },
 
 
       beforeConnect() {
@@ -10776,9 +10766,9 @@
 
         _show() {
           this.tooltip = append(
-          this.container, "<div class=\"" +
-          this.clsPos + "\"> <div class=\"" +
-          this.clsPos + "-inner\">" + this.title + "</div> </div>");
+          this.container, "<div class=\"uk-" +
+          this.$options.name + "\"> <div class=\"uk-" +
+          this.$options.name + "-inner\">" + this.title + "</div> </div>");