uikit 3.13.2-dev.d4aecc3e6 → 3.13.2

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.13.2-dev.d4aecc3e6",
+    "version": "3.13.2",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [
@@ -34,27 +34,27 @@
     },
     "homepage": "https://getuikit.com",
     "devDependencies": {
-        "@babel/core": "^7.16.0",
+        "@babel/core": "^7.17.8",
         "@babel/preset-env": "^7.16.4",
         "@rollup/plugin-alias": "^3.1.9",
-        "@rollup/plugin-babel": "^5.3.0",
+        "@rollup/plugin-babel": "^5.3.1",
         "@rollup/plugin-replace": "^3.0.1",
         "archiver": "^5.3.0",
         "camelcase": "^6.3.0",
         "clean-css": "^5.2.4",
         "dateformat": "^5.0.3",
-        "esbuild": "^0.14.23",
-        "eslint": "^8.9.0",
-        "eslint-config-prettier": "^8.3.0",
-        "fs-extra": "^10.0.0",
+        "esbuild": "^0.14.27",
+        "eslint": "^8.11.0",
+        "eslint-config-prettier": "^8.5.0",
+        "fs-extra": "^10.0.1",
         "glob": "^7.2.0",
-        "inquirer": "^8.2.0",
+        "inquirer": "^8.2.1",
         "less": "^4.1.2",
         "minimist": "^1.2.5",
         "number-precision": "^1.5.2",
         "p-limit": "^4.0.0",
-        "prettier": "^2.5.1",
-        "rollup": "^2.68.0",
+        "prettier": "^2.6.0",
+        "rollup": "^2.70.1",
         "rollup-plugin-esbuild": "^4.8.2",
         "rollup-plugin-html": "^0.2.1",
         "rollup-plugin-modify": "^3.0.0",

package/src/js/components/tooltip.js

@@ -35,7 +35,6 @@ export default {
         animation: ['uk-animation-scale-up'],
         duration: 100,
         cls: 'uk-active',
-        clsPos: 'uk-tooltip',
     },
 
     beforeConnect() {
@@ -91,8 +90,8 @@ export default {
         _show() {
             this.tooltip = append(
                 this.container,
-                `<div class="${this.clsPos}">
-                    <div class="${this.clsPos}-inner">${this.title}</div>
+                `<div class="uk-${this.$options.name}">
+                    <div class="uk-${this.$options.name}-inner">${this.title}</div>
                  </div>`
             );
 

package/src/js/core/drop.js

@@ -63,7 +63,7 @@ export default {
     },
 
     connected() {
-        this.clsPos = this.clsDrop = this.$props.clsDrop || `uk-${this.$options.name}`;
+        this.clsDrop = this.$props.clsDrop || `uk-${this.$options.name}`;
         addClass(this.$el, this.clsDrop);
 
         if (this.toggle && !this.target) {
@@ -129,7 +129,7 @@ export default {
                 if (this.isToggled()) {
                     this.hide(false);
                 } else {
-                    this.show(toggle.$el, false);
+                    this.show(toggle?.$el, false);
                 }
             },
         },
@@ -141,7 +141,7 @@ export default {
 
             handler(e, toggle) {
                 e.preventDefault();
-                this.show(toggle.$el);
+                this.show(toggle?.$el);
             },
         },
 
@@ -352,23 +352,20 @@ export default {
         },
 
         position() {
-            const boundary = this.boundary === true ? window : query(this.boundary, this.$el);
+            const boundary = query(this.boundary, this.$el) || window;
             removeClass(this.$el, `${this.clsDrop}-stack`);
             toggleClass(this.$el, `${this.clsDrop}-boundary`, this.boundaryAlign);
 
             const boundaryOffset = offset(boundary);
-            const alignTo = this.boundaryAlign ? boundaryOffset : offset(this.target);
+            const targetOffset = offset(this.target);
+            const alignTo = this.boundaryAlign ? boundaryOffset : targetOffset;
 
             if (this.align === 'justify') {
                 const prop = this.getAxis() === 'y' ? 'width' : 'height';
                 css(this.$el, prop, alignTo[prop]);
             } else if (
-                boundary &&
                 this.$el.offsetWidth >
-                    Math.max(
-                        boundaryOffset.right - alignTo.left,
-                        alignTo.right - boundaryOffset.left
-                    )
+                Math.max(boundaryOffset.right - alignTo.left, alignTo.right - boundaryOffset.left)
             ) {
                 addClass(this.$el, `${this.clsDrop}-stack`);
             }

package/src/js/core/navbar.js

@@ -16,6 +16,7 @@ import {
     isVisible,
     matches,
     noop,
+    offset,
     once,
     parent,
     query,
@@ -42,7 +43,6 @@ export default {
         delayShow: Number,
         delayHide: Number,
         dropbar: Boolean,
-        dropbarMode: String,
         dropbarAnchor: Boolean,
         duration: Number,
     },
@@ -59,7 +59,6 @@ export default {
         flip: 'x',
         boundary: true,
         dropbar: false,
-        dropbarMode: 'slide',
         dropbarAnchor: false,
         duration: 200,
         forceHeight: true,
@@ -68,8 +67,8 @@ export default {
     },
 
     computed: {
-        boundary({ boundary, boundaryAlign }, $el) {
-            return boundary === true || boundaryAlign ? $el : boundary;
+        boundary({ boundary }, $el) {
+            return boundary === true ? $el : boundary;
         },
 
         dropbarAnchor({ dropbarAnchor }, $el) {
@@ -276,10 +275,16 @@ export default {
                 return this.dropbar;
             },
 
-            handler() {
+            handler(_, { $el }) {
+                if (!hasClass($el, this.clsDrop)) {
+                    return;
+                }
+
                 if (!parent(this.dropbar)) {
                     after(this.dropbarAnchor || this.$el, this.dropbar);
                 }
+
+                addClass($el, `${this.clsDrop}-dropbar`);
             },
         },
 
@@ -299,16 +304,10 @@ export default {
                     return;
                 }
 
-                if (this.dropbarMode === 'slide') {
-                    addClass(this.dropbar, 'uk-navbar-dropbar-slide');
-                }
-
-                this.clsDrop && addClass($el, `${this.clsDrop}-dropbar`);
-
                 if (dir === 'bottom') {
                     this.transitionTo(
-                        $el.offsetHeight +
-                            toFloat(css($el, 'marginTop')) +
+                        offset($el).bottom -
+                            offset(this.dropbar).top +
                             toFloat(css($el, 'marginBottom')),
                         $el
                     );

package/src/js/core/responsive.js

@@ -2,7 +2,7 @@ import Resize from '../mixin/resize';
 import { addClass, Dimensions, height, isVisible, parent, width } from 'uikit-util';
 
 export default {
-    mixin: [Resize],
+    mixins: [Resize],
 
     props: ['width', 'height'],
 

package/src/js/core/sticky.js

@@ -14,6 +14,7 @@ import {
     height as getHeight,
     offset as getOffset,
     getScrollingElement,
+    intersectRect,
     isString,
     isVisible,
     noop,
@@ -29,7 +30,6 @@ import {
     toPx,
     trigger,
     within,
-    intersectRect,
 } from 'uikit-util';
 
 export default {

package/src/js/core/video.js

@@ -34,7 +34,7 @@ export default {
             mute(this.$el);
         }
 
-        this.registerObserver(observeIntersection(this.$el, () => this.$emit('scroll'), {}, false));
+        this.registerObserver(observeIntersection(this.$el, () => this.$emit(), {}, false));
     },
 
     update: {

package/src/js/mixin/media.js

@@ -1,12 +1,12 @@
 import {
+    createEvent,
     getCssVar,
+    isNumeric,
     isString,
     on,
-    trigger,
-    toFloat,
     startsWith,
-    isNumeric,
-    createEvent,
+    toFloat,
+    trigger,
 } from 'uikit-util';
 
 export default {

package/src/js/mixin/position.js

@@ -1,12 +1,12 @@
 import {
     $,
     flipPosition,
+    getCssVar,
     offset as getOffset,
     isNumeric,
     isRtl,
     positionAt,
-    removeClasses,
-    toggleClass,
+    toPx,
 } from 'uikit-util';
 
 export default {
@@ -14,14 +14,12 @@ export default {
         pos: String,
         offset: null,
         flip: Boolean,
-        clsPos: String,
     },
 
     data: {
         pos: `bottom-${isRtl ? 'right' : 'left'}`,
         flip: true,
         offset: false,
-        clsPos: '',
     },
 
     connected() {
@@ -32,13 +30,11 @@ export default {
 
     methods: {
         positionAt(element, target, boundary) {
-            removeClasses(element, `${this.clsPos}-(top|bottom|left|right)(-[a-z]+)?`);
-
-            let { offset } = this;
             const axis = this.getAxis();
             const dir = this.pos[0];
             const align = this.pos[1];
 
+            let { offset } = this;
             if (!isNumeric(offset)) {
                 const node = $(offset);
                 offset = node
@@ -46,6 +42,7 @@ export default {
                       getOffset(target)[axis === 'x' ? 'right' : 'bottom']
                     : 0;
             }
+            offset += toPx(getCssVar('position-margin-offset', element));
 
             const { x, y } = positionAt(
                 element,
@@ -62,8 +59,6 @@ export default {
 
             this.dir = axis === 'x' ? x : y;
             this.align = axis === 'x' ? y : x;
-
-            toggleClass(element, `${this.clsPos}-${this.dir}-${this.align}`, this.offset === false);
         },
 
         getAxis() {

package/src/js/util/observer.js

@@ -1,6 +1,7 @@
 import { on } from './event';
 import { toNodes } from './lang';
 import { fastdom } from './fastdom';
+import { inBrowser } from './env';
 
 export function observeIntersection(targets, cb, options, intersecting = true) {
     return observe(
@@ -17,7 +18,7 @@ export function observeIntersection(targets, cb, options, intersecting = true) {
     );
 }
 
-const hasResizeObserver = window.ResizeObserver;
+const hasResizeObserver = inBrowser && window.ResizeObserver;
 export function observeResize(targets, cb, options = { box: 'border-box' }) {
     if (hasResizeObserver) {
         return observe(ResizeObserver, targets, cb, options);

package/src/js/util/style.js

@@ -9,7 +9,6 @@ import {
     isUndefined,
     memoize,
     toNodes,
-    toWindow,
 } from './lang';
 
 const cssNumber = {
@@ -37,21 +36,22 @@ export function css(element, property, value, priority = '') {
             property = propName(property);
 
             if (isUndefined(value)) {
-                return getStyle(element, property);
-            } else if (!value && !isNumber(value)) {
-                element.style.removeProperty(property);
+                return getComputedStyle(element).getPropertyValue(property);
             } else {
                 element.style.setProperty(
                     property,
-                    isNumeric(value) && !cssNumber[property] ? `${value}px` : value,
+                    isNumeric(value) && !cssNumber[property]
+                        ? `${value}px`
+                        : value || isNumber(value)
+                        ? value
+                        : '',
                     priority
                 );
             }
         } else if (isArray(property)) {
-            const styles = getStyles(element);
             const props = {};
             for (const prop of property) {
-                props[prop] = styles[propName(prop)];
+                props[prop] = css(element, prop);
             }
             return props;
         } else if (isObject(property)) {
@@ -62,19 +62,9 @@ export function css(element, property, value, priority = '') {
     return elements[0];
 }
 
-function getStyles(element, pseudoElt) {
-    return toWindow(element).getComputedStyle(element, pseudoElt);
-}
-
-function getStyle(element, property, pseudoElt) {
-    return getStyles(element, pseudoElt)[property];
-}
-
 const propertyRe = /^\s*(["'])?(.*?)\1\s*$/;
-export function getCssVar(name) {
-    return getStyles(document.documentElement)
-        .getPropertyValue(`--uk-${name}`)
-        .replace(propertyRe, '$2');
+export function getCssVar(name, element = document.documentElement) {
+    return css(element, `--uk-${name}`).replace(propertyRe, '$2');
 }
 
 // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-setproperty
@@ -83,6 +73,10 @@ export const propName = memoize((name) => vendorPropName(name));
 const cssPrefixes = ['webkit', 'moz'];
 
 function vendorPropName(name) {
+    if (name[0] === '-') {
+        return name;
+    }
+
     name = hyphenate(name);
 
     const { style } = document.documentElement;

package/src/less/components/drop.less

@@ -21,8 +21,8 @@
 // ========================================================================
 
 @drop-z-index:                              @global-z-index + 20;
-@drop-width:                                300px;
 @drop-margin:                               @global-margin;
+@drop-width:                                300px;
 
 
 /* ========================================================================
@@ -41,25 +41,17 @@
     /* 2 */
     position: absolute;
     z-index: @drop-z-index;
+    --uk-position-margin-offset: @drop-margin;
     /* 3 */
     box-sizing: border-box;
     width: @drop-width;
+    max-width: 100vw;
 }
 
 /* Show */
 .uk-drop.uk-open { display: block; }
 
 
-/* Direction / Alignment modifiers
- ========================================================================== */
-
-/* Direction */
-[class*='uk-drop-top'] { margin-top: -@drop-margin; }
-[class*='uk-drop-bottom'] { margin-top: @drop-margin; }
-[class*='uk-drop-left'] { margin-left: -@drop-margin; }
-[class*='uk-drop-right'] { margin-left: @drop-margin; }
-
-
 /* Grid modifiers
  ========================================================================== */
 

package/src/less/components/dropdown.less

@@ -21,11 +21,11 @@
 // ========================================================================
 
 @dropdown-z-index:                              @global-z-index + 20;
+@dropdown-margin:                               @global-small-margin;
 @dropdown-min-width:                            200px;
 @dropdown-padding:                              15px;
 @dropdown-background:                           @global-muted-background;
 @dropdown-color:                                @global-color;
-@dropdown-margin:                               @global-small-margin;
 
 @dropdown-nav-item-color:                       @global-muted-color;
 @dropdown-nav-item-hover-color:                 @global-color;
@@ -53,9 +53,11 @@
     /* 2 */
     position: absolute;
     z-index: @dropdown-z-index;
+    --uk-position-margin-offset: @dropdown-margin;
     /* 3 */
     box-sizing: border-box;
     min-width: @dropdown-min-width;
+    max-width: 100vw;
     /* 4 */
     padding: @dropdown-padding;
     background: @dropdown-background;
@@ -120,16 +122,6 @@
 .uk-dropdown-nav .uk-nav-sub li.uk-active > a { color: @dropdown-nav-sublist-item-hover-color; }
 
 
-/* Direction / Alignment modifiers
- ========================================================================== */
-
-/* Direction */
-[class*='uk-dropdown-top'] { margin-top: -@dropdown-margin; }
-[class*='uk-dropdown-bottom'] { margin-top: @dropdown-margin; }
-[class*='uk-dropdown-left'] { margin-left: -@dropdown-margin; }
-[class*='uk-dropdown-right'] { margin-left: @dropdown-margin; }
-
-
 /* Grid modifiers
  ========================================================================== */
 

package/src/less/components/navbar.less

@@ -56,8 +56,8 @@
 @navbar-subtitle-font-size:                     @global-small-font-size;
 
 @navbar-dropdown-z-index:                       @global-z-index + 20;
-@navbar-dropdown-width:                         200px;
 @navbar-dropdown-margin:                        0;
+@navbar-dropdown-width:                         200px;
 @navbar-dropdown-padding:                       15px;
 @navbar-dropdown-background:                    @global-muted-background;
 @navbar-dropdown-color:                         @global-color;
@@ -66,6 +66,7 @@
 
 @navbar-dropdown-dropbar-margin-top:            0;
 @navbar-dropdown-dropbar-margin-bottom:         @navbar-dropdown-dropbar-margin-top;
+@navbar-dropdown-dropbar-padding:               @navbar-nav-item-padding-horizontal;
 
 @navbar-dropdown-nav-item-color:                @global-muted-color;
 @navbar-dropdown-nav-item-hover-color:          @global-color;
@@ -348,9 +349,11 @@
     /* 2 */
     position: absolute;
     z-index: @navbar-dropdown-z-index;
+    --uk-position-margin-offset: @navbar-dropdown-margin;
     /* 3 */
     box-sizing: border-box;
     width: @navbar-dropdown-width;
+    max-width: 100vw;
     /* 4 */
     padding: @navbar-dropdown-padding;
     background: @navbar-dropdown-background;
@@ -361,16 +364,6 @@
 /* Show */
 .uk-navbar-dropdown.uk-open { display: block; }
 
-/*
- * Direction / Alignment modifiers
- */
-
-/* Direction */
-[class*='uk-navbar-dropdown-top'] { margin-top: -@navbar-dropdown-margin; }
-[class*='uk-navbar-dropdown-bottom'] { margin-top: @navbar-dropdown-margin; }
-[class*='uk-navbar-dropdown-left'] { margin-left: -@navbar-dropdown-margin; }
-[class*='uk-navbar-dropdown-right'] { margin-left: @navbar-dropdown-margin; }
-
 /*
  * Grid
  * Adopts `uk-grid`
@@ -397,11 +390,17 @@
 
 /*
  * Dropbar modifier
+ * 1. Set position
+ * 2. Bottom padding for dropbar
+ * 3. Horizontal padding
  */
 
 .uk-navbar-dropdown-dropbar {
-    margin-top: @navbar-dropdown-dropbar-margin-top;
+    /* 1 */
+    --uk-position-margin-offset: @navbar-dropdown-dropbar-margin-top;
+    /* 2 */
     margin-bottom: @navbar-dropdown-dropbar-margin-bottom;
+    padding: @navbar-dropdown-dropbar-padding;
     .hook-navbar-dropdown-dropbar();
 }
 
@@ -468,20 +467,12 @@
  ========================================================================== */
 
 .uk-navbar-dropbar {
-    background: @navbar-dropbar-background;
-    .hook-navbar-dropbar();
-}
-
-/*
- * Slide modifier
- */
-
-.uk-navbar-dropbar-slide {
     position: absolute;
     z-index: @navbar-dropbar-z-index;
     left: 0;
     right: 0;
-    .hook-navbar-dropbar-slide();
+    background: @navbar-dropbar-background;
+    .hook-navbar-dropbar();
 }
 
 
@@ -514,7 +505,6 @@
 .hook-navbar-dropdown-nav-header() {}
 .hook-navbar-dropdown-nav-divider() {}
 .hook-navbar-dropbar(){}
-.hook-navbar-dropbar-slide(){}
 .hook-navbar-misc() {}
 
 

package/src/less/components/offcanvas.less

@@ -35,9 +35,11 @@
 @offcanvas-bar-padding-vertical-m:              @global-medium-gutter;
 @offcanvas-bar-padding-horizontal-m:            @global-medium-gutter;
 
-@offcanvas-close-position:                      20px;
+@offcanvas-close-position:                      5px;
 @offcanvas-close-padding:                       5px;
 
+@offcanvas-close-position-m:                    20px;
+
 @offcanvas-overlay-background:                  rgba(0,0,0,0.1);
 
 
@@ -206,6 +208,22 @@
     .hook-offcanvas-close();
 }
 
+/* Tablet landscape and bigger */
+@media (min-width: @breakpoint-medium) {
+
+    .uk-offcanvas-close {
+        top: @offcanvas-close-position-m;
+        right: @offcanvas-close-position-m;
+    }
+
+}
+
+/*
+ * Remove margin from adjacent element
+ */
+
+.uk-offcanvas-close:first-child + * { margin-top: 0; }
+
 
 /* Overlay
  ========================================================================== */

package/src/less/components/tooltip.less

@@ -21,6 +21,7 @@
 // ========================================================================
 
 @tooltip-z-index:                               @global-z-index + 30;
+@tooltip-margin:                                10px;
 @tooltip-max-width:                             200px;
 @tooltip-padding-vertical:                      3px;
 @tooltip-padding-horizontal:                    6px;
@@ -29,7 +30,6 @@
 @tooltip-color:                                 @global-inverse-color;
 @tooltip-font-size:                             12px;
 
-@tooltip-margin:                                10px;
 
 
 /* ========================================================================
@@ -50,6 +50,7 @@
     /* 2 */
     position: absolute;
     z-index: @tooltip-z-index;
+    --uk-position-margin-offset: @dropdown-margin;
     /* 3 */
     top: 0;
     /* 4 */
@@ -68,16 +69,6 @@
 .uk-tooltip.uk-active { display: block; }
 
 
-/* Direction / Alignment modifiers
- ========================================================================== */
-
-/* Direction */
-[class*='uk-tooltip-top'] { margin-top: -@tooltip-margin; }
-[class*='uk-tooltip-bottom'] { margin-top: @tooltip-margin; }
-[class*='uk-tooltip-left'] { margin-left: -@tooltip-margin; }
-[class*='uk-tooltip-right'] { margin-left: @tooltip-margin; }
-
-
 // Hooks
 // ========================================================================
 

package/src/less/theme/navbar.less

@@ -117,9 +117,7 @@
 // Dropbar
 // ========================================================================
 
-.hook-navbar-dropbar() {}
-
-.hook-navbar-dropbar-slide() { box-shadow: @navbar-dropbar-box-shadow; }
+.hook-navbar-dropbar() { box-shadow: @navbar-dropbar-box-shadow; }
 
 
 // Miscellaneous