@thinkpixellab-public/px-vue 4.1.18 → 4.1.19

package/components/PxFloat.vue

@@ -368,13 +368,15 @@ export default {
             setTimeout(() => {
                 // floating-ui
 
+                this.popupPositioned = true;
+
                 if (nv) {
                     let reference = this.getReferenceElement();
                     let popup = this.$refs.popup;
 
                     this.updatePosition(reference, popup);
 
-                    if (this.autoUpdate) {
+                    if (this.autoUpdate && reference && popup) {
                         this.cleanup = autoUpdate(reference, popup, () =>
                             this.updatePosition(reference, popup),
                         );
@@ -420,8 +422,6 @@ export default {
                     // see watcher for transitionVisible
                 }
 
-                this.popupPositioned = true;
-
                 // show and hide events (also see beforeshow/beforehide in visibleValue watcher)
 
                 if (nv) {

package/components/PxSlideTransition.vue

@@ -37,8 +37,12 @@ export default {
 
         // TODO rtlAdjust: {type: Boolean, default: false }
 
-        duration: { type: Number, default: 1 },
+        // if null, use --px-slide-transition-duration variable
+        duration: { type: Number, default: null },
+
         ease: { type: String, default: 'power3.out' },
+
+        // if null, use --px-slide-transition-slide-amount variable
         slideAmount: { default: '40vw' },
     },
 
@@ -46,15 +50,36 @@ export default {
         return { initialized: false };
     },
     computed: {
-        currentDuration() {
+        calcDuration() {
             if (this.disableAnimations || !this.initialized) {
                 return 0;
             }
-            return this.duration;
+
+            if (this.duration !== null) {
+                return this.duration;
+            }
+
+            const duration = getComputedStyle(this.$el).getPropertyValue(
+                '--px-slide-transition-duration',
+            );
+
+            return parseFloat(duration);
+        },
+
+        calcSlideAmount() {
+            if (this.slideAmount !== null) {
+                return this.slideAmount;
+            }
+
+            const slideAmount = getComputedStyle(this.$el).getPropertyValue(
+                '--px-slide-transition-slide-amount',
+            );
+
+            return slideAmount;
         },
         tweenShared() {
             return {
-                duration: this.currentDuration,
+                duration: this.calcDuration,
                 ease: this.ease,
             };
         },
@@ -88,7 +113,7 @@ export default {
                 dir = direction < 0 ? '-' : '';
             }
 
-            return dir + this.slideAmount;
+            return dir + this.calcSlideAmount;
         },
         slideElements(element) {
             if (!element) {
@@ -138,7 +163,7 @@ export default {
             // fade
             gsap.to(element, {
                 opacity: 1,
-                duration: this.currentDuration,
+                duration: this.calcDuration,
                 ease: this.ease,
                 onStart: () => {
                     this.$emit('before-enter');
@@ -194,7 +219,7 @@ export default {
 
             gsap.to(element, {
                 opacity: 0,
-                duration: this.currentDuration,
+                duration: this.calcDuration,
                 ease: this.ease,
                 onStart: () => {
                     this.$emit('before-leave');
@@ -222,6 +247,14 @@ export default {
 
 <style lang="scss">
 @use '../styles/px.scss' as *;
+
+@at-root {
+    :root {
+        --px-slide-transition-duration: 1s;
+        --px-slide-transition-slide-amount: 40vw;
+    }
+}
+
 .px-slides-transition {
     opacity: 0;
     width: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thinkpixellab-public/px-vue",
-    "version": "4.1.18",
+    "version": "4.1.19",
     "description": "General purpose Vue components and helpers that can be used across projects.",
     "author": {
         "name": "Pixel Lab"