uikit 3.17.8 → 3.17.9-dev.337e68f15

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.17.8",
+  "version": "3.17.9-dev.337e68f15",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [
@@ -22,31 +22,31 @@
   "packageManager": "pnpm@8.10.1",
   "devDependencies": {
     "@rollup/plugin-alias": "^5.0.1",
-    "@rollup/plugin-replace": "^5.0.4",
-    "archiver": "^6.0.0",
+    "@rollup/plugin-replace": "^5.0.5",
+    "archiver": "^6.0.1",
     "camelcase": "^8.0.0",
     "chokidar-cli": "^3.0.0",
     "clean-css": "^5.3.2",
     "dateformat": "^5.0.3",
     "esbuild": "^0.19.5",
-    "eslint": "^8.51.0",
+    "eslint": "^8.53.0",
     "eslint-config-prettier": "^9.0.0",
     "execa": "^8.0.1",
     "fs-extra": "^11.1.1",
-    "glob": "^10.3.3",
-    "inquirer": "^9.2.7",
-    "less": "^4.1.3",
+    "glob": "^10.3.10",
+    "inquirer": "^9.2.12",
+    "less": "^4.2.0",
     "minimist": "^1.2.8",
     "number-precision": "^1.6.0",
     "p-limit": "^5.0.0",
-    "prettier": "^3.0.2",
-    "prettier-plugin-organize-imports": "^3.2.3",
-    "rollup": "^4.1.4",
+    "prettier": "^3.1.0",
+    "prettier-plugin-organize-imports": "^3.2.4",
+    "rollup": "^4.4.0",
     "rollup-plugin-esbuild": "^6.1.0",
     "rollup-plugin-modify": "^3.0.0",
-    "rtlcss": "^4.1.0",
+    "rtlcss": "^4.1.1",
     "semver": "^7.5.4",
-    "svgo": "^3.0.2"
+    "svgo": "^3.0.3"
   },
   "scripts": {
     "build-scss": "node build/scss",

package/src/js/api/component.js

@@ -41,8 +41,8 @@ export function createComponent(name, element, data, ...args) {
     return Component.options.functional
         ? new Component({ data: isPlainObject(element) ? element : [element, data, ...args] })
         : element
-        ? $$(element).map(init)[0]
-        : init();
+          ? $$(element).map(init)[0]
+          : init();
 
     function init(element) {
         const instance = getComponent(element, name);

package/src/js/api/events.js

@@ -24,12 +24,7 @@ export function registerEvent(instance, event, key) {
         : { name: key, handler: event };
     el = isFunction(el) ? el.call(instance, instance) : el || instance.$el;
 
-    if (isArray(el)) {
-        el.forEach((el) => registerEvent(instance, { ...event, el }, key));
-        return;
-    }
-
-    if (!el || (filter && !filter.call(instance))) {
+    if (!el || (isArray(el) && !el.length) || (filter && !filter.call(instance))) {
         return;
     }
 

package/src/js/api/instance.js

@@ -1,4 +1,4 @@
-import { $, remove, within } from 'uikit-util';
+import { remove } from 'uikit-util';
 import { attachToElement, createComponent, detachFromElement, getComponent } from './component';
 import { update } from './global';
 import { callConnected, callDisconnected, callHook } from './hooks';
@@ -11,7 +11,7 @@ export default function (App) {
 
         instance.$options.el = el;
 
-        if (within(el, document)) {
+        if (document.contains(el)) {
             callConnected(instance);
         }
     };
@@ -60,6 +60,7 @@ export default function (App) {
     });
 }
 
+const ids = Object.create(null);
 export function generateId(instance, el = instance.$el, postfix = '') {
     if (el.id) {
         return el.id;
@@ -67,9 +68,11 @@ export function generateId(instance, el = instance.$el, postfix = '') {
 
     let id = `${instance.$options.id}-${instance._uid}${postfix}`;
 
-    if ($(`#${id}`)) {
+    if (ids[id]) {
         id = generateId(instance, el, `${postfix}-2`);
     }
 
+    ids[id] = true;
+
     return id;
 }

package/src/js/api/observables.js

@@ -119,8 +119,8 @@ function swipeDirection(x1, y1, x2, y2) {
             ? 'Left'
             : 'Right'
         : y1 - y2 > 0
-        ? 'Up'
-        : 'Down';
+          ? 'Up'
+          : 'Down';
 }
 
 function toScrollTargets(elements) {

package/src/js/api/options.js

@@ -90,8 +90,8 @@ function concatStrat(parentVal, childVal) {
         ? parentVal
             ? parentVal.concat(childVal)
             : isArray(childVal)
-            ? childVal
-            : [childVal]
+              ? childVal
+              : [childVal]
         : parentVal;
 }
 
@@ -140,14 +140,14 @@ export function parseOptions(options, args = []) {
             ? startsWith(options, '{')
                 ? JSON.parse(options)
                 : args.length && !includes(options, ':')
-                ? { [args[0]]: options }
-                : options.split(';').reduce((options, option) => {
-                      const [key, value] = option.split(/:(.*)/);
-                      if (key && !isUndefined(value)) {
-                          options[key.trim()] = value.trim();
-                      }
-                      return options;
-                  }, {})
+                  ? { [args[0]]: options }
+                  : options.split(';').reduce((options, option) => {
+                        const [key, value] = option.split(/:(.*)/);
+                        if (key && !isUndefined(value)) {
+                            options[key.trim()] = value.trim();
+                        }
+                        return options;
+                    }, {})
             : {};
     } catch (e) {
         return {};
@@ -168,12 +168,13 @@ export function coerce(type, value) {
     return type ? type(value) : value;
 }
 
+const listRe = /,(?![^(]*\))/;
 function toList(value) {
     return isArray(value)
         ? value
         : isString(value)
-        ? value
-              .split(/,(?![^(]*\))/)
-              .map((value) => (isNumeric(value) ? toNumber(value) : toBoolean(value.trim())))
-        : [value];
+          ? value
+                .split(listRe)
+                .map((value) => (isNumeric(value) ? toNumber(value) : toBoolean(value.trim())))
+          : [value];
 }

package/src/js/api/props.js

@@ -1,25 +1,35 @@
-import { camelize, data as getData, hasOwn, hyphenate, isUndefined, startsWith } from 'uikit-util';
+import {
+    assign,
+    camelize,
+    data as getData,
+    hasOwn,
+    hyphenate,
+    isUndefined,
+    memoize,
+    startsWith,
+} from 'uikit-util';
 import { registerObserver } from './observer';
 import { coerce, parseOptions } from './options';
 
 export function initProps(instance) {
-    const props = getProps(instance.$options);
+    const { $options, $props } = instance;
+    const props = getProps($options);
 
-    for (let key in props) {
-        if (!isUndefined(props[key])) {
-            instance.$props[key] = props[key];
-        }
-    }
+    assign($props, props);
 
-    const exclude = [instance.$options.computed, instance.$options.methods];
-    for (let key in instance.$props) {
-        if (key in props && notIn(exclude, key)) {
-            instance[key] = instance.$props[key];
+    const { computed, methods } = $options;
+    for (let key in $props) {
+        if (
+            key in props &&
+            (!computed || !hasOwn(computed, key)) &&
+            (!methods || !hasOwn(methods, key))
+        ) {
+            instance[key] = $props[key];
         }
     }
 }
 
-export function getProps(opts) {
+function getProps(opts) {
     const data = {};
     const { args = [], props = {}, el, id } = opts;
 
@@ -56,9 +66,14 @@ export function getProps(opts) {
     return data;
 }
 
-function notIn(options, key) {
-    return options.every((arr) => !arr || !hasOwn(arr, key));
-}
+const getAttributes = memoize((id, props) => {
+    const attributes = Object.keys(props);
+    const filter = attributes
+        .concat(id)
+        .map((key) => [hyphenate(key), `data-${hyphenate(key)}`])
+        .flat();
+    return { attributes, filter };
+});
 
 export function initPropsObserver(instance) {
     const { $options, $props } = instance;
@@ -68,8 +83,7 @@ export function initPropsObserver(instance) {
         return;
     }
 
-    const attributes = Object.keys(props);
-    const filter = attributes.map((key) => hyphenate(key)).concat(id);
+    const { attributes, filter } = getAttributes(id, props);
 
     const observer = new MutationObserver((records) => {
         const data = getProps($options);
@@ -87,7 +101,7 @@ export function initPropsObserver(instance) {
 
     observer.observe(el, {
         attributes: true,
-        attributeFilter: filter.concat(filter.map((key) => `data-${key}`)),
+        attributeFilter: filter,
     });
 
     registerObserver(instance, observer);

package/src/js/components/filter.js

@@ -3,7 +3,6 @@ import {
     $$,
     append,
     attr,
-    closest,
     css,
     data,
     each,
@@ -82,7 +81,7 @@ export default {
                 return;
             }
 
-            if (closest(e.target, 'a,button')) {
+            if (e.target.closest('a,button')) {
                 e.preventDefault();
                 this.apply(e.current);
             }

package/src/js/components/notification.js

@@ -2,7 +2,6 @@ import {
     $,
     append,
     apply,
-    closest,
     css,
     isVisible,
     parent,
@@ -81,7 +80,7 @@ export default {
 
     events: {
         click(e) {
-            if (closest(e.target, 'a[href="#"],a[href=""]')) {
+            if (e.target.closest('a[href="#"],a[href=""]')) {
                 e.preventDefault();
             }
             this.close();

package/src/js/components/sortable.js

@@ -30,7 +30,6 @@ import {
     toggleClass,
     Transition,
     trigger,
-    within,
 } from 'uikit-util';
 import Animate from '../mixin/animate';
 import Class from '../mixin/class';
@@ -181,15 +180,15 @@ export default {
     methods: {
         init(e) {
             const { target, button, defaultPrevented } = e;
-            const [placeholder] = this.items.filter((el) => within(target, el));
+            const [placeholder] = this.items.filter((el) => el.contains(target));
 
             if (
                 !placeholder ||
                 defaultPrevented ||
                 button > 0 ||
                 isInput(target) ||
-                within(target, `.${this.clsNoDrag}`) ||
-                (this.handle && !within(target, this.handle))
+                target.closest(`.${this.clsNoDrag}`) ||
+                (this.handle && !target.closest(this.handle))
             ) {
                 return;
             }
@@ -280,7 +279,7 @@ export default {
         },
 
         remove(element) {
-            if (!within(element, this.target)) {
+            if (!this.target.contains(element)) {
                 return;
             }
 

package/src/js/components/tooltip.js

@@ -1,6 +1,7 @@
 import {
     append,
     attr,
+    data,
     flipPosition,
     hasAttr,
     includes,
@@ -15,9 +16,9 @@ import {
     pointerEnter,
     pointerLeave,
     remove,
-    within,
 } from 'uikit-util';
 import { generateId } from '../api/instance';
+import { parseOptions } from '../api/options';
 import Container from '../mixin/container';
 import Position from '../mixin/position';
 import Togglable from '../mixin/togglable';
@@ -26,48 +27,42 @@ import { keyMap } from '../util/keys';
 export default {
     mixins: [Container, Togglable, Position],
 
-    args: 'title',
-
-    props: {
-        delay: Number,
-        title: String,
-    },
-
     data: {
         pos: 'top',
-        title: '',
-        delay: 0,
         animation: ['uk-animation-scale-up'],
         duration: 100,
         cls: 'uk-active',
     },
 
-    beforeConnect() {
-        this.id = generateId(this, {});
-        this._hasTitle = hasAttr(this.$el, 'title');
-        attr(this.$el, {
-            title: '',
-            'aria-describedby': this.id,
-        });
+    connected() {
         makeFocusable(this.$el);
     },
 
     disconnected() {
         this.hide();
-
-        if (!attr(this.$el, 'title')) {
-            attr(this.$el, 'title', this._hasTitle ? this.title : null);
-        }
     },
 
     methods: {
         show() {
-            if (this.isToggled(this.tooltip || null) || !this.title) {
+            if (this.isToggled(this.tooltip || null)) {
+                return;
+            }
+
+            const { delay = 0, title } = parseProps(this.$options);
+
+            if (!title) {
                 return;
             }
 
+            this.title = title;
+            this.id ||= generateId(this, {});
+            this._hasTitle = hasAttr(this.$el, 'title');
+            attr(this.$el, { title: null, 'aria-describedby': this.id });
+
+            once(this.$el, ['blur', pointerLeave], (e) => !isTouch(e) && this.hide());
+
             clearTimeout(this.showTimer);
-            this.showTimer = setTimeout(this._show, this.delay);
+            this.showTimer = setTimeout(this._show, delay);
         },
 
         async hide() {
@@ -81,6 +76,7 @@ export default {
                 await this.toggleElement(this.tooltip, false, false);
             }
 
+            attr(this.$el, { title: this._hasTitle ? this.title : null, 'aria-describedby': null });
             remove(this.tooltip);
             this.tooltip = null;
         },
@@ -115,7 +111,7 @@ export default {
                         this.hide,
                         false,
                         (e) =>
-                            (e.type === pointerDown && !within(e.target, this.$el)) ||
+                            (e.type === pointerDown && !this.$el.contains(e.target)) ||
                             (e.type === 'keydown' && e.keyCode === keyMap.ESC),
                     ),
                     on([document, ...overflowParents(this.$el)], 'scroll', update, {
@@ -134,19 +130,10 @@ export default {
     },
 
     events: {
-        focus: 'show',
-        blur: 'hide',
-
-        [`${pointerEnter} ${pointerLeave}`](e) {
-            if (!isTouch(e)) {
-                this[e.type === pointerEnter ? 'show' : 'hide']();
-            }
-        },
-
         // Clicking a button does not give it focus on all browsers and platforms
         // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#clicking_and_focus
-        [pointerDown](e) {
-            if (isTouch(e)) {
+        [`focus ${pointerEnter} ${pointerDown}`](e) {
+            if (!isTouch(e)) {
                 this.show();
             }
         },
@@ -189,3 +176,11 @@ function getAlignment(el, target, [dir, align]) {
 
     return [dir, align];
 }
+
+function parseProps(options) {
+    const { el, id } = options;
+    return ['delay', 'title'].reduce(
+        (obj, key) => ({ [key]: data(el, key), ...obj }),
+        parseOptions(data(el, id), ['title']),
+    );
+}

package/src/js/core/accordion.js

@@ -17,7 +17,6 @@ import {
     toggleClass,
     Transition,
     unwrap,
-    within,
     wrapAll,
 } from 'uikit-util';
 import { generateId } from '../api/instance';
@@ -86,7 +85,7 @@ export default {
         contents(items) {
             for (const el of items) {
                 const isOpen = hasClass(
-                    this.items.find((item) => within(el, item)),
+                    this.items.find((item) => item.contains(el)),
                     this.clsOpen,
                 );
 

package/src/js/core/drop.js

@@ -1,4 +1,5 @@
 import {
+    $,
     addClass,
     append,
     apply,
@@ -160,7 +161,7 @@ export default {
                     !defaultPrevented &&
                     hash &&
                     isSameSiteAnchor(current) &&
-                    !within(hash, this.$el)
+                    !this.$el.contains($(hash))
                 ) {
                     this.hide(false);
                 }
@@ -298,7 +299,7 @@ export default {
             handler({ target }) {
                 if (this.$el !== target) {
                     active =
-                        active === null && within(target, this.$el) && this.isToggled()
+                        active === null && this.$el.contains(target) && this.isToggled()
                             ? this
                             : active;
                     return;
@@ -340,7 +341,7 @@ export default {
                 }
 
                 let prev;
-                while (active && prev !== active && !within(this.$el, active.$el)) {
+                while (active && prev !== active && !active.$el.contains(this.$el)) {
                     prev = active;
                     active.hide(false, false);
                 }
@@ -463,7 +464,7 @@ function getPositionedElements(el) {
 }
 
 function getViewport(el, target) {
-    return offsetViewport(overflowParents(target).find((parent) => within(el, parent)));
+    return offsetViewport(overflowParents(target).find((parent) => parent.contains(el)));
 }
 
 function createToggleComponent(drop) {
@@ -505,22 +506,24 @@ function listenForScrollClose(drop) {
 
 function listenForBackgroundClose(drop) {
     return on(document, pointerDown, ({ target }) => {
-        if (!within(target, drop.$el)) {
-            once(
-                document,
-                `${pointerUp} ${pointerCancel} scroll`,
-                ({ defaultPrevented, type, target: newTarget }) => {
-                    if (
-                        !defaultPrevented &&
-                        type === pointerUp &&
-                        target === newTarget &&
-                        !(drop.targetEl && within(target, drop.targetEl))
-                    ) {
-                        drop.hide(false);
-                    }
-                },
-                true,
-            );
+        if (drop.$el.contains(target)) {
+            return;
         }
+
+        once(
+            document,
+            `${pointerUp} ${pointerCancel} scroll`,
+            ({ defaultPrevented, type, target: newTarget }) => {
+                if (
+                    !defaultPrevented &&
+                    type === pointerUp &&
+                    target === newTarget &&
+                    !(drop.targetEl && within(target, drop.targetEl))
+                ) {
+                    drop.hide(false);
+                }
+            },
+            true,
+        );
     });
 }

package/src/js/core/dropnav.js

@@ -20,7 +20,6 @@ import {
     selFocusable,
     toFloat,
     Transition,
-    within,
 } from 'uikit-util';
 import Class from '../mixin/class';
 import Container from '../mixin/container';
@@ -90,7 +89,7 @@ export default {
             if (this.dropContainer !== $el) {
                 for (const el of $$(`.${clsDrop}`, this.dropContainer)) {
                     const target = this.getDropdown(el)?.targetEl;
-                    if (!includes(dropdowns, el) && target && within(target, this.$el)) {
+                    if (!includes(dropdowns, el) && target && this.$el.contains(target)) {
                         dropdowns.push(el);
                     }
                 }
@@ -143,7 +142,7 @@ export default {
                     active &&
                     includes(active.mode, 'hover') &&
                     active.targetEl &&
-                    !within(active.targetEl, current) &&
+                    !current.contains(active.targetEl) &&
                     !active.isDelaying
                 ) {
                     active.hide(false);

package/src/js/core/form-custom.js

@@ -1,4 +1,4 @@
-import { $, $$, closest, isInput, matches, parent, selInput } from 'uikit-util';
+import { $, $$, isInput, matches, parent, selInput } from 'uikit-util';
 import Class from '../mixin/class';
 
 export default {
@@ -43,9 +43,9 @@ export default {
         const value = input.files?.[0]
             ? input.files[0].name
             : matches(input, 'select') &&
-              (option = $$('option', input).filter((el) => el.selected)[0]) // eslint-disable-line prefer-destructuring
-            ? option.textContent
-            : input.value;
+                (option = $$('option', input).filter((el) => el.selected)[0]) // eslint-disable-line prefer-destructuring
+              ? option.textContent
+              : input.value;
 
         if (prev !== value) {
             target[prop] = value;
@@ -65,7 +65,7 @@ export default {
             name: 'reset',
 
             el() {
-                return closest(this.$el, 'form');
+                return this.$el.closest('form');
             },
 
             handler() {

package/src/js/core/icon.js

@@ -3,7 +3,6 @@ import {
     addClass,
     apply,
     attr,
-    closest,
     css,
     each,
     hasAttr,
@@ -110,7 +109,7 @@ export const NavParentIcon = {
 
     beforeConnect() {
         const icon = this.$props.icon;
-        this.icon = closest(this.$el, '.uk-nav-primary') ? `${icon}-large` : icon;
+        this.icon = this.$el.closest('.uk-nav-primary') ? `${icon}-large` : icon;
     },
 };
 
@@ -126,8 +125,8 @@ export const Search = {
             hasClass(this.$el, 'uk-search-icon') && parents(this.$el, '.uk-search-large').length
                 ? 'search-large'
                 : parents(this.$el, '.uk-search-navbar').length
-                ? 'search-navbar'
-                : this.$props.icon;
+                  ? 'search-navbar'
+                  : this.$props.icon;
 
         if (hasAttr(this.$el, 'aria-label')) {
             return;
@@ -137,7 +136,7 @@ export const Search = {
             const label = this.t('toggle');
             attr(this.$el, 'aria-label', label);
         } else {
-            const button = closest(this.$el, 'a,button');
+            const button = this.$el.closest('a,button');
             if (button) {
                 const label = this.t('submit');
                 attr(button, 'aria-label', label);
@@ -172,7 +171,7 @@ const ButtonComponent = {
     mixins: [I18n],
 
     beforeConnect() {
-        const button = closest(this.$el, 'a,button');
+        const button = this.$el.closest('a,button');
 
         attr(button, 'role', this.role !== null && isTag(button, 'a') ? 'button' : this.role);