uikit 3.20.10-dev.de039bb62 → 3.20.11-dev.3a41e0fa6

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.20.10-dev.de039bb62",
+  "version": "3.20.11-dev.3a41e0fa6",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [
@@ -28,10 +28,10 @@
     "chokidar-cli": "^3.0.0",
     "clean-css": "^5.3.3",
     "dateformat": "^5.0.3",
-    "esbuild": "^0.20.2",
+    "esbuild": "^0.21.2",
     "eslint": "^9.1.1",
     "eslint-config-prettier": "^9.1.0",
-    "execa": "^8.0.1",
+    "execa": "^9.0.2",
     "fs-extra": "^11.2.0",
     "glob": "^10.3.12",
     "globals": "^15.0.0",
@@ -47,6 +47,7 @@
     "rollup-plugin-modify": "^3.0.0",
     "rtlcss": "^4.1.1",
     "semver": "^7.6.0",
+    "strip-css-comments": "^5.0.0",
     "svgo": "^3.2.0"
   },
   "scripts": {

package/src/js/api/observer.js

@@ -1,4 +1,4 @@
-import { hasOwn, includes, isArray, isFunction, isString } from 'uikit-util';
+import { hasOwn, includes, isArray, isFunction, isString, toNodes } from 'uikit-util';
 import { registerComputed } from './computed';
 import { registerWatch } from './watch';
 
@@ -28,7 +28,7 @@ function registerObservable(instance, observable) {
 
     const key = `_observe${instance._observers.length}`;
     if (isFunction(target) && !hasOwn(instance, key)) {
-        registerComputed(instance, key, () => target.call(instance, instance));
+        registerComputed(instance, key, () => toNodes(target.call(instance, instance)));
     }
 
     handler = isString(handler) ? instance[handler] : handler.bind(instance);

package/src/js/components/filter.js

@@ -5,7 +5,6 @@ import {
     attr,
     css,
     data,
-    each,
     fastdom,
     children as getChildren,
     hasClass,
@@ -139,7 +138,7 @@ function isEqualState(stateA, stateB) {
 }
 
 function applyState(state, target, children) {
-    const selector = getSelector(state);
+    const selector = Object.values(state.filter).join('');
 
     for (const el of children) {
         css(el, 'display', selector && !matches(el, selector) ? 'none' : '');
@@ -195,12 +194,6 @@ function matchFilter(
         : stateSort === sort && stateOrder === order;
 }
 
-function getSelector({ filter }) {
-    let selector = '';
-    each(filter, (value) => (selector += value || ''));
-    return selector;
-}
-
 function sortItems(nodes, sort, order) {
     return [...nodes].sort(
         (a, b) =>

package/src/js/components/internal/slider-transitioner.js

@@ -32,8 +32,14 @@ export default function (prev, next, dir, { center, easing, list }) {
             const timing = linear ? 'linear' : easing;
             duration -= Math.round(duration * clamp(percent, -1, 1));
 
+            // Force previous transition to be canceled in Safari
+            css(list, 'transitionProperty', 'none');
+
             this.translate(percent);
 
+            // Reset the forced transition property
+            css(list, 'transitionProperty', '');
+
             percent = prev ? percent : clamp(percent, 0, 1);
             triggerUpdate(this.getItemIn(), 'itemin', { percent, duration, timing, dir });
             prev &&

package/src/js/components/sortable.js

@@ -217,14 +217,14 @@ export default {
         move: throttle(function (e) {
             assign(this.pos, getEventPos(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
+            if (
+                !this.drag &&
+                (Math.abs(this.pos.x - this.origin.x) > this.threshold ||
+                    Math.abs(this.pos.y - this.origin.y) > this.threshold)
             ) {
                 this.start(e);
             }
+            this.$emit('move');
         }),
 
         end() {
@@ -437,10 +437,8 @@ function throttle(fn) {
     return function (...args) {
         if (!throttled) {
             throttled = true;
-            requestAnimationFrame(() => {
-                throttled = false;
-                fn.call(this, ...args);
-            });
+            fn.call(this, ...args);
+            requestAnimationFrame(() => (throttled = false));
         }
     };
 }

package/src/js/core/icon.js

@@ -35,6 +35,7 @@ import spinner from '../../images/components/spinner.svg';
 import totop from '../../images/components/totop.svg';
 import I18n from '../mixin/i18n';
 import Svg from '../mixin/svg';
+import { stringToSvg } from './svg';
 
 const icons = {
     spinner,
@@ -261,7 +262,7 @@ function getIcon(icon) {
     }
 
     if (!parsed[icon]) {
-        parsed[icon] = $((icons[applyRtl(icon)] || icons[icon]).trim());
+        parsed[icon] = stringToSvg(icons[applyRtl(icon)] || icons[icon]);
     }
 
     return parsed[icon].cloneNode(true);

package/src/js/core/svg.js

@@ -1,5 +1,4 @@
 import {
-    $,
     addClass,
     attr,
     css,
@@ -107,8 +106,7 @@ function parseSVG(svg, icon) {
         svg = parseSymbols(svg)[icon] || svg;
     }
 
-    svg = $(svg.substr(svg.indexOf('<svg')));
-    return svg?.hasChildNodes() && svg;
+    return stringToSvg(svg);
 }
 
 const symbolRe = /<symbol([^]*?id=(['"])(.+?)\2[^]*?<\/)symbol>/g;
@@ -133,3 +131,9 @@ function applyAnimation(el) {
         css(el, '--uk-animation-stroke', length);
     }
 }
+
+export function stringToSvg(string) {
+    const container = document.createElement('template');
+    container.innerHTML = string;
+    return container.content.firstElementChild;
+}

package/src/js/mixin/media.js

@@ -43,7 +43,7 @@ export default {
 function toMedia(value, element) {
     if (isString(value)) {
         if (startsWith(value, '@')) {
-            value = toFloat(css(element, `--uk-breakpoint-${value.substr(1)}`));
+            value = toFloat(css(element, `--uk-breakpoint-${value.slice(1)}`));
         } else if (isNaN(value)) {
             return value;
         }

package/src/js/mixin/parallax.js

@@ -260,14 +260,14 @@ function backgroundCoverFn(prop, el, stops, props) {
 }
 
 function getBackgroundPos(el, prop) {
-    return getCssValue(el, `background-position-${prop.substr(-1)}`, '');
+    return getCssValue(el, `background-position-${prop.slice(-1)}`, '');
 }
 
 function setBackgroundPosFn(bgProps, positions, props) {
     return function (css, percent) {
         for (const prop of bgProps) {
             const value = getValue(props[prop], percent);
-            css[`background-position-${prop.substr(-1)}`] = `calc(${positions[prop]} + ${value}px)`;
+            css[`background-position-${prop.slice(-1)}`] = `calc(${positions[prop]} + ${value}px)`;
         }
     };
 }

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

@@ -40,6 +40,11 @@ export default {
             }
 
             const target = this.parallaxTarget;
+
+            if (!target) {
+                return false;
+            }
+
             const start = toPx(this.parallaxStart, 'height', target, true);
             const end = toPx(this.parallaxEnd, 'height', target, true);
             const percent = ease(scrolledOver(target, start, end), this.parallaxEasing);

package/src/js/mixin/slider.js

@@ -176,7 +176,7 @@ export default {
             return this.getIndex(index, prevIndex);
         },
 
-        _show(prev, next, force) {
+        async _show(prev, next, force) {
             this._transitioner = this._getTransitioner(prev, next, this.dir, {
                 easing: force
                     ? next.offsetWidth < 600
@@ -188,7 +188,7 @@ export default {
 
             if (!force && !prev) {
                 this._translate(1);
-                return Promise.resolve();
+                return;
             }
 
             const { length } = this.stack;

package/src/js/util/filter.js

@@ -82,8 +82,8 @@ export function isSameSiteAnchor(el) {
 
 export function getTargetedElement(el) {
     if (isSameSiteAnchor(el)) {
-        el = toNode(el);
-        const id = decodeURIComponent(el.hash).substring(1);
-        return document.getElementById(id) || document.getElementsByName(id)[0];
+        const { hash, ownerDocument } = toNode(el);
+        const id = decodeURIComponent(hash).slice(1);
+        return ownerDocument.getElementById(id) || ownerDocument.getElementsByName(id)[0];
     }
 }

package/src/js/util/selector.js

@@ -47,9 +47,9 @@ const parseSelector = memoize((selector) => {
 });
 
 const parsePositionSelector = memoize((selector) => {
-    selector = selector.substr(1).trim();
+    selector = selector.slice(1).trim();
     const index = selector.indexOf(' ');
-    return ~index ? [selector.substring(0, index), selector.substring(index + 1)] : [selector, ''];
+    return ~index ? [selector.slice(0, index), selector.slice(index + 1)] : [selector, ''];
 });
 
 function _query(selector, context = document, queryFn) {