uikit 3.11.2-dev.f2970ffaa → 3.12.0

package/src/js/util/attr.js

@@ -1,7 +1,6 @@
-import {isFunction, isObject, isUndefined, toNode, toNodes} from './lang';
+import { isFunction, isObject, isUndefined, toNode, toNodes } from './lang';
 
 export function attr(element, name, value) {
-
     if (isObject(name)) {
         for (const key in name) {
             attr(element, key, name[key]);
@@ -10,42 +9,39 @@ export function attr(element, name, value) {
     }
 
     if (isUndefined(value)) {
-        element = toNode(element);
-        return element && element.getAttribute(name);
+        return toNode(element)?.getAttribute(name);
     } else {
-        toNodes(element).forEach(element => {
-
+        for (const el of toNodes(element)) {
             if (isFunction(value)) {
-                value = value.call(element, attr(element, name));
+                value = value.call(el, attr(el, name));
             }
 
             if (value === null) {
-                removeAttr(element, name);
+                removeAttr(el, name);
             } else {
-                element.setAttribute(name, value);
+                el.setAttribute(name, value);
             }
-        });
+        }
     }
-
 }
 
 export function hasAttr(element, name) {
-    return toNodes(element).some(element => element.hasAttribute(name));
+    return toNodes(element).some((element) => element.hasAttribute(name));
 }
 
 export function removeAttr(element, name) {
-    element = toNodes(element);
-    name.split(' ').forEach(name =>
-        element.forEach(element =>
-            element.hasAttribute(name) && element.removeAttribute(name)
-        )
-    );
+    const elements = toNodes(element);
+    for (const attribute of name.split(' ')) {
+        for (const element of elements) {
+            element.removeAttribute(attribute);
+        }
+    }
 }
 
 export function data(element, attribute) {
-    for (let i = 0, attrs = [attribute, `data-${attribute}`]; i < attrs.length; i++) {
-        if (hasAttr(element, attrs[i])) {
-            return attr(element, attrs[i]);
+    for (const name of [attribute, `data-${attribute}`]) {
+        if (hasAttr(element, name)) {
+            return attr(element, name);
         }
     }
 }

package/src/js/util/class.js

@@ -1,5 +1,5 @@
-import {attr} from './attr';
-import {isUndefined, toNodes} from './lang';
+import { attr } from './attr';
+import { isUndefined, toNodes } from './lang';
 
 export function addClass(element, ...args) {
     apply(element, args, 'add');
@@ -10,7 +10,7 @@ export function removeClass(element, ...args) {
 }
 
 export function removeClasses(element, cls) {
-    attr(element, 'class', value => (value || '').replace(new RegExp(`\\b${cls}\\b`, 'g'), ''));
+    attr(element, 'class', (value) => (value || '').replace(new RegExp(`\\b${cls}\\b`, 'g'), ''));
 }
 
 export function replaceClass(element, ...args) {
@@ -20,9 +20,8 @@ export function replaceClass(element, ...args) {
 
 export function hasClass(element, cls) {
     [cls] = getClasses(cls);
-    const nodes = toNodes(element);
-    for (let n = 0; n < nodes.length; n++) {
-        if (cls && nodes[n].classList.contains(cls)) {
+    for (const node of toNodes(element)) {
+        if (cls && node.classList.contains(cls)) {
             return true;
         }
     }
@@ -30,64 +29,27 @@ export function hasClass(element, cls) {
 }
 
 export function toggleClass(element, cls, force) {
+    const classes = getClasses(cls);
 
-    cls = getClasses(cls);
+    if (!isUndefined(force)) {
+        force = !!force;
+    }
 
-    const nodes = toNodes(element);
-    for (let n = 0; n < nodes.length; n++) {
-        const list = nodes[n].classList;
-        for (let i = 0; i < cls.length; i++) {
-            if (isUndefined(force)) {
-                list.toggle(cls[i]);
-            } else if (supports.Force) {
-                list.toggle(cls[i], !!force);
-            } else {
-                list[force ? 'add' : 'remove'](cls[i]);
-            }
+    for (const node of toNodes(element)) {
+        for (const cls of classes) {
+            node.classList.toggle(cls, force);
         }
     }
 }
 
 function apply(element, args, fn) {
-
     args = args.reduce((args, arg) => args.concat(getClasses(arg)), []);
 
-    const nodes = toNodes(element);
-    for (let n = 0; n < nodes.length; n++) {
-        if (supports.Multiple) {
-            nodes[n].classList[fn](...args);
-        } else {
-            args.forEach(cls => nodes[n].classList[fn](cls));
-        }
+    for (const node of toNodes(element)) {
+        node.classList[fn](...args);
     }
 }
 
 function getClasses(str) {
     return String(str).split(/\s|,/).filter(Boolean);
 }
-
-// IE 11
-let supports = {
-
-    get Multiple() {
-        return this.get('Multiple');
-    },
-
-    get Force() {
-        return this.get('Force');
-    },
-
-    get(key) {
-
-        const {classList} = document.createElement('_');
-        classList.add('a', 'b');
-        classList.toggle('c', false);
-        supports = {
-            Multiple: classList.contains('b'),
-            Force: !classList.contains('c')
-        };
-
-        return supports[key];
-    }
-
-};

package/src/js/util/dimensions.js

@@ -1,16 +1,27 @@
-import {css} from './style';
-import {each, endsWith, isDocument, isElement, isNumeric, isUndefined, isWindow, toFloat, toNode, toWindow, ucfirst} from './lang';
+import { css } from './style';
+import {
+    each,
+    isDocument,
+    isElement,
+    isString,
+    isUndefined,
+    isWindow,
+    memoize,
+    toFloat,
+    toNode,
+    toWindow,
+    ucfirst,
+} from './lang';
 
 const dirs = {
     width: ['left', 'right'],
-    height: ['top', 'bottom']
+    height: ['top', 'bottom'],
 };
 
 export function dimensions(element) {
-
     const rect = isElement(element)
         ? toNode(element).getBoundingClientRect()
-        : {height: height(element), width: width(element), top: 0, left: 0};
+        : { height: height(element), width: width(element), top: 0, left: 0 };
 
     return {
         height: rect.height,
@@ -18,17 +29,16 @@ export function dimensions(element) {
         top: rect.top,
         left: rect.left,
         bottom: rect.top + rect.height,
-        right: rect.left + rect.width
+        right: rect.left + rect.width,
     };
 }
 
 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]) {
@@ -44,23 +54,30 @@ export function offset(element, coordinates) {
     const pos = css(element, 'position');
 
     each(css(element, ['left', 'top']), (value, prop) =>
-        css(element, prop, coordinates[prop]
-            - currentOffset[prop]
-            + toFloat(pos === 'absolute' && value === 'auto'
-                ? position(element)[prop]
-                : value)
+        css(
+            element,
+            prop,
+            coordinates[prop] -
+                currentOffset[prop] +
+                toFloat(pos === 'absolute' && value === 'auto' ? position(element)[prop] : value)
         )
     );
 }
 
 export function position(element) {
+    let { top, left } = offset(element);
 
-    let {top, left} = offset(element);
-
-    const {ownerDocument: {body, documentElement}, offsetParent} = toNode(element);
+    const {
+        ownerDocument: { body, documentElement },
+        offsetParent,
+    } = toNode(element);
     let parent = offsetParent || documentElement;
 
-    while (parent && (parent === body || parent === documentElement) && css(parent, 'position') === 'static') {
+    while (
+        parent &&
+        (parent === body || parent === documentElement) &&
+        css(parent, 'position') === 'static'
+    ) {
         parent = parent.parentNode;
     }
 
@@ -72,7 +89,7 @@ export function position(element) {
 
     return {
         top: top - toFloat(css(element, 'marginTop')),
-        left: left - toFloat(css(element, 'marginLeft'))
+        left: left - toFloat(css(element, 'marginLeft')),
     };
 }
 
@@ -82,17 +99,15 @@ export function offsetPosition(element) {
     element = toNode(element);
 
     do {
-
         offset[0] += element.offsetTop;
         offset[1] += element.offsetLeft;
 
         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));
 
     return offset;
@@ -104,9 +119,7 @@ export const width = dimension('width');
 function dimension(prop) {
     const propName = ucfirst(prop);
     return (element, value) => {
-
         if (isUndefined(value)) {
-
             if (isWindow(element)) {
                 return element[`inner${propName}`];
             }
@@ -122,26 +135,27 @@ function dimension(prop) {
             value = value === 'auto' ? element[`offset${propName}`] : toFloat(value) || 0;
 
             return value - boxModelAdjust(element, prop);
-
         } else {
-
-            return css(element, prop, !value && value !== 0
-                ? ''
-                : +value + boxModelAdjust(element, prop) + 'px'
+            return css(
+                element,
+                prop,
+                !value && value !== 0 ? '' : +value + boxModelAdjust(element, prop) + 'px'
             );
-
         }
-
     };
 }
 
 export function boxModelAdjust(element, prop, sizing = 'border-box') {
     return css(element, 'boxSizing') === sizing
-        ? dirs[prop].map(ucfirst).reduce((value, prop) =>
-            value
-            + toFloat(css(element, `padding${prop}`))
-            + toFloat(css(element, `border${prop}Width`))
-            , 0)
+        ? dirs[prop]
+              .map(ucfirst)
+              .reduce(
+                  (value, prop) =>
+                      value +
+                      toFloat(css(element, `padding${prop}`)) +
+                      toFloat(css(element, `border${prop}Width`)),
+                  0
+              )
         : 0;
 }
 
@@ -157,19 +171,34 @@ export function flipPosition(pos) {
 }
 
 export function toPx(value, property = 'width', element = window, offsetDim = false) {
-    return isNumeric(value)
-        ? +value
-        : endsWith(value, 'vh')
-            ? percent(height(toWindow(element)), value)
-            : endsWith(value, 'vw')
-                ? percent(width(toWindow(element)), value)
-                : endsWith(value, '%')
-                    ? percent(offsetDim
-                        ? element[`offset${ucfirst(property)}`]
-                        : dimensions(element)[property], value)
-                    : toFloat(value);
+    if (!isString(value)) {
+        return toFloat(value);
+    }
+
+    return parseCalc(value).reduce((result, value) => {
+        const unit = parseUnit(value);
+        if (unit) {
+            value = percent(
+                unit === 'vh'
+                    ? height(toWindow(element))
+                    : unit === 'vw'
+                    ? width(toWindow(element))
+                    : offsetDim
+                    ? element[`offset${ucfirst(property)}`]
+                    : dimensions(element)[property],
+                value
+            );
+        }
+
+        return result + toFloat(value);
+    }, 0);
 }
 
+const calcRe = /-?\d+(?:\.\d+)?(?:v[wh]|%|px)?/g;
+const parseCalc = memoize((calc) => calc.toString().replace(/\s/g, '').match(calcRe) || []);
+const unitRe = /(?:v[hw]|%)$/;
+const parseUnit = memoize((str) => (str.match(unitRe) || [])[0]);
+
 function percent(base, value) {
-    return base * toFloat(value) / 100;
+    return (base * toFloat(value)) / 100;
 }

package/src/js/util/dom.js

@@ -1,10 +1,9 @@
-import {once} from './event';
-import {parent} from './filter';
-import {find, findAll} from './selector';
-import {isElement, isString, isUndefined, toNode, toNodes} from './lang';
+import { once } from './event';
+import { parent } from './filter';
+import { find, findAll } from './selector';
+import { isElement, isString, isUndefined, startsWith, toNode, toNodes } from './lang';
 
 export function ready(fn) {
-
     if (document.readyState !== 'loading') {
         fn();
         return;
@@ -13,63 +12,37 @@ export function ready(fn) {
     once(document, 'DOMContentLoaded', fn);
 }
 
-export function empty(element) {
-    element = $(element);
-    element.innerHTML = '';
-    return element;
-}
-
-export function html(parent, html) {
-    parent = $(parent);
-    return isUndefined(html)
-        ? parent.innerHTML
-        : append(parent.hasChildNodes() ? empty(parent) : parent, html);
-}
-
-export function prepend(parent, element) {
-
-    parent = $(parent);
-
-    if (parent.hasChildNodes()) {
-        return insertNodes(element, element => parent.insertBefore(element, parent.firstChild));
-    } else {
-        return append(parent, element);
-    }
+export function isTag(element, tagName) {
+    return element?.tagName?.toLowerCase() === tagName.toLowerCase();
 }
 
-export function append(parent, element) {
-    parent = $(parent);
-    return insertNodes(element, element => parent.appendChild(element));
+export function empty(element) {
+    return replaceChildren(element, '');
 }
 
-export function before(ref, element) {
-    ref = $(ref);
-    return insertNodes(element, element => ref.parentNode.insertBefore(element, ref));
+export function html(parent, html) {
+    return isUndefined(html) ? $(parent).innerHTML : replaceChildren(parent, html);
 }
 
-export function after(ref, element) {
-    ref = $(ref);
-    return insertNodes(element, element => ref.nextSibling
-        ? before(ref.nextSibling, element)
-        : append(ref.parentNode, element)
-    );
-}
+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');
 
-function insertNodes(element, fn) {
-    element = isString(element) ? fragment(element) : element;
-    return element
-        ? 'length' in element
-            ? toNodes(element).map(fn)
-            : fn(element)
-        : null;
+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) {
-    toNodes(element).forEach(element => element.parentNode && element.parentNode.removeChild(element));
+    toNodes(element).forEach((element) => element.remove());
 }
 
 export function wrapAll(element, structure) {
-
     structure = toNode(before(element, structure));
 
     while (structure.firstChild) {
@@ -82,26 +55,26 @@ export function wrapAll(element, structure) {
 }
 
 export function wrapInner(element, structure) {
-    return toNodes(toNodes(element).map(element =>
-        element.hasChildNodes ? wrapAll(toNodes(element.childNodes), structure) : append(element, structure)
-    ));
+    return toNodes(
+        toNodes(element).map((element) =>
+            element.hasChildNodes()
+                ? wrapAll(toNodes(element.childNodes), structure)
+                : append(element, structure)
+        )
+    );
 }
 
 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+|!)[^>]*>/;
 const singleTagRe = /^<(\w+)\s*\/?>(?:<\/\1>)?$/;
 
 export function fragment(html) {
-
     const matches = singleTagRe.exec(html);
     if (matches) {
         return document.createElement(matches[1]);
@@ -114,12 +87,14 @@ 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) {
-
     if (!isElement(node)) {
         return;
     }
@@ -134,17 +109,13 @@ export function apply(node, fn) {
 }
 
 export function $(selector, context) {
-    return isHtml(selector)
-        ? toNode(fragment(selector))
-        : find(selector, context);
+    return isHtml(selector) ? toNode(fragment(selector)) : find(selector, context);
 }
 
 export function $$(selector, context) {
-    return isHtml(selector)
-        ? toNodes(fragment(selector))
-        : findAll(selector, context);
+    return isHtml(selector) ? toNodes(fragment(selector)) : findAll(selector, context);
 }
 
 function isHtml(str) {
-    return isString(str) && (str[0] === '<' || str.match(/^\s*</));
+    return isString(str) && startsWith(str.trim(), '<');
 }

package/src/js/util/env.js

@@ -1,19 +1,14 @@
-/* global DocumentTouch */
-import {attr} from './attr';
+import { attr } from './attr';
 
 export const inBrowser = typeof window !== 'undefined';
-export const isIE = inBrowser && /msie|trident/i.test(window.navigator.userAgent);
 export const isRtl = inBrowser && attr(document.documentElement, 'dir') === 'rtl';
 
-const hasTouchEvents = inBrowser && 'ontouchstart' in window;
+export const hasTouch = inBrowser && 'ontouchstart' in window;
 const hasPointerEvents = inBrowser && window.PointerEvent;
-export const hasTouch = inBrowser && (hasTouchEvents
-    || window.DocumentTouch && document instanceof DocumentTouch
-    || navigator.maxTouchPoints); // IE >=11
 
-export const pointerDown = hasPointerEvents ? 'pointerdown' : hasTouchEvents ? 'touchstart' : 'mousedown';
-export const pointerMove = hasPointerEvents ? 'pointermove' : hasTouchEvents ? 'touchmove' : 'mousemove';
-export const pointerUp = hasPointerEvents ? 'pointerup' : hasTouchEvents ? 'touchend' : 'mouseup';
-export const pointerEnter = hasPointerEvents ? 'pointerenter' : hasTouchEvents ? '' : 'mouseenter';
-export const pointerLeave = hasPointerEvents ? 'pointerleave' : hasTouchEvents ? '' : 'mouseleave';
+export const pointerDown = hasPointerEvents ? 'pointerdown' : hasTouch ? 'touchstart' : 'mousedown';
+export const pointerMove = hasPointerEvents ? 'pointermove' : hasTouch ? 'touchmove' : 'mousemove';
+export const pointerUp = hasPointerEvents ? 'pointerup' : hasTouch ? 'touchend' : 'mouseup';
+export const pointerEnter = hasPointerEvents ? 'pointerenter' : hasTouch ? '' : 'mouseenter';
+export const pointerLeave = hasPointerEvents ? 'pointerleave' : hasTouch ? '' : 'mouseleave';
 export const pointerCancel = hasPointerEvents ? 'pointercancel' : 'touchcancel';