@gitlab/ui 49.0.1 → 49.0.3
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 +14 -0
- package/dist/components/base/accordion/accordion.js +2 -8
- package/dist/components/base/accordion/accordion_item.js +0 -14
- package/dist/components/base/alert/alert.js +4 -22
- package/dist/components/base/avatar/avatar.js +0 -7
- package/dist/components/base/avatar_labeled/avatar_labeled.js +0 -2
- package/dist/components/base/avatars_inline/avatars_inline.js +2 -10
- package/dist/components/base/badge/badge.js +0 -8
- package/dist/components/base/banner/banner.js +0 -10
- package/dist/components/base/breadcrumb/breadcrumb.js +0 -12
- package/dist/components/base/breadcrumb/breadcrumb_item.js +0 -2
- package/dist/components/base/broadcast_message/broadcast_message.js +0 -3
- package/dist/components/base/button/button.js +0 -11
- package/dist/components/base/card/card.js +1 -2
- package/dist/components/base/datepicker/datepicker.js +7 -42
- package/dist/components/base/daterange_picker/daterange_picker.js +0 -23
- package/dist/components/base/drawer/drawer.js +0 -13
- package/dist/components/base/dropdown/dropdown.js +3 -17
- package/dist/components/base/dropdown/dropdown_item.js +2 -8
- package/dist/components/base/filtered_search/common_story_options.js +1 -2
- package/dist/components/base/filtered_search/filtered_search.js +9 -61
- package/dist/components/base/filtered_search/filtered_search_suggestion.js +0 -6
- package/dist/components/base/filtered_search/filtered_search_suggestion_list.js +0 -16
- package/dist/components/base/filtered_search/filtered_search_term.js +0 -9
- package/dist/components/base/filtered_search/filtered_search_token.js +10 -49
- package/dist/components/base/filtered_search/filtered_search_token_segment.js +3 -56
- package/dist/components/base/filtered_search/filtered_search_utils.js +7 -24
- package/dist/components/base/form/form_checkbox/form_checkbox.js +0 -2
- package/dist/components/base/form/form_checkbox_tree/checkbox_tree_node.js +0 -4
- package/dist/components/base/form/form_checkbox_tree/form_checkbox_tree.js +0 -10
- package/dist/components/base/form/form_checkbox_tree/models/node.js +1 -10
- package/dist/components/base/form/form_checkbox_tree/models/tree.js +16 -37
- package/dist/components/base/form/form_combobox/form_combobox.js +2 -36
- package/dist/components/base/form/form_group/form_group.js +2 -7
- package/dist/components/base/form/form_input/form_input.js +2 -8
- package/dist/components/base/form/form_input_group/form_input_group.js +0 -5
- package/dist/components/base/form/form_input_group/form_input_group_mixin.js +0 -8
- package/dist/components/base/form/form_radio_group/form_radio_group.js +0 -2
- package/dist/components/base/form/form_select/form_select.js +0 -3
- package/dist/components/base/form/form_textarea/form_textarea.js +2 -7
- package/dist/components/base/icon/icon.js +4 -14
- package/dist/components/base/infinite_scroll/infinite_scroll.js +7 -21
- package/dist/components/base/keyset_pagination/keyset_pagination.js +0 -9
- package/dist/components/base/label/label.js +0 -12
- package/dist/components/base/loading_icon/loading_icon.js +7 -10
- package/dist/components/base/markdown/markdown.js +1 -0
- package/dist/components/base/modal/modal.js +7 -27
- package/dist/components/base/new_dropdowns/base_dropdown/base_dropdown.js +0 -25
- package/dist/components/base/new_dropdowns/constants.js +4 -2
- package/dist/components/base/new_dropdowns/listbox/listbox.js +0 -63
- package/dist/components/base/new_dropdowns/listbox/listbox_group.js +0 -2
- package/dist/components/base/new_dropdowns/listbox/listbox_item.js +0 -5
- package/dist/components/base/new_dropdowns/listbox/utils.js +0 -7
- package/dist/components/base/paginated_list/paginated_list.js +0 -15
- package/dist/components/base/pagination/pagination.js +14 -72
- package/dist/components/base/path/path.js +0 -29
- package/dist/components/base/popover/popover.js +0 -5
- package/dist/components/base/search_box_by_click/search_box_by_click.js +1 -26
- package/dist/components/base/search_box_by_type/search_box_by_type.js +2 -12
- package/dist/components/base/segmented_control/segmented_control.js +0 -10
- package/dist/components/base/skeleton_loader/skeleton_loader.js +0 -19
- package/dist/components/base/skeleton_loading/skeleton_loading.js +0 -3
- package/dist/components/base/sorting/sorting.js +1 -9
- package/dist/components/base/sorting/sorting_item.js +4 -6
- package/dist/components/base/table/table.js +0 -4
- package/dist/components/base/tabs/tab/tab.js +2 -6
- package/dist/components/base/tabs/tabs/scrollable_tabs.js +0 -21
- package/dist/components/base/tabs/tabs/tabs.js +8 -33
- package/dist/components/base/toast/toast.js +4 -15
- package/dist/components/base/toggle/toggle.js +0 -18
- package/dist/components/base/token/token.js +0 -4
- package/dist/components/base/token_selector/token_container.js +0 -24
- package/dist/components/base/token_selector/token_selector.js +10 -61
- package/dist/components/base/token_selector/token_selector_dropdown.js +4 -32
- package/dist/components/charts/area/area.js +8 -32
- package/dist/components/charts/bar/bar.js +7 -19
- package/dist/components/charts/chart/chart.js +1 -22
- package/dist/components/charts/column/column.js +8 -18
- package/dist/components/charts/discrete_scatter/discrete_scatter.js +2 -13
- package/dist/components/charts/gauge/gauge.js +0 -15
- package/dist/components/charts/heatmap/heatmap.js +3 -16
- package/dist/components/charts/legend/legend.js +2 -24
- package/dist/components/charts/line/line.js +8 -34
- package/dist/components/charts/series_label/series_label.js +0 -12
- package/dist/components/charts/single_stat/single_stat.js +0 -8
- package/dist/components/charts/sparkline/sparkline.js +1 -16
- package/dist/components/charts/stacked_column/stacked_column.js +8 -26
- package/dist/components/charts/tooltip/tooltip.js +0 -6
- package/dist/components/mixins/button_mixin.js +0 -1
- package/dist/components/mixins/safe_link_mixin.js +0 -1
- package/dist/components/mixins/toolbox_mixin.js +0 -1
- package/dist/components/mixins/tooltip_mixin.js +1 -2
- package/dist/components/regions/empty_state/empty_state.js +0 -12
- package/dist/components/utilities/animated_number/animated_number.js +0 -16
- package/dist/components/utilities/friendly_wrap/friendly_wrap.js +0 -3
- package/dist/components/utilities/intersection_observer/intersection_observer.js +0 -7
- package/dist/components/utilities/intersperse/intersperse.js +3 -9
- package/dist/components/utilities/sprintf/sprintf.js +9 -23
- package/dist/components/utilities/truncate/truncate.js +0 -10
- package/dist/config.js +3 -4
- package/dist/directives/hover_load/hover_load.js +2 -8
- package/dist/directives/outside/get_event_like_time_stamp.js +4 -2
- package/dist/directives/outside/outside.js +5 -20
- package/dist/directives/resize_observer/resize_observer.js +0 -10
- package/dist/directives/safe_html/safe_html.js +5 -6
- package/dist/directives/safe_link/mock_data.js +1 -1
- package/dist/directives/safe_link/safe_link.js +0 -13
- package/dist/utils/breakpoints.js +0 -3
- package/dist/utils/charts/config.js +29 -42
- package/dist/utils/charts/constants.js +8 -8
- package/dist/utils/charts/mock_data.js +2 -2
- package/dist/utils/charts/story_config.js +1 -1
- package/dist/utils/charts/theme.js +1 -3
- package/dist/utils/charts/utils.js +2 -6
- package/dist/utils/constants.js +10 -7
- package/dist/utils/data_utils.js +5 -4
- package/dist/utils/datetime_utility.js +4 -4
- package/dist/utils/number_utils.js +7 -11
- package/dist/utils/stories_utils.js +1 -1
- package/dist/utils/story_decorators/container.js +0 -1
- package/dist/utils/string_utils.js +0 -14
- package/dist/utils/test_utils.js +3 -2
- package/dist/utils/use_fake_date.js +0 -4
- package/dist/utils/use_mock_intersection_observer.js +4 -19
- package/dist/utils/utils.js +5 -14
- package/package.json +3 -3
- package/src/components/base/pagination/pagination.vue +2 -2
- package/src/components/base/toast/toast.js +1 -0
|
@@ -27,7 +27,6 @@ var script = {
|
|
|
27
27
|
if (this.size === null) {
|
|
28
28
|
return [];
|
|
29
29
|
}
|
|
30
|
-
|
|
31
30
|
if (_isObject(this.size)) {
|
|
32
31
|
const {
|
|
33
32
|
default: defaultSize,
|
|
@@ -38,10 +37,8 @@ var script = {
|
|
|
38
37
|
return `gl-${breakpoint}-form-select-${size}`;
|
|
39
38
|
})];
|
|
40
39
|
}
|
|
41
|
-
|
|
42
40
|
return [`gl-form-select-${this.size}`];
|
|
43
41
|
}
|
|
44
|
-
|
|
45
42
|
}
|
|
46
43
|
};
|
|
47
44
|
|
|
@@ -33,15 +33,14 @@ var script = {
|
|
|
33
33
|
computed: {
|
|
34
34
|
listeners() {
|
|
35
35
|
var _this = this;
|
|
36
|
-
|
|
37
|
-
|
|
36
|
+
return {
|
|
37
|
+
...this.$listeners,
|
|
38
38
|
// Swap purpose of input and update events from underlying BFormTextarea.
|
|
39
39
|
// See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/631.
|
|
40
40
|
input: function () {
|
|
41
41
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
42
42
|
args[_key] = arguments[_key];
|
|
43
43
|
}
|
|
44
|
-
|
|
45
44
|
/**
|
|
46
45
|
* Emitted to update the v-model
|
|
47
46
|
*/
|
|
@@ -51,7 +50,6 @@ var script = {
|
|
|
51
50
|
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
|
52
51
|
args[_key2] = arguments[_key2];
|
|
53
52
|
}
|
|
54
|
-
|
|
55
53
|
/**
|
|
56
54
|
* Triggered by user interaction.
|
|
57
55
|
* Emitted after any formatting (not including 'trim' or 'number' props).
|
|
@@ -61,11 +59,9 @@ var script = {
|
|
|
61
59
|
}
|
|
62
60
|
};
|
|
63
61
|
},
|
|
64
|
-
|
|
65
62
|
keypressEvent() {
|
|
66
63
|
return this.submitOnEnter ? 'keyup' : null;
|
|
67
64
|
}
|
|
68
|
-
|
|
69
65
|
},
|
|
70
66
|
methods: {
|
|
71
67
|
handleKeyPress(e) {
|
|
@@ -73,7 +69,6 @@ var script = {
|
|
|
73
69
|
this.$emit('submit');
|
|
74
70
|
}
|
|
75
71
|
}
|
|
76
|
-
|
|
77
72
|
}
|
|
78
73
|
};
|
|
79
74
|
|
|
@@ -3,31 +3,27 @@ import { iconSizeOptions } from '../../../utils/constants';
|
|
|
3
3
|
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
|
|
4
4
|
|
|
5
5
|
//
|
|
6
|
-
|
|
7
6
|
let iconValidator = () => true;
|
|
7
|
+
|
|
8
8
|
/*
|
|
9
9
|
During development/tests we want to validate that we are just using icons that are actually defined
|
|
10
10
|
*/
|
|
11
|
-
|
|
12
|
-
|
|
13
11
|
if (process.env.NODE_ENV !== 'production') {
|
|
14
12
|
// eslint-disable-next-line global-require
|
|
15
13
|
const data = require('@gitlab/svgs/dist/icons.json');
|
|
16
|
-
|
|
17
14
|
const {
|
|
18
15
|
icons
|
|
19
16
|
} = data;
|
|
20
|
-
|
|
21
17
|
iconValidator = value => {
|
|
22
18
|
if (icons.includes(value)) {
|
|
23
19
|
return true;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
|
|
20
|
+
}
|
|
21
|
+
// eslint-disable-next-line no-console
|
|
27
22
|
console.warn(`Icon '${value}' is not a known icon of @gitlab/svgs`);
|
|
28
23
|
return false;
|
|
29
24
|
};
|
|
30
25
|
}
|
|
26
|
+
|
|
31
27
|
/** This is a re-usable vue component for rendering a svg sprite icon
|
|
32
28
|
* @example
|
|
33
29
|
* <icon
|
|
@@ -36,8 +32,6 @@ if (process.env.NODE_ENV !== 'production') {
|
|
|
36
32
|
* class="top"
|
|
37
33
|
* />
|
|
38
34
|
*/
|
|
39
|
-
|
|
40
|
-
|
|
41
35
|
var script = {
|
|
42
36
|
props: {
|
|
43
37
|
/**
|
|
@@ -49,7 +43,6 @@ var script = {
|
|
|
49
43
|
required: false,
|
|
50
44
|
default: undefined
|
|
51
45
|
},
|
|
52
|
-
|
|
53
46
|
/**
|
|
54
47
|
* One of the icons from https://gitlab-org.gitlab.io/gitlab-svgs/ project
|
|
55
48
|
*/
|
|
@@ -58,7 +51,6 @@ var script = {
|
|
|
58
51
|
required: true,
|
|
59
52
|
validator: iconValidator
|
|
60
53
|
},
|
|
61
|
-
|
|
62
54
|
/**
|
|
63
55
|
* Icon size
|
|
64
56
|
*/
|
|
@@ -73,11 +65,9 @@ var script = {
|
|
|
73
65
|
spriteHref() {
|
|
74
66
|
return `${iconsPath}#${this.name}`;
|
|
75
67
|
},
|
|
76
|
-
|
|
77
68
|
iconSizeClass() {
|
|
78
69
|
return this.size ? `s${this.size}` : '';
|
|
79
70
|
}
|
|
80
|
-
|
|
81
71
|
}
|
|
82
72
|
};
|
|
83
73
|
|
|
@@ -6,7 +6,6 @@ const throttleDuration = 1000;
|
|
|
6
6
|
* After adding more items, scroll will adjust slightly.
|
|
7
7
|
* Values in pixels, should be a small amount.
|
|
8
8
|
*/
|
|
9
|
-
|
|
10
9
|
const adjustScrollGap = 5;
|
|
11
10
|
const THRESHOLD = 1;
|
|
12
11
|
var script = {
|
|
@@ -19,7 +18,6 @@ var script = {
|
|
|
19
18
|
required: false,
|
|
20
19
|
default: 0
|
|
21
20
|
},
|
|
22
|
-
|
|
23
21
|
/**
|
|
24
22
|
* Numbers of items fetched before scrolling
|
|
25
23
|
*/
|
|
@@ -27,7 +25,6 @@ var script = {
|
|
|
27
25
|
type: Number,
|
|
28
26
|
required: true
|
|
29
27
|
},
|
|
30
|
-
|
|
31
28
|
/**
|
|
32
29
|
* Max height of the list before the scrollbar appears
|
|
33
30
|
*/
|
|
@@ -43,15 +40,12 @@ var script = {
|
|
|
43
40
|
maxHeight: this.maxListHeight ? `${this.maxListHeight}px` : 'auto'
|
|
44
41
|
};
|
|
45
42
|
},
|
|
46
|
-
|
|
47
43
|
legendText() {
|
|
48
44
|
if (this.totalItems > 0) {
|
|
49
45
|
return `Showing ${this.fetchedItems} of ${this.totalItems} items`;
|
|
50
46
|
}
|
|
51
|
-
|
|
52
47
|
return `Showing ${this.fetchedItems} items`;
|
|
53
48
|
}
|
|
54
|
-
|
|
55
49
|
},
|
|
56
50
|
watch: {
|
|
57
51
|
fetchedItems(newVal, oldVal) {
|
|
@@ -60,22 +54,23 @@ var script = {
|
|
|
60
54
|
const {
|
|
61
55
|
scrollHeight,
|
|
62
56
|
scrollTop
|
|
63
|
-
} = this.$refs.infiniteContainer;
|
|
64
|
-
|
|
57
|
+
} = this.$refs.infiniteContainer;
|
|
58
|
+
// Only when scrolled to the top
|
|
65
59
|
if (scrollHeight !== 0 && scrollTop === 0) {
|
|
66
60
|
// Wait until the DOM is fully updated to adjust scroll
|
|
67
61
|
this.$nextTick(() => {
|
|
68
62
|
const {
|
|
69
63
|
scrollHeight: newScrollHeight
|
|
70
|
-
} = this.$refs.infiniteContainer;
|
|
71
|
-
// minus a small space to allow the user to trigger a scroll once more
|
|
64
|
+
} = this.$refs.infiniteContainer;
|
|
72
65
|
|
|
73
|
-
|
|
66
|
+
// New scrollTop is the new height, minus the old height
|
|
67
|
+
// minus a small space to allow the user to trigger a scroll once more
|
|
68
|
+
let top = newScrollHeight - scrollHeight - adjustScrollGap;
|
|
74
69
|
|
|
70
|
+
// Never adjust to 0, or a new event may be be triggered
|
|
75
71
|
if (top < 1) {
|
|
76
72
|
top = 1;
|
|
77
73
|
}
|
|
78
|
-
|
|
79
74
|
this.scrollTo({
|
|
80
75
|
top
|
|
81
76
|
});
|
|
@@ -83,9 +78,7 @@ var script = {
|
|
|
83
78
|
}
|
|
84
79
|
}
|
|
85
80
|
}
|
|
86
|
-
|
|
87
81
|
},
|
|
88
|
-
|
|
89
82
|
mounted() {
|
|
90
83
|
// Scroll to bottom for reverse effect
|
|
91
84
|
this.$nextTick(() => {
|
|
@@ -94,7 +87,6 @@ var script = {
|
|
|
94
87
|
}
|
|
95
88
|
});
|
|
96
89
|
},
|
|
97
|
-
|
|
98
90
|
methods: {
|
|
99
91
|
/**
|
|
100
92
|
* Scroll to the top of the container, leaving a gap
|
|
@@ -105,7 +97,6 @@ var script = {
|
|
|
105
97
|
top: adjustScrollGap
|
|
106
98
|
});
|
|
107
99
|
},
|
|
108
|
-
|
|
109
100
|
/**
|
|
110
101
|
* Scroll to the bottom of the container, leaving a gap
|
|
111
102
|
* to avoid triggering the event.
|
|
@@ -118,7 +109,6 @@ var script = {
|
|
|
118
109
|
top: scrollHeight - adjustScrollGap
|
|
119
110
|
});
|
|
120
111
|
},
|
|
121
|
-
|
|
122
112
|
/**
|
|
123
113
|
* Scroll to a location in the container
|
|
124
114
|
*
|
|
@@ -133,7 +123,6 @@ var script = {
|
|
|
133
123
|
top
|
|
134
124
|
});
|
|
135
125
|
},
|
|
136
|
-
|
|
137
126
|
topReached: throttle(function topReachedThrottled() {
|
|
138
127
|
/**
|
|
139
128
|
* Emitted when item container is scrolled to the top
|
|
@@ -146,15 +135,12 @@ var script = {
|
|
|
146
135
|
*/
|
|
147
136
|
this.$emit('bottomReached');
|
|
148
137
|
}, throttleDuration),
|
|
149
|
-
|
|
150
138
|
itemsListHeight() {
|
|
151
139
|
return this.$refs.infiniteContainer.scrollHeight;
|
|
152
140
|
},
|
|
153
|
-
|
|
154
141
|
scrollTop() {
|
|
155
142
|
return this.$refs.infiniteContainer.scrollTop;
|
|
156
143
|
},
|
|
157
|
-
|
|
158
144
|
handleScroll: throttle(function handleScrollThrottled() {
|
|
159
145
|
if (Math.abs(this.itemsListHeight() - this.maxListHeight - this.scrollTop()) < THRESHOLD) {
|
|
160
146
|
this.bottomReached();
|
|
@@ -16,7 +16,6 @@ var script = {
|
|
|
16
16
|
// GraphQL type, allowing the returned `pageInfo` object to
|
|
17
17
|
// be bound directly to this component:
|
|
18
18
|
// `<gl-keyset-pagination v-bind="pageInfo">`
|
|
19
|
-
|
|
20
19
|
/**
|
|
21
20
|
* Whether or not the "Prev" button should be enabled
|
|
22
21
|
*/
|
|
@@ -25,7 +24,6 @@ var script = {
|
|
|
25
24
|
required: false,
|
|
26
25
|
default: false
|
|
27
26
|
},
|
|
28
|
-
|
|
29
27
|
/**
|
|
30
28
|
* Whether or not the "Next" button should be enabled
|
|
31
29
|
*/
|
|
@@ -34,7 +32,6 @@ var script = {
|
|
|
34
32
|
required: false,
|
|
35
33
|
default: false
|
|
36
34
|
},
|
|
37
|
-
|
|
38
35
|
/**
|
|
39
36
|
* A cursor that points to the first item in the current page.
|
|
40
37
|
* Will be passed as an event parameter when the "prev" event is fired.
|
|
@@ -44,7 +41,6 @@ var script = {
|
|
|
44
41
|
required: false,
|
|
45
42
|
default: null
|
|
46
43
|
},
|
|
47
|
-
|
|
48
44
|
/**
|
|
49
45
|
* A cursor that points to the last item in the current page.
|
|
50
46
|
* Will be passed as an event parameter when the "next" event is fired.
|
|
@@ -54,7 +50,6 @@ var script = {
|
|
|
54
50
|
required: false,
|
|
55
51
|
default: null
|
|
56
52
|
},
|
|
57
|
-
|
|
58
53
|
/**
|
|
59
54
|
* The text that will be rendered inside the "Prev" button.
|
|
60
55
|
* It\'s important to provide this parameter since the default text is not translatable.
|
|
@@ -64,7 +59,6 @@ var script = {
|
|
|
64
59
|
required: false,
|
|
65
60
|
default: 'Prev'
|
|
66
61
|
},
|
|
67
|
-
|
|
68
62
|
/**
|
|
69
63
|
* A link that will be used as the "Prev" button\'s "href" attribute.
|
|
70
64
|
* If provided, the "Prev" button renders as a link button; otherwise, it is rendered as a regular button.
|
|
@@ -74,7 +68,6 @@ var script = {
|
|
|
74
68
|
required: false,
|
|
75
69
|
default: null
|
|
76
70
|
},
|
|
77
|
-
|
|
78
71
|
/**
|
|
79
72
|
* The text that will be rendered inside the "Next" button.
|
|
80
73
|
* It\'s important to provide this parameter since the default text is not translatable.
|
|
@@ -84,7 +77,6 @@ var script = {
|
|
|
84
77
|
required: false,
|
|
85
78
|
default: 'Next'
|
|
86
79
|
},
|
|
87
|
-
|
|
88
80
|
/**
|
|
89
81
|
* A link that will be used as the "Next" button\'s "href" attribute.
|
|
90
82
|
* If provided, the "Next" button renders as a link button; otherwise, it is rendered as a regular button.
|
|
@@ -94,7 +86,6 @@ var script = {
|
|
|
94
86
|
required: false,
|
|
95
87
|
default: null
|
|
96
88
|
},
|
|
97
|
-
|
|
98
89
|
/**
|
|
99
90
|
* Whether or not both buttons should be disabled (regardless of the "hasPreviousPage" and "hasNextPage" values).
|
|
100
91
|
*/
|
|
@@ -59,13 +59,11 @@ var script = {
|
|
|
59
59
|
default: false
|
|
60
60
|
}
|
|
61
61
|
},
|
|
62
|
-
|
|
63
62
|
data() {
|
|
64
63
|
return {
|
|
65
64
|
splitScopedLabelIndex: this.title.lastIndexOf('::')
|
|
66
65
|
};
|
|
67
66
|
},
|
|
68
|
-
|
|
69
67
|
computed: {
|
|
70
68
|
cssClasses() {
|
|
71
69
|
const textColorVariant = colorFromBackground(this.backgroundColor);
|
|
@@ -76,40 +74,32 @@ var script = {
|
|
|
76
74
|
'gl-label-text-light': textColorVariant === labelColorOptions.light
|
|
77
75
|
};
|
|
78
76
|
},
|
|
79
|
-
|
|
80
77
|
cssVariables() {
|
|
81
78
|
return {
|
|
82
79
|
'--label-background-color': this.backgroundColor,
|
|
83
80
|
'--label-inset-border': `inset 0 0 0 ${this.size === 'sm' ? '1px' : '2px'} ${this.backgroundColor}`
|
|
84
81
|
};
|
|
85
82
|
},
|
|
86
|
-
|
|
87
83
|
scopedKey() {
|
|
88
84
|
return this.scoped ? this.title.slice(0, this.splitScopedLabelIndex) : this.title;
|
|
89
85
|
},
|
|
90
|
-
|
|
91
86
|
scopedValue() {
|
|
92
87
|
return this.title.slice(this.splitScopedLabelIndex + 2);
|
|
93
88
|
},
|
|
94
|
-
|
|
95
89
|
closeIconSize() {
|
|
96
90
|
return this.size === 'sm' ? 12 : 16;
|
|
97
91
|
},
|
|
98
|
-
|
|
99
92
|
labelComponent() {
|
|
100
93
|
return this.target ? GlLink : 'span';
|
|
101
94
|
},
|
|
102
|
-
|
|
103
95
|
tooltipTarget() {
|
|
104
96
|
return this.target ? this.$refs.labelTitle.$el : this.$refs.labelTitle;
|
|
105
97
|
}
|
|
106
|
-
|
|
107
98
|
},
|
|
108
99
|
watch: {
|
|
109
100
|
title() {
|
|
110
101
|
this.splitScopedLabelIndex = this.title.lastIndexOf('::');
|
|
111
102
|
}
|
|
112
|
-
|
|
113
103
|
},
|
|
114
104
|
methods: {
|
|
115
105
|
onClick(e) {
|
|
@@ -121,7 +111,6 @@ var script = {
|
|
|
121
111
|
*/
|
|
122
112
|
this.$emit('click', e);
|
|
123
113
|
},
|
|
124
|
-
|
|
125
114
|
onClose(e) {
|
|
126
115
|
/**
|
|
127
116
|
* Emitted when x is clicked
|
|
@@ -131,7 +120,6 @@ var script = {
|
|
|
131
120
|
*/
|
|
132
121
|
this.$emit('close', e);
|
|
133
122
|
}
|
|
134
|
-
|
|
135
123
|
}
|
|
136
124
|
};
|
|
137
125
|
|
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
|
|
2
2
|
|
|
3
|
-
const sizes = ['sm',
|
|
4
|
-
|
|
5
|
-
'
|
|
3
|
+
const sizes = ['sm',
|
|
4
|
+
// -> 16px
|
|
5
|
+
'md',
|
|
6
|
+
// -> 24px
|
|
7
|
+
'lg',
|
|
8
|
+
// -> 32px
|
|
6
9
|
'xl' // -> 64px
|
|
7
10
|
];
|
|
11
|
+
|
|
8
12
|
const colors = {
|
|
9
13
|
dark: 'dark',
|
|
10
14
|
light: 'light'
|
|
@@ -25,23 +29,18 @@ var script = {
|
|
|
25
29
|
type: String,
|
|
26
30
|
required: false,
|
|
27
31
|
default: 'sm',
|
|
28
|
-
|
|
29
32
|
validator(value) {
|
|
30
33
|
return sizes.indexOf(value) !== -1;
|
|
31
34
|
}
|
|
32
|
-
|
|
33
35
|
},
|
|
34
36
|
color: {
|
|
35
37
|
type: String,
|
|
36
38
|
required: false,
|
|
37
39
|
default: defaultColor,
|
|
38
|
-
|
|
39
40
|
validator(value) {
|
|
40
41
|
return Object.keys(colors).includes(value);
|
|
41
42
|
}
|
|
42
|
-
|
|
43
43
|
},
|
|
44
|
-
|
|
45
44
|
/**
|
|
46
45
|
* Wrap in a span or div.
|
|
47
46
|
*/
|
|
@@ -55,11 +54,9 @@ var script = {
|
|
|
55
54
|
rootElementType() {
|
|
56
55
|
return this.inline ? 'span' : 'div';
|
|
57
56
|
},
|
|
58
|
-
|
|
59
57
|
cssClasses() {
|
|
60
58
|
return [baseCssClass, `${baseCssClass}-${colors[this.color]}`, `${baseCssClass}-${this.size}`];
|
|
61
59
|
}
|
|
62
|
-
|
|
63
60
|
}
|
|
64
61
|
};
|
|
65
62
|
|
|
@@ -6,11 +6,9 @@ import GlButton from '../button/button';
|
|
|
6
6
|
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
|
|
7
7
|
|
|
8
8
|
//
|
|
9
|
-
|
|
10
9
|
function validatorHelper(obj) {
|
|
11
10
|
return Object.keys(obj).every(val => val === 'text' || val === 'attributes');
|
|
12
11
|
}
|
|
13
|
-
|
|
14
12
|
var script = {
|
|
15
13
|
components: {
|
|
16
14
|
BModal,
|
|
@@ -92,95 +90,77 @@ var script = {
|
|
|
92
90
|
// eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
|
|
93
91
|
return Boolean(this.$slots['modal-ok']);
|
|
94
92
|
},
|
|
95
|
-
|
|
96
93
|
shouldRenderModalCancel() {
|
|
97
94
|
// eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
|
|
98
95
|
return Boolean(this.$slots['modal-cancel']);
|
|
99
96
|
},
|
|
100
|
-
|
|
101
97
|
shouldRenderModalFooter() {
|
|
102
|
-
return Boolean(this.actionCancel || this.actionSecondary || this.actionPrimary ||
|
|
98
|
+
return Boolean(this.actionCancel || this.actionSecondary || this.actionPrimary ||
|
|
99
|
+
// eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
|
|
103
100
|
this.$slots['modal-footer']);
|
|
104
101
|
}
|
|
105
|
-
|
|
106
102
|
},
|
|
107
|
-
|
|
108
103
|
mounted() {
|
|
109
104
|
if (!this.ariaLabel && !this.title) {
|
|
110
105
|
logWarning('[gl-modal]: Accessible name for modal missing. Please add title prop or aria-label.');
|
|
111
106
|
}
|
|
112
107
|
},
|
|
113
|
-
|
|
114
108
|
methods: {
|
|
115
109
|
show() {
|
|
116
110
|
this.$refs.modal.show();
|
|
117
111
|
},
|
|
118
|
-
|
|
119
112
|
hide() {
|
|
120
113
|
this.$refs.modal.hide();
|
|
121
114
|
},
|
|
122
|
-
|
|
123
115
|
toggle() {
|
|
124
116
|
this.$refs.modal.toggle();
|
|
125
117
|
},
|
|
126
|
-
|
|
127
118
|
ok() {
|
|
128
119
|
this.$refs.modal.onOk();
|
|
129
120
|
},
|
|
130
|
-
|
|
131
121
|
cancel() {
|
|
132
122
|
this.$refs.modal.onCancel();
|
|
133
123
|
},
|
|
134
|
-
|
|
135
124
|
close() {
|
|
136
125
|
this.$refs.modal.onClose();
|
|
137
126
|
},
|
|
138
|
-
|
|
139
127
|
primary(event) {
|
|
140
128
|
this.$emit('primary', event);
|
|
141
129
|
},
|
|
142
|
-
|
|
143
130
|
canceled(event) {
|
|
144
131
|
this.$emit('canceled', event);
|
|
145
132
|
},
|
|
146
|
-
|
|
147
133
|
secondary(event) {
|
|
148
134
|
this.$emit('secondary', event);
|
|
149
|
-
|
|
150
135
|
if (!(event !== null && event !== void 0 && event.defaultPrevented)) {
|
|
151
136
|
this.close();
|
|
152
137
|
}
|
|
153
138
|
},
|
|
154
|
-
|
|
155
139
|
// set default variant button styling
|
|
156
140
|
buttonBinding(prop, name) {
|
|
157
141
|
if (!prop.attributes) {
|
|
158
142
|
return modalButtonDefaults[name];
|
|
159
143
|
}
|
|
160
|
-
|
|
161
144
|
return prop.attributes;
|
|
162
145
|
},
|
|
163
|
-
|
|
164
146
|
setFocus() {
|
|
165
147
|
if (this.noFocusOnShow) return;
|
|
166
148
|
const btnElts = [...this.$refs.modal.$refs.modal.querySelectorAll('button')];
|
|
167
|
-
const modalElts = [...this.$refs.modal.$refs.body.querySelectorAll(focusableTags.join(COMMA))];
|
|
168
|
-
// move it to the end
|
|
149
|
+
const modalElts = [...this.$refs.modal.$refs.body.querySelectorAll(focusableTags.join(COMMA))];
|
|
169
150
|
|
|
151
|
+
// Iterate over the array and if you find the close button,
|
|
152
|
+
// move it to the end
|
|
170
153
|
const closeBtnIndex = btnElts.findIndex(elt => {
|
|
171
154
|
var _this$$refs$closeBut;
|
|
172
|
-
|
|
173
155
|
return elt === ((_this$$refs$closeBut = this.$refs['close-button']) === null || _this$$refs$closeBut === void 0 ? void 0 : _this$$refs$closeBut.$el);
|
|
174
156
|
});
|
|
175
|
-
|
|
176
157
|
if (closeBtnIndex > -1) {
|
|
177
158
|
btnElts.push(...btnElts.splice(closeBtnIndex, 1));
|
|
178
|
-
}
|
|
179
|
-
|
|
159
|
+
}
|
|
180
160
|
|
|
161
|
+
// ModalElts are the first choice, the btnElts are a backup
|
|
181
162
|
focusFirstFocusableElement([...modalElts, ...btnElts]);
|
|
182
163
|
}
|
|
183
|
-
|
|
184
164
|
}
|
|
185
165
|
};
|
|
186
166
|
|