uikit 3.11.2-dev.44c622843 → 3.11.2-dev.536e1a374

package/src/js/util/ajax.js

@@ -2,18 +2,15 @@ import { on } from './event';
 import { assign, noop } from './lang';
 
 export function ajax(url, options) {
-    const env = assign(
-        {
-            data: null,
-            method: 'GET',
-            headers: {},
-            xhr: new XMLHttpRequest(),
-            beforeSend: noop,
-            responseType: '',
-        },
-        options
-    );
-
+    const env = {
+        data: null,
+        method: 'GET',
+        headers: {},
+        xhr: new XMLHttpRequest(),
+        beforeSend: noop,
+        responseType: '',
+        ...options,
+    };
     return Promise.resolve()
         .then(() => env.beforeSend(env))
         .then(() => send(url, env));
@@ -63,8 +60,12 @@ export function getImage(src, srcset, sizes) {
     return new Promise((resolve, reject) => {
         const img = new Image();
 
-        img.onerror = (e) => reject(e);
-        img.onload = () => resolve(img);
+        img.onerror = (e) => {
+            reject(e);
+        };
+        img.onload = () => {
+            resolve(img);
+        };
 
         sizes && (img.sizes = sizes);
         srcset && (img.srcset = srcset);

package/src/js/util/animation.js

@@ -1,7 +1,7 @@
 import { attr } from './attr';
 import { once, trigger } from './event';
 import { css, propName } from './style';
-import { assign, startsWith, toNodes } from './lang';
+import { startsWith, toNodes } from './lang';
 import { addClass, hasClass, removeClass, removeClasses } from './class';
 
 export function transition(element, props, duration = 400, timing = 'linear') {
@@ -35,17 +35,12 @@ export function transition(element, props, duration = 400, timing = 'linear') {
                     );
 
                     addClass(element, 'uk-transition');
-                    css(
-                        element,
-                        assign(
-                            {
-                                transitionProperty: Object.keys(props).map(propName).join(','),
-                                transitionDuration: `${duration}ms`,
-                                transitionTimingFunction: timing,
-                            },
-                            props
-                        )
-                    );
+                    css(element, {
+                        transitionProperty: Object.keys(props).map(propName).join(','),
+                        transitionDuration: `${duration}ms`,
+                        transitionTimingFunction: timing,
+                        ...props,
+                    });
                 })
         )
     );

package/src/js/util/dimensions.js

@@ -37,8 +37,8 @@ export function offset(element, coordinates) {
     const currentOffset = dimensions(element);
 
     if (element) {
-        const { pageYOffset, pageXOffset } = toWindow(element);
-        const offsetBy = { height: pageYOffset, width: pageXOffset };
+        const { scrollY, scrollX } = toWindow(element);
+        const offsetBy = { height: scrollY, width: scrollX };
 
         for (const dir in dirs) {
             for (const i in dirs[dir]) {
@@ -104,8 +104,8 @@ export function offsetPosition(element) {
 
         if (css(element, 'position') === 'fixed') {
             const win = toWindow(element);
-            offset[0] += win.pageYOffset;
-            offset[1] += win.pageXOffset;
+            offset[0] += win.scrollY;
+            offset[1] += win.scrollX;
             return offset;
         }
     } while ((element = element.offsetParent));

package/src/js/util/dom.js

@@ -12,6 +12,10 @@ export function ready(fn) {
     once(document, 'DOMContentLoaded', fn);
 }
 
+export function isTag(element, tagName) {
+    return element?.tagName?.toLowerCase() === tagName.toLowerCase();
+}
+
 export function empty(element) {
     return replaceChildren(element, '');
 }
@@ -20,34 +24,18 @@ export function html(parent, html) {
     return isUndefined(html) ? $(parent).innerHTML : replaceChildren(parent, html);
 }
 
-export function replaceChildren(parent, element) {
-    const nodes = $$(element);
-    $(parent).replaceChildren(...nodes);
-    return nodes;
-}
-
-export function prepend(parent, element) {
-    const nodes = $$(element);
-    $(parent).prepend(...nodes);
-    return nodes;
-}
+export const replaceChildren = applyFn('replaceChildren');
+export const prepend = applyFn('prepend');
+export const append = applyFn('append');
+export const before = applyFn('before');
+export const after = applyFn('after');
 
-export function append(parent, element) {
-    const nodes = $$(element);
-    $(parent).append(...nodes);
-    return nodes;
-}
-
-export function before(ref, element) {
-    const nodes = $$(element);
-    $(ref).before(...nodes);
-    return nodes;
-}
-
-export function after(ref, element) {
-    const nodes = $$(element);
-    $(ref).after(...nodes);
-    return nodes;
+function applyFn(fn) {
+    return function (ref, element) {
+        const nodes = toNodes(isString(element) ? fragment(element) : element);
+        $(ref)?.[fn](...nodes);
+        return unwrapSingle(nodes);
+    };
 }
 
 export function remove(element) {
@@ -69,7 +57,7 @@ export function wrapAll(element, structure) {
 export function wrapInner(element, structure) {
     return toNodes(
         toNodes(element).map((element) =>
-            element.hasChildNodes
+            element.hasChildNodes()
                 ? wrapAll(toNodes(element.childNodes), structure)
                 : append(element, structure)
         )
@@ -80,10 +68,7 @@ export function unwrap(element) {
     toNodes(element)
         .map(parent)
         .filter((value, index, self) => self.indexOf(value) === index)
-        .forEach((parent) => {
-            before(parent, parent.childNodes);
-            remove(parent);
-        });
+        .forEach((parent) => parent.replaceWith(...parent.childNodes));
 }
 
 const fragmentRe = /^\s*<(\w+|!)[^>]*>/;
@@ -102,7 +87,11 @@ export function fragment(html) {
         container.textContent = html;
     }
 
-    return container.childNodes.length > 1 ? toNodes(container.childNodes) : container.firstChild;
+    return unwrapSingle(container.childNodes);
+}
+
+function unwrapSingle(nodes) {
+    return nodes.length > 1 ? nodes : nodes[0];
 }
 
 export function apply(node, fn) {

package/src/js/util/filter.js

@@ -39,8 +39,7 @@ export function isFocusable(element) {
 }
 
 export function parent(element) {
-    element = toNode(element);
-    return element && isElement(element.parentNode) && element.parentNode;
+    return toNode(element)?.parentElement;
 }
 
 export function filter(element, selector) {

package/src/js/util/index.js

@@ -10,6 +10,7 @@ export * from './fastdom';
 export * from './filter';
 export * from './lang';
 export * from './mouse';
+export * from './observer';
 export * from './options';
 export * from './player';
 export * from './position';

package/src/js/util/lang.js

@@ -21,19 +21,19 @@ function toUpper(_, c) {
 }
 
 export function startsWith(str, search) {
-    return str.startsWith(search);
+    return str?.startsWith?.(search);
 }
 
 export function endsWith(str, search) {
-    return str.endsWith(search);
+    return str?.endsWith?.(search);
 }
 
 export function includes(obj, search) {
-    return obj && obj.includes(search);
+    return obj?.includes?.(search);
 }
 
 export function findIndex(array, predicate) {
-    return array.findIndex(predicate);
+    return array?.findIndex?.(predicate);
 }
 
 export const { isArray, from: toArray } = Array;
@@ -128,8 +128,9 @@ export function toWindow(element) {
     }
 
     element = toNode(element);
+    const document = isDocument(element) ? element : element?.ownerDocument;
 
-    return element ? (isDocument(element) ? element : element.ownerDocument).defaultView : window;
+    return document?.defaultView || window;
 }
 
 export function toMs(time) {
@@ -216,7 +217,7 @@ export const Dimensions = {
     },
 
     contain(dimensions, maxDimensions) {
-        dimensions = assign({}, dimensions);
+        dimensions = { ...dimensions };
 
         each(
             dimensions,

package/src/js/util/observer.js

@@ -0,0 +1,36 @@
+import { toNodes } from './lang';
+
+// Old chromium based browsers (UC Browser) did not implement `isIntersecting`
+export const hasIntersectionObserver =
+    window.IntersectionObserver && 'isIntersecting' in IntersectionObserverEntry.prototype;
+export function observeIntersection(targets, cb, options, intersecting = true) {
+    if (!hasIntersectionObserver) {
+        return;
+    }
+
+    const observer = new IntersectionObserver((entries, observer) => {
+        if (!intersecting || entries.some((entry) => entry.isIntersecting)) {
+            cb(entries, observer);
+        }
+    }, options);
+    for (const el of toNodes(targets)) {
+        observer.observe(el);
+    }
+    return observer;
+}
+
+const hasResizeObserver = window.ResizeObserver;
+export function observeResize(targets, cb, options = { box: 'border-box' }) {
+    if (!hasResizeObserver) {
+        return;
+    }
+
+    const observer = new ResizeObserver((entries, observer) => {
+        cb(entries, observer);
+    });
+    for (const el of toNodes(targets)) {
+        observer.observe(el, options);
+    }
+
+    return observer;
+}

package/src/js/util/options.js

@@ -1,13 +1,4 @@
-import {
-    assign,
-    hasOwn,
-    includes,
-    isArray,
-    isFunction,
-    isUndefined,
-    sortBy,
-    startsWith,
-} from './lang';
+import { hasOwn, includes, isArray, isFunction, isUndefined, sortBy, startsWith } from './lang';
 
 const strats = {};
 
@@ -48,7 +39,7 @@ strats.props = function (parentVal, childVal) {
 
 // extend strategy
 strats.computed = strats.methods = function (parentVal, childVal) {
-    return childVal ? (parentVal ? assign({}, parentVal, childVal) : childVal) : parentVal;
+    return childVal ? (parentVal ? { ...parentVal, ...childVal } : childVal) : parentVal;
 };
 
 // data strategy

package/src/js/util/player.js

@@ -1,5 +1,6 @@
+import { isTag } from './dom';
 import { once } from './event';
-import { assign, includes, noop } from './lang';
+import { includes, noop } from './lang';
 
 export function play(el) {
     if (isIFrame(el)) {
@@ -40,11 +41,11 @@ export function isVideo(el) {
 }
 
 function isHTML5(el) {
-    return el?.tagName === 'VIDEO';
+    return isTag(el, 'video');
 }
 
 function isIFrame(el) {
-    return el?.tagName === 'IFRAME' && (isYoutube(el) || isVimeo(el));
+    return isTag(el, 'iframe') && (isYoutube(el) || isVimeo(el));
 }
 
 function isYoutube(el) {
@@ -64,7 +65,7 @@ async function call(el, cmd) {
 
 function post(el, cmd) {
     try {
-        el.contentWindow.postMessage(JSON.stringify(assign({ event: 'command' }, cmd)), '*');
+        el.contentWindow.postMessage(JSON.stringify({ event: 'command', ...cmd }), '*');
     } catch (e) {
         // noop
     }

package/src/js/util/selector.js

@@ -1,5 +1,4 @@
 import { attr } from './attr';
-import { inBrowser } from './env';
 import { closest, index, matches, parent } from './filter';
 import { isDocument, isString, memoize, toNode, toNodes } from './lang';
 
@@ -11,12 +10,6 @@ export function queryAll(selector, context) {
     return findAll(selector, getContext(selector, context));
 }
 
-function getContext(selector, context = document) {
-    return (isString(selector) && isContextSelector(selector)) || isDocument(context)
-        ? context
-        : context.ownerDocument;
-}
-
 export function find(selector, context) {
     return toNode(_query(selector, context, 'querySelector'));
 }
@@ -25,6 +18,17 @@ export function findAll(selector, context) {
     return toNodes(_query(selector, context, 'querySelectorAll'));
 }
 
+const contextSelectorRe = /(^|[^\\],)\s*[!>+~-]/;
+const isContextSelector = memoize((selector) => selector.match(contextSelectorRe));
+
+function getContext(selector, context = document) {
+    return (isString(selector) && isContextSelector(selector)) || isDocument(context)
+        ? context
+        : context.ownerDocument;
+}
+
+const contextSanitizeRe = /([!>+~-])(?=\s+[!>+~-]|\s*$)/g;
+
 function _query(selector, context = document, queryFn) {
     if (!selector || !isString(selector)) {
         return selector;
@@ -69,11 +73,6 @@ function _query(selector, context = document, queryFn) {
     }
 }
 
-const contextSelectorRe = /(^|[^\\],)\s*[!>+~-]/;
-const contextSanitizeRe = /([!>+~-])(?=\s+[!>+~-]|\s*$)/g;
-
-const isContextSelector = memoize((selector) => selector.match(contextSelectorRe));
-
 const selectorRe = /.*?[^\\](?:,|$)/g;
 
 const splitSelector = memoize((selector) =>
@@ -99,11 +98,6 @@ function domPath(element) {
     return names.join(' > ');
 }
 
-const escapeFn =
-    (inBrowser && window.CSS && CSS.escape) ||
-    function (css) {
-        return css.replace(/([^\x7f-\uFFFF\w-])/g, (match) => `\\${match}`);
-    };
 export function escape(css) {
-    return isString(css) ? escapeFn.call(null, css) : '';
+    return isString(css) ? CSS.escape(css) : '';
 }

package/src/js/util/style.js

@@ -31,7 +31,8 @@ const cssNumber = {
 };
 
 export function css(element, property, value, priority = '') {
-    return toNodes(element).map((element) => {
+    const elements = toNodes(element);
+    for (const element of elements) {
         if (isString(property)) {
             property = propName(property);
 
@@ -57,9 +58,8 @@ export function css(element, property, value, priority = '') {
             priority = value;
             each(property, (value, property) => css(element, property, value, priority));
         }
-
-        return element;
-    })[0];
+    }
+    return elements[0];
 }
 
 function getStyles(element, pseudoElt) {

package/src/less/components/base.less

@@ -91,7 +91,6 @@
 
 /*
  * 1. Set `font-size` to support `rem` units
- *    Not using `font` property because a leading hyphen (e.g. -apple-system) causes the font to break in IE11 and Edge
  * 2. Prevent adjustments of font size after orientation changes in iOS.
  * 3. Style
  */
@@ -239,7 +238,7 @@ sub { bottom: -0.25em; }
  ========================================================================== */
 
 /*
- * Remove the gap between embedded content and the bottom of their containers.
+ * Remove the gap between the element and the bottom of its parent container.
  */
 
 audio,
@@ -250,14 +249,14 @@ svg,
 video { vertical-align: middle; }
 
 /*
- * 1. Add responsiveness.
- * 2. Auto-scale the height. Only needed if `height` attribute is present.
- * 3. Corrects responsive `max-width` behavior if padding and border are used.
- * 4. Exclude SVGs for IE11 because they don't preserve their aspect ratio.
+ * 1. Constrain the element to its parent width.
+ * 2. Preserve the intrinsic aspect ratio and auto-scale the height of an image if the `height` attribute is present.
+ * 3. Take border and padding into account.
  */
 
 canvas,
 img,
+svg,
 video {
     /* 1 */
     max-width: 100%;
@@ -267,34 +266,17 @@ video {
     box-sizing: border-box;
 }
 
-/* 4 */
-@supports (display: block) {
-
-   svg {
-        max-width: 100%;
-        height: auto;
-        box-sizing: border-box;
-    }
-
-}
-
-/*
- * Hide the overflow in IE.
- */
-
-svg:not(:root) { overflow: hidden; }
-
 /*
- * 1. Fix lazy loading images if parent element is set to `display: inline` and has `overflow: hidden`.
- * 2. Hide `alt` text for lazy loading images.
- * Note: Selector for background while loading img[data-src*='.jpg'][src*='data:image'] { background: grey; }
+ * Deprecated: only needed for `img` elements with `uk-img`
+ * 1. Hide `alt` text for lazy load images.
+ * 2. Fix lazy loading images if parent element is set to `display: inline` and has `overflow: hidden`.
  */
 
 img:not([src]) {
     /* 1 */
-    min-width: 1px;
-    /* 2 */
     visibility: hidden;
+    /* 2 */
+    min-width: 1px;
 }
 
 /*
@@ -589,11 +571,6 @@ template { display: none; }
  * Breakpoints
  */
 
-.uk-breakpoint-s::before  { content: '@{breakpoint-small}'; }
-.uk-breakpoint-m::before  { content: '@{breakpoint-medium}'; }
-.uk-breakpoint-l::before  { content: '@{breakpoint-large}'; }
-.uk-breakpoint-xl::before { content: '@{breakpoint-xlarge}'; }
-
 :root {
     --uk-breakpoint-s: @breakpoint-small;
     --uk-breakpoint-m: @breakpoint-medium;