Skip to content

Commit 3177d9b

Browse files
riderxriderx
committed
feat: add demo
1 parent d822cea commit 3177d9b

17 files changed

+571
-46
lines changed

‎demo/App.vue

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<template>
2+
<div>
3+
<div class="header-bg">
4+
<div class="container">
5+
<div class="header">
6+
<h1 class="h1">vue-timer-hook</h1>
7+
<div>
8+
<iframe src="https://ghbtns.com/github-btn.html?user=riderx&repo=vue-timer-hook&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160" height="30" title="GitHub" />
9+
<iframe src="https://ghbtns.com/github-btn.html?user=riderx&repo=vue-timer-hook&type=fork&count=true&size=large" frameborder="0" scrolling="0" width="126" height="30" title="GitHub" />
10+
</div>
11+
</div>
12+
</div>
13+
</div>
14+
<div class="container">
15+
<p>
16+
Vue timer hook is a custom <a href="https://v3.vuejs.org/guide/composition-api-introduction.html" target="_blank">composition api</a> module built to handle timer, stopwatch, and time logic/state in your vue component.
17+
</p>
18+
<UseTimerDemo :expiryTimestamp="time" />
19+
<div class="separator" />
20+
<UseStopwatchDemo />
21+
<div class="separator" />
22+
<UseTimeDemo />
23+
</div>
24+
</div>
25+
</template>
26+
27+
<script>
28+
import { defineComponent } from 'vue'
29+
import UseTimeDemo from './components/UseTimeDemo.vue'
30+
import UseTimerDemo from './components/UseTimerDemo.vue'
31+
import UseStopwatchDemo from './components/UseStopwatchDemo.vue'
32+
33+
export default defineComponent({
34+
name: 'App',
35+
components: { UseTimerDemo, UseStopwatchDemo, UseTimeDemo },
36+
data() {
37+
return {
38+
time: new Date().setSeconds(new Date().getSeconds() + 600)
39+
}
40+
},
41+
})
42+
</script>
43+
<style >
44+
html, body {
45+
margin: 0;
46+
font-family: Arial;
47+
text-align: left;
48+
color: #404549;
49+
}
50+
h2 {
51+
margin-top: 20px;
52+
}
53+
</style>
54+
<style scoped>
55+
56+
.container{
57+
width: 1170px;
58+
margin-left: auto;
59+
margin-right: auto;
60+
}
61+
62+
.header-bg {
63+
background-color: #404549;
64+
}
65+
.header {
66+
display: flex;
67+
justify-content: space-between;
68+
align-items: center;
69+
}
70+
.header h1 {
71+
margin: 20px 0;
72+
}
73+
74+
.h1 {
75+
color: white;
76+
}
77+
78+
.separator {
79+
height: 0px;
80+
margin-top: 30px;
81+
border: dashed 2px #404549;
82+
}
83+
84+
</style>

‎demo/components/UseStopwatchDemo.vue

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<template>
2+
<div>
3+
<h2>UseStopwatch Demo</h2>
4+
<Timer :seconds="stopwatch.seconds" :minutes="stopwatch.minutes" :hours="stopwatch.hours" />
5+
<Button @click="stopwatch.start()">Start</Button>
6+
<Button @click="stopwatch.pause()">Pause</Button>
7+
<Button @click="stopwatch.reset()">Reset</Button>
8+
</div>
9+
</template>
10+
11+
<script>
12+
import { defineComponent } from 'vue'
13+
import Button from "./button.vue"
14+
import Timer from "./timer.vue"
15+
import { useStopwatch } from '../../src/index';
16+
17+
export default defineComponent({
18+
name: 'UseStopwatchDemo',
19+
components: { Button, Timer },
20+
setup() {
21+
const stopwatch = useStopwatch();
22+
return {
23+
stopwatch
24+
}
25+
},
26+
})
27+
</script>

‎demo/components/UseTimeDemo.vue

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template>
2+
<div>
3+
<h2>UseTime Demo</h2>
4+
<div>
5+
<Timer :seconds="time.seconds" :minutes="time.minutes" :hours="time.hours" />
6+
</div>
7+
</div>
8+
</template>
9+
10+
<script>
11+
import { defineComponent } from 'vue'
12+
import { useTime } from '../../src/index';
13+
import Timer from "./timer.vue"
14+
15+
export default defineComponent({
16+
name: 'UseTimeDemo',
17+
components: { Timer },
18+
setup() {
19+
const time = useTime()
20+
return {
21+
time
22+
}
23+
},
24+
})
25+
</script>

‎demo/components/UseTimerDemo.vue

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<template>
2+
<div>
3+
<h2>UseTimer Demo</h2>
4+
<Timer :seconds="timer.seconds" :minutes="timer.minutes" :hours="timer.hours" :days="timer.days" />
5+
<Button type="button" @click="timer.start()">Start</Button>
6+
<Button type="button" @click="timer.pause()">Pause</Button>
7+
<Button type="button" @click="timer.resume()">Resume</Button>
8+
<Button
9+
type="button"
10+
@click="reload()"
11+
>
12+
Restart
13+
</Button>
14+
</div>
15+
</template>
16+
17+
<script>
18+
import { defineComponent, toRefs } from 'vue'
19+
import { useTimer } from '../../src/index';
20+
import Timer from "./timer.vue"
21+
import Button from "./button.vue"
22+
23+
export default defineComponent({
24+
name: 'UseTimerDemo',
25+
components: { Timer, Button },
26+
props: {
27+
expiryTimestamp: {
28+
type: Number,
29+
required: true
30+
},
31+
},
32+
methods: {
33+
reload() {
34+
// Restarts to 10 minutes timer
35+
const time = new Date();
36+
time.setSeconds(time.getSeconds() + 600);
37+
this.timer.restart(time);
38+
}
39+
},
40+
setup(props) {
41+
const { expiryTimestamp } = props
42+
const timer = useTimer(expiryTimestamp)
43+
return {
44+
timer
45+
}
46+
},
47+
})
48+
</script>

