@mixd-id/web-scaffold 0.1.230406187 → 0.1.230406189

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406187",
+  "version": "0.1.230406189",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",

package/src/components/Carousel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="$style.comp" @mousedown.prevent="mouseDown" @touchstart.passive="mouseDown">
+  <div :class="$style.comp" @mousedown="mouseDown" @touchstart.passive="mouseDown">
 
     <div ref="inner" :class="computedContainerClass">
 			<div v-for="item in items" :class="computedItemClass">
@@ -97,7 +97,6 @@ export default{
   data(){
     return {
       index: 0,
-      scrolling: 0,
 			timeoutId: null
     }
   },
@@ -116,7 +115,7 @@ export default{
 
 		items(){
 			this.index = 0
-		}
+		},
 
   },
 
@@ -195,41 +194,45 @@ export default{
 		},
 
     mouseMove(e){
-
-      this.scrolling = true
-
       const sx = typeof e.touches !== 'undefined' ? e.touches[0].clientX : e.clientX
+      const sy = typeof e.touches !== 'undefined' ? e.touches[0].clientY : e.clientY
       const dx = sx - this._props['sx']
+      const dy = sy - this._props['sy']
       const ix = parseInt(this._props['ix'] + dx)
 
-      //console.warn('mousemove', dx, ix)
+      if(!this._props['direction']){
+        if(Math.abs(dy) > 10){
+          this._props['direction'] = 'vertical'
+        }
+        else if(Math.abs(dx) > 15){
+          this._props['direction'] = 'horizontal'
+          document.body.classList.add(this.$style.noScroll)
+        }
+      }
+      else if(this._props['direction'] === 'horizontal'){
+        this.$el.firstElementChild.style.transform = `translate3d(${ix}px, 0, 0)`
+      }
 
-      this.$el.firstElementChild.style.transform = `translate3d(${ix}px, 0, 0)`
     },
 
     mouseUp(e){
-
-      window.setTimeout(() => {
-        this.scrolling = false
-      }, 50)
-
-      const tn = e.timeStamp - this._props['t0']
-      const sx = typeof e.changedTouches !== 'undefined' ? e.changedTouches[0].clientX : e.clientX
-      const dx = sx - this._props['sx']
-
-      //console.warn('mouseup', tn, dx, dx)
-
-      if (Math.abs(dx) > 10) {
-        if (tn < 1200){
-          dx < 0 ? this.next(true) : this.prev(true)
+      if(this._props['direction'] === 'horizontal'){
+        const tn = e.timeStamp - this._props['t0']
+        const sx = typeof e.changedTouches !== 'undefined' ? e.changedTouches[0].clientX : e.clientX
+        const dx = sx - this._props['sx']
+
+        if (Math.abs(dx) > 10) {
+          if (tn < 1200){
+            dx < 0 ? this.next(true) : this.prev(true)
+          }
+          else{
+            this.setPosition()
+          }
         }
         else{
           this.setPosition()
         }
       }
-      else{
-        this.setPosition()
-      }
 
       window.removeEventListener('mousemove', this.mouseMove)
       window.removeEventListener('mouseup', this.mouseUp)
@@ -237,12 +240,13 @@ export default{
       window.removeEventListener('touchmove', this.mouseMove)
       window.removeEventListener('touchend', this.mouseUp)
 
+      document.body.classList.remove(this.$style.noScroll)
+
 			if(this.autoPlay > 0)
 				this.play()
     },
 
     mouseDown(e){
-
 			if(!this.items || this.items.length <= 1)
 				return
 
@@ -253,8 +257,10 @@ export default{
 
       this._props = {
         sx:typeof e.touches !== 'undefined' ? e.touches[0].clientX : e.clientX,
+        sy:typeof e.touches !== 'undefined' ? e.touches[0].clientY : e.clientY,
         ix:ix,
-        t0:e.timeStamp
+        t0:e.timeStamp,
+        direction: null
       }
 
       window.addEventListener('mousemove', this.mouseMove)
@@ -294,8 +300,16 @@ export default{
 	white-space: nowrap;
 	overflow: hidden;
 	position: relative;
-	touch-action: none;
 	background-image: v-bind(bgImages[0]);
+  /*touch-action: none;*/
+}
+
+.comp.noTouchAction{
+  /*touch-action: none;*/
+}
+
+.comp img{
+  pointer-events: none;
 }
 
 .carouselNext{
@@ -309,14 +323,12 @@ export default{
 .inner{
 	white-space: nowrap;
 	will-change: transform;
-	touch-action: none;
 	@apply flex flex-row items-stretch;
 }
 .inner>*{
 	display: inline-block;
 	width: 100%;
 	min-width: 100%;
-	touch-action: none;
 	vertical-align: top;
 }
 
@@ -336,6 +348,10 @@ export default{
 	@apply bg-primary-500;
 }
 
+.noScroll{
+  overflow: hidden
+}
+
 @media screen(md){
 	.comp{
 		background-image: v-bind(bgImages[1]);