@mixd-id/web-scaffold 0.1.230406188 → 0.1.230406189

package/package.json

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

package/src/components/Carousel.vue

@@ -115,7 +115,7 @@ export default{
 
 		items(){
 			this.index = 0
-		}
+		},
 
   },
 
@@ -195,28 +195,44 @@ export default{
 
     mouseMove(e){
       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)
 
-      this.$el.firstElementChild.style.transform = `translate3d(${ix}px, 0, 0)`
+      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)`
+      }
+
     },
 
     mouseUp(e){
-      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)
+      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)
@@ -224,6 +240,8 @@ 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()
     },
@@ -239,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)
@@ -281,10 +301,11 @@ export default{
 	overflow: hidden;
 	position: relative;
 	background-image: v-bind(bgImages[0]);
+  /*touch-action: none;*/
 }
 
 .comp.noTouchAction{
-  touch-action: none;
+  /*touch-action: none;*/
 }
 
 .comp img{
@@ -302,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;
 }
 
@@ -329,6 +348,10 @@ export default{
 	@apply bg-primary-500;
 }
 
+.noScroll{
+  overflow: hidden
+}
+
 @media screen(md){
 	.comp{
 		background-image: v-bind(bgImages[1]);