uikit 3.17.1 → 3.17.2-dev.a0d91caa0

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.1",
+  "version": "3.17.2-dev.a0d91caa0",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [
@@ -21,8 +21,8 @@
   "homepage": "https://getuikit.com",
   "packageManager": "pnpm@8.8.0",
   "devDependencies": {
-    "@rollup/plugin-alias": "^5.0.0",
-    "@rollup/plugin-replace": "^5.0.2",
+    "@rollup/plugin-alias": "^5.0.1",
+    "@rollup/plugin-replace": "^5.0.3",
     "archiver": "^6.0.0",
     "camelcase": "^8.0.0",
     "chokidar-cli": "^3.0.0",
@@ -41,7 +41,7 @@
     "p-limit": "^4.0.0",
     "prettier": "^3.0.2",
     "prettier-plugin-organize-imports": "^3.2.3",
-    "rollup": "^3.28.1",
+    "rollup": "^4.0.0",
     "rollup-plugin-esbuild": "^6.0.1",
     "rollup-plugin-modify": "^3.0.0",
     "rtlcss": "^4.1.0",

package/src/js/api/observables.js

@@ -19,6 +19,7 @@ import {
     toNodes,
     trigger,
 } from 'uikit-util';
+import { callUpdate } from './update';
 
 export function resize(options) {
     return observe(observeResize, options, 'resize');
@@ -106,7 +107,7 @@ function observe(observe, options, emit) {
     return {
         observe,
         handler() {
-            this.$emit(emit);
+            callUpdate(this, emit);
         },
         ...options,
     };

package/src/js/components/filter.js

@@ -42,13 +42,9 @@ export default {
     },
 
     computed: {
-        toggles({ attrItem }, $el) {
-            return $$(`[${attrItem}],[data-${attrItem}]`, $el);
-        },
+        children: ({ target }, $el) => $$(`${target} > *`, $el),
 
-        children({ target }, $el) {
-            return $$(`${target} > *`, $el);
-        },
+        toggles: ({ attrItem }, $el) => $$(`[${attrItem}],[data-${attrItem}]`, $el),
     },
 
     watch: {

package/src/js/components/lightbox-panel.js

@@ -70,9 +70,7 @@ export default {
     },
 
     computed: {
-        caption({ selCaption }, $el) {
-            return $(selCaption, $el);
-        },
+        caption: ({ selCaption }, $el) => $(selCaption, $el),
     },
 
     events: [

package/src/js/components/lightbox.js

@@ -10,9 +10,7 @@ export default {
     data: { toggle: 'a' },
 
     computed: {
-        toggles({ toggle }, $el) {
-            return $$(toggle, $el);
-        },
+        toggles: ({ toggle }, $el) => $$(toggle, $el),
     },
 
     watch: {

package/src/js/components/notification.js

@@ -9,7 +9,6 @@ import {
     pointerEnter,
     pointerLeave,
     remove,
-    startsWith,
     toFloat,
     Transition,
     trigger,
@@ -37,9 +36,7 @@ export default {
     install,
 
     computed: {
-        marginProp({ pos }) {
-            return `margin${startsWith(pos, 'top') ? 'Top' : 'Bottom'}`;
-        },
+        marginProp: ({ pos }) => `margin-${pos.match(/[a-z]+(?=-)/)[0]}`,
 
         startProps() {
             return { opacity: 0, [this.marginProp]: -this.$el.offsetHeight };

package/src/js/components/parallax.js

@@ -22,9 +22,7 @@ export default {
     },
 
     computed: {
-        target({ target }, $el) {
-            return getOffsetElement((target && query(target, $el)) || $el);
-        },
+        target: ({ target }, $el) => getOffsetElement((target && query(target, $el)) || $el),
 
         start({ start }) {
             return toPx(start, 'height', this.target, true);

package/src/js/components/sortable.js

@@ -84,9 +84,7 @@ export default {
     },
 
     computed: {
-        target() {
-            return (this.$el.tBodies || [this.$el])[0];
-        },
+        target: (_, $el) => ($el.tBodies || [$el])[0],
 
         items() {
             return children(this.target);
@@ -96,8 +94,8 @@ export default {
             return isEmpty(this.items);
         },
 
-        handles({ handle }, el) {
-            return handle ? $$(handle, el) : this.items;
+        handles({ handle }, $el) {
+            return handle ? $$(handle, $el) : this.items;
         },
     },
 

package/src/js/core/accordion.js

@@ -53,9 +53,7 @@ export default {
     },
 
     computed: {
-        items({ targets }, $el) {
-            return $$(targets, $el);
-        },
+        items: ({ targets }, $el) => $$(targets, $el),
 
         toggles({ toggle }) {
             return this.items.map((item) => $(toggle, item));

package/src/js/core/cover.js

@@ -22,16 +22,12 @@ export default {
 
     observe: resize({
         target: ({ $el }) => [getPositionedParent($el) || parent($el)],
-        filter: ({ _useObjectFit }) => !_useObjectFit,
+        filter: ({ $el }) => !useObjectFit($el),
     }),
 
-    connected() {
-        this._useObjectFit = isTag(this.$el, 'img', 'video');
-    },
-
     update: {
         read() {
-            if (this._useObjectFit) {
+            if (useObjectFit(this.$el)) {
                 return;
             }
 
@@ -84,3 +80,7 @@ function getPositionedParent(el) {
         }
     }
 }
+
+function useObjectFit(el) {
+    return isTag(el, 'img', 'video');
+}

package/src/js/core/dropnav.js

@@ -63,9 +63,7 @@ export default {
     },
 
     computed: {
-        dropbarAnchor({ dropbarAnchor }, $el) {
-            return query(dropbarAnchor, $el) || $el;
-        },
+        dropbarAnchor: ({ dropbarAnchor }, $el) => query(dropbarAnchor, $el) || $el,
 
         dropbar({ dropbar }) {
             if (!dropbar) {

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

@@ -15,9 +15,7 @@ export default {
     },
 
     computed: {
-        input(_, $el) {
-            return $(selInput, $el);
-        },
+        input: (_, $el) => $(selInput, $el),
 
         state() {
             return this.input.nextElementSibling;

package/src/js/core/height-match.js

@@ -16,13 +16,12 @@ export default {
     },
 
     computed: {
-        elements({ target }, $el) {
-            return $$(target, $el);
-        },
+        elements: ({ target }, $el) => $$(target, $el),
     },
 
     observe: resize({
-        target: ({ $el, elements }) => [$el, ...elements],
+        target: ({ $el, elements }) =>
+            elements.reduce((elements, el) => elements.concat(el, ...el.children), [$el]),
     }),
 
     update: {

package/src/js/core/leader.js

@@ -18,9 +18,7 @@ export default {
     },
 
     computed: {
-        fill({ fill }) {
-            return fill || css(this.$el, '--uk-leader-fill-content');
-        },
+        fill: ({ fill }, $el) => fill || css($el, '--uk-leader-fill-content'),
     },
 
     connected() {

package/src/js/core/navbar.js

@@ -32,13 +32,10 @@ export default {
     },
 
     computed: {
-        dropbarOffset() {
-            return this.dropbarTransparentMode === 'behind' ? this.$el.offsetHeight : 0;
-        },
+        navbarContainer: (_, $el) => closest($el, '.uk-navbar-container'),
 
-        navbarContainer() {
-            return closest(this.$el, '.uk-navbar-container');
-        },
+        dropbarOffset: ({ dropbarTransparentMode }, $el) =>
+            dropbarTransparentMode === 'behind' ? $el.offsetHeight : 0,
     },
 
     watch: {
@@ -69,9 +66,7 @@ export default {
     observe: [
         mutation({
             target: ({ navbarContainer }) => navbarContainer,
-            handler() {
-                this.registerColorListener();
-            },
+            handler: 'registerColorListener',
             options: { attributes: true, attributeFilter: ['class'], attributeOldValue: true },
         }),
         intersection({

package/src/js/core/offcanvas.js

@@ -45,25 +45,17 @@ export default {
     },
 
     computed: {
-        clsFlip({ flip, clsFlip }) {
-            return flip ? clsFlip : '';
-        },
+        clsFlip: ({ flip, clsFlip }) => (flip ? clsFlip : ''),
 
-        clsOverlay({ overlay, clsOverlay }) {
-            return overlay ? clsOverlay : '';
-        },
+        clsOverlay: ({ overlay, clsOverlay }) => (overlay ? clsOverlay : ''),
 
-        clsMode({ mode, clsMode }) {
-            return `${clsMode}-${mode}`;
-        },
+        clsMode: ({ mode, clsMode }) => `${clsMode}-${mode}`,
 
-        clsSidebarAnimation({ mode, clsSidebarAnimation }) {
-            return mode === 'none' || mode === 'reveal' ? '' : clsSidebarAnimation;
-        },
+        clsSidebarAnimation: ({ mode, clsSidebarAnimation }) =>
+            mode === 'none' || mode === 'reveal' ? '' : clsSidebarAnimation,
 
-        clsContainerAnimation({ mode, clsContainerAnimation }) {
-            return mode !== 'push' && mode !== 'reveal' ? '' : clsContainerAnimation;
-        },
+        clsContainerAnimation: ({ mode, clsContainerAnimation }) =>
+            mode !== 'push' && mode !== 'reveal' ? '' : clsContainerAnimation,
 
         transitionElement({ mode }) {
             return mode === 'reveal' ? parent(this.panel) : this.panel;

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

@@ -18,13 +18,9 @@ export default {
     },
 
     computed: {
-        container({ selContainer }, $el) {
-            return closest($el, selContainer);
-        },
+        container: ({ selContainer }, $el) => closest($el, selContainer),
 
-        content({ selContent }, $el) {
-            return closest($el, selContent);
-        },
+        content: ({ selContent }, $el) => closest($el, selContent),
     },
 
     observe: resize({

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

@@ -32,9 +32,7 @@ export default {
     },
 
     computed: {
-        links(_, $el) {
-            return $$('a[href*="#"]', $el).filter((el) => el.hash && isSameSiteAnchor(el));
-        },
+        links: (_, $el) => $$('a[href*="#"]', $el).filter((el) => el.hash && isSameSiteAnchor(el)),
 
         elements({ closest: selector }) {
             return this.links.map((el) => closest(el, selector || '*'));
@@ -108,6 +106,6 @@ export default {
 
 function findFixedElement(target) {
     return target.ownerDocument
-        .elementsFromPoint(1, 1)
+        .elementsFromPoint(offset(target).left, 1)
         .find((el) => ['fixed', 'sticky'].includes(css(el, 'position')) && !el.contains(target));
 }

package/src/js/core/scrollspy.js

@@ -34,9 +34,7 @@ export default {
     }),
 
     computed: {
-        elements({ target }, $el) {
-            return target ? $$(target, $el) : [$el];
-        },
+        elements: ({ target }, $el) => (target ? $$(target, $el) : [$el]),
     },
 
     watch: {

package/src/js/core/sticky.js

@@ -71,9 +71,7 @@ export default {
     },
 
     computed: {
-        selTarget({ selTarget }, $el) {
-            return (selTarget && $(selTarget, $el)) || $el;
-        },
+        selTarget: ({ selTarget }, $el) => (selTarget && $(selTarget, $el)) || $el,
     },
 
     connected() {

package/src/js/core/switcher.js

@@ -51,20 +51,16 @@ export default {
     },
 
     computed: {
-        connects({ connect }, $el) {
-            return queryAll(connect, $el);
-        },
+        connects: ({ connect }, $el) => queryAll(connect, $el),
 
         connectChildren() {
             return this.connects.map((el) => children(el)).flat();
         },
 
-        toggles({ toggle }, $el) {
-            return $$(toggle, $el);
-        },
+        toggles: ({ toggle }, $el) => $$(toggle, $el),
 
-        children() {
-            return children(this.$el).filter((child) =>
+        children(_, $el) {
+            return children($el).filter((child) =>
                 this.toggles.some((toggle) => within(toggle, child)),
             );
         },

package/src/js/core/toggle.js

@@ -45,7 +45,7 @@ export default {
     computed: {
         target({ target }, $el) {
             target = queryAll(target || $el.hash, $el);
-            return (target.length && target) || [$el];
+            return target.length ? target : [$el];
         },
     },
 

package/src/js/mixin/modal.js

@@ -49,9 +49,7 @@ export default {
     },
 
     computed: {
-        panel({ selPanel }, $el) {
-            return $(selPanel, $el);
-        },
+        panel: ({ selPanel }, $el) => $(selPanel, $el),
 
         transitionElement() {
             return this.panel;

package/src/js/mixin/slider-nav.js

@@ -32,17 +32,13 @@ export default {
     },
 
     computed: {
-        nav({ selNav }, $el) {
-            return $(selNav, $el);
-        },
+        nav: ({ selNav }, $el) => $(selNav, $el),
 
         navChildren() {
             return children(this.nav);
         },
 
-        selNavItem({ attrItem }) {
-            return `[${attrItem}],[data-${attrItem}]`;
-        },
+        selNavItem: ({ attrItem }) => `[${attrItem}],[data-${attrItem}]`,
 
         navItems(_, $el) {
             return $$(this.selNavItem, $el);

package/src/js/mixin/slider.js

@@ -51,13 +51,9 @@ export default {
     },
 
     computed: {
-        duration({ velocity }, $el) {
-            return speedUp($el.offsetWidth / velocity);
-        },
+        duration: ({ velocity }, $el) => speedUp($el.offsetWidth / velocity),
 
-        list({ selList }, $el) {
-            return $(selList, $el);
-        },
+        list: ({ selList }, $el) => $(selList, $el),
 
         maxIndex() {
             return this.length - 1;

package/src/js/mixin/togglable.js

@@ -43,13 +43,10 @@ export default {
     },
 
     computed: {
-        hasAnimation({ animation }) {
-            return !!animation[0];
-        },
+        hasAnimation: ({ animation }) => !!animation[0],
 
-        hasTransition({ animation }) {
-            return ['slide', 'reveal'].some((transition) => startsWith(animation[0], transition));
-        },
+        hasTransition: ({ animation }) =>
+            ['slide', 'reveal'].some((transition) => startsWith(animation[0], transition)),
     },
 
     methods: {

package/src/js/util/viewport.js

@@ -110,7 +110,7 @@ export function scrollIntoView(element, { offset: offsetBy = 0 } = {}) {
 
     function findFixedElement(target) {
         return target.ownerDocument
-            .elementsFromPoint(0, 0)
+            .elementsFromPoint(offset(target).left, 0)
             .find(
                 (el) => ['fixed', 'sticky'].includes(css(el, 'position')) && !el.contains(target),
             );