@gitlab/ui 114.0.1 → 114.1.1

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.
Files changed (136) hide show
  1. package/package.json +9 -28
  2. package/CHANGELOG.md +0 -13132
  3. package/src/vendor/bootstrap/LICENSE +0 -11
  4. package/src/vendor/bootstrap-vue/LICENSE +0 -11
  5. package/src/vendor/bootstrap-vue/package.json +0 -144
  6. package/src/vendor/bootstrap-vue/src/components/button/MODIFICATIONS.md +0 -16
  7. package/src/vendor/bootstrap-vue/src/components/button/README.md +0 -240
  8. package/src/vendor/bootstrap-vue/src/components/button/button-close.spec.js +0 -210
  9. package/src/vendor/bootstrap-vue/src/components/button/button.spec.js +0 -349
  10. package/src/vendor/bootstrap-vue/src/components/button/package.json +0 -105
  11. package/src/vendor/bootstrap-vue/src/components/dropdown/README.md +0 -730
  12. package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-divider.spec.js +0 -58
  13. package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-form.spec.js +0 -110
  14. package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-group.spec.js +0 -94
  15. package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-header.spec.js +0 -73
  16. package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-item-button.spec.js +0 -117
  17. package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-item.spec.js +0 -147
  18. package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-text.spec.js +0 -59
  19. package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown.spec.js +0 -1121
  20. package/src/vendor/bootstrap-vue/src/components/dropdown/package.json +0 -368
  21. package/src/vendor/bootstrap-vue/src/components/form/README.md +0 -365
  22. package/src/vendor/bootstrap-vue/src/components/form/form-invalid-feedback.spec.js +0 -170
  23. package/src/vendor/bootstrap-vue/src/components/form/form-text.spec.js +0 -93
  24. package/src/vendor/bootstrap-vue/src/components/form/form-valid-feedback.spec.js +0 -157
  25. package/src/vendor/bootstrap-vue/src/components/form/form.spec.js +0 -97
  26. package/src/vendor/bootstrap-vue/src/components/form/package.json +0 -112
  27. package/src/vendor/bootstrap-vue/src/components/form-checkbox/README.md +0 -691
  28. package/src/vendor/bootstrap-vue/src/components/form-checkbox/form-checkbox-group.spec.js +0 -525
  29. package/src/vendor/bootstrap-vue/src/components/form-checkbox/form-checkbox.spec.js +0 -922
  30. package/src/vendor/bootstrap-vue/src/components/form-checkbox/package.json +0 -172
  31. package/src/vendor/bootstrap-vue/src/components/form-group/README.md +0 -339
  32. package/src/vendor/bootstrap-vue/src/components/form-group/form-group.spec.js +0 -477
  33. package/src/vendor/bootstrap-vue/src/components/form-group/package.json +0 -183
  34. package/src/vendor/bootstrap-vue/src/components/form-radio/README.md +0 -437
  35. package/src/vendor/bootstrap-vue/src/components/form-radio/form-radio-group.spec.js +0 -357
  36. package/src/vendor/bootstrap-vue/src/components/form-radio/form-radio.spec.js +0 -587
  37. package/src/vendor/bootstrap-vue/src/components/form-radio/package.json +0 -162
  38. package/src/vendor/bootstrap-vue/src/components/form-select/README.md +0 -504
  39. package/src/vendor/bootstrap-vue/src/components/form-select/form-select-option-group.spec.js +0 -138
  40. package/src/vendor/bootstrap-vue/src/components/form-select/form-select-option.spec.js +0 -75
  41. package/src/vendor/bootstrap-vue/src/components/form-select/form-select.spec.js +0 -723
  42. package/src/vendor/bootstrap-vue/src/components/form-select/package.json +0 -132
  43. package/src/vendor/bootstrap-vue/src/components/form-textarea/README.md +0 -453
  44. package/src/vendor/bootstrap-vue/src/components/form-textarea/form-textarea.spec.js +0 -1000
  45. package/src/vendor/bootstrap-vue/src/components/form-textarea/package.json +0 -122
  46. package/src/vendor/bootstrap-vue/src/components/layout/README.md +0 -791
  47. package/src/vendor/bootstrap-vue/src/components/layout/col.spec.js +0 -192
  48. package/src/vendor/bootstrap-vue/src/components/layout/form-row.spec.js +0 -45
  49. package/src/vendor/bootstrap-vue/src/components/layout/package.json +0 -99
  50. package/src/vendor/bootstrap-vue/src/components/link/README.md +0 -76
  51. package/src/vendor/bootstrap-vue/src/components/link/link.spec.js +0 -434
  52. package/src/vendor/bootstrap-vue/src/components/link/package.json +0 -57
  53. package/src/vendor/bootstrap-vue/src/components/modal/MODIFICATIONS.md +0 -30
  54. package/src/vendor/bootstrap-vue/src/components/modal/README.md +0 -1067
  55. package/src/vendor/bootstrap-vue/src/components/modal/helpers/bv-modal-event.class.spec.js +0 -82
  56. package/src/vendor/bootstrap-vue/src/components/modal/modal.spec.js +0 -1418
  57. package/src/vendor/bootstrap-vue/src/components/modal/package.json +0 -544
  58. package/src/vendor/bootstrap-vue/src/components/nav/README.md +0 -362
  59. package/src/vendor/bootstrap-vue/src/components/nav/nav-item.spec.js +0 -127
  60. package/src/vendor/bootstrap-vue/src/components/nav/nav.spec.js +0 -177
  61. package/src/vendor/bootstrap-vue/src/components/nav/package.json +0 -73
  62. package/src/vendor/bootstrap-vue/src/components/popover/README.md +0 -919
  63. package/src/vendor/bootstrap-vue/src/components/popover/package.json +0 -261
  64. package/src/vendor/bootstrap-vue/src/components/popover/popover.spec.js +0 -198
  65. package/src/vendor/bootstrap-vue/src/components/table/README.md +0 -3157
  66. package/src/vendor/bootstrap-vue/src/components/table/helpers/default-sort-compare.spec.js +0 -112
  67. package/src/vendor/bootstrap-vue/src/components/table/helpers/normalize-fields.spec.js +0 -93
  68. package/src/vendor/bootstrap-vue/src/components/table/package.json +0 -1763
  69. package/src/vendor/bootstrap-vue/src/components/table/table-busy.spec.js +0 -150
  70. package/src/vendor/bootstrap-vue/src/components/table/table-caption.spec.js +0 -176
  71. package/src/vendor/bootstrap-vue/src/components/table/table-colgroup.spec.js +0 -81
  72. package/src/vendor/bootstrap-vue/src/components/table/table-filtering.spec.js +0 -409
  73. package/src/vendor/bootstrap-vue/src/components/table/table-item-formatter.spec.js +0 -56
  74. package/src/vendor/bootstrap-vue/src/components/table/table-lite.spec.js +0 -682
  75. package/src/vendor/bootstrap-vue/src/components/table/table-pagination.spec.js +0 -133
  76. package/src/vendor/bootstrap-vue/src/components/table/table-primarykey.spec.js +0 -83
  77. package/src/vendor/bootstrap-vue/src/components/table/table-provider.spec.js +0 -411
  78. package/src/vendor/bootstrap-vue/src/components/table/table-row-details.spec.js +0 -459
  79. package/src/vendor/bootstrap-vue/src/components/table/table-selectable.spec.js +0 -1182
  80. package/src/vendor/bootstrap-vue/src/components/table/table-simple.spec.js +0 -206
  81. package/src/vendor/bootstrap-vue/src/components/table/table-sorting.spec.js +0 -858
  82. package/src/vendor/bootstrap-vue/src/components/table/table-sticky-column.spec.js +0 -377
  83. package/src/vendor/bootstrap-vue/src/components/table/table-tbody-bottom-row.spec.js +0 -94
  84. package/src/vendor/bootstrap-vue/src/components/table/table-tbody-row-events.spec.js +0 -529
  85. package/src/vendor/bootstrap-vue/src/components/table/table-tbody-top-row.spec.js +0 -88
  86. package/src/vendor/bootstrap-vue/src/components/table/table-tbody-transition.spec.js +0 -83
  87. package/src/vendor/bootstrap-vue/src/components/table/table-tfoot-custom.spec.js +0 -91
  88. package/src/vendor/bootstrap-vue/src/components/table/table-tfoot-events.spec.js +0 -137
  89. package/src/vendor/bootstrap-vue/src/components/table/table-thead-events.spec.js +0 -155
  90. package/src/vendor/bootstrap-vue/src/components/table/table-thead-top.spec.js +0 -96
  91. package/src/vendor/bootstrap-vue/src/components/table/table.spec.js +0 -692
  92. package/src/vendor/bootstrap-vue/src/components/tabs/README.md +0 -433
  93. package/src/vendor/bootstrap-vue/src/components/tabs/package.json +0 -205
  94. package/src/vendor/bootstrap-vue/src/components/tabs/tab.spec.js +0 -330
  95. package/src/vendor/bootstrap-vue/src/components/tabs/tabs.spec.js +0 -778
  96. package/src/vendor/bootstrap-vue/src/components/toast/README.md +0 -655
  97. package/src/vendor/bootstrap-vue/src/components/toast/helpers/bv-toast.spec.js +0 -117
  98. package/src/vendor/bootstrap-vue/src/components/toast/package.json +0 -184
  99. package/src/vendor/bootstrap-vue/src/components/toast/toast.spec.js +0 -294
  100. package/src/vendor/bootstrap-vue/src/components/toast/toaster.spec.js +0 -77
  101. package/src/vendor/bootstrap-vue/src/components/tooltip/README.md +0 -559
  102. package/src/vendor/bootstrap-vue/src/components/tooltip/package.json +0 -258
  103. package/src/vendor/bootstrap-vue/src/components/tooltip/tooltip.spec.js +0 -1240
  104. package/src/vendor/bootstrap-vue/src/components/transition/package.json +0 -5
  105. package/src/vendor/bootstrap-vue/src/components/transporter/package.json +0 -5
  106. package/src/vendor/bootstrap-vue/src/components/transporter/transporter.spec.js +0 -85
  107. package/src/vendor/bootstrap-vue/src/directives/modal/modal.spec.js +0 -191
  108. package/src/vendor/bootstrap-vue/src/directives/tooltip/README.md +0 -521
  109. package/src/vendor/bootstrap-vue/src/directives/tooltip/package.json +0 -131
  110. package/src/vendor/bootstrap-vue/src/directives/tooltip/tooltip.spec.js +0 -190
  111. package/src/vendor/bootstrap-vue/src/directives/visible/README.md +0 -244
  112. package/src/vendor/bootstrap-vue/src/directives/visible/package.json +0 -24
  113. package/src/vendor/bootstrap-vue/src/mixins/attrs.spec.js +0 -194
  114. package/src/vendor/bootstrap-vue/src/mixins/click-out.spec.js +0 -52
  115. package/src/vendor/bootstrap-vue/src/mixins/focus-in.spec.js +0 -53
  116. package/src/vendor/bootstrap-vue/src/mixins/listen-on-document.spec.js +0 -117
  117. package/src/vendor/bootstrap-vue/src/mixins/listen-on-root.spec.js +0 -77
  118. package/src/vendor/bootstrap-vue/src/mixins/listen-on-window.spec.js +0 -115
  119. package/src/vendor/bootstrap-vue/src/mixins/listeners.spec.js +0 -245
  120. package/src/vendor/bootstrap-vue/src/utils/bv-event.class.spec.js +0 -66
  121. package/src/vendor/bootstrap-vue/src/utils/clone-deep.spec.js +0 -70
  122. package/src/vendor/bootstrap-vue/src/utils/config.spec.js +0 -169
  123. package/src/vendor/bootstrap-vue/src/utils/css-escape.spec.js +0 -82
  124. package/src/vendor/bootstrap-vue/src/utils/dom.spec.js +0 -291
  125. package/src/vendor/bootstrap-vue/src/utils/events.spec.js +0 -41
  126. package/src/vendor/bootstrap-vue/src/utils/get.spec.js +0 -109
  127. package/src/vendor/bootstrap-vue/src/utils/inspect.spec.js +0 -251
  128. package/src/vendor/bootstrap-vue/src/utils/loose-equal.spec.js +0 -203
  129. package/src/vendor/bootstrap-vue/src/utils/normalize-slot.spec.js +0 -63
  130. package/src/vendor/bootstrap-vue/src/utils/number.spec.js +0 -72
  131. package/src/vendor/bootstrap-vue/src/utils/object.spec.js +0 -61
  132. package/src/vendor/bootstrap-vue/src/utils/props.spec.js +0 -112
  133. package/src/vendor/bootstrap-vue/src/utils/router.spec.js +0 -248
  134. package/src/vendor/bootstrap-vue/src/utils/string.spec.js +0 -65
  135. package/src/vendor/bootstrap-vue/src/utils/stringify-object-values.spec.js +0 -47
  136. package/src/vendor/bootstrap-vue/src/utils/warn.spec.js +0 -54
