<script setup lang='ts'>
import { ref } from 'vue'
interface UseCounterOptions {
min?: number
max?: number
}
/**
* Implement the composable function
* Make sure the function works correctly
*/
function useCounter(initialValue = 0, options: UseCounterOptions = {}) {
const count = ref(initialValue)
const { min, max } = options
const inc = () => {
if (max !== null && max !== undefined && count.value === max) {
count.value = max
return
}
count.value++
}
const dec = () => {
if (min !== null && min !== undefined && count.value === min) {
count.value = min
return
}
count.value--
}
const reset = () => {
count.value = initialValue
}
return {
count, inc, dec, reset
}
}
const { count, inc, dec, reset } = useCounter(0, { min: 0, max: 10 })
</script>
<template>
<p>Count: {{ count }}</p>
<button @click="inc">
inc
</button>
<button @click="dec">
dec
</button>
<button @click="reset">
reset
</button>
</template>
