Skip to content
This repository was archived by the owner on Nov 30, 2020. It is now read-only.

Commit e9d251e

Browse files
isneezyisneezy
committed
add FormGroupAddon component
1 parent c614b02 commit e9d251e

File tree

4 files changed

+82
-0
lines changed

4 files changed

+82
-0
lines changed

‎example/src/components/FormsPage.vue

+58
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,25 @@
2828
<form-textarea rows="6"
2929
value="Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! We shall say 'Ni' again to you, if you do not appease us. I'm not a witch. I'm not a witch. Camelot!"/>
3030
</form-group>
31+
<form-group>
32+
<form-label>Input group</form-label>
33+
<form-input-group>
34+
<form-input placeholder="Username"/>
35+
<form-group-addon append>
36+
<t-button>Go!</t-button>
37+
</form-group-addon>
38+
</form-input-group>
39+
</form-group>
40+
<form-group>
41+
<form-label>Input group buttons</form-label>
42+
<form-input-group>
43+
<form-input placeholder="Username"/>
44+
<form-group-addon append>
45+
<t-button>Action</t-button>
46+
<t-button><icon icon="chevron-down"/></t-button>
47+
</form-group-addon>
48+
</form-input-group>
49+
</form-group>
3150
</grid-col>
3251
<grid-col md="6" lg="4">
3352
<form-group>
@@ -105,6 +124,45 @@
105124
</grid-col>
106125
</grid-row>
107126
</form-group>
127+
<form-group>
128+
<form-label>Username</form-label>
129+
<form-input-group>
130+
<form-group-addon add-on="@"/>
131+
<form-input placeholder="Username"/>
132+
</form-input-group>
133+
</form-group>
134+
<form-group>
135+
<form-label>Your vanity URL</form-label>
136+
<form-input-group>
137+
<form-group-addon add-on="https://example.com/users/"/>
138+
<form-input/>
139+
</form-input-group>
140+
</form-group>
141+
<form-group>
142+
<form-label>Price</form-label>
143+
<form-input-group>
144+
<form-group-addon add-on="$"/>
145+
<form-input/>
146+
<form-group-addon add-on=".00" append/>
147+
</form-input-group>
148+
</form-group>
149+
150+
<form-group>
151+
<form-label>Button input</form-label>
152+
<form-input-group>
153+
<form-group-addon>
154+
<dropdown label="Action">
155+
<dropdown-menu-item label="Action"/>
156+
<dropdown-menu-item label="Another action"/>
157+
<dropdown-menu-item label="Something else here"/>
158+
<dropdown-divider/>
159+
<dropdown-menu-item label="Separated link"/>
160+
</dropdown>
161+
</form-group-addon>
162+
<form-input/>
163+
<form-group-addon add-on=".00" append/>
164+
</form-input-group>
165+
</form-group>
108166
</grid-col>
109167
</grid-row>
110168
</card-body>

‎src/components/Form/FormGroupAddon.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
export default {
2+
name: 'form-group-addon',
3+
props: {
4+
addOn: {default: '', type: [Number, String]},
5+
append: {default: false, type: Boolean}
6+
},
7+
template: `<span :class="className"><slot><span class="input-group-text">{{ addOn }}</span></slot></span>`,
8+
computed: {
9+
className () {
10+
const className = {}
11+
className[`input-group-prepend`] = ! this.append
12+
className[`input-group-append`] = this.append
13+
return className
14+
}
15+
}
16+
}

‎src/components/Form/FormInputGroup.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export default {
2+
name: "form-input-group",
3+
template: `<div class="input-group"><slot/></div>`
4+
}

‎src/components/Form/index.js

+4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import FormCheckbox from './FormCheckbox'
22
import FormFileInput from './FormFileInput'
33
import FormGroup from './FormGroup'
4+
import FormGroupAddon from './FormGroupAddon'
45
import FormInput from './FormInput'
6+
import FormInputGroup from './FormInputGroup'
57
import FormInvalidFeedback from './FormInvalidFeedback'
68
import FormLabel from './FormLabel'
79
import FormRadio from './FormRadio'
@@ -13,8 +15,10 @@ export {
1315
FormCheckbox,
1416
FormFileInput,
1517
FormGroup,
18+
FormGroupAddon,
1619
FormInput,
1720
FormInvalidFeedback,
21+
FormInputGroup,
1822
FormLabel,
1923
FormRadio,
2024
FormSelect,

0 commit comments

Comments
 (0)