@mixd-id/web-scaffold 0.1.2301231369 → 0.2.240702

package/src/components/Carousel.vue

@@ -1,43 +1,31 @@
 <template>
-  <div :class="$style.carousel" @mousedown.prevent.capture="mouseDown" @touchstart.passive.capture="mouseDown">
-    <div :class="$style.inner">
-      <span v-if="images && images.length && images.length > 0" v-for="image in images" :key="image">
-        <a v-if="image.target && image.target.indexOf('://') >= 0" :href="image.target" @click="checkClick">
-          <Image :src="image.imageUrl" :class="imageClass" />
-        </a>
-        <router-link v-if="image.target" :to="scrolling ? '' : image.target">
-          <Image :src="image.imageUrl" :class="imageClass"/>
-        </router-link>
-				<Image v-else :src="image.imageUrl" :class="imageClass" />
-      </span>
-			<div v-else :class="imageClass" class="bg-gray-200 animate-pulse"></div>
+  <div :class="$style.comp"
+       @mousedown="mouseDown"
+       @touchstart.passive="mouseDown"
+       :style="computedStyle">
+
+    <div ref="inner" :class="computedContainerClass">
+			<div v-for="item in cItems" :class="computedItemClass">
+        <slot v-if="$slots['default']" :item="item"></slot>
+				<component v-else :is="item.type" :="item" />
+			</div>
     </div>
-    <div v-if="images && images.length > 1" class="carousel-next" @click="next(false, true)">
-      <slot name="next">
-        <div class="w-10 h-10 rounded-full bg-black/10 hover:bg-black/60 group cursor-pointer flex items-center justify-center">
-          <svg width="24" height="24" viewBox="0 0 24 24" class="fill-white/30 group-hover:fill-white/60" xmlns="http://www.w3.org/2000/svg">
-            <g clip-path="url(#clip0)">
-              <path fill-rule="evenodd" clip-rule="evenodd" d="M8.04289 19.2071C7.65237 18.8166 7.65237 18.1834 8.04289 17.7929L13.8358 12L8.04289 6.20711C7.65237 5.81658 7.65237 5.18342 8.04289 4.79289C8.43342 4.40237 9.06658 4.40237 9.45711 4.79289L15.25 10.5858C16.031 11.3668 16.031 12.6332 15.25 13.4142L9.45711 19.2071C9.06658 19.5976 8.43342 19.5976 8.04289 19.2071Z"/>
-            </g>
-          </svg>
-        </div>
-      </slot>
+
+    <div v-if="cItems && cItems.length > 1" :class="$style.carouselNext" @click="next(true)">
+      <slot name="next"></slot>
     </div>
-    <div v-if="images && images.length > 1" class="carousel-prev" @click="prev">
+
+		<div v-if="cItems && cItems.length > 1" :class="$style.carouselPrev" @click="prev">
       <slot name="prev">
-        <div class="w-10 h-10 rounded-full bg-black/10 cursor-pointer flex items-center justify-center">
-          <svg width="24" height="24" viewBox="0 0 24 24" class="fill-white/30" xmlns="http://www.w3.org/2000/svg">
-            <path fill-rule="evenodd" clip-rule="evenodd" d="M15.7071 19.2071C16.0976 18.8166 16.0976 18.1834 15.7071 17.7929L9.91421 12L15.7071 6.20711C16.0976 5.81658 16.0976 5.18342 15.7071 4.79289C15.3166 4.40237 14.6834 4.40237 14.2929 4.79289L8.5 10.5858C7.71895 11.3668 7.71895 12.6332 8.5 13.4142L14.2929 19.2071C14.6834 19.5976 15.3166 19.5976 15.7071 19.2071Z"/>
-          </svg>
-        </div>
       </slot>
     </div>
-    <div v-if="images && images.length > 1" class="carousel-legend">
-      <div v-if="images && images.length && images.length > 0" v-for="_index in images.length"
-					 :class="'legend-item ' + (index === _index - 1 ? 'active' : '')" :key="_index"
+
+		<div v-if="useLegend && cItems && cItems.length > 1" :class="$style.legend">
+      <div v-for="_index in cItems.length"
+					 :class="$style.legendItem + (index === _index - 1 ? ` ${$style.legendItemActive}` : '')"
            @click="index = _index - 1">
         <slot name="legend">
-          <span></span>
+					<div></div>
         </slot>
       </div>
     </div>
@@ -46,82 +34,126 @@
 
 <script>
 