@@ -1,132 +0,0 @@
1
- {
2
- "name": "@bootstrap-vue/form-select",
3
- "version": "1.0.0",
4
- "meta": {
5
- "title": "Form Select",
6
- "description": "Custom <select> component using cross-browser custom styles. Optionally generate <option> entries based on an array, array of objects.",
7
- "components": [
8
- {
9
- "component": "BFormSelect",
10
- "aliases": [
11
- "BSelect"
12
- ],
13
- "props": [
14
- {
15
- "prop": "ariaInvalid",
16
- "description": "Optional value to set for the 'aria-invalid' attribute. Supported values are 'true' and 'false'. If not set, the 'state' prop will dictate the value"
17
- },
18
- {
19
- "prop": "labelField",
20
- "description": "The key to use from the option object to get the label"
21
- },
22
- {
23
- "prop": "multiple",
24
- "description": "When set, allows multiple options to be selected (multi-select)"
25
- },
26
- {
27
- "prop": "optionsField",
28
- "description": "The key to use from the option object to get the options"
29
- },
30
- {
31
- "prop": "selectSize",
32
- "description": "When set to a number larger than 0, will set the number of display option rows. Note not all browser will respect this setting"
33
- },
34
- {
35
- "prop": "size",
36
- "description": "Set the size of the component's appearance. 'sm', 'md' (default), or 'lg'"
37
- },
38
- {
39
- "prop": "value",
40
- "description": "Current value of the select. Should be set to an array when the 'multiple' prop is set"
41
- }
42
- ],
43
- "events": [
44
- {
45
- "event": "change",
46
- "description": "Emitted when the select value changes via user interaction",
47
- "args": [
48
- {
49
- "arg": "value",
50
- "type": [
51
- "String",
52
- "Number",
53
- "Object",
54
- "Array"
55
- ],
56
- "description": "Current selected value(s) of the select"
57
- }
58
- ]
59
- },
60
- {
61
- "event": "input",
62
- "description": "Emitted when the select value changes",
63
- "args": [
64
- {
65
- "arg": "value",
66
- "type": [
67
- "String",
68
- "Number",
69
- "Object",
70
- "Array"
71
- ],
72
- "description": "Current selected value(s) of the select"
73
- }
74
- ]
75
- }
76
- ],
77
- "slots": [
78
- {
79
- "name": "default",
80
- "description": "Content to place in the form select"
81
- },
82
- {
83
- "name": "first",
84
- "description": "Slot to place options or option groups above options provided via the 'options' prop"
85
- }
86
- ]
87
- },
88
- {
89
- "component": "BFormSelectOption",
90
- "version": "2.2.0",
91
- "aliases": [
92
- "BSelectOption"
93
- ],
94
- "props": [
95
- {
96
- "prop": "value",
97
- "description": "The value of the option"
98
- }
99
- ],
100
- "slots": [
101
- {
102
- "name": "default",
103
- "description": "Content to place in the form select option"
104
- }
105
- ]
106
- },
107
- {
108
- "component": "BFormSelectOptionGroup",
109
- "version": "2.2.0",
110
- "aliases": [
111
- "BSelectOptionGroup"
112
- ],
113
- "props": [
114
- {
115
- "prop": "label",
116
- "description": "The label for the option group"
117
- }
118
- ],
119
- "slots": [
120
- {
121
- "name": "default",
122
- "description": "Content to place in the form select option group"
123
- },
124
- {
125
- "name": "first",
126
- "description": "Slot to place options above options provided via the 'options' prop"
127
- }
128
- ]
129
- }
130
- ]
131
- }
132
- }
@@ -1,453 +0,0 @@
1
- # Form Textarea
2
-
3
- > Create multi-line text inputs with support for auto height sizing, minimum and maximum number of
4
- > rows, and contextual states.
5
-
6
- ```html
7
- <template>
8
- <div>
9
- <b-form-textarea
10
- id="textarea"
11
- v-model="text"
12
- placeholder="Enter something..."
13
- rows="3"
14
- max-rows="6"
15
- ></b-form-textarea>
16
-
17
- <pre class="mt-3 mb-0">{{ text }}</pre>
18
- </div>
19
- </template>
20
-
21
- <script>
22
- export default {
23
- data() {
24
- return {
25
- text: ''
26
- }
27
- }
28
- }
29
- </script>
30
-
31
- <!-- b-form-textarea.vue -->
32
- ```
33
-
34
- ## Control sizing
35
-
36
- Set text height using the `size` prop to `sm` or `lg` for small or large respectively.
37
-
38
- To control width, place the input inside standard Bootstrap grid column.
39
-
40
- ```html
41
- <b-container fluid>
42
- <b-row>
43
- <b-col sm="2">
44
- <label for="textarea-small">Small:</label>
45
- </b-col>
46
- <b-col sm="10">
47
- <b-form-textarea
48
- id="textarea-small"
49
- size="sm"
50
- placeholder="Small textarea"
51
- ></b-form-textarea>
52
- </b-col>
53
- </b-row>
54
-
55
- <b-row class="mt-2">
56
- <b-col sm="2">
57
- <label for="textarea-default">Default:</label>
58
- </b-col>
59
- <b-col sm="10">
60
- <b-form-textarea
61
- id="textarea-default"
62
- placeholder="Default textarea"
63
- ></b-form-textarea>
64
- </b-col>
65
- </b-row>
66
-
67
- <b-row class="mt-2">
68
- <b-col sm="2">
69
- <label for="textarea-large">Large:</label>
70
- </b-col>
71
- <b-col sm="10">
72
- <b-form-textarea
73
- id="textarea-large"
74
- size="lg"
75
- placeholder="Large textarea"
76
- ></b-form-textarea>
77
- </b-col>
78
- </b-row>
79
- </b-container>
80
-
81
- <!-- b-form-textarea-sizes.vue -->
82
- ```
83
-
84
- ## Displayed rows
85
-
86
- To set the height of `<b-form-textarea>`, set the `rows` prop to the desired number of rows. If no
87
- value is provided to `rows`, then it will default to `2` (the browser default and minimum acceptable
88
- value). Setting it to null or a value below 2 will result in the default of `2` being used.
89
-
90
- ```html
91
- <div>
92
- <b-form-textarea
93
- id="textarea-rows"
94
- placeholder="Tall textarea"
95
- rows="8"
96
- ></b-form-textarea>
97
- </div>
98
-
99
- <!-- b-form-textarea-rows.vue -->
100
- ```
101
-
102
- ### Disable resize handle
103
-
104
- Some web browsers will allow the user to re-size the height of the textarea. To disable this
105
- feature, set the `no-resize` prop to `true`.
106
-
107
- ```html
108
- <div>
109
- <b-form-textarea
110
- id="textarea-no-resize"
111
- placeholder="Fixed height textarea"
112
- rows="3"
113
- no-resize
114
- ></b-form-textarea>
115
- </div>
116
-
117
- <!-- b-form-textarea-no-resize.vue -->
118
- ```
119
-
120
- ### Auto height
121
-
122
- `<b-form-textarea>` can also automatically adjust its height (text rows) to fit the content, even as
123
- the user enters or deletes text. The height of the textarea will either grow or shrink to fit the
124
- content (grow to a maximum of `max-rows` or shrink to a minimum of `rows`).
125
-
126
- To set the initial minimum height (in rows), set the `rows` prop to the desired number of lines (or
127
- leave it at the default of `2`), And then set maximum rows that the text area will grow to (before
128
- showing a scrollbar) by setting the `max-rows` prop to the maximum number of lines of text.
129
-
130
- To make the height `sticky` (i.e. never shrink), set the `no-auto-shrink` prop to `true`. The
131
- `no-auto-shrink` props has no effect if `max-rows` is not set or is equal to or less than `rows`.
132
-
133
- Note that the resize handle of the textarea (if supported by the browser) will automatically be
134
- disabled in auto-height mode.
135
-
136
- ```html
137
- <b-container fluid>
138
- <b-row>
139
- <b-col sm="2">
140
- <label for="textarea-auto-height">Auto height:</label>
141
- </b-col>
142
- <b-col sm="10">
143
- <b-form-textarea
144
- id="textarea-auto-height"
145
- placeholder="Auto height textarea"
146
- rows="3"
147
- max-rows="8"
148
- ></b-form-textarea>
149
- </b-col>
150
- </b-row>
151
-
152
- <b-row class="mt-2">
153
- <b-col sm="2">
154
- <label for="textarea-no-auto-shrink">No auto-shrink:</label>
155
- </b-col>
156
- <b-col sm="10">
157
- <b-form-textarea
158
- id="textarea-no-auto-shrink"
159
- placeholder="Auto height (no-shrink) textarea"
160
- rows="3"
161
- max-rows="8"
162
- no-auto-shrink
163
- ></b-form-textarea>
164
- </b-col>
165
- </b-row>
166
- </b-container>
167
-
168
- <!-- b-form-textarea-auto-height.vue -->
169
- ```
170
-
171
- #### Auto height implementation note
172
-
173
- Auto-height works by computing the resulting height via CSS queries, hence the input has to be in
174
- document (DOM) and visible (not hidden via `display: none`). Initial height is computed on mount. If
175
- the browser client supports [`IntersectionObserver`](https://caniuse.com/intersectionobserver)
176
- (either natively or via [a polyfill](/docs#js)), `<b-form-textarea>` will take advantage of this to
177
- determine when the textarea becomes visible and will then compute the height. Refer to the
178
- [Browser support](/docs#browser) section on the getting started page.
179
-
180
- ## Contextual states
181
-
182
- Bootstrap includes validation styles for `valid` and `invalid` states on most form controls.
183
-
184
- Generally speaking, you'll want to use a particular state for specific types of feedback:
185
-
186
- - `false` (denotes invalid state) is great for when there's a blocking or required field. A user
187
- must fill in this field properly to submit the form.
188
- - `true` (denotes valid state) is ideal for situations when you have per-field validation throughout
189
- a form and want to encourage a user through the rest of the fields.
190
- - `null` Displays no validation state (neither valid nor invalid)
191
-
192
- To apply one of the contextual state icons on `<b-form-textarea>`, set the `state` prop to `false`
193
- (for invalid), `true` (for valid), or `null` (no validation state).
194
-
195
- ```html
196
- <template>
197
- <div>
198
- <b-form-textarea
199
- id="textarea-state"
200
- v-model="text"
201
- :state="text.length >= 10"
202
- placeholder="Enter at least 10 characters"
203
- rows="3"
204
- ></b-form-textarea>
205
- </div>
206
- </template>
207
-
208
- <script>
209
- export default {
210
- data() {
211
- return {
212
- text: ''
213
- }
214
- }
215
- }
216
- </script>
217
-
218
- <!-- b-form-textarea-state.vue -->
219
- ```
220
-
221
- ### Conveying contextual state to assistive technologies and colorblind users
222
-
223
- Using these contextual states to denote the state of a form control only provides a visual,
224
- color-based indication, which will not be conveyed to users of assistive technologies - such as
225
- screen readers - or to colorblind users.
226
-
227
- Ensure that an alternative indication of state is also provided. For instance, you could include a
228
- hint about state in the form control's `<label>` text itself, or by providing an additional help
229
- text block.
230
-
231
- ### `aria-invalid` attribute
232
-
233
- When `<b-form-textarea>` has an invalid contextual state (i.e. state is `false`) you may also want
234
- to set the prop `aria-invalid` to `true`, or one of the supported values:
235
-
236
- - `false`: No errors (default)
237
- - `true` or `'true'`: The value has failed validation.
238
- - `'grammar'`: A grammatical error has been detected.
239
- - `'spelling'` A spelling error has been detected.
240
-
241
- If the `state` prop is set to `false`, and the `aria-invalid` prop is not explicitly set,
242
- `<b-form-textarea>` will automatically set the `aria-invalid` attribute to `'true'`.
243
-
244
- ## Formatter support
245
-
246
- `<b-form-textarea>` optionally supports formatting by passing a function reference to the
247
- `formatter` prop.
248
-
249
- Formatting (when a formatter function is supplied) occurs when the control's native `input` and
250
- `change` events fire. You can use the boolean prop `lazy-formatter` to restrict the formatter
251
- function to being called on the control's native `blur` event.
252
-
253
- The `formatter` function receives two arguments: the raw `value` of the input element, and the
254
- native `event` object that triggered the format (if available).
255
-
256
- The `formatter` function should return the formatted value as a _string_.
257
-
258
- Formatting does not occur if a `formatter` is not provided.
259
-
260
- ```html
261
- <template>
262
- <div>
263
- <b-form-group
264
- label="Textarea with formatter (on input)"
265
- label-for="textarea-formatter"
266
- description="We will convert your text to lowercase instantly"
267
- class="mb-0"
268
- >
269
- <b-form-textarea
270
- id="textarea-formatter"
271
- v-model="text1"
272
- placeholder="Enter your text"
273
- :formatter="formatter"
274
- ></b-form-textarea>
275
- </b-form-group>
276
- <p style="white-space: pre-line"><b>Value:</b> {{ text1 }}</p>
277
-
278
- <b-form-group
279
- label="Textarea with lazy formatter (on blur)"
280
- label-for="textarea-lazy"
281
- description="This one is a little lazy!"
282
- class="mb-0"
283
- >
284
- <b-form-textarea
285
- id="textarea-lazy"
286
- v-model="text2"
287
- placeholder="Enter your text"
288
- lazy-formatter
289
- :formatter="formatter"
290
- ></b-form-textarea>
291
- </b-form-group>
292
- <p class="mb-0" style="white-space: pre-line"><b>Value:</b> {{ text2 }}</p>
293
- </div>
294
- </template>
295
-
296
- <script>
297
- export default {
298
- data() {
299
- return {
300
- text1: '',
301
- text2: ''
302
- }
303
- },
304
- methods: {
305
- formatter(value) {
306
- return value.toLowerCase()
307
- }
308
- }
309
- }
310
- </script>
311
-
312
- <!-- b-form-textarea-formatter.vue -->
313
- ```
314
-
315
- **Note:** With non-lazy formatting, if the cursor is not at the end of the input value, the cursor
316
- may jump to the end _after_ a character is typed. You can use the provided event object and the
317
- `event.target` to access the native input's selection methods and properties to control where the
318
- insertion point is. This is left as an exercise for the reader.
319
-
320
- ## Readonly plain text
321
-
322
- If you want to have `<b-form-textarea readonly>` elements in your form styled as plain text, set the
323
- `plaintext` prop (no need to set `readonly` as it will be set automatically) to remove the default
324
- form field styling and preserve the correct text size, margin, padding and height.
325
-
326
- ```html
327
- <template>
328
- <div>
329
- <b-form-textarea id="textarea-plaintext" plaintext :value="text"></b-form-textarea>
330
- </div>
331
- </template>
332
-
333
- <script>
334
- export default {
335
- data() {
336
- return {
337
- text: "This is some text.\nIt is read only and doesn't look like an input."
338
- }
339
- }
340
- }
341
- </script>
342
-
343
- <!-- b-form-textarea-plaintext.vue -->
344
- ```
345
-
346
- ## `v-model` modifiers
347
-
348
- Vue does not officially support `.lazy`, `.trim`, and `.number` modifiers on the `v-model` of custom
349
- component based inputs, and may generate a bad user experience. Avoid using Vue's native modifiers.
350
-
351
- To get around this, `<b-form-textarea>` has three boolean props `trim`, `number`, and `lazy` which
352
- emulate the native Vue `v-model` modifiers `.trim` and `.number` and `.lazy` respectively. The
353
- `lazy` prop will update the v-model on `change`/`blur`events.
354
-
355
- **Notes:**
356
-
357
- - The `number` prop takes precedence over the `trim` prop (i.e. `trim` will have no effect when
358
- `number` is set).
359
- - When using the `number` prop, and if the value can be parsed as a number (via `parseFloat`) it
360
- will return a value of type `Number` to the `v-model`, otherwise the original input value is
361
- returned as type `String`. This is the same behaviour as the native `.number` modifier.
362
- - The `trim` and `number` modifier props do not affect the value returned by the `input` or `change`
363
- events. These events will always return the string value of the content of `<textarea>` after
364
- optional formatting (which may not match the value returned via the `v-model` `update` event,
365
- which handles the modifiers).
366
-
367
- ## Debounce support
368
-
369
- As an alternative to the `lazy` modifier prop, `<b-form-textarea>` optionally supports debouncing
370
- user input, updating the `v-model` after a period of idle time from when the last character was
371
- entered by the user (or a `change` event occurs). If the user enters a new character (or deletes
372
- characters) before the idle timeout expires, the timeout is re-started.
373
-
374
- To enable debouncing, set the prop `debounce` to any integer greater than zero. The value is
375
- specified in milliseconds. Setting `debounce` to `0` will disable debouncing.
376
-
377
- Note: debouncing will _not_ occur if the `lazy` prop is set.
378
-
379
- ```html
380
- <template>
381
- <div>
382
- <b-form-textarea v-model="value" debounce="500" rows="3" max-rows="5"></b-form-textarea>
383
- <pre class="mt-2 mb-0">{{ value }}</pre>
384
- </div>
385
- </template>
386
-
387
- <script>
388
- export default {
389
- data() {
390
- return {
391
- value: ''
392
- }
393
- }
394
- }
395
- </script>
396
-
397
- <!-- b-form-textarea-debounce.vue -->
398
- ```
399
-
400
- ## Autofocus
401
-
402
- When the `autofocus` prop is set on `<b-form-textarea>`, the textarea will be auto-focused when it
403
- is inserted (i.e. **mounted**) into the document or re-activated when inside a Vue `<keep-alive>`
404
- component. Note that this prop **does not** set the `autofocus` attribute on the textarea, nor can
405
- it tell when the textarea becomes visible.
406
-
407
- ## Native and custom events
408
-
409
- All native events (other than the custom `input` and `change` events) are supported, without the
410
- need for the `.native` modifier.
411
-
412
- The custom `input` and `change` events receive a single argument of the current `value` (after any
413
- formatting has been applied), and are triggered by user interaction.
414
-
415
- The custom `update` event is passed the input value, and is emitted whenever the `v-model` needs
416
- updating (it is emitted before `input`, `change`. and `blur` as needed).
417
-
418
- You can always access the native `input` and `change` events by using the `.native` modifier.
419
-
420
- ## Exposed input properties and methods
421
-
422
- `<b-form-textarea>` exposes several of the native input element's properties and methods on the
423
- component reference (i.e. assign a `ref` to your `<b-form-textarea ref="foo" ...>` and use
424
- `this.$refs['foo'].propertyName` or `this.$refs['foo'].methodName(...)`).
425
-
426
- ### Input properties
427
-
428
- | Property | Notes |
429
- | --------------------- | ---------- |
430
- | `.selectionStart` | Read/Write |
431
- | `.selectionEnd` | Read/Write |
432
- | `.selectionDirection` | Read/Write |
433
- | `.validity` | Read only |
434
- | `.validationMessage` | Read only |
435
- | `.willValidate` | Read only |
436
-
437
- ### Input methods
438
-
439
- | Method | Notes |
440
- | ---------------------- | --------------------------------- |
441
- | `.focus()` | Focus the input |
442
- | `.blur()` | Remove focus from the input |
443
- | `.select()` | Selects all text within the input |
444
- | `.setSelectionRange()` | |
445
- | `.setRangeText()` | |
446
- | `.setCustomValidity()` | |
447
- | `.checkValidity()` | |
448
- | `.reportValidity()` | |
449
-
450
- Refer to https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement for more information on
451
- these methods and properties. Support will vary based on input type.
452
-
453
- <!-- Component reference added automatically from component package.json -->