uikit 3.14.4-dev.e3664d0d2 → 3.14.4-dev.fea9fd466

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.14.4-dev.e3664d0d2",
+    "version": "3.14.4-dev.fea9fd466",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/images/components/nav-parent-icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
+    <polyline fill="none" stroke="#000" stroke-width="1.1" points="1 3.5 6 8.5 11 3.5"/>
+</svg>

package/src/images/components/navbar-parent-icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
+    <polyline fill="none" stroke="#000" stroke-width="1.1" points="1 3.5 6 8.5 11 3.5"/>
+</svg>

package/src/js/components/filter.js

@@ -103,7 +103,7 @@ export default {
                 });
         },
 
-        setState(state, animate = true) {
+        async setState(state, animate = true) {
             state = { filter: { '': '' }, sort: [], ...state };
 
             trigger(this.$el, 'beforeFilter', [this, state]);
@@ -112,7 +112,7 @@ export default {
                 toggleClass(el, this.cls, !!matchFilter(el, this.attrItem, state))
             );
 
-            Promise.all(
+            await Promise.all(
                 $$(this.target, this.$el).map((target) => {
                     const filterFn = () => {
                         applyState(state, target, getChildren(target));
@@ -120,7 +120,9 @@ export default {
                     };
                     return animate ? this.animate(filterFn, target) : filterFn();
                 })
-            ).then(() => trigger(this.$el, 'afterFilter', [this]));
+            );
+
+            trigger(this.$el, 'afterFilter', [this]);
         },
 
         updateState() {

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

@@ -45,8 +45,11 @@ export default {
             let minHeight = '';
             const box = boxModelAdjust(this.$el, 'height', 'content-box');
 
+            const { body, scrollingElement } = document;
             const [scrollElement] = scrollParents(this.$el, /auto|scroll/);
-            const { height: viewportHeight } = offsetViewport(scrollElement);
+            const { height: viewportHeight } = offsetViewport(
+                scrollElement === body ? scrollingElement : scrollElement
+            );
 
             if (this.expand) {
                 minHeight = Math.max(
@@ -56,7 +59,8 @@ export default {
                     0
                 );
             } else {
-                const isScrollingElement = document.scrollingElement === scrollElement;
+                const isScrollingElement =
+                    scrollingElement === scrollElement || body === scrollElement;
 
                 // on mobile devices (iOS and Android) window.innerHeight !== 100vh
                 minHeight = `calc(${isScrollingElement ? '100vh' : `${viewportHeight}px`}`;

package/src/js/core/icon.js

@@ -2,6 +2,9 @@ import SVG from './svg';
 import closeIcon from '../../images/components/close-icon.svg';
 import closeLarge from '../../images/components/close-large.svg';
 import marker from '../../images/components/marker.svg';
+import navParentIcon from '../../images/components/nav-parent-icon.svg';
+import navParentIconLarge from '../../images/components/nav-parent-icon-large.svg';
+import navbarParentIcon from '../../images/components/navbar-parent-icon.svg';
 import navbarToggleIcon from '../../images/components/navbar-toggle-icon.svg';
 import overlayIcon from '../../images/components/overlay-icon.svg';
 import paginationNext from '../../images/components/pagination-next.svg';
@@ -19,6 +22,7 @@ import {
     $,
     addClass,
     apply,
+    closest,
     css,
     each,
     hasClass,
@@ -35,6 +39,9 @@ const icons = {
     marker,
     'close-icon': closeIcon,
     'close-large': closeLarge,
+    'nav-parent-icon': navParentIcon,
+    'nav-parent-icon-large': navParentIconLarge,
+    'navbar-parent-icon': navbarParentIcon,
     'navbar-toggle-icon': navbarToggleIcon,
     'overlay-icon': overlayIcon,
     'pagination-next': paginationNext,
@@ -96,6 +103,15 @@ export const IconComponent = {
     },
 };
 
+export const NavParentIcon = {
+    extends: IconComponent,
+
+    beforeConnect() {
+        const icon = this.$props.icon;
+        this.icon = closest(this.$el, '.uk-nav-primary') ? `${icon}-large` : icon;
+    },
+};
+
 export const Slidenav = {
     extends: IconComponent,
 

package/src/js/core/index.js

@@ -29,10 +29,12 @@ export { default as Video } from './video';
 // Icon components
 export { Close } from './icon';
 export { Spinner } from './icon';
+export { NavParentIcon } from './icon';
 export { Slidenav as SlidenavNext } from './icon';
 export { Slidenav as SlidenavPrevious } from './icon';
 export { Search as SearchIcon } from './icon';
 export { IconComponent as Marker } from './icon';
+export { IconComponent as NavbarParentIcon } from './icon';
 export { IconComponent as NavbarToggleIcon } from './icon';
 export { IconComponent as OverlayIcon } from './icon';
 export { IconComponent as PaginationNext } from './icon';

package/src/js/core/leader.js

@@ -1,6 +1,6 @@
 import Class from '../mixin/class';
 import Media from '../mixin/media';
-import { attr, getCssVar, toggleClass, unwrap, wrapInner } from 'uikit-util';
+import { attr, css, toggleClass, unwrap, wrapInner } from 'uikit-util';
 import Resize from '../mixin/resize';
 
 export default {
@@ -19,7 +19,7 @@ export default {
 
     computed: {
         fill({ fill }) {
-            return fill || getCssVar('leader-fill-content');
+            return fill || css(this.$el, '--uk-leader-fill-content');
         },
     },
 

package/src/js/core/navbar.js

@@ -124,7 +124,6 @@ export default {
                         ...this.$props,
                         boundary: this.boundary,
                         pos: this.pos,
-                        offset: this.dropbar || this.offset,
                     }
                 );
             },
@@ -285,8 +284,8 @@ export default {
                 return this.dropbar;
             },
 
-            handler(_, { $el, align }) {
-                if (!hasClass($el, this.clsDrop) || align === 'stretch') {
+            handler({ target }) {
+                if (!this.isDropbarDrop(target)) {
                     return;
                 }
 
@@ -294,7 +293,7 @@ export default {
                     after(this.dropbarAnchor || this.$el, this.dropbar);
                 }
 
-                addClass($el, `${this.clsDrop}-dropbar`);
+                addClass(target, `${this.clsDrop}-dropbar`);
             },
         },
 
@@ -309,22 +308,47 @@ export default {
                 return this.dropbar;
             },
 
-            handler(_, { $el, align }) {
-                if (!hasClass($el, this.clsDrop) || align === 'stretch') {
+            handler({ target }) {
+                if (!this.isDropbarDrop(target)) {
                     return;
                 }
 
-                this._observer = observeResize($el, () =>
+                this._observer = observeResize(target, () =>
                     this.transitionTo(
-                        offset($el).bottom -
+                        offset(target).bottom -
                             offset(this.dropbar).top +
-                            toFloat(css($el, 'marginBottom')),
-                        $el
+                            toFloat(css(target, 'marginBottom')),
+                        target
                     )
                 );
             },
         },
 
+        {
+            name: 'beforeposition',
+
+            el() {
+                return this.dropContainer;
+            },
+
+            filter() {
+                return this.dropbar;
+            },
+
+            handler(e, element, target, options) {
+                if (!this.isDropbarDrop(element)) {
+                    return;
+                }
+
+                const dropbarOffset = offset(this.dropbar);
+
+                css(element, 'maxWidth', dropbarOffset.width - options.viewportOffset * 2);
+
+                options.offset[1] = dropbarOffset.top - offset(target).bottom;
+                options.viewportOffset += dropbarOffset.left;
+            },
+        },
+
         {
             name: 'beforehide',
 
@@ -336,12 +360,12 @@ export default {
                 return this.dropbar;
             },
 
-            handler(e, { $el }) {
+            handler(e) {
                 const active = this.getActive();
 
                 if (
                     matches(this.dropbar, ':hover') &&
-                    active?.$el === $el &&
+                    active?.$el === e.target &&
                     !this.toggles.some((el) => active.target !== el && matches(el, ':focus'))
                 ) {
                     e.preventDefault();
@@ -360,8 +384,8 @@ export default {
                 return this.dropbar;
             },
 
-            handler(_, { $el, align }) {
-                if (!hasClass($el, this.clsDrop) || align === 'stretch') {
+            handler({ target }) {
+                if (!this.isDropbarDrop(target)) {
                     return;
                 }
 
@@ -369,7 +393,7 @@ export default {
 
                 const active = this.getActive();
 
-                if (!active || active?.$el === $el) {
+                if (!active || active?.$el === target) {
                     this.transitionTo(0);
                 }
             },
@@ -409,6 +433,11 @@ export default {
         getDropdown(el) {
             return this.$getComponent(el, 'drop') || this.$getComponent(el, 'dropdown');
         },
+
+        isDropbarDrop(el) {
+            const drop = this.getDropdown(el);
+            return drop && hasClass(el, this.clsDrop) && drop.align !== 'stretch';
+        },
     },
 };
 

package/src/js/mixin/media.js

@@ -1,6 +1,6 @@
 import {
     createEvent,
-    getCssVar,
+    css,
     isNumeric,
     isString,
     on,
@@ -19,7 +19,7 @@ export default {
     },
 
     connected() {
-        const media = toMedia(this.media);
+        const media = toMedia(this.media, this.$el);
         this.matchMedia = true;
         if (media) {
             this.mediaObj = window.matchMedia(media);
@@ -40,11 +40,10 @@ export default {
     },
 };
 
-function toMedia(value) {
+function toMedia(value, element) {
     if (isString(value)) {
         if (startsWith(value, '@')) {
-            const name = `breakpoint-${value.substr(1)}`;
-            value = toFloat(getCssVar(name));
+            value = toFloat(css(element, `--uk-breakpoint-${value.substr(1)}`));
         } else if (isNaN(value)) {
             return value;
         }

package/src/js/mixin/position.js

@@ -2,12 +2,12 @@ import {
     css,
     dimensions,
     flipPosition,
-    getCssVar,
     includes,
     isRtl,
     positionAt,
     scrollParents,
     toPx,
+    trigger,
 } from 'uikit-util';
 
 export default {
@@ -52,13 +52,21 @@ export default {
             const elDim = dimensions(element);
             css(element, { top: -elDim.height, left: -elDim.width });
 
-            positionAt(element, target, {
-                attach,
-                offset,
-                boundary,
-                flip: this.flip,
-                viewportOffset: this.getViewportOffset(element),
-            });
+            const args = [
+                element,
+                target,
+                {
+                    attach,
+                    offset,
+                    boundary,
+                    flip: this.flip,
+                    viewportOffset: this.getViewportOffset(element),
+                },
+            ];
+
+            trigger(element, 'beforeposition', args);
+
+            positionAt(...args);
 
             // Restore scroll position
             scrollElement.scrollTop = scrollTop;
@@ -68,7 +76,7 @@ export default {
         getPositionOffset(element) {
             return (
                 toPx(
-                    this.offset === false ? getCssVar('position-offset', element) : this.offset,
+                    this.offset === false ? css(element, '--uk-position-offset') : this.offset,
                     this.axis === 'x' ? 'width' : 'height',
                     element
                 ) * (includes(['left', 'top'], this.dir) ? -1 : 1)
@@ -79,14 +87,14 @@ export default {
             return includes(['center', 'justify', 'stretch'], this.align)
                 ? 0
                 : toPx(
-                      getCssVar('position-shift-offset', element),
+                      css(element, '--uk-position-shift-offset'),
                       this.axis === 'y' ? 'width' : 'height',
                       element
                   ) * (includes(['left', 'top'], this.align) ? 1 : -1);
         },
 
         getViewportOffset(element) {
-            return toPx(getCssVar('position-viewport-offset', element));
+            return toPx(css(element, '--uk-position-viewport-offset'));
         },
     },
 };

package/src/js/mixin/togglable.js

@@ -10,7 +10,6 @@ import {
     isFunction,
     isVisible,
     noop,
-    offset,
     removeClass,
     scrollParents,
     startsWith,
@@ -232,7 +231,7 @@ function slideHorizontal({ isToggled, duration, velocity, transition, _toggle },
 
         Transition.cancel(el);
 
-        const [scrollElement] = scrollParents(el);
+        const [scrollElement] = scrollParents(el.offsetParent);
         css(scrollElement, 'overflowX', 'hidden');
 
         if (!isToggled(el)) {
@@ -243,17 +242,11 @@ function slideHorizontal({ isToggled, duration, velocity, transition, _toggle },
         duration = velocity * width + duration;
 
         const percent = visible ? ((width + marginLeft * (right ? -1 : 1)) / width) * 100 : 0;
-        const offsetEl = offset(el);
-        const useClipPath = right
-            ? offsetEl.right < scrollElement.clientWidth
-            : Math.round(offsetEl.left) > 0;
 
         css(el, {
-            clipPath: useClipPath
-                ? right
-                    ? `polygon(0 0,${percent}% 0,${percent}% 100%,0 100%)`
-                    : `polygon(${100 - percent}% 0,100% 0,100% 100%,${100 - percent}% 100%)`
-                : '',
+            clipPath: right
+                ? `polygon(0 0,${percent}% 0,${percent}% 100%,0 100%)`
+                : `polygon(${100 - percent}% 0,100% 0,100% 100%,${100 - percent}% 100%)`,
             marginLeft: (((100 - percent) * (right ? 1 : -1)) / 100) * width,
         });
 
@@ -262,7 +255,7 @@ function slideHorizontal({ isToggled, duration, velocity, transition, _toggle },
                 ? Transition.start(
                       el,
                       {
-                          clipPath: useClipPath ? `polygon(0 0,100% 0,100% 100%,0 100%)` : '',
+                          clipPath: `polygon(0 0,100% 0,100% 100%,0 100%)`,
                           marginLeft: 0,
                       },
                       duration * (1 - percent / 100),
@@ -271,11 +264,9 @@ function slideHorizontal({ isToggled, duration, velocity, transition, _toggle },
                 : Transition.start(
                       el,
                       {
-                          clipPath: useClipPath
-                              ? right
-                                  ? `polygon(0 0,0 0,0 100%,0 100%)`
-                                  : `polygon(100% 0,100% 0,100% 100%,100% 100%)`
-                              : '',
+                          clipPath: right
+                              ? `polygon(0 0,0 0,0 100%,0 100%)`
+                              : `polygon(100% 0,100% 0,100% 100%,100% 100%)`,
                           marginLeft: (right ? 1 : -1) * width,
                       },
                       duration * (percent / 100),

package/src/js/util/style.js

@@ -8,6 +8,7 @@ import {
     isString,
     isUndefined,
     memoize,
+    startsWith,
     toNodes,
 } from './lang';
 
@@ -62,18 +63,11 @@ export function css(element, property, value, priority = '') {
     return elements[0];
 }
 
-const propertyRe = /^\s*(["'])?(.*?)\1\s*$/;
-export function getCssVar(name, element = document.documentElement) {
-    return css(element, `--uk-${name}`).replace(propertyRe, '$2');
-}
-
 // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-setproperty
 export const propName = memoize((name) => vendorPropName(name));
 
-const cssPrefixes = ['webkit', 'moz'];
-
 function vendorPropName(name) {
-    if (name[0] === '-') {
+    if (startsWith(name, '--')) {
         return name;
     }
 
@@ -85,11 +79,8 @@ function vendorPropName(name) {
         return name;
     }
 
-    let i = cssPrefixes.length,
-        prefixedName;
-
-    while (i--) {
-        prefixedName = `-${cssPrefixes[i]}-${name}`;
+    for (const prefix of ['webkit', 'moz']) {
+        const prefixedName = `-${prefix}-${name}`;
         if (prefixedName in style) {
             return prefixedName;
         }

package/src/js/util/viewport.js

@@ -128,12 +128,10 @@ export function scrollParents(element, overflowRe = /auto|scroll|hidden|clip/, s
 export function offsetViewport(scrollElement) {
     const window = toWindow(scrollElement);
     const {
-        document: { body, documentElement },
+        document: { documentElement },
     } = window;
     let viewportElement =
-        scrollElement === scrollingElement(scrollElement) || scrollElement === body
-            ? window
-            : scrollElement;
+        scrollElement === scrollingElement(scrollElement) ? window : scrollElement;
 
     const { visualViewport } = window;
     if (isWindow(viewportElement) && visualViewport) {

package/src/less/components/dropdown.less

@@ -25,6 +25,8 @@
 @dropdown-background:                           @global-muted-background;
 @dropdown-color:                                @global-color;
 
+@dropdown-large-padding:                        40px;
+
 @dropdown-nav-item-color:                       @global-muted-color;
 @dropdown-nav-item-hover-color:                 @global-color;
 @dropdown-nav-subtitle-font-size:               @global-small-font-size;
@@ -68,6 +70,18 @@
 /* Show */
 .uk-dropdown.uk-open { display: block; }
 
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-dropdown > :last-child { margin-bottom: 0; }
+
+
+/* Size modifier
+ ========================================================================== */
+
+.uk-dropdown-large { padding: @dropdown-large-padding; }
+
 
 /* Stretch modifier
  ========================================================================== */

package/src/less/components/leader.less

@@ -49,7 +49,7 @@
  * Pass fill character to JS
  */
 
-:root { --uk-leader-fill-content: '@{leader-fill-content}'; }
+:root { --uk-leader-fill-content: @leader-fill-content; }
 
 
 // Hooks

package/src/less/components/nav.less

@@ -3,13 +3,13 @@
 //
 // Component:       `uk-nav`
 //
-// Sub-objects:     `uk-nav-header`
+// Sub-objects:     `uk-nav-parent-icon`
+//                  `uk-nav-header`
 //                  `uk-nav-divider`
 //                  `uk-nav-subtitle`
 //                  `uk-nav-sub`
 //
-// Modifiers:       `uk-nav-parent-icon`
-//                  `uk-nav-default`
+// Modifiers:       `uk-nav-default`
 //                  `uk-nav-primary`
 //                  `uk-nav-center`,
 //                  `uk-nav-divider`
@@ -33,10 +33,6 @@
 @nav-sublist-deeper-padding-left:               15px;
 @nav-sublist-item-padding-vertical:             2px;
 
-@nav-parent-icon-width:                         (@global-line-height * 1em);
-@nav-parent-icon-height:                        @nav-parent-icon-width;
-@nav-parent-icon-color:                         @global-color;
-
 @nav-header-padding-vertical:                   @nav-item-padding-vertical;
 @nav-header-padding-horizontal:                 @nav-item-padding-horizontal;
 @nav-header-font-size:                          @global-small-font-size;
@@ -76,13 +72,10 @@
 @nav-primary-sublist-item-hover-color:          @global-color;
 @nav-primary-sublist-item-active-color:         @global-emphasis-color;
 
-@nav-dividers-margin-top:                       0;
+@nav-dividers-margin-top:                       5px;
 @nav-dividers-border-width:                     @global-border-width;
 @nav-dividers-border:                           @global-border;
 
-@internal-nav-parent-close-image:               "../../images/backgrounds/nav-parent-close.svg";
-@internal-nav-parent-open-image:                "../../images/backgrounds/nav-parent-open.svg";
-
 
 /* ========================================================================
    Component: Nav
@@ -152,18 +145,9 @@ ul.uk-nav-sub {
 /* Parent icon modifier
  ========================================================================== */
 
-.uk-nav-parent-icon > .uk-parent > a::after {
-    content: "";
-    width: @nav-parent-icon-width;
-    height: @nav-parent-icon-height;
-    margin-left: auto;
-    .svg-fill(@internal-nav-parent-close-image, "#000", @nav-parent-icon-color);
-    background-repeat: no-repeat;
-    background-position: 50% 50%;
-    .hook-nav-parent-icon();
-}
+.uk-nav-parent-icon { margin-left: auto; }
 
-.uk-nav-parent-icon > .uk-parent.uk-open > a::after { .svg-fill(@internal-nav-parent-open-image, "#000", @nav-parent-icon-color); }
+.uk-nav > li > a[aria-expanded="true"] .uk-nav-parent-icon { transform: rotate(180deg); }
 
 
 /* Header
@@ -352,7 +336,7 @@ ul.uk-nav-sub {
 .uk-nav-center .uk-nav-sub ul { padding-left: 0; }
 
 /* Parent icon modifier  */
-.uk-nav-center.uk-nav-parent-icon > .uk-parent > a::after { margin-left: 0; }
+.uk-nav-center .uk-nav-parent-icon { margin-left: 0; }
 
 
 /* Style modifier
@@ -372,7 +356,6 @@ ul.uk-nav-sub {
 .hook-nav-misc();
 
 .hook-nav-sub() {}
-.hook-nav-parent-icon() {}
 .hook-nav-header() {}
 .hook-nav-divider() {}
 .hook-nav-default() {}
@@ -396,7 +379,6 @@ ul.uk-nav-sub {
 // Inverse
 // ========================================================================
 
-@inverse-nav-parent-icon-color:                 @inverse-global-color;
 @inverse-nav-default-item-color:                @inverse-global-muted-color;
 @inverse-nav-default-item-hover-color:          @inverse-global-color;
 @inverse-nav-default-item-active-color:         @inverse-global-emphasis-color;
@@ -419,17 +401,6 @@ ul.uk-nav-sub {
 
 .hook-inverse() {
 
-    //
-    // Parent icon modifier
-    //
-
-    .uk-nav-parent-icon > .uk-parent > a::after {
-        .svg-fill(@internal-nav-parent-close-image, "#000", @inverse-nav-parent-icon-color);
-        .hook-inverse-nav-parent-icon();
-    }
-
-    .uk-nav-parent-icon > .uk-parent.uk-open > a::after { .svg-fill(@internal-nav-parent-open-image, "#000", @inverse-nav-parent-icon-color); }
-
     //
     // Default
     //
@@ -511,7 +482,6 @@ ul.uk-nav-sub {
 
 }
 
-.hook-inverse-nav-parent-icon() {}
 .hook-inverse-nav-default-item() {}
 .hook-inverse-nav-default-item-hover() {}
 .hook-inverse-nav-default-item-active() {}