-import { parseBoolean } from "../utils/helpers.mjs";
+import {componentMixin} from "../mixin/component";
 
 export default{
 
-  props:{
+  computed: {
+
+    cItems(){
+
+      if(!this.dataKey)
+        return this.items
+
+      const page = this.getPage()
+      const obj = page.data?.find(_ => _.key === this.dataKey)
+      return obj ?
+          obj.value.map(_ => ({
+            ...this.items[0],
+            data: _
+          })) :
+          []
+    },
 
-    images: {
-      type: Array,
-      default: []
+    computedContainerClass(){
+      return [
+        this.$style.inner,
+        this.containerClass
+      ]
+          .filter(_ => _)
+          .join(' ')
     },
 
+    computedItemClass(){
+      return [
+        this.$style.item,
+        this.itemClass
+      ]
+          .filter(_ => _)
+          .join(' ')
+    }
+
+  },
+
+	mixins: [ componentMixin ],
+
+  props:{
+
+    data: Object,
+
+    dataKey: String,
+
+    items: Array,
+
 		infinite: {
-			type: [ Boolean, String, Number ],
+			type: undefined,
 			default: false
 		},
 
-		ratioMobile: String,
-		ratioDesktop: String,
+		ratio: Array,
 
-    imageClass:{
-      type: String,
-      default: "w-full"
-    }
+		autoPlay: [ Number, String ],
 
-  },
+		useLegend: [ Boolean, Number ],
 
-  emits: [ 'changed' ],
-
-	computed: {
+  },
 
-	},
+  emits: [ 'change' ],
 
   data(){
     return {
-      count: 0,
       index: 0,
-      scrolling:0
+			timeoutId: null,
+      scrollPosition: null,
+      swiping: false,
     }
   },
 
   mounted(){
-    this.count = this.$el.querySelectorAll('img').length
+    window.addEventListener('touchmove', this.onTouchMove, { passive: false });
+		if(this.autoPlay > 0)
+			this.play()
+  },
+
+  unmounted() {
+    window.removeEventListener('touchmove', this.onTouchMove, { passive: false });
   },
 
   watch:{
 
-		index(to, from){
-      this.setPosition()
-      this.$emit('changed', to)
+		index(to){
+      this.$emit('change', to)
     },
 
-		images(to){
+		items(){
 			this.index = 0
-		}
+		},
 
   },
 
   methods:{
 
-    checkClick(e){
-      if(this.scrolling){
-        e.preventDefault()
-        e.stopPropagation()
+    onTouchMove(e){
+      if(this.swiping && e.cancelable) {
+        e.preventDefault();
+        e.returnValue = false;
+        return false;
       }
     },
 
-    setPosition(noAnimation){
+		setPosition(noAnimation) {
+			if(!this.$refs.inner) return
 
-      const index = this.index
+			const index = this.index
+			let left = 0
+      const gapPx = parseInt(window.getComputedStyle(this.$refs.inner).getPropertyValue('column-gap'))
+			for(let curIndex = 0 ; curIndex < this.cItems.length ; curIndex++){
+				const item = this.$refs.inner.children[curIndex]
+				if(curIndex < index)
+					left += (item.clientWidth + (!isNaN(gapPx) ? gapPx : 0))
+			}
 
-      let left = 0
-      this.$el.querySelectorAll('img').forEach((img, curIndex) => {
-        if(curIndex < index)
-          left += img.clientWidth
-      })
-      left *= -1
+			left *= -1
 
 			if(!noAnimation){
 				this.$el.firstElementChild.addEventListener('transitionend', function(){
@@ -130,22 +162,30 @@ export default{
 				this.$el.firstElementChild.classList.add('transition-carousel')
 			}
 
-      this.$el.firstElementChild.style.transform = `translate3d(${left}px, 0, 0)`
-    },
+			window.requestAnimationFrame(() => {
+        this.$el.firstElementChild.style.transform = `translate3d(${left}px, 0, 0)`
+      })
+		},
 
-    next(setPosition, useBack){
+    setIndex(index){
+      if(index >= 0 && index < this.cItems.length){
+        this.index = index
+        this.setPosition()
+      }
+    },
 
+    next(useBack){
       let index = this.index + 1
 
-      if(index >= this._props['count'])
-        index = typeof useBack !== 'undefined' && useBack === true && parseBoolean(this.infinite) ? 0 : this._props['count'] - 1
+      if(index >= this.cItems.length)
+        index = useBack === true ? 0 : this.cItems.length - 1
 
       this.index = index
 
-      if(setPosition) this.setPosition()
+      this.setPosition()
     },
 
-    prev(setPosition){
+    prev(){
 
       let index = this.index - 1;
 
@@ -153,44 +193,68 @@ export default{
 
       this.index = index
 
-      if(setPosition) this.setPosition()
+      this.setPosition()
     },
 
-    mouseMove(e){
+		play(){
+      if(this.autoPlay > 0)
+			  this.timeoutId = window.setTimeout(() => { this.next(true); this.play() }, this.autoPlay)
+		},
 
-      this.scrolling = true
+		stop(){
+			if(this.timeoutId)
+				window.clearTimeout(this.timeoutId)
+		},
 
+    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 ix = parseInt(this._props['ix'] + dx)
+      const dy = sy - this._props['sy']
+
+      if(!this._props['direction']){
+        if(Math.abs(dx) > 3){
+          this._props['direction'] = 'horizontal'
+          this.swiping = true
+        }
+        else if(Math.abs(dy) > 3){
+          this._props['direction'] = 'vertical'
+        }
+      }
+      else if(this._props['direction'] === 'horizontal'){
+        let ix
+        if((this.index === this.cItems.length - 1 && dx < 0) ||
+            (this.index === 0 && dx > 0)){
+          ix = parseInt(this._props['ix'] + (dx * .19812))
+        }
+        else{
+          ix = parseInt(this._props['ix'] + dx)
+        }
 
-      //console.warn('mousemove', dx, ix)
+        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() : this.prev()
+          }
+          else{
+            this.setPosition()
+          }
         }
         else{
           this.setPosition()
         }
-      }
-      else{
-        this.setPosition()
+
+        this.swiping = false
       }
 
       window.removeEventListener('mousemove', this.mouseMove)
@@ -198,25 +262,28 @@ export default{
       window.removeEventListener('mouseout', this.mouseUp)
       window.removeEventListener('touchmove', this.mouseMove)
       window.removeEventListener('touchend', this.mouseUp)
+
+			if(this.autoPlay > 0)
+				this.play()
     },
 
     mouseDown(e){
-
-			if(!this.images || this.images.length <= 1)
+			if(!this.cItems || this.cItems.length <= 1)
 				return
 
+			this.stop()
+
       var matches = this.$el.firstElementChild.style.transform.match(/translate3d\((.*?)(?=\,)/)
       var ix = matches != null && typeof matches[1] != 'undefined' ? parseInt(matches[1].replace('px', '')) : 0
 
       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,
-        count: this.$el.querySelectorAll('img').length,
+        direction: null
       }
 
-      //console.log('mousedown', this._props, this.count)
-
       window.addEventListener('mousemove', this.mouseMove)
       window.addEventListener('mouseup', this.mouseUp)
       window.addEventListener('mouseout', this.mouseUp)
@@ -250,44 +317,47 @@ export default{
 
 <style module>
 
-.carousel{
+.comp{
 	white-space: nowrap;
 	overflow: hidden;
 	position: relative;
-	touch-action: none;
+}
+
+.comp img{
+  pointer-events: none;
+}
+
+.carouselNext{
+	@apply absolute top-0 bottom-0 right-0 w-[20px];
+}
+
+.carouselPrev{
+	@apply absolute top-0 bottom-0 left-0 w-[20px];
 }
 
 .inner{
 	white-space: nowrap;
 	will-change: transform;
-	touch-action: none;
+	@apply flex flex-row items-stretch;
 }
 .inner>*{
 	display: inline-block;
 	width: 100%;
-	touch-action: none;
+	min-width: 100%;
 	vertical-align: top;
 }
 
 .legend{
-	position: absolute;
-	bottom: 6px;
-	left: 50%;
-	transform: translate3d(-50%, 0, 0);
+	@apply flex justify-center gap-2 py-1;
 }
-.legend .legend-item{
-	display: inline-block;
+.legend .legendItem{
 }
-.legend .legend-item>*{
-	width: 12px;
-	height: 12px;
-	border-radius: 100%;
-	background: rgba(0, 0, 0, .2);
-	margin: 0 3px;
-	display: inline-block;
+.legend .legendItem>*{
+	@apply w-2 h-2 rounded-full bg-gray-100;
 }
-.legend .legend-item.active>*{
-	background: rgba(0, 0, 0, .6);
+.legend .legendItemActive>*{
+	@apply bg-primary-500;
 }
 
-</style>
+
+</style>