@thinkpixellab-public/px-vue 3.0.89 → 3.0.91

package/components/PxCardGrid.vue

@@ -344,7 +344,7 @@ export default {
                 return this.getItemCountFn();
             }
 
-            return this.items.length;
+            return this.items?.length || 0;
         },
 
         getItemForSpace(space) {

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/package.json

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