@mixd-id/web-scaffold 0.1.2301231324 → 0.1.2301231325

package/package.json

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

package/src/components/Carousel.vue

@@ -3,12 +3,12 @@
     <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" />
+          <Image :src="image.imageUrl" :outerClass="imageClass" />
         </a>
         <router-link v-if="image.target" :to="scrolling ? '' : image.target">
-          <Image :src="image.imageUrl" :class="imageClass"/>
+          <Image :src="image.imageUrl" :outerClass="imageClass"/>
         </router-link>
-				<Image v-else :src="image.imageUrl" :class="imageClass" />
+				<Image v-else :src="image.imageUrl" :outerClass="imageClass" />
       </span>
 			<div v-else :class="imageClass" class="bg-gray-200 animate-pulse"></div>
     </div>

package/src/components/Image.vue

@@ -5,7 +5,7 @@
 		<img :class="computedClass" :src="actualSrc" ref="img" :style="imageStyle"/>
 		<input v-if="Boolean(editable)" class="hidden" type="file" accept="image/*" ref="file" @change="onChange"/>
 		<slot></slot>
-		<div :class="$style.isLoading" v-if="isLoading">
+		<div :class="$style.loading" v-if="loading">
 			<svg class="animate-spin aspect-square w-[15%] text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
 		</div>
 	</div>
@@ -80,8 +80,7 @@ export default{
 
   data(){
     return {
-      visible: 0,
-			isLoading: false,
+			loading: false,
 			actualSrc: null,
 			loaded: false
     }
@@ -113,10 +112,8 @@ export default{
 
 		async loadSrc(){
 
-			this.loaded = false
-
 			if(typeof this.src === 'string') {
-				if (this.src.startsWith('data:image')) {
+				if (!this.loaded && this.src.startsWith('data:image')) {
 					this.loaded = true
 					this.actualSrc = this.src
 				}
@@ -139,34 +136,36 @@ export default{
 							img.addEventListener('load', () => {
 								this.loaded = true
 								this.actualSrc = img.src
-								this.isLoading = false
+								this.loading = false
 							})
 							img.addEventListener('error', () => {
 								this.loaded = true
 								this.actualSrc = this.defaultSrc
-								this.isLoading = false
+								this.loading = false
 							})
 							img.src = src[screens[b]]
+							this.loading = true
 						}
 					}
 				}
 			}
-			else if(this.src instanceof File){
+			else if(!this.loaded && this.src instanceof File){
 				var reader = new FileReader();
 
 				reader.addEventListener('load', () => {
 					this.loaded = true
 					this.actualSrc = reader.result
-					this.isLoading = false
+					this.loading = false
 				}, false)
 
 				reader.addEventListener('error', () => {
 					this.loaded = true
 					this.actualSrc = this.defaultSrc
-					this.isLoading = false
+					this.loading = false
 				})
 
 				reader.readAsDataURL(this.src)
+				this.loading = true
 			}
 		}
 
@@ -175,14 +174,12 @@ export default{
 	watch:{
 
 		src(to){
+			this.loaded = false
 			this.loadSrc()
+		},
 
-			window.setTimeout(() => {
-				if(!this.loaded){
-					this.actualSrc = null
-					this.isLoading = true
-				}
-			}, 200)
+		"isMobile.value"(to){
+			this.loadSrc()
 		}
 
 	}
@@ -200,7 +197,7 @@ export default{
 	@apply absolute top-0 left-0 right-0 bottom-0;
 }
 
-.isLoading{
+.loading{
 	@apply absolute top-0 left-0 right-0 bottom-0;
 	@apply flex items-center justify-center;
 }

package/src/index.js

@@ -40,7 +40,7 @@ export default{
 
       window.addEventListener('resize', throttle(() => {
         isMobile.value = calculateIsMobile()
-      }, 600, { trailing:true }))
+      }, 300, { trailing:true }))
     }
 
     app.config.globalProperties.uniqid = uniqid