‎demo/components/button.vue

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<button class="button">
3+
<slot></slot>
4+
</button>
5+
</template>
6+
7+
<script>
8+
import { defineComponent } from 'vue'
9+
10+
export default defineComponent({
11+
name: 'Button',
12+
})
13+
</script>
14+
<style scoped>
15+
.button {
16+
border-radius: 5;
17+
margin: 0 10px 0 0px;
18+
outline: none;
19+
border: none;
20+
padding: 6px 14px;
21+
color: #404549;
22+
border-radius: 3px;
23+
border: solid 1px #404549;
24+
}
25+
.button:hover {
26+
box-shadow: 0 0 11px rgba(33,33,33,.2);
27+
cursor: pointer;
28+
}
29+
</style>

‎demo/components/digit.vue

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<template>
2+
<div class="container">
3+
<span class="title">{{ title }}</span>
4+
<div class="digital-container">
5+
<span class="single-digit">
6+
{{ leftDigit }}
7+
</span>
8+
<span class="single-digit">
9+
{{ rightDigit }}
10+
</span>
11+
</div>
12+
</div>
13+
</template>
14+
15+
<script>
16+
import { defineComponent } from 'vue'
17+
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+
}
29+
},
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+
})
39+
</script>
40+
<style scoped>
41+
.container {
42+
display: flex;
43+
flex-direction: column;
44+
align-items: center;
45+
margin: 0 5px;
46+
}
47+
.container:first-child {
48+
margin-left: 0;
49+
}
50+
.title {
51+
font-size: 12px;
52+
margin-bottom: 5px;
53+
}
54+
.digital-container {
55+
display: flex;
56+
flex-direction: row;
57+
padding: 0;
58+
}
59+
.single-digit {
60+
position: relative;
61+
display: flex;
62+
flex: 0 1 25%;
63+
font-size: 30px;
64+
background-color: #404549;
65+
border-radius: 5px;
66+
padding: 10px 12px;
67+
color: white;
68+
}
69+
.single-digit:first-child {
70+
margin-right: 2px;
71+
}
72+
.single-digit:after {
73+
position: absolute;
74+
left: 0px;
75+
right: 0px;
76+
top: 50%;
77+
bottom: 50%;
78+
content: "";
79+
width: '100%';
80+
height: 2px;
81+
background-color: #232323;
82+
opacity: 0.4;
83+
}
84+
</style>

‎demo/components/timer.vue

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<template>
2+
<div class="timer-container">
3+
<Digit v-if="days" :digit="days" title="DAYS" />
4+
<span class="separator-container" v-if="days"><span class="separator" /><span /></span>
5+
<Digit :digit="hours" title="HOURS" />
6+
<span class="separator-container"><span class="separator" /><span /></span>
7+
<Digit :digit="minutes" title="MINUTES" />
8+
<span class="separator-container"><span class="separator" /><span /></span>
9+
<Digit :digit="seconds" title="SECONDS" />
10+
</div>
11+
</template>
12+
13+
<script>
14+
import { defineComponent } from 'vue'
15+
import Digit from './digit.vue'
16+
17+
export default defineComponent({
18+
name: 'Timer',
19+
components: { Digit },
20+
props: {
21+
days: {
22+
type: Object,
23+
required: false
24+
},
25+
hours: {
26+
type: Object,
27+
required: true
28+
},
29+
minutes: {
30+
type: Object,
31+
required: true
32+
},
33+
seconds: {
34+
type: Object,
35+
required: true
36+
},
37+
},
38+
})
39+
</script>
40+
<style scoped>
41+
.timer-container {
42+
display: flex;
43+
flex-direction: row;
44+
align-items: center;
45+
margin-bottom: 30px;
46+
}
47+
.separator-container {
48+
display: flex;
49+
flex-direction: column;
50+
align-items: center;
51+
align-self: flex-end;
52+
margin: 0 0 10px 0px;
53+
}
54+
.separator {
55+
display: inline-block;
56+
width: 6px;
57+
height: 6px;
58+
background-color: #404549;
59+
border-radius: 6px;
60+
margin: 5px 0px;
61+
}
62+
63+
</style>

‎demo/index.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<title>Testing Vue hook timer</title>
8+
<script src="https://polyfill.io/v3/polyfill.min.js?features=default%2Ces2015"></script>
9+
10+
<style>
11+
12+
</style>
13+
</head>
14+
15+
<body>
16+
<div id="app"></div>
17+
<script type="module" src="/main.ts"></script>
18+
</body>
19+
</html>

0 commit comments

Comments
 (0)