@mixd-id/web-scaffold 0.1.230406187 → 0.1.230406188

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406187",
+  "version": "0.1.230406188",
   "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
     }
   },
@@ -195,30 +194,18 @@ export default{
 		},
 
     mouseMove(e){
-
-      this.scrolling = true
-
       const sx = typeof e.touches !== 'undefined' ? e.touches[0].clientX : e.clientX
       const dx = sx - this._props['sx']
       const ix = parseInt(this._props['ix'] + dx)
 
-      //console.warn('mousemove', dx, ix)
-
       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)
@@ -242,7 +229,6 @@ export default{
     },
 
     mouseDown(e){
-
 			if(!this.items || this.items.length <= 1)
 				return
 
@@ -294,10 +280,17 @@ export default{
 	white-space: nowrap;
 	overflow: hidden;
 	position: relative;
-	touch-action: none;
 	background-image: v-bind(bgImages[0]);
 }
 
+.comp.noTouchAction{
+  touch-action: none;
+}
+
+.comp img{
+  pointer-events: none;
+}
+
 .carouselNext{
 	@apply absolute top-0 bottom-0 right-0 w-[20px];
 }
@@ -309,14 +302,14 @@ export default{
 .inner{
 	white-space: nowrap;
 	will-change: transform;
-	touch-action: none;
+	//touch-action: none;
 	@apply flex flex-row items-stretch;
 }
 .inner>*{
 	display: inline-block;
 	width: 100%;
 	min-width: 100%;
-	touch-action: none;
+	//touch-action: none;
 	vertical-align: top;
 }