From 1a0682a804ef24eeab1bbde024f383670e7aa74d Mon Sep 17 00:00:00 2001 From: mrholek Date: Sun, 16 Jul 2023 14:31:15 +0200 Subject: [PATCH] feat(CFormCheck): add support for the true-value and false-value props, and enhance the handling of `v-model` --- .../src/components/form/CFormCheck.ts | 59 +++++++++++++++++-- packages/docs/api/form/CFormCheck.api.md | 38 ++++++------ 2 files changed, 74 insertions(+), 23 deletions(-) diff --git a/packages/coreui-vue/src/components/form/CFormCheck.ts b/packages/coreui-vue/src/components/form/CFormCheck.ts index b6e3df51..ecd01dea 100644 --- a/packages/coreui-vue/src/components/form/CFormCheck.ts +++ b/packages/coreui-vue/src/components/form/CFormCheck.ts @@ -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. * @@ -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, }, /** @@ -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. * @@ -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 = [ @@ -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, @@ -210,4 +259,4 @@ const CFormCheck = defineComponent({ }, }) -export { CFormCheck } +export { CFormCheck } \ No newline at end of file diff --git a/packages/docs/api/form/CFormCheck.api.md b/packages/docs/api/form/CFormCheck.api.md index 46366c05..1d906212 100644 --- a/packages/docs/api/form/CFormCheck.api.md +++ b/packages/docs/api/form/CFormCheck.api.md @@ -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.
`@see` http://coreui.io/vue/docs/components/button.html | object | - | - | -| **feedback**
4.3.0+
| Provide valuable, actionable feedback. | string | - | - | -| **feedback-invalid**
4.3.0+
| Provide valuable, actionable feedback. | string | - | - | -| **feedback-valid**
4.3.0+
| 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**
4.8.0+
| Put checkboxes or radios on the opposite side. | boolean | - | - | -| **tooltip-feedback**
4.3.0+
| 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.
`@see` http://coreui.io/vue/docs/components/button.html | object | - | - | +| **false-value**
4.10.0+
| 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**
4.3.0+
| Provide valuable, actionable feedback. | string | - | - | +| **feedback-invalid**
4.3.0+
| Provide valuable, actionable feedback. | string | - | - | +| **feedback-valid**
4.3.0+
| 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**
4.8.0+
| Put checkboxes or radios on the opposite side. | boolean | - | - | +| **tooltip-feedback**
4.3.0+
| Display validation feedback in a styled tooltip. | boolean | - | - | +| **true-value**
4.10.0+
| 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