@mixd-id/web-scaffold 0.1.2301231317 → 0.1.2301231318

package/package.json

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

package/src/components/Carousel.vue

@@ -123,9 +123,7 @@ export default{
       })
       left *= -1
 
-      //console.log('`setPosition`', index, left)
-
-			if(noAnimation){
+			if(!noAnimation){
 				this.$el.firstElementChild.addEventListener('transitionend', function(){
 					this.classList.remove('transition-carousel')
 				})

package/src/components/Image.vue

@@ -1,8 +1,11 @@
 <template>
-  <div :class="$style.img">
+  <div :class="computedOuterClass">
 		<img :class="computedClass" :src="actualSrc" ref="img" @click="onClick" :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">
+			<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>
 </template>
 
@@ -42,13 +45,20 @@ export default{
 
     defaultSrc: {
       type: String,
-      default: '/images/no-image.png'
+			default: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMS4xNTkyIDIxLjA4MjhDMjEuNjc5OCAyMC41NDMyIDIyIDE5LjgwOSAyMiAxOVY1QzIyIDMuMzQzMTUgMjAuNjU2OSAyIDE5IDJINUMzLjM0MzE1IDIgMiAzLjM0MzE1IDIgNVYxOUMyIDIwLjY1NjkgMy4zNDMxNSAyMiA1IDIySDE5QzE5LjI5NjIgMjIgMTkuNTgyMyAyMS45NTcxIDE5Ljg1MjUgMjEuODc3MUMxOS44NjU4IDIxLjg3MzIgMTkuODc5IDIxLjg2OTIgMTkuODkyMSAyMS44NjUxQzIwLjI1ODYgMjEuNzUxMSAyMC41OTUgMjEuNTY4NyAyMC44ODYzIDIxLjMzMjlDMjAuODkzNyAyMS4zMjY5IDIwLjkwMSAyMS4zMjEgMjAuOTA4MyAyMS4zMTQ5QzIwLjk4MjQgMjEuMjUzOCAyMS4wNTM1IDIxLjE4OTIgMjEuMTIxMyAyMS4xMjEzQzIxLjEzNDEgMjEuMTA4NiAyMS4xNDY3IDIxLjA5NTcgMjEuMTU5MiAyMS4wODI4Wk0xOSAzLjVINUM0LjE3MTU3IDMuNSAzLjUgNC4xNzE1NyAzLjUgNVYxMi43TDYuMDUyOTIgOS42MzY0OUM3LjIxNTY2IDguMjQxMjEgOS4zNDE3NyA4LjE5MTAyIDEwLjU2OSA5LjUyOTg3TDIwLjE0MTggMTkuOTcyOEMyMC4zNjUyIDE5LjcxMDkgMjAuNSAxOS4zNzEyIDIwLjUgMTlWNUMyMC41IDQuMTcxNTcgMTkuODI4NCAzLjUgMTkgMy41Wk01IDIwLjVDNC4xNzE1NyAyMC41IDMuNSAxOS44Mjg0IDMuNSAxOVYxNS4wNDMxTDcuMjA1MjYgMTAuNTk2OEM3LjcxMzk1IDkuOTg2MzMgOC41OTE0NCA5Ljg5MDgxIDkuMjEzOTUgMTAuMzI0OUM5LjIxOTUxIDEwLjMyODggOS4yMjUwNSAxMC4zMzI3IDkuMjMwNTcgMTAuMzM2N0M5LjMxMzMyIDEwLjM5NjEgOS4zOTE0MSAxMC40NjUgOS40NjMzMiAxMC41NDM1TDE4LjU5MDEgMjAuNUg1WiIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iLjA4Ii8+CjxjaXJjbGUgY3g9IjE3IiBjeT0iNyIgcj0iMS4yNSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLW9wYWNpdHk9Ii4wOCIgc3Ryb2tlLXdpZHRoPSIxLjUiLz4KPC9zdmc+Cg=="
     }
 
   },
 
   computed:{
 
+		computedOuterClass(){
+			return [
+				this.$style.img
+			]
+				.join(' ')
+		},
+
 		computedClass(){
 			return [
 				this.class
@@ -58,7 +68,8 @@ export default{
 
 		imageStyle(){
 			return {
-				...(this.aspectRatio ? { 'aspect-ratio':this.aspectRatio } : {})
+				...(this.aspectRatio ? { 'aspect-ratio':this.aspectRatio } : {}),
+				...(this.actualSrc ? {} : { visibility:'hidden' })
 			}
 		}
 
@@ -67,7 +78,9 @@ export default{
   data(){
     return {
       visible: 0,
-			actualSrc: ''
+			isLoading: false,
+			actualSrc: null,
+			loaded: false
     }
   },
 
@@ -96,8 +109,12 @@ export default{
 		},
 
 		async loadSrc(){
+
+			this.loaded = false
+
 			if(typeof this.src === 'string') {
 				if (this.src.startsWith('data:image')) {
+					this.loaded = true
 					this.actualSrc = this.src
 				}
 				else{
@@ -117,33 +134,52 @@ export default{
 
 							var img = new Image()
 							img.addEventListener('load', () => {
+								this.loaded = true
 								this.actualSrc = img.src
+								this.isLoading = false
+							})
+							img.addEventListener('error', () => {
+								this.loaded = true
+								this.actualSrc = this.defaultSrc
+								this.isLoading = false
 							})
-							img.addEventListener('error', () => {})
 							img.src = src[screens[b]]
-
-							//this.actualSrc = src[screens[b]]
 						}
 					}
 				}
 			}
-
 			else if(this.src instanceof File){
 				var reader = new FileReader();
+
 				reader.addEventListener('load', () => {
+					this.loaded = true
 					this.actualSrc = reader.result
+					this.isLoading = false
 				}, false)
+
+				reader.addEventListener('error', () => {
+					this.loaded = true
+					this.actualSrc = this.defaultSrc
+					this.isLoading = false
+				})
+
 				reader.readAsDataURL(this.src)
 			}
-
 		}
 
 	},
 
 	watch:{
 
-		src(){
+		src(to){
 			this.loadSrc()
+
+			window.setTimeout(() => {
+				if(!this.loaded){
+					this.actualSrc = null
+					this.isLoading = true
+				}
+			}, 200)
 		}
 
 	}
@@ -154,7 +190,12 @@ export default{
 <style module>
 
 .img{
-	@apply relative
+	@apply relative;
+}
+
+.isLoading{
+	@apply absolute top-0 left-0 right-0 bottom-0;
+	@apply flex items-center justify-center;
 }
 
 

package/src/components/ImagePreview.vue

@@ -52,7 +52,7 @@ export default{
 }
 
 .previewModal{
-	@apply !bg-transparent !w-screen !h-screen !bg-base-300/80;
+	@apply !w-screen !h-screen !bg-base-300;
 	max-width: unset !important;
 	max-height: unset !important;
 }

package/src/components/ListPage1.vue

@@ -248,6 +248,10 @@ export default{
 
 	mounted() {
 		this.socket.onAny(this.onHooks)
+
+		window.addEventListener('focus', () => {
+			this.load()
+		})
 	},
 
 	unmounted() {

package/src/components/Textbox.vue

@@ -133,9 +133,9 @@ export default{
 			this.$emit('change', e.target.value)
 		},
 
-		onBlur(){
+		onBlur(e){
 			this.isActive = false
-			this.$emit('blur')
+			this.$emit('blur', e.target.value)
 		},
 
 		onKeyDown(e){