@mixd-id/web-scaffold 0.1.230406001

package/src/components/Image.vue

@@ -0,0 +1,207 @@
+<template>
+  <div :class="outerClass">
+
+		<slot v-if="$slots['empty'] && status === 0" name="empty" :instance="this"></slot>
+		<slot v-else-if="$slots['loading'] && status === 1" name="loading" :instance="this"></slot>
+		<div v-else-if="!$slots['loading'] && status === 1 && spinnerType === 'spinner'" :class="$style.loading">
+			<svg class="animate-spin aspect-square w-[15%] min-w-[14px] 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>
+		<slot v-else-if="$slots['error'] && status === 3" name="error" :instance="this"></slot>
+		<img v-else :class="computedClass" :src="actualSrc" ref="img" />
+
+		<slot :instance="this"></slot>
+
+		<input v-if="Boolean(editable)" class="hidden" type="file" accept="image/*" ref="file" @change="onChange"/>
+
+	</div>
+</template>
+
+<script>
+
+const screens = {
+	0: 'all',
+	640: 'sm',
+	728: 'md',
+	1024: 'lg',
+	1280: 'xl',
+	1536: '2xl'
+}
+
+export default{
+
+	emits: [ 'change' ],
+
+  props:{
+
+		class: String,
+
+		editable:{
+			type: [ Boolean, String ],
+			default: false
+		},
+
+    src:{
+      type: [ String, Object ]
+    },
+
+    defaultSrc: {
+      type: String,
+			default: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMS4xNTkyIDIxLjA4MjhDMjEuNjc5OCAyMC41NDMyIDIyIDE5LjgwOSAyMiAxOVY1QzIyIDMuMzQzMTUgMjAuNjU2OSAyIDE5IDJINUMzLjM0MzE1IDIgMiAzLjM0MzE1IDIgNVYxOUMyIDIwLjY1NjkgMy4zNDMxNSAyMiA1IDIySDE5QzE5LjI5NjIgMjIgMTkuNTgyMyAyMS45NTcxIDE5Ljg1MjUgMjEuODc3MUMxOS44NjU4IDIxLjg3MzIgMTkuODc5IDIxLjg2OTIgMTkuODkyMSAyMS44NjUxQzIwLjI1ODYgMjEuNzUxMSAyMC41OTUgMjEuNTY4NyAyMC44ODYzIDIxLjMzMjlDMjAuODkzNyAyMS4zMjY5IDIwLjkwMSAyMS4zMjEgMjAuOTA4MyAyMS4zMTQ5QzIwLjk4MjQgMjEuMjUzOCAyMS4wNTM1IDIxLjE4OTIgMjEuMTIxMyAyMS4xMjEzQzIxLjEzNDEgMjEuMTA4NiAyMS4xNDY3IDIxLjA5NTcgMjEuMTU5MiAyMS4wODI4Wk0xOSAzLjVINUM0LjE3MTU3IDMuNSAzLjUgNC4xNzE1NyAzLjUgNVYxMi43TDYuMDUyOTIgOS42MzY0OUM3LjIxNTY2IDguMjQxMjEgOS4zNDE3NyA4LjE5MTAyIDEwLjU2OSA5LjUyOTg3TDIwLjE0MTggMTkuOTcyOEMyMC4zNjUyIDE5LjcxMDkgMjAuNSAxOS4zNzEyIDIwLjUgMTlWNUMyMC41IDQuMTcxNTcgMTkuODI4NCAzLjUgMTkgMy41Wk01IDIwLjVDNC4xNzE1NyAyMC41IDMuNSAxOS44Mjg0IDMuNSAxOVYxNS4wNDMxTDcuMjA1MjYgMTAuNTk2OEM3LjcxMzk1IDkuOTg2MzMgOC41OTE0NCA5Ljg5MDgxIDkuMjEzOTUgMTAuMzI0OUM5LjIxOTUxIDEwLjMyODggOS4yMjUwNSAxMC4zMzI3IDkuMjMwNTcgMTAuMzM2N0M5LjMxMzMyIDEwLjM5NjEgOS4zOTE0MSAxMC40NjUgOS40NjMzMiAxMC41NDM1TDE4LjU5MDEgMjAuNUg1WiIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iLjA4Ii8+CjxjaXJjbGUgY3g9IjE3IiBjeT0iNyIgcj0iMS4yNSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLW9wYWNpdHk9Ii4wOCIgc3Ryb2tlLXdpZHRoPSIxLjUiLz4KPC9zdmc+Cg=="
+    },
+
+		spinnerType: {
+			type: String,
+			default: "shimmer" // spinner | shimmer
+		}
+
+  },
+
+  computed:{
+
+		outerClass(){
+			return [
+				this.$style.comp,
+				this.class,
+				this.status === 1 && this.spinnerType === 'shimmer' && !this.$slots['loading'] ?
+					this.$style.shimmer : ''
+			]
+				.join(' ')
+		},
+
+		computedClass(){
+			return [
+				this.$style.img,
+				this.class
+			]
+				.join(' ')
+		}
+
+  },
+
+  data(){
+    return {
+			status: 0, // 0:empty, 1:loading, 2:image, 3:error
+			actualSrc: 'data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='
+    }
+  },
+
+  mounted(){
+		this.$observe.once(this.$el, () => {
+			this.loadSrc()
+		})
+  },
+
+	methods:{
+
+		onChange(e){
+			if(e.target.files.length > 0){
+				var reader = new FileReader();
+				reader.addEventListener('load', () => {
+					this.$emit('change', reader.result, e.target.files[0])
+				}, false)
+				reader.readAsDataURL(e.target.files[0]);
+			}
+		},
+
+		edit(){
+			if(this.$refs.file){
+				this.$refs.file.click()
+			}
+		},
+
+		async loadSrc(){
+
+			if(typeof this.src === 'string') {
+				if (this.src.startsWith('data:image')) {
+					this.actualSrc = this.src
+					this.status = 2
+				}
+				else{
+					const src = {}
+					this.src.split(',').forEach((text) => {
+						let [ prefix, ...args ] = text.split(':')
+
+						if(args.length > 0 && args[0].substring(0, 2) !== '//'){
+							src[prefix.trim()] = args.join(':').trim()
+						}
+						else{
+							src['all'] = text
+						}
+					})
+
+					for(const b in screens){
+						if(window.innerWidth > b && screens[b] in src){
+							var img = new Image()
+							img.addEventListener('load', () => {
+								this.status = 2
+								this.actualSrc = img.src
+							})
+							img.addEventListener('error', () => {
+								this.status = 3
+								this.actualSrc = this.defaultSrc
+							})
+							img.src = src[screens[b]]
+							this.status = 1
+						}
+					}
+				}
+			}
+			else if(this.src instanceof File){
+				var reader = new FileReader();
+
+				reader.addEventListener('load', () => {
+					this.status = 2
+					this.actualSrc = reader.result
+				}, false)
+
+				reader.addEventListener('error', () => {
+					this.status = 3
+					this.actualSrc = this.defaultSrc
+				})
+
+				reader.readAsDataURL(this.src)
+				this.status = 1
+			}
+		}
+
+	},
+
+	watch:{
+
+		src(to){
+			this.loadSrc()
+		},
+
+		"isMobile.value"(to){
+			this.loadSrc()
+		}
+
+	}
+}
+
+</script>
+
+<style module>
+
+.comp{
+	@apply relative;
+}
+
+.img{
+	@apply object-contain;
+}
+
+.editArea{
+	@apply absolute top-0 left-0 right-0 bottom-0;
+}
+
+.loading{
+	@apply absolute top-0 left-0 right-0 bottom-0;
+	@apply flex items-center justify-center;
+}
+
+.shimmer{
+	@apply bg-text-200 animate-pulse;
+}
+
+</style>

