@thinkpixellab-public/px-vue 3.0.64 → 3.0.65

package/components/PxArrowScroller.vue

@@ -17,6 +17,7 @@ ar
 <template>
     <div :class="bem()">
         <button
+            v-if="!disabled"
             :class="[bem('button', { start: true, visible: arrowStartVisible }), buttonClass]"
             @click="scrollPages(-1)"
             aria-label="Scroll to previous"
@@ -29,11 +30,12 @@ ar
             </slot>
         </button>
 
-        <div :class="bem('scroller')" ref="scroller" @scroll="updateScrollArrows">
+        <div :class="bem('scroller', { disabled })" ref="scroller" @scroll="updateScrollArrows">
             <slot />
         </div>
 
         <button
+            v-if="!disabled"
             :class="[bem('button', { end: true, visible: arrowEndVisible }), buttonClass]"
             @click="scrollPages(1)"
             aria-label="Scroll to next"
@@ -63,6 +65,7 @@ export default {
         arrowStartSrc: { type: String, default: require('../assets/icons/nav-prev.svg') },
         arrowEndSrc: { type: String, default: require('../assets/icons/nav-next.svg') },
         buttonClass: { type: String, default: null },
+        disabled: { type: Boolean, default: false },
     },
     data() {
         return {
@@ -161,6 +164,9 @@ export default {
         grid-area: scroller;
         overflow-x: auto;
         @include invisible-scrollbar;
+        &--disabled {
+            overflow-x: hidden;
+        }
     }
 }
 </style>

package/components/PxPivot.vue

@@ -6,54 +6,61 @@
 -->
 <template>
     <div
-        :class="bem({ scrolls: scrolls, animated: animated, loading: loading })"
+        :class="bem({ animated: animated, loading: loading })"
         :style="{ opacity: loading ? 0 : null }"
     >
-        <div :class="bem('tabs-align', { justify: justify })">
-            <div ref="tabs" :class="bem('tabs')">
-                <button
-                    :class="[bem('tab-base', { selected: isItemSelected(item) }), tabClass]"
-                    v-for="item in items"
-                    :key="getItemKey(item)"
-                    :disabled="getItemDisabled(item)"
-                    @click="itemClick(item)"
-                    v-bind="getTabAttrs(item)"
-                >
-                    <span :ref="getTabContentRefName(item)">
-                        <slot :item="item" :selected="isItemSelected(item)">
-                            {{ getItemLabel(item) }}
-                        </slot>
-                    </span>
-                </button>
-
-                <div
-                    :class="[bem('selector-base'), selectorClass]"
-                    :style="{
-                        left: cssPx(selectorOffset),
-                        width: cssPx(selectorWidth),
-                    }"
-                >
-                    <slot name="selector"></slot>
+        <PxArrowScroller :disabled="!scrolls">
+            <div :class="bem('grid')">
+                <div :class="bem('tabs-align', { justify: justify })">
+                    <div ref="tabs" :class="bem('tabs')">
+                        <button
+                            :class="[bem('tab-base', { selected: isItemSelected(item) }), tabClass]"
+                            v-for="item in items"
+                            :key="getItemKey(item)"
+                            :disabled="getItemDisabled(item)"
+                            @click="itemClick(item)"
+                            v-bind="getTabAttrs(item)"
+                        >
+                            <span :ref="getTabContentRefName(item)">
+                                <slot :item="item" :selected="isItemSelected(item)">
+                                    {{ getItemLabel(item) }}
+                                </slot>
+                            </span>
+                        </button>
+
+                        <div
+                            :class="[bem('selector-base'), selectorClass]"
+                            :style="{
+                                left: cssPx(selectorOffset),
+                                width: cssPx(selectorWidth),
+                            }"
+                        >
+                            <slot name="selector"></slot>
+                        </div>
+                    </div>
                 </div>
             </div>
-        </div>
+        </PxArrowScroller>
     </div>
 </template>
 
 <script>
 import PxBaseItemsSelect from './PxBaseItemsSelect.vue';
 import PxBaseResize from './PxBaseResize.vue';
+import PxArrowScroller from './PxArrowScroller.vue';
 import utils from '../utils/utils.js';
 
 export default {
     name: 'px-pivot',
-    components: {},
+    components: { PxArrowScroller },
     mixins: [PxBaseResize, PxBaseItemsSelect],
     props: {
         // classes that get set on the tabs and selector line
         tabClass: { type: String, default: 'px-pivot__tab' },
         selectorClass: { type: String, default: 'px-pivot__selector' },
 
+        animateSelector: { type: Boolean, default: true },
+
         // a function that will return attributes that should be set on the tab buttons (takes the
         // button item as an arg)
         tabAttrsFn: { type: Function, default: null },
@@ -74,6 +81,7 @@ export default {
             selectorWidth: 0,
             animated: false,
             loading: true,
+            resizing: false,
         };
     },
     // computed: {},
@@ -127,7 +135,11 @@ export default {
             }
 
             if (this.scrolls) {
-                selected.scrollIntoView({ behavior: 'smooth', inline: 'center' });
+                selected.scrollIntoView({
+                    behavior: 'smooth',
+                    inline: 'nearest',
+                    block: 'nearest',
+                });
             }
         },
 
@@ -139,11 +151,17 @@ export default {
         },
 
         itemClick(item) {
-            this.animated = true;
-            this.selectItemOnly(item);
-            setTimeout(() => {
+            clearTimeout(this.animateTimeout);
+
+            this.animated = this.animateSelector;
+
+            this.$nextTick(() => {
+                this.selectItemOnly(item);
+            });
+
+            this.animateTimeout = setTimeout(() => {
                 this.animated = false;
-            }, 100);
+            }, 1000);
         },
 
         getTabAttrs(item) {
@@ -159,9 +177,6 @@ export default {
 <style lang="scss">
 @use '../styles/px.scss' as *;
 .px-pivot {
-    display: grid;
-    grid-template-columns: minmax(min-content, 100%);
-
     // disable animation until loaded
     &--loading {
         * {
@@ -169,18 +184,28 @@ export default {
         }
     }
 
+    // * {
+    //     transition: none !important;
+    // }
+
     --px-pivot-tab-padding: 0.5em;
     --px-pivot-tab-offset: -0.5em;
 
-    &--scrolls {
-        max-width: 100%;
-        overflow-x: auto;
-        -webkit-overflow-scrolling: touch;
-        @include invisible-scrollbar();
+    // &--scrolls {
+    //     max-width: 100%;
+    //     overflow-x: auto;
+    //     -webkit-overflow-scrolling: touch;
+    //     @include invisible-scrollbar();
+    // }
+
+    &__grid {
+        display: grid;
+        grid-template-columns: minmax(min-content, 100%);
     }
 
     &__tabs-align {
         min-width: 100%;
+        width: auto;
         display: flex;
         position: relative;
         &--justify-center {
@@ -229,8 +254,8 @@ export default {
     }
 
     &--animated & {
-        &__selector {
-            @include transition(width left);
+        &__selector-base {
+            @include transition(left width opacity, $dur: 400ms, $ease: $ease-out-quart);
         }
     }
 

package/components/PxSlides.vue

@@ -175,7 +175,7 @@ export default {
 
             this.lethargyPrevCheck = false;
 
-            this.$el.addEventListener('wheel', this.onWheel);
+            this.$el.addEventListener('wheel', this.onWheel, { passive: true });
         }
 
         this.drag = new Drag(this.$el, {

package/package.json

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