Skip to content

Commit b3d932e

Browse files
mrholekmrholek
committed
refactor: add v-model support.
1 parent bcfab28 commit b3d932e

File tree

6 files changed

+229
-15
lines changed

6 files changed

+229
-15
lines changed

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

Lines changed: 44 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
import { defineComponent, h } from 'vue'
1+
import { defineComponent, h, onMounted, watch, ref } from 'vue'
22
import { shape } from 'vue-types'
33

44
import { Color, Shape } from '../props'
55
import { CFormLabel } from './CFormLabel'
66

77
const CFormCheck = defineComponent({
88
name: 'CFormCheck',
9+
inheritAttrs: false,
910
props: {
1011
/**
1112
* Create button-like checkboxes and radio buttons.
@@ -78,6 +79,14 @@ const CFormCheck = defineComponent({
7879
default: undefined,
7980
required: false,
8081
},
82+
/**
83+
* The default name for a value passed using v-model.
84+
*/
85+
modelValue: {
86+
type: [Boolean, String],
87+
value: undefined,
88+
required: false,
89+
},
8190
/**
8291
* Specifies the type of component.
8392
*
@@ -96,10 +105,42 @@ const CFormCheck = defineComponent({
96105
required: false,
97106
},
98107
},
99-
setup(props, { slots, attrs }) {
108+
emits: [
109+
/**
110+
* Event occurs when the checked value has been changed.
111+
*/
112+
'change',
113+
/**
114+
* Emit the new value whenever there’s a change event.
115+
*/
116+
'update:modelValue',
117+
],
118+
setup(props, { attrs, emit, slots }) {
119+
const checked = ref(attrs.checked)
120+
121+
onMounted(() => {
122+
if (props.modelValue && typeof props.modelValue === 'boolean') {
123+
console.log(props.modelValue)
124+
}
125+
})
126+
127+
watch(
128+
() => props.modelValue,
129+
() => {
130+
if (typeof props.modelValue === 'boolean') checked.value = props.modelValue
131+
},
132+
)
133+
134+
const handleChange = (event: InputEvent) => {
135+
const target = event.target as HTMLInputElement
136+
emit('change', target.checked)
137+
emit('update:modelValue', target.checked)
138+
}
139+
100140
const formControl = () => {
101141
return h('input', {
102142
...attrs,
143+
checked: checked.value,
103144
class: [
104145
props.button ? 'btn-check' : 'form-check-input',
105146
{
@@ -108,6 +149,7 @@ const CFormCheck = defineComponent({
108149
},
109150
],
110151
id: props.id,
152+
onChange: (event: InputEvent) => handleChange(event),
111153
type: props.type,
112154
})
113155
}

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

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,14 @@ const CFormInput = defineComponent({
1717
type: Boolean,
1818
required: false,
1919
},
20+
/**
21+
* The default name for a value passed using v-model.
22+
*/
23+
modelValue: {
24+
type: String,
25+
default: undefined,
26+
require: false,
27+
},
2028
/**
2129
* Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`.
2230
*/
@@ -62,15 +70,39 @@ const CFormInput = defineComponent({
6270
required: false,
6371
},
6472
},
65-
setup(props, { attrs, slots }) {
73+
emits: [
74+
/**
75+
* Event occurs when the element loses focus, after the content has been changed.
76+
*/
77+
'change',
78+
/**
79+
* Event occurs immediately after the value of a component has changed.
80+
*/
81+
'input',
82+
/**
83+
* Emit the new value whenever there’s an input or change event.
84+
*/
85+
'update:modelValue',
86+
],
87+
setup(props, { emit, slots }) {
88+
const handleChange = (event: InputEvent) => {
89+
const target = event.target as HTMLInputElement
90+
emit('change', target.value)
91+
emit('update:modelValue', target.value)
92+
}
93+
const handleInput = (event: InputEvent) => {
94+
const target = event.target as HTMLInputElement
95+
emit('input', target.value)
96+
emit('update:modelValue', target.value)
97+
}
98+
6699
return () =>
67100
h(
68101
'input',
69102
{
70103
type: props.type,
71104
disabled: props.disabled,
72105
readonly: props.readonly,
73-
...attrs,
74106
class: [
75107
props.plainText ? 'form-control-plaintext' : 'form-control',
76108
{
@@ -80,6 +112,9 @@ const CFormInput = defineComponent({
80112
'is-valid': props.valid,
81113
},
82114
],
115+
onChange: (event: InputEvent) => handleChange(event),
116+
onInput: (event: InputEvent) => handleInput(event),
117+
value: props.modelValue,
83118
},
84119
slots.default && slots.default(),
85120
)

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

Lines changed: 32 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,14 @@ const CFormRange = defineComponent({
2727
default: undefined,
2828
required: false,
2929
},
30+
/**
31+
* The default name for a value passed using v-model.
32+
*/
33+
modelValue: {
34+
type: String,
35+
value: undefined,
36+
required: false,
37+
},
3038
/**
3139
* Toggle the readonly state for the component.
3240
*/
@@ -53,15 +61,36 @@ const CFormRange = defineComponent({
5361
required: false,
5462
},
5563
},
56-
setup(props, { attrs, slots }) {
64+
emits: [
65+
/**
66+
* Event occurs when the value has been changed.
67+
*/
68+
'change',
69+
/**
70+
* Emit the new value whenever there’s a change event.
71+
*/
72+
'update:modelValue',
73+
],
74+
setup(props, { emit, slots }) {
75+
const handleChange = (event: InputEvent) => {
76+
const target = event.target as HTMLInputElement
77+
emit('change', target.value)
78+
emit('update:modelValue', target.value)
79+
}
80+
5781
return () =>
5882
h(
5983
'input',
6084
{
6185
class: 'form-range',
86+
disabled: props.disabled,
87+
max: props.max,
88+
min: props.min,
89+
onChange: (event: InputEvent) => handleChange(event),
90+
steps: props.steps,
91+
readonly: props.readonly,
6292
type: 'range',
63-
...attrs,
64-
...props,
93+
value: props.modelValue || props.value,
6594
},
6695
slots.default && slots.default(),
6796
)

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

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,14 @@ const CFormSelect = defineComponent({
1818
type: Boolean,
1919
required: false,
2020
},
21+
/**
22+
* The default name for a value passed using v-model.
23+
*/
24+
modelValue: {
25+
type: String,
26+
default: undefined,
27+
require: false,
28+
},
2129
/**
2230
* Size the component small or large.
2331
*
@@ -39,18 +47,41 @@ const CFormSelect = defineComponent({
3947
required: false,
4048
},
4149
},
42-
setup(props, { attrs, slots }) {
50+
emits: [
51+
/**
52+
* Event occurs when when a user changes the selected option of a <select> element.
53+
*/
54+
'change',
55+
/**
56+
* Emit the new value whenever there’s a change event.
57+
*/
58+
'update:modelValue',
59+
],
60+
setup(props, { emit, slots }) {
61+
const handleChange = (event: InputEvent) => {
62+
const target = event.target as HTMLSelectElement
63+
64+
const selected = Array.from(target.options)
65+
.filter((option) => option.selected)
66+
.map((option) => option.value)
67+
68+
const value = target.multiple ? selected : selected[0]
69+
70+
emit('change', value)
71+
emit('update:modelValue', value)
72+
}
73+
4374
return () =>
4475
h(
4576
'select',
4677
{
47-
...attrs,
4878
class: [
4979
'form-select',
5080
{
5181
[`form-select-${props.size}`]: props.size,
5282
},
5383
],
84+
onChange: (event: InputEvent) => handleChange(event),
5485
size: props.htmlSize,
5586
},
5687
slots.default && slots.default(),

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

Lines changed: 46 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
import { defineComponent, h } from 'vue'
1+
import { defineComponent, h, onMounted, watch, ref } from 'vue'
22

33
import { CFormLabel } from './CFormLabel'
44

55
const CFormSwitch = defineComponent({
66
name: 'CFormSwitch',
7+
inheritAttrs: false,
78
props: {
89
/**
910
* The id global attribute defines an identifier (ID) that must be unique in the whole document
@@ -28,6 +29,14 @@ const CFormSwitch = defineComponent({
2829
default: undefined,
2930
required: false,
3031
},
32+
/**
33+
* The default name for a value passed using v-model.
34+
*/
35+
modelValue: {
36+
type: [Boolean, String],
37+
value: undefined,
38+
required: false,
39+
},
3140
/**
3241
* Size the component large or extra large. Works only with `switch`.
3342
*
@@ -59,7 +68,38 @@ const CFormSwitch = defineComponent({
5968
required: false,
6069
},
6170
},
62-
setup(props, { attrs }) {
71+
emits: [
72+
/**
73+
* Event occurs when the checked value has been changed.
74+
*/
75+
'change',
76+
/**
77+
* Emit the new value whenever there’s a change event.
78+
*/
79+
'update:modelValue',
80+
],
81+
setup(props, { attrs, emit }) {
82+
const checked = ref(attrs.checked)
83+
84+
onMounted(() => {
85+
if (props.modelValue && typeof props.modelValue === 'boolean') {
86+
console.log(props.modelValue)
87+
}
88+
})
89+
90+
watch(
91+
() => props.modelValue,
92+
() => {
93+
if (typeof props.modelValue === 'boolean') checked.value = props.modelValue
94+
},
95+
)
96+
97+
const handleChange = (event: InputEvent) => {
98+
const target = event.target as HTMLInputElement
99+
emit('change', target.checked)
100+
emit('update:modelValue', target.checked)
101+
}
102+
63103
return () =>
64104
h(
65105
'div',
@@ -76,15 +116,17 @@ const CFormSwitch = defineComponent({
76116
[
77117
h('input', {
78118
...attrs,
79-
id: props.id,
80-
type: props.type,
119+
checked: checked.value,
81120
class: [
82121
'form-check-input',
83122
{
84123
'is-invalid': props.invalid,
85124
'is-valid': props.valid,
86125
},
87126
],
127+
id: props.id,
128+
onChange: (event: InputEvent) => handleChange(event),
129+
type: props.type,
88130
}),
89131
props.label &&
90132
h(

0 commit comments

Comments
 (0)