feat: defineModel and withDefaults for PercentDoneSelect
This commit is contained in:
parent
1966cc3c0e
commit
8ac0eb4aa4
@ -4,63 +4,25 @@
|
|||||||
v-model.number="percentDone"
|
v-model.number="percentDone"
|
||||||
:disabled="disabled || undefined"
|
:disabled="disabled || undefined"
|
||||||
>
|
>
|
||||||
<option value="0">
|
<option
|
||||||
0%
|
v-for="option in PERCENT_OPTIONS"
|
||||||
</option>
|
:key="option"
|
||||||
<option value="0.1">
|
:value="option"
|
||||||
10%
|
>
|
||||||
</option>
|
{{ option * 100 }}%
|
||||||
<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>
|
</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import {computed} from 'vue'
|
withDefaults(defineProps<{
|
||||||
|
disabled?: boolean
|
||||||
const props = defineProps({
|
}>(), {
|
||||||
modelValue: {
|
disabled: false,
|
||||||
default: 0,
|
|
||||||
type: Number,
|
|
||||||
},
|
|
||||||
disabled: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
})
|
})
|
||||||
|
|
||||||
const emit = defineEmits(['update:modelValue'])
|
const percentDone = defineModel<number>({ required: true })
|
||||||
|
|
||||||
const percentDone = computed({
|
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
|
||||||
get: () => props.modelValue,
|
|
||||||
set(percentDone) {
|
|
||||||
emit('update:modelValue', percentDone)
|
|
||||||
},
|
|
||||||
})
|
|
||||||
</script>
|
</script>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user