@gitlab/ui 114.1.0 → 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.
- package/package.json +7 -26
- package/CHANGELOG.md +0 -13139
- package/src/vendor/bootstrap/LICENSE +0 -11
- package/src/vendor/bootstrap-vue/LICENSE +0 -11
- package/src/vendor/bootstrap-vue/package.json +0 -144
- package/src/vendor/bootstrap-vue/src/components/button/MODIFICATIONS.md +0 -16
- package/src/vendor/bootstrap-vue/src/components/button/README.md +0 -240
- package/src/vendor/bootstrap-vue/src/components/button/button-close.spec.js +0 -210
- package/src/vendor/bootstrap-vue/src/components/button/button.spec.js +0 -349
- package/src/vendor/bootstrap-vue/src/components/button/package.json +0 -105
- package/src/vendor/bootstrap-vue/src/components/dropdown/README.md +0 -730
- package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-divider.spec.js +0 -58
- package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-form.spec.js +0 -110
- package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-group.spec.js +0 -94
- package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-header.spec.js +0 -73
- package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-item-button.spec.js +0 -117
- package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-item.spec.js +0 -147
- package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-text.spec.js +0 -59
- package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown.spec.js +0 -1121
- package/src/vendor/bootstrap-vue/src/components/dropdown/package.json +0 -368
- package/src/vendor/bootstrap-vue/src/components/form/README.md +0 -365
- package/src/vendor/bootstrap-vue/src/components/form/form-invalid-feedback.spec.js +0 -170
- package/src/vendor/bootstrap-vue/src/components/form/form-text.spec.js +0 -93
- package/src/vendor/bootstrap-vue/src/components/form/form-valid-feedback.spec.js +0 -157
- package/src/vendor/bootstrap-vue/src/components/form/form.spec.js +0 -97
- package/src/vendor/bootstrap-vue/src/components/form/package.json +0 -112
- package/src/vendor/bootstrap-vue/src/components/form-checkbox/README.md +0 -691
- package/src/vendor/bootstrap-vue/src/components/form-checkbox/form-checkbox-group.spec.js +0 -525
- package/src/vendor/bootstrap-vue/src/components/form-checkbox/form-checkbox.spec.js +0 -922
- package/src/vendor/bootstrap-vue/src/components/form-checkbox/package.json +0 -172
- package/src/vendor/bootstrap-vue/src/components/form-group/README.md +0 -339
- package/src/vendor/bootstrap-vue/src/components/form-group/form-group.spec.js +0 -477
- package/src/vendor/bootstrap-vue/src/components/form-group/package.json +0 -183
- package/src/vendor/bootstrap-vue/src/components/form-radio/README.md +0 -437
- package/src/vendor/bootstrap-vue/src/components/form-radio/form-radio-group.spec.js +0 -357
- package/src/vendor/bootstrap-vue/src/components/form-radio/form-radio.spec.js +0 -587
- package/src/vendor/bootstrap-vue/src/components/form-radio/package.json +0 -162
- package/src/vendor/bootstrap-vue/src/components/form-select/README.md +0 -504
- package/src/vendor/bootstrap-vue/src/components/form-select/form-select-option-group.spec.js +0 -138
- package/src/vendor/bootstrap-vue/src/components/form-select/form-select-option.spec.js +0 -75
- package/src/vendor/bootstrap-vue/src/components/form-select/form-select.spec.js +0 -723
- package/src/vendor/bootstrap-vue/src/components/form-select/package.json +0 -132
- package/src/vendor/bootstrap-vue/src/components/form-textarea/README.md +0 -453
- package/src/vendor/bootstrap-vue/src/components/form-textarea/form-textarea.spec.js +0 -1000
- package/src/vendor/bootstrap-vue/src/components/form-textarea/package.json +0 -122
- package/src/vendor/bootstrap-vue/src/components/layout/README.md +0 -791
- package/src/vendor/bootstrap-vue/src/components/layout/col.spec.js +0 -192
- package/src/vendor/bootstrap-vue/src/components/layout/form-row.spec.js +0 -45
- package/src/vendor/bootstrap-vue/src/components/layout/package.json +0 -99
- package/src/vendor/bootstrap-vue/src/components/link/README.md +0 -76
- package/src/vendor/bootstrap-vue/src/components/link/link.spec.js +0 -434
- package/src/vendor/bootstrap-vue/src/components/link/package.json +0 -57
- package/src/vendor/bootstrap-vue/src/components/modal/MODIFICATIONS.md +0 -30
- package/src/vendor/bootstrap-vue/src/components/modal/README.md +0 -1067
- package/src/vendor/bootstrap-vue/src/components/modal/helpers/bv-modal-event.class.spec.js +0 -82
- package/src/vendor/bootstrap-vue/src/components/modal/modal.spec.js +0 -1418
- package/src/vendor/bootstrap-vue/src/components/modal/package.json +0 -544
- package/src/vendor/bootstrap-vue/src/components/nav/README.md +0 -362
- package/src/vendor/bootstrap-vue/src/components/nav/nav-item.spec.js +0 -127
- package/src/vendor/bootstrap-vue/src/components/nav/nav.spec.js +0 -177
- package/src/vendor/bootstrap-vue/src/components/nav/package.json +0 -73
- package/src/vendor/bootstrap-vue/src/components/popover/README.md +0 -919
- package/src/vendor/bootstrap-vue/src/components/popover/package.json +0 -261
- package/src/vendor/bootstrap-vue/src/components/popover/popover.spec.js +0 -198
- package/src/vendor/bootstrap-vue/src/components/table/README.md +0 -3157
- package/src/vendor/bootstrap-vue/src/components/table/helpers/default-sort-compare.spec.js +0 -112
- package/src/vendor/bootstrap-vue/src/components/table/helpers/normalize-fields.spec.js +0 -93
- package/src/vendor/bootstrap-vue/src/components/table/package.json +0 -1763
- package/src/vendor/bootstrap-vue/src/components/table/table-busy.spec.js +0 -150
- package/src/vendor/bootstrap-vue/src/components/table/table-caption.spec.js +0 -176
- package/src/vendor/bootstrap-vue/src/components/table/table-colgroup.spec.js +0 -81
- package/src/vendor/bootstrap-vue/src/components/table/table-filtering.spec.js +0 -409
- package/src/vendor/bootstrap-vue/src/components/table/table-item-formatter.spec.js +0 -56
- package/src/vendor/bootstrap-vue/src/components/table/table-lite.spec.js +0 -682
- package/src/vendor/bootstrap-vue/src/components/table/table-pagination.spec.js +0 -133
- package/src/vendor/bootstrap-vue/src/components/table/table-primarykey.spec.js +0 -83
- package/src/vendor/bootstrap-vue/src/components/table/table-provider.spec.js +0 -411
- package/src/vendor/bootstrap-vue/src/components/table/table-row-details.spec.js +0 -459
- package/src/vendor/bootstrap-vue/src/components/table/table-selectable.spec.js +0 -1182
- package/src/vendor/bootstrap-vue/src/components/table/table-simple.spec.js +0 -206
- package/src/vendor/bootstrap-vue/src/components/table/table-sorting.spec.js +0 -858
- package/src/vendor/bootstrap-vue/src/components/table/table-sticky-column.spec.js +0 -377
- package/src/vendor/bootstrap-vue/src/components/table/table-tbody-bottom-row.spec.js +0 -94
- package/src/vendor/bootstrap-vue/src/components/table/table-tbody-row-events.spec.js +0 -529
- package/src/vendor/bootstrap-vue/src/components/table/table-tbody-top-row.spec.js +0 -88
- package/src/vendor/bootstrap-vue/src/components/table/table-tbody-transition.spec.js +0 -83
- package/src/vendor/bootstrap-vue/src/components/table/table-tfoot-custom.spec.js +0 -91
- package/src/vendor/bootstrap-vue/src/components/table/table-tfoot-events.spec.js +0 -137
- package/src/vendor/bootstrap-vue/src/components/table/table-thead-events.spec.js +0 -155
- package/src/vendor/bootstrap-vue/src/components/table/table-thead-top.spec.js +0 -96
- package/src/vendor/bootstrap-vue/src/components/table/table.spec.js +0 -692
- package/src/vendor/bootstrap-vue/src/components/tabs/README.md +0 -433
- package/src/vendor/bootstrap-vue/src/components/tabs/package.json +0 -205
- package/src/vendor/bootstrap-vue/src/components/tabs/tab.spec.js +0 -330
- package/src/vendor/bootstrap-vue/src/components/tabs/tabs.spec.js +0 -778
- package/src/vendor/bootstrap-vue/src/components/toast/README.md +0 -655
- package/src/vendor/bootstrap-vue/src/components/toast/helpers/bv-toast.spec.js +0 -117
- package/src/vendor/bootstrap-vue/src/components/toast/package.json +0 -184
- package/src/vendor/bootstrap-vue/src/components/toast/toast.spec.js +0 -294
- package/src/vendor/bootstrap-vue/src/components/toast/toaster.spec.js +0 -77
- package/src/vendor/bootstrap-vue/src/components/tooltip/README.md +0 -559
- package/src/vendor/bootstrap-vue/src/components/tooltip/package.json +0 -258
- package/src/vendor/bootstrap-vue/src/components/tooltip/tooltip.spec.js +0 -1240
- package/src/vendor/bootstrap-vue/src/components/transition/package.json +0 -5
- package/src/vendor/bootstrap-vue/src/components/transporter/package.json +0 -5
- package/src/vendor/bootstrap-vue/src/components/transporter/transporter.spec.js +0 -85
- package/src/vendor/bootstrap-vue/src/directives/modal/modal.spec.js +0 -191
- package/src/vendor/bootstrap-vue/src/directives/tooltip/README.md +0 -521
- package/src/vendor/bootstrap-vue/src/directives/tooltip/package.json +0 -131
- package/src/vendor/bootstrap-vue/src/directives/tooltip/tooltip.spec.js +0 -190
- package/src/vendor/bootstrap-vue/src/directives/visible/README.md +0 -244
- package/src/vendor/bootstrap-vue/src/directives/visible/package.json +0 -24
- package/src/vendor/bootstrap-vue/src/mixins/attrs.spec.js +0 -194
- package/src/vendor/bootstrap-vue/src/mixins/click-out.spec.js +0 -52
- package/src/vendor/bootstrap-vue/src/mixins/focus-in.spec.js +0 -53
- package/src/vendor/bootstrap-vue/src/mixins/listen-on-document.spec.js +0 -117
- package/src/vendor/bootstrap-vue/src/mixins/listen-on-root.spec.js +0 -77
- package/src/vendor/bootstrap-vue/src/mixins/listen-on-window.spec.js +0 -115
- package/src/vendor/bootstrap-vue/src/mixins/listeners.spec.js +0 -245
- package/src/vendor/bootstrap-vue/src/utils/bv-event.class.spec.js +0 -66
- package/src/vendor/bootstrap-vue/src/utils/clone-deep.spec.js +0 -70
- package/src/vendor/bootstrap-vue/src/utils/config.spec.js +0 -169
- package/src/vendor/bootstrap-vue/src/utils/css-escape.spec.js +0 -82
- package/src/vendor/bootstrap-vue/src/utils/dom.spec.js +0 -291
- package/src/vendor/bootstrap-vue/src/utils/events.spec.js +0 -41
- package/src/vendor/bootstrap-vue/src/utils/get.spec.js +0 -109
- package/src/vendor/bootstrap-vue/src/utils/inspect.spec.js +0 -251
- package/src/vendor/bootstrap-vue/src/utils/loose-equal.spec.js +0 -203
- package/src/vendor/bootstrap-vue/src/utils/normalize-slot.spec.js +0 -63
- package/src/vendor/bootstrap-vue/src/utils/number.spec.js +0 -72
- package/src/vendor/bootstrap-vue/src/utils/object.spec.js +0 -61
- package/src/vendor/bootstrap-vue/src/utils/props.spec.js +0 -112
- package/src/vendor/bootstrap-vue/src/utils/router.spec.js +0 -248
- package/src/vendor/bootstrap-vue/src/utils/string.spec.js +0 -65
- package/src/vendor/bootstrap-vue/src/utils/stringify-object-values.spec.js +0 -47
- package/src/vendor/bootstrap-vue/src/utils/warn.spec.js +0 -54
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
This project includes modified code from the following open source project:
|
|
2
|
-
|
|
3
|
-
Bootstrap
|
|
4
|
-
|
|
5
|
-
Original work Copyright © 2011-2022 Twitter, Inc., 2011-2022 The Bootstrap Authors
|
|
6
|
-
Source: https://github.com/twbs
|
|
7
|
-
License: MIT License
|
|
8
|
-
|
|
9
|
-
Modifications to the original Bootstrap code have been made by GitLab B.V.
|
|
10
|
-
|
|
11
|
-
The full text of the MIT License can be found in the LICENSE file in the root directory of this project.
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
This project includes modified code from the following open source project:
|
|
2
|
-
|
|
3
|
-
Bootstrap Vue
|
|
4
|
-
|
|
5
|
-
Original work Copyright © 2016-2020 BootstrapVue
|
|
6
|
-
Source: https://github.com/bootstrap-vue/bootstrap-vue
|
|
7
|
-
License: MIT License
|
|
8
|
-
|
|
9
|
-
Modifications to the original BootstrapVue code have been made by GitLab B.V.
|
|
10
|
-
|
|
11
|
-
The full text of the MIT License can be found in the LICENSE file in the root directory of this project.
|
|
@@ -1,144 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "bootstrap-vue",
|
|
3
|
-
"version": "2.23.1",
|
|
4
|
-
"description": "With many components and several directives, BootstrapVue provides one of the most comprehensive implementations of the Bootstrap v4 component and grid system available for Vue.js v2.6, complete with extensive and automated WAI-ARIA accessibility markup.",
|
|
5
|
-
"main": "./dist/bootstrap-vue.common.js",
|
|
6
|
-
"web": "./dist/bootstrap-vue.js",
|
|
7
|
-
"module": "./esm/index.js",
|
|
8
|
-
"jsnext:main": "./esm/index.js",
|
|
9
|
-
"source": "./src/index.js",
|
|
10
|
-
"sass": "./src/index.scss",
|
|
11
|
-
"style": "./dist/bootstrap-vue.css",
|
|
12
|
-
"license": "MIT",
|
|
13
|
-
"repository": "bootstrap-vue/bootstrap-vue",
|
|
14
|
-
"homepage": "https://bootstrap-vue.org",
|
|
15
|
-
"types": "./src/index.d.ts",
|
|
16
|
-
"web-types": "./dist/web-types.json",
|
|
17
|
-
"vetur": {
|
|
18
|
-
"tags": "./dist/vetur-tags.json",
|
|
19
|
-
"attributes": "./dist/vetur-attributes.json"
|
|
20
|
-
},
|
|
21
|
-
"contributors": [
|
|
22
|
-
{
|
|
23
|
-
"name": "Pooya Parsa",
|
|
24
|
-
"url": "https://github.com/pi0"
|
|
25
|
-
},
|
|
26
|
-
{
|
|
27
|
-
"name": "Troy Morehouse",
|
|
28
|
-
"url": "https://github.com/tmorehouse"
|
|
29
|
-
},
|
|
30
|
-
{
|
|
31
|
-
"name": "Jacob Müller",
|
|
32
|
-
"url": "https://github.com/jackmu95"
|
|
33
|
-
},
|
|
34
|
-
{
|
|
35
|
-
"name": "Hiws",
|
|
36
|
-
"url": "https://github.com/Hiws"
|
|
37
|
-
},
|
|
38
|
-
{
|
|
39
|
-
"name": "Vitaly Mosin",
|
|
40
|
-
"url": "https://github.com/mosinve"
|
|
41
|
-
},
|
|
42
|
-
{
|
|
43
|
-
"name": "Alex Regan",
|
|
44
|
-
"url": "https://github.com/alexsasharegan"
|
|
45
|
-
}
|
|
46
|
-
],
|
|
47
|
-
"files": [
|
|
48
|
-
"dist",
|
|
49
|
-
"esm",
|
|
50
|
-
"src"
|
|
51
|
-
],
|
|
52
|
-
"sideEffects": [
|
|
53
|
-
"**/*.css",
|
|
54
|
-
"**/*.scss",
|
|
55
|
-
"**/*.vue",
|
|
56
|
-
"./types"
|
|
57
|
-
],
|
|
58
|
-
"scripts": {
|
|
59
|
-
"audit": "improved-yarn-audit --ignore-dev-deps --min-severity moderate -e 1488",
|
|
60
|
-
"lint": "eslint --ext .js,.md,.vue ./",
|
|
61
|
-
"prettify": "prettier --write '**/*.{js,json,md,scss,ts,vue}'",
|
|
62
|
-
"test": "yarn run test:meta && yarn run test:lint",
|
|
63
|
-
"test:lint": "yarn run lint",
|
|
64
|
-
"test:meta": "scripts/check-meta.sh"
|
|
65
|
-
},
|
|
66
|
-
"dependencies": {
|
|
67
|
-
"popper.js": "^1.16.1",
|
|
68
|
-
"portal-vue": "^2.1.7",
|
|
69
|
-
"vue-functional-data-merge": "^3.1.0"
|
|
70
|
-
},
|
|
71
|
-
"devDependencies": {
|
|
72
|
-
"eslint": "^7.26.0",
|
|
73
|
-
"eslint-config-prettier": "^8.3.0",
|
|
74
|
-
"eslint-config-standard": "^16.0.2",
|
|
75
|
-
"eslint-config-vue": "^2.0.2",
|
|
76
|
-
"eslint-plugin-import": "^2.25.3",
|
|
77
|
-
"eslint-plugin-jest": "^24.3.6",
|
|
78
|
-
"eslint-plugin-markdown": "^2.1.0",
|
|
79
|
-
"eslint-plugin-node": "^11.1.0",
|
|
80
|
-
"eslint-plugin-prettier": "^3.4.1",
|
|
81
|
-
"eslint-plugin-promise": "^5.1.0",
|
|
82
|
-
"eslint-plugin-vue": "^7.9.0",
|
|
83
|
-
"improved-yarn-audit": "^3.0.0",
|
|
84
|
-
"lodash": "^4.17.21",
|
|
85
|
-
"prettier": "1.14.3"
|
|
86
|
-
},
|
|
87
|
-
"keywords": [
|
|
88
|
-
"Bootstrap",
|
|
89
|
-
"Bootstrap v4",
|
|
90
|
-
"Bootstrap for Vue",
|
|
91
|
-
"Vue",
|
|
92
|
-
"Vue.js",
|
|
93
|
-
"Vue v2",
|
|
94
|
-
"SSR",
|
|
95
|
-
"Web",
|
|
96
|
-
"Components",
|
|
97
|
-
"Directives",
|
|
98
|
-
"ARIA",
|
|
99
|
-
"Accessibility",
|
|
100
|
-
"a11y",
|
|
101
|
-
"Popper.js",
|
|
102
|
-
"CSS",
|
|
103
|
-
"SCSS",
|
|
104
|
-
"Alert",
|
|
105
|
-
"Avatar",
|
|
106
|
-
"Badge",
|
|
107
|
-
"Breadcrumb",
|
|
108
|
-
"Button",
|
|
109
|
-
"Calendar",
|
|
110
|
-
"Card",
|
|
111
|
-
"Checkbox",
|
|
112
|
-
"Collapse",
|
|
113
|
-
"Collapse",
|
|
114
|
-
"Date picker",
|
|
115
|
-
"Datepicker",
|
|
116
|
-
"Dropdown",
|
|
117
|
-
"Dropzone",
|
|
118
|
-
"Form",
|
|
119
|
-
"Input",
|
|
120
|
-
"Jumbotron",
|
|
121
|
-
"List",
|
|
122
|
-
"Modal",
|
|
123
|
-
"Nav",
|
|
124
|
-
"Option",
|
|
125
|
-
"Overlay",
|
|
126
|
-
"Pagination",
|
|
127
|
-
"Popover",
|
|
128
|
-
"Progress",
|
|
129
|
-
"Radio",
|
|
130
|
-
"Select",
|
|
131
|
-
"Sidebar",
|
|
132
|
-
"Skeleton",
|
|
133
|
-
"Slider",
|
|
134
|
-
"Spinner",
|
|
135
|
-
"Tab",
|
|
136
|
-
"Table",
|
|
137
|
-
"Tag",
|
|
138
|
-
"Tags",
|
|
139
|
-
"Time picker",
|
|
140
|
-
"Timepicker",
|
|
141
|
-
"Toast",
|
|
142
|
-
"Tooltip"
|
|
143
|
-
]
|
|
144
|
-
}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
# Modifications to Vendored Code
|
|
2
|
-
|
|
3
|
-
**Library**: BootstrapVue
|
|
4
|
-
**Version**: 2.23.1 **Link:** https://bootstrap-vue.org **Source:**
|
|
5
|
-
https://github.com/bootstrap-vue/bootstrap-vue **Copyright:** (c) 2016-2024 BootstrapVue
|
|
6
|
-
**License:** (c)
|
|
7
|
-
[2016-2024 BootstrapVue](https://github.com/bootstrap-vue/bootstrap-vue/blob/master/LICENSE)
|
|
8
|
-
|
|
9
|
-
This file documents modifications made to the original BootstrapVue component files.
|
|
10
|
-
|
|
11
|
-
## Removed unnecessary properties
|
|
12
|
-
|
|
13
|
-
The following properties have been removed as they are no longer supported in our implementation:
|
|
14
|
-
|
|
15
|
-
- `pill`
|
|
16
|
-
- `squared`
|
|
@@ -1,240 +0,0 @@
|
|
|
1
|
-
# Button
|
|
2
|
-
|
|
3
|
-
> Use Bootstrap's custom `b-button` component for actions in forms, dialogs, and more. Includes
|
|
4
|
-
> support for a handful of contextual variations, sizes, states, and more.
|
|
5
|
-
|
|
6
|
-
## Overview
|
|
7
|
-
|
|
8
|
-
BootstrapVue's `<b-button>` component generates either a `<button>` element, `<a>` element, or
|
|
9
|
-
`<router-link>` component with the styling of a button.
|
|
10
|
-
|
|
11
|
-
```html
|
|
12
|
-
<div>
|
|
13
|
-
<b-button>Button</b-button>
|
|
14
|
-
<b-button variant="danger">Button</b-button>
|
|
15
|
-
<b-button variant="success">Button</b-button>
|
|
16
|
-
<b-button variant="outline-primary">Button</b-button>
|
|
17
|
-
</div>
|
|
18
|
-
|
|
19
|
-
<!-- b-button.vue -->
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
## Element type
|
|
23
|
-
|
|
24
|
-
The `<b-button>` component generally renders a `<button>` element. However, you can also render an
|
|
25
|
-
`<a>` element by providing an `href` prop value. You may also generate `vue-router` `<router-link>`
|
|
26
|
-
when providing a value for the `to` prop (`vue-router` is required).
|
|
27
|
-
|
|
28
|
-
```html
|
|
29
|
-
<div>
|
|
30
|
-
<b-button>I am a Button</b-button>
|
|
31
|
-
<b-button href="#">I am a Link</b-button>
|
|
32
|
-
</div>
|
|
33
|
-
|
|
34
|
-
<!-- b-button-types.vue -->
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
## Type
|
|
38
|
-
|
|
39
|
-
You can specify the button's type by setting the prop `type` to `'button'`, `'submit'` or `'reset'`.
|
|
40
|
-
The default type is `'button'`.
|
|
41
|
-
|
|
42
|
-
Note the `type` prop has no effect when either `href` or `to` props are set.
|
|
43
|
-
|
|
44
|
-
## Sizing
|
|
45
|
-
|
|
46
|
-
Fancy larger or smaller buttons? Specify `lg` or `sm` via the `size` prop.
|
|
47
|
-
|
|
48
|
-
```html
|
|
49
|
-
<b-row>
|
|
50
|
-
<b-col lg="4" class="pb-2"><b-button size="sm">Small Button</b-button></b-col>
|
|
51
|
-
<b-col lg="4" class="pb-2"><b-button>Default Button</b-button></b-col>
|
|
52
|
-
<b-col lg="4" class="pb-2"><b-button size="lg">Large Button</b-button></b-col>
|
|
53
|
-
</b-row>
|
|
54
|
-
|
|
55
|
-
<!-- b-button-sizes.vue -->
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
## Contextual variants
|
|
59
|
-
|
|
60
|
-
Use the `variant` prop to generate the various Bootstrap contextual button variants.
|
|
61
|
-
|
|
62
|
-
By default `<b-button>` will render with the `secondary` variant.
|
|
63
|
-
|
|
64
|
-
The `variant` prop adds the Bootstrap v4.3 class `.btn-<variant>` on the rendered button.
|
|
65
|
-
|
|
66
|
-
### Solid color variants
|
|
67
|
-
|
|
68
|
-
`primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light` and `dark`.
|
|
69
|
-
|
|
70
|
-
```html
|
|
71
|
-
<div>
|
|
72
|
-
<b-button variant="primary">Primary</b-button>
|
|
73
|
-
<b-button variant="secondary">Secondary</b-button>
|
|
74
|
-
<b-button variant="success">Success</b-button>
|
|
75
|
-
<b-button variant="danger">Danger</b-button>
|
|
76
|
-
<b-button variant="warning">Warning</b-button>
|
|
77
|
-
<b-button variant="info">Info</b-button>
|
|
78
|
-
<b-button variant="light">Light</b-button>
|
|
79
|
-
<b-button variant="dark">Dark</b-button>
|
|
80
|
-
</div>
|
|
81
|
-
|
|
82
|
-
<!-- b-button-solid.vue -->
|
|
83
|
-
```
|
|
84
|
-
|
|
85
|
-
### Outline color variants
|
|
86
|
-
|
|
87
|
-
In need of a button, but not the hefty background colors they bring? Use the `outline-*` variants to
|
|
88
|
-
remove all background images and colors on any `<b-button>`:
|
|
89
|
-
|
|
90
|
-
`outline-primary`, `outline-secondary`, `outline-success`, `outline-danger`, `outline-warning`,
|
|
91
|
-
`outline-info`, `outline-light` and `outline-dark`.
|
|
92
|
-
|
|
93
|
-
```html
|
|
94
|
-
<div>
|
|
95
|
-
<b-button variant="outline-primary">Primary</b-button>
|
|
96
|
-
<b-button variant="outline-secondary">Secondary</b-button>
|
|
97
|
-
<b-button variant="outline-success">Success</b-button>
|
|
98
|
-
<b-button variant="outline-danger">Danger</b-button>
|
|
99
|
-
<b-button variant="outline-warning">Warning</b-button>
|
|
100
|
-
<b-button variant="outline-info">Info</b-button>
|
|
101
|
-
<b-button variant="outline-light">Light</b-button>
|
|
102
|
-
<b-button variant="outline-dark">Dark</b-button>
|
|
103
|
-
</div>
|
|
104
|
-
|
|
105
|
-
<!-- b-button-outline.vue -->
|
|
106
|
-
```
|
|
107
|
-
|
|
108
|
-
### Link variant
|
|
109
|
-
|
|
110
|
-
Variant `link` will render a button with the appearance of a link while maintaining the default
|
|
111
|
-
padding and size of a button.
|
|
112
|
-
|
|
113
|
-
```html
|
|
114
|
-
<div>
|
|
115
|
-
<b-button variant="link">Link</b-button>
|
|
116
|
-
</div>
|
|
117
|
-
|
|
118
|
-
<!-- b-button-link.vue -->
|
|
119
|
-
```
|
|
120
|
-
|
|
121
|
-
**Tip:** remove the hover underline from a link variant button by adding the Bootstrap v4.3 utility
|
|
122
|
-
class `text-decoration-none` to `<b-button>`.
|
|
123
|
-
|
|
124
|
-
## Block level buttons
|
|
125
|
-
|
|
126
|
-
Create block level buttons — those that span the full width of a parent — by setting the `block`
|
|
127
|
-
prop.
|
|
128
|
-
|
|
129
|
-
```html
|
|
130
|
-
<div>
|
|
131
|
-
<b-button block variant="primary">Block Level Button</b-button>
|
|
132
|
-
</div>
|
|
133
|
-
|
|
134
|
-
<!-- b-button-block.vue -->
|
|
135
|
-
```
|
|
136
|
-
|
|
137
|
-
## Disabled state
|
|
138
|
-
|
|
139
|
-
Set the `disabled` prop to disable button default functionality. `disabled` also works with buttons
|
|
140
|
-
rendered as `<a>` elements and `<router-link>` (i.e. with the `href` or `to` prop set).
|
|
141
|
-
|
|
142
|
-
```html
|
|
143
|
-
<div>
|
|
144
|
-
<b-button disabled size="lg" variant="primary">Disabled</b-button>
|
|
145
|
-
<b-button disabled size="lg">Also Disabled</b-button>
|
|
146
|
-
</div>
|
|
147
|
-
|
|
148
|
-
<!-- b-button-disabled.vue -->
|
|
149
|
-
```
|
|
150
|
-
|
|
151
|
-
## Pressed state and toggling
|
|
152
|
-
|
|
153
|
-
Buttons will appear pressed (with a darker background, darker border, and inset shadow) when the
|
|
154
|
-
prop `pressed` is set to `true`.
|
|
155
|
-
|
|
156
|
-
The `pressed` prop can be set to one of three values:
|
|
157
|
-
|
|
158
|
-
- `true`: Sets the `.active` class and adds the attribute `aria-pressed="true"`.
|
|
159
|
-
- `false`: Clears the `.active` class and adds the attribute `aria-pressed="false"`.
|
|
160
|
-
- `null`: (default) Neither the class `.active` nor the attribute `aria-pressed` will be set.
|
|
161
|
-
|
|
162
|
-
To create a button that can be toggled between active and non-active states, use the `.sync` prop
|
|
163
|
-
modifier (available in Vue 2.3+) on the `pressed` property
|
|
164
|
-
|
|
165
|
-
```html
|
|
166
|
-
<template>
|
|
167
|
-
<div>
|
|
168
|
-
<h5>Pressed and un-pressed state</h5>
|
|
169
|
-
<b-button :pressed="true" variant="success">Always Pressed</b-button>
|
|
170
|
-
<b-button :pressed="false" variant="success">Not Pressed</b-button>
|
|
171
|
-
|
|
172
|
-
<h5 class="mt-3">Toggleable Button</h5>
|
|
173
|
-
<b-button :pressed.sync="myToggle" variant="primary">Toggle Me</b-button>
|
|
174
|
-
<p>Pressed State: <strong>{{ myToggle }}</strong></p>
|
|
175
|
-
|
|
176
|
-
<h5>In a button group</h5>
|
|
177
|
-
<b-button-group size="sm">
|
|
178
|
-
<b-button
|
|
179
|
-
v-for="(btn, idx) in buttons"
|
|
180
|
-
:key="idx"
|
|
181
|
-
:pressed.sync="btn.state"
|
|
182
|
-
variant="primary"
|
|
183
|
-
>
|
|
184
|
-
{{ btn.caption }}
|
|
185
|
-
</b-button>
|
|
186
|
-
</b-button-group>
|
|
187
|
-
<p>Pressed States: <strong>{{ btnStates }}</strong></p>
|
|
188
|
-
</div>
|
|
189
|
-
</template>
|
|
190
|
-
|
|
191
|
-
<script>
|
|
192
|
-
export default {
|
|
193
|
-
data() {
|
|
194
|
-
return {
|
|
195
|
-
myToggle: false,
|
|
196
|
-
buttons: [
|
|
197
|
-
{ caption: 'Toggle 1', state: true },
|
|
198
|
-
{ caption: 'Toggle 2', state: false },
|
|
199
|
-
{ caption: 'Toggle 3', state: true },
|
|
200
|
-
{ caption: 'Toggle 4', state: false }
|
|
201
|
-
]
|
|
202
|
-
}
|
|
203
|
-
},
|
|
204
|
-
computed: {
|
|
205
|
-
btnStates() {
|
|
206
|
-
return this.buttons.map(btn => btn.state)
|
|
207
|
-
}
|
|
208
|
-
}
|
|
209
|
-
}
|
|
210
|
-
</script>
|
|
211
|
-
|
|
212
|
-
<!-- b-button-toggles.vue -->
|
|
213
|
-
```
|
|
214
|
-
|
|
215
|
-
If using toggle button style for a radio or checkbox style interface, it is best to use the built-in
|
|
216
|
-
`button` style support of [`<b-form-radio-group>`](?path=/docs/base-form-form-radio--docs) and
|
|
217
|
-
[`<b-form-checkbox-group>`](?path=/docs/base-form-form-checkbox--docs).
|
|
218
|
-
|
|
219
|
-
## Router link support
|
|
220
|
-
|
|
221
|
-
Refer to the [`Router support`](?path=/docs/base-link--docs#router-link-support) reference docs for
|
|
222
|
-
the various supported `<router-link>` related props.
|
|
223
|
-
|
|
224
|
-
## Accessibility
|
|
225
|
-
|
|
226
|
-
When the `href` prop is set to `'#'`, `<b-button>` will render a link (`<a>`) element with attribute
|
|
227
|
-
`role="button"` set and appropriate keydown listeners (<kbd>Enter</kbd> and <kbd>Space</kbd>) so
|
|
228
|
-
that the link acts like a native HTML `<button>` for screen reader and keyboard-only users. When
|
|
229
|
-
disabled, the `aria-disabled="true"` attribute will be set on the `<a>` element.
|
|
230
|
-
|
|
231
|
-
When the `href` is set to any other value (or the `to` prop is used), `role="button"` will not be
|
|
232
|
-
added, nor will the keyboard event listeners be enabled.
|
|
233
|
-
|
|
234
|
-
## See also
|
|
235
|
-
|
|
236
|
-
- [button-group](?path=/docs/base-button-group--docs)
|
|
237
|
-
- [link](?path=/docs/base-link--docs)
|
|
238
|
-
- [Router Link Support](?path=/docs/base-link--docs#router-link-support)
|
|
239
|
-
|
|
240
|
-
<!-- Component reference added automatically from component package.json -->
|
|
@@ -1,210 +0,0 @@
|
|
|
1
|
-
import { mount } from '@vue/test-utils'
|
|
2
|
-
import { BButtonClose } from './button-close'
|
|
3
|
-
|
|
4
|
-
describe('button-close', () => {
|
|
5
|
-
it('has root element "button"', async () => {
|
|
6
|
-
const wrapper = mount(BButtonClose)
|
|
7
|
-
|
|
8
|
-
expect(wrapper.element.tagName).toBe('BUTTON')
|
|
9
|
-
|
|
10
|
-
wrapper.destroy()
|
|
11
|
-
})
|
|
12
|
-
|
|
13
|
-
it('has class "close"', async () => {
|
|
14
|
-
const wrapper = mount(BButtonClose)
|
|
15
|
-
|
|
16
|
-
expect(wrapper.classes()).toContain('close')
|
|
17
|
-
expect(wrapper.classes().length).toBe(1)
|
|
18
|
-
|
|
19
|
-
wrapper.destroy()
|
|
20
|
-
})
|
|
21
|
-
|
|
22
|
-
it('has attribute type="button"', async () => {
|
|
23
|
-
const wrapper = mount(BButtonClose)
|
|
24
|
-
|
|
25
|
-
expect(wrapper.attributes('type')).toBe('button')
|
|
26
|
-
|
|
27
|
-
wrapper.destroy()
|
|
28
|
-
})
|
|
29
|
-
|
|
30
|
-
it('does not have attribute "disabled" by default', async () => {
|
|
31
|
-
const wrapper = mount(BButtonClose)
|
|
32
|
-
|
|
33
|
-
expect(wrapper.attributes('disabled')).toBeUndefined()
|
|
34
|
-
|
|
35
|
-
wrapper.destroy()
|
|
36
|
-
})
|
|
37
|
-
|
|
38
|
-
it('has attribute "disabled" when prop "disabled" is set', async () => {
|
|
39
|
-
const wrapper = mount(BButtonClose, {
|
|
40
|
-
context: {
|
|
41
|
-
props: { disabled: true }
|
|
42
|
-
}
|
|
43
|
-
})
|
|
44
|
-
|
|
45
|
-
expect(wrapper.attributes('disabled')).toBeDefined()
|
|
46
|
-
|
|
47
|
-
wrapper.destroy()
|
|
48
|
-
})
|
|
49
|
-
|
|
50
|
-
it('has attribute aria-label="Close" by default', async () => {
|
|
51
|
-
const wrapper = mount(BButtonClose)
|
|
52
|
-
|
|
53
|
-
expect(wrapper.attributes('aria-label')).toBe('Close')
|
|
54
|
-
|
|
55
|
-
wrapper.destroy()
|
|
56
|
-
})
|
|
57
|
-
|
|
58
|
-
it('has custom attribute "aria-label" when prop "aria-label" set', async () => {
|
|
59
|
-
const wrapper = mount(BButtonClose, {
|
|
60
|
-
context: {
|
|
61
|
-
props: { ariaLabel: 'foobar' }
|
|
62
|
-
}
|
|
63
|
-
})
|
|
64
|
-
|
|
65
|
-
expect(wrapper.attributes('aria-label')).toBe('foobar')
|
|
66
|
-
|
|
67
|
-
wrapper.destroy()
|
|
68
|
-
})
|
|
69
|
-
|
|
70
|
-
it('has text variant class when "variant" prop set', async () => {
|
|
71
|
-
const wrapper = mount(BButtonClose, {
|
|
72
|
-
context: {
|
|
73
|
-
props: { textVariant: 'primary' }
|
|
74
|
-
}
|
|
75
|
-
})
|
|
76
|
-
|
|
77
|
-
expect(wrapper.classes()).toContain('close')
|
|
78
|
-
expect(wrapper.classes()).toContain('text-primary')
|
|
79
|
-
expect(wrapper.classes().length).toBe(2)
|
|
80
|
-
|
|
81
|
-
wrapper.destroy()
|
|
82
|
-
})
|
|
83
|
-
|
|
84
|
-
it('should have default content', async () => {
|
|
85
|
-
const wrapper = mount(BButtonClose)
|
|
86
|
-
|
|
87
|
-
// '×' gets converted to '×'
|
|
88
|
-
expect(wrapper.text()).toContain('×')
|
|
89
|
-
|
|
90
|
-
wrapper.destroy()
|
|
91
|
-
})
|
|
92
|
-
|
|
93
|
-
it('should have custom content from "content" prop', async () => {
|
|
94
|
-
const wrapper = mount(BButtonClose, {
|
|
95
|
-
context: {
|
|
96
|
-
props: { content: 'Close' }
|
|
97
|
-
}
|
|
98
|
-
})
|
|
99
|
-
|
|
100
|
-
expect(wrapper.text()).toContain('Close')
|
|
101
|
-
|
|
102
|
-
wrapper.destroy()
|
|
103
|
-
})
|
|
104
|
-
|
|
105
|
-
it('should have custom content from default slot', async () => {
|
|
106
|
-
const wrapper = mount(BButtonClose, {
|
|
107
|
-
slots: {
|
|
108
|
-
default: '<i>foobar</i>'
|
|
109
|
-
}
|
|
110
|
-
})
|
|
111
|
-
|
|
112
|
-
expect(wrapper.text()).toContain('foobar')
|
|
113
|
-
|
|
114
|
-
wrapper.destroy()
|
|
115
|
-
})
|
|
116
|
-
|
|
117
|
-
it('should emit "click" event when clicked', async () => {
|
|
118
|
-
let event = null
|
|
119
|
-
const spy1 = jest.fn(e => {
|
|
120
|
-
event = e
|
|
121
|
-
})
|
|
122
|
-
const wrapper = mount(BButtonClose, {
|
|
123
|
-
context: {
|
|
124
|
-
on: { click: spy1 }
|
|
125
|
-
},
|
|
126
|
-
slots: {
|
|
127
|
-
default: '<i>some <span>text</span></i>'
|
|
128
|
-
}
|
|
129
|
-
})
|
|
130
|
-
|
|
131
|
-
expect(spy1).not.toHaveBeenCalled()
|
|
132
|
-
|
|
133
|
-
const btn = wrapper.find('button')
|
|
134
|
-
expect(btn).toBeDefined()
|
|
135
|
-
await btn.trigger('click')
|
|
136
|
-
|
|
137
|
-
expect(spy1).toHaveBeenCalled()
|
|
138
|
-
expect(spy1.mock.calls.length).toBe(1)
|
|
139
|
-
expect(event).toBeInstanceOf(MouseEvent)
|
|
140
|
-
|
|
141
|
-
// Works when clicking on an inner element
|
|
142
|
-
const span = wrapper.find('span')
|
|
143
|
-
expect(span).toBeDefined()
|
|
144
|
-
await span.trigger('click')
|
|
145
|
-
|
|
146
|
-
expect(spy1.mock.calls.length).toBe(2)
|
|
147
|
-
|
|
148
|
-
wrapper.destroy()
|
|
149
|
-
})
|
|
150
|
-
|
|
151
|
-
it('should not emit "click" event when disabled and clicked', async () => {
|
|
152
|
-
const spy1 = jest.fn()
|
|
153
|
-
const wrapper = mount(BButtonClose, {
|
|
154
|
-
context: {
|
|
155
|
-
props: {
|
|
156
|
-
disabled: true
|
|
157
|
-
},
|
|
158
|
-
on: { click: spy1 }
|
|
159
|
-
},
|
|
160
|
-
slots: {
|
|
161
|
-
default: '<i>some <span>text</span></i>'
|
|
162
|
-
}
|
|
163
|
-
})
|
|
164
|
-
|
|
165
|
-
expect(spy1).not.toHaveBeenCalled()
|
|
166
|
-
|
|
167
|
-
const btn = wrapper.find('button')
|
|
168
|
-
expect(btn).toBeDefined()
|
|
169
|
-
await btn.trigger('click')
|
|
170
|
-
|
|
171
|
-
expect(spy1).not.toHaveBeenCalled()
|
|
172
|
-
|
|
173
|
-
// For some reason, JSDOM emits a click on button when clicking inner element
|
|
174
|
-
// Although testing in docs, this click is not emitted when disabled
|
|
175
|
-
// Appears to be a bug in JSDOM
|
|
176
|
-
//
|
|
177
|
-
// // Does not emit click on inner element clicks
|
|
178
|
-
// const span = wrapper.find('span')
|
|
179
|
-
// expect(span).toBeDefined()
|
|
180
|
-
// await span.trigger('click')
|
|
181
|
-
//
|
|
182
|
-
// expect(spy1).not.toHaveBeenCalled()
|
|
183
|
-
|
|
184
|
-
wrapper.destroy()
|
|
185
|
-
})
|
|
186
|
-
|
|
187
|
-
it('handles multiple click listeners', async () => {
|
|
188
|
-
const spy1 = jest.fn()
|
|
189
|
-
const spy2 = jest.fn()
|
|
190
|
-
const wrapper = mount(BButtonClose, {
|
|
191
|
-
context: {
|
|
192
|
-
on: { click: [spy1, spy2] }
|
|
193
|
-
}
|
|
194
|
-
})
|
|
195
|
-
|
|
196
|
-
expect(spy1).not.toHaveBeenCalled()
|
|
197
|
-
expect(spy2).not.toHaveBeenCalled()
|
|
198
|
-
|
|
199
|
-
const btn = wrapper.find('button')
|
|
200
|
-
expect(btn).toBeDefined()
|
|
201
|
-
await btn.trigger('click')
|
|
202
|
-
|
|
203
|
-
expect(spy1).toHaveBeenCalled()
|
|
204
|
-
expect(spy2).toHaveBeenCalled()
|
|
205
|
-
expect(spy1.mock.calls.length).toBe(1)
|
|
206
|
-
expect(spy2.mock.calls.length).toBe(1)
|
|
207
|
-
|
|
208
|
-
wrapper.destroy()
|
|
209
|
-
})
|
|
210
|
-
})
|