@thinkpixellab-public/px-vue 4.0.19 → 4.0.21

package/bases/PxBaseMobileAware.vue

@@ -18,8 +18,67 @@ export default {
             return this.mediaQuery.currentBreakpoint;
         },
     },
-
     methods: {
+        /**
+         * Returns a value from a map that matches the current breakpoint or the nearest breakpoint.
+         * Nearest is determined by the searchDirection parameter.
+         *
+         * Usage:
+         *
+         * // returns 240 if mobile or smaller, 320 otherwise
+         * <Card :width="responsiveValue({mobile: 240}, 320)" />
+         *
+         * // returns 240 if mobile or smaller, 300 until lg, 320 otherwise
+         * <Card :width="responsiveValue({mobile: 240, lg: 300}, 320)" />
+         *
+         * // returns 200 if smaller than mobile, 240 if smaller than lg and 300 if bigger than lg
+         * <Card :width="responsiveValue({mobile: 240, lg: 300}, 200, 'down')" />
+         *
+         * // could also be used in a computed property....
+         * responsiveColor() {
+         *     return this.responsiveValue({mobile: 'red', lg: 'blue'}, 'green');
+         * }
+         */
+
+        responsiveValue(lookup, fallback, searchDirection = 'up') {
+            const breakpoints = this.mediaQuery.breakpoints || {};
+            const current = this.currentBreakpoint;
+
+            if (!lookup || !Object.keys(lookup).length || current == null) {
+                return fallback;
+            }
+
+            // if the current breakpoint is in the lookup, just return the value
+            if (current in lookup) {
+                return lookup[current];
+            }
+
+            // convert keys to numbers so we can sort and find the nearest
+            lookup = Object.keys(lookup).reduce((acc, key) => {
+                if (key in breakpoints) {
+                    acc[breakpoints[key]] = lookup[key];
+                }
+                return acc;
+            }, {});
+
+            const currentNum = breakpoints[current];
+
+            const keys = Object.keys(lookup)
+                .map(Number)
+                .sort((a, b) => (searchDirection == 'up' ? a - b : b - a));
+
+            // find the first key that is smaller than current
+            const match = keys.find(key => {
+                return searchDirection == 'up' ? key >= currentNum : key <= currentNum;
+            });
+
+            if (match) {
+                return lookup[match];
+            } else {
+                return fallback;
+            }
+        },
+
         isBreakpointOrSmaller(breakpoint) {
             if (this.currentBreakpoint === null) {
                 return false;

package/bases/PxBaseMobileProvide.vue

@@ -69,3 +69,9 @@ export default {
     },
 };
 </script>
+
+<style lang="scss">
+@use '../styles/px.scss' as *;
+
+@include media-breakpoint-vars;
+</style>

package/components/PxColorPicker.vue

@@ -35,6 +35,7 @@ const PxColorPicker = {
     name: 'px-color-picker',
     components: { PxFloat, PxColorPanel, PxColorPaletteButton, PxIcon },
     mixins: [PxBaseColor],
+    emits: ['click'],
     props: {
         /**
          * An icon to display inside the button. If a string is provided, it will be interpreted as

package/components/PxSlideTransition.vue

@@ -1,27 +1,23 @@
 <!--
-    #VUE3 Todo
-
-    Handle transitions between slides in PxSlide. Uses a hybrid css/javascript transition where
-    fades are in css and the drag movement is done with gsap.
+    Describe this component...
 -->
 <template>
-    <transition
-        @before-enter="beforeEnter"
-        @enter="enter"
-        @leave="leave"
-        v-bind="$attrs"
-        name="px-slide-transition-fade"
-    >
+    <div :class="bem({ active: active })">
         <slot />
-    </transition>
+    </div>
 </template>
 
 <script>
 import gsap from 'gsap';
 
 export default {
-    name: 'px-slide-transition',
+    name: 'px-slides-transition',
+    // components: { Component },
+    // mixins: [ Mixin ],
+
     props: {
+        active: { type: Boolean, default: true },
+
         // selector used to find children of the element that should slide during the transition
         dragSelector: { type: String, default: '[data-drag]' },
 
@@ -37,28 +33,53 @@ export default {
         // vertical or horizontal
         orientation: { type: String, default: 'horizontal' },
 
+        disableAnimations: { type: Boolean, default: false },
+
         // TODO rtlAdjust: {type: Boolean, default: false }
 
         duration: { type: Number, default: 1 },
         ease: { type: String, default: 'power3.out' },
         slideAmount: { default: '40vw' },
+    },
 
-        disableAnimations: { type: Boolean, default: false },
+    data() {
+        return { initialized: false };
     },
     computed: {
+        currentDuration() {
+            if (this.disableAnimations || !this.initialized) {
+                return 0;
+            }
+            return this.duration;
+        },
         tweenShared() {
             return {
-                duration: this.duration,
+                duration: this.currentDuration,
                 ease: this.ease,
             };
         },
     },
+    watch: {
+        active(isActive, wasActive) {
+            this.updateActive(isActive, wasActive);
+        },
+    },
     mounted() {
-        if (this.disableAnimations) {
-            gsap.globalTimeline.timeScale(Number.MAX_VALUE);
-        }
+        this.updateActive(this.active, false);
+        setTimeout(() => {
+            this.initialized = true;
+        }, 0);
     },
     methods: {
+        updateActive(isActive, wasActive) {
+            if (isActive && !wasActive) {
+                this.enter(this.$el);
+            }
+
+            if (!isActive && wasActive) {
+                this.leave(this.$el);
+            }
+        },
         directionAmount(direction, addEquals = false) {
             let dir;
             if (addEquals) {
@@ -83,14 +104,14 @@ export default {
             return element.querySelectorAll(this.dragReverseSelector);
         },
 
-        beforeEnter() {},
-
-        enter(element, done) {
+        enter(element) {
             const slideElements = this.slideElements(element);
 
             if (slideElements?.length) {
                 const from = {};
-                const to = { ...this.tweenShared, onComplete: done };
+                const to = {
+                    ...this.tweenShared,
+                };
 
                 if (this.orientation === 'vertical') {
                     from.y = this.directionAmount(this.direction * -1);
@@ -113,13 +134,25 @@ export default {
                     );
                 }
             }
+
+            // fade
+            gsap.to(element, {
+                opacity: 1,
+                duration: this.currentDuration,
+                ease: this.ease,
+                onStart: () => {
+                    this.$emit('before-enter');
+                },
+                onComplete: () => {
+                    this.$emit('after-enter');
+                },
+            });
         },
-        leave(element, done) {
+        leave(element) {
             const slideElements = this.slideElements(element);
 
             const to = {
                 ...this.tweenShared,
-                onComplete: done,
             };
 
             if (this.orientation === 'vertical') {
@@ -146,6 +179,18 @@ export default {
                     gsap.to(slideElementsReverse, toReverse);
                 }
             }
+
+            gsap.to(element, {
+                opacity: 0,
+                duration: this.currentDuration,
+                ease: this.ease,
+                onStart: () => {
+                    this.$emit('before-leave');
+                },
+                onComplete: () => {
+                    this.$emit('after-leave');
+                },
+            });
         },
     },
 };
@@ -153,10 +198,9 @@ export default {
 
 <style lang="scss">
 @use '../styles/px.scss' as *;
-
-@include vue-transition-fade(px-slide-transition-fade, $dur: 1s);
-
-.slide-transition {
-    // add styles here
+.px-slides-transition {
+    opacity: 0;
+    width: 100%;
+    height: 100%;
 }
 </style>

package/components/PxSlides.vue

@@ -3,7 +3,7 @@
 -->
 
 <template>
-    <div :class="bem(variantsMap)">
+    <div :class="bem({ hasOffset, orientation, ...variantsMap })">
         <div
             v-for="(item, index) in items"
             :key="getItemKey(item)"
@@ -11,14 +11,15 @@
             :class="bem('slide-wrapper', { selected: isItemSelected(item) })"
         >
             <px-slide-transition
+                :class="bem('transitioner')"
                 :disable-animations="disableAnimations"
                 :direction="direction"
                 :orientation="orientation"
+                :active="isItemSelected(item)"
                 @before-leave="transitionStart"
                 @after-leave="transitionEnd"
-                @leave-cancelled="transitionEnd"
             >
-                <div :class="bem('slide')" v-show="isItemSelected(item)">
+                <div :class="bem('slide')">
                     <slot
                         name="slide"
                         :selected="isItemSelected(item)"
@@ -148,7 +149,6 @@ export default {
                 navigator.userAgent.indexOf('Win') != -1 ||
                 this.$route.query?.scroll == 'windows'
             ) {
-                //console.log('[Windows scroll values enabled.]');
                 return {
                     stability: stability || 8,
                     sensitivity: sensitivity || 20,
@@ -198,6 +198,11 @@ export default {
                 this.drag.enable();
             }
         },
+        orientation(nv) {
+            if (this.drag) {
+                this.drag.updateOptions({ lock: nv === 'horizontal' ? 'x' : 'y' });
+            }
+        },
     },
     mounted() {
         if (this.scrollEnabled) {
@@ -276,8 +281,10 @@ export default {
                 }
 
                 if (this.orientation === 'vertical') {
-                    gsap.set(this.dragElements, { y: ev.startDelta.y });
-                    gsap.set(this.dragElementsReverse, { y: -1 * ev.startDelta.y });
+                    gsap.set(this.dragElements || [], { y: ev.startDelta.y });
+                    if (this.dragElementsReverse?.length) {
+                        gsap.set(this.dragElementsReverse, { y: -1 * ev.startDelta.y });
+                    }
                 } else {
                     gsap.set(this.dragElements, { x: ev.startDelta.x });
                 }
@@ -331,6 +338,7 @@ export default {
 
             if (this.scrollExcludeSelector) {
                 const excludeElements = this.$el.querySelectorAll(this.scrollExcludeSelector);
+
                 for (let i = 0; i < excludeElements.length; i++) {
                     if (excludeElements[i].contains(e.target)) return;
                 }
@@ -350,7 +358,6 @@ export default {
                     }
 
                     e.stopPropagation();
-                    e.preventDefault();
                 }
             }
 

package/components/PxTextbox.vue

@@ -30,7 +30,7 @@ export default {
         multiline: { type: Boolean, default: false },
 
         // the value of the textbox
-        value: { type: String, default: null },
+        text: { type: String, default: null },
 
         // whether to fire an update / v-model event on every character change ('input') or when the textbox loses focus ('change')
         updateMode: {
@@ -58,12 +58,12 @@ export default {
     },
 
     watch: {
-        value(nv) {
+        text(nv) {
             this.setValue(nv);
         },
     },
     mounted() {
-        this.setValue(this.value);
+        this.setValue(this.text);
     },
 
     methods: {
@@ -99,7 +99,7 @@ export default {
             this.$refs.input.textContent = val;
 
             // raise an update event
-            this.$emit('update:value', val);
+            this.$emit('update:text', val);
 
             // update the caret position
             const newPos = startPos + (val.length - prevValue.length);

package/components/PxVueTest.vue

@@ -129,7 +129,7 @@
                     >
                         <template #default="v">
                             <px-textbox
-                                v-model="validateOne"
+                                v-model:text="validateOne"
                                 :class="[v.class, v.requiredClass, v.violationClasses]"
                             />
                         </template>
@@ -142,7 +142,7 @@
                     >
                         <template #default="v">
                             <px-textbox
-                                v-model="validateTwo"
+                                v-model:text="validateTwo"
                                 :class="[v.class, v.requiredClass, v.violationClasses]"
                             />
                         </template>
@@ -253,7 +253,7 @@
                 <px-flex :vertical="true" :gap="1">
                     <div>currentText: {{ currentText }}</div>
 
-                    <px-textbox v-model="currentText" placeholder="Say what you want..." />
+                    <px-textbox v-model:text="currentText" placeholder="Say what you want..." />
 
                     <px-textbox
                         multiline
@@ -263,7 +263,7 @@
                     />
 
                     <px-textbox type="password" />
-                    <px-textbox :value="'hello@thinkpixellab.com'" type="email" />
+                    <px-textbox :text="'hello@thinkpixellab.com'" type="email" />
                 </px-flex>
             </px-test>
 

package/package.json

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

package/utils/SharedHeightManager.js

@@ -74,6 +74,9 @@ class HeightGroup {
 
                 if (this.ops.varsParent) {
                     this.ops.varsParent.style.setProperty(this.getVariableName(), max + 'px');
+                    if (this.ops.debug) {
+                        console.log(` ${this.getVariableName()}: ${max}px`);
+                    }
                 }
 
                 if (this.ops.changeCallback) {

package/utils/drag.js

@@ -341,7 +341,8 @@ function Drag(element, options) {
     };
 
     this.updateOptions = options => {
-        this.ops = { ...this.ops, options };
+        this.ops = { ...this.ops, ...options };
+        this.reset();
     };
 
     this.disable = () => {

package/utils/utils.js

@@ -423,3 +423,27 @@ export function uniqueId() {
         ('000' + ((Math.random() * 46656) | 0).toString(36)).slice(-3)
     );
 }
+
+export function findScrollParent(node) {
+    const isScrolling = node => {
+        let overflow = getComputedStyle(node, null).getPropertyValue('overflow');
+
+        return overflow.indexOf('scroll') > -1 || overflow.indexOf('auto') > -1;
+    };
+
+    if (!(node instanceof HTMLElement || node instanceof SVGElement)) {
+        return undefined;
+    }
+
+    let current = node.parentNode;
+
+    while (current?.parentNode) {
+        if (isScrolling(current)) {
+            return current;
+        }
+
+        current = current.parentNode;
+    }
+
+    return document.scrollingElement || document.documentElement;
+}