1
0

feat: defineModel and withDefaults for PercentDoneSelect

This commit is contained in:
Dominik Pschenitschni 2024-07-06 12:26:27 +02:00 committed by konrad
parent 1966cc3c0e
commit 8ac0eb4aa4

View File

@ -4,63 +4,25 @@
v-model.number="percentDone"
:disabled="disabled || undefined"
>
<option value="0">
0%
</option>
<option value="0.1">
10%
</option>
<option value="0.2">
20%
</option>
<option value="0.3">
30%
</option>
<option value="0.4">
40%
</option>
<option value="0.5">
50%
</option>
<option value="0.6">
60%
</option>
<option value="0.7">
70%
</option>
<option value="0.8">
80%
</option>
<option value="0.9">
90%
</option>
<option value="1">
100%
<option
v-for="option in PERCENT_OPTIONS"
:key="option"
:value="option"
>
{{ option * 100 }}%
</option>
</select>
</div>
</template>
<script setup lang="ts">
import {computed} from 'vue'
const props = defineProps({
modelValue: {
default: 0,
type: Number,
},
disabled: {
type: Boolean,
default: false,
},
withDefaults(defineProps<{
disabled?: boolean
}>(), {
disabled: false,
})
const emit = defineEmits(['update:modelValue'])
const percentDone = defineModel<number>({ required: true })
const percentDone = computed({
get: () => props.modelValue,
set(percentDone) {
emit('update:modelValue', percentDone)
},
})
const PERCENT_OPTIONS = [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1] as const
</script>