@gitlab/ui 72.11.1 → 72.12.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.
Files changed (223) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/tokens/css/tokens.css +1 -1
  3. package/dist/tokens/css/tokens.dark.css +1 -1
  4. package/dist/tokens/js/tokens.dark.js +1 -1
  5. package/dist/tokens/js/tokens.js +1 -1
  6. package/dist/tokens/scss/_tokens.dark.scss +1 -1
  7. package/dist/tokens/scss/_tokens.scss +1 -1
  8. package/package.json +1 -1
  9. package/src/internal/color_contrast/color_contrast.md +8 -0
  10. package/src/internal/color_contrast/color_contrast.spec.js +34 -0
  11. package/src/internal/color_contrast/color_contrast.stories.js +41 -0
  12. package/src/internal/color_contrast/color_contrast.vue +52 -0
  13. package/src/tokens/color.dark.tokens.stories.js +36 -22
  14. package/src/tokens/color.data_viz.dark.tokens.stories.js +13 -30
  15. package/src/tokens/color.data_viz.tokens.stories.js +13 -30
  16. package/src/tokens/color.theme.dark.tokens.stories.js +15 -30
  17. package/src/tokens/color.theme.tokens.stories.js +15 -30
  18. package/src/tokens/color.tokens.stories.js +36 -22
  19. package/src/tokens/color.transparency.tokens.stories.js +9 -12
  20. package/src/tokens/common_story_options.js +22 -80
  21. package/src/utils/constants.js +25 -0
  22. package/src/utils/utils.js +21 -1
  23. package/dist/charts.js +0 -14
  24. package/dist/components/base/accordion/accordion.js +0 -73
  25. package/dist/components/base/accordion/accordion_item.js +0 -133
  26. package/dist/components/base/alert/alert.js +0 -222
  27. package/dist/components/base/avatar/avatar.js +0 -160
  28. package/dist/components/base/avatar_labeled/avatar_labeled.js +0 -107
  29. package/dist/components/base/avatar_link/avatar_link.js +0 -47
  30. package/dist/components/base/avatars_inline/avatars_inline.js +0 -119
  31. package/dist/components/base/badge/badge.js +0 -105
  32. package/dist/components/base/banner/banner.js +0 -139
  33. package/dist/components/base/breadcrumb/breadcrumb.js +0 -122
  34. package/dist/components/base/breadcrumb/breadcrumb_item.js +0 -73
  35. package/dist/components/base/broadcast_message/broadcast_message.js +0 -112
  36. package/dist/components/base/broadcast_message/constants.js +0 -5
  37. package/dist/components/base/button/button.js +0 -151
  38. package/dist/components/base/button_group/button_group.js +0 -47
  39. package/dist/components/base/card/card.js +0 -71
  40. package/dist/components/base/carousel/carousel.js +0 -48
  41. package/dist/components/base/carousel/carousel_slide.js +0 -47
  42. package/dist/components/base/collapse/collapse.js +0 -59
  43. package/dist/components/base/datepicker/datepicker.js +0 -386
  44. package/dist/components/base/daterange_picker/daterange_picker.js +0 -288
  45. package/dist/components/base/drawer/drawer.js +0 -127
  46. package/dist/components/base/dropdown/dropdown.js +0 -261
  47. package/dist/components/base/dropdown/dropdown_divider.js +0 -48
  48. package/dist/components/base/dropdown/dropdown_form.js +0 -48
  49. package/dist/components/base/dropdown/dropdown_item.js +0 -131
  50. package/dist/components/base/dropdown/dropdown_section_header.js +0 -48
  51. package/dist/components/base/dropdown/dropdown_text.js +0 -48
  52. package/dist/components/base/filtered_search/common_story_options.js +0 -14
  53. package/dist/components/base/filtered_search/filtered_search.js +0 -388
  54. package/dist/components/base/filtered_search/filtered_search_suggestion.js +0 -89
  55. package/dist/components/base/filtered_search/filtered_search_suggestion_list.js +0 -138
  56. package/dist/components/base/filtered_search/filtered_search_term.js +0 -203
  57. package/dist/components/base/filtered_search/filtered_search_token.js +0 -384
  58. package/dist/components/base/filtered_search/filtered_search_token_segment.js +0 -420
  59. package/dist/components/base/filtered_search/filtered_search_utils.js +0 -242
  60. package/dist/components/base/form/form.js +0 -49
  61. package/dist/components/base/form/form_checkbox/form_checkbox.js +0 -78
  62. package/dist/components/base/form/form_checkbox/form_checkbox_group.js +0 -60
  63. package/dist/components/base/form/form_checkbox_tree/checkbox_tree_node.js +0 -79
  64. package/dist/components/base/form/form_checkbox_tree/form_checkbox_tree.js +0 -138
  65. package/dist/components/base/form/form_checkbox_tree/models/constants.js +0 -12
  66. package/dist/components/base/form/form_checkbox_tree/models/node.js +0 -51
  67. package/dist/components/base/form/form_checkbox_tree/models/tree.js +0 -199
  68. package/dist/components/base/form/form_combobox/constants.js +0 -55
  69. package/dist/components/base/form/form_combobox/form_combobox.js +0 -230
  70. package/dist/components/base/form/form_date/form_date.js +0 -143
  71. package/dist/components/base/form/form_fields/form_field_validator.js +0 -93
  72. package/dist/components/base/form/form_fields/form_fields.js +0 -214
  73. package/dist/components/base/form/form_fields/mappers.js +0 -13
  74. package/dist/components/base/form/form_fields/validators.js +0 -48
  75. package/dist/components/base/form/form_group/form_group.js +0 -97
  76. package/dist/components/base/form/form_input/form_input.js +0 -121
  77. package/dist/components/base/form/form_input_group/form_input_group.js +0 -108
  78. package/dist/components/base/form/form_input_group/form_input_group_mixin.js +0 -41
  79. package/dist/components/base/form/form_radio/form_radio.js +0 -65
  80. package/dist/components/base/form/form_radio_group/form_radio_group.js +0 -78
  81. package/dist/components/base/form/form_select/constants.js +0 -12
  82. package/dist/components/base/form/form_select/form_select.js +0 -82
  83. package/dist/components/base/form/form_text/form_text.js +0 -38
  84. package/dist/components/base/form/form_textarea/form_textarea.js +0 -112
  85. package/dist/components/base/form/input_group_text/input_group_text.js +0 -48
  86. package/dist/components/base/icon/icon.js +0 -111
  87. package/dist/components/base/infinite_scroll/infinite_scroll.js +0 -197
  88. package/dist/components/base/keyset_pagination/keyset_pagination.js +0 -151
  89. package/dist/components/base/label/label.js +0 -163
  90. package/dist/components/base/link/link.js +0 -50
  91. package/dist/components/base/loading_icon/loading_icon.js +0 -111
  92. package/dist/components/base/markdown/markdown.js +0 -52
  93. package/dist/components/base/modal/modal.js +0 -204
  94. package/dist/components/base/nav/nav.js +0 -48
  95. package/dist/components/base/nav/nav_item.js +0 -48
  96. package/dist/components/base/nav/nav_item_dropdown.js +0 -62
  97. package/dist/components/base/navbar/navbar.js +0 -48
  98. package/dist/components/base/new_dropdowns/base_dropdown/base_dropdown.js +0 -453
  99. package/dist/components/base/new_dropdowns/base_dropdown/constants.js +0 -4
  100. package/dist/components/base/new_dropdowns/constants.js +0 -21
  101. package/dist/components/base/new_dropdowns/disclosure/constants.js +0 -8
  102. package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown.js +0 -370
  103. package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown_group.js +0 -110
  104. package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.js +0 -143
  105. package/dist/components/base/new_dropdowns/disclosure/mock_data.js +0 -147
  106. package/dist/components/base/new_dropdowns/disclosure/utils.js +0 -39
  107. package/dist/components/base/new_dropdowns/listbox/listbox.js +0 -767
  108. package/dist/components/base/new_dropdowns/listbox/listbox_group.js +0 -58
  109. package/dist/components/base/new_dropdowns/listbox/listbox_item.js +0 -91
  110. package/dist/components/base/new_dropdowns/listbox/listbox_search_input.js +0 -93
  111. package/dist/components/base/new_dropdowns/listbox/mock_data.js +0 -118
  112. package/dist/components/base/new_dropdowns/listbox/utils.js +0 -34
  113. package/dist/components/base/paginated_list/paginated_list.js +0 -180
  114. package/dist/components/base/pagination/pagination.js +0 -399
  115. package/dist/components/base/path/data.js +0 -34
  116. package/dist/components/base/path/path.js +0 -189
  117. package/dist/components/base/popover/popover.js +0 -110
  118. package/dist/components/base/progress_bar/progress_bar.js +0 -48
  119. package/dist/components/base/search_box_by_click/search_box_by_click.js +0 -235
  120. package/dist/components/base/search_box_by_type/search_box_by_type.js +0 -167
  121. package/dist/components/base/segmented_control/segmented_control.js +0 -109
  122. package/dist/components/base/skeleton_loader/skeleton_loader.js +0 -224
  123. package/dist/components/base/sorting/sorting.js +0 -171
  124. package/dist/components/base/sorting/sorting_item.js +0 -109
  125. package/dist/components/base/table/constants.js +0 -5
  126. package/dist/components/base/table/table.js +0 -89
  127. package/dist/components/base/table_lite/table_lite.js +0 -72
  128. package/dist/components/base/tabs/constants.js +0 -3
  129. package/dist/components/base/tabs/tab/tab.js +0 -83
  130. package/dist/components/base/tabs/tabs/scrollable_tabs.js +0 -143
  131. package/dist/components/base/tabs/tabs/tabs.js +0 -224
  132. package/dist/components/base/toast/toast.js +0 -82
  133. package/dist/components/base/toggle/toggle.js +0 -180
  134. package/dist/components/base/token/token.js +0 -85
  135. package/dist/components/base/token_selector/helpers.js +0 -5
  136. package/dist/components/base/token_selector/token_container.js +0 -165
  137. package/dist/components/base/token_selector/token_selector.js +0 -403
  138. package/dist/components/base/token_selector/token_selector_dropdown.js +0 -199
  139. package/dist/components/base/tooltip/tooltip.js +0 -55
  140. package/dist/components/charts/area/area.js +0 -311
  141. package/dist/components/charts/bar/bar.js +0 -253
  142. package/dist/components/charts/chart/chart.js +0 -215
  143. package/dist/components/charts/column/column.js +0 -226
  144. package/dist/components/charts/discrete_scatter/discrete_scatter.js +0 -203
  145. package/dist/components/charts/gauge/gauge.js +0 -208
  146. package/dist/components/charts/heatmap/heatmap.js +0 -295
  147. package/dist/components/charts/heatmap/index.js +0 -2
  148. package/dist/components/charts/legend/legend.js +0 -228
  149. package/dist/components/charts/line/line.js +0 -308
  150. package/dist/components/charts/series_label/series_label.js +0 -100
  151. package/dist/components/charts/single_stat/single_stat.js +0 -152
  152. package/dist/components/charts/sparkline/sparkline.js +0 -261
  153. package/dist/components/charts/stacked_column/stacked_column.js +0 -335
  154. package/dist/components/charts/tooltip/tooltip.js +0 -251
  155. package/dist/components/experimental/duo/chat/components/duo_chat_conversation/duo_chat_conversation.js +0 -83
  156. package/dist/components/experimental/duo/chat/components/duo_chat_loader/duo_chat_loader.js +0 -100
  157. package/dist/components/experimental/duo/chat/components/duo_chat_message/copy_code_element.js +0 -35
  158. package/dist/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.js +0 -115
  159. package/dist/components/experimental/duo/chat/components/duo_chat_message_sources/duo_chat_message_sources.js +0 -104
  160. package/dist/components/experimental/duo/chat/components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.js +0 -64
  161. package/dist/components/experimental/duo/chat/constants.js +0 -23
  162. package/dist/components/experimental/duo/chat/duo_chat.js +0 -359
  163. package/dist/components/experimental/duo/chat/mock_data.js +0 -83
  164. package/dist/components/experimental/duo/user_feedback/user_feedback.js +0 -94
  165. package/dist/components/experimental/duo/user_feedback/user_feedback_modal.js +0 -124
  166. package/dist/components/experimental/experiment_badge/constants.js +0 -4
  167. package/dist/components/experimental/experiment_badge/experiment_badge.js +0 -107
  168. package/dist/components/mixins/button_mixin.js +0 -11
  169. package/dist/components/mixins/safe_link_mixin.js +0 -30
  170. package/dist/components/mixins/tooltip_mixin.js +0 -21
  171. package/dist/components/regions/dashboard_skeleton/dashboard_skeleton.js +0 -53
  172. package/dist/components/regions/empty_state/empty_state.js +0 -154
  173. package/dist/components/shared_components/charts/tooltip_default_format.js +0 -53
  174. package/dist/components/shared_components/clear_icon_button/clear_icon_button.js +0 -64
  175. package/dist/components/shared_components/close_button/close_button.js +0 -54
  176. package/dist/components/utilities/animated_number/animated_number.js +0 -131
  177. package/dist/components/utilities/friendly_wrap/friendly_wrap.js +0 -75
  178. package/dist/components/utilities/intersection_observer/intersection_observer.js +0 -88
  179. package/dist/components/utilities/intersperse/intersperse.js +0 -86
  180. package/dist/components/utilities/sprintf/sprintf.js +0 -172
  181. package/dist/components/utilities/truncate/constants.js +0 -7
  182. package/dist/components/utilities/truncate/truncate.js +0 -111
  183. package/dist/components/utilities/truncate_text/constants.js +0 -7
  184. package/dist/components/utilities/truncate_text/truncate_text.js +0 -146
  185. package/dist/config.js +0 -86
  186. package/dist/directives/collapse_toggle.js +0 -1
  187. package/dist/directives/hover_load/hover_load.js +0 -45
  188. package/dist/directives/modal.js +0 -1
  189. package/dist/directives/outside/get_event_like_time_stamp.js +0 -33
  190. package/dist/directives/outside/outside.js +0 -106
  191. package/dist/directives/resize_observer/resize_observer.js +0 -51
  192. package/dist/directives/safe_html/constants.js +0 -6
  193. package/dist/directives/safe_html/safe_html.js +0 -39
  194. package/dist/directives/safe_link/mock_data.js +0 -10
  195. package/dist/directives/safe_link/safe_link.js +0 -65
  196. package/dist/directives/tooltip.js +0 -1
  197. package/dist/index.css +0 -7
  198. package/dist/index.css.map +0 -1
  199. package/dist/index.js +0 -105
  200. package/dist/tokens/common_story_options.js +0 -109
  201. package/dist/utils/breakpoints.js +0 -20
  202. package/dist/utils/charts/config.js +0 -556
  203. package/dist/utils/charts/constants.js +0 -63
  204. package/dist/utils/charts/mock_data.js +0 -211
  205. package/dist/utils/charts/story_config.js +0 -42
  206. package/dist/utils/charts/theme.js +0 -192
  207. package/dist/utils/charts/utils.js +0 -54
  208. package/dist/utils/constants.js +0 -270
  209. package/dist/utils/data_utils.js +0 -21
  210. package/dist/utils/datetime_utility.js +0 -61
  211. package/dist/utils/i18n.js +0 -15
  212. package/dist/utils/is_slot_empty.js +0 -38
  213. package/dist/utils/number_utils.js +0 -124
  214. package/dist/utils/stories_constants.js +0 -29
  215. package/dist/utils/stories_utils.js +0 -13
  216. package/dist/utils/story_decorators/container.js +0 -16
  217. package/dist/utils/string_utils.js +0 -69
  218. package/dist/utils/svgs/svg_paths.js +0 -7
  219. package/dist/utils/test_utils.js +0 -33
  220. package/dist/utils/use_fake_date.js +0 -29
  221. package/dist/utils/use_mock_intersection_observer.js +0 -108
  222. package/dist/utils/utils.js +0 -177
  223. package/dist/utils.js +0 -5
