Skip to content

Commit

Permalink
feat(CFormCheck): add support for the true-value and false-value prop…
Browse files Browse the repository at this point in the history 
…s, and enhance the handling of `v-model`
  • Loading branch information
@mrholek
mrholek committed Jul 16, 2023
1 parent 9b2ff70 commit 1a0682a
Show file tree
Hide file tree
Showing 2 changed files with 74 additions and 23 deletions.
59 changes: 54 additions & 5 deletions packages/coreui-vue/src/components/form/CFormCheck.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,12 @@ const CFormCheck = defineComponent({
* @see http://coreui.io/vue/docs/components/button.html
*/
button: Object,
/**
* 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.
*
* @since 4.10.0
*/
falseValue: String,
/**
* Provide valuable, actionable feedback.
*
Expand Down Expand Up @@ -66,7 +72,7 @@ const CFormCheck = defineComponent({
* The default name for a value passed using v-model.
*/
modelValue: {
type: [Boolean, String],
type: [Array, Boolean, String],
value: undefined,
},
/**
Expand All @@ -81,6 +87,12 @@ const CFormCheck = defineComponent({
* @since 4.3.0
*/
tooltipFeedback: Boolean,
/**
* 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.
*
* @since 4.10.0
*/
trueValue: String,
/**
* Specifies the type of component.
*
Expand Down Expand Up @@ -111,8 +123,35 @@ const CFormCheck = defineComponent({
],
setup(props, { attrs, emit, slots }) {
const handleChange = (event: InputEvent) => {
const target = event.target as HTMLInputElement
emit('change', event)
emit('update:modelValue', (event.target as HTMLInputElement).value)

if (props.falseValue && props.trueValue) {
emit('update:modelValue', target.checked ? props.trueValue : props.falseValue)
return
}

if (props.value && Array.isArray(props.modelValue)) {
if (props.modelValue.includes(props.value)) {
emit(
'update:modelValue',
props.modelValue.filter((value) => value !== props.value),
)
} else {
emit('update:modelValue', [...props.modelValue, props.value])
}

return
}

if (props.value === undefined) {
emit('update:modelValue', target.checked)
return
}

if (props.value && (props.modelValue === undefined || typeof props.modelValue === 'string')) {
emit('update:modelValue', target.checked ? props.value : undefined)
}
}

const className = [
Expand All @@ -135,12 +174,22 @@ const CFormCheck = defineComponent({
},
]

const isChecked = computed(() => props.modelValue == props.value)
const isChecked = computed(() => {
if (Array.isArray(props.modelValue)) {
return props.modelValue.includes(props.value)
}

if (typeof props.modelValue === 'string') {
return props.modelValue === props.value
}

return props.modelValue
})

const formControl = () => {
return h('input', {
...attrs,
...(props.modelValue && { checked: isChecked.value }),
...(props.modelValue && props.value && { checked: isChecked.value }),
class: inputClassName,
id: props.id,
indeterminate: props.indeterminate,
Expand Down Expand Up @@ -210,4 +259,4 @@ const CFormCheck = defineComponent({
},
})

export { CFormCheck }
export { CFormCheck }
38 changes: 20 additions & 18 deletions packages/docs/api/form/CFormCheck.api.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,24 +8,26 @@ import CFormCheck from '@coreui/vue/src/components/form/CFormCheck'

#### Props

| Prop name | Description | Type | Values | Default |
| ------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | ----------------------- | ---------- |
| **button** | Create button-like checkboxes and radio buttons.<br/>`@see` http://coreui.io/vue/docs/components/button.html | object | - | - |
| **feedback** <br><div class="badge bg-primary">4.3.0+</div> | Provide valuable, actionable feedback. | string | - | - |
| **feedback-invalid** <br><div class="badge bg-primary">4.3.0+</div> | Provide valuable, actionable feedback. | string | - | - |
| **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 | - | - |
| **hit-area** | Sets hit area to the full area of the component. | string | - | - |
| **id** | The id global attribute defines an identifier (ID) that must be unique in the whole document. | string | - | - |
| **indeterminate** | Input Checkbox indeterminate Property | boolean | - | - |
| **inline** | Group checkboxes or radios on the same horizontal row by adding. | boolean | - | - |
| **invalid** | Set component validation state to invalid. | boolean | - | - |
| **label** | The element represents a caption for a component. | string | - | - |
| **model-value** | The default name for a value passed using v-model. | boolean\|string | - | - |
| **reverse** <br><div class="badge bg-primary">4.8.0+</div> | Put checkboxes or radios on the opposite side. | boolean | - | - |
| **tooltip-feedback** <br><div class="badge bg-primary">4.3.0+</div> | Display validation feedback in a styled tooltip. | boolean | - | - |
| **type** | Specifies the type of component. | string | `'checkbox'`, `'radio'` | 'checkbox' |
| **valid** | Set component validation state to valid. | boolean | - | - |
| **value** | The value attribute of component. | string | - | - |
| Prop name | Description | Type | Values | Default |
| ------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | ----------------------- | ---------- |
| **button** | Create button-like checkboxes and radio buttons.<br/>`@see` http://coreui.io/vue/docs/components/button.html | object | - | - |
| **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 | - | - |
| **feedback** <br><div class="badge bg-primary">4.3.0+</div> | Provide valuable, actionable feedback. | string | - | - |
| **feedback-invalid** <br><div class="badge bg-primary">4.3.0+</div> | Provide valuable, actionable feedback. | string | - | - |
| **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 | - | - |
| **hit-area** | Sets hit area to the full area of the component. | string | - | - |
| **id** | The id global attribute defines an identifier (ID) that must be unique in the whole document. | string | - | - |
| **indeterminate** | Input Checkbox indeterminate Property | boolean | - | - |
| **inline** | Group checkboxes or radios on the same horizontal row by adding. | boolean | - | - |
| **invalid** | Set component validation state to invalid. | boolean | - | - |
| **label** | The element represents a caption for a component. | string | - | - |
| **model-value** | The default name for a value passed using v-model. | array\|boolean\|string | - | - |
| **reverse** <br><div class="badge bg-primary">4.8.0+</div> | Put checkboxes or radios on the opposite side. | boolean | - | - |
| **tooltip-feedback** <br><div class="badge bg-primary">4.3.0+</div> | Display validation feedback in a styled tooltip. | boolean | - | - |
| **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 | - | - |
| **type** | Specifies the type of component. | string | `'checkbox'`, `'radio'` | 'checkbox' |
| **valid** | Set component validation state to valid. | boolean | - | - |
| **value** | The value attribute of component. | string | - | - |

#### Events

Expand Down

0 comments on commit 1a0682a

Please sign in to comment.