@gitlab/ui 111.5.0 → 111.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +19 -0
- package/dist/components/base/accordion/accordion.js +4 -5
- package/dist/components/base/accordion/accordion_item.js +45 -17
- package/dist/components/base/accordion/constants.js +3 -0
- package/dist/components/base/datepicker/datepicker.js +2 -1
- package/dist/components/base/link/link.js +18 -9
- package/dist/components/charts/chart/chart.js +29 -23
- package/dist/config.js +10 -2
- package/dist/utils/charts/config.js +1 -4
- package/dist/vendor/bootstrap-vue/src/constants/components.js +1 -7
- package/package.json +3 -3
- package/src/components/base/accordion/accordion.vue +4 -6
- package/src/components/base/accordion/accordion_item.vue +57 -26
- package/src/components/base/accordion/constants.js +1 -0
- package/src/components/base/datepicker/datepicker.vue +2 -1
- package/src/components/base/link/link.vue +17 -5
- package/src/components/charts/chart/chart.vue +17 -20
- package/src/config.js +10 -1
- package/src/utils/charts/config.js +0 -3
- package/src/vendor/bootstrap-vue/src/constants/components.js +0 -6
- package/dist/vendor/bootstrap-vue/src/components/form-input/form-input.js +0 -157
- package/dist/vendor/bootstrap-vue/src/components/form-input/index.js +0 -1
- package/dist/vendor/bootstrap-vue/src/components/input-group/index.js +0 -5
- package/dist/vendor/bootstrap-vue/src/components/input-group/input-group-addon.js +0 -44
- package/dist/vendor/bootstrap-vue/src/components/input-group/input-group-append.js +0 -34
- package/dist/vendor/bootstrap-vue/src/components/input-group/input-group-prepend.js +0 -34
- package/dist/vendor/bootstrap-vue/src/components/input-group/input-group-text.js +0 -31
- package/dist/vendor/bootstrap-vue/src/components/input-group/input-group.js +0 -75
- package/src/vendor/bootstrap-vue/src/components/form-input/README.md +0 -612
- package/src/vendor/bootstrap-vue/src/components/form-input/form-input.js +0 -168
- package/src/vendor/bootstrap-vue/src/components/form-input/form-input.spec.js +0 -989
- package/src/vendor/bootstrap-vue/src/components/form-input/index.js +0 -3
- package/src/vendor/bootstrap-vue/src/components/form-input/package.json +0 -135
- package/src/vendor/bootstrap-vue/src/components/input-group/README.md +0 -329
- package/src/vendor/bootstrap-vue/src/components/input-group/index.js +0 -7
- package/src/vendor/bootstrap-vue/src/components/input-group/input-group-addon.js +0 -43
- package/src/vendor/bootstrap-vue/src/components/input-group/input-group-append.js +0 -31
- package/src/vendor/bootstrap-vue/src/components/input-group/input-group-append.spec.js +0 -84
- package/src/vendor/bootstrap-vue/src/components/input-group/input-group-prepend.js +0 -31
- package/src/vendor/bootstrap-vue/src/components/input-group/input-group-prepend.spec.js +0 -84
- package/src/vendor/bootstrap-vue/src/components/input-group/input-group-text.js +0 -31
- package/src/vendor/bootstrap-vue/src/components/input-group/input-group-text.spec.js +0 -45
- package/src/vendor/bootstrap-vue/src/components/input-group/input-group.js +0 -73
- package/src/vendor/bootstrap-vue/src/components/input-group/input-group.spec.js +0 -153
- package/src/vendor/bootstrap-vue/src/components/input-group/package.json +0 -109
|
@@ -1,135 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@bootstrap-vue/form-input",
|
|
3
|
-
"version": "1.1.0",
|
|
4
|
-
"meta": {
|
|
5
|
-
"title": "Form Input",
|
|
6
|
-
"description": "Create various type inputs such as: text, password, number, url, email, search, range, date and more.",
|
|
7
|
-
"components": [
|
|
8
|
-
{
|
|
9
|
-
"component": "BFormInput",
|
|
10
|
-
"aliases": [
|
|
11
|
-
"BInput"
|
|
12
|
-
],
|
|
13
|
-
"props": [
|
|
14
|
-
{
|
|
15
|
-
"prop": "ariaInvalid",
|
|
16
|
-
"description": "Sets the 'aria-invalid' attribute with the specified value"
|
|
17
|
-
},
|
|
18
|
-
{
|
|
19
|
-
"prop": "debounce",
|
|
20
|
-
"version": "2.1.0",
|
|
21
|
-
"description": "When set to a number of milliseconds greater than zero, will debounce the user input. Has no effect if prop 'lazy' is set"
|
|
22
|
-
},
|
|
23
|
-
{
|
|
24
|
-
"prop": "formatter",
|
|
25
|
-
"description": "Reference to a function for formatting the input"
|
|
26
|
-
},
|
|
27
|
-
{
|
|
28
|
-
"prop": "lazy",
|
|
29
|
-
"version": "2.1.0",
|
|
30
|
-
"description": "When set, updates the v-model on 'change'/'blur' events instead of 'input'. Emulates the Vue '.lazy' v-model modifier"
|
|
31
|
-
},
|
|
32
|
-
{
|
|
33
|
-
"prop": "lazyFormatter",
|
|
34
|
-
"description": "When set, the input is formatted on blur instead of each keystroke (if there is a formatter specified)"
|
|
35
|
-
},
|
|
36
|
-
{
|
|
37
|
-
"prop": "list",
|
|
38
|
-
"description": "The ID of the associated datalist element or component"
|
|
39
|
-
},
|
|
40
|
-
{
|
|
41
|
-
"prop": "max",
|
|
42
|
-
"description": "Value to set in the 'max' attribute on the input. Used by number-like inputs"
|
|
43
|
-
},
|
|
44
|
-
{
|
|
45
|
-
"prop": "min",
|
|
46
|
-
"description": "Value to set in the 'min' attribute on the input. Used by number-like inputs"
|
|
47
|
-
},
|
|
48
|
-
{
|
|
49
|
-
"prop": "noWheel",
|
|
50
|
-
"description": "For number-like inputs, disables the mouse wheel from incrementing or decrementing the value"
|
|
51
|
-
},
|
|
52
|
-
{
|
|
53
|
-
"prop": "number",
|
|
54
|
-
"description": "When set attempts to convert the input value to a native number. Emulates the Vue '.number' v-model modifier"
|
|
55
|
-
},
|
|
56
|
-
{
|
|
57
|
-
"prop": "size",
|
|
58
|
-
"description": "Set the size of the component's appearance. 'sm', 'md' (default), or 'lg'"
|
|
59
|
-
},
|
|
60
|
-
{
|
|
61
|
-
"prop": "step",
|
|
62
|
-
"description": "Value to set in the 'step' attribute on the input. Used by number-like inputs"
|
|
63
|
-
},
|
|
64
|
-
{
|
|
65
|
-
"prop": "trim",
|
|
66
|
-
"description": "When set, trims any leading and trailing white space from the input value. Emulates the Vue '.trim' v-model modifier"
|
|
67
|
-
},
|
|
68
|
-
{
|
|
69
|
-
"prop": "type",
|
|
70
|
-
"description": "The type of input to render. See the docs for supported types"
|
|
71
|
-
},
|
|
72
|
-
{
|
|
73
|
-
"prop": "value",
|
|
74
|
-
"description": "The current value of the input. Result will always be a string, except when the `number` prop is used"
|
|
75
|
-
}
|
|
76
|
-
],
|
|
77
|
-
"events": [
|
|
78
|
-
{
|
|
79
|
-
"event": "blur",
|
|
80
|
-
"description": "Emitted after the input loses focus",
|
|
81
|
-
"args": [
|
|
82
|
-
{
|
|
83
|
-
"arg": "event",
|
|
84
|
-
"type": "FocusEvent",
|
|
85
|
-
"description": "Native blur event (before any formatting)"
|
|
86
|
-
}
|
|
87
|
-
]
|
|
88
|
-
},
|
|
89
|
-
{
|
|
90
|
-
"event": "change",
|
|
91
|
-
"description": "Change event triggered by user interaction. Emitted after any formatting (not including 'trim' or 'number' props) and after the v-model is updated",
|
|
92
|
-
"args": [
|
|
93
|
-
{
|
|
94
|
-
"arg": "value",
|
|
95
|
-
"type": [
|
|
96
|
-
"String",
|
|
97
|
-
"Number"
|
|
98
|
-
],
|
|
99
|
-
"description": "Current value of input"
|
|
100
|
-
}
|
|
101
|
-
]
|
|
102
|
-
},
|
|
103
|
-
{
|
|
104
|
-
"event": "input",
|
|
105
|
-
"description": "Input event triggered by user interaction. Emitted after any formatting (not including 'trim' or 'number' props) and after the v-model is updated",
|
|
106
|
-
"args": [
|
|
107
|
-
{
|
|
108
|
-
"arg": "value",
|
|
109
|
-
"type": [
|
|
110
|
-
"String",
|
|
111
|
-
"Number"
|
|
112
|
-
],
|
|
113
|
-
"description": "Current value of input"
|
|
114
|
-
}
|
|
115
|
-
]
|
|
116
|
-
},
|
|
117
|
-
{
|
|
118
|
-
"event": "update",
|
|
119
|
-
"description": "Emitted to update the v-model",
|
|
120
|
-
"args": [
|
|
121
|
-
{
|
|
122
|
-
"arg": "value",
|
|
123
|
-
"type": [
|
|
124
|
-
"String",
|
|
125
|
-
"Number"
|
|
126
|
-
],
|
|
127
|
-
"description": "Value of input, after any formatting. Not emitted if the value does not change"
|
|
128
|
-
}
|
|
129
|
-
]
|
|
130
|
-
}
|
|
131
|
-
]
|
|
132
|
-
}
|
|
133
|
-
]
|
|
134
|
-
}
|
|
135
|
-
}
|
|
@@ -1,329 +0,0 @@
|
|
|
1
|
-
# Input Group
|
|
2
|
-
|
|
3
|
-
> Easily extend form controls by adding text, buttons, or button groups on either side of textual
|
|
4
|
-
> inputs.
|
|
5
|
-
|
|
6
|
-
```html
|
|
7
|
-
<div>
|
|
8
|
-
<!-- Using props -->
|
|
9
|
-
<b-input-group size="lg" prepend="$" append=".00">
|
|
10
|
-
<b-form-input></b-form-input>
|
|
11
|
-
</b-input-group>
|
|
12
|
-
|
|
13
|
-
<!-- Using slots -->
|
|
14
|
-
<b-input-group class="mt-3">
|
|
15
|
-
<template #append>
|
|
16
|
-
<b-input-group-text><strong class="text-danger">!</strong></b-input-group-text>
|
|
17
|
-
</template>
|
|
18
|
-
<b-form-input></b-form-input>
|
|
19
|
-
</b-input-group>
|
|
20
|
-
|
|
21
|
-
<!-- Using components -->
|
|
22
|
-
<b-input-group prepend="Username" class="mt-3">
|
|
23
|
-
<b-form-input></b-form-input>
|
|
24
|
-
<b-input-group-append>
|
|
25
|
-
<b-button variant="outline-success">Button</b-button>
|
|
26
|
-
<b-button variant="info">Button</b-button>
|
|
27
|
-
</b-input-group-append>
|
|
28
|
-
</b-input-group>
|
|
29
|
-
</div>
|
|
30
|
-
|
|
31
|
-
<!-- b-input-group.vue -->
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
## Usage
|
|
35
|
-
|
|
36
|
-
You can attach addons using either props, named slots and/or sub-components.
|
|
37
|
-
|
|
38
|
-
### Using `prepend` and `append` props
|
|
39
|
-
|
|
40
|
-
Values will be internally wrapped by a `<b-input-group-text>` to display correctly.
|
|
41
|
-
|
|
42
|
-
```html
|
|
43
|
-
<div>
|
|
44
|
-
<b-input-group prepend="$" append=".00">
|
|
45
|
-
<b-form-input></b-form-input>
|
|
46
|
-
</b-input-group>
|
|
47
|
-
|
|
48
|
-
<b-input-group prepend="0" append="100" class="mt-3">
|
|
49
|
-
<b-form-input type="range" min="0" max="100"></b-form-input>
|
|
50
|
-
</b-input-group>
|
|
51
|
-
</div>
|
|
52
|
-
|
|
53
|
-
<!-- b-input-group-using-props.vue -->
|
|
54
|
-
```
|
|
55
|
-
|
|
56
|
-
### Using named slots
|
|
57
|
-
|
|
58
|
-
if you want better control over addons, you can use `prepend` and `append` slots instead.
|
|
59
|
-
|
|
60
|
-
The slot content will automatically be wrapped by
|
|
61
|
-
[`<b-input-group-prepend>` or `<b-input-group-append>`](#using-sub-components) to display correctly.
|
|
62
|
-
|
|
63
|
-
```html
|
|
64
|
-
<div>
|
|
65
|
-
<b-input-group>
|
|
66
|
-
<template #prepend>
|
|
67
|
-
<b-input-group-text >Username</b-input-group-text>
|
|
68
|
-
</template>
|
|
69
|
-
<b-form-input></b-form-input>
|
|
70
|
-
|
|
71
|
-
<template #append>
|
|
72
|
-
<b-dropdown text="Dropdown" variant="success">
|
|
73
|
-
<b-dropdown-item>Action A</b-dropdown-item>
|
|
74
|
-
<b-dropdown-item>Action B</b-dropdown-item>
|
|
75
|
-
</b-dropdown>
|
|
76
|
-
</template>
|
|
77
|
-
</b-input-group>
|
|
78
|
-
</div>
|
|
79
|
-
|
|
80
|
-
<!-- b-input-group-using-slots.vue -->
|
|
81
|
-
```
|
|
82
|
-
|
|
83
|
-
### Using sub-components
|
|
84
|
-
|
|
85
|
-
Use the `<b-input-group-prepend>` or `<b-input-group-append>` to add arbitrary addons wherever you
|
|
86
|
-
like, and use these components to group buttons in your input group. Single buttons must always be
|
|
87
|
-
wrapped in these components for proper styling.
|
|
88
|
-
|
|
89
|
-
```html
|
|
90
|
-
<div>
|
|
91
|
-
<b-input-group>
|
|
92
|
-
<b-input-group-prepend>
|
|
93
|
-
<b-button variant="outline-info">Button</b-button>
|
|
94
|
-
</b-input-group-prepend>
|
|
95
|
-
|
|
96
|
-
<b-form-input type="number" min="0.00"></b-form-input>
|
|
97
|
-
|
|
98
|
-
<b-input-group-append>
|
|
99
|
-
<b-button variant="outline-secondary">Button</b-button>
|
|
100
|
-
<b-button variant="outline-primary">Button</b-button>
|
|
101
|
-
<b-input-group-text>
|
|
102
|
-
x
|
|
103
|
-
</b-input-group-text>
|
|
104
|
-
</b-input-group-append>
|
|
105
|
-
</b-input-group>
|
|
106
|
-
</div>
|
|
107
|
-
|
|
108
|
-
<!-- b-input-group-addons-placement.vue -->
|
|
109
|
-
```
|
|
110
|
-
|
|
111
|
-
Set the `is-text` prop on `<b-input-group-prepend>` or `<b-input-group-append>` if the content is
|
|
112
|
-
textual in nature to apply proper styling. Alternatively, place the `<b-input-group-text>`
|
|
113
|
-
subcomponent inside of the `<b-input-group-prepend>` or `<b-input-group-append>`. This also applies
|
|
114
|
-
when you want to use on of [BootstrapVue's icons](/docs/icons).
|
|
115
|
-
|
|
116
|
-
## Supported form-controls
|
|
117
|
-
|
|
118
|
-
The following are the form controls supported as the input-group's _main_ input element:
|
|
119
|
-
|
|
120
|
-
- [form-input](?path=/docs/base-form-form-input--docs)
|
|
121
|
-
- [form-textarea](?path=/docs/base-form-form-textarea--docs)
|
|
122
|
-
- [form-select](?path=/docs/base-form-form-select--docs)
|
|
123
|
-
- [form-date](?path=/docs/base-form-form-date--docs)
|
|
124
|
-
|
|
125
|
-
**Notes:**
|
|
126
|
-
|
|
127
|
-
- BootstrapVue uses custom SCSS/CSS to handling sizing the `<b-form-file>` input when it is placed
|
|
128
|
-
in a `<b-input-group>` which has a [`size`](#control-sizing) specified.
|
|
129
|
-
- BootstrapVue uses custom SCSS/CSS when `<b-form-input type="range">` is placed in a
|
|
130
|
-
`<b-input-group>`.
|
|
131
|
-
- BootstrapVue's custom components (i.e. `<b-form-spinbutton>`, `<b-form-rating>`, `<b-form-tags>`,
|
|
132
|
-
etc.) require BootstrapVue's custom SCSS/CSS.
|
|
133
|
-
|
|
134
|
-
## Checkbox and radio addons
|
|
135
|
-
|
|
136
|
-
Place any checkbox or radio within an input group's addon instead of text.
|
|
137
|
-
|
|
138
|
-
**Note:** Bootstrap v4.x recommends using native radio and checkbox inputs over custom radios and
|
|
139
|
-
checkboxes, but it is possible to use as `<b-form-radio>` and `<b-form-checkbox>` with a few utility
|
|
140
|
-
classes applied.
|
|
141
|
-
|
|
142
|
-
### Native checkbox and radio addons
|
|
143
|
-
|
|
144
|
-
```html
|
|
145
|
-
<div>
|
|
146
|
-
<b-input-group class="mb-2">
|
|
147
|
-
<b-input-group-prepend is-text>
|
|
148
|
-
<input type="checkbox" aria-label="Checkbox for following text input">
|
|
149
|
-
</b-input-group-prepend>
|
|
150
|
-
<b-form-input aria-label="Text input with checkbox"></b-form-input>
|
|
151
|
-
</b-input-group>
|
|
152
|
-
|
|
153
|
-
<b-input-group>
|
|
154
|
-
<b-input-group-prepend is-text>
|
|
155
|
-
<input type="radio" aria-label="Radio for following text input">
|
|
156
|
-
</b-input-group-prepend>
|
|
157
|
-
<b-form-input aria-label="Text input with radio input"></b-form-input>
|
|
158
|
-
</b-input-group>
|
|
159
|
-
</div>
|
|
160
|
-
|
|
161
|
-
<!-- b-input-group-checks-radios.vue -->
|
|
162
|
-
```
|
|
163
|
-
|
|
164
|
-
### Custom radio, checkbox, and switch addons
|
|
165
|
-
|
|
166
|
-
Using `<b-form-checkbox>` and `<b-form-radio>` components as addons, using Bootstrap
|
|
167
|
-
[utility classes](/docs/reference/utility-classes) for additional styling to get them to "fit" in
|
|
168
|
-
the addon:
|
|
169
|
-
|
|
170
|
-
```html
|
|
171
|
-
<div>
|
|
172
|
-
<b-input-group class="mb-2">
|
|
173
|
-
<b-input-group-prepend is-text>
|
|
174
|
-
<b-form-checkbox class="mr-n2">
|
|
175
|
-
<span class="sr-only">Checkbox for following text input</span>
|
|
176
|
-
</b-form-checkbox>
|
|
177
|
-
</b-input-group-prepend>
|
|
178
|
-
<b-form-input aria-label="Text input with checkbox"></b-form-input>
|
|
179
|
-
</b-input-group>
|
|
180
|
-
|
|
181
|
-
<b-input-group class="mb-2">
|
|
182
|
-
<b-input-group-prepend is-text>
|
|
183
|
-
<b-form-radio class="mr-n2">
|
|
184
|
-
<span class="sr-only">Radio for following text input</span>
|
|
185
|
-
</b-form-radio>
|
|
186
|
-
</b-input-group-prepend>
|
|
187
|
-
<b-form-input aria-label="Text input with radio input"></b-form-input>
|
|
188
|
-
</b-input-group>
|
|
189
|
-
|
|
190
|
-
<b-input-group>
|
|
191
|
-
<b-input-group-prepend is-text>
|
|
192
|
-
<b-form-checkbox switch class="mr-n2">
|
|
193
|
-
<span class="sr-only">Switch for following text input</span>
|
|
194
|
-
</b-form-checkbox>
|
|
195
|
-
</b-input-group-prepend>
|
|
196
|
-
<b-form-input aria-label="Text input with switch"></b-form-input>
|
|
197
|
-
</b-input-group>
|
|
198
|
-
</div>
|
|
199
|
-
|
|
200
|
-
<!-- b-input-group-custom-checks-radios.vue -->
|
|
201
|
-
```
|
|
202
|
-
|
|
203
|
-
In the above example, we have use the `.sr-only` class on a `<span>` to visually hide the custom
|
|
204
|
-
control's label content (while making them still accessible to screen reader users), and used the
|
|
205
|
-
utility class `.mr-n2` to add a negative right margin to compensate for the "gutter" space between
|
|
206
|
-
the control and the hidden label.
|
|
207
|
-
|
|
208
|
-
## Multiple inputs
|
|
209
|
-
|
|
210
|
-
```html
|
|
211
|
-
<div>
|
|
212
|
-
<b-input-group prepend="First and last name" class="mb-2">
|
|
213
|
-
<b-form-input aria-label="First name"></b-form-input>
|
|
214
|
-
<b-form-input aria-label="Last name"></b-form-input>
|
|
215
|
-
</b-input-group>
|
|
216
|
-
</div>
|
|
217
|
-
|
|
218
|
-
<!-- input-group-multiple-inputs.vue -->
|
|
219
|
-
```
|
|
220
|
-
|
|
221
|
-
## Multiple addons
|
|
222
|
-
|
|
223
|
-
Multiple add-ons are supported and can be mixed with checkbox and radio input versions.
|
|
224
|
-
|
|
225
|
-
```html
|
|
226
|
-
<div>
|
|
227
|
-
<b-input-group prepend="Item">
|
|
228
|
-
<b-input-group-prepend is-text>
|
|
229
|
-
<input type="checkbox" aria-label="Checkbox for following text input">
|
|
230
|
-
</b-input-group-prepend>
|
|
231
|
-
<b-input-group-prepend is-text><b>$</b></b-input-group-prepend>
|
|
232
|
-
<b-form-input type="number" aria-label="Text input with checkbox"></b-form-input>
|
|
233
|
-
</b-input-group>
|
|
234
|
-
</div>
|
|
235
|
-
|
|
236
|
-
<!-- b-input-group-multiple-addons.vue -->
|
|
237
|
-
```
|
|
238
|
-
|
|
239
|
-
## Dropdown addons
|
|
240
|
-
|
|
241
|
-
```html
|
|
242
|
-
<div>
|
|
243
|
-
<b-input-group>
|
|
244
|
-
<template #prepend>
|
|
245
|
-
<b-dropdown text="Dropdown" variant="info">
|
|
246
|
-
<b-dropdown-item>Action A</b-dropdown-item>
|
|
247
|
-
<b-dropdown-item>Action B</b-dropdown-item>
|
|
248
|
-
</b-dropdown>
|
|
249
|
-
</template>
|
|
250
|
-
|
|
251
|
-
<b-form-input></b-form-input>
|
|
252
|
-
|
|
253
|
-
<template #append>
|
|
254
|
-
<b-dropdown text="Dropdown" variant="outline-secondary" v-for="i in 2" :key="i">
|
|
255
|
-
<b-dropdown-item>Action C</b-dropdown-item>
|
|
256
|
-
<b-dropdown-item>Action D</b-dropdown-item>
|
|
257
|
-
</b-dropdown>
|
|
258
|
-
</template>
|
|
259
|
-
</b-input-group>
|
|
260
|
-
</div>
|
|
261
|
-
|
|
262
|
-
<!-- b-input-group-dropdown.vue -->
|
|
263
|
-
```
|
|
264
|
-
|
|
265
|
-
## Control sizing
|
|
266
|
-
|
|
267
|
-
Set height using the `size` prop to `sm` or `lg` for small or large respectively. There is no need
|
|
268
|
-
to set size on the individual inputs or buttons. Note however, you _will be required_ to also set
|
|
269
|
-
the size on dropdowns.
|
|
270
|
-
|
|
271
|
-
```html
|
|
272
|
-
<div>
|
|
273
|
-
<b-input-group
|
|
274
|
-
v-for="size in ['sm','','lg']"
|
|
275
|
-
:key="size"
|
|
276
|
-
:size="size"
|
|
277
|
-
class="mb-3"
|
|
278
|
-
prepend="Label"
|
|
279
|
-
>
|
|
280
|
-
<b-form-input></b-form-input>
|
|
281
|
-
<b-input-group-append>
|
|
282
|
-
<b-button size="sm" text="Button" variant="success">Button</b-button>
|
|
283
|
-
</b-input-group-append>
|
|
284
|
-
</b-input-group>
|
|
285
|
-
</div>
|
|
286
|
-
|
|
287
|
-
<!-- b-input-group-size.vue -->
|
|
288
|
-
```
|
|
289
|
-
|
|
290
|
-
To control width, place the input inside standard Bootstrap grid column.
|
|
291
|
-
|
|
292
|
-
### Sizing custom radio, checkbox and switch addons
|
|
293
|
-
|
|
294
|
-
If using `<b-form-radio>` or `<b-form-checkbox>` as addons, additional utility classes may be
|
|
295
|
-
required to make everything fit correctly, depending on the size chosen:
|
|
296
|
-
|
|
297
|
-
```html
|
|
298
|
-
<div>
|
|
299
|
-
<b-input-group size="sm" prepend="Small" class="mb-2">
|
|
300
|
-
<b-form-input aria-label="Small text input with custom switch"></b-form-input>
|
|
301
|
-
<b-input-group-append is-text>
|
|
302
|
-
<b-form-checkbox switch class="mr-n2 mb-n1">
|
|
303
|
-
<span class="sr-only">Checkbox for previous text input</span>
|
|
304
|
-
</b-form-checkbox>
|
|
305
|
-
</b-input-group-append>
|
|
306
|
-
</b-input-group>
|
|
307
|
-
|
|
308
|
-
<b-input-group size="lg" prepend="Large" class="mb-2">
|
|
309
|
-
<b-form-input aria-label="Large text input with switch"></b-form-input>
|
|
310
|
-
<b-input-group-append is-text>
|
|
311
|
-
<b-form-checkbox switch class="mr-n2">
|
|
312
|
-
<span class="sr-only">Switch for previous text input</span>
|
|
313
|
-
</b-form-checkbox>
|
|
314
|
-
</b-input-group-append>
|
|
315
|
-
</b-input-group>
|
|
316
|
-
</div>
|
|
317
|
-
|
|
318
|
-
<!-- b-input-group-custom-checks-radios-sizing.vue -->
|
|
319
|
-
```
|
|
320
|
-
|
|
321
|
-
Specifically, when using the `sm` size on `<b-input-group>` you will need to add a negative bottom
|
|
322
|
-
margin, via the use of the `.mb-n1` [utility class](/docs/reference/utility-classes).
|
|
323
|
-
|
|
324
|
-
## Contextual states
|
|
325
|
-
|
|
326
|
-
Bootstrap v4 currently **does not** support contextual state styling (i.e. valid or invalid) of
|
|
327
|
-
input groups. However, the inputs inside the input group do support contextual state.
|
|
328
|
-
|
|
329
|
-
<!-- Component reference added automatically from component package.json -->
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { BInputGroup } from './input-group'
|
|
2
|
-
import { BInputGroupAddon } from './input-group-addon'
|
|
3
|
-
import { BInputGroupPrepend } from './input-group-prepend'
|
|
4
|
-
import { BInputGroupAppend } from './input-group-append'
|
|
5
|
-
import { BInputGroupText } from './input-group-text'
|
|
6
|
-
|
|
7
|
-
export { BInputGroup, BInputGroupAddon, BInputGroupPrepend, BInputGroupAppend, BInputGroupText }
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import { extend, mergeData } from '../../vue'
|
|
2
|
-
import { NAME_INPUT_GROUP_ADDON } from '../../constants/components'
|
|
3
|
-
import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props'
|
|
4
|
-
import { makeProp, makePropsConfigurable } from '../../utils/props'
|
|
5
|
-
import { BInputGroupText } from './input-group-text'
|
|
6
|
-
|
|
7
|
-
// --- Props ---
|
|
8
|
-
|
|
9
|
-
export const props = makePropsConfigurable(
|
|
10
|
-
{
|
|
11
|
-
append: makeProp(PROP_TYPE_BOOLEAN, false),
|
|
12
|
-
id: makeProp(PROP_TYPE_STRING),
|
|
13
|
-
isText: makeProp(PROP_TYPE_BOOLEAN, false),
|
|
14
|
-
tag: makeProp(PROP_TYPE_STRING, 'div')
|
|
15
|
-
},
|
|
16
|
-
NAME_INPUT_GROUP_ADDON
|
|
17
|
-
)
|
|
18
|
-
|
|
19
|
-
// --- Main component ---
|
|
20
|
-
|
|
21
|
-
// @vue/component
|
|
22
|
-
export const BInputGroupAddon = /*#__PURE__*/ extend({
|
|
23
|
-
name: NAME_INPUT_GROUP_ADDON,
|
|
24
|
-
functional: true,
|
|
25
|
-
props,
|
|
26
|
-
render(h, { props, data, children }) {
|
|
27
|
-
const { append } = props
|
|
28
|
-
|
|
29
|
-
return h(
|
|
30
|
-
props.tag,
|
|
31
|
-
mergeData(data, {
|
|
32
|
-
class: {
|
|
33
|
-
'input-group-append': append,
|
|
34
|
-
'input-group-prepend': !append
|
|
35
|
-
},
|
|
36
|
-
attrs: {
|
|
37
|
-
id: props.id
|
|
38
|
-
}
|
|
39
|
-
}),
|
|
40
|
-
props.isText ? [h(BInputGroupText, children)] : children
|
|
41
|
-
)
|
|
42
|
-
}
|
|
43
|
-
})
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import { extend, mergeData } from '../../vue'
|
|
2
|
-
import { NAME_INPUT_GROUP_APPEND } from '../../constants/components'
|
|
3
|
-
import { omit } from '../../utils/object'
|
|
4
|
-
import { makePropsConfigurable } from '../../utils/props'
|
|
5
|
-
import { BInputGroupAddon, props as BInputGroupAddonProps } from './input-group-addon'
|
|
6
|
-
|
|
7
|
-
// --- Props ---
|
|
8
|
-
|
|
9
|
-
export const props = makePropsConfigurable(
|
|
10
|
-
omit(BInputGroupAddonProps, ['append']),
|
|
11
|
-
NAME_INPUT_GROUP_APPEND
|
|
12
|
-
)
|
|
13
|
-
|
|
14
|
-
// --- Main component ---
|
|
15
|
-
|
|
16
|
-
// @vue/component
|
|
17
|
-
export const BInputGroupAppend = /*#__PURE__*/ extend({
|
|
18
|
-
name: NAME_INPUT_GROUP_APPEND,
|
|
19
|
-
functional: true,
|
|
20
|
-
props,
|
|
21
|
-
render(h, { props, data, children }) {
|
|
22
|
-
// Pass all our data down to child, and set `append` to `true`
|
|
23
|
-
return h(
|
|
24
|
-
BInputGroupAddon,
|
|
25
|
-
mergeData(data, {
|
|
26
|
-
props: { ...props, append: true }
|
|
27
|
-
}),
|
|
28
|
-
children
|
|
29
|
-
)
|
|
30
|
-
}
|
|
31
|
-
})
|
|
@@ -1,84 +0,0 @@
|
|
|
1
|
-
import { mount } from '@vue/test-utils'
|
|
2
|
-
import { BInputGroupAppend } from './input-group-append'
|
|
3
|
-
|
|
4
|
-
describe('input-group > input-group-append', () => {
|
|
5
|
-
it('has expected default structure', async () => {
|
|
6
|
-
const wrapper = mount(BInputGroupAppend)
|
|
7
|
-
|
|
8
|
-
expect(wrapper.element.tagName).toBe('DIV')
|
|
9
|
-
expect(wrapper.classes()).toContain('input-group-append')
|
|
10
|
-
expect(wrapper.classes().length).toBe(1)
|
|
11
|
-
expect(wrapper.findAll('.input-group-append > *').length).toBe(0)
|
|
12
|
-
expect(wrapper.text()).toEqual('')
|
|
13
|
-
|
|
14
|
-
wrapper.destroy()
|
|
15
|
-
})
|
|
16
|
-
|
|
17
|
-
it('renders custom root element when tag prop is set', async () => {
|
|
18
|
-
const wrapper = mount(BInputGroupAppend, {
|
|
19
|
-
propsData: {
|
|
20
|
-
tag: 'span'
|
|
21
|
-
}
|
|
22
|
-
})
|
|
23
|
-
|
|
24
|
-
expect(wrapper.element.tagName).toBe('SPAN')
|
|
25
|
-
expect(wrapper.classes()).toContain('input-group-append')
|
|
26
|
-
expect(wrapper.classes().length).toBe(1)
|
|
27
|
-
expect(wrapper.findAll('.input-group-append > *').length).toBe(0)
|
|
28
|
-
expect(wrapper.text()).toEqual('')
|
|
29
|
-
|
|
30
|
-
wrapper.destroy()
|
|
31
|
-
})
|
|
32
|
-
|
|
33
|
-
it('renders content of default slot', async () => {
|
|
34
|
-
const wrapper = mount(BInputGroupAppend, {
|
|
35
|
-
slots: {
|
|
36
|
-
default: 'foobar'
|
|
37
|
-
}
|
|
38
|
-
})
|
|
39
|
-
|
|
40
|
-
expect(wrapper.element.tagName).toBe('DIV')
|
|
41
|
-
expect(wrapper.classes()).toContain('input-group-append')
|
|
42
|
-
expect(wrapper.classes().length).toBe(1)
|
|
43
|
-
expect(wrapper.text()).toEqual('foobar')
|
|
44
|
-
|
|
45
|
-
wrapper.destroy()
|
|
46
|
-
})
|
|
47
|
-
|
|
48
|
-
it('renders child input-group-text when prop is-text set', async () => {
|
|
49
|
-
const wrapper = mount(BInputGroupAppend, {
|
|
50
|
-
propsData: {
|
|
51
|
-
isText: true
|
|
52
|
-
}
|
|
53
|
-
})
|
|
54
|
-
|
|
55
|
-
expect(wrapper.element.tagName).toBe('DIV')
|
|
56
|
-
expect(wrapper.classes()).toContain('input-group-append')
|
|
57
|
-
expect(wrapper.classes().length).toBe(1)
|
|
58
|
-
expect(wrapper.findAll('.input-group-text').length).toBe(1)
|
|
59
|
-
expect(wrapper.findAll('.input-group-append > .input-group-text').length).toBe(1)
|
|
60
|
-
expect(wrapper.text()).toEqual('')
|
|
61
|
-
|
|
62
|
-
wrapper.destroy()
|
|
63
|
-
})
|
|
64
|
-
|
|
65
|
-
it('renders default slot inside child input-group-text when prop is-text set', async () => {
|
|
66
|
-
const wrapper = mount(BInputGroupAppend, {
|
|
67
|
-
propsData: {
|
|
68
|
-
isText: true
|
|
69
|
-
},
|
|
70
|
-
slots: {
|
|
71
|
-
default: 'foobar'
|
|
72
|
-
}
|
|
73
|
-
})
|
|
74
|
-
|
|
75
|
-
expect(wrapper.element.tagName).toBe('DIV')
|
|
76
|
-
expect(wrapper.classes()).toContain('input-group-append')
|
|
77
|
-
expect(wrapper.classes().length).toBe(1)
|
|
78
|
-
expect(wrapper.findAll('.input-group-text').length).toBe(1)
|
|
79
|
-
expect(wrapper.text()).toEqual('foobar')
|
|
80
|
-
expect(wrapper.find('.input-group-text').text()).toEqual('foobar')
|
|
81
|
-
|
|
82
|
-
wrapper.destroy()
|
|
83
|
-
})
|
|
84
|
-
})
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import { extend, mergeData } from '../../vue'
|
|
2
|
-
import { NAME_INPUT_GROUP_PREPEND } from '../../constants/components'
|
|
3
|
-
import { omit } from '../../utils/object'
|
|
4
|
-
import { makePropsConfigurable } from '../../utils/props'
|
|
5
|
-
import { BInputGroupAddon, props as BInputGroupAddonProps } from './input-group-addon'
|
|
6
|
-
|
|
7
|
-
// --- Props ---
|
|
8
|
-
|
|
9
|
-
export const props = makePropsConfigurable(
|
|
10
|
-
omit(BInputGroupAddonProps, ['append']),
|
|
11
|
-
NAME_INPUT_GROUP_PREPEND
|
|
12
|
-
)
|
|
13
|
-
|
|
14
|
-
// --- Main component ---
|
|
15
|
-
|
|
16
|
-
// @vue/component
|
|
17
|
-
export const BInputGroupPrepend = /*#__PURE__*/ extend({
|
|
18
|
-
name: NAME_INPUT_GROUP_PREPEND,
|
|
19
|
-
functional: true,
|
|
20
|
-
props,
|
|
21
|
-
render(h, { props, data, children }) {
|
|
22
|
-
// Pass all our data down to child, and set `append` to `true`
|
|
23
|
-
return h(
|
|
24
|
-
BInputGroupAddon,
|
|
25
|
-
mergeData(data, {
|
|
26
|
-
props: { ...props, append: false }
|
|
27
|
-
}),
|
|
28
|
-
children
|
|
29
|
-
)
|
|
30
|
-
}
|
|
31
|
-
})
|