uikit 3.17.12-dev.f1425d280 → 3.18.1-dev.0856bd8a6

package/src/js/core/icon.js

@@ -3,6 +3,7 @@ import {
     addClass,
     apply,
     attr,
+    closest,
     css,
     each,
     hasAttr,
@@ -11,7 +12,6 @@ import {
     isRtl,
     isString,
     isTag,
-    parents,
     swap,
 } from 'uikit-util';
 import closeIcon from '../../images/components/close-icon.svg';
@@ -54,6 +54,7 @@ const icons = {
     'search-icon': searchIcon,
     'search-large': searchLarge,
     'search-navbar': searchNavbar,
+    'search-toggle-icon': searchIcon,
     'slidenav-next': slidenavNext,
     'slidenav-next-large': slidenavNextLarge,
     'slidenav-previous': slidenavPrevious,
@@ -121,10 +122,12 @@ export const Search = {
     i18n: { toggle: 'Open Search', submit: 'Submit Search' },
 
     beforeConnect() {
-        this.icon =
-            hasClass(this.$el, 'uk-search-icon') && parents(this.$el, '.uk-search-large').length
+        const isToggle = hasClass(this.$el, 'uk-search-toggle') || hasClass(this.$el, 'uk-navbar-toggle');
+        this.icon = isToggle 
+            ? 'search-toggle-icon' 
+            : hasClass(this.$el, 'uk-search-icon') && closest(this.$el, '.uk-search-large')
                 ? 'search-large'
-                : parents(this.$el, '.uk-search-navbar').length
+                : closest(this.$el, '.uk-search-navbar')
                   ? 'search-navbar'
                   : this.$props.icon;
 
@@ -132,7 +135,7 @@ export const Search = {
             return;
         }
 
-        if (hasClass(this.$el, 'uk-search-toggle') || hasClass(this.$el, 'uk-navbar-toggle')) {
+        if (isToggle) {
             const label = this.t('toggle');
             attr(this.$el, 'aria-label', label);
         } else {
@@ -248,7 +251,11 @@ function install(UIkit) {
     };
 }
 
+const aliases = { twitter: 'x' };
+
 function getIcon(icon) {
+    icon = aliases[icon] || icon;
+
     if (!icons[icon]) {
         return null;
     }

package/src/js/core/index.js

@@ -6,9 +6,11 @@ export { default as Dropnav } from './dropnav';
 export { default as FormCustom } from './form-custom';
 export { default as Grid } from './grid';
 export { default as HeightMatch } from './height-match';
+export { default as HeightPlaceholder } from './height-placeholder';
 export { default as HeightViewport } from './height-viewport';
 export { default as Icon } from './icon';
 export { default as Img } from './img';
+export { default as Inverse } from './inverse';
 export { default as Leader } from './leader';
 export { default as Margin } from './margin';
 export { default as Modal } from './modal';

package/src/js/core/inverse.js

@@ -0,0 +1,103 @@
+import { $$, css, dimensions, matches, observeResize, on, replaceClass } from 'uikit-util';
+import { mutation } from '../api/observables';
+
+export default {
+    props: {
+        target: String,
+        selActive: String,
+    },
+
+    data: {
+        target: false,
+        selActive: false,
+    },
+
+    computed: {
+        target: ({ target }, $el) => (target ? $$(target, $el) : [$el]),
+    },
+
+    observe: [
+        mutation({
+            target: ({ target }) => target,
+            options: { attributes: true, attributeFilter: ['class'], attributeOldValue: true },
+        }),
+        {
+            target: ({ target }) => target,
+            observe: (target, handler) => {
+                const observer = observeResize([...target, document.documentElement], handler);
+                const listener = [
+                    on(document, 'scroll itemshown itemhidden', handler, {
+                        passive: true,
+                        capture: true,
+                    }),
+                    on(document, 'show hide transitionstart', (e) => {
+                        handler();
+                        return observer.observe(e.target);
+                    }),
+                    on(document, 'shown hidden transitionend transitioncancel', (e) => {
+                        handler();
+                        return observer.unobserve(e.target);
+                    }),
+                ];
+
+                return {
+                    disconnect() {
+                        observer.disconnect();
+                        listener.map((off) => off());
+                    },
+                };
+            },
+            handler() {
+                this.$emit();
+            },
+        },
+    ],
+
+    update: {
+        read() {
+            for (const target of this.target) {
+                replaceClass(
+                    target,
+                    'uk-light,uk-dark',
+                    !this.selActive || matches(target, this.selActive)
+                        ? findTargetColor(target)
+                        : '',
+                );
+            }
+        },
+    },
+};
+
+function findTargetColor(target) {
+    const { left, top, height, width } = dimensions(target);
+
+    let last;
+    for (const percent of [0.25, 0.5, 0.75]) {
+        const elements = target.ownerDocument.elementsFromPoint(
+            Math.max(0, left) + width * percent,
+            Math.max(0, top) + height / 2,
+        );
+
+        for (const element of elements) {
+            if (
+                target.contains(element) ||
+                (element.closest('[class*="-leave"]') &&
+                    elements.some((el) => element !== el && matches(el, '[class*="-enter"]')))
+            ) {
+                continue;
+            }
+
+            const color = css(element, '--uk-inverse');
+            if (color) {
+                if (color === last) {
+                    return `uk-${color}`;
+                }
+
+                last = color;
+                break;
+            }
+        }
+    }
+
+    return last ? `uk-${last}` : '';
+}

package/src/js/core/modal.js

@@ -7,6 +7,7 @@ import {
     height,
     html,
     isString,
+    isTag,
     noop,
     on,
     removeClass,
@@ -26,6 +27,18 @@ export default {
     },
 
     events: [
+        {
+            name: 'fullscreenchange webkitendfullscreen',
+
+            capture: true,
+
+            handler(e) {
+                if (isTag(e.target, 'video') && this.isToggled() && !document.fullscreenElement) {
+                    this.hide();
+                }
+            },
+        },
+
         {
             name: 'show',
 

package/src/js/core/navbar.js

@@ -1,20 +1,8 @@
-import {
-    $$,
-    addClass,
-    css,
-    hasClass,
-    observeResize,
-    offset,
-    on,
-    parent,
-    pointInRect,
-    removeClass,
-    replaceClass,
-    scrollParent,
-} from 'uikit-util';
-import { intersection, mutation } from '../api/observables';
+import { $$, addClass, css, hasClass, removeClass } from 'uikit-util';
 import Dropnav from './dropnav';
 
+const clsNavbarTransparent = 'uk-navbar-transparent';
+
 export default {
     extends: Dropnav,
 
@@ -26,57 +14,37 @@ export default {
         clsDrop: 'uk-navbar-dropdown',
         selNavItem:
             '.uk-navbar-nav > li > a,a.uk-navbar-item,button.uk-navbar-item,.uk-navbar-item a,.uk-navbar-item button,.uk-navbar-toggle', // Simplify with :where() selector once browser target is Safari 14+
-        selTransparentTarget: '[class*="uk-section"]',
         dropbarTransparentMode: false,
     },
 
     computed: {
         navbarContainer: (_, $el) => $el.closest('.uk-navbar-container'),
 
-        dropbarOffset: ({ dropbarTransparentMode }, $el) =>
-            dropbarTransparentMode === 'behind' ? $el.offsetHeight : 0,
+        dropbarOffset({ dropbarTransparentMode }) {
+            const { offsetTop, offsetHeight } = this.navbarContainer;
+            return (
+                offsetTop +
+                (dropbarTransparentMode === 'behind'
+                    ? 0
+                    : offsetHeight + this.dropbarPositionOffset)
+            );
+        },
     },
 
     watch: {
         items() {
             const justify = hasClass(this.$el, 'uk-navbar-justify');
-            for (const container of $$(
-                '.uk-navbar-nav, .uk-navbar-left, .uk-navbar-right',
-                this.$el,
-            )) {
-                css(
-                    container,
-                    'flexGrow',
-                    justify
-                        ? $$(
-                              '.uk-navbar-nav > li > a, .uk-navbar-item, .uk-navbar-toggle',
-                              container,
-                          ).length
-                        : '',
-                );
+            const containers = $$('.uk-navbar-nav, .uk-navbar-left, .uk-navbar-right', this.$el);
+            for (const container of containers) {
+                const items = justify
+                    ? $$('.uk-navbar-nav > li > a, .uk-navbar-item, .uk-navbar-toggle', container)
+                          .length
+                    : '';
+                css(container, 'flexGrow', items);
             }
         },
     },
 
-    disconnect() {
-        this._colorListener?.();
-    },
-
-    observe: [
-        mutation({
-            target: ({ navbarContainer }) => navbarContainer,
-            handler: 'registerColorListener',
-            options: { attributes: true, attributeFilter: ['class'], attributeOldValue: true },
-        }),
-        intersection({
-            handler(records) {
-                this._isIntersecting = records[0].isIntersecting;
-                this.registerColorListener();
-            },
-            args: { intersecting: false },
-        }),
-    ],
-
     events: [
         {
             name: 'show',
@@ -86,26 +54,12 @@ export default {
             },
 
             handler({ target }) {
-                const transparentMode = this.getTransparentMode(target);
-
-                if (!transparentMode || this._mode) {
-                    return;
-                }
-
-                const storePrevColor = () =>
-                    (this._mode = removeClasses(this.navbarContainer, 'uk-light', 'uk-dark'));
-
-                if (transparentMode === 'behind') {
-                    const mode = getDropbarBehindColor(this.$el);
-                    if (mode) {
-                        storePrevColor();
-                        addClass(this.navbarContainer, `uk-${mode}`);
-                    }
-                }
-
-                if (transparentMode === 'remove') {
-                    storePrevColor();
-                    removeClass(this.navbarContainer, 'uk-navbar-transparent');
+                if (
+                    this.getTransparentMode(target) === 'remove' &&
+                    hasClass(this.navbarContainer, clsNavbarTransparent)
+                ) {
+                    removeClass(this.navbarContainer, clsNavbarTransparent);
+                    this._transparent = true;
                 }
             },
         },
@@ -116,33 +70,13 @@ export default {
                 return this.dropContainer;
             },
 
-            async handler({ target }) {
-                const transparentMode = this.getTransparentMode(target);
-
-                if (!transparentMode || !this._mode) {
-                    return;
-                }
-
+            async handler() {
                 await awaitMacroTask();
 
-                if (this.getActive()) {
-                    return;
+                if (!this.getActive() && this._transparent) {
+                    addClass(this.navbarContainer, clsNavbarTransparent);
+                    this._transparent = null;
                 }
-
-                if (transparentMode === 'behind') {
-                    const mode = getDropbarBehindColor(this.$el);
-                    if (mode) {
-                        removeClass(this.navbarContainer, `uk-${mode}`);
-                    }
-                }
-
-                addClass(this.navbarContainer, this._mode);
-
-                if (transparentMode === 'remove') {
-                    addClass(this.navbarContainer, 'uk-navbar-transparent');
-                }
-
-                this._mode = null;
             },
         },
     ],
@@ -159,87 +93,13 @@ export default {
 
             const drop = this.getDropdown(el);
 
-            if (!drop || !hasClass(el, 'uk-dropbar')) {
-                return;
+            if (drop && hasClass(el, 'uk-dropbar')) {
+                return drop.inset ? 'behind' : 'remove';
             }
-
-            return drop.inset ? 'behind' : 'remove';
-        },
-
-        registerColorListener() {
-            const active =
-                this._isIntersecting &&
-                hasClass(this.navbarContainer, 'uk-navbar-transparent') &&
-                !isWithinMixBlendMode(this.navbarContainer) &&
-                !$$('.uk-drop', this.dropContainer)
-                    .map(this.getDropdown)
-                    .some(
-                        (drop) =>
-                            drop.isToggled() &&
-                            (drop.inset || this.getTransparentMode(drop.$el) === 'behind'),
-                    );
-
-            if (this._colorListener) {
-                if (!active) {
-                    this._colorListener();
-                    this._colorListener = null;
-                }
-                return;
-            }
-
-            if (!active) {
-                return;
-            }
-
-            this._colorListener = listenForPositionChange(this.navbarContainer, () => {
-                const { left, top, height } = offset(this.navbarContainer);
-                const startPoint = { x: left, y: Math.max(0, top) + height / 2 };
-                const target = $$(this.selTransparentTarget).find((target) =>
-                    pointInRect(startPoint, offset(target)),
-                );
-                const color = css(target, '--uk-navbar-color');
-                if (color) {
-                    replaceClass(this.navbarContainer, 'uk-light,uk-dark', `uk-${color}`);
-                }
-            });
         },
     },
 };
 
-function removeClasses(el, ...classes) {
-    for (const cls of classes) {
-        if (hasClass(el, cls)) {
-            removeClass(el, cls);
-            return cls;
-        }
-    }
-}
-
-async function awaitMacroTask() {
+function awaitMacroTask() {
     return new Promise((resolve) => setTimeout(resolve));
 }
-
-function getDropbarBehindColor(el) {
-    return css(el, '--uk-navbar-dropbar-behind-color');
-}
-
-function listenForPositionChange(el, handler) {
-    const parent = scrollParent(el, true);
-    const scrollEl = parent === document.documentElement ? document : parent;
-
-    const off = on(scrollEl, 'scroll', handler, { passive: true });
-    const observer = observeResize([el, parent], handler);
-
-    return () => {
-        off();
-        observer.disconnect();
-    };
-}
-
-function isWithinMixBlendMode(el) {
-    do {
-        if (css(el, 'mixBlendMode') !== 'normal') {
-            return true;
-        }
-    } while ((el = parent(el)));
-}

package/src/js/core/responsive.js

@@ -1,37 +1,10 @@
-import { addClass, Dimensions, height, isVisible, parent, width } from 'uikit-util';
-import { resize } from '../api/observables';
+import { addClass, css } from 'uikit-util';
 
 export default {
     props: ['width', 'height'],
 
     connected() {
         addClass(this.$el, 'uk-responsive-width');
-    },
-
-    observe: resize({
-        target: ({ $el }) => [$el, parent($el)],
-    }),
-
-    update: {
-        read() {
-            return isVisible(this.$el) && this.width && this.height
-                ? { width: width(parent(this.$el)), height: this.height }
-                : false;
-        },
-
-        write(dim) {
-            height(
-                this.$el,
-                Dimensions.contain(
-                    {
-                        height: this.height,
-                        width: this.width,
-                    },
-                    dim,
-                ).height,
-            );
-        },
-
-        events: ['resize'],
+        css(this.$el, 'aspectRatio', `${this.width}/${this.height}`);
     },
 };