@thinkpixellab-public/px-vue 3.0.88 → 3.0.90

package/components/PxSlideTransition.vue

@@ -38,11 +38,18 @@ export default {
         // selector used to find children of the element that should slide during the transition
         dragSelector: { type: String, default: '[data-drag]' },
 
+        // selector used to find drag elements in the dom that should animate in a reverse direction in vertical transitions
+        dragReverseSelector: { type: String, default: '[data-drag-reverse]' },
+
         // if true, slide the parent element if no slideSelect children are found (false will result just fading)
         dragElementFallback: { type: Boolean, default: true },
 
-        // 1 moves to the right, -1 moves to the left
+        // 1 moves the content to the left/up, -1 moves to the right/down
         direction: { type: Number, default: 1 },
+
+        // vertical or horizontal
+        orientation: { type: String, default: 'horizontal' },
+
         // TODO rtlAdjust: {type: Boolean, default: false }
 
         duration: { type: Number, default: 1 },
@@ -82,29 +89,76 @@ export default {
             return element.querySelectorAll(this.dragSelector);
         },
 
+        slideElementsReverse(element) {
+            if (!element || !this.orientation == 'vertical') {
+                return [];
+            }
+            return element.querySelectorAll(this.dragReverseSelector);
+        },
+
         beforeEnter() {},
 
         enter(element, done) {
-            let slideElements = this.slideElements(element);
+            const slideElements = this.slideElements(element);
+
             if (slideElements?.length) {
-                // slide elements
-                gsap.fromTo(
-                    slideElements,
-                    //{ x: this.slideAmount * this.direction * -1 },
-                    { x: this.directionAmount(this.direction * -1) },
-                    { x: 0, ...this.tweenShared, onComplete: done }
-                );
+                const from = {};
+                const to = { ...this.tweenShared, onComplete: done };
+
+                if (this.orientation === 'vertical') {
+                    from.y = this.directionAmount(this.direction * -1);
+                    to.y = 0;
+                } else {
+                    from.x = this.directionAmount(this.direction * -1);
+                    to.x = 0;
+                }
+
+                gsap.fromTo(slideElements, from, to);
+            }
+
+            if (this.orientation === 'vertical') {
+                const slideElementsReverse = this.slideElementsReverse(element);
+                if (slideElementsReverse?.length) {
+                    gsap.fromTo(
+                        slideElementsReverse,
+                        { y: this.directionAmount(this.direction) },
+                        { y: 0, ...this.tweenShared }
+                    );
+                }
             }
         },
         leave(element, done) {
-            // slide elements
-            let slideElements = this.slideElements(element);
+            const slideElements = this.slideElements(element);
+
+            const to = {
+                ...this.tweenShared,
+                onComplete: done,
+            };
+
+            if (this.orientation === 'vertical') {
+                to.y = this.directionAmount(this.direction, true);
+            } else {
+                to.x = this.directionAmount(this.direction, true);
+            }
+
             if (slideElements?.length) {
-                gsap.to(slideElements, {
-                    x: this.directionAmount(this.direction, true),
-                    ...this.tweenShared,
-                    onComplete: done,
-                });
+                gsap.to(slideElements, to);
+            }
+
+            if (this.orientation === 'vertical') {
+                const slideElementsReverse = this.slideElementsReverse(element);
+                console.log(`slideElementsReverse.length: ${slideElementsReverse.length}`);
+
+                if (slideElementsReverse?.length) {
+                    const slideElementsReverse = this.slideElementsReverse(element);
+
+                    const toReverse = {
+                        ...this.tweenShared,
+                        y: this.directionAmount(this.direction * -1, true),
+                    };
+
+                    gsap.to(slideElementsReverse, toReverse);
+                }
             }
         },
     },

package/components/PxSlides.vue

@@ -12,6 +12,7 @@
             <px-slide-transition
                 :disable-animations="disableAnimations"
                 :direction="direction"
+                :orientation="orientation"
                 @before-leave="transitionStart"
                 @after-leave="transitionEnd"
                 @leave-cancelled="transitionEnd"
