@mixd-id/web-scaffold 0.1.2301231343 → 0.1.2301231345

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.2301231343",
+  "version": "0.1.2301231345",
   "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" :outerClass="imageClass" />
+          <Image :src="image.imageUrl" :class="imageClass" />
         </a>
         <router-link v-if="image.target" :to="scrolling ? '' : image.target">
-          <Image :src="image.imageUrl" :outerClass="imageClass"/>
+          <Image :src="image.imageUrl" :class="imageClass"/>
         </router-link>
-				<Image v-else :src="image.imageUrl" :outerClass="imageClass" />
+				<Image v-else :src="image.imageUrl" :class="imageClass" />
       </span>
 			<div v-else :class="imageClass" class="bg-gray-200 animate-pulse"></div>
     </div>

package/src/components/Countdown.vue

@@ -0,0 +1,213 @@
+<template>
+	<div :class="$style.comp">
+
+		<slot v-if="display >= 4 && $slots.day" name="day" :day="day"></slot>
+		<div ref="day" v-else-if="display >= 4" :class="$style.lap">
+			<div></div>
+			<div></div>
+		</div>
+
+		<slot v-if="display >= 3 && $slots.hour" name="hour" :hour="hour"></slot>
+		<div ref="hour" v-else-if="display >= 3" :class="$style.lap">
+			<div></div>
+			<div></div>
+		</div>
+
+		<div>:</div>
+
+		<slot v-if="display >= 2 && $slots.minute" name="minute" :minute="minute"></slot>
+		<div ref="minute" v-else-if="display >= 2" :class="$style.lap">
+			<div></div>
+			<div></div>
+		</div>
+
+		<div>:</div>
+
+		<slot v-if="display >= 1 && $slots.second" name="second" :second="second"></slot>
+		<div ref="second" v-else-if="display >= 1" :class="$style.lap">
+			<div></div>
+			<div></div>
+		</div>
+
+	</div>
+</template>
+
+<script>
+
+import debounce from "lodash/debounce";
+
+export default{
+
+	props: {
+
+		display: {
+			type: [ String, Number ], // default: 3
+			default: 3
+		},
+
+		value: [ String, Number ] // value in second
+
+	},
+
+	computed:{
+
+		day(){
+			return Math.floor(this.timer / 86400).toString().padStart(2, '0')
+		},
+
+		hour(){
+			return (Math.floor(this.timer / 3600) % 24).toString().padStart(2, '0')
+		},
+
+		minute(){
+			return (Math.floor(this.timer / 60) % 60).toString().padStart(2, '0')
+		},
+
+		second(){
+			return (this.timer % 60).toString().padStart(2, '0')
+		}
+
+	},
+
+	data(){
+		return {
+			timer: null,
+			timeoutId: null,
+			beforeSecond: null,
+			afterSecond: null,
+			tick: false
+		}
+	},
+
+	mounted() {
+		this.start()
+
+		if(this.$refs.second) this.$refs.second.addEventListener('transitionend', this.onSecondEnd)
+		if(this.$refs.minute) this.$refs.minute.addEventListener('transitionend', this.onMinuteEnd)
+		if(this.$refs.hour) this.$refs.hour.addEventListener('transitionend', this.onHourEnd)
+		if(this.$refs.day) this.$refs.day.addEventListener('transitionend', this.onDayEnd)
+	},
+
+	methods: {
+
+		onSecondEnd: debounce(function (e){
+			this.$refs.second.insertBefore(this.$refs.second.childNodes[1], this.$refs.second.childNodes[0])
+			this.$refs.second.classList.remove(this.$style.tick)
+			this.$refs.second.childNodes[0].innerHTML = ''
+		}, 100),
+
+		onMinuteEnd: debounce(function (e){
+			this.$refs.minute.insertBefore(this.$refs.minute.childNodes[1], this.$refs.minute.childNodes[0])
+			this.$refs.minute.classList.remove(this.$style.tick)
+			this.$refs.minute.childNodes[0].innerHTML = ''
+		}, 100),
+
+		onHourEnd: debounce(function (e){
+			this.$refs.hour.insertBefore(this.$refs.hour.childNodes[1], this.$refs.hour.childNodes[0])
+			this.$refs.hour.classList.remove(this.$style.tick)
+			this.$refs.hour.childNodes[0].innerHTML = ''
+		}, 100),
+
+		onDayEnd: debounce(function (e){
+			this.$refs.day.insertBefore(this.$refs.day.childNodes[1], this.$refs.day.childNodes[0])
+			this.$refs.day.classList.remove(this.$style.tick)
+			this.$refs.day.childNodes[0].innerHTML = ''
+		}, 100),
+
+		setInitial(){
+			if(this.$refs.day) this.$refs.day.lastElementChild.innerHTML = '1 hari'
+			if(this.$refs.hour) this.$refs.hour.lastElementChild.innerHTML =  (Math.floor(this.timer / 3600) % 24).toString().padStart(2, '0')
+			if(this.$refs.minute) this.$refs.minute.lastElementChild.innerHTML = (Math.floor(this.timer / 60) % 60).toString().padStart(2, '0')
+			if(this.$refs.second) this.$refs.second.lastElementChild.innerHTML = (this.timer % 60).toString().padStart(2, '0')
+		},
+
+		start(){
+
+			this.timer = this.value
+
+			this.setInitial()
+
+			this.timeoutId = window.setInterval(() => {
+				this.timer--
+				this.tick = true
+
+				if(this.timer <= 0){
+					window.clearTimeout(this.timeoutId)
+				}
+			}, 1000)
+		}
+
+	},
+
+	watch: {
+
+		value(to){
+			this.start()
+		},
+
+		day(to, from){
+			if(!this.tick || !this.$refs.day) return
+			this.$refs.day.firstElementChild.innerHTML = to > 0 ? to + ' hari' : ''
+			this.$refs.day.lastElementChild.innerHTML = from + ' hari'
+			this.$refs.day.classList.add(this.$style.tick)
+		},
+
+		hour(to, from){
+			if(!this.tick) return
+			this.$refs.hour.firstElementChild.innerHTML = to
+			this.$refs.hour.lastElementChild.innerHTML = from
+			this.$refs.hour.classList.add(this.$style.tick)
+		},
+
+		minute(to, from){
+			if(!this.tick) return
+			this.$refs.minute.firstElementChild.innerHTML = to
+			this.$refs.minute.lastElementChild.innerHTML = from
+			this.$refs.minute.classList.add(this.$style.tick)
+		},
+
+		second(to, from){
+			if(!this.tick) return
+			this.$refs.second.firstElementChild.innerHTML = to
+			this.$refs.second.lastElementChild.innerHTML = from
+			this.$refs.second.classList.add(this.$style.tick)
+		}
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+	@apply flex flex-row gap-2;
+}
+
+.lap{
+	@apply relative overflow-hidden bg-gray-200 min-w-[1.8rem] rounded-lg text-center;
+}
+.lap>*{
+	@apply whitespace-nowrap font-bold;
+}
+.lap>*:first-child{
+	@apply absolute top-0 left-0 right-0 text-center;
+	transform: translate3d(0, -1.3rem, 0);
+}
+.lap>*:last-child{
+	transform: translate3d(0, 0, 0);
+}
+
+.tick{
+}
+.tick>*{
+	transition: transform 300ms ease;
+}
+.tick>*:first-child{
+	transform: translate3d(0, 0, 0);
+}
+.tick>*:last-child{
+	transform: translate3d(0, 1.3rem, 0);
+}
+
+</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/ListPage1.vue

@@ -394,7 +394,7 @@ export default{
 
 		onHooks(module, event, items){
 
-			console.log('onHooks', module, event, items)
+			//console.log('onHooks', module, event, items)
 
 			if(!Array.isArray(items)) return
 			items = items.filter((_) => _).map((_) => {

package/src/index.js

@@ -156,6 +156,7 @@ export default{
     app.component('ChatTyping', defineAsyncComponent(() => import("./components/ChatTyping.vue")))
     app.component('Checkbox', defineAsyncComponent(() => import("./components/Checkbox.vue")))
     app.component('CopyToClipboard', defineAsyncComponent(() => import("./components/CopyToClipboard.vue")))
+    app.component('Countdown', defineAsyncComponent(() => import("./components/Countdown.vue")))
     app.component('Dropdown', defineAsyncComponent(() => import("./components/Dropdown.vue")))
     app.component('Datepicker', defineAsyncComponent(() => import("./components/Datepicker.vue")))
     app.component('ErrorText', defineAsyncComponent(() => import("./components/ErrorText.vue")))
@@ -164,6 +165,7 @@ export default{
     app.component('Ahref', defineAsyncComponent(() => import("./components/Ahref.vue")))
     app.component('Switch', defineAsyncComponent(() => import("./components/Switch.vue")))
     app.component('Image', defineAsyncComponent(() => import("./components/Image.vue")))
+    app.component('Image360', defineAsyncComponent(() => import("./components/Image360.vue")))
     app.component('ImagePreview', defineAsyncComponent(() => import("./components/ImagePreview.vue")))
     app.component('ImageFullScreen', defineAsyncComponent(() => import("./components/ImageFullScreen.vue")))
     app.component('ImportModal', defineAsyncComponent(() => import("./components/ImportModal.vue")))