@mixd-id/web-scaffold 0.1.240411080 → 0.1.240411081

package/package.json

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

package/src/components/Carousel.vue

@@ -5,10 +5,10 @@
        :style="computedStyle">
 
     <div ref="inner" :class="computedContainerClass">
-			<div v-for="item in items" :class="computedItemClass">
+      <div v-for="item in items" :class="computedItemClass">
         <slot v-if="$slots['default']" :item="item"></slot>
-				<component v-else :is="item.type" :="item" />
-			</div>
+        <component v-else :is="item.type" :="item" />
+      </div>
     </div>
 
     <div v-if="useNextPrev && (items ?? []).length > 1 && index < items.length - 1" :class="$style.carouselNext" @click="next(true)">
@@ -21,7 +21,7 @@
       </slot>
     </div>
 
-		<div v-if="useNextPrev && (items ?? []).length > 1 && index > 0" :class="$style.carouselPrev" @click="prev">
+    <div v-if="useNextPrev && (items ?? []).length > 1 && index > 0" :class="$style.carouselPrev" @click="prev">
       <slot name="prev">
         <div class="p-3">
           <button :class="$style.btn">
@@ -50,22 +50,22 @@ import {componentMixin} from "../mixin/component";
 
 export default{
 
-	mixins: [ componentMixin ],
+  mixins: [ componentMixin ],
 
   props:{
 
     items: Array,
 
-		infinite: {
-			type: undefined,
-			default: false
-		},
+    infinite: {
+      type: undefined,
+      default: false
+    },
 
-		ratio: Array,
+    ratio: Array,
 
-		autoPlay: [ Number, String ],
+    autoPlay: [ Number, String ],
 
-		useLegend: [ Boolean, Number ],
+    useLegend: [ Boolean, Number ],
 
     useNextPrev: [ Boolean, Number ],
 
@@ -73,68 +73,56 @@ export default{
 
   emits: [ 'change' ],
 
-	computed: {
+  computed: {
 
-		computedContainerClass(){
-			return [
-				this.$style.inner,
-				this.containerClass
-			]
-				.filter(_ => _)
-				.join(' ')
-		},
+    computedContainerClass(){
+      return [
+        this.$style.inner,
+        this.containerClass
+      ]
+          .filter(_ => _)
+          .join(' ')
+    },
 
-		computedItemClass(){
-			return [
-				this.$style.item,
-				this.itemClass
-			]
-				.filter(_ => _)
-				.join(' ')
-		}
+    computedItemClass(){
+      return [
+        this.$style.item,
+        this.itemClass
+      ]
+          .filter(_ => _)
+          .join(' ')
+    }
 
-	},
+  },
 
   data(){
     return {
       index: 0,
-			timeoutId: null,
+      timeoutId: null,
       scrollPosition: null,
       swiping: false,
-
-      // physics state
-      _rafId: null,
-      _anim: null,
-      _currentX: 0,
     }
   },
 
   mounted(){
     window.addEventListener('touchmove', this.onTouchMove, { passive: false });
-		if(this.autoPlay > 0)
-			this.play()
-
-    // initialize transform position
-    window.requestAnimationFrame(() => {
-      this._currentX = this._getCurrentX()
-      this._applyX(this._currentX)
-    })
+    if(this.autoPlay > 0)
+      this.play()
   },
 
   unmounted() {
     window.removeEventListener('touchmove', this.onTouchMove, { passive: false });
-    this._stopRaf()
   },
 
   watch:{
 
-		index(to){
+    index(to){
       this.$emit('change', to)
     },
 
-		items(){
-			this.index = 0
-		},
+    items(){
+      this.index = 0
+    },
 
   },
 
@@ -148,31 +136,10 @@ export default{
       }
     },
 
-    _stopRaf(){
-      if(this._rafId){
-        cancelAnimationFrame(this._rafId)
-        this._rafId = null
-      }
-      this._anim = null
-    },
-
-    _applyX(x){
-      this._currentX = x
-      if(this.$el?.firstElementChild)
-        this.$el.firstElementChild.style.transform = `translate3d(${x}px, 0, 0)`
-    },
-
-    _getCurrentX(){
-      const t = this.$el?.firstElementChild?.style?.transform || ''
-      const matches = t.match(/translate3d\((.*?)(?=\,)/)
-      return matches != null && typeof matches[1] !== 'undefined'
-        ? parseFloat(matches[1].replace('px', ''))
-        : 0
-    },
-
-    _getTargetXForIndex(index){
-      if(!this.$refs.inner) return 0
+    setPosition(noAnimation) {
+      if(!this.$refs.inner) return
 
+      const index = this.index
       let left = 0
       const gapPx = parseInt(window.getComputedStyle(this.$refs.inner).getPropertyValue('column-gap'))
       for(let curIndex = 0 ; curIndex < this.items.length ; curIndex++){
@@ -181,68 +148,20 @@ export default{
           left += (item.clientWidth + (!isNaN(gapPx) ? gapPx : 0))
       }
 
-      return left * -1
-    },
-
-    _rubberBand(distance, dimension, constant = 0.55){
-      // similar to iOS rubber-banding
-      const abs = Math.abs(distance)
-      const result = (dimension * constant * abs) / (dimension + constant * abs)
-      return Math.sign(distance) * result
-    },
-
-    _springTo(targetX, { stiffness = 0.09, damping = 0.78, maxDuration = 900 } = {}){
-      this._stopRaf()
-
-      const startTime = performance.now()
-      let x = this._getCurrentX()
-      let v = 0
-
-      const step = (now) => {
-        const dtMs = now - (this._anim?.t || now)
-        const dt = Math.min(0.032, Math.max(0.008, dtMs / 1000))
-        this._anim = { t: now }
-
-        // spring force
-        const F = (targetX - x) * stiffness
-        v = (v + F) * damping
-        x = x + v / dt
-
-        // numerical safety
-        if(!isFinite(x)) x = targetX
-
-        this._applyX(x)
+      left *= -1
 
-        const elapsed = now - startTime
-        const done = (Math.abs(targetX - x) < 0.5 && Math.abs(v) < 0.1) || elapsed > maxDuration
-
-        if(done){
-          this._applyX(targetX)
-          this._stopRaf()
-          return
-        }
-
-        this._rafId = requestAnimationFrame(step)
+      if(!noAnimation){
+        this.$el.firstElementChild.addEventListener('transitionend', function(){
+          this.classList.remove('transition-carousel')
+        })
+        this.$el.firstElementChild.classList.add('transition-carousel')
       }
 
-      this._rafId = requestAnimationFrame(step)
+      window.requestAnimationFrame(() => {
+        this.$el.firstElementChild.style.transform = `translate3d(${left}px, 0, 0)`
+      })
     },
 
-		setPosition(noAnimation) {
-			if(!this.$refs.inner) return
-
-      const left = this._getTargetXForIndex(this.index)
-
-			if(noAnimation){
-        this._stopRaf()
-        window.requestAnimationFrame(() => this._applyX(left))
-				return
-			}
-
-      // spring settle
-      this._springTo(left)
-		},
-
     setIndex(index){
       if(index >= 0 && index < this.items.length){
         this.index = index
@@ -257,25 +176,30 @@ export default{
         index = useBack === true ? 0 : this.items.length - 1
 
       this.index = index
+
       this.setPosition()
     },
 
     prev(){
+
       let index = this.index - 1;
+
       if(index < 0) index = 0
+
       this.index = index
+
       this.setPosition()
     },
 
-		play(){
+    play(){
       if(this.autoPlay > 0)
-			  this.timeoutId = window.setTimeout(() => { this.next(true); this.play() }, this.autoPlay)
-		},
+        this.timeoutId = window.setTimeout(() => { this.next(true); this.play() }, this.autoPlay)
+    },
 
-		stop(){
-			if(this.timeoutId)
-				window.clearTimeout(this.timeoutId)
-		},
+    stop(){
+      if(this.timeoutId)
+        window.clearTimeout(this.timeoutId)
+    },
 
     mouseMove(e){
       const sx = typeof e.touches !== 'undefined' ? e.touches[0].clientX : e.clientX
@@ -293,20 +217,16 @@ export default{
         }
       }
       else if(this._props['direction'] === 'horizontal'){
-        const baseX = this._props['ix']
-        let nextX = baseX + dx
-
-        const atFirst = this.index === 0
-        const atLast = this.index === this.items.length - 1
-        const overscrolling = (atFirst && dx > 0) || (atLast && dx < 0)
-
-        if(overscrolling){
-          const dim = this.$el?.clientWidth || 1
-          nextX = baseX + this._rubberBand(dx, dim)
+        let ix
+        if((this.index === this.items.length - 1 && dx < 0) ||
+            (this.index === 0 && dx > 0)){
+          ix = parseInt(this._props['ix'] + (dx * .19812))
+        }
+        else{
+          ix = parseInt(this._props['ix'] + dx)
         }
 
-        this._stopRaf() // user is directly controlling
-        this._applyX(nextX)
+        this.$el.firstElementChild.style.transform = `translate3d(${ix}px, 0, 0)`
       }
 
     },
@@ -338,19 +258,18 @@ export default{
       window.removeEventListener('touchmove', this.mouseMove)
       window.removeEventListener('touchend', this.mouseUp)
 
-			if(this.autoPlay > 0)
-				this.play()
+      if(this.autoPlay > 0)
+        this.play()
     },
 
     mouseDown(e){
-			if(!this.items || this.items.length <= 1)
-				return
+      if(!this.items || this.items.length <= 1)
+        return
 
-			this.stop()
+      this.stop()
 
-      // stop any running spring and capture current position
-      this._stopRaf()
-      const ix = this._getCurrentX()
+      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,
@@ -373,17 +292,29 @@ export default{
 
 <style>
 
-/* keep class for backwards compat but disable the old easing; spring animation is done in JS */
+.carousel-next,
+.carousel-prev{
+  position: absolute;
+  top: 50%;
+  transform: translate3d(0, -50%, 0);
+}
+.carousel-next{
+  right: 10px;
+}
+.carousel-prev{
+  left: 10px;
+}
+
 .transition-carousel{
-  transition: none;
+  transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
 }
 </style>
 
 <style module>
 
 .comp{
-	overflow: hidden;
-	position: relative;
+  overflow: hidden;
+  position: relative;
   @apply flex flex-col;
 }
 
@@ -392,34 +323,34 @@ export default{
 }
 
 .carouselNext{
-	@apply absolute top-0 bottom-0 right-0 flex items-center justify-center;
+  @apply absolute top-0 bottom-0 right-0 flex items-center justify-center;
 }
 
 .carouselPrev{
-	@apply absolute top-0 bottom-0 left-0 flex items-center justify-center;
+  @apply absolute top-0 bottom-0 left-0 flex items-center justify-center;
 }
 
 .inner{
-	will-change: transform;
-	@apply flex flex-row items-stretch;
+  will-change: transform;
+  @apply flex flex-row items-stretch;
 }
 .inner>*{
-	display: inline-block;
-	width: 100%;
-	min-width: 100%;
-	vertical-align: top;
+  display: inline-block;
+  width: 100%;
+  min-width: 100%;
+  vertical-align: top;
 }
 
 .legend{
-	@apply flex justify-center gap-2 py-1;
+  @apply flex justify-center gap-2 py-1;
 }
 .legend .legendItem{
 }
 .legend .legendItem>*{
-	@apply w-2 h-2 rounded-full bg-gray-100;
+  @apply w-2 h-2 rounded-full bg-gray-100;
 }
 .legend .legendItemActive>*{
-	@apply bg-primary-500;
+  @apply bg-primary-500;
 }
 
 .btn{

package/src/components/Image.vue

@@ -107,6 +107,7 @@ export default{
 			moved: false,
 			isVisible: false,
       actualSrc: null,
+      lastSrc: null
     }
   },
 
@@ -163,6 +164,8 @@ export default{
 			if(!this.isVisible) return
 
       const setSrc = (src) => {
+        if(this.lastSrc && src === this.lastSrc) return
+
         let reader
 
         if(typeof src === 'string') {
@@ -173,6 +176,7 @@ export default{
 
           this.actualSrc = src
           this.status = 2
+          this.lastSrc = src
         }
 
         else if(src instanceof File){
@@ -181,11 +185,13 @@ export default{
           reader.addEventListener('load', () => {
             this.status = 2
             this.actualSrc = reader.result
+            this.lastSrc = src
           }, false)
 
           reader.addEventListener('error', () => {
             this.status = 3
             this.actualSrc = this.defaultSrc
+            this.lastSrc = src
           })
 
           reader.readAsDataURL(src)