@mixd-id/web-scaffold 0.1.2301231344 → 0.1.2301231345

package/package.json

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

package/src/components/Countdown.vue

@@ -2,22 +2,33 @@
 	<div :class="$style.comp">
 
 		<slot v-if="display >= 4 && $slots.day" name="day" :day="day"></slot>
-		<div v-else-if="display >= 4" :class="$style.lap"></div>
+		<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 v-else-if="display >= 3" :class="$style.lap">{{ hour }}</div>
+		<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 v-else-if="display >= 2" :class="$style.lap">{{ minute }}</div>
+		<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>23</div>
-			<div>21</div>
+			<div></div>
+			<div></div>
 		</div>
 
-		<button @click="tick">Tick</button>
-
 	</div>
 </template>
 
@@ -63,42 +74,67 @@ export default{
 			timer: null,
 			timeoutId: null,
 			beforeSecond: null,
-			afterSecond: null
+			afterSecond: null,
+			tick: false
 		}
 	},
 
 	mounted() {
 		this.start()
 
-		this.$refs.second.addEventListener('transitionend', this.onTransitionEnd)
+		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: {
 
-		onTransitionEnd: debounce(function (e){
-			/*console.log('onTransitionEnd', e.propertyName)
-			console.log(this.$refs.second.childNodes[1])
-			console.log(this.$refs.second.childNodes[0])*/
+		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)
-
-		},
-
-		tick(){
-			this.$refs.second.classList.add(this.$style.tick)
 		}
 
 	},
@@ -109,10 +145,32 @@ export default{
 			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.tick()
+			this.$refs.second.classList.add(this.$style.tick)
 		}
 	}
 
@@ -127,13 +185,14 @@ export default{
 }
 
 .lap{
-	@apply relative overflow-hidden w-[1.5rem];
+	@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;
-	transform: translate3d(0, -1rem, 0);
+	@apply absolute top-0 left-0 right-0 text-center;
+	transform: translate3d(0, -1.3rem, 0);
 }
 .lap>*:last-child{
 	transform: translate3d(0, 0, 0);
@@ -148,7 +207,7 @@ export default{
 	transform: translate3d(0, 0, 0);
 }
 .tick>*:last-child{
-	transform: translate3d(0, 1rem, 0);
+	transform: translate3d(0, 1.3rem, 0);
 }
 
 </style>