@thinkpixellab-public/px-vue 4.1.18 → 4.1.20

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.20",
     "description": "General purpose Vue components and helpers that can be used across projects.",
     "author": {
         "name": "Pixel Lab"

package/composables/useBodyClass.js

@@ -1,90 +0,0 @@
-/**
- * useBodyClass()
- *
- * This composable lets components add or remove <body> classes in a way that:
- * - SSR-safe (works with Nuxt `useHead` or manual DOM binding)
- * - supports multiple components contributing classes
- * - automatically removes classes on unmount (optional)
- * - works in both Nuxt and plain Vue 3 apps
- *
- * Usage in Nuxt (in a layout):
- * -------------------------------------
- * import { useHead } from '#imports'
- * import { useBodyClass } from '~/composables/useBodyClass'
- *
- * const { bodyClass } = useBodyClass()
- *
- * useHead({
- *   bodyAttrs: {
- *     class: bodyClass,
- *   },
- * })
- *
- * Usage in a Nuxt page or component:
- * -------------------------------------
- * import { useBodyClass } from '~/composables/useBodyClass'
- * const { addBodyClass } = useBodyClass()
- * addBodyClass(['my-page', 'dark'], { autoCleanup: true })
- *
- * Usage in plain Vue 3 (non-Nuxt):
- * -------------------------------------
- * import { useBodyClass } from './composables/useBodyClass'
- * import { watch } from 'vue'
- *
- * const { bodyClass } = useBodyClass()
- *
- * watch(bodyClass, (val) => {
- *   if (typeof document !== 'undefined') {
- *     document.body.className = val
- *   }
- * }, { immediate: true })
- *
- * In a component:
- * import { useBodyClass } from './composables/useBodyClass'
- * const { addBodyClass } = useBodyClass()
- * addBodyClass('fullscreen')
- */
-
-import { useState } from '#app';
-import { computed, onUnmounted } from 'vue';
-
-export function useBodyClass() {
-    const _bodyClasses = useState('body-classes', () => new Set());
-
-    function normalize(input) {
-        return Array.isArray(input) ? input : [input];
-    }
-
-    function addBodyClass(classNames, { autoCleanup = true } = {}) {
-        const classes = normalize(classNames);
-
-        classes.forEach(c => _bodyClasses.value.add(c));
-
-        if (autoCleanup) {
-            onUnmounted(() => {
-                classes.forEach(c => _bodyClasses.value.delete(c));
-            });
-        }
-    }
-
-    function removeBodyClass(classNames) {
-        normalize(classNames).forEach(c => _bodyClasses.value.delete(c));
-    }
-
-    function toggleBodyClass(className, condition) {
-        if (condition) {
-            _bodyClasses.value.add(className);
-        } else {
-            _bodyClasses.value.delete(className);
-        }
-    }
-
-    const bodyClass = computed(() => Array.from(_bodyClasses.value).join(' '));
-
-    return {
-        addBodyClass,
-        removeBodyClass,
-        toggleBodyClass,
-        bodyClass,
-    };
-}