@thinkpixellab-public/px-vue 4.0.0 → 4.0.2

package/components/PxCalendar.vue

@@ -340,7 +340,7 @@ export default {
     .dp-day-disabled {
         background: transparent !important;
         color: $dp-fg-subtle !important;
-        &:before {
+        &::before {
             content: '';
             position: absolute;
             width: 100%;

package/components/PxClock.vue

@@ -217,19 +217,19 @@ export default {
     &__hand-min,
     &__hand-min-hover {
         @include abs;
-        &:before,
-        &:after {
+        &::before,
+        &::after {
             content: '';
             display: block;
             position: absolute;
         }
-        &:before {
+        &::before {
             border-radius: 50%;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
         }
-        &:after {
+        &::after {
             bottom: 50%;
             left: 50%;
             transform: translateX(-50%);
@@ -239,12 +239,12 @@ export default {
     &__hand-hour-shadow,
     &__hand-hour-hover,
     &__hand-hour {
-        &:before {
+        &::before {
             width: $hour-width + 4px;
             height: $hour-width + 4px;
             background-color: $hour-color;
         }
-        &:after {
+        &::after {
             height: $hour-height;
             width: $hour-width;
             background-color: $hour-color;
@@ -253,20 +253,20 @@ export default {
     }
 
     &__hand-hour-hover {
-        &:before,
-        &:after {
+        &::before,
+        &::after {
             background-color: $hour-hover;
         }
     }
 
     &__hand-hour-shadow {
         margin-top: 3px;
-        &:before {
+        &::before {
             background-color: rgba(black, 0.5);
             box-shadow: 0px 0px 4px black;
             opacity: 0.25;
         }
-        &:after {
+        &::after {
             background-color: rgba(black, 0.5);
             box-shadow: 0px 0px 4px black;
             opacity: 0.25;
@@ -275,12 +275,12 @@ export default {
 
     &__hand-min,
     &__hand-min-hover {
-        &:before {
+        &::before {
             width: $min-width + 2px;
             height: $min-width + 2px;
             background-color: $min-color;
         }
-        &:after {
+        &::after {
             height: $min-height;
             width: $min-width;
             background-color: $min-color;
@@ -289,8 +289,8 @@ export default {
     }
 
     &__hand-min-hover {
-        &:before,
-        &:after {
+        &::before,
+        &::after {
             background-color: $min-hover;
         }
     }
@@ -426,7 +426,7 @@ export default {
 
         &__hour {
             text-align: right;
-            &:before {
+            &::before {
                 // derive a fixed size from this
                 content: '10';
                 color: transparent;
@@ -439,7 +439,7 @@ export default {
 
         &__min {
             text-align: center;
-            &:before {
+            &::before {
                 // derive a fixed size from this
                 content: '00';
                 color: transparent;
@@ -450,11 +450,11 @@ export default {
             }
         }
 
-        &__hour:after {
+        &__hour::after {
             background-color: $hour-color;
         }
 
-        &__min:after {
+        &__min::after {
             background-color: $min-color;
         }
 

package/components/PxRadioButton.vue

@@ -47,7 +47,7 @@ export default {
 
         &:hover {
             @include bem(check) {
-                &:after {
+                &::after {
                     opacity: 0.5;
                 }
             }
@@ -74,7 +74,7 @@ export default {
             }
 
             &--checked {
-                &:after {
+                &::after {
                     opacity: 1 !important;
                 }
             }

package/components/PxResizer.vue

@@ -139,7 +139,7 @@ export default {
     }
 
     &--resizing {
-        &:after {
+        &::after {
             border: 1px dashed accent();
             border-radius: inherit;
         }

package/components/PxSlides.vue

@@ -26,24 +26,43 @@
                 </div>
             </px-slide-transition>
         </div>
+
+        <slot name="scrollpreview" :direction="scrollPreview">
+            <div :class="bem('scroll-preview', { prev: true, visible: scrollPreview == -1 })">
+                <px-icon :src="require('../assets/feather/arrow-left.svg')" :size="2" />
+            </div>
+
+            <div :class="bem('scroll-preview', { next: true, visible: scrollPreview == 1 })">
+                <px-icon :src="require('../assets/feather/arrow-right.svg')" :size="2" />
+            </div>
+        </slot>
     </div>
 </template>
 
 <script>
 import PxBaseItemsSelect from './PxBaseItemsSelect.vue';
 import PxSlideTransition from './PxSlideTransition.vue';
+import PxIcon from './PxIcon.vue';
+
 import gsap from 'gsap';
 import Drag from '../utils/drag.js';
+import Lethargy from '../utils/lethargy.js';
 
 export default {
     name: 'px-slides',
     mixins: [PxBaseItemsSelect],
-    components: { PxSlideTransition },
+    components: { PxSlideTransition, PxIcon },
 
     props: {
         // whether drag interaction is enabled
         dragEnabled: { type: Boolean, default: true },
 
+        // whether scroll interaction is enabled
+        scrollEnabled: { type: Boolean, default: false },
+
+        // whether to show an icon or other indicator that scrolling has started
+        scrollPreviewEnabled: { type: Boolean, default: false },
+
         // if true, slides loop to the first slide once last slide is reached
         loop: { type: Boolean, default: true },
 
@@ -61,6 +80,7 @@ export default {
         return {
             direction: 1,
             activeTransitions: 0,
+            scrollPreview: 0,
         };
     },
     computed: {},
@@ -101,11 +121,17 @@ export default {
             excludeSelector: this.dragExcludeSelector,
             disabled: !this.dragEnabled,
         });
+
+        if (this.scrollEnabled) {
+            this.$el.addEventListener('wheel', this.onWheel);
+        }
     },
     beforeDestroy() {
         if (this.drag) {
             this.drag.destroy();
         }
+
+        this.$el.removeEventListener('wheel', this.onWheel);
     },
     methods: {
         transitionStart() {
@@ -154,12 +180,48 @@ export default {
             }
         },
 
-        next() {
-            this.selectOffsetSafe(1, this.loop);
+        onWheel(e) {
+            if (typeof this.lethargy == 'undefined') {
+                this.lethargy = new Lethargy();
+                this.lethargyPrevCheck = false;
+            }
+
+            if (this.scrollPreviewEnabled) {
+                const delta = (e.deltaY + e.deltaX) / 2;
+                if (Math.abs(delta) > 5) {
+                    this.scrollPreview = Math.max(Math.min(delta, 1), -1);
+                }
+
+                clearTimeout(this.scrollPreviewTimeout);
+                this.scrollPreviewTimeout = setTimeout(() => {
+                    this.scrollPreview = 0;
+                }, 200);
+            }
+
+            const check = this.lethargy.check(e);
+
+            if (check !== this.lethargyPrevCheck) {
+                if (check) {
+                    if (check > 0) {
+                        this.previous(false);
+                    } else {
+                        this.next(false);
+                    }
+                }
+            }
+
+            this.lethargyPrevCheck = check;
+
+            e.stopPropagation();
+            e.preventDefault();
+        },
+
+        next(loopOverride = null) {
+            this.selectOffsetSafe(1, loopOverride === null ? this.loop : loopOverride);
         },
 
-        previous() {
-            this.selectOffsetSafe(-1, this.loop);
+        previous(loopOverride = null) {
+            this.selectOffsetSafe(-1, loopOverride === null ? this.loop : loopOverride);
         },
 
         // returns the index of the item relative to the selected item, if looped
@@ -214,5 +276,40 @@ export default {
         width: 100%;
         height: 100%;
     }
+
+    &__scroll-preview {
+        position: absolute;
+        top: 50%;
+        width: 5em;
+        height: 5em;
+        border-radius: 50%;
+        background-color: rgba(black, 0.07);
+        background-color: #f2f2f2;
+        backdrop-filter: blur(6px);
+        z-index: 100;
+        pointer-events: none;
+        opacity: 0;
+        transform: translate(0, -50%);
+
+        @include transition(opacity transform, $dur: 500ms);
+        @include depth-shadow(55, 0.05);
+
+        svg {
+            @include center();
+            color: currentColor;
+        }
+
+        &--prev {
+            left: 2.5em;
+        }
+
+        &--next {
+            right: 2.5em;
+        }
+
+        &--visible {
+            opacity: 1;
+        }
+    }
 }
 </style>

package/components/PxSpinner.vue

@@ -85,8 +85,8 @@ export default {
         }
 
         &__spinner,
-        &__spinner:before,
-        &__spinner:after {
+        &__spinner::before,
+        &__spinner::after {
             position: absolute;
             top: -2.5em;
             width: 2.5em;
@@ -103,17 +103,17 @@ export default {
             transform: translateZ(0);
             animation-delay: ($dur * -0.088888888);
         }
-        &__spinner:before,
-        &__spinner:after {
+        &__spinner::before,
+        &__spinner::after {
             content: '';
             position: absolute;
             top: 0;
         }
-        &__spinner:before {
+        &__spinner::before {
             left: -5em;
             animation-delay: ($dur * -0.088888888 * 2);
         }
-        &__spinner:after {
+        &__spinner::after {
             left: 5em;
         }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thinkpixellab-public/px-vue",
-    "version": "4.0.0",
+    "version": "4.0.2",
     "description": "General purpose Vue components and helpers that can be used across projects.",
     "author": "Pixel Lab",
     "license": "MIT",
@@ -16,7 +16,7 @@
     },
     "dependencies": {
         "@floating-ui/dom": "^1.1.1",
-        "@thinkpixellab-public/px-styles": "^3.7.6",
+        "@thinkpixellab-public/px-styles": "^3.7.9",
         "@thinkpixellab-public/vue-resize-directive": "^1.2.2",
         "body-scroll-lock": "^4.0.0-beta.0",
         "mitt": "^3.0.0",

package/utils/lethargy.js

@@ -0,0 +1,111 @@
+// Adapted from here: https://github.com/d4nyll/lethargy
+// MIT License
+
+function Lethargy(stability, sensitivity, tolerance, delay) {
+    this.stability = stability != null ? Math.abs(stability) : 8;
+    this.sensitivity = sensitivity != null ? 1 + Math.abs(sensitivity) : 100;
+    this.tolerance = tolerance != null ? 1 + Math.abs(tolerance) : 1.1;
+    this.delay = delay != null ? delay : 150;
+    this.lastUpDeltas = function () {
+        var i, ref, results;
+        results = [];
+        for (
+            i = 1, ref = this.stability * 2;
+            1 <= ref ? i <= ref : i >= ref;
+            1 <= ref ? i++ : i--
+        ) {
+            results.push(null);
+        }
+        return results;
+    }.call(this);
+    this.lastDownDeltas = function () {
+        var i, ref, results;
+        results = [];
+        for (
+            i = 1, ref = this.stability * 2;
+            1 <= ref ? i <= ref : i >= ref;
+            1 <= ref ? i++ : i--
+        ) {
+            results.push(null);
+        }
+        return results;
+    }.call(this);
+    this.deltasTimestamp = function () {
+        var i, ref, results;
+        results = [];
+        for (
+            i = 1, ref = this.stability * 2;
+            1 <= ref ? i <= ref : i >= ref;
+            1 <= ref ? i++ : i--
+        ) {
+            results.push(null);
+        }
+        return results;
+    }.call(this);
+}
+
+Lethargy.prototype.check = function (e) {
+    var lastDelta;
+    e = e.originalEvent || e;
+    if (e.wheelDelta != null) {
+        lastDelta = e.wheelDelta;
+    } else if (e.deltaY != null) {
+        lastDelta = e.deltaY * -40;
+    } else if (e.detail != null || e.detail === 0) {
+        lastDelta = e.detail * -40;
+    }
+    this.deltasTimestamp.push(Date.now());
+    this.deltasTimestamp.shift();
+    if (lastDelta > 0) {
+        this.lastUpDeltas.push(lastDelta);
+        this.lastUpDeltas.shift();
+        return this.isInertia(1);
+    } else {
+        this.lastDownDeltas.push(lastDelta);
+        this.lastDownDeltas.shift();
+        return this.isInertia(-1);
+    }
+    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;
+    }
+    if (
+        this.deltasTimestamp[this.stability * 2 - 2] + this.delay > Date.now() &&
+        lastDeltas[0] === lastDeltas[this.stability * 2 - 1]
+    ) {
+        return false;
+    }
+    lastDeltasOld = lastDeltas.slice(0, this.stability);
+    lastDeltasNew = lastDeltas.slice(this.stability, this.stability * 2);
+    oldSum = lastDeltasOld.reduce(function (t, s) {
+        return t + s;
+    });
+    newSum = lastDeltasNew.reduce(function (t, s) {
+        return t + s;
+    });
+    oldAverage = oldSum / lastDeltasOld.length;
+    newAverage = newSum / lastDeltasNew.length;
+    if (
+        Math.abs(oldAverage) < Math.abs(newAverage * this.tolerance) &&
+        this.sensitivity < Math.abs(newAverage)
+    ) {
+        return direction;
+    } else {
+        return false;
+    }
+};
+
+Lethargy.prototype.showLastUpDeltas = function () {
+    return this.lastUpDeltas;
+};
+
+Lethargy.prototype.showLastDownDeltas = function () {
+    return this.lastDownDeltas;
+};
+
+export default Lethargy;