@thinkpixellab-public/px-vue 3.0.61 → 3.0.63

package/components/PxContain.vue

@@ -182,8 +182,8 @@ export default {
             let inner = this.aspectRect || outer;
 
             outer = {
-                width: outer.width - (b.w + p.w),
-                height: outer.height - (b.h + p.h),
+                width: Math.max(0, outer.width - (b.w + p.w)),
+                height: Math.max(0, outer.height - (b.h + p.h)),
             };
 
             // max width/height

package/components/PxGsapScrubber.vue

@@ -59,7 +59,7 @@ export default {
     },
     // watch: {},
     // mounted() {},
-    beforeUnmount() {
+    beforeDestroy() {
         if (this.timeline) {
             this.timeline.eventCallback('onUpdate', null);
         }

package/components/PxIconButton.vue

@@ -22,7 +22,6 @@
         "
         v-on="$listeners"
         @click="tryToggleChecked"
-        :aria-label="label"
     >
         <inline-svg
             :transformSource="transform"
@@ -45,8 +44,6 @@ export default {
     props: {
         // set to true for icon to toggle on and off
         toggles: { type: Boolean, default: false },
-        // aria label value for the button
-        label: { type: String, default: null },
     },
     methods: {
         tryToggleChecked() {

package/components/PxSlides.vue

@@ -2,7 +2,7 @@
     Describe this component...
 -->
 <template>
-    <div :class="bem()">
+    <div :class="bem(variantsMap)">
         <div
             v-for="(item, index) in items"
             :key="getItemKey(item)"
@@ -43,6 +43,7 @@
 import PxBaseItemsSelect from './PxBaseItemsSelect.vue';
 import PxSlideTransition from './PxSlideTransition.vue';
 import PxIcon from './PxIcon.vue';
+import PxBaseVariants from './PxBaseVariants.vue';
 
 import gsap from 'gsap';
 import Drag from '../utils/drag.js';
@@ -50,7 +51,7 @@ import Lethargy from '../utils/lethargy.js';
 
 export default {
     name: 'px-slides',
-    mixins: [PxBaseItemsSelect],
+    mixins: [PxBaseItemsSelect, PxBaseVariants],
     components: { PxSlideTransition, PxIcon },
 
     props: {
@@ -72,6 +73,8 @@ export default {
         // exclude from drag
         dragExcludeSelector: { type: String, default: 'input, button, [data-no-drag]' },
 
+        scrollExcludeSelector: { type: String, default: '[data-no-slidescroll]' },
+
         // override default
         autoSelectFirst: { type: Boolean, default: true },
 
@@ -157,15 +160,6 @@ export default {
         },
     },
     mounted() {
-        this.drag = new Drag(this.$el, {
-            lock: 'x',
-            onStart: this.onDragStart,
-            onDrag: this.onDrag,
-            onEnd: this.onDragEnd,
-            excludeSelector: this.dragExcludeSelector,
-            disabled: !this.dragEnabled,
-        });
-
         if (this.scrollEnabled) {
             let overrides = this.lethargyOverrides;
 
@@ -183,6 +177,15 @@ export default {
 
             this.$el.addEventListener('wheel', this.onWheel);
         }
+
+        this.drag = new Drag(this.$el, {
+            lock: 'x',
+            onStart: this.onDragStart,
+            onDrag: this.onDrag,
+            onEnd: this.onDragEnd,
+            excludeSelector: this.dragExcludeSelector,
+            disabled: !this.dragEnabled,
+        });
     },
     beforeDestroy() {
         if (this.drag) {
@@ -249,11 +252,19 @@ export default {
                 }
 
                 clearTimeout(this.scrollPreviewTimeout);
+
                 this.scrollPreviewTimeout = setTimeout(() => {
                     this.scrollPreview = 0;
                 }, 200);
             }
 
+            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;
+                }
+            }
+
             const check = this.lethargy.check(e);
 
             if (check !== this.lethargyPrevCheck) {
@@ -266,13 +277,13 @@ export default {
                     } else {
                         this.next(false);
                     }
+
+                    e.stopPropagation();
+                    e.preventDefault();
                 }
             }
 
             this.lethargyPrevCheck = check;
-
-            e.stopPropagation();
-            e.preventDefault();
         },
 
         next(loopOverride = null) {
@@ -316,8 +327,8 @@ export default {
 
 .px-slides {
     display: grid;
-    grid-template-columns: 100%;
-    grid-template-rows: 100%;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
     grid-template-areas: 'content';
     -webkit-transform-style: preserve-3d;
 
@@ -370,5 +381,12 @@ export default {
             opacity: 1;
         }
     }
+
+    // variant (replaces 1fr row/columns with 100%)
+
+    &--anchored {
+        grid-template-columns: 100%;
+        grid-template-rows: 100%;
+    }
 }
 </style>

package/package.json

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

package/utils/drag.js

@@ -60,6 +60,7 @@ function Drag(element, options) {
 
     this.onStart = nativeEvent => {
         if (this.disabled) {
+            debugger;
             return;
         }
 
@@ -338,7 +339,7 @@ function Drag(element, options) {
 
     this.enable = () => {
         this.reset();
-        this.disable = false;
+        this.disabled = false;
     };
 
     this.destroy = () => {

package/utils/lethargy.js

@@ -1,6 +1,10 @@
 // Adapted from here: https://github.com/d4nyll/lethargy
 // MIT License
 
+/*
+    Look for "CHANGE" comments to see dif from github
+*/
+
 function Lethargy(stability, sensitivity, tolerance, delay) {
     this.stability = stability != null ? Math.abs(stability) : 8;
     this.sensitivity = sensitivity != null ? 1 + Math.abs(sensitivity) : 100;
@@ -65,14 +69,19 @@ Lethargy.prototype.check = function (e) {
         this.lastDownDeltas.shift();
         return this.isInertia(-1);
     }
-    return false;
+
+    // CHANGE: this code is never reached so we comment it out
+    // return false;
 };
 
 Lethargy.prototype.isInertia = function (direction) {
     var lastDeltas, lastDeltasNew, lastDeltasOld, newAverage, newSum, oldAverage, oldSum;
     lastDeltas = direction === -1 ? this.lastDownDeltas : this.lastUpDeltas;
     if (lastDeltas[0] === null) {
-        return direction;
+        // CHANGE: previously this would return direction when the deltas queue was initialzied with
+        // null but that caused the initial wheel event to always fire unti we had a full cache, so
+        // now we return false until the cache is full.
+        return false;
     }
     if (
         this.deltasTimestamp[this.stability * 2 - 2] + this.delay > Date.now() &&