@gitlab/ui 113.7.0 → 114.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,21 @@
|
|
|
1
|
+
# [114.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v113.7.0...v114.0.0) (2025-05-15)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* **GlButton:** remove BButton from GlButton ([fcdca4e](https://gitlab.com/gitlab-org/gitlab-ui/commit/fcdca4ee51ed98d71d93a94a2ffa741cf720c4db))
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### BREAKING CHANGES
|
|
10
|
+
|
|
11
|
+
* **GlButton:** support for following props have been dropped:
|
|
12
|
+
- pressed
|
|
13
|
+
- router-component-name
|
|
14
|
+
- exact
|
|
15
|
+
- exact-path
|
|
16
|
+
- exact-path-active-class (replaced with exact-active-class)
|
|
17
|
+
- no-prefetch (use prefetch instead)
|
|
18
|
+
|
|
1
19
|
# [113.7.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v113.6.0...v113.7.0) (2025-05-15)
|
|
2
20
|
|
|
3
21
|
|
|
@@ -1,74 +1,213 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { buttonCategoryOptions, buttonVariantOptions, buttonSizeOptions } from '../../../utils/constants';
|
|
3
|
-
import { logWarning } from '../../../utils/utils';
|
|
1
|
+
import GlLink from '../link/link';
|
|
2
|
+
import { buttonCategoryOptions, buttonVariantOptions, buttonSizeOptions, linkVariantUnstyled } from '../../../utils/constants';
|
|
3
|
+
import { logWarning, stopEvent } from '../../../utils/utils';
|
|
4
4
|
import { isSlotEmpty } from '../../../utils/is_slot_empty';
|
|
5
5
|
import { SafeLinkMixin } from '../../mixins/safe_link_mixin';
|
|
6
|
+
import { isEvent } from '../../../vendor/bootstrap-vue/src/utils/inspect';
|
|
6
7
|
import GlIcon from '../icon/icon';
|
|
7
8
|
import GlLoadingIcon from '../loading_icon/loading_icon';
|
|
9
|
+
import { SPACE, ENTER } from '../new_dropdowns/constants';
|
|
8
10
|
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
|
|
9
11
|
|
|
10
12
|
//
|
|
11
13
|
var script = {
|
|
12
14
|
name: 'GlButton',
|
|
13
15
|
components: {
|
|
14
|
-
BButton,
|
|
15
16
|
GlIcon,
|
|
16
17
|
GlLoadingIcon
|
|
17
18
|
},
|
|
18
19
|
mixins: [SafeLinkMixin],
|
|
19
20
|
props: {
|
|
21
|
+
/**
|
|
22
|
+
* Set the category of the button.
|
|
23
|
+
*/
|
|
20
24
|
category: {
|
|
21
25
|
type: String,
|
|
22
26
|
required: false,
|
|
23
27
|
default: buttonCategoryOptions.primary,
|
|
24
28
|
validator: value => Object.keys(buttonCategoryOptions).includes(value)
|
|
25
29
|
},
|
|
30
|
+
/**
|
|
31
|
+
* Set the variant of the button.
|
|
32
|
+
*/
|
|
26
33
|
variant: {
|
|
27
34
|
type: String,
|
|
28
35
|
required: false,
|
|
29
36
|
default: buttonVariantOptions.default,
|
|
30
37
|
validator: value => Object.keys(buttonVariantOptions).includes(value)
|
|
31
38
|
},
|
|
39
|
+
/**
|
|
40
|
+
* Specify the size of the button. Options are `small` and `medium`.
|
|
41
|
+
*/
|
|
32
42
|
size: {
|
|
33
43
|
type: String,
|
|
34
44
|
required: false,
|
|
35
45
|
default: 'medium',
|
|
36
46
|
validator: value => Object.keys(buttonSizeOptions).includes(value)
|
|
37
47
|
},
|
|
48
|
+
/**
|
|
49
|
+
* Style the button as selected.
|
|
50
|
+
*/
|
|
38
51
|
selected: {
|
|
39
52
|
type: Boolean,
|
|
40
53
|
required: false,
|
|
41
54
|
default: false
|
|
42
55
|
},
|
|
56
|
+
/**
|
|
57
|
+
* Specify an icon to render in the button.
|
|
58
|
+
*/
|
|
43
59
|
icon: {
|
|
44
60
|
type: String,
|
|
45
61
|
required: false,
|
|
46
62
|
default: ''
|
|
47
63
|
},
|
|
64
|
+
/**
|
|
65
|
+
* Render a non-interactive label button, a `span` styled as a button.
|
|
66
|
+
*/
|
|
48
67
|
label: {
|
|
49
68
|
type: Boolean,
|
|
50
69
|
required: false,
|
|
51
70
|
default: false
|
|
52
71
|
},
|
|
72
|
+
/**
|
|
73
|
+
* Set the loading state of the button.
|
|
74
|
+
*/
|
|
53
75
|
loading: {
|
|
54
76
|
type: Boolean,
|
|
55
77
|
required: false,
|
|
56
78
|
default: false
|
|
57
79
|
},
|
|
80
|
+
/**
|
|
81
|
+
* CSS classes to add to the button text.
|
|
82
|
+
*/
|
|
58
83
|
buttonTextClasses: {
|
|
59
84
|
type: String,
|
|
60
85
|
required: false,
|
|
61
86
|
default: ''
|
|
62
87
|
},
|
|
88
|
+
/**
|
|
89
|
+
* Renders a 100% width button (expands to the width of its parent container).
|
|
90
|
+
*/
|
|
63
91
|
block: {
|
|
64
92
|
type: Boolean,
|
|
65
93
|
required: false,
|
|
66
94
|
default: false
|
|
67
95
|
},
|
|
96
|
+
/**
|
|
97
|
+
* Specify the HTML tag to render instead of the default tag.
|
|
98
|
+
*/
|
|
99
|
+
tag: {
|
|
100
|
+
type: String,
|
|
101
|
+
required: false,
|
|
102
|
+
default: 'button'
|
|
103
|
+
},
|
|
104
|
+
/**
|
|
105
|
+
* The value to set the button's `type` attribute to. Can be one of `button`, `submit`, or `reset`.
|
|
106
|
+
*/
|
|
107
|
+
type: {
|
|
108
|
+
type: String,
|
|
109
|
+
required: false,
|
|
110
|
+
default: 'button',
|
|
111
|
+
validator: value => ['button', 'submit', 'reset'].includes(value)
|
|
112
|
+
},
|
|
113
|
+
/**
|
|
114
|
+
* Disables the component's functionality and places it in a disabled state.
|
|
115
|
+
*/
|
|
68
116
|
disabled: {
|
|
69
117
|
type: Boolean,
|
|
70
118
|
required: false,
|
|
71
119
|
default: false
|
|
120
|
+
},
|
|
121
|
+
/**
|
|
122
|
+
* Denotes the target URL of the link for standard links.
|
|
123
|
+
*/
|
|
124
|
+
href: {
|
|
125
|
+
type: String,
|
|
126
|
+
required: false,
|
|
127
|
+
default: undefined
|
|
128
|
+
},
|
|
129
|
+
/**
|
|
130
|
+
* Skips sanitization of href if true. This should be used sparingly.
|
|
131
|
+
* Consult security team before setting to true.
|
|
132
|
+
*/
|
|
133
|
+
isUnsafeLink: {
|
|
134
|
+
type: Boolean,
|
|
135
|
+
required: false,
|
|
136
|
+
default: false
|
|
137
|
+
},
|
|
138
|
+
/**
|
|
139
|
+
* Sets the 'rel' attribute on the rendered link.
|
|
140
|
+
*/
|
|
141
|
+
rel: {
|
|
142
|
+
type: String,
|
|
143
|
+
required: false,
|
|
144
|
+
default: null
|
|
145
|
+
},
|
|
146
|
+
/**
|
|
147
|
+
* Sets the 'target' attribute on the rendered link.
|
|
148
|
+
*/
|
|
149
|
+
target: {
|
|
150
|
+
type: String,
|
|
151
|
+
required: false,
|
|
152
|
+
default: null
|
|
153
|
+
},
|
|
154
|
+
/**
|
|
155
|
+
* Places the component in the active state with active styling
|
|
156
|
+
*/
|
|
157
|
+
active: {
|
|
158
|
+
type: Boolean,
|
|
159
|
+
required: false,
|
|
160
|
+
default: false
|
|
161
|
+
},
|
|
162
|
+
/**
|
|
163
|
+
* <router-link> prop: Denotes the target route of the link.
|
|
164
|
+
* When clicked, the value of the to prop will be passed to `router.push()` internally,
|
|
165
|
+
* so the value can be either a string or a Location descriptor object.
|
|
166
|
+
*/
|
|
167
|
+
to: {
|
|
168
|
+
type: [Object, String],
|
|
169
|
+
required: false,
|
|
170
|
+
default: undefined
|
|
171
|
+
},
|
|
172
|
+
/**
|
|
173
|
+
* <router-link> prop: Configure the active CSS class applied when the link is active.
|
|
174
|
+
*/
|
|
175
|
+
activeClass: {
|
|
176
|
+
type: String,
|
|
177
|
+
required: false,
|
|
178
|
+
default: undefined
|
|
179
|
+
},
|
|
180
|
+
/**
|
|
181
|
+
* <router-link> prop: Configure the active CSS class applied when the link is active with exact match.
|
|
182
|
+
*/
|
|
183
|
+
exactActiveClass: {
|
|
184
|
+
type: String,
|
|
185
|
+
required: false,
|
|
186
|
+
default: undefined
|
|
187
|
+
},
|
|
188
|
+
/**
|
|
189
|
+
* <router-link> prop: Setting the replace prop will call `router.replace()` instead of `router.push()`
|
|
190
|
+
* when clicked, so the navigation will not leave a history record.
|
|
191
|
+
*/
|
|
192
|
+
replace: {
|
|
193
|
+
type: Boolean,
|
|
194
|
+
required: false,
|
|
195
|
+
default: false
|
|
196
|
+
},
|
|
197
|
+
/**
|
|
198
|
+
* <nuxt-link> prop: To improve the responsiveness of your Nuxt.js applications, when the link will be displayed within the viewport,
|
|
199
|
+
* Nuxt.js will automatically prefetch the code splitted page. Setting `prefetch` to `true` or `false` will overwrite the default value of `router.prefetchLinks`
|
|
200
|
+
*/
|
|
201
|
+
prefetch: {
|
|
202
|
+
type: Boolean,
|
|
203
|
+
required: false,
|
|
204
|
+
// Must be `null` to fall back to the value defined in the
|
|
205
|
+
// `nuxt.config.js` configuration file for `router.prefetchLinks`
|
|
206
|
+
// We convert `null` to `undefined`, so that Nuxt.js will use the
|
|
207
|
+
// compiled default
|
|
208
|
+
// Vue treats `undefined` as default of `false` for Boolean props,
|
|
209
|
+
// so we must set it as `null` here to be a true tri-state prop
|
|
210
|
+
default: null
|
|
72
211
|
}
|
|
73
212
|
},
|
|
74
213
|
computed: {
|
|
@@ -82,17 +221,19 @@ var script = {
|
|
|
82
221
|
return this.disabled || this.loading;
|
|
83
222
|
},
|
|
84
223
|
buttonClasses() {
|
|
85
|
-
const classes = ['gl-button'];
|
|
224
|
+
const classes = ['btn', 'gl-button', `btn-${this.variant}`, `btn-${this.buttonSize}`];
|
|
86
225
|
if (this.category !== buttonCategoryOptions.primary) {
|
|
87
226
|
classes.push(`btn-${this.variant}-${this.category}`);
|
|
88
227
|
}
|
|
89
228
|
classes.push({
|
|
90
229
|
'btn-icon': this.hasIconOnly,
|
|
91
230
|
'button-ellipsis-horizontal': this.hasIconOnly && this.icon === 'ellipsis_h',
|
|
92
|
-
selected: this.selected
|
|
231
|
+
selected: this.selected,
|
|
232
|
+
'btn-block': this.displayBlock,
|
|
233
|
+
disabled: this.disabled
|
|
93
234
|
});
|
|
94
235
|
if (this.label) {
|
|
95
|
-
classes.push('btn', 'btn-label'
|
|
236
|
+
classes.push('btn', 'btn-label');
|
|
96
237
|
}
|
|
97
238
|
return classes;
|
|
98
239
|
},
|
|
@@ -101,6 +242,84 @@ var script = {
|
|
|
101
242
|
},
|
|
102
243
|
displayBlock() {
|
|
103
244
|
return !this.label && this.block;
|
|
245
|
+
},
|
|
246
|
+
isLink() {
|
|
247
|
+
return this.href || this.to;
|
|
248
|
+
},
|
|
249
|
+
isHashLink() {
|
|
250
|
+
return this.isLink && this.href === '#';
|
|
251
|
+
},
|
|
252
|
+
isButton() {
|
|
253
|
+
return this.componentIs === 'button';
|
|
254
|
+
},
|
|
255
|
+
isNonStandardTag() {
|
|
256
|
+
if (this.label) {
|
|
257
|
+
return false;
|
|
258
|
+
}
|
|
259
|
+
return !this.isLink && !this.isButton;
|
|
260
|
+
},
|
|
261
|
+
tabindex() {
|
|
262
|
+
// When disabled remove links and non-standard tags from tab order
|
|
263
|
+
if (this.disabled) {
|
|
264
|
+
return this.isLink || this.isNonStandardTag ? '-1' : this.$attrs.tabindex;
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
// Add hash links and non-standard tags to tab order
|
|
268
|
+
return this.isNonStandardTag || this.isHashLink ? '0' : this.$attrs.tabindex;
|
|
269
|
+
},
|
|
270
|
+
computedPropsAndAttributes() {
|
|
271
|
+
var _this$$attrs;
|
|
272
|
+
const base = {
|
|
273
|
+
// Type only used for "real" buttons
|
|
274
|
+
type: this.isButton ? this.type : null,
|
|
275
|
+
// Disabled only set on "real" buttons
|
|
276
|
+
disabled: this.isButton ? this.isButtonDisabled : null,
|
|
277
|
+
// We add a role of button when the tag is not a link or button or when link has `href` of `#`
|
|
278
|
+
role: this.isNonStandardTag || this.isHashLink ? 'button' : (_this$$attrs = this.$attrs) === null || _this$$attrs === void 0 ? void 0 : _this$$attrs.role,
|
|
279
|
+
// We set the `aria-disabled` state for non-standard tags
|
|
280
|
+
...(this.isNonStandardTag ? {
|
|
281
|
+
'aria-disabled': String(this.disabled)
|
|
282
|
+
} : {}),
|
|
283
|
+
tabindex: this.tabindex
|
|
284
|
+
};
|
|
285
|
+
if (this.isLink) {
|
|
286
|
+
return {
|
|
287
|
+
...this.$attrs,
|
|
288
|
+
...base,
|
|
289
|
+
variant: linkVariantUnstyled,
|
|
290
|
+
disabled: this.disabled,
|
|
291
|
+
href: this.href,
|
|
292
|
+
isUnsafeLink: this.isUnsafeLink,
|
|
293
|
+
rel: this.rel,
|
|
294
|
+
target: this.target,
|
|
295
|
+
active: this.active,
|
|
296
|
+
to: this.to,
|
|
297
|
+
activeClass: this.activeClass,
|
|
298
|
+
exactActiveClass: this.exactActiveClass,
|
|
299
|
+
replace: this.replace,
|
|
300
|
+
prefetch: this.prefetch
|
|
301
|
+
};
|
|
302
|
+
}
|
|
303
|
+
return {
|
|
304
|
+
...this.$attrs,
|
|
305
|
+
...base
|
|
306
|
+
};
|
|
307
|
+
},
|
|
308
|
+
computedListeners() {
|
|
309
|
+
return {
|
|
310
|
+
click: this.onClick,
|
|
311
|
+
keydown: this.onKeydown,
|
|
312
|
+
...this.$listeners
|
|
313
|
+
};
|
|
314
|
+
},
|
|
315
|
+
componentIs() {
|
|
316
|
+
if (this.label) {
|
|
317
|
+
return 'span';
|
|
318
|
+
}
|
|
319
|
+
if (this.isLink) {
|
|
320
|
+
return GlLink;
|
|
321
|
+
}
|
|
322
|
+
return this.tag;
|
|
104
323
|
}
|
|
105
324
|
},
|
|
106
325
|
mounted() {
|
|
@@ -108,6 +327,30 @@ var script = {
|
|
|
108
327
|
if (!this.$slots.default && !this.$attrs['aria-label'] && !this.$props.label) {
|
|
109
328
|
logWarning('[gl-button]: Accessible name missing. Please add inner text or aria-label.', this.$el);
|
|
110
329
|
}
|
|
330
|
+
},
|
|
331
|
+
methods: {
|
|
332
|
+
onKeydown(event) {
|
|
333
|
+
// Skip if disabled
|
|
334
|
+
// Add SPACE keydown handler for link has `href` of `#`
|
|
335
|
+
// Add ENTER handler for non-standard tags
|
|
336
|
+
if (!this.disabled && (this.isNonStandardTag || this.isHashLink)) {
|
|
337
|
+
const {
|
|
338
|
+
code
|
|
339
|
+
} = event;
|
|
340
|
+
if (code === SPACE || code === ENTER && this.isNonStandardTag) {
|
|
341
|
+
const target = event.currentTarget || event.target;
|
|
342
|
+
stopEvent(event, {
|
|
343
|
+
propagation: false
|
|
344
|
+
});
|
|
345
|
+
target.click();
|
|
346
|
+
}
|
|
347
|
+
}
|
|
348
|
+
},
|
|
349
|
+
onClick(event) {
|
|
350
|
+
if (this.disabled && isEvent(event)) {
|
|
351
|
+
stopEvent(event);
|
|
352
|
+
}
|
|
353
|
+
}
|
|
111
354
|
}
|
|
112
355
|
};
|
|
113
356
|
|
|
@@ -115,7 +358,7 @@ var script = {
|
|
|
115
358
|
const __vue_script__ = script;
|
|
116
359
|
|
|
117
360
|
/* template */
|
|
118
|
-
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.
|
|
361
|
+
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.componentIs,_vm._g(_vm._b({directives:[{name:"safe-link",rawName:"v-safe-link:[safeLinkConfig]",arg:_vm.safeLinkConfig}],tag:"component",class:_vm.buttonClasses},'component',_vm.computedPropsAndAttributes,false),_vm.computedListeners),[(_vm.loading)?_c('gl-loading-icon',{staticClass:"gl-button-icon gl-button-loading-indicator",attrs:{"inline":""}}):_vm._e(),_vm._v(" "),(_vm.hasIcon && !(_vm.hasIconOnly && _vm.loading))?_c('gl-icon',{staticClass:"gl-button-icon",attrs:{"name":_vm.icon}}):_vm._e(),_vm._v(" "),_vm._t("emoji"),_vm._v(" "),(!_vm.hasIconOnly)?_c('span',{staticClass:"gl-button-text",class:_vm.buttonTextClasses},[_vm._t("default")],2):_vm._e()],2)};
|
|
119
362
|
var __vue_staticRenderFns__ = [];
|
|
120
363
|
|
|
121
364
|
/* style */
|
package/package.json
CHANGED
|
@@ -7,13 +7,11 @@ button variant.
|
|
|
7
7
|
|
|
8
8
|
A button link is a link that is styled to look like a button, semantically speaking it's a `<a>` tag
|
|
9
9
|
with the necessary classes added to make it look like a button, it shares the same functionality as
|
|
10
|
-
[
|
|
10
|
+
[<gl-link>](?path=/docs/base-link--docs)
|
|
11
11
|
|
|
12
12
|
> Note: Setting a `target` attribute without a `href` attribute, will not create any side effects.
|
|
13
13
|
> Without the presence of a `href` attribute, this component will render a `<button>`.
|
|
14
14
|
|
|
15
|
-
[`<gl-link>`]: ./?path=/story/base-link--default-link
|
|
16
|
-
|
|
17
15
|
## Icon-only button
|
|
18
16
|
|
|
19
17
|
Icon-only buttons must have an accessible name.
|
|
@@ -23,6 +21,66 @@ You can provide one with the `aria-label` attribute, which is read out by screen
|
|
|
23
21
|
<gl-button icon="close" aria-label="Close" />
|
|
24
22
|
```
|
|
25
23
|
|
|
24
|
+
## Type
|
|
25
|
+
|
|
26
|
+
You can specify the button's type by setting the prop `type` to `button`, `submit` or `reset`.
|
|
27
|
+
The default type is `button`.
|
|
28
|
+
|
|
29
|
+
Note the `type` prop has no effect when either `href` or `to` props are set.
|
|
30
|
+
|
|
31
|
+
## Sizing
|
|
32
|
+
|
|
33
|
+
Specify `small` or `medium` via the `size` prop. Defaults to `medium`.
|
|
34
|
+
|
|
35
|
+
```html
|
|
36
|
+
<gl-button size="small">Small Button</gl-button>
|
|
37
|
+
<gl-button>Default Button (medium)</gl-button>
|
|
38
|
+
<gl-button size="medium">Medium Button</gl-button>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## Categories
|
|
42
|
+
|
|
43
|
+
Use the `category` prop to set the button category to `primary`, `secondary`, or `tertiary`.
|
|
44
|
+
Defaults to `primary`.
|
|
45
|
+
|
|
46
|
+
## Variants
|
|
47
|
+
|
|
48
|
+
Use the `variant` prop to set the button variant to `default`, `confirm`, `danger`, `dashed`, or `link`.
|
|
49
|
+
Defaults to `default`.
|
|
50
|
+
|
|
51
|
+
## Block level buttons
|
|
52
|
+
|
|
53
|
+
Create block level buttons, those that span the full width of a parent, by setting the `block`
|
|
54
|
+
prop.
|
|
55
|
+
|
|
56
|
+
```html
|
|
57
|
+
<gl-button block>Block Level Button</gl-button>
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
## Disabled state
|
|
61
|
+
|
|
62
|
+
Set the `disabled` prop to disable button default functionality. `disabled` also works with buttons
|
|
63
|
+
rendered as `<a>` elements and `<router-link>` (i.e. with the `href` or `to` prop set).
|
|
64
|
+
|
|
65
|
+
```html
|
|
66
|
+
<gl-button disabled>Disabled</gl-button>
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
## Router link support
|
|
70
|
+
|
|
71
|
+
Refer to the [Router support](?path=/docs/base-link--docs#router-links) reference docs for
|
|
72
|
+
the various supported `<router-link>` related props.
|
|
73
|
+
|
|
74
|
+
## Accessibility
|
|
75
|
+
|
|
76
|
+
When the `href` prop is set to `'#'`, `<gl-button>` will render a link (`<a>`) element with attribute
|
|
77
|
+
`role="button"` set and appropriate keydown listeners (<kbd>Enter</kbd> and <kbd>Space</kbd>) so
|
|
78
|
+
that the link acts like a native HTML `<button>` for screen reader and keyboard-only users. When
|
|
79
|
+
disabled, the `aria-disabled="true"` attribute will be set on the `<a>` element.
|
|
80
|
+
|
|
81
|
+
When the `href` is set to any other value (or the `to` prop is used), `role="button"` will not be
|
|
82
|
+
added, nor will the keyboard event listeners be enabled.
|
|
83
|
+
|
|
26
84
|
## Label button
|
|
27
85
|
|
|
28
86
|
A label button renders a non-interactive `span` styled as a button. This can be especially useful
|
|
@@ -1,79 +1,219 @@
|
|
|
1
1
|
<!-- eslint-disable vue/multi-word-component-names -->
|
|
2
2
|
<script>
|
|
3
|
-
import
|
|
3
|
+
import GlLink from '../link/link.vue';
|
|
4
4
|
import {
|
|
5
5
|
buttonCategoryOptions,
|
|
6
6
|
buttonVariantOptions,
|
|
7
7
|
buttonSizeOptions,
|
|
8
|
+
linkVariantUnstyled,
|
|
8
9
|
} from '../../../utils/constants';
|
|
9
|
-
import { logWarning } from '../../../utils/utils';
|
|
10
|
+
import { logWarning, stopEvent } from '../../../utils/utils';
|
|
10
11
|
import { isSlotEmpty } from '../../../utils/is_slot_empty';
|
|
11
12
|
import { SafeLinkMixin } from '../../mixins/safe_link_mixin';
|
|
13
|
+
import { isEvent } from '../../../vendor/bootstrap-vue/src/utils/inspect';
|
|
12
14
|
import GlIcon from '../icon/icon.vue';
|
|
13
15
|
import GlLoadingIcon from '../loading_icon/loading_icon.vue';
|
|
16
|
+
import { ENTER, SPACE } from '../new_dropdowns/constants';
|
|
14
17
|
|
|
15
18
|
export default {
|
|
16
19
|
name: 'GlButton',
|
|
17
20
|
components: {
|
|
18
|
-
BButton,
|
|
19
21
|
GlIcon,
|
|
20
22
|
GlLoadingIcon,
|
|
21
23
|
},
|
|
22
24
|
mixins: [SafeLinkMixin],
|
|
23
25
|
props: {
|
|
26
|
+
/**
|
|
27
|
+
* Set the category of the button.
|
|
28
|
+
*/
|
|
24
29
|
category: {
|
|
25
30
|
type: String,
|
|
26
31
|
required: false,
|
|
27
32
|
default: buttonCategoryOptions.primary,
|
|
28
33
|
validator: (value) => Object.keys(buttonCategoryOptions).includes(value),
|
|
29
34
|
},
|
|
35
|
+
/**
|
|
36
|
+
* Set the variant of the button.
|
|
37
|
+
*/
|
|
30
38
|
variant: {
|
|
31
39
|
type: String,
|
|
32
40
|
required: false,
|
|
33
41
|
default: buttonVariantOptions.default,
|
|
34
42
|
validator: (value) => Object.keys(buttonVariantOptions).includes(value),
|
|
35
43
|
},
|
|
44
|
+
/**
|
|
45
|
+
* Specify the size of the button. Options are `small` and `medium`.
|
|
46
|
+
*/
|
|
36
47
|
size: {
|
|
37
48
|
type: String,
|
|
38
49
|
required: false,
|
|
39
50
|
default: 'medium',
|
|
40
51
|
validator: (value) => Object.keys(buttonSizeOptions).includes(value),
|
|
41
52
|
},
|
|
53
|
+
/**
|
|
54
|
+
* Style the button as selected.
|
|
55
|
+
*/
|
|
42
56
|
selected: {
|
|
43
57
|
type: Boolean,
|
|
44
58
|
required: false,
|
|
45
59
|
default: false,
|
|
46
60
|
},
|
|
61
|
+
/**
|
|
62
|
+
* Specify an icon to render in the button.
|
|
63
|
+
*/
|
|
47
64
|
icon: {
|
|
48
65
|
type: String,
|
|
49
66
|
required: false,
|
|
50
67
|
default: '',
|
|
51
68
|
},
|
|
69
|
+
/**
|
|
70
|
+
* Render a non-interactive label button, a `span` styled as a button.
|
|
71
|
+
*/
|
|
52
72
|
label: {
|
|
53
73
|
type: Boolean,
|
|
54
74
|
required: false,
|
|
55
75
|
default: false,
|
|
56
76
|
},
|
|
77
|
+
/**
|
|
78
|
+
* Set the loading state of the button.
|
|
79
|
+
*/
|
|
57
80
|
loading: {
|
|
58
81
|
type: Boolean,
|
|
59
82
|
required: false,
|
|
60
83
|
default: false,
|
|
61
84
|
},
|
|
85
|
+
/**
|
|
86
|
+
* CSS classes to add to the button text.
|
|
87
|
+
*/
|
|
62
88
|
buttonTextClasses: {
|
|
63
89
|
type: String,
|
|
64
90
|
required: false,
|
|
65
91
|
default: '',
|
|
66
92
|
},
|
|
93
|
+
/**
|
|
94
|
+
* Renders a 100% width button (expands to the width of its parent container).
|
|
95
|
+
*/
|
|
67
96
|
block: {
|
|
68
97
|
type: Boolean,
|
|
69
98
|
required: false,
|
|
70
99
|
default: false,
|
|
71
100
|
},
|
|
101
|
+
/**
|
|
102
|
+
* Specify the HTML tag to render instead of the default tag.
|
|
103
|
+
*/
|
|
104
|
+
tag: {
|
|
105
|
+
type: String,
|
|
106
|
+
required: false,
|
|
107
|
+
default: 'button',
|
|
108
|
+
},
|
|
109
|
+
/**
|
|
110
|
+
* The value to set the button's `type` attribute to. Can be one of `button`, `submit`, or `reset`.
|
|
111
|
+
*/
|
|
112
|
+
type: {
|
|
113
|
+
type: String,
|
|
114
|
+
required: false,
|
|
115
|
+
default: 'button',
|
|
116
|
+
validator: (value) => ['button', 'submit', 'reset'].includes(value),
|
|
117
|
+
},
|
|
118
|
+
/**
|
|
119
|
+
* Disables the component's functionality and places it in a disabled state.
|
|
120
|
+
*/
|
|
72
121
|
disabled: {
|
|
73
122
|
type: Boolean,
|
|
74
123
|
required: false,
|
|
75
124
|
default: false,
|
|
76
125
|
},
|
|
126
|
+
/**
|
|
127
|
+
* Denotes the target URL of the link for standard links.
|
|
128
|
+
*/
|
|
129
|
+
href: {
|
|
130
|
+
type: String,
|
|
131
|
+
required: false,
|
|
132
|
+
default: undefined,
|
|
133
|
+
},
|
|
134
|
+
/**
|
|
135
|
+
* Skips sanitization of href if true. This should be used sparingly.
|
|
136
|
+
* Consult security team before setting to true.
|
|
137
|
+
*/
|
|
138
|
+
isUnsafeLink: {
|
|
139
|
+
type: Boolean,
|
|
140
|
+
required: false,
|
|
141
|
+
default: false,
|
|
142
|
+
},
|
|
143
|
+
/**
|
|
144
|
+
* Sets the 'rel' attribute on the rendered link.
|
|
145
|
+
*/
|
|
146
|
+
rel: {
|
|
147
|
+
type: String,
|
|
148
|
+
required: false,
|
|
149
|
+
default: null,
|
|
150
|
+
},
|
|
151
|
+
/**
|
|
152
|
+
* Sets the 'target' attribute on the rendered link.
|
|
153
|
+
*/
|
|
154
|
+
target: {
|
|
155
|
+
type: String,
|
|
156
|
+
required: false,
|
|
157
|
+
default: null,
|
|
158
|
+
},
|
|
159
|
+
/**
|
|
160
|
+
* Places the component in the active state with active styling
|
|
161
|
+
*/
|
|
162
|
+
active: {
|
|
163
|
+
type: Boolean,
|
|
164
|
+
required: false,
|
|
165
|
+
default: false,
|
|
166
|
+
},
|
|
167
|
+
/**
|
|
168
|
+
* <router-link> prop: Denotes the target route of the link.
|
|
169
|
+
* When clicked, the value of the to prop will be passed to `router.push()` internally,
|
|
170
|
+
* so the value can be either a string or a Location descriptor object.
|
|
171
|
+
*/
|
|
172
|
+
to: {
|
|
173
|
+
type: [Object, String],
|
|
174
|
+
required: false,
|
|
175
|
+
default: undefined,
|
|
176
|
+
},
|
|
177
|
+
/**
|
|
178
|
+
* <router-link> prop: Configure the active CSS class applied when the link is active.
|
|
179
|
+
*/
|
|
180
|
+
activeClass: {
|
|
181
|
+
type: String,
|
|
182
|
+
required: false,
|
|
183
|
+
default: undefined,
|
|
184
|
+
},
|
|
185
|
+
/**
|
|
186
|
+
* <router-link> prop: Configure the active CSS class applied when the link is active with exact match.
|
|
187
|
+
*/
|
|
188
|
+
exactActiveClass: {
|
|
189
|
+
type: String,
|
|
190
|
+
required: false,
|
|
191
|
+
default: undefined,
|
|
192
|
+
},
|
|
193
|
+
/**
|
|
194
|
+
* <router-link> prop: Setting the replace prop will call `router.replace()` instead of `router.push()`
|
|
195
|
+
* when clicked, so the navigation will not leave a history record.
|
|
196
|
+
*/
|
|
197
|
+
replace: {
|
|
198
|
+
type: Boolean,
|
|
199
|
+
required: false,
|
|
200
|
+
default: false,
|
|
201
|
+
},
|
|
202
|
+
/**
|
|
203
|
+
* <nuxt-link> prop: To improve the responsiveness of your Nuxt.js applications, when the link will be displayed within the viewport,
|
|
204
|
+
* Nuxt.js will automatically prefetch the code splitted page. Setting `prefetch` to `true` or `false` will overwrite the default value of `router.prefetchLinks`
|
|
205
|
+
*/
|
|
206
|
+
prefetch: {
|
|
207
|
+
type: Boolean,
|
|
208
|
+
required: false,
|
|
209
|
+
// Must be `null` to fall back to the value defined in the
|
|
210
|
+
// `nuxt.config.js` configuration file for `router.prefetchLinks`
|
|
211
|
+
// We convert `null` to `undefined`, so that Nuxt.js will use the
|
|
212
|
+
// compiled default
|
|
213
|
+
// Vue treats `undefined` as default of `false` for Boolean props,
|
|
214
|
+
// so we must set it as `null` here to be a true tri-state prop
|
|
215
|
+
default: null,
|
|
216
|
+
},
|
|
77
217
|
},
|
|
78
218
|
computed: {
|
|
79
219
|
hasIcon() {
|
|
@@ -86,7 +226,7 @@ export default {
|
|
|
86
226
|
return this.disabled || this.loading;
|
|
87
227
|
},
|
|
88
228
|
buttonClasses() {
|
|
89
|
-
const classes = ['gl-button'];
|
|
229
|
+
const classes = ['btn', 'gl-button', `btn-${this.variant}`, `btn-${this.buttonSize}`];
|
|
90
230
|
|
|
91
231
|
if (this.category !== buttonCategoryOptions.primary) {
|
|
92
232
|
classes.push(`btn-${this.variant}-${this.category}`);
|
|
@@ -96,10 +236,12 @@ export default {
|
|
|
96
236
|
'btn-icon': this.hasIconOnly,
|
|
97
237
|
'button-ellipsis-horizontal': this.hasIconOnly && this.icon === 'ellipsis_h',
|
|
98
238
|
selected: this.selected,
|
|
239
|
+
'btn-block': this.displayBlock,
|
|
240
|
+
disabled: this.disabled,
|
|
99
241
|
});
|
|
100
242
|
|
|
101
243
|
if (this.label) {
|
|
102
|
-
classes.push('btn', 'btn-label'
|
|
244
|
+
classes.push('btn', 'btn-label');
|
|
103
245
|
}
|
|
104
246
|
|
|
105
247
|
return classes;
|
|
@@ -110,6 +252,83 @@ export default {
|
|
|
110
252
|
displayBlock() {
|
|
111
253
|
return !this.label && this.block;
|
|
112
254
|
},
|
|
255
|
+
isLink() {
|
|
256
|
+
return this.href || this.to;
|
|
257
|
+
},
|
|
258
|
+
isHashLink() {
|
|
259
|
+
return this.isLink && this.href === '#';
|
|
260
|
+
},
|
|
261
|
+
isButton() {
|
|
262
|
+
return this.componentIs === 'button';
|
|
263
|
+
},
|
|
264
|
+
isNonStandardTag() {
|
|
265
|
+
if (this.label) {
|
|
266
|
+
return false;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
return !this.isLink && !this.isButton;
|
|
270
|
+
},
|
|
271
|
+
tabindex() {
|
|
272
|
+
// When disabled remove links and non-standard tags from tab order
|
|
273
|
+
if (this.disabled) {
|
|
274
|
+
return this.isLink || this.isNonStandardTag ? '-1' : this.$attrs.tabindex;
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
// Add hash links and non-standard tags to tab order
|
|
278
|
+
return this.isNonStandardTag || this.isHashLink ? '0' : this.$attrs.tabindex;
|
|
279
|
+
},
|
|
280
|
+
computedPropsAndAttributes() {
|
|
281
|
+
const base = {
|
|
282
|
+
// Type only used for "real" buttons
|
|
283
|
+
type: this.isButton ? this.type : null,
|
|
284
|
+
// Disabled only set on "real" buttons
|
|
285
|
+
disabled: this.isButton ? this.isButtonDisabled : null,
|
|
286
|
+
// We add a role of button when the tag is not a link or button or when link has `href` of `#`
|
|
287
|
+
role: this.isNonStandardTag || this.isHashLink ? 'button' : this.$attrs?.role,
|
|
288
|
+
// We set the `aria-disabled` state for non-standard tags
|
|
289
|
+
...(this.isNonStandardTag ? { 'aria-disabled': String(this.disabled) } : {}),
|
|
290
|
+
tabindex: this.tabindex,
|
|
291
|
+
};
|
|
292
|
+
|
|
293
|
+
if (this.isLink) {
|
|
294
|
+
return {
|
|
295
|
+
...this.$attrs,
|
|
296
|
+
...base,
|
|
297
|
+
variant: linkVariantUnstyled,
|
|
298
|
+
disabled: this.disabled,
|
|
299
|
+
href: this.href,
|
|
300
|
+
isUnsafeLink: this.isUnsafeLink,
|
|
301
|
+
rel: this.rel,
|
|
302
|
+
target: this.target,
|
|
303
|
+
active: this.active,
|
|
304
|
+
to: this.to,
|
|
305
|
+
activeClass: this.activeClass,
|
|
306
|
+
exactActiveClass: this.exactActiveClass,
|
|
307
|
+
replace: this.replace,
|
|
308
|
+
prefetch: this.prefetch,
|
|
309
|
+
};
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
return { ...this.$attrs, ...base };
|
|
313
|
+
},
|
|
314
|
+
computedListeners() {
|
|
315
|
+
return {
|
|
316
|
+
click: this.onClick,
|
|
317
|
+
keydown: this.onKeydown,
|
|
318
|
+
...this.$listeners,
|
|
319
|
+
};
|
|
320
|
+
},
|
|
321
|
+
componentIs() {
|
|
322
|
+
if (this.label) {
|
|
323
|
+
return 'span';
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
if (this.isLink) {
|
|
327
|
+
return GlLink;
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
return this.tag;
|
|
331
|
+
},
|
|
113
332
|
},
|
|
114
333
|
mounted() {
|
|
115
334
|
// eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
|
|
@@ -120,20 +339,36 @@ export default {
|
|
|
120
339
|
);
|
|
121
340
|
}
|
|
122
341
|
},
|
|
342
|
+
methods: {
|
|
343
|
+
onKeydown(event) {
|
|
344
|
+
// Skip if disabled
|
|
345
|
+
// Add SPACE keydown handler for link has `href` of `#`
|
|
346
|
+
// Add ENTER handler for non-standard tags
|
|
347
|
+
if (!this.disabled && (this.isNonStandardTag || this.isHashLink)) {
|
|
348
|
+
const { code } = event;
|
|
349
|
+
|
|
350
|
+
if (code === SPACE || (code === ENTER && this.isNonStandardTag)) {
|
|
351
|
+
const target = event.currentTarget || event.target;
|
|
352
|
+
stopEvent(event, { propagation: false });
|
|
353
|
+
target.click();
|
|
354
|
+
}
|
|
355
|
+
}
|
|
356
|
+
},
|
|
357
|
+
onClick(event) {
|
|
358
|
+
if (this.disabled && isEvent(event)) {
|
|
359
|
+
stopEvent(event);
|
|
360
|
+
}
|
|
361
|
+
},
|
|
362
|
+
},
|
|
123
363
|
};
|
|
124
364
|
</script>
|
|
125
365
|
<template>
|
|
126
366
|
<component
|
|
127
|
-
:is="
|
|
128
|
-
v-bind="
|
|
367
|
+
:is="componentIs"
|
|
368
|
+
v-bind="computedPropsAndAttributes"
|
|
129
369
|
v-safe-link:[safeLinkConfig]
|
|
130
|
-
:block="displayBlock"
|
|
131
|
-
:target="target"
|
|
132
|
-
:variant="variant"
|
|
133
|
-
:size="buttonSize"
|
|
134
|
-
:disabled="isButtonDisabled"
|
|
135
370
|
:class="buttonClasses"
|
|
136
|
-
v-on="
|
|
371
|
+
v-on="computedListeners"
|
|
137
372
|
>
|
|
138
373
|
<gl-loading-icon v-if="loading" inline class="gl-button-icon gl-button-loading-indicator" />
|
|
139
374
|
<gl-icon v-if="hasIcon && !(hasIconOnly && loading)" class="gl-button-icon" :name="icon" />
|