@@ -1,403 +0,0 @@
1
- import uniqueId from 'lodash/uniqueId';
2
- import { tokensValidator } from './helpers';
3
- import GlTokenContainer from './token_container';
4
- import GlTokenSelectorDropdown from './token_selector_dropdown';
5
- import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
6
-
7
- var script = {
8
- name: 'GlTokenSelector',
9
- componentId: uniqueId('token-selector'),
10
- components: {
11
- GlTokenContainer,
12
- GlTokenSelectorDropdown
13
- },
14
- model: {
15
- prop: 'selectedTokens',
16
- event: 'input'
17
- },
18
- props: {
19
- /**
20
- * Items to display in dropdown
21
- */
22
- dropdownItems: {
23
- type: Array,
24
- // All items need to have an `id` key
25
- validator: tokensValidator,
26
- required: false,
27
- default: () => []
28
- },
29
- /**
30
- * Should users be allowed to add tokens that are not in `dropdown-items`
31
- */
32
- allowUserDefinedTokens: {
33
- type: Boolean,
34
- required: false,
35
- default: false
36
- },
37
- /**
38
- * Dropdown items are loading, can be used when requesting new dropdown items
39
- */
40
- loading: {
41
- type: Boolean,
42
- required: false,
43
- default: false
44
- },
45
- /**
46
- * Hide the dropdown if `dropdown-items` is empty. Will show `no-results-content` slot if this is `false`
47
- */
48
- hideDropdownWithNoItems: {
49
- type: Boolean,
50
- required: false,
51
- default: false
52
- },
53
- /**
54
- * CSS classes to add to the main token selector container (`.gl-token-selector`)
55
- */
56
- containerClass: {
57
- type: String,
58
- required: false,
59
- default: ''
60
- },
61
- /**
62
- * CSS classes to add to dropdown menu `ul` element
63
- */
64
- menuClass: {
65
- type: [String, Array, Object],
66
- required: false,
67
- default: ''
68
- },
69
- /**
70
- * The autocomplete attribute value for the underlying `input` element
71
- */
72
- autocomplete: {
73
- type: String,
74
- required: false,
75
- default: 'off'
76
- },
77
- /**
78
- * The `aria-labelledby` attribute value for the underlying `input` element
79
- */
80
- ariaLabelledby: {
81
- type: String,
82
- required: false,
83
- default: null
84
- },
85
- /**
86
- * The `placeholder` attribute value for the underlying `input` element
87
- */
88
- placeholder: {
89
- type: String,
90
- required: false,
91
- default: null
92
- },
93
- /**
94
- * HTML attributes to add to the text input. Helpful for adding `data-testid` attributes
95
- */
96
- textInputAttrs: {
97
- type: Object,
98
- required: false,
99
- default: null
100
- },
101
- /**
102
- * Controls the validation state appearance of the component. `true` for valid, `false` for invalid, or `null` for no validation state
103
- */
104
- state: {
105
- type: Boolean,
106
- required: false,
107
- default: null
108
- },
109
- /**
110
- * Tokens that are selected. This prop will automatically be added when using `v-model`
111
- */
112
- selectedTokens: {
113
- type: Array,
114
- // All tokens need to have an `id` key
115
- validator: tokensValidator,
116
- required: true
117
- },
118
- /**
119
- * Controls the `view-only` mode for the tokens
120
- */
121
- viewOnly: {
122
- type: Boolean,
123
- required: false,
124
- default: false
125
- },
126
- /**
127
- * Allows user to bulk delete tokens when enabled
128
- */
129
- allowClearAll: {
130
- type: Boolean,
131
- required: false,
132
- default: false
133
- }
134
- },
135
- data() {
136
- return {
137
- inputText: '',
138
- inputFocused: false,
139
- dropdownIsOpen: false,
140
- focusedDropdownItem: null,
141
- triggerTokenFocusNextBackspace: true,
142
- rootElClasses: '',
143
- dropdownEventHandlers: {
144
- handleUpArrow: () => {},
145
- handleDownArrow: () => {},
146
- handleHomeKey: () => {},
147
- handleEndKey: () => {}
148
- },
149
- resetFocusedDropdownItem: () => {},
150
- focusOnToken: () => {}
151
- };
152
- },
153
- computed: {
154
- filteredDropdownItems() {
155
- return this.dropdownItems.filter(dropdownItem => this.selectedTokens.findIndex(token => token.id === dropdownItem.id) === -1);
156
- },
157
- dropdownHasNoItems() {
158
- return !this.filteredDropdownItems.length;
159
- },
160
- userDefinedTokenCanBeAdded() {
161
- return this.allowUserDefinedTokens && this.dropdownHasNoItems && this.inputText !== '';
162
- },
163
- hideDropdown() {
164
- if (this.userDefinedTokenCanBeAdded) {
165
- return false;
166
- }
167
- if (this.hideDropdownWithNoItems && this.dropdownHasNoItems) {
168
- return true;
169
- }
170
- return false;
171
- },
172
- stateClass() {
173
- if (this.state === null) {
174
- return 'gl-inset-border-1-gray-400!';
175
- }
176
- return this.state ? 'is-valid gl-inset-border-1-gray-400!' : 'is-invalid gl-inset-border-1-red-500!';
177
- },
178
- hasSelectedTokens() {
179
- return this.selectedTokens.length > 0;
180
- },
181
- showEmptyPlaceholder() {
182
- return !this.hasSelectedTokens && !this.inputFocused;
183
- },
184
- showClearAllButton() {
185
- return this.hasSelectedTokens && this.allowClearAll;
186
- }
187
- },
188
- watch: {
189
- inputText(newValue, oldValue) {
190
- if (newValue !== oldValue) {
191
- /**
192
- * Fired when user types in the token selector
193
- *
194
- * @property {string} inputText
195
- */
196
- this.$emit('text-input', newValue);
197
- this.resetFocusedDropdownItem();
198
- if (newValue !== '') {
199
- this.triggerTokenFocusNextBackspace = false;
200
- } else {
201
- this.triggerTokenFocusNextBackspace = true;
202
- }
203
-
204
- // Wait a tick so `text-input` event can be used to validate
205
- // the value and change the `allowUserDefinedTokens` and/or
206
- // `hideDropdownWithNoItems` props
207
- this.$nextTick(() => {
208
- if (this.hideDropdown) {
209
- this.closeDropdown();
210
- } else if (newValue !== '') {
211
- this.openDropdown();
212
- }
213
- });
214
- }
215
- }
216
- },
217
- methods: {
218
- handleFocus(event) {
219
- /**
220
- * Fired when the token selector is focused
221
- *
222
- * @property {FocusEvent} event
223
- */
224
- this.$emit('focus', event);
225
- this.openDropdown();
226
- this.inputFocused = true;
227
- this.focusOnToken();
228
- if (this.inputText === '') {
229
- this.triggerTokenFocusNextBackspace = true;
230
- }
231
- },
232
- handleBlur(event) {
233
- /**
234
- * Fired when the token selector is blurred
235
- *
236
- * @property {FocusEvent} event
237
- */
238
- this.$emit('blur', event);
239
- this.inputFocused = false;
240
-
241
- // `event.relatedTarget` returns `null` on Safari because buttons are not focused on click (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus)
242
- // Workaround is to:
243
- // 1. Explicitly focus the dropdown menu item button on `mousedown` event. (see './token_selector_dropdown.vue')
244
- // 2. Use `nextTick` so `blur` event is fired after the `mousedown` event
245
- this.$nextTick(() => {
246
- var _event$relatedTarget, _event$relatedTarget$;
247
- if (!((_event$relatedTarget = event.relatedTarget) !== null && _event$relatedTarget !== void 0 && (_event$relatedTarget$ = _event$relatedTarget.closest) !== null && _event$relatedTarget$ !== void 0 && _event$relatedTarget$.call(_event$relatedTarget, '.dropdown-item'))) {
248
- this.closeDropdown();
249
- }
250
- });
251
- },
252
- handleEnter() {
253
- if (this.userDefinedTokenCanBeAdded) {
254
- this.addToken();
255
- } else if (this.focusedDropdownItem && this.dropdownIsOpen) {
256
- this.addToken(this.focusedDropdownItem);
257
- }
258
- },
259
- handleEscape() {
260
- this.inputText = '';
261
- this.closeDropdown();
262
- },
263
- handleBackspace(event) {
264
- if (this.inputText !== '' || !this.selectedTokens.length) {
265
- return;
266
- }
267
-
268
- // Prevent triggering the browser back button
269
- event.preventDefault();
270
- if (this.triggerTokenFocusNextBackspace) {
271
- this.$refs.textInput.blur();
272
- this.focusOnToken(this.selectedTokens.length - 1);
273
- } else {
274
- this.triggerTokenFocusNextBackspace = true;
275
- }
276
- },
277
- handleInputClick() {
278
- // Open the dropdown if the user clicks an already focused input
279
- if (this.inputFocused && this.inputText === '' && !this.dropdownIsOpen) {
280
- this.openDropdown();
281
- }
282
- },
283
- handleContainerClick(event) {
284
- // Bail if token is clicked
285
- const {
286
- target
287
- } = event;
288
- if ((target === null || target === void 0 ? void 0 : target.closest('.gl-token')) !== null || this.inputFocused) {
289
- return;
290
- }
291
- this.focusTextInput();
292
- },
293
- addToken() {
294
- let dropdownItem = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
295
- const token = dropdownItem !== null ? dropdownItem : {
296
- id: uniqueId('user-defined-token'),
297
- name: this.inputText
298
- };
299
-
300
- /**
301
- * Fired when a token is added or removed
302
- *
303
- * @property {array} selectedTokens
304
- */
305
- this.$emit('input', [...this.selectedTokens, token]);
306
- this.inputText = '';
307
- this.closeDropdown();
308
-
309
- /**
310
- * Fired when a token is added
311
- *
312
- * @property {object} token
313
- */
314
- this.$emit('token-add', token);
315
- },
316
- removeToken(token) {
317
- /**
318
- * Fired when user types in the token selector
319
- *
320
- * @property {string} inputText
321
- */
322
- this.$emit('input', this.selectedTokens.filter(selectedToken => selectedToken.id !== token.id));
323
- /**
324
- * Fired when a token is removed
325
- *
326
- * @property {object} token
327
- */
328
- this.$emit('token-remove', token);
329
- },
330
- cancelTokenFocus() {
331
- this.focusTextInput();
332
- },
333
- closeDropdown() {
334
- this.dropdownIsOpen = false;
335
- this.resetFocusedDropdownItem();
336
- },
337
- openDropdown() {
338
- if (this.hideDropdown) {
339
- return;
340
- }
341
- this.dropdownIsOpen = true;
342
- },
343
- focusTextInput() {
344
- this.$refs.textInput.focus();
345
- },
346
- // Register methods passed as props from child components
347
- registerDropdownEventHandlers(dropdownEventHandlers) {
348
- this.dropdownEventHandlers = dropdownEventHandlers;
349
- },
350
- registerResetFocusedDropdownItem(resetFocusedDropdownItem) {
351
- this.resetFocusedDropdownItem = resetFocusedDropdownItem;
352
- },
353
- registerFocusOnToken(focusOnToken) {
354
- this.focusOnToken = focusOnToken;
355
- },
356
- clearAll() {
357
- this.$emit('input', []);
358
- this.focusTextInput();
359
- }
360
- }
361
- };
362
-
363
- /* script */
364
- const __vue_script__ = script;
365
-
366
- /* template */
367
- var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('div',{ref:"container",staticClass:"gl-token-selector gl-form-input gl-display-flex gl-align-items-center form-control form-control-plaintext gl-cursor-text! gl-py-2! gl-px-3!",class:[_vm.inputFocused ? 'gl-token-selector-focus-glow' : '', _vm.containerClass, _vm.stateClass],on:{"click":_vm.handleContainerClick}},[(_vm.showEmptyPlaceholder)?_vm._t("empty-placeholder"):_vm._e(),_vm._v(" "),_c('gl-token-container',{attrs:{"tokens":_vm.selectedTokens,"state":_vm.state,"register-focus-on-token":_vm.registerFocusOnToken,"view-only":_vm.viewOnly,"show-clear-all-button":_vm.showClearAllButton},on:{"token-remove":_vm.removeToken,"cancel-focus":_vm.cancelTokenFocus,"clear-all":_vm.clearAll},scopedSlots:_vm._u([{key:"token-content",fn:function(ref){
368
- var token = ref.token;
369
- return [_vm._t("token-content",null,{"token":token})]}},{key:"text-input",fn:function(){return [_c('input',_vm._b({ref:"textInput",staticClass:"gl-token-selector-input gl-bg-none gl-font-regular gl-font-base gl-line-height-normal gl-px-1 gl-h-auto gl-text-gray-900 gl-border-none gl-outline-none gl-flex-grow-1 gl-w-40p",attrs:{"type":"text","autocomplete":_vm.autocomplete,"aria-labelledby":_vm.ariaLabelledby,"placeholder":_vm.placeholder,"disabled":_vm.viewOnly},domProps:{"value":_vm.inputText},on:{"input":function($event){_vm.inputText = $event.target.value;},"focus":_vm.handleFocus,"blur":_vm.handleBlur,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.handleEnter.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }return _vm.handleEscape.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"delete",[8,46],$event.key,["Backspace","Delete","Del"])){ return null; }return _vm.handleBackspace.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.preventDefault();return _vm.dropdownEventHandlers.handleUpArrow.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.preventDefault();return _vm.dropdownEventHandlers.handleDownArrow.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }return _vm.dropdownEventHandlers.handleHomeKey.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }return _vm.dropdownEventHandlers.handleEndKey.apply(null, arguments)},function($event){$event.stopPropagation();return _vm.$emit('keydown', $event)}],"click":_vm.handleInputClick}},'input',_vm.textInputAttrs,false))]},proxy:true}],null,true)})],2),_vm._v(" "),_c('gl-token-selector-dropdown',{attrs:{"menu-class":_vm.menuClass,"show":_vm.dropdownIsOpen,"loading":_vm.loading,"dropdown-items":_vm.filteredDropdownItems,"selected-tokens":_vm.selectedTokens,"input-text":_vm.inputText,"allow-user-defined-tokens":_vm.allowUserDefinedTokens,"component-id":_vm.$options.componentId,"register-dropdown-event-handlers":_vm.registerDropdownEventHandlers,"register-reset-focused-dropdown-item":_vm.registerResetFocusedDropdownItem},on:{"dropdown-item-click":_vm.addToken,"show":_vm.openDropdown},scopedSlots:_vm._u([{key:"loading-content",fn:function(){return [_vm._t("loading-content")]},proxy:true},{key:"user-defined-token-content",fn:function(){return [_vm._t("user-defined-token-content",null,{"inputText":_vm.inputText})]},proxy:true},{key:"no-results-content",fn:function(){return [_vm._t("no-results-content")]},proxy:true},{key:"dropdown-item-content",fn:function(ref){
370
- var dropdownItem = ref.dropdownItem;
371
- return [_vm._t("dropdown-item-content",null,{"dropdownItem":dropdownItem})]}},{key:"dropdown-footer",fn:function(){return [_vm._t("dropdown-footer")]},proxy:true}],null,true),model:{value:(_vm.focusedDropdownItem),callback:function ($$v) {_vm.focusedDropdownItem=$$v;},expression:"focusedDropdownItem"}})],1)};
372
- var __vue_staticRenderFns__ = [];
373
-
374
- /* style */
375
- const __vue_inject_styles__ = undefined;
376
- /* scoped */
377
- const __vue_scope_id__ = undefined;
378
- /* module identifier */
379
- const __vue_module_identifier__ = undefined;
380
- /* functional template */
381
- const __vue_is_functional_template__ = false;
382
- /* style inject */
383
-
384
- /* style inject SSR */
385
-
386
- /* style inject shadow dom */
387
-
388
-
389
-
390
- const __vue_component__ = __vue_normalize__(
391
- { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
392
- __vue_inject_styles__,
393
- __vue_script__,
394
- __vue_scope_id__,
395
- __vue_is_functional_template__,
396
- __vue_module_identifier__,
397
- false,
398
- undefined,
399
- undefined,
400
- undefined
401
- );
402
-
403
- export default __vue_component__;
@@ -1,199 +0,0 @@
1
- import GlDropdownItem from '../dropdown/dropdown_item';
2
- import { tokensValidator } from './helpers';
3
- import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
4
-
5
- var script = {
6
- name: 'GlTokenSelectorDropdown',
7
- components: {
8
- GlDropdownItem
9
- },
10
- props: {
11
- show: {
12
- type: Boolean,
13
- required: true
14
- },
15
- menuClass: {
16
- type: [String, Array, Object],
17
- required: false,
18
- default: ''
19
- },
20
- loading: {
21
- type: Boolean,
22
- required: false,
23
- default: false
24
- },
25
- dropdownItems: {
26
- type: Array,
27
- // All items need to have an `id` key
28
- validator: tokensValidator,
29
- required: true
30
- },
31
- inputText: {
32
- type: String,
33
- required: true
34
- },
35
- allowUserDefinedTokens: {
36
- type: Boolean,
37
- required: true
38
- },
39
- componentId: {
40
- type: String,
41
- required: true
42
- },
43
- registerDropdownEventHandlers: {
44
- type: Function,
45
- required: true
46
- },
47
- registerResetFocusedDropdownItem: {
48
- type: Function,
49
- required: true
50
- }
51
- },
52
- data() {
53
- return {
54
- focusedDropdownItemIndex: 0
55
- };
56
- },
57
- computed: {
58
- focusedDropdownItem() {
59
- return this.dropdownItems[this.focusedDropdownItemIndex];
60
- }
61
- },
62
- watch: {
63
- focusedDropdownItem(newValue, oldValue) {
64
- if ((newValue === null || newValue === void 0 ? void 0 : newValue.id) !== (oldValue === null || oldValue === void 0 ? void 0 : oldValue.id)) {
65
- this.$emit('input', newValue);
66
- if (!newValue) {
67
- return;
68
- }
69
- const dropdownItemRef = this.getDropdownItemRef(newValue);
70
- if (dropdownItemRef !== null && dropdownItemRef !== void 0 && dropdownItemRef.$el) {
71
- dropdownItemRef.$el.scrollIntoView({
72
- block: 'nearest',
73
- inline: 'end'
74
- });
75
- }
76
- }
77
- }
78
- },
79
- created() {
80
- this.registerDropdownEventHandlers({
81
- handleUpArrow: this.handleUpArrow,
82
- handleDownArrow: this.handleDownArrow,
83
- handleHomeKey: this.handleHomeKey,
84
- handleEndKey: this.handleEndKey
85
- });
86
- this.registerResetFocusedDropdownItem(this.resetFocusedDropdownItem);
87
- this.$emit('input', this.focusedDropdownItem);
88
- },
89
- methods: {
90
- handleDropdownItemClick(dropdownItem) {
91
- this.$emit('dropdown-item-click', dropdownItem);
92
- },
93
- handleMousedown(dropdownItem) {
94
- // `event.relatedTarget` returns `null` on Safari because buttons are not focused on click (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus)
95
- // Because of this we need to manually focus on the button. We do this in `mousedown` because it is fired before the `blur` event
96
- const dropdownItemRef = dropdownItem === null ? this.$refs.userDefinedTokenDropdownItem : this.getDropdownItemRef(dropdownItem);
97
- if (dropdownItemRef !== null && dropdownItemRef !== void 0 && dropdownItemRef.$el) {
98
- dropdownItemRef.$el.querySelector('button').focus();
99
- }
100
- },
101
- handleUpArrow() {
102
- if (!this.show) {
103
- return;
104
- }
105
-
106
- // First dropdown item has been reached
107
- if (this.focusedDropdownItemIndex === 0) {
108
- return;
109
- }
110
- this.focusPrevDropdownItem();
111
- },
112
- handleDownArrow() {
113
- if (!this.show) {
114
- this.$emit('show');
115
- return;
116
- }
117
-
118
- // Last dropdown item has been reached
119
- if (this.focusedDropdownItemIndex === this.dropdownItems.length - 1) {
120
- return;
121
- }
122
- this.focusNextDropdownItem();
123
- },
124
- handleHomeKey(event) {
125
- event.preventDefault();
126
- this.focusFirstDropdownItem();
127
- },
128
- handleEndKey(event) {
129
- event.preventDefault();
130
- this.focusLastDropdownItem();
131
- },
132
- focusLastDropdownItem() {
133
- this.focusedDropdownItemIndex = this.dropdownItems.length - 1;
134
- },
135
- focusFirstDropdownItem() {
136
- this.focusedDropdownItemIndex = 0;
137
- },
138
- focusNextDropdownItem() {
139
- this.focusedDropdownItemIndex += 1;
140
- },
141
- focusPrevDropdownItem() {
142
- this.focusedDropdownItemIndex -= 1;
143
- },
144
- resetFocusedDropdownItem() {
145
- this.focusedDropdownItemIndex = 0;
146
- },
147
- dropdownItemIsFocused(dropdownItem) {
148
- if (!this.focusedDropdownItem) {
149
- return false;
150
- }
151
- return dropdownItem.id === this.focusedDropdownItem.id;
152
- },
153
- getDropdownItemRef(dropdownItem) {
154
- var _this$$refs$dropdownI;
155
- return (_this$$refs$dropdownI = this.$refs.dropdownItems) === null || _this$$refs$dropdownI === void 0 ? void 0 : _this$$refs$dropdownI.find(ref => ref.$attrs['data-dropdown-item-id'] === dropdownItem.id);
156
- },
157
- dropdownItemIdAttribute(dropdownItem) {
158
- return dropdownItem ? `${this.componentId}-dropdown-item-${dropdownItem.id}` : null;
159
- }
160
- }
161
- };
162
-
163
- /* script */
164
- const __vue_script__ = script;
165
-
166
- /* template */
167
- var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"dropdown b-dropdown gl-dropdown gl-relative",class:{ show: _vm.show }},[_c('ul',{ref:"dropdownMenu",staticClass:"dropdown-menu gl-absolute",class:[{ show: _vm.show }, _vm.menuClass],attrs:{"role":"menu","aria-activedescendant":_vm.dropdownItemIdAttribute(_vm.focusedDropdownItem)}},[(_vm.loading)?_c('gl-dropdown-item',{attrs:{"disabled":""}},[_vm._t("loading-content",function(){return [_vm._v("Searching...")]})],2):(_vm.dropdownItems.length)?_vm._l((_vm.dropdownItems),function(dropdownItem){return _c('gl-dropdown-item',{key:dropdownItem.id,ref:"dropdownItems",refInFor:true,attrs:{"id":_vm.dropdownItemIdAttribute(dropdownItem),"data-dropdown-item-id":dropdownItem.id,"active":_vm.dropdownItemIsFocused(dropdownItem),"active-class":"is-focused","tabindex":"-1"},on:{"click":function($event){return _vm.handleDropdownItemClick(dropdownItem)}}},[_c('div',{staticClass:"gl-mx-n4 gl-my-n3 gl-px-4 gl-py-3",on:{"mousedown":function($event){return _vm.handleMousedown(dropdownItem)}}},[_vm._t("dropdown-item-content",function(){return [_vm._v("\n "+_vm._s(dropdownItem.name)+"\n ")]},{"dropdownItem":dropdownItem})],2)])}):[(_vm.allowUserDefinedTokens && _vm.inputText !== '')?_c('gl-dropdown-item',{ref:"userDefinedTokenDropdownItem",attrs:{"active":"","active-class":"is-focused"},on:{"click":function($event){return _vm.handleDropdownItemClick(null)}}},[_c('div',{staticClass:"gl-mx-n4 gl-my-n3 gl-px-4 gl-py-3",on:{"mousedown":function($event){return _vm.handleMousedown(null)}}},[_vm._t("user-defined-token-content",function(){return [_vm._v("\n Add \""+_vm._s(_vm.inputText)+"\"\n ")]},{"inputText":_vm.inputText})],2)]):_c('gl-dropdown-item',{attrs:{"disabled":""}},[_vm._t("no-results-content",function(){return [_vm._v("No matches found")]})],2)],_vm._v(" "),_vm._t("dropdown-footer")],2)])};
168
- var __vue_staticRenderFns__ = [];
169
-
170
- /* style */
171
- const __vue_inject_styles__ = undefined;
172
- /* scoped */
173
- const __vue_scope_id__ = undefined;
174
- /* module identifier */
175
- const __vue_module_identifier__ = undefined;
176
- /* functional template */
177
- const __vue_is_functional_template__ = false;
178
- /* style inject */
179
-
180
- /* style inject SSR */
181
-
182
- /* style inject shadow dom */
183
-
184
-
185
-
186
- const __vue_component__ = __vue_normalize__(
187
- { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
188
- __vue_inject_styles__,
189
- __vue_script__,
190
- __vue_scope_id__,
191
- __vue_is_functional_template__,
192
- __vue_module_identifier__,
193
- false,
194
- undefined,
195
- undefined,
196
- undefined
197
- );
198
-
199
- export default __vue_component__;
@@ -1,55 +0,0 @@
1
- import { BTooltip } from 'bootstrap-vue/esm/index.js';
2
- import { tooltipDelay } from '../../../utils/constants';
3
- import tooltipMixin from '../../mixins/tooltip_mixin';
4
- import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
5
-
6
- //
7
- const tooltipRefName = 'bvTooltip';
8
- var script = {
9
- name: 'GlTooltip',
10
- tooltipDelay,
11
- components: {
12
- BTooltip
13
- },
14
- mixins: [tooltipMixin(tooltipRefName)],
15
- inheritAttrs: false,
16
- tooltipRefName
17
- };
18
-
19
- /* script */
20
- const __vue_script__ = script;
21
-
22
- /* template */
23
- var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-tooltip',_vm._g(_vm._b({ref:_vm.$options.tooltipRefName,attrs:{"delay":_vm.$options.tooltipDelay}},'b-tooltip',_vm.$attrs,false),_vm.$listeners),[_vm._t("default")],2)};
24
- var __vue_staticRenderFns__ = [];
25
-
26
- /* style */
27
- const __vue_inject_styles__ = undefined;
28
- /* scoped */
29
- const __vue_scope_id__ = undefined;
30
- /* module identifier */
31
- const __vue_module_identifier__ = undefined;
32
- /* functional template */
33
- const __vue_is_functional_template__ = false;
34
- /* style inject */
35
-
36
- /* style inject SSR */
37
-
38
- /* style inject shadow dom */
39
-
40
-
41
-
42
- const __vue_component__ = __vue_normalize__(
43
- { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
44
- __vue_inject_styles__,
45
- __vue_script__,
46
- __vue_scope_id__,
47
- __vue_is_functional_template__,
48
- __vue_module_identifier__,
49
- false,
50
- undefined,
51
- undefined,
52
- undefined
53
- );
54
-
55
- export default __vue_component__;