Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit1a0682a

Browse files
committed
feat(CFormCheck): add support for the true-value and false-value props, and enhance the handling ofv-model
1 parent9b2ff70 commit1a0682a

File tree

2 files changed

+74
-23
lines changed

2 files changed

+74
-23
lines changed

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

Lines changed: 54 additions & 5 deletions
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
consthandleChange=(event:InputEvent)=>{
126+
consttarget=event.targetasHTMLInputElement
114127
emit('change',event)
115-
emit('update:modelValue',(event.targetasHTMLInputElement).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||typeofprops.modelValue==='string')){
153+
emit('update:modelValue',target.checked ?props.value :undefined)
154+
}
116155
}
117156

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

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

140189
constformControl=()=>{
141190
returnh('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‎

Lines changed: 20 additions & 18 deletions
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><divclass="badge bg-primary">4.3.0+</div>| Provide valuable, actionable feedback.| string| -| -|
15-
|**feedback-invalid** <br><divclass="badge bg-primary">4.3.0+</div>| Provide valuable, actionable feedback.| string| -| -|
16-
|**feedback-valid** <br><divclass="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><divclass="badge bg-primary">4.8.0+</div>| Put checkboxes or radios on the opposite side.| boolean| -| -|
25-
|**tooltip-feedback** <br><divclass="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><divclass="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><divclass="badge bg-primary">4.3.0+</div>| Provide valuable, actionable feedback.| string| -| -|
16+
|**feedback-invalid** <br><divclass="badge bg-primary">4.3.0+</div>| Provide valuable, actionable feedback.| string| -| -|
17+
|**feedback-valid** <br><divclass="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><divclass="badge bg-primary">4.8.0+</div>| Put checkboxes or radios on the opposite side.| boolean| -| -|
26+
|**tooltip-feedback** <br><divclass="badge bg-primary">4.3.0+</div>| Display validation feedback in a styled tooltip.| boolean| -| -|
27+
|**true-value** <br><divclass="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)
[8]ページ先頭
©2009-2025 Movatter.jp