Skip to content

Commit 9ff39e7

Browse files
committed
chore: make demo use net script setup syntax
1 parent 9906d83 commit 9ff39e7

File tree

8 files changed

+51
-114
lines changed

8 files changed

+51
-114
lines changed

demo/App.vue

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -25,22 +25,14 @@
2525
</div>
2626
</template>
2727

28-
<script>
29-
import { defineComponent } from 'vue'
28+
<script setup>
3029
import UseTimeDemo from './components/UseTimeDemo.vue'
3130
import UseTimerDemo from './components/UseTimerDemo.vue'
3231
import UseTimerWaitStartDemo from './components/UseTimerWaitStartDemo.vue'
3332
import UseStopwatchDemo from './components/UseStopwatchDemo.vue'
3433
35-
export default defineComponent({
36-
name: 'App',
37-
components: { UseTimerDemo, UseTimerWaitStartDemo, UseStopwatchDemo, UseTimeDemo },
38-
data() {
39-
return {
40-
time: new Date().setSeconds(new Date().getSeconds() + 600)
41-
}
42-
},
43-
})
34+
const time = new Date().setSeconds(new Date().getSeconds() + 600)
35+
4436
</script>
4537
<style >
4638
html, body {

demo/components/UseStopwatchDemo.vue

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,10 @@
88
</div>
99
</template>
1010

11-
<script>
12-
import { defineComponent } from 'vue'
11+
<script setup>
1312
import Button from "./button.vue"
1413
import Timer from "./timer.vue"
1514
import { useStopwatch } from '../../src/index';
1615
17-
export default defineComponent({
18-
name: 'UseStopwatchDemo',
19-
components: { Button, Timer },
20-
setup() {
21-
const stopwatch = useStopwatch();
22-
return {
23-
stopwatch
24-
}
25-
},
26-
})
16+
const stopwatch = useStopwatch();
2717
</script>

demo/components/UseTimeDemo.vue

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,10 @@
77
</div>
88
</template>
99

10-
<script>
11-
import { defineComponent } from 'vue'
10+
<script setup>
1211
import { useTime } from '../../src/index';
1312
import Timer from "./timer.vue"
1413
15-
export default defineComponent({
16-
name: 'UseTimeDemo',
17-
components: { Timer },
18-
setup() {
19-
const time = useTime()
20-
return {
21-
time
22-
}
23-
},
24-
})
14+
const time = useTime()
15+
2516
</script>

demo/components/UseTimerDemo.vue

Lines changed: 11 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -14,34 +14,23 @@
1414
</div>
1515
</template>
1616

17-
<script>
18-
import { defineComponent, toRefs } from 'vue'
17+
<script setup>
18+
import { defineProps } from 'vue'
1919
import { useTimer } from '../../src/index';
2020
import Timer from "./timer.vue"
2121
import Button from "./button.vue"
2222
23-
export default defineComponent({
24-
name: 'UseTimerDemo',
25-
components: { Timer, Button },
26-
props: {
23+
const props = defineProps({
2724
expiryTimestamp: {
2825
type: Number,
2926
required: true
30-
},
31-
},
32-
setup(props) {
33-
const { expiryTimestamp } = props
34-
const timer = useTimer(expiryTimestamp)
35-
const reload = () => {
36-
// Restarts to 10 minutes timer
37-
const time = new Date();
38-
time.setSeconds(time.getSeconds() + 600);
39-
this.timer.restart(time);
4027
}
41-
return {
42-
timer,
43-
reload
44-
}
45-
},
46-
})
28+
});
29+
const timer = useTimer(props.expiryTimestamp)
30+
const reload = () => {
31+
// Restarts to 10 minutes timer
32+
const time = new Date();
33+
time.setSeconds(time.getSeconds() + 600);
34+
this.timer.restart(time);
35+
}
4736
</script>

demo/components/UseTimerWaitStartDemo.vue

Lines changed: 12 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -14,34 +14,24 @@
1414
</div>
1515
</template>
1616

17-
<script>
18-
import { defineComponent, toRefs } from 'vue'
17+
<script setup>
18+
import { defineProps } from 'vue'
1919
import { useTimer } from '../../src/index';
2020
import Timer from "./timer.vue"
2121
import Button from "./button.vue"
2222
23-
export default defineComponent({
24-
name: 'UseTimerDWaitStartDemo',
25-
components: { Timer, Button },
26-
props: {
23+
const props = defineProps({
2724
expiryTimestamp: {
2825
type: Number,
2926
required: true
30-
},
31-
},
32-
setup(props) {
33-
const { expiryTimestamp } = props
34-
const timer = useTimer(expiryTimestamp, false)
35-
const reload = () => {
36-
// Restarts to 10 minutes timer
37-
const time = new Date();
38-
time.setSeconds(time.getSeconds() + 600);
39-
timer.restart(time);
4027
}
41-
return {
42-
timer,
43-
reload
44-
}
45-
},
46-
})
28+
});
29+
30+
const timer = useTimer(props.expiryTimestamp, false)
31+
const reload = () => {
32+
// Restarts to 10 minutes timer
33+
const time = new Date();
34+
time.setSeconds(time.getSeconds() + 600);
35+
timer.restart(time);
36+
}
4737
</script>

demo/components/button.vue

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,8 @@
44
</button>
55
</template>
66

7-
<script>
8-
import { defineComponent } from 'vue'
7+
<script setup>
98
10-
export default defineComponent({
11-
name: 'Button',
12-
})
139
</script>
1410
<style scoped>
1511
.button {

demo/components/digit.vue

Lines changed: 14 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -12,30 +12,22 @@
1212
</div>
1313
</template>
1414

15-
<script>
16-
import { defineComponent } from 'vue'
15+
<script setup>
16+
import { defineProps, computed} from 'vue'
1717
18-
export default defineComponent({
19-
name: 'Digit',
20-
props: {
21-
digit: {
22-
type: Object,
23-
required: true
24-
},
25-
title: {
26-
type: String,
27-
required: false
28-
}
18+
const props = defineProps({
19+
digit: {
20+
type: Number,
21+
require: true,
2922
},
30-
computed: {
31-
leftDigit() {
32-
return this.digit.value >= 10 ? this.digit.value.toString()[0] : '0'
33-
},
34-
rightDigit() {
35-
return this.digit.value >= 10 ? this.digit.value.toString()[1] : this.digit.value.toString()
36-
},
37-
},
38-
})
23+
title: {
24+
type: String,
25+
require: false,
26+
}
27+
});
28+
const leftDigit = computed(() => props.digit.value >= 10 ? props.digit.value.toString()[0] : '0')
29+
const rightDigit = computed(() => props.digit.value >= 10 ? props.digit.value.toString()[1] : props.digit.value.toString())
30+
3931
</script>
4032
<style scoped>
4133
.container {

demo/components/timer.vue

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,11 @@
1010
</div>
1111
</template>
1212

13-
<script>
14-
import { defineComponent } from 'vue'
13+
<script setup lang="ts">
14+
import { defineProps } from 'vue'
1515
import Digit from './digit.vue'
1616
17-
export default defineComponent({
18-
name: 'Timer',
19-
components: { Digit },
20-
props: {
17+
defineProps({
2118
days: {
2219
type: Object,
2320
required: false
@@ -34,8 +31,8 @@ export default defineComponent({
3431
type: Object,
3532
required: true
3633
},
37-
},
38-
})
34+
});
35+
3936
</script>
4037
<style scoped>
4138
.timer-container {

0 commit comments

Comments
 (0)