package/src/components/Image360.vue

@@ -0,0 +1,140 @@
+<template>
+	<div :class="$style.comp">
+
+		<div class="absolute top-0 right-0 bg-black/50 rounded-lg flex flex-row gap-2 items-center m-1">
+			<button type="button" class="p-1" @click="prev">Prev</button>
+			<button type="button" class="p-1" @click="next">Next</button>
+			<button type="button" class="p-1" @click="toggleMode" :class="mode === 1 ? 'bg-red-500' : 'bg-green-500'">360</button>
+		</div>
+
+		<img v-if="mode === 1" :src="staticSrc" class="pointer-events-none" style="user-select: none" />
+		<div v-else-if="mode === 2 && status === 1">Loading...</div>
+		<div v-else-if="mode === 2 && status === 2">
+			<img v-for="(path, idx) in src" :src="path" :class="idx === index ? '' : 'hidden'"
+				class="pointer-events-none" style="user-select: none"/>
+		</div>
+	</div>
+</template>
+
+<script>
+
+export default{
+
+	props: {
+
+		src: Array,
+
+		staticSrc: String
+
+	},
+
+	data(){
+		return {
+			status: 0,
+			index: 0,
+			mode: 1,
+			startX: null
+		}
+	},
+
+	mounted(){
+		this.load()
+
+		this.$el.addEventListener('mousedown', this.onMouseDown)
+	},
+
+	methods: {
+
+		load(){
+
+			this.status = 1
+			let loadedCount = 0
+
+			const loadComplete = () => {
+				loadedCount++
+
+				if(loadedCount >= this.src.length){
+					this.status = 2
+				}
+			}
+
+			this.src.forEach((src) => {
+				var img = new Image()
+				img.addEventListener('load', () => {
+					loadComplete()
+				})
+				img.addEventListener('error', () => {
+					loadComplete()
+				})
+				img.src = src
+			})
+
+		},
+
+		prev(){
+			this.index--
+			if(this.index < 0)
+				this.index = this.src.length - 1
+		},
+
+		next(){
+			this.index++
+			if(this.index >= this.src.length)
+				this.index = 0
+		},
+
+		toggleMode(){
+			this.mode = this.mode === 1 ? 2 : 1
+		},
+
+		onMouseMove(e){
+			const curX = e.touches ? e.touches[0].clientX : e.clientX
+			const distance = curX - this.startX
+			if(distance > 5){
+				this.next()
+				this.startX = curX
+			}
+			else if(distance < -5){
+				this.prev()
+				this.startX = curX
+			}
+		},
+
+		onMouseUp(){
+			window.removeEventListener('mousemove', this.onMouseMove)
+			window.removeEventListener('mouseup', this.onMouseUp)
+			this.startX = null
+		},
+
+		onMouseDown(e){
+
+			if(this.mode !== 2) return
+
+			this.startX = e.touches ? e.touches[0].clientX : e.clientX
+			window.addEventListener('mousemove', this.onMouseMove)
+			window.addEventListener('mouseup', this.onMouseUp)
+
+		}
+
+	},
+
+	watch: {
+
+		src(to){
+			console.log('src', to)
+		}
+
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+	@apply relative;
+}
+
+</style>

package/src/components/ImageFullScreen.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="image-fs">
+    <div class="flex h-full w-full items-center justify-center relative">
+      <div>
+        <div class="p-5 top-0 right-0 absolute cursor-pointer" @click="$emit('close')">
+          <svg width="32" height="32" viewBox="0 0 24 24" class="fill-white/60" xmlns="http://www.w3.org/2000/svg">
+            <path d="M6.53034 5.46965C6.23745 5.17676 5.76257 5.17676 5.46968 5.46965C5.17679 5.76255 5.17679 6.23742 5.46968 6.53031L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0606L17.4697 18.5303C17.7626 18.8232 18.2375 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53032C18.8232 6.23743 18.8232 5.76256 18.5303 5.46966C18.2374 5.17677 17.7626 5.17677 17.4697 5.46966L12 10.9393L6.53034 5.46965Z"/>
+          </svg>
+        </div>
+        <img :src="src" class="block w-full max-w-[80%] mx-auto" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default{
+
+  props: {
+
+    src:{ type:String },
+
+    state: {
+      type: Boolean,
+      default: false
+    }
+
+  },
+
+  emits:[
+    'close'
+  ],
+
+  watch:{
+
+    state(to, from){
+
+      if(to){
+        this.show()
+      }
+      else{
+        this.hide()
+      }
+    }
+
+  },
+
+  methods: {
+
+    show(){
+
+      this.$el.classList.add('image-fs-on')
+      window.setTimeout(() => {
+        this.$el.classList.add('image-fs-active')
+      }, 100)
+
+    },
+
+    afterHide(){
+      this.$el.classList.remove('image-fs-on')
+      this.$el.removeEventListener('transitionend', this.afterHide)
+    },
+
+    hide(){
+      this.$el.addEventListener('transitionend', this.afterHide)
+      this.$el.classList.remove('image-fs-active')
+    }
+
+  }
+
+}
+
+</script>
+
+<style>
+
+.image-fs{
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  @apply bg-black/80;
+  z-index: 21;
+  display: none;
+}
+
+.image-fs-on{
+  display: block;
+  opacity: 0;
+  transition: all 200ms cubic-bezier(0.25, 1, 0.5, 1);
+  transform: translate3d(0, 10%, 0) scale(.95);
+}
+
+.image-fs-active{
+  opacity: 1;
+  transform: translate3d(0, 0, 0) scale(1);
+}
+
+</style>

package/src/components/ImagePreview.vue

@@ -0,0 +1,71 @@
+<template>
+	<Modal :state="isOpen" width="400" height="400" :class="$style.previewModal">
+		<div class="flex-1">
+			<div class="flex flex-row justify-end items-center p-3">
+				<a :href="imageUrl" download>
+					<svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 24 24" class="fill-text"><path class="primary" d="M15 15v-3a3 3 0 0 0-6 0v3H6a4 4 0 0 1-.99-7.88 5.5 5.5 0 0 1 10.86-.82A4.49 4.49 0 0 1 22 10.5a4.5 4.5 0 0 1-4.5 4.5H15z"/><path class="secondary" d="M11 18.59V12a1 1 0 0 1 2 0v6.59l1.3-1.3a1 1 0 0 1 1.4 1.42l-3 3a1 1 0 0 1-1.4 0l-3-3a1 1 0 0 1 1.4-1.42l1.3 1.3z"/></svg>
+				</a>
+				<button class="ml-3" @click="close">
+					<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 24 24" class="fill-text"><path class="secondary" fill-rule="evenodd" d="M15.78 14.36a1 1 0 0 1-1.42 1.42l-2.82-2.83-2.83 2.83a1 1 0 1 1-1.42-1.42l2.83-2.82L7.3 8.7a1 1 0 0 1 1.42-1.42l2.83 2.83 2.82-2.83a1 1 0 0 1 1.42 1.42l-2.83 2.83 2.83 2.82z"/></svg>
+				</button>
+			</div>
+			<div class="flex items-center justify-center">
+				<img :src="imageUrl" class="max-h-[85vh]"/>
+			</div>
+		</div>
+	</Modal>
+</template>
+
+<script>
+
+export default{
+
+	data(){
+		return {
+			isOpen: false,
+			imageUrl: null
+		}
+	},
+
+	methods: {
+
+		open(imageUrl){
+			this.imageUrl = imageUrl
+			this.isOpen = true
+			window.addEventListener('keyup', this.onKeyUp)
+		},
+
+		close(){
+			this.isOpen = false
+			this.imageUrl = null
+			window.removeEventListener('keyup', this.onKeyUp)
+		},
+
+		onKeyUp(e){
+			if(e.keyCode === 27){
+				e.preventDefault()
+				e.stopPropagation()
+				this.close()
+			}
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+.previewModal{
+	@apply !w-screen !h-screen !bg-base-300;
+	z-index: 21 !important;
+	max-width: unset !important;
+	max-height: unset !important;
+}
+
+</style>