@@ -55,6 +56,9 @@ export default {
     components: { PxSlideTransition, PxIcon },
 
     props: {
+        // vertical or horizontal
+        orientation: { type: String, default: 'horizontal' },
+
         // whether drag interaction is enabled
         dragEnabled: { type: Boolean, default: true },
 
@@ -70,9 +74,13 @@ export default {
         // selector used to find drag elements in the dom
         dragSelector: { type: String, default: '[data-drag]' },
 
+        // selector used to find drag elements in the dom that should animate in a reverse direction in vertical transitions
+        dragReverseSelector: { type: String, default: '[data-drag-reverse]' },
+
         // exclude from drag
         dragExcludeSelector: { type: String, default: 'input, button, [data-no-drag]' },
 
+        // exclude from scroll
         scrollExcludeSelector: { type: String, default: '[data-no-slidescroll]' },
 
         // override default
@@ -88,6 +96,9 @@ export default {
             lastInteractionType: null,
             activeTransitions: 0,
             scrollPreview: 0,
+
+            // true whenver the selected item is in an offset by dragging or a transition
+            hasOffset: false,
         };
     },
     computed: {
@@ -129,6 +140,13 @@ export default {
         },
     },
     watch: {
+        hasOffset(nv) {
+            if (nv) {
+                this.$emit('offset-start');
+            } else {
+                this.$emit('offset-end');
+            }
+        },
         syncSelected(nv, ov) {
             let newIndex = this.itemKeys.indexOf(nv);
             let oldIndex = this.itemKeys.indexOf(ov);
@@ -179,7 +197,7 @@ export default {
         }
 
         this.drag = new Drag(this.$el, {
-            lock: 'x',
+            lock: this.orientation === 'horizontal' ? 'x' : 'y',
             onStart: this.onDragStart,
             onDrag: this.onDrag,
             onEnd: this.onDragEnd,
@@ -198,6 +216,7 @@ export default {
         transitionStart() {
             if (!this.activeTransitions) {
                 this.$emit('transitions-start');
+                this.hasOffset = true;
             }
             this.activeTransitions++;
         },
@@ -208,6 +227,7 @@ export default {
                 this.$emit('transitions-end', {
                     toIndex: this.itemKeys.indexOf(this.syncSelected),
                 });
+                this.hasOffset = false;
             }
         },
 
@@ -217,26 +237,51 @@ export default {
 
             if (slide) {
                 this.dragElements = [...slide.querySelectorAll(this.dragSelector)];
+                this.dragElementsReverse = [...slide.querySelectorAll(this.dragReverseSelector)];
             }
+
+            this.hasOffset = true;
         },
 
         onDrag(ev) {
-            if (this.dragElements?.length) {
+            if (this.dragElements?.length || this.dragElementsReverse?.length) {
                 if (gsap.isTweening(this.dragElements[0])) {
                     gsap.killTweensOf(this.dragElements);
                 }
-                gsap.set(this.dragElements, { x: ev.startDelta.x });
+
+                if (gsap.isTweening(this.dragElementsReverse[0])) {
+                    gsap.killTweensOf(this.dragElementsReverse);
+                }
+
+                if (this.orientation === 'vertical') {
+                    gsap.set(this.dragElements, { y: ev.startDelta.y });
+                    gsap.set(this.dragElementsReverse, { y: -1 * ev.startDelta.y });
+                } else {
+                    gsap.set(this.dragElements, { x: ev.startDelta.x });
+                }
+
+                this.hasOffset = true;
             }
         },
 
         onDragEnd(ev) {
-            if (Math.abs(ev.delta.x) < 10) {
-                gsap.to(this.dragElements, { x: 0 });
+            const delta = this.orientation === 'vertical' ? ev.delta.y : ev.delta.x;
+            if (Math.abs(delta) < 10) {
+                this.hasOffset = false;
+
+                // snap back
+                const to = {};
+                to[this.orientation === 'vertical' ? 'y' : 'x'] = 0;
+                gsap.to(this.dragElements, { ...to });
+
+                // snap back reverse elements (vertical only)
+                if (this.orientation === 'vertical') {
+                    gsap.to(this.dragElementsReverse, { y: 0 });
+                }
             } else {
                 this.lastInteractionType = 'drag';
                 this.$emit('drag-complete');
-
-                if (ev.delta.x > 0) {
+                if (delta > 0) {
                     this.previous();
                 } else {
                     this.next();

package/components/PxSpinner.vue

@@ -7,7 +7,7 @@
         * classic - rotating semi-circle
         * dots - three dots that fade in and out in turn
 
-    Size is derived from the current font size and color is derived from currentColor. These
+    Size is derived from the current font size and color is derived from var(--px-spinner-color). These
     properties (as well as a transform) can be set on the component itself without side effects.
 
     Future enhancements could include additional properties for controlling things like timing,
@@ -27,7 +27,10 @@ import PxBaseVisible from './PxBaseVisible.vue';
 export default {
     name: 'px-spinner',
     mixins: [PxBaseVariants, PxBaseVisible],
-    props: { variant: { type: String, default: 'classic' } },
+    props: {
+        variant: { type: String, default: 'classic' },
+        duration: { type: Number, default: 2 },
+    },
 };
 </script>
 
@@ -39,6 +42,11 @@ export default {
     position: relative;
     pointer-events: none;
 
+    --px-spinner-dur: 2s;
+    --px-spinner-linewidth: 0.15em;
+    --px-spinner-color: currentColor;
+    --px-spinner-color-secondary: transparent;
+
     &__spinner {
         display: block;
         position: relative;
@@ -48,14 +56,15 @@ export default {
 
     &--classic & {
         &__spinner {
+            position: relative;
             width: 1.33em;
             height: 1.33em;
-            border: 0.15em solid currentColor;
-            border-bottom-color: transparent;
+            border: var(--px-spinner-linewidth) solid var(--px-spinner-color);
+            border-bottom-color: var(--px-spinner-color-secondary);
             border-radius: 50%;
             display: inline-block;
             box-sizing: border-box;
-            animation: px-spinner-classic 1s linear infinite;
+            animation: px-spinner-classic var(--px-spinner-dur) linear infinite;
         }
     }
 
@@ -91,15 +100,15 @@ export default {
             height: 2.5em;
             border-radius: 50%;
             animation-fill-mode: both;
-            animation: px-spinner-dots $dur infinite $ease-in-out-quart;
+            animation: px-spinner-dots var(--px-spinner-dur) infinite $ease-in-out-quart;
         }
         &__spinner {
             left: 5em;
-            color: currentColor;
+            color: var(--px-spinner-color);
             position: relative;
             text-indent: -9999em;
             transform: translateZ(0);
-            animation-delay: ($dur * -0.088888888);
+            animation-delay: calc((var(--px-spinner-dur) * -0.088888888));
         }
         &__spinner:before,
         &__spinner:after {
@@ -109,7 +118,7 @@ export default {
         }
         &__spinner:before {
             left: -5em;
-            animation-delay: ($dur * -0.088888888 * 2);
+            animation-delay: calc((var(--px-spinner-dur) * -0.088888888 * 2));
         }
         &__spinner:after {
             left: 5em;

package/package.json

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

package/utils/utils.js

@@ -354,6 +354,53 @@ export default {
         });
     },
 
+    /**
+     * Converts a floating-point number to a string value based on a map where the keys are string
+     * values and the corresponding values define ranges in the format 'start, end'. Open-ended
+     * ranges can be specified by using `null` for the start or end value. This approach avoids
+     * ambiguity with negative numbers by using commas to separate the range values. If the input
+     * value does not fall within any of the defined ranges, a fallback value is returned.
+     *
+     * @param {number} value - The floating-point number to be converted.
+     * @param {Object} valueMap - An object where keys are string values and values define ranges in
+     * the format 'start, end'. Use `null` to specify an open-ended start or end of a range.
+     * @param {string} fallbackValue - The value to return if the input does not match any defined
+     * range.
+     * @returns {string} - The string value corresponding to the range within which the input value
+     * falls, or the fallback value.
+     *
+     * @example
+     * const valueMap = {
+     *   'low': 'null, 0.5',
+     *   'medium': '0.5, 1',
+     *   'high': '1, null'
+     * };
+     * const fallback = 'unknown';
+     *
+     * console.log(floatToEnum(0.25, valueMap, fallback)); // Expected "low"
+     * console.log(floatToEnum(0.75, valueMap, fallback)); // Expected "medium"
+     * console.log(floatToEnum(1.5, valueMap, fallback));  // Expected "high"
+     * console.log(floatToEnum(-1, valueMap, fallback));   // Expected "unknown"
+     **/
+
+    floatToEnum(value, valueMap, fallbackValue) {
+        const rangeRegex = /^\s*(null|[+-]?\d*(?:\.\d+)?)\s*,\s*(null|[+-]?\d*(?:\.\d+)?)\s*$/;
+
+        for (const [stringValue, range] of Object.entries(valueMap)) {
+            const match = range.match(rangeRegex);
+            if (!match) continue; // Skip invalid ranges
+
+            const start = match[1] !== 'null' ? parseFloat(match[1]) : -Infinity;
+            const end = match[2] !== 'null' ? parseFloat(match[2]) : Infinity;
+
+            if ((start === -Infinity || value >= start) && (end === Infinity || value < end)) {
+                return stringValue;
+            }
+        }
+
+        return fallbackValue;
+    },
+
     /**
      * Generate a 6 letter random sequence of letters and numbers, based on this:
      * https://stackoverflow.com/questions/6248666/how-to-generate-short-uid-like-ax4j9z-in-js