@mixd-id/web-scaffold 0.1.230406038 → 0.1.230406039

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/components/Countdown.vue +38 -27
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@mixd-id/web-scaffold",
3
3
  "private": false,
4
- "version": "0.1.230406038",
4
+ "version": "0.1.230406039",
5
5
  "scripts": {
6
6
  "dev": "vite serve",
7
7
  "build": "vite build",
package/src/components/Countdown.vue CHANGED
@@ -6,6 +6,7 @@
6
6
  <div></div>
7
7
  <div></div>
8
8
  </div>
9
+ <div v-if="display >= 4" class="mr-2">hari</div>
9
10
 
10
11
  <slot v-if="display >= 3 && $slots.hour" name="hour" :hour="hour"></slot>
11
12
  <div ref="hour" v-else-if="display >= 3" :class="$style.lap">
@@ -34,8 +35,6 @@
34
35
 
35
36
  <script>
36
37
 
37
- import debounce from "lodash/debounce";
38
-
39
38
  export default{
40
39
 
41
40
  props: {
@@ -75,13 +74,13 @@ export default{
75
74
  timeoutId: null,
76
75
  beforeSecond: null,
77
76
  afterSecond: null,
78
- tick: false
77
+ tick: false,
78
+ state: [ 0, 0, 0, 0 ]
79
79
  }
80
80
  },
81
81
 
82
82
  mounted() {
83
83
  this.start()
84
-
85
84
  if(this.$refs.second) this.$refs.second.addEventListener('transitionend', this.onSecondEnd)
86
85
  if(this.$refs.minute) this.$refs.minute.addEventListener('transitionend', this.onMinuteEnd)
87
86
  if(this.$refs.hour) this.$refs.hour.addEventListener('transitionend', this.onHourEnd)
@@ -90,32 +89,40 @@ export default{
90
89
 
91
90
  methods: {
92
91
 
93
- onSecondEnd: debounce(function (e){
92
+ onDayEnd:function (e){
93
+ if(this.state[0] !== 1) return
94
+ this.$refs.day.insertBefore(this.$refs.day.childNodes[1], this.$refs.day.childNodes[0])
95
+ this.$refs.day.classList.remove(this.$style.tick)
96
+ this.$refs.day.childNodes[0].innerHTML = ''
97
+ this.state[0] = 0
98
+ },
99
+
100
+ onHourEnd: function (e){
101
+ if(this.state[1] !== 1) return
102
+ this.$refs.hour.insertBefore(this.$refs.hour.childNodes[1], this.$refs.hour.childNodes[0])
103
+ this.$refs.hour.classList.remove(this.$style.tick)
104
+ this.$refs.hour.childNodes[0].innerHTML = ''
105
+ this.state[1] = 0
106
+ },
107
+
108
+ onMinuteEnd: function (e){
109
+ if(this.state[2] !== 1) return
110
+ this.$refs.minute.insertBefore(this.$refs.minute.childNodes[1], this.$refs.minute.childNodes[0])
111
+ this.$refs.minute.classList.remove(this.$style.tick)
112
+ this.$refs.minute.childNodes[0].innerHTML = ''
113
+ this.state[2] = 0
114
+ },
115
+
116
+ onSecondEnd: function (e){
117
+ if(this.state[3] !== 1) return
94
118
  this.$refs.second.insertBefore(this.$refs.second.childNodes[1], this.$refs.second.childNodes[0])
95
119
  this.$refs.second.classList.remove(this.$style.tick)
96
120
  this.$refs.second.childNodes[0].innerHTML = ''
97
- }, 100),
98
-
99
- onMinuteEnd: debounce(function (e){
100
- this.$refs.minute.insertBefore(this.$refs.minute.childNodes[1], this.$refs.minute.childNodes[0])
101
- this.$refs.minute.classList.remove(this.$style.tick)
102
- this.$refs.minute.childNodes[0].innerHTML = ''
103
- }, 100),
104
-
105
- onHourEnd: debounce(function (e){
106
- this.$refs.hour.insertBefore(this.$refs.hour.childNodes[1], this.$refs.hour.childNodes[0])
107
- this.$refs.hour.classList.remove(this.$style.tick)
108
- this.$refs.hour.childNodes[0].innerHTML = ''
109
- }, 100),
110
-
111
- onDayEnd: debounce(function (e){
112
- this.$refs.day.insertBefore(this.$refs.day.childNodes[1], this.$refs.day.childNodes[0])
113
- this.$refs.day.classList.remove(this.$style.tick)
114
- this.$refs.day.childNodes[0].innerHTML = ''
115
- }, 100),
121
+ this.state[3] = 0
122
+ },
116
123
 
117
124
  setInitial(){
118
- if(this.$refs.day) this.$refs.day.lastElementChild.innerHTML = '1 hari'
125
+ if(this.$refs.day) this.$refs.day.lastElementChild.innerHTML = '1'
119
126
  if(this.$refs.hour) this.$refs.hour.lastElementChild.innerHTML = (Math.floor(this.timer / 3600) % 24).toString().padStart(2, '0')
120
127
  if(this.$refs.minute) this.$refs.minute.lastElementChild.innerHTML = (Math.floor(this.timer / 60) % 60).toString().padStart(2, '0')
121
128
  if(this.$refs.second) this.$refs.second.lastElementChild.innerHTML = (this.timer % 60).toString().padStart(2, '0')
@@ -141,7 +148,7 @@ export default{
141
148
 
142
149
  watch: {
143
150
 
144
- value(to){
151
+ value(){
145
152
  this.start()
146
153
  },
147
154
 
@@ -150,6 +157,7 @@ export default{
150
157
  this.$refs.day.firstElementChild.innerHTML = to > 0 ? to + ' hari' : ''
151
158
  this.$refs.day.lastElementChild.innerHTML = from + ' hari'
152
159
  this.$refs.day.classList.add(this.$style.tick)
160
+ this.state[0] = 1
153
161
  },
154
162
 
155
163
  hour(to, from){
@@ -157,6 +165,7 @@ export default{
157
165
  this.$refs.hour.firstElementChild.innerHTML = to
158
166
  this.$refs.hour.lastElementChild.innerHTML = from
159
167
  this.$refs.hour.classList.add(this.$style.tick)
168
+ this.state[1] = 1
160
169
  },
161
170
 
162
171
  minute(to, from){
@@ -164,6 +173,7 @@ export default{
164
173
  this.$refs.minute.firstElementChild.innerHTML = to
165
174
  this.$refs.minute.lastElementChild.innerHTML = from
166
175
  this.$refs.minute.classList.add(this.$style.tick)
176
+ this.state[2] = 1
167
177
  },
168
178
 
169
179
  second(to, from){
@@ -171,6 +181,7 @@ export default{
171
181
  this.$refs.second.firstElementChild.innerHTML = to
172
182
  this.$refs.second.lastElementChild.innerHTML = from
173
183
  this.$refs.second.classList.add(this.$style.tick)
184
+ this.state[3] = 1
174
185
  }
175
186
  }
176
187
 
@@ -210,4 +221,4 @@ export default{
210
221
  transform: translate3d(0, 1.3rem, 0);
211
222
  }
212
223
 
213
- </style>
224
+ </style>