@mixd-id/web-scaffold 0.1.230406038 → 0.1.230406040

package/package.json

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

package/src/components/Countdown.vue

@@ -6,6 +6,7 @@
 			<div></div>
 			<div></div>
 		</div>
+		<div v-if="display >= 4" class="mr-2" :style="labelStyle">hari</div>
 
 		<slot v-if="display >= 3 && $slots.hour" name="hour" :hour="hour"></slot>
 		<div ref="hour" v-else-if="display >= 3" :class="$style.lap">
@@ -13,7 +14,7 @@
 			<div></div>
 		</div>
 
-		<div>:</div>
+		<div :style="labelStyle">:</div>
 
 		<slot v-if="display >= 2 && $slots.minute" name="minute" :minute="minute"></slot>
 		<div ref="minute" v-else-if="display >= 2" :class="$style.lap">
@@ -21,7 +22,7 @@
 			<div></div>
 		</div>
 
-		<div>:</div>
+		<div :style="labelStyle">:</div>
 
 		<slot v-if="display >= 1 && $slots.second" name="second" :second="second"></slot>
 		<div ref="second" v-else-if="display >= 1" :class="$style.lap">
@@ -34,8 +35,6 @@
 
 <script>
 
-import debounce from "lodash/debounce";
-
 export default{
 
 	props: {
@@ -45,7 +44,9 @@ export default{
 			default: 3
 		},
 
-		value: [ String, Number ] // value in second
+		value: [ String, Number ], // value in second,
+
+		labelStyle: Object
 
 	},
 
@@ -75,13 +76,13 @@ export default{
 			timeoutId: null,
 			beforeSecond: null,
 			afterSecond: null,
-			tick: false
+			tick: false,
+			state: [ 0, 0, 0, 0 ]
 		}
 	},
 
 	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)
@@ -90,32 +91,40 @@ export default{
 
 	methods: {
 
-		onSecondEnd: debounce(function (e){
+    onDayEnd:function (e){
+      if(this.state[0] !== 1) return
+      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 = ''
+      this.state[0] = 0
+    },
+
+    onHourEnd: function (e){
+      if(this.state[1] !== 1) return
+      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 = ''
+      this.state[1] = 0
+    },
+
+    onMinuteEnd: function (e){
+      if(this.state[2] !== 1) return
+      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 = ''
+      this.state[2] = 0
+    },
+
+		onSecondEnd: function (e){
+      if(this.state[3] !== 1) return
 			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),
+      this.state[3] = 0
+		},
 
 		setInitial(){
-			if(this.$refs.day) this.$refs.day.lastElementChild.innerHTML = '1 hari'
+			if(this.$refs.day) this.$refs.day.lastElementChild.innerHTML = '1'
 			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')
@@ -141,7 +150,7 @@ export default{
 
 	watch: {
 
-		value(to){
+		value(){
 			this.start()
 		},
 
@@ -150,6 +159,7 @@ export default{
 			this.$refs.day.firstElementChild.innerHTML = to > 0 ? to + ' hari' : ''
 			this.$refs.day.lastElementChild.innerHTML = from + ' hari'
 			this.$refs.day.classList.add(this.$style.tick)
+      this.state[0] = 1
 		},
 
 		hour(to, from){
@@ -157,6 +167,7 @@ export default{
 			this.$refs.hour.firstElementChild.innerHTML = to
 			this.$refs.hour.lastElementChild.innerHTML = from
 			this.$refs.hour.classList.add(this.$style.tick)
+      this.state[1] = 1
 		},
 
 		minute(to, from){
@@ -164,6 +175,7 @@ export default{
 			this.$refs.minute.firstElementChild.innerHTML = to
 			this.$refs.minute.lastElementChild.innerHTML = from
 			this.$refs.minute.classList.add(this.$style.tick)
+      this.state[2] = 1
 		},
 
 		second(to, from){
@@ -171,6 +183,7 @@ export default{
 			this.$refs.second.firstElementChild.innerHTML = to
 			this.$refs.second.lastElementChild.innerHTML = from
 			this.$refs.second.classList.add(this.$style.tick)
+      this.state[3] = 1
 		}
 	}
 
@@ -210,4 +223,4 @@ export default{
 	transform: translate3d(0, 1.3rem, 0);
 }
 
-</style>
+</style>