uikit 3.25.5-dev.f51ad10 → 3.25.6-dev.cbebfac

package/package.json

@@ -2,7 +2,7 @@
     "name": "uikit",
     "title": "UIkit",
     "description": "UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.",
-    "version": "3.25.5-dev.f51ad10",
+    "version": "3.25.6-dev.cbebfac",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/images/icons/link-external.svg

@@ -1,5 +1,4 @@
 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <polyline fill="none" stroke="#000" points="15 10.5 15 17 3 17 3 5 9.5 5" />
-    <line fill="none" stroke="#000" x1="8.22" y1="11.79" x2="17.01" y2="2.99" />
-    <polyline fill="none" stroke="#000" points="12.5 3 17 3 17 7.5" />
-</svg>
+    <polyline fill="none" stroke="#000" points="6 4 10 4 10 8" />
+    <line fill="none" stroke="#000" x1="4.5" y1="9.5" x2="10" y2="4" />
+</svg>

package/src/js/core/navbar.js

@@ -14,6 +14,7 @@ export default {
 
     data: {
         flip: false,
+        autoUpdate: false,
         delayShow: 200,
         clsDrop: 'uk-navbar-dropdown',
         selNavItem:

package/src/js/mixin/slider-drag.js

@@ -2,6 +2,7 @@ import {
     css,
     getEventPos,
     includes,
+    isEqual,
     isRtl,
     isTouch,
     noop,
@@ -25,15 +26,20 @@ export default {
     data: {
         draggable: true,
         threshold: 10,
+        angleThreshold: 45,
     },
 
     created() {
         for (const key of ['start', 'move', 'end']) {
             const fn = this[key];
             this[key] = (e) => {
-                const pos = getEventPos(e).x * (isRtl ? -1 : 1);
+                const pos = getEventPos(e);
 
-                this.prevPos = pos === this.pos ? this.prevPos : this.pos;
+                if (isRtl) {
+                    pos.x = -pos.x;
+                }
+
+                this.prevPos = isEqual(pos, this.pos) ? this.prevPos : this.pos;
                 this.pos = pos;
 
                 fn(e);
@@ -88,7 +94,7 @@ export default {
 
             if (this._transitioner) {
                 this.percent = this._transitioner.percent();
-                this.drag += this._transitioner.getDistance() * this.percent * this.dir;
+                this.drag.x += this._transitioner.getDistance() * this.percent * this.dir;
 
                 this._transitioner.cancel();
                 this._transitioner.translate(this.percent);
@@ -109,11 +115,11 @@ export default {
         },
 
         move(e) {
-            const distance = this.pos - this.drag;
-
+            const distance = this.pos.x - this.drag.x;
             if (
                 distance === 0 ||
-                this.prevPos === this.pos ||
+                (!this.dragging && getAngle(this.pos, this.drag) > this.angleThreshold) ||
+                this.prevPos.x === this.pos.x ||
                 (!this.dragging && Math.abs(distance) < this.threshold)
             ) {
                 return;
@@ -130,7 +136,7 @@ export default {
             let width = getDistance.call(this, prevIndex, nextIndex);
 
             while (nextIndex !== prevIndex && dis > width) {
-                this.drag -= width * this.dir;
+                this.drag.x -= width * this.dir;
 
                 prevIndex = nextIndex;
                 dis -= width;
@@ -192,7 +198,7 @@ export default {
                     this._show(false, this.index, true);
                     this._transitioner = null;
                 } else {
-                    const dirChange = this.dir < 0 === this.prevPos > this.pos;
+                    const dirChange = this.dir < 0 === this.prevPos.x > this.pos.x;
 
                     if (dirChange) {
                         trigger(this.slides[this.prevIndex], 'itemhidden', [this]);
@@ -231,3 +237,7 @@ function hasSelectableText(el) {
         toArray(el.childNodes).some((el) => el.nodeType === 3 && el.textContent.trim())
     );
 }
+
+function getAngle(pos1, pos2) {
+    return (Math.atan2(Math.abs(pos2.y - pos1.y), Math.abs(pos2.x - pos1.x)) * 180) / Math.PI;
+}

package/src/js/util/attr.js

@@ -1,4 +1,4 @@
-import { isFunction, isObject, isUndefined, toNode, toNodes } from './lang';
+import { isObject, isUndefined, toNode, toNodes } from './lang';
 
 export function attr(element, name, value) {
     if (isObject(name)) {
@@ -12,10 +12,6 @@ export function attr(element, name, value) {
         return toNode(element)?.getAttribute(name);
     } else {
         for (const el of toNodes(element)) {
-            if (isFunction(value)) {
-                value = value.call(el, attr(el, name));
-            }
-
             if (value === null) {
                 removeAttr(el, name);
             } else {

package/src/less/components/utility.less

@@ -149,6 +149,7 @@
  * Overflow fade
  * 1. Overflow
  * 2. Mask
+ * 3. Hide scrollbar
  */
 
 @property --uk-overflow-fade-start-opacity {
@@ -180,14 +181,13 @@
     -ms-overflow-style: -ms-autohiding-scrollbar;
     /* 2 */
     mask-image: linear-gradient(to var(--uk-overflow-fade-direction), rgba(0,0,0,var(--uk-overflow-fade-start-opacity)), #000 @overflow-fade-size, #000 ~'calc(100% - @{overflow-fade-size})', rgba(0,0,0,var(--uk-overflow-fade-end-opacity)));
+    /* 3 */
+    scrollbar-width: none;
 }
 
 .uk-overflow-fade-horizontal > *,
 .uk-overflow-fade-vertical > * { min-width: max-content; }
 
-.uk-overflow-fade-horizontal::-webkit-scrollbar,
-.uk-overflow-fade-vertical::-webkit-scrollbar { display: none; }
-
 
 /* Box Sizing
  ========================================================================== */

package/src/scss/components/utility.scss

@@ -132,6 +132,7 @@
  * Overflow fade
  * 1. Overflow
  * 2. Mask
+ * 3. Hide scrollbar
  */
 
 @property --uk-overflow-fade-start-opacity {
@@ -163,14 +164,13 @@
     -ms-overflow-style: -ms-autohiding-scrollbar;
     /* 2 */
     mask-image: linear-gradient(to var(--uk-overflow-fade-direction), rgba(0,0,0,var(--uk-overflow-fade-start-opacity)), #000 $overflow-fade-size, #000 string.unquote('calc(100% - #{$overflow-fade-size})'), rgba(0,0,0,var(--uk-overflow-fade-end-opacity)));
+    /* 3 */
+    scrollbar-width: none;
 }
 
 .uk-overflow-fade-horizontal > *,
 .uk-overflow-fade-vertical > * { min-width: max-content; }
 
-.uk-overflow-fade-horizontal::-webkit-scrollbar,
-.uk-overflow-fade-vertical::-webkit-scrollbar { display: none; }
-
 
 /* Box Sizing
  ========================================================================== */