chore: make demo use net script setup syntax

Author: riderx

demo/App.vue

@@ -25,22 +25,14 @@
   </div>
 </template>
 
-<script>
-import { defineComponent } from 'vue'
+<script setup>
 import UseTimeDemo from './components/UseTimeDemo.vue'
 import UseTimerDemo from './components/UseTimerDemo.vue'
 import UseTimerWaitStartDemo from './components/UseTimerWaitStartDemo.vue'
 import UseStopwatchDemo from './components/UseStopwatchDemo.vue'
 
-export default defineComponent({
-  name: 'App',
-  components: { UseTimerDemo, UseTimerWaitStartDemo, UseStopwatchDemo, UseTimeDemo },
-  data() {
-    return {
-      time: new Date().setSeconds(new Date().getSeconds() + 600)
-    }
-  },
-})
+const time = new Date().setSeconds(new Date().getSeconds() + 600)
+
 </script>
 <style >
   html, body {

demo/components/UseStopwatchDemo.vue

@@ -8,20 +8,10 @@
     </div>
 </template>
 
-<script>
-import { defineComponent } from 'vue'
+<script setup>
 import Button from "./button.vue"
 import Timer from "./timer.vue"
 import { useStopwatch } from '../../src/index';
 
-export default defineComponent({
-  name: 'UseStopwatchDemo',
-  components: { Button, Timer },
-  setup() {
-    const stopwatch = useStopwatch();
-    return {
-      stopwatch
-    }
-  },
-})
+const stopwatch = useStopwatch();
 </script>

demo/components/UseTimeDemo.vue

@@ -7,19 +7,10 @@
     </div>
 </template>
 
-<script>
-import { defineComponent } from 'vue'
+<script setup>
 import { useTime } from '../../src/index';
 import Timer from "./timer.vue"
 
-export default defineComponent({
-  name: 'UseTimeDemo',
-  components: { Timer },
-  setup() {
-    const time = useTime()
-    return {
-      time
-    }
-  },
-})
+const time = useTime()
+
 </script>

demo/components/UseTimerDemo.vue

@@ -14,34 +14,23 @@
     </div>
 </template>
 
-<script>
-import { defineComponent, toRefs } from 'vue'
+<script setup>
+import { defineProps } from 'vue'
 import { useTimer } from '../../src/index';
 import Timer from "./timer.vue"
 import Button from "./button.vue"
 
-export default defineComponent({
-  name: 'UseTimerDemo',
-  components: { Timer, Button },
-  props: {
+const props = defineProps({
     expiryTimestamp: {
       type: Number,
       required: true
-    },
-  },
-  setup(props) {
-    const { expiryTimestamp } = props
-    const timer = useTimer(expiryTimestamp)
-    const reload = () => {
-      // Restarts to 10 minutes timer
-      const time = new Date();
-      time.setSeconds(time.getSeconds() + 600);
-      this.timer.restart(time);
     }
-    return {
-      timer,
-      reload
-    }
-  },
-})
+});
+const timer = useTimer(props.expiryTimestamp)
+const reload = () => {
+  // Restarts to 10 minutes timer
+  const time = new Date();
+  time.setSeconds(time.getSeconds() + 600);
+  this.timer.restart(time);
+}
 </script>

demo/components/UseTimerWaitStartDemo.vue

@@ -14,34 +14,24 @@
     </div>
 </template>
 
-<script>
-import { defineComponent, toRefs } from 'vue'
+<script setup>
+import { defineProps } from 'vue'
 import { useTimer } from '../../src/index';
 import Timer from "./timer.vue"
 import Button from "./button.vue"
 
-export default defineComponent({
-  name: 'UseTimerDWaitStartDemo',
-  components: { Timer, Button },
-  props: {
+const props = defineProps({
     expiryTimestamp: {
       type: Number,
       required: true
-    },
-  },
-  setup(props) {
-    const { expiryTimestamp } = props
-    const timer = useTimer(expiryTimestamp, false)
-    const reload = () => {
-      // Restarts to 10 minutes timer
-      const time = new Date();
-      time.setSeconds(time.getSeconds() + 600);
-      timer.restart(time);
     }
-    return {
-      timer,
-      reload
-    }
-  },
-})
+});
+
+const timer = useTimer(props.expiryTimestamp, false)
+const reload = () => {
+  // Restarts to 10 minutes timer
+  const time = new Date();
+  time.setSeconds(time.getSeconds() + 600);
+  timer.restart(time);
+}
 </script>

demo/components/button.vue

@@ -4,12 +4,8 @@
     </button>
 </template>
 
-<script>
-import { defineComponent } from 'vue'
+<script setup>
 
-export default defineComponent({
-    name: 'Button',
-})
 </script>
 <style scoped>
     .button {

demo/components/digit.vue

@@ -12,30 +12,22 @@
     </div>
 </template>
 
-<script>
-import { defineComponent } from 'vue'
+<script setup>
+import { defineProps, computed} from 'vue'
 
-export default defineComponent({
-    name: 'Digit',
-    props: {
-        digit: {
-            type: Object,
-            required: true
-        },
-        title: {
-            type: String,
-            required: false
-        }
+const props = defineProps({
+    digit: {
+        type: Number,
+        require: true,
     },
-    computed: {
-        leftDigit() {
-            return this.digit.value >= 10 ? this.digit.value.toString()[0] : '0'
-        },
-        rightDigit() {
-            return this.digit.value >= 10 ? this.digit.value.toString()[1] : this.digit.value.toString()
-        },
-    },
-})
+    title: {
+        type: String,
+        require: false,
+    }
+});
+const leftDigit = computed(() => props.digit.value >= 10 ? props.digit.value.toString()[0] : '0')
+const rightDigit = computed(() => props.digit.value >= 10 ? props.digit.value.toString()[1] : props.digit.value.toString())
+
 </script>
 <style scoped>
     .container {

demo/components/timer.vue

@@ -10,14 +10,11 @@
   </div>
 </template>
 
-<script>
-import { defineComponent } from 'vue'
+<script setup lang="ts">
+import { defineProps } from 'vue'
 import Digit from './digit.vue'
 
-export default defineComponent({
-  name: 'Timer',
-  components: { Digit },
-  props: {
+defineProps({
     days: {
       type: Object,
       required: false
@@ -34,8 +31,8 @@ export default defineComponent({
       type: Object,
       required: true
     },
-  },
-})
+});
+
 </script>
 <style scoped>
   .timer-container {