uikit 3.21.13 → 3.21.14-dev.2e8a07c7e

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.21.13",
+  "version": "3.21.14-dev.2e8a07c7e",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [
@@ -22,7 +22,7 @@
   "devDependencies": {
     "@eslint/js": "^9.6.0",
     "@rollup/plugin-alias": "^5.1.0",
-    "@rollup/plugin-replace": "^5.0.5",
+    "@rollup/plugin-replace": "^6.0.1",
     "archiver": "^7.0.1",
     "camelcase": "^8.0.0",
     "chokidar-cli": "^3.0.0",
@@ -35,7 +35,7 @@
     "fs-extra": "^11.2.0",
     "glob": "^11.0.0",
     "globals": "^15.7.0",
-    "inquirer": "^11.0.1",
+    "inquirer": "^12.0.0",
     "less": "^4.2.0",
     "minimist": "^1.2.8",
     "number-precision": "^1.6.0",

package/src/images/icons/arrow-down-arrow-up.svg

@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <line fill="none" stroke="#000" x1="7" y1="3.38" x2="7" y2="15.38" />
+    <polyline fill="none" stroke="#000" points="10.18 12.75 7 15.93 3.83 12.76" />
+    <line fill="none" stroke="#000" x1="13" y1="16.62" x2="13" y2="4.62" />
+    <polyline fill="none" stroke="#000" points="9.82 7.25 13 4.07 16.17 7.24" />
+</svg>

package/src/images/icons/arrow-down.svg

@@ -1,4 +1,4 @@
 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <polygon points="10.5,16.08 5.63,10.66 6.37,10 10.5,14.58 14.63,10 15.37,10.66" />
-    <line fill="none" stroke="#000" x1="10.5" y1="4" x2="10.5" y2="15" />
-</svg>
+    <line fill="none" stroke="#000" x1="10" y1="3.48" x2="10" y2="15.48" />
+    <polyline fill="none" stroke="#000" points="6.16 12 10 15.84 13.84 12" />
+</svg>

package/src/images/icons/arrow-left.svg

@@ -1,4 +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="10 14 5 9.5 10 5" />
-    <line fill="none" stroke="#000" x1="16" y1="9.5" x2="5" y2="9.52" />
-</svg>
+    <line fill="none" stroke="#000" x1="16.53" y1="10" x2="4.53" y2="10" />
+    <polyline fill="none" stroke="#000" points="8 6.16 4.18 10 8 13.84" />
+</svg>

package/src/images/icons/arrow-right.svg

@@ -1,4 +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="10 5 15 9.5 10 14" />
-    <line fill="none" stroke="#000" x1="4" y1="9.5" x2="15" y2="9.5" />
-</svg>
+    <line fill="none" stroke="#000" x1="3.47" y1="10" x2="15.47" y2="10" />
+    <polyline fill="none" stroke="#000" points="11.98 13.84 15.82 10 11.98 6.16" />
+</svg>

package/src/images/icons/arrow-up-right.svg

@@ -1,4 +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="16 10 16 4 10 4"/>
-    <line fill="none" stroke="#000" x1="4" y1="16" x2="16" y2="4"/>
-</svg>
+    <line fill="none" stroke="#000" x1="4.5" y1="15.53" x2="16.5" y2="3.53" />
+    <polyline fill="none" stroke="#000" points="16.5 9 16.5 3.5 11 3.5" />
+</svg>

package/src/images/icons/arrow-up.svg

@@ -1,4 +1,4 @@
 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <polygon points="10.5,4 15.37,9.4 14.63,10.08 10.5,5.49 6.37,10.08 5.63,9.4" />
-    <line fill="none" stroke="#000" x1="10.5" y1="16" x2="10.5" y2="5" />
-</svg>
+    <line fill="none" stroke="#000" x1="10" y1="16.53" x2="10" y2="4.53" />
+    <polyline fill="none" stroke="#000" points="13.84 8 10 4.17 6.16 8" />
+</svg>

package/src/images/icons/close-circle.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <circle fill="none" stroke="#000" stroke-width="1.1" cx="10" cy="10" r="9" />
+    <line fill="none" stroke="#000" x1="13.18" y1="6.82" x2="6.82" y2="13.18" />
+    <line fill="none" stroke="#000" x1="6.82" y1="6.82" x2="13.18" y2="13.18" />
+</svg>

package/src/images/icons/cloud-download.svg

@@ -1,5 +1,5 @@
 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <path fill="none" stroke="#000" stroke-width="1.1" d="M6.5,14.61 L3.75,14.61 C1.96,14.61 0.5,13.17 0.5,11.39 C0.5,9.76 1.72,8.41 3.3,8.2 C3.38,5.31 5.75,3 8.68,3 C11.19,3 13.31,4.71 13.89,7.02 C14.39,6.8 14.93,6.68 15.5,6.68 C17.71,6.68 19.5,8.45 19.5,10.64 C19.5,12.83 17.71,14.6 15.5,14.6 L12.5,14.6" />
-    <polyline fill="none" stroke="#000" points="11.75 16 9.5 18.25 7.25 16" />
-    <path fill="none" stroke="#000" d="M9.5,18 L9.5,9.5" />
-</svg>
+    <path fill="none" stroke="#000" stroke-width="1.1" d="M6.5,13.28h-2.75c-1.79,0-3.25-1.44-3.25-3.22,0-1.63,1.22-2.98,2.8-3.19.08-2.89,2.45-5.2,5.38-5.2,2.51,0,4.63,1.71,5.21,4.02.5-.22,1.04-.34,1.61-.34,2.21,0,4,1.77,4,3.96s-1.79,3.96-4,3.96h-3" />
+    <path fill="none" stroke="#000" d="M9.5,18.17v-10" />
+    <polyline fill="none" stroke="#000" points="12.67 15.66 9.5 18.83 6.33 15.66" />
+</svg>

package/src/images/icons/cloud-upload.svg

@@ -1,5 +1,5 @@
 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <path fill="none" stroke="#000" stroke-width="1.1" d="M6.5,14.61 L3.75,14.61 C1.96,14.61 0.5,13.17 0.5,11.39 C0.5,9.76 1.72,8.41 3.31,8.2 C3.38,5.31 5.75,3 8.68,3 C11.19,3 13.31,4.71 13.89,7.02 C14.39,6.8 14.93,6.68 15.5,6.68 C17.71,6.68 19.5,8.45 19.5,10.64 C19.5,12.83 17.71,14.6 15.5,14.6 L12.5,14.6" />
-    <polyline fill="none" stroke="#000" points="7.25 11.75 9.5 9.5 11.75 11.75" />
-    <path fill="none" stroke="#000" d="M9.5,18 L9.5,9.5" />
-</svg>
+    <path fill="none" stroke="#000" stroke-width="1.1" d="M6.5,13.77h-2.75c-1.79,0-3.25-1.44-3.25-3.22,0-1.63,1.22-2.98,2.81-3.19.07-2.89,2.44-5.2,5.37-5.2,2.51,0,4.63,1.71,5.21,4.02.5-.22,1.04-.34,1.61-.34,2.21,0,4,1.77,4,3.96s-1.79,3.96-4,3.96h-3" />
+    <path fill="none" stroke="#000" d="M9.51,9.34v9" />
+    <polyline fill="none" stroke="#000" points="6.34 11.85 9.51 8.68 12.68 11.85" />
+</svg>

package/src/images/icons/download.svg

@@ -1,5 +1,5 @@
 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <polyline fill="none" stroke="#000" points="14,10 9.5,14.5 5,10" />
-    <rect x="3" y="17" width="13" height="1" />
-    <line fill="none" stroke="#000" x1="9.5" y1="13.91" x2="9.5" y2="3" />
-</svg>
+    <line fill="none" stroke="#000" x1="10" y1="2.09" x2="10" y2="14.09" />
+    <polyline fill="none" stroke="#000" points="6.16 10.62 10 14.46 13.84 10.62" />
+    <line stroke="#000" x1="3.5" y1="17.5" x2="16.5" y2="17.5" />
+</svg>

package/src/images/icons/expand.svg

@@ -1,6 +1,6 @@
 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <polygon points="13 2 18 2 18 7 17 7 17 3 13 3" />
-    <polygon points="2 13 3 13 3 17 7 17 7 18 2 18" />
-    <path fill="none" stroke="#000" stroke-width="1.1" d="M11,9 L17,3" />
-    <path fill="none" stroke="#000" stroke-width="1.1" d="M3,17 L9,11" />
-</svg>
+    <path fill="none" stroke="#000" stroke-width="1.1" d="M2.48,17.52l6.52-6.52" />
+    <polyline fill="none" stroke="#000" points="6.97 17.52 2.48 17.52 2.48 13.03" />
+    <path fill="none" stroke="#000" stroke-width="1.1" d="M17.52,2.48l-6.52,6.52" />
+    <polyline fill="none" stroke="#000" points="13.03 2.48 17.52 2.48 17.52 6.97" />
+</svg>

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

@@ -1,5 +1,5 @@
 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <polyline fill="none" stroke="#000" points="14.5 10.5 14.5 16.5 3.5 16.5 3.5 5.5 8.5 5.5"/>
-    <polyline fill="none" stroke="#000" points="17.5 8.5 17.5 2.5 11.5 2.5"/>
-    <line fill="none" stroke="#000" x1="6.5" y1="13.5" x2="17.5" y2="2.5"/>
-</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>

package/src/images/icons/pull.svg

@@ -1,5 +1,5 @@
 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <polygon points="6.85,8 9.5,10.6 12.15,8 12.85,8.7 9.5,12 6.15,8.7" />
-    <line fill="none" stroke="#000" x1="9.5" y1="11" x2="9.5" y2="2" />
-    <polyline fill="none" stroke="#000" points="6,5.5 3.5,5.5 3.5,18.5 15.5,18.5 15.5,5.5 13,5.5" />
-</svg>
+    <line fill="none" stroke="#000" x1="10" y1="11" x2="10" y2="2" />
+    <polyline fill="none" stroke="#000" points="6.5 5.5 4 5.5 4 18.5 16 18.5 16 5.5 13.5 5.5" />
+    <polyline fill="none" stroke="#000" points="13.18 8.2 10 11.38 6.83 8.21" />
+</svg>

package/src/images/icons/push.svg

@@ -1,5 +1,5 @@
 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <polygon points="12.15,4 9.5,1.4 6.85,4 6.15,3.3 9.5,0 12.85,3.3" />
-    <line fill="none" stroke="#000" x1="9.5" y1="10" x2="9.5" y2="1" />
-    <polyline fill="none" stroke="#000" points="6 5.5 3.5 5.5 3.5 18.5 15.5 18.5 15.5 5.5 13 5.5" />
+    <line fill="none" stroke="#000" x1="10" y1="11" x2="10" y2="1" />
+    <polyline fill="none" stroke="#000" points="6.5 6.5 4 6.5 4 19.5 16 19.5 16 6.5 13.5 6.5" />
+    <polyline fill="none" stroke="#000" points="6.82 3.88 10 .71 13.17 3.88" />
 </svg>

package/src/images/icons/shrink.svg

@@ -1,6 +1,6 @@
 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <polygon points="11 4 12 4 12 8 16 8 16 9 11 9" />
-    <polygon points="4 11 9 11 9 16 8 16 8 12 4 12" />
-    <path fill="none" stroke="#000" stroke-width="1.1" d="M12,8 L18,2" />
-    <path fill="none" stroke="#000" stroke-width="1.1" d="M2,18 L8,12" />
-</svg>
+    <path fill="none" stroke="#000" stroke-width="1.1" d="M2,18l6-6" />
+    <polyline fill="none" stroke="#000" points="4 11.5 8.49 11.5 8.49 15.99" />
+    <path fill="none" stroke="#000" stroke-width="1.1" d="M18,2l-6,6" />
+    <polyline fill="none" stroke="#000" points="15.99 8.49 11.5 8.49 11.5 4" />
+</svg>

package/src/images/icons/sign-in.svg

@@ -1,4 +1,5 @@
 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <polygon points="7 2 17 2 17 17 7 17 7 16 16 16 16 3 7 3" />
-    <polygon points="9.1 13.4 8.5 12.8 11.28 10 4 10 4 9 11.28 9 8.5 6.2 9.1 5.62 13 9.5" />
-</svg>
+    <polygon points="7 2 17 2 17 17 7 17 7 16 16 16 16 3 7 3 7 2" />
+    <line stroke="#000" x1="3" y1="9.5" x2="12" y2="9.5" />
+    <polyline fill="none" stroke="#000" points="9.2 6.33 12.37 9.5 9.2 12.67" />
+</svg>

package/src/images/icons/sign-out.svg

@@ -1,4 +1,5 @@
 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <polygon points="13.1 13.4 12.5 12.8 15.28 10 8 10 8 9 15.28 9 12.5 6.2 13.1 5.62 17 9.5" />
-    <polygon points="13 2 3 2 3 17 13 17 13 16 4 16 4 3 13 3" />
-</svg>
+    <polygon points="13 2 3 2 3 17 13 17 13 16 4 16 4 3 13 3 13 2" />
+    <line stroke="#000" x1="7.96" y1="9.49" x2="16.96" y2="9.49" />
+    <polyline fill="none" stroke="#000" points="14.17 6.31 17.35 9.48 14.17 12.66" />
+</svg>

package/src/images/icons/sorting.svg

@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <line fill="none" stroke="#000" x1="7" y1="3.38" x2="7" y2="15.38" />
+    <polyline fill="none" stroke="#000" points="10.18 12.75 7 15.93 3.83 12.76" />
+    <line fill="none" stroke="#000" x1="13" y1="16.62" x2="13" y2="4.62" />
+    <polyline fill="none" stroke="#000" points="9.82 7.25 13 4.07 16.17 7.24" />
+</svg>

package/src/images/icons/upload.svg

@@ -1,5 +1,5 @@
 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <polyline fill="none" stroke="#000" points="5 8 9.5 3.5 14 8 " />
-    <rect x="3" y="17" width="13" height="1" />
-    <line fill="none" stroke="#000" x1="9.5" y1="15" x2="9.5" y2="4" />
-</svg>
+    <line fill="none" stroke="#000" x1="10" y1="15.17" x2="10" y2="3.17" />
+    <polyline fill="none" stroke="#000" points="13.84 6.63 10 2.8 6.16 6.64" />
+    <line fill="#fff" stroke="#000" x1="3.5" y1="17.5" x2="16.5" y2="17.5" />
+</svg>

package/src/js/api/boot.js

@@ -24,37 +24,33 @@ function init(App) {
         apply(document.body, connect);
     }
 
-    new MutationObserver((records) => records.forEach(applyChildListMutation)).observe(document, {
+    new MutationObserver(handleMutation).observe(document, {
         subtree: true,
         childList: true,
-    });
-
-    new MutationObserver((records) => records.forEach(applyAttributeMutation)).observe(document, {
-        subtree: true,
         attributes: true,
     });
 
     App._initialized = true;
 }
 
-function applyChildListMutation({ addedNodes, removedNodes }) {
-    for (const node of addedNodes) {
-        apply(node, connect);
-    }
+function handleMutation(records) {
+    for (const { addedNodes, removedNodes, target, attributeName } of records) {
+        for (const node of addedNodes) {
+            apply(node, connect);
+        }
 
-    for (const node of removedNodes) {
-        apply(node, disconnect);
-    }
-}
+        for (const node of removedNodes) {
+            apply(node, disconnect);
+        }
 
-function applyAttributeMutation({ target, attributeName }) {
-    const name = getComponentName(attributeName);
+        const name = attributeName && getComponentName(attributeName);
 
-    if (name) {
-        if (hasAttr(target, attributeName)) {
-            createComponent(name, target);
-        } else {
-            getComponent(target, name)?.$destroy();
+        if (name) {
+            if (hasAttr(target, attributeName)) {
+                createComponent(name, target);
+            } else {
+                getComponent(target, name)?.$destroy();
+            }
         }
     }
 }

package/src/js/api/events.js

@@ -1,4 +1,4 @@
-import { hasOwn, isArray, isFunction, isPlainObject, isString, on } from 'uikit-util';
+import { hasOwn, on } from 'uikit-util';
 
 export function initEvents(instance) {
     for (const event of instance.$options.events || []) {
@@ -6,29 +6,28 @@ export function initEvents(instance) {
             registerEvent(instance, event);
         } else {
             for (const key in event) {
-                registerEvent(instance, event[key], key);
+                registerEvent(instance, { name: key, handler: event[key] });
             }
         }
     }
 }
 
-export function registerEvent(instance, event, key) {
-    let { name, el, handler, capture, passive, delegate, filter, self } = isPlainObject(event)
-        ? event
-        : { name: key, handler: event };
-    el = isFunction(el) ? el.call(instance, instance) : el || instance.$el;
-
-    if (!el || (isArray(el) && !el.length) || (filter && !filter.call(instance, instance))) {
+function registerEvent(instance, { name, el, handler, capture, passive, delegate, filter, self }) {
+    if (filter && !filter.call(instance, instance)) {
         return;
     }
 
     instance._disconnect.push(
         on(
-            el,
+            el ? el.call(instance, instance) : instance.$el,
             name,
-            delegate ? (isString(delegate) ? delegate : delegate.call(instance, instance)) : null,
-            isString(handler) ? instance[handler] : handler.bind(instance),
-            { passive, capture, self },
+            delegate?.call(instance, instance),
+            handler.bind(instance),
+            {
+                passive,
+                capture,
+                self,
+            },
         ),
     );
 }

package/src/js/api/instance.js

@@ -11,7 +11,7 @@ export default function (App) {
 
         instance.$options.el = el;
 
-        if (document.contains(el)) {
+        if (el.isConnected) {
             callConnected(instance);
         }
     };

package/src/js/components/internal/lightbox-animations.js

@@ -1,5 +1,6 @@
 import { css } from 'uikit-util';
-import Animations, { scale3d } from '../../mixin/internal/slideshow-animations';
+import Animations from '../../mixin/internal/slideshow-animations';
+import { scale3d } from './slideshow-animations';
 
 export default {
     ...Animations,

package/src/js/components/internal/slideshow-animations.js

@@ -1,9 +1,5 @@
 import { css } from 'uikit-util';
-import Animations, {
-    scale3d,
-    translate,
-    translated,
-} from '../../mixin/internal/slideshow-animations';
+import Animations, { translate, translated } from '../../mixin/internal/slideshow-animations';
 
 export default {
     ...Animations,
@@ -98,3 +94,7 @@ export default {
         },
     },
 };
+
+export function scale3d(value) {
+    return `scale3d(${value}, ${value}, 1)`;
+}