Skip to content

Commit 1a0682a

Browse files
mrholekmrholek
committed
feat(CFormCheck): add support for the true-value and false-value props, and enhance the handling of v-model 
1 parent 9b2ff70 commit 1a0682a

File tree

2 files changed

+74
-23
lines changed

2 files changed

+74
-23
lines changed

‎packages/coreui-vue/src/components/form/CFormCheck.ts

+54-5
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,12 @@ const CFormCheck = defineComponent({
1414
* @see http://coreui.io/vue/docs/components/button.html
1515
*/
1616
button: Object,
17+
/**
18+
* Use in conjunction with the v-model directive to specify the value that should be assigned to the bound variable when the checkbox is in the `false` state.
19+
*
20+
* @since 4.10.0
21+
*/
22+
falseValue: String,
1723
/**
1824
* Provide valuable, actionable feedback.
1925
*
@@ -66,7 +72,7 @@ const CFormCheck = defineComponent({
6672
* The default name for a value passed using v-model.
6773
*/
6874
modelValue: {
69-
type: [Boolean, String],
75+
type: [Array, Boolean, String],
7076
value: undefined,
7177
},
7278
/**
@@ -81,6 +87,12 @@ const CFormCheck = defineComponent({
8187
* @since 4.3.0
8288
*/
8389
tooltipFeedback: Boolean,
90+
/**
91+
* Use in conjunction with the v-model directive to specify the value that should be assigned to the bound variable when the checkbox is in the `true` state.
92+
*
93+
* @since 4.10.0
94+
*/
95+
trueValue: String,
8496
/**
8597
* Specifies the type of component.
8698
*
@@ -111,8 +123,35 @@ const CFormCheck = defineComponent({
111123
],
112124
setup(props, { attrs, emit, slots }) {
113125
const handleChange = (event: InputEvent) => {
126+
const target = event.target as HTMLInputElement
114127
emit('change', event)
115-
emit('update:modelValue', (event.target as HTMLInputElement).value)
128+
129+
if (props.falseValue && props.trueValue) {
130+
emit('update:modelValue', target.checked ? props.trueValue : props.falseValue)
131+
return
132+
}
133+
134+
if (props.value && Array.isArray(props.modelValue)) {
135+
if (props.modelValue.includes(props.value)) {
136+
emit(
137+
'update:modelValue',
138+
props.modelValue.filter((value) => value !== props.value),
139+
)
140+
} else {
141+
emit('update:modelValue', [...props.modelValue, props.value])
142+
}
143+
144+
return
145+
}
146+
147+
if (props.value === undefined) {
148+
emit('update:modelValue', target.checked)
149+
return
150+
}
151+
152+
if (props.value && (props.modelValue === undefined || typeof props.modelValue === 'string')) {
153+
emit('update:modelValue', target.checked ? props.value : undefined)
154+
}
116155
}
117156

118157
const className = [
@@ -135,12 +174,22 @@ const CFormCheck = defineComponent({
135174
},
136175
]
137176

138-
const isChecked = computed(() => props.modelValue == props.value)
177+
const isChecked = computed(() => {
178+
if (Array.isArray(props.modelValue)) {
179+
return props.modelValue.includes(props.value)
180+
}
181+
182+
if (typeof props.modelValue === 'string') {
183+
return props.modelValue === props.value
184+
}
185+
186+
return props.modelValue
187+
})
139188

140189
const formControl = () => {
141190
return h('input', {
142191
...attrs,
143-
...(props.modelValue && { checked: isChecked.value }),
192+
...(props.modelValue && props.value && { checked: isChecked.value }),
144193
class: inputClassName,
145194
id: props.id,
146195
indeterminate: props.indeterminate,
@@ -210,4 +259,4 @@ const CFormCheck = defineComponent({
210259
},
211260
})
212261

213-
export { CFormCheck }
262+
export { CFormCheck }

‎packages/docs/api/form/CFormCheck.api.md

+20-18
Original file line numberDiff line numberDiff line change
@@ -8,24 +8,26 @@ import CFormCheck from '@coreui/vue/src/components/form/CFormCheck'
88

99
#### Props
1010

11-
| Prop name | Description | Type | Values | Default |
12-
| ------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | ----------------------- | ---------- |
13-
| **button** | Create button-like checkboxes and radio buttons.<br/>`@see` http://coreui.io/vue/docs/components/button.html | object | - | - |
14-
| **feedback** <br><div class="badge bg-primary">4.3.0+</div> | Provide valuable, actionable feedback. | string | - | - |
15-
| **feedback-invalid** <br><div class="badge bg-primary">4.3.0+</div> | Provide valuable, actionable feedback. | string | - | - |
16-
| **feedback-valid** <br><div class="badge bg-primary">4.3.0+</div> | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | string | - | - |
17-
| **hit-area** | Sets hit area to the full area of the component. | string | - | - |
18-
| **id** | The id global attribute defines an identifier (ID) that must be unique in the whole document. | string | - | - |
19-
| **indeterminate** | Input Checkbox indeterminate Property | boolean | - | - |
20-
| **inline** | Group checkboxes or radios on the same horizontal row by adding. | boolean | - | - |
21-
| **invalid** | Set component validation state to invalid. | boolean | - | - |
22-
| **label** | The element represents a caption for a component. | string | - | - |
23-
| **model-value** | The default name for a value passed using v-model. | boolean\|string | - | - |
24-
| **reverse** <br><div class="badge bg-primary">4.8.0+</div> | Put checkboxes or radios on the opposite side. | boolean | - | - |
25-
| **tooltip-feedback** <br><div class="badge bg-primary">4.3.0+</div> | Display validation feedback in a styled tooltip. | boolean | - | - |
26-
| **type** | Specifies the type of component. | string | `'checkbox'`, `'radio'` | 'checkbox' |
27-
| **valid** | Set component validation state to valid. | boolean | - | - |
28-
| **value** | The value attribute of component. | string | - | - |
11+
| Prop name | Description | Type | Values | Default |
12+
| ------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | ----------------------- | ---------- |
13+
| **button** | Create button-like checkboxes and radio buttons.<br/>`@see` http://coreui.io/vue/docs/components/button.html | object | - | - |
14+
| **false-value** <br><div class="badge bg-primary">4.10.0+</div> | Use in conjunction with the v-model directive to specify the value that should be assigned to the bound variable when the checkbox is in the `false` state. | string | - | - |
15+
| **feedback** <br><div class="badge bg-primary">4.3.0+</div> | Provide valuable, actionable feedback. | string | - | - |
16+
| **feedback-invalid** <br><div class="badge bg-primary">4.3.0+</div> | Provide valuable, actionable feedback. | string | - | - |
17+
| **feedback-valid** <br><div class="badge bg-primary">4.3.0+</div> | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | string | - | - |
18+
| **hit-area** | Sets hit area to the full area of the component. | string | - | - |
19+
| **id** | The id global attribute defines an identifier (ID) that must be unique in the whole document. | string | - | - |
20+
| **indeterminate** | Input Checkbox indeterminate Property | boolean | - | - |
21+
| **inline** | Group checkboxes or radios on the same horizontal row by adding. | boolean | - | - |
22+
| **invalid** | Set component validation state to invalid. | boolean | - | - |
23+
| **label** | The element represents a caption for a component. | string | - | - |
24+
| **model-value** | The default name for a value passed using v-model. | array\|boolean\|string | - | - |
25+
| **reverse** <br><div class="badge bg-primary">4.8.0+</div> | Put checkboxes or radios on the opposite side. | boolean | - | - |
26+
| **tooltip-feedback** <br><div class="badge bg-primary">4.3.0+</div> | Display validation feedback in a styled tooltip. | boolean | - | - |
27+
| **true-value** <br><div class="badge bg-primary">4.10.0+</div> | Use in conjunction with the v-model directive to specify the value that should be assigned to the bound variable when the checkbox is in the `true` state. | string | - | - |
28+
| **type** | Specifies the type of component. | string | `'checkbox'`, `'radio'` | 'checkbox' |
29+
| **valid** | Set component validation state to valid. | boolean | - | - |
30+
| **value** | The value attribute of component. | string | - | - |
2931

3032
#### Events
3133

0 commit comments

Comments
 (0)