fix(NcActionRadio): change modelValue to behave like NcCheckboxRadioSwitch

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
This commit is contained in:
Maksim Sukharev 2024-11-25 11:50:37 +01:00
Родитель 0d9efa628e
Коммит 1c50065e63
1 изменённых файлов: 29 добавлений и 18 удалений

Просмотреть файл

@ -10,27 +10,34 @@ So that only one of each name set can be selected at the same time.
```vue
<template>
<NcActions>
<NcActionRadio @change="alert('(un)checked !')" name="uniqueId">First choice</NcActionRadio>
<NcActionRadio value="second" v-model="radioValue" name="uniqueId" @change="alert('(un)checked !')">Second choice (v-model)</NcActionRadio>
<NcActionRadio :model-value="true" name="uniqueId" @change="alert('(un)checked !')">Third choice (checked)</NcActionRadio>
<NcActionRadio :disabled="true" name="uniqueId" @change="alert('(un)checked !')">Fourth choice (disabled)</NcActionRadio>
</NcActions>
<div>
<NcActions>
<NcActionRadio v-for="option in radioOptions"
:key="option.value"
:value="option.value"
:disabled="option.disabled"
name="uniqueId"
v-model="radioValue">
{{ option.label }}
</NcActionRadio>
</NcActions>
<span>Selected value: {{ radioValue }}</span>
</div>
</template>
<script>
export default {
data() {
return {
radioValue: false,
radioOptions: [
{ value: 'first', label: 'First choise', disabled: false },
{ value: 'second', label: 'Second choise', disabled: false },
{ value: 'third', label: 'Third choise', disabled: false },
{ value: 'fourth', label: 'Fourth choise (disabled)', disabled: true },
],
radioValue: 'first',
}
},
methods: {
alert(message) {
alert(message)
}
}
}
</script>
```
@ -41,8 +48,8 @@ So that only one of each name set can be selected at the same time.
<span class="action-radio" role="menuitemradio" :aria-checked="ariaChecked">
<input :id="id"
ref="radio"
v-model="model"
:disabled="disabled"
:checked="checked"
:name="name"
:value="value"
:class="{ focusable: isFocusable }"
@ -100,11 +107,11 @@ export default {
},
/**
* checked state of the the radio element
* checked state of the radio element
*/
modelValue: {
type: Boolean,
default: false,
type: [String, Number],
default: '',
},
/**
@ -186,7 +193,11 @@ export default {
this.$refs.label.click()
},
onChange(event) {
this.model = this.$refs.radio.checked
if (this.checked !== undefined) {
this.model = this.$refs.radio.checked
} else {
this.model = this.value
}
/**
* Emitted when the radio state is changed