uikit 3.21.18-dev.718f435ef → 3.21.18-dev.7ded5b7b6

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.21.18-dev.718f435ef",
+  "version": "3.21.18-dev.7ded5b7b6",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

package/src/js/components/countdown.js

@@ -23,7 +23,7 @@ export default {
     connected() {
         attr(this.$el, 'role', this.role);
         this.date = toFloat(Date.parse(this.$props.date));
-        this.end = false;
+        this.started = this.end = false;
         this.start();
     },
 
@@ -63,16 +63,16 @@ export default {
             const timespan = getTimeSpan(this.date);
 
             if (!timespan.total) {
-                const started = !!this.timer;
                 this.stop();
                 if (!this.end) {
                     trigger(this.$el, 'countdownend');
                     this.end = true;
-                    if (this.reload && started) {
+                    if (this.reload && this.started) {
                         window.location.reload();
                     }
                 }
             } else if (!this.timer) {
+                this.started = true;
                 trigger(this.$el, 'countdownstart');
                 this.timer = setInterval(this.update, 1000);
             }

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

@@ -27,7 +27,7 @@ export default {
         },
 
         write({ height }) {
-            css(this.$el, { minHeight: height });
+            css(this.$el, 'minHeight', height);
         },
 
         events: ['resize'],

package/src/js/core/sticky.js

@@ -41,6 +41,7 @@ export default {
         start: null,
         end: null,
         offset: String,
+        offsetEnd: String,
         overflowFlip: Boolean,
         animation: String,
         clsActive: String,
@@ -59,6 +60,7 @@ export default {
         start: false,
         end: false,
         offset: 0,
+        offsetEnd: 0,
         overflowFlip: false,
         animation: '',
         clsActive: 'uk-active',
@@ -188,12 +190,16 @@ export default {
                 }
 
                 const referenceElement = this.isFixed ? this.placeholder : this.$el;
-                let offset = toPx(this.offset, 'height', sticky ? this.$el : referenceElement);
+                let [offset, offsetEnd] = [this.offset, this.offsetEnd].map((value) =>
+                    toPx(value, 'height', sticky ? this.$el : referenceElement),
+                );
+
                 if (position === 'bottom' && (height < dynamicViewport || this.overflowFlip)) {
                     offset += dynamicViewport - height;
                 }
 
-                const overflow = this.overflowFlip ? 0 : Math.max(0, height + offset - viewport);
+                const elementBox = height + offset + offsetEnd;
+                const overflow = this.overflowFlip ? 0 : Math.max(0, elementBox - viewport);
                 const topOffset =
                     getOffset(referenceElement).top -
                     // offset possible `transform: translateY` animation 'uk-animation-slide-top' while hiding

package/src/js/util/dimensions.js

@@ -97,8 +97,8 @@ export function offsetPosition(element) {
     const offset = [element.offsetTop, element.offsetLeft];
 
     while ((element = element.offsetParent)) {
-        offset[0] += element.offsetTop + toFloat(css(element, `borderTopWidth`));
-        offset[1] += element.offsetLeft + toFloat(css(element, `borderLeftWidth`));
+        offset[0] += element.offsetTop + toFloat(css(element, 'borderTopWidth'));
+        offset[1] += element.offsetLeft + toFloat(css(element, 'borderLeftWidth'));
 
         if (css(element, 'position') === 'fixed') {
             const win = toWindow(element);

package/tests/sticky.html

@@ -351,6 +351,12 @@
                             <td>0</td>
                             <td>The offset the Sticky should be fixed to. The value can be in vh, % and px. It supports basic mathematics operands + and -.</td>
                         </tr>
+                        <tr>
+                            <td><code>offset-bottom</code></td>
+                            <td>Length</td>
+                            <td>0</td>
+                            <td>The offset the Sticky should be fixed to if the element overflows the viewport. The value can be in vh, % and px. It supports basic mathematics operands + and -.</td>
+                        </tr>
                         <tr>
                             <td><code>overflow-flip</code></td>
                             <td>Boolean</td>