@gitlab/ui 114.1.0 → 114.1.2

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 (141) hide show
  1. package/dist/components/base/breadcrumb/breadcrumb.js +4 -16
  2. package/dist/index.css +1 -1
  3. package/dist/index.css.map +1 -1
  4. package/package.json +7 -26
  5. package/src/components/base/breadcrumb/breadcrumb.scss +18 -2
  6. package/src/components/base/breadcrumb/breadcrumb.vue +4 -17
  7. package/CHANGELOG.md +0 -13139
  8. package/src/vendor/bootstrap/LICENSE +0 -11
  9. package/src/vendor/bootstrap-vue/LICENSE +0 -11
  10. package/src/vendor/bootstrap-vue/package.json +0 -144
  11. package/src/vendor/bootstrap-vue/src/components/button/MODIFICATIONS.md +0 -16
  12. package/src/vendor/bootstrap-vue/src/components/button/README.md +0 -240
  13. package/src/vendor/bootstrap-vue/src/components/button/button-close.spec.js +0 -210
  14. package/src/vendor/bootstrap-vue/src/components/button/button.spec.js +0 -349
  15. package/src/vendor/bootstrap-vue/src/components/button/package.json +0 -105
  16. package/src/vendor/bootstrap-vue/src/components/dropdown/README.md +0 -730
  17. package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-divider.spec.js +0 -58
  18. package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-form.spec.js +0 -110
  19. package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-group.spec.js +0 -94
  20. package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-header.spec.js +0 -73
  21. package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-item-button.spec.js +0 -117
  22. package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-item.spec.js +0 -147
  23. package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-text.spec.js +0 -59
  24. package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown.spec.js +0 -1121
  25. package/src/vendor/bootstrap-vue/src/components/dropdown/package.json +0 -368
  26. package/src/vendor/bootstrap-vue/src/components/form/README.md +0 -365
  27. package/src/vendor/bootstrap-vue/src/components/form/form-invalid-feedback.spec.js +0 -170
  28. package/src/vendor/bootstrap-vue/src/components/form/form-text.spec.js +0 -93
  29. package/src/vendor/bootstrap-vue/src/components/form/form-valid-feedback.spec.js +0 -157
  30. package/src/vendor/bootstrap-vue/src/components/form/form.spec.js +0 -97
  31. package/src/vendor/bootstrap-vue/src/components/form/package.json +0 -112
  32. package/src/vendor/bootstrap-vue/src/components/form-checkbox/README.md +0 -691
  33. package/src/vendor/bootstrap-vue/src/components/form-checkbox/form-checkbox-group.spec.js +0 -525
  34. package/src/vendor/bootstrap-vue/src/components/form-checkbox/form-checkbox.spec.js +0 -922
  35. package/src/vendor/bootstrap-vue/src/components/form-checkbox/package.json +0 -172
  36. package/src/vendor/bootstrap-vue/src/components/form-group/README.md +0 -339
  37. package/src/vendor/bootstrap-vue/src/components/form-group/form-group.spec.js +0 -477
  38. package/src/vendor/bootstrap-vue/src/components/form-group/package.json +0 -183
  39. package/src/vendor/bootstrap-vue/src/components/form-radio/README.md +0 -437
  40. package/src/vendor/bootstrap-vue/src/components/form-radio/form-radio-group.spec.js +0 -357
  41. package/src/vendor/bootstrap-vue/src/components/form-radio/form-radio.spec.js +0 -587
  42. package/src/vendor/bootstrap-vue/src/components/form-radio/package.json +0 -162
  43. package/src/vendor/bootstrap-vue/src/components/form-select/README.md +0 -504
  44. package/src/vendor/bootstrap-vue/src/components/form-select/form-select-option-group.spec.js +0 -138
  45. package/src/vendor/bootstrap-vue/src/components/form-select/form-select-option.spec.js +0 -75
  46. package/src/vendor/bootstrap-vue/src/components/form-select/form-select.spec.js +0 -723
  47. package/src/vendor/bootstrap-vue/src/components/form-select/package.json +0 -132
  48. package/src/vendor/bootstrap-vue/src/components/form-textarea/README.md +0 -453
  49. package/src/vendor/bootstrap-vue/src/components/form-textarea/form-textarea.spec.js +0 -1000
  50. package/src/vendor/bootstrap-vue/src/components/form-textarea/package.json +0 -122
  51. package/src/vendor/bootstrap-vue/src/components/layout/README.md +0 -791
  52. package/src/vendor/bootstrap-vue/src/components/layout/col.spec.js +0 -192
  53. package/src/vendor/bootstrap-vue/src/components/layout/form-row.spec.js +0 -45
  54. package/src/vendor/bootstrap-vue/src/components/layout/package.json +0 -99
  55. package/src/vendor/bootstrap-vue/src/components/link/README.md +0 -76
  56. package/src/vendor/bootstrap-vue/src/components/link/link.spec.js +0 -434
  57. package/src/vendor/bootstrap-vue/src/components/link/package.json +0 -57
  58. package/src/vendor/bootstrap-vue/src/components/modal/MODIFICATIONS.md +0 -30
  59. package/src/vendor/bootstrap-vue/src/components/modal/README.md +0 -1067
  60. package/src/vendor/bootstrap-vue/src/components/modal/helpers/bv-modal-event.class.spec.js +0 -82
  61. package/src/vendor/bootstrap-vue/src/components/modal/modal.spec.js +0 -1418
  62. package/src/vendor/bootstrap-vue/src/components/modal/package.json +0 -544
  63. package/src/vendor/bootstrap-vue/src/components/nav/README.md +0 -362
  64. package/src/vendor/bootstrap-vue/src/components/nav/nav-item.spec.js +0 -127
  65. package/src/vendor/bootstrap-vue/src/components/nav/nav.spec.js +0 -177
  66. package/src/vendor/bootstrap-vue/src/components/nav/package.json +0 -73
  67. package/src/vendor/bootstrap-vue/src/components/popover/README.md +0 -919
  68. package/src/vendor/bootstrap-vue/src/components/popover/package.json +0 -261
  69. package/src/vendor/bootstrap-vue/src/components/popover/popover.spec.js +0 -198
  70. package/src/vendor/bootstrap-vue/src/components/table/README.md +0 -3157
  71. package/src/vendor/bootstrap-vue/src/components/table/helpers/default-sort-compare.spec.js +0 -112
  72. package/src/vendor/bootstrap-vue/src/components/table/helpers/normalize-fields.spec.js +0 -93
  73. package/src/vendor/bootstrap-vue/src/components/table/package.json +0 -1763
  74. package/src/vendor/bootstrap-vue/src/components/table/table-busy.spec.js +0 -150
  75. package/src/vendor/bootstrap-vue/src/components/table/table-caption.spec.js +0 -176
  76. package/src/vendor/bootstrap-vue/src/components/table/table-colgroup.spec.js +0 -81
  77. package/src/vendor/bootstrap-vue/src/components/table/table-filtering.spec.js +0 -409
  78. package/src/vendor/bootstrap-vue/src/components/table/table-item-formatter.spec.js +0 -56
  79. package/src/vendor/bootstrap-vue/src/components/table/table-lite.spec.js +0 -682
  80. package/src/vendor/bootstrap-vue/src/components/table/table-pagination.spec.js +0 -133
  81. package/src/vendor/bootstrap-vue/src/components/table/table-primarykey.spec.js +0 -83
  82. package/src/vendor/bootstrap-vue/src/components/table/table-provider.spec.js +0 -411
  83. package/src/vendor/bootstrap-vue/src/components/table/table-row-details.spec.js +0 -459
  84. package/src/vendor/bootstrap-vue/src/components/table/table-selectable.spec.js +0 -1182
  85. package/src/vendor/bootstrap-vue/src/components/table/table-simple.spec.js +0 -206
  86. package/src/vendor/bootstrap-vue/src/components/table/table-sorting.spec.js +0 -858
  87. package/src/vendor/bootstrap-vue/src/components/table/table-sticky-column.spec.js +0 -377
  88. package/src/vendor/bootstrap-vue/src/components/table/table-tbody-bottom-row.spec.js +0 -94
  89. package/src/vendor/bootstrap-vue/src/components/table/table-tbody-row-events.spec.js +0 -529
  90. package/src/vendor/bootstrap-vue/src/components/table/table-tbody-top-row.spec.js +0 -88
  91. package/src/vendor/bootstrap-vue/src/components/table/table-tbody-transition.spec.js +0 -83
  92. package/src/vendor/bootstrap-vue/src/components/table/table-tfoot-custom.spec.js +0 -91
  93. package/src/vendor/bootstrap-vue/src/components/table/table-tfoot-events.spec.js +0 -137
  94. package/src/vendor/bootstrap-vue/src/components/table/table-thead-events.spec.js +0 -155
  95. package/src/vendor/bootstrap-vue/src/components/table/table-thead-top.spec.js +0 -96
  96. package/src/vendor/bootstrap-vue/src/components/table/table.spec.js +0 -692
  97. package/src/vendor/bootstrap-vue/src/components/tabs/README.md +0 -433
  98. package/src/vendor/bootstrap-vue/src/components/tabs/package.json +0 -205
  99. package/src/vendor/bootstrap-vue/src/components/tabs/tab.spec.js +0 -330
  100. package/src/vendor/bootstrap-vue/src/components/tabs/tabs.spec.js +0 -778
  101. package/src/vendor/bootstrap-vue/src/components/toast/README.md +0 -655
  102. package/src/vendor/bootstrap-vue/src/components/toast/helpers/bv-toast.spec.js +0 -117
  103. package/src/vendor/bootstrap-vue/src/components/toast/package.json +0 -184
  104. package/src/vendor/bootstrap-vue/src/components/toast/toast.spec.js +0 -294
  105. package/src/vendor/bootstrap-vue/src/components/toast/toaster.spec.js +0 -77
  106. package/src/vendor/bootstrap-vue/src/components/tooltip/README.md +0 -559
  107. package/src/vendor/bootstrap-vue/src/components/tooltip/package.json +0 -258
  108. package/src/vendor/bootstrap-vue/src/components/tooltip/tooltip.spec.js +0 -1240
  109. package/src/vendor/bootstrap-vue/src/components/transition/package.json +0 -5
  110. package/src/vendor/bootstrap-vue/src/components/transporter/package.json +0 -5
  111. package/src/vendor/bootstrap-vue/src/components/transporter/transporter.spec.js +0 -85
  112. package/src/vendor/bootstrap-vue/src/directives/modal/modal.spec.js +0 -191
  113. package/src/vendor/bootstrap-vue/src/directives/tooltip/README.md +0 -521
  114. package/src/vendor/bootstrap-vue/src/directives/tooltip/package.json +0 -131
  115. package/src/vendor/bootstrap-vue/src/directives/tooltip/tooltip.spec.js +0 -190
  116. package/src/vendor/bootstrap-vue/src/directives/visible/README.md +0 -244
  117. package/src/vendor/bootstrap-vue/src/directives/visible/package.json +0 -24
  118. package/src/vendor/bootstrap-vue/src/mixins/attrs.spec.js +0 -194
  119. package/src/vendor/bootstrap-vue/src/mixins/click-out.spec.js +0 -52
  120. package/src/vendor/bootstrap-vue/src/mixins/focus-in.spec.js +0 -53
  121. package/src/vendor/bootstrap-vue/src/mixins/listen-on-document.spec.js +0 -117
  122. package/src/vendor/bootstrap-vue/src/mixins/listen-on-root.spec.js +0 -77
  123. package/src/vendor/bootstrap-vue/src/mixins/listen-on-window.spec.js +0 -115
  124. package/src/vendor/bootstrap-vue/src/mixins/listeners.spec.js +0 -245
  125. package/src/vendor/bootstrap-vue/src/utils/bv-event.class.spec.js +0 -66
  126. package/src/vendor/bootstrap-vue/src/utils/clone-deep.spec.js +0 -70
  127. package/src/vendor/bootstrap-vue/src/utils/config.spec.js +0 -169
  128. package/src/vendor/bootstrap-vue/src/utils/css-escape.spec.js +0 -82
  129. package/src/vendor/bootstrap-vue/src/utils/dom.spec.js +0 -291
  130. package/src/vendor/bootstrap-vue/src/utils/events.spec.js +0 -41
  131. package/src/vendor/bootstrap-vue/src/utils/get.spec.js +0 -109
  132. package/src/vendor/bootstrap-vue/src/utils/inspect.spec.js +0 -251
  133. package/src/vendor/bootstrap-vue/src/utils/loose-equal.spec.js +0 -203
  134. package/src/vendor/bootstrap-vue/src/utils/normalize-slot.spec.js +0 -63
  135. package/src/vendor/bootstrap-vue/src/utils/number.spec.js +0 -72
  136. package/src/vendor/bootstrap-vue/src/utils/object.spec.js +0 -61
  137. package/src/vendor/bootstrap-vue/src/utils/props.spec.js +0 -112
  138. package/src/vendor/bootstrap-vue/src/utils/router.spec.js +0 -248
  139. package/src/vendor/bootstrap-vue/src/utils/string.spec.js +0 -65
  140. package/src/vendor/bootstrap-vue/src/utils/stringify-object-values.spec.js +0 -47
  141. 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 -->