@thinkpixellab-public/px-vue 3.0.50 → 3.0.53

package/components/PxPivot.vue

@@ -5,7 +5,10 @@
 
 -->
 <template>
-    <div :class="bem({ scrolls: scrolls, animated: animated })">
+    <div
+        :class="bem({ scrolls: scrolls, animated: animated, loading: loading })"
+        :style="{ opacity: loading ? 0 : null }"
+    >
         <div :class="bem('tabs-align', { justify: justify })">
             <div ref="tabs" :class="bem('tabs')">
                 <button
@@ -16,7 +19,7 @@
                     @click="itemClick(item)"
                 >
                     <span :ref="getTabContentRefName(item)">
-                        <slot :item="item">
+                        <slot :item="item" :selected="isItemSelected(item)">
                             {{ getItemLabel(item) }}
                         </slot>
                     </span>
@@ -28,7 +31,9 @@
                         left: cssPx(selectorOffset),
                         width: cssPx(selectorWidth),
                     }"
-                ></div>
+                >
+                    <slot name="selector"></slot>
+                </div>
             </div>
         </div>
     </div>
@@ -62,6 +67,7 @@ export default {
             selectorOffset: 0,
             selectorWidth: 0,
             animated: false,
+            loading: true,
         };
     },
     // computed: {},
@@ -80,6 +86,14 @@ export default {
             },
         },
     },
+    mounted() {
+        setTimeout(() => {
+            this.updateSelector();
+            setTimeout(() => {
+                this.loading = false;
+            }, 50);
+        }, 50);
+    },
 
     methods: {
         resize() {
@@ -178,10 +192,10 @@ export default {
     &__tab-base {
         @include control-reset();
         background-color: transparent;
+        flex: none;
     }
 
     &__tab {
-        flex: none;
         padding: var(--px-pivot-tab-padding);
         cursor: pointer;
         &:disabled {
@@ -194,6 +208,9 @@ export default {
         position: absolute;
         bottom: 0;
         left: 0;
+    }
+
+    &__selector {
         height: 2px;
         background-color: currentColor;
     }
@@ -203,5 +220,11 @@ export default {
             @include transition(width left);
         }
     }
+
+    &--loading {
+        * {
+            transition: none !important;
+        }
+    }
 }
 </style>

package/components/PxSlideTransition.vue

@@ -48,6 +48,8 @@ export default {
         duration: { type: Number, default: 1 },
         ease: { type: String, default: 'power3.out' },
         slideAmount: { default: '40vw' },
+
+        disableAnimations: { type: Boolean, default: false },
     },
     computed: {
         tweenShared() {
@@ -57,6 +59,11 @@ export default {
             };
         },
     },
+    mounted() {
+        if (this.disableAnimations) {
+            gsap.globalTimeline.timeScale(Number.MAX_VALUE);
+        }
+    },
     methods: {
         directionAmount(direction, addEquals = false) {
             let dir;

package/components/PxSlides.vue

@@ -10,6 +10,7 @@
             :class="bem('slide-wrapper', { selected: isItemSelected(item) })"
         >
             <px-slide-transition
+                :disable-animations="disableAnimations"
                 :direction="direction"
                 @before-leave="transitionStart"
                 @after-leave="transitionEnd"
@@ -73,6 +74,9 @@ export default {
 
         // override default
         autoSelectFirst: { type: Boolean, default: true },
+
+        // disable animations
+        disableAnimations: { type: Boolean, default: false },
     },
 
     data() {

package/package.json

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

package/utils/utils.js

@@ -13,6 +13,22 @@ export default {
         return Math.min(Math.max(value, min), max);
     },
 
+    /**
+     * Safely gets an item from an array, otherwise returns a fallback value.
+     * @param {*} arr The array.
+     * @param {*} index The starting index.
+     * @param {*} offset The offset from the starting index.
+     * @param {*} wrap When true out-of-bounds indices will wrap, otherwise they will be clamped.
+     * @param {*} fallback The value to be returned if the item can't be retrieved.
+     * @return {*} An item from the array;
+     */
+    arraySafeGet: function (arr, index, offset = 0, wrap = false, fallback = null) {
+        const safeIndex = this.arraySafeIndex(arr, index, offset, wrap);
+        if (index > -1) {
+            return arr[safeIndex];
+        }
+        return fallback;
+    },
     /**
      * Method for calculating a safe index into an array for a given starting point and offset.
      * Offset can be very large or negative.
@@ -185,6 +201,28 @@ export default {
         };
     },
 
+    /**
+     * Returns the outer dimensions of an element include padding, margin, border, etc.
+     *
+     * @param {element} element The element to be measured
+     */
+    getOuterSize(element) {
+        if (!element || typeof window == 'undefined') {
+            return { width: 0, height: 0 };
+        }
+        const styles = window.getComputedStyle(element);
+        return {
+            width:
+                element.offsetWidth +
+                parseFloat(styles['marginLeft']) +
+                parseFloat(styles['marginRight']),
+            height:
+                element.offsetHeight +
+                parseFloat(styles['marginTop']) +
+                parseFloat(styles['marginBottom']),
+        };
+    },
+
     /**
      * Returns a simple seeded random number function. This turns out to be really useful when trying
      * to keep state in sync between nuxt and client. If seed is null, returns an instance that has