uikit 3.17.9-dev.9f100be74 → 3.17.9-dev.f43c05fb3

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.9-dev.9f100be74",
+  "version": "3.17.9-dev.f43c05fb3",
   "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/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);
         }
     };

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 {};
@@ -173,8 +173,8 @@ function toList(value) {
     return isArray(value)
         ? value
         : isString(value)
-        ? value
-              .split(listRe)
-              .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/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

@@ -16,7 +16,6 @@ import {
     pointerEnter,
     pointerLeave,
     remove,
-    within,
 } from 'uikit-util';
 import { generateId } from '../api/instance';
 import { parseOptions } from '../api/options';
@@ -112,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, {

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);
 

package/src/js/core/navbar.js

@@ -1,7 +1,6 @@
 import {
     $$,
     addClass,
-    closest,
     css,
     hasClass,
     observeResize,
@@ -32,7 +31,7 @@ export default {
     },
 
     computed: {
-        navbarContainer: (_, $el) => closest($el, '.uk-navbar-container'),
+        navbarContainer: (_, $el) => $el.closest('.uk-navbar-container'),
 
         dropbarOffset: ({ dropbarTransparentMode }, $el) =>
             dropbarTransparentMode === 'behind' ? $el.offsetHeight : 0,

package/src/js/core/overflow-auto.js

@@ -1,4 +1,4 @@
-import { closest, css, dimensions, height, isVisible } from 'uikit-util';
+import { css, dimensions, height, isVisible } from 'uikit-util';
 import { resize } from '../api/observables';
 import Class from '../mixin/class';
 
@@ -18,9 +18,9 @@ export default {
     },
 
     computed: {
-        container: ({ selContainer }, $el) => closest($el, selContainer),
+        container: ({ selContainer }, $el) => $el.closest(selContainer),
 
-        content: ({ selContent }, $el) => closest($el, selContent),
+        content: ({ selContent }, $el) => $el.closest(selContent),
     },
 
     observe: resize({

package/src/js/core/scroll.js

@@ -6,7 +6,6 @@ import {
     on,
     scrollIntoView,
     trigger,
-    within,
 } from 'uikit-util';
 
 export default {
@@ -61,7 +60,7 @@ function clickHandler(e) {
     }
 
     for (const instance of instances) {
-        if (within(e.target, instance.$el) && isSameSiteAnchor(instance.$el)) {
+        if (instance.$el.contains(e.target) && isSameSiteAnchor(instance.$el)) {
             e.preventDefault();
             if (window.location.href !== instance.$el.href) {
                 window.history.pushState({}, '', instance.$el.href);

package/src/js/core/scrollspy-nav.js

@@ -1,6 +1,5 @@
 import {
     $$,
-    closest,
     getCoveringElement,
     getTargetedElement,
     hasClass,
@@ -35,7 +34,7 @@ export default {
         links: (_, $el) => $$('a[href*="#"]', $el).filter((el) => el.hash && isSameSiteAnchor(el)),
 
         elements({ closest: selector }) {
-            return this.links.map((el) => closest(el, selector || '*'));
+            return this.links.map((el) => el.closest(selector || '*'));
         },
     },
 

package/src/js/core/sticky.js

@@ -25,7 +25,6 @@ import {
     toPx,
     toggleClass,
     trigger,
-    within,
 } from 'uikit-util';
 import { resize, scroll, viewport } from '../api/observables';
 import Class from '../mixin/class';
@@ -253,7 +252,7 @@ export default {
 
                 css(placeholder, { height, width, margin });
 
-                if (!within(placeholder, document)) {
+                if (!document.contains(placeholder)) {
                     placeholder.hidden = true;
                 }
                 (sticky ? before : after)(this.$el, placeholder);
@@ -456,9 +455,7 @@ function parseProp(value, el, propOffset, padding) {
         const refElement = value === true ? parent(el) : query(value, el);
         return (
             getOffset(refElement).bottom -
-            (padding && refElement && within(el, refElement)
-                ? toFloat(css(refElement, 'paddingBottom'))
-                : 0)
+            (padding && refElement?.contains(el) ? toFloat(css(refElement, 'paddingBottom')) : 0)
         );
     }
 }

package/src/js/core/switcher.js

@@ -2,7 +2,6 @@ import {
     $$,
     attr,
     children,
-    closest,
     css,
     data,
     endsWith,
@@ -15,7 +14,6 @@ import {
     queryAll,
     toArray,
     toggleClass,
-    within,
 } from 'uikit-util';
 import { generateId } from '../api/instance';
 import { lazyload, swipe } from '../api/observables';
@@ -61,7 +59,7 @@ export default {
 
         children(_, $el) {
             return children($el).filter((child) =>
-                this.toggles.some((toggle) => within(toggle, child)),
+                this.toggles.some((toggle) => child.contains(toggle)),
             );
         },
     },
@@ -132,14 +130,14 @@ export default {
                     keyCode === keyMap.HOME
                         ? 0
                         : keyCode === keyMap.END
-                        ? 'last'
-                        : (keyCode === keyMap.LEFT && !isVertical) ||
-                          (keyCode === keyMap.UP && isVertical)
-                        ? 'previous'
-                        : (keyCode === keyMap.RIGHT && !isVertical) ||
-                          (keyCode === keyMap.DOWN && isVertical)
-                        ? 'next'
-                        : -1;
+                          ? 'last'
+                          : (keyCode === keyMap.LEFT && !isVertical) ||
+                              (keyCode === keyMap.UP && isVertical)
+                            ? 'previous'
+                            : (keyCode === keyMap.RIGHT && !isVertical) ||
+                                (keyCode === keyMap.DOWN && isVertical)
+                              ? 'next'
+                              : -1;
 
                 if (~i) {
                     e.preventDefault();
@@ -165,7 +163,7 @@ export default {
             },
 
             handler(e) {
-                if (closest(e.target, 'a,button')) {
+                if (e.target.closest('a,button')) {
                     e.preventDefault();
                     this.show(data(e.current, this.attrItem));
                 }

package/src/js/core/tab.js

@@ -21,8 +21,8 @@ export default {
         const cls = hasClass(this.$el, 'uk-tab-left')
             ? 'uk-tab-left'
             : hasClass(this.$el, 'uk-tab-right')
-            ? 'uk-tab-right'
-            : false;
+              ? 'uk-tab-right'
+              : false;
 
         if (cls) {
             this.$create('toggle', this.$el, { cls, mode: 'media', media: this.media });

package/src/js/core/toggle.js

@@ -1,6 +1,5 @@
 import {
     attr,
-    closest,
     hasAttr,
     hasClass,
     includes,
@@ -15,7 +14,6 @@ import {
     pointerLeave,
     queryAll,
     trigger,
-    within,
 } from 'uikit-util';
 import { lazyload } from '../api/observables';
 import Media from '../mixin/media';
@@ -85,7 +83,7 @@ export default {
                     pointerDown,
                     () => trigger(this.$el, 'blur'),
                     true,
-                    (e) => !within(e.target, this.$el),
+                    (e) => !this.$el.contains(e.target),
                 );
 
                 // Prevent initial click to prevent double toggle through focus + click
@@ -163,8 +161,8 @@ export default {
                 let link;
                 if (
                     this._preventClick ||
-                    closest(e.target, 'a[href="#"], a[href=""]') ||
-                    ((link = closest(e.target, 'a[href]')) &&
+                    e.target.closest('a[href="#"], a[href=""]') ||
+                    ((link = e.target.closest('a[href]')) &&
                         (!this.isToggled(this.target) ||
                             (link.hash && matches(this.target, link.hash))))
                 ) {

package/src/js/mixin/animate.js

@@ -20,13 +20,13 @@ export default {
                 name === 'fade'
                     ? fade
                     : name === 'delayed-fade'
-                    ? (...args) => fade(...args, 40)
-                    : name
-                    ? slide
-                    : () => {
-                          action();
-                          return Promise.resolve();
-                      };
+                      ? (...args) => fade(...args, 40)
+                      : name
+                        ? slide
+                        : () => {
+                              action();
+                              return Promise.resolve();
+                          };
 
             return animationFn(action, target, this.duration).catch(noop);
         },

package/src/js/mixin/internal/animate-fade.js

@@ -93,8 +93,8 @@ export default function fade(action, target, duration, stagger = 0) {
     return hasClass(target, clsLeave)
         ? waitTransitionend(target).then(enterFn)
         : hasClass(target, clsEnter)
-        ? waitTransitionend(target).then(leaveFn).then(enterFn)
-        : leaveFn().then(enterFn);
+          ? waitTransitionend(target).then(leaveFn).then(enterFn)
+          : leaveFn().then(enterFn);
 }
 
 function transitionIndex(target, next) {