@gitlab/ui 72.12.0 → 72.12.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (209) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/charts.js +14 -0
  3. package/dist/components/base/accordion/accordion.js +73 -0
  4. package/dist/components/base/accordion/accordion_item.js +133 -0
  5. package/dist/components/base/alert/alert.js +222 -0
  6. package/dist/components/base/avatar/avatar.js +160 -0
  7. package/dist/components/base/avatar_labeled/avatar_labeled.js +107 -0
  8. package/dist/components/base/avatar_link/avatar_link.js +47 -0
  9. package/dist/components/base/avatars_inline/avatars_inline.js +119 -0
  10. package/dist/components/base/badge/badge.js +105 -0
  11. package/dist/components/base/banner/banner.js +139 -0
  12. package/dist/components/base/breadcrumb/breadcrumb.js +122 -0
  13. package/dist/components/base/breadcrumb/breadcrumb_item.js +73 -0
  14. package/dist/components/base/broadcast_message/broadcast_message.js +112 -0
  15. package/dist/components/base/broadcast_message/constants.js +5 -0
  16. package/dist/components/base/button/button.js +151 -0
  17. package/dist/components/base/button_group/button_group.js +47 -0
  18. package/dist/components/base/card/card.js +71 -0
  19. package/dist/components/base/carousel/carousel.js +48 -0
  20. package/dist/components/base/carousel/carousel_slide.js +47 -0
  21. package/dist/components/base/collapse/collapse.js +59 -0
  22. package/dist/components/base/datepicker/datepicker.js +386 -0
  23. package/dist/components/base/daterange_picker/daterange_picker.js +288 -0
  24. package/dist/components/base/drawer/drawer.js +127 -0
  25. package/dist/components/base/dropdown/dropdown.js +261 -0
  26. package/dist/components/base/dropdown/dropdown_divider.js +48 -0
  27. package/dist/components/base/dropdown/dropdown_form.js +48 -0
  28. package/dist/components/base/dropdown/dropdown_item.js +131 -0
  29. package/dist/components/base/dropdown/dropdown_section_header.js +48 -0
  30. package/dist/components/base/dropdown/dropdown_text.js +48 -0
  31. package/dist/components/base/filtered_search/common_story_options.js +14 -0
  32. package/dist/components/base/filtered_search/filtered_search.js +388 -0
  33. package/dist/components/base/filtered_search/filtered_search_suggestion.js +89 -0
  34. package/dist/components/base/filtered_search/filtered_search_suggestion_list.js +138 -0
  35. package/dist/components/base/filtered_search/filtered_search_term.js +203 -0
  36. package/dist/components/base/filtered_search/filtered_search_token.js +384 -0
  37. package/dist/components/base/filtered_search/filtered_search_token_segment.js +420 -0
  38. package/dist/components/base/filtered_search/filtered_search_utils.js +242 -0
  39. package/dist/components/base/form/form.js +49 -0
  40. package/dist/components/base/form/form_checkbox/form_checkbox.js +78 -0
  41. package/dist/components/base/form/form_checkbox/form_checkbox_group.js +60 -0
  42. package/dist/components/base/form/form_checkbox_tree/checkbox_tree_node.js +79 -0
  43. package/dist/components/base/form/form_checkbox_tree/form_checkbox_tree.js +138 -0
  44. package/dist/components/base/form/form_checkbox_tree/models/constants.js +12 -0
  45. package/dist/components/base/form/form_checkbox_tree/models/node.js +51 -0
  46. package/dist/components/base/form/form_checkbox_tree/models/tree.js +199 -0
  47. package/dist/components/base/form/form_combobox/constants.js +55 -0
  48. package/dist/components/base/form/form_combobox/form_combobox.js +230 -0
  49. package/dist/components/base/form/form_date/form_date.js +143 -0
  50. package/dist/components/base/form/form_fields/form_field_validator.js +93 -0
  51. package/dist/components/base/form/form_fields/form_fields.js +214 -0
  52. package/dist/components/base/form/form_fields/mappers.js +13 -0
  53. package/dist/components/base/form/form_fields/validators.js +48 -0
  54. package/dist/components/base/form/form_group/form_group.js +97 -0
  55. package/dist/components/base/form/form_input/form_input.js +121 -0
  56. package/dist/components/base/form/form_input_group/form_input_group.js +108 -0
  57. package/dist/components/base/form/form_input_group/form_input_group_mixin.js +41 -0
  58. package/dist/components/base/form/form_radio/form_radio.js +65 -0
  59. package/dist/components/base/form/form_radio_group/form_radio_group.js +78 -0
  60. package/dist/components/base/form/form_select/constants.js +12 -0
  61. package/dist/components/base/form/form_select/form_select.js +82 -0
  62. package/dist/components/base/form/form_text/form_text.js +38 -0
  63. package/dist/components/base/form/form_textarea/form_textarea.js +112 -0
  64. package/dist/components/base/form/input_group_text/input_group_text.js +48 -0
  65. package/dist/components/base/icon/icon.js +111 -0
  66. package/dist/components/base/infinite_scroll/infinite_scroll.js +197 -0
  67. package/dist/components/base/keyset_pagination/keyset_pagination.js +151 -0
  68. package/dist/components/base/label/label.js +163 -0
  69. package/dist/components/base/link/link.js +50 -0
  70. package/dist/components/base/loading_icon/loading_icon.js +111 -0
  71. package/dist/components/base/markdown/markdown.js +52 -0
  72. package/dist/components/base/modal/modal.js +204 -0
  73. package/dist/components/base/nav/nav.js +48 -0
  74. package/dist/components/base/nav/nav_item.js +48 -0
  75. package/dist/components/base/nav/nav_item_dropdown.js +62 -0
  76. package/dist/components/base/navbar/navbar.js +48 -0
  77. package/dist/components/base/new_dropdowns/base_dropdown/base_dropdown.js +453 -0
  78. package/dist/components/base/new_dropdowns/base_dropdown/constants.js +4 -0
  79. package/dist/components/base/new_dropdowns/constants.js +21 -0
  80. package/dist/components/base/new_dropdowns/disclosure/constants.js +8 -0
  81. package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown.js +370 -0
  82. package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown_group.js +110 -0
  83. package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.js +143 -0
  84. package/dist/components/base/new_dropdowns/disclosure/mock_data.js +147 -0
  85. package/dist/components/base/new_dropdowns/disclosure/utils.js +39 -0
  86. package/dist/components/base/new_dropdowns/listbox/listbox.js +767 -0
  87. package/dist/components/base/new_dropdowns/listbox/listbox_group.js +58 -0
  88. package/dist/components/base/new_dropdowns/listbox/listbox_item.js +91 -0
  89. package/dist/components/base/new_dropdowns/listbox/listbox_search_input.js +93 -0
  90. package/dist/components/base/new_dropdowns/listbox/mock_data.js +118 -0
  91. package/dist/components/base/new_dropdowns/listbox/utils.js +34 -0
  92. package/dist/components/base/paginated_list/paginated_list.js +180 -0
  93. package/dist/components/base/pagination/pagination.js +399 -0
  94. package/dist/components/base/path/data.js +34 -0
  95. package/dist/components/base/path/path.js +189 -0
  96. package/dist/components/base/popover/popover.js +110 -0
  97. package/dist/components/base/progress_bar/progress_bar.js +48 -0
  98. package/dist/components/base/search_box_by_click/search_box_by_click.js +235 -0
  99. package/dist/components/base/search_box_by_type/search_box_by_type.js +167 -0
  100. package/dist/components/base/segmented_control/segmented_control.js +109 -0
  101. package/dist/components/base/skeleton_loader/skeleton_loader.js +224 -0
  102. package/dist/components/base/sorting/sorting.js +171 -0
  103. package/dist/components/base/sorting/sorting_item.js +109 -0
  104. package/dist/components/base/table/constants.js +5 -0
  105. package/dist/components/base/table/table.js +89 -0
  106. package/dist/components/base/table_lite/table_lite.js +72 -0
  107. package/dist/components/base/tabs/constants.js +3 -0
  108. package/dist/components/base/tabs/tab/tab.js +83 -0
  109. package/dist/components/base/tabs/tabs/scrollable_tabs.js +143 -0
  110. package/dist/components/base/tabs/tabs/tabs.js +224 -0
  111. package/dist/components/base/toast/toast.js +82 -0
  112. package/dist/components/base/toggle/toggle.js +180 -0
  113. package/dist/components/base/token/token.js +85 -0
  114. package/dist/components/base/token_selector/helpers.js +5 -0
  115. package/dist/components/base/token_selector/token_container.js +165 -0
  116. package/dist/components/base/token_selector/token_selector.js +403 -0
  117. package/dist/components/base/token_selector/token_selector_dropdown.js +199 -0
  118. package/dist/components/base/tooltip/tooltip.js +55 -0
  119. package/dist/components/charts/area/area.js +311 -0
  120. package/dist/components/charts/bar/bar.js +253 -0
  121. package/dist/components/charts/chart/chart.js +215 -0
  122. package/dist/components/charts/column/column.js +226 -0
  123. package/dist/components/charts/discrete_scatter/discrete_scatter.js +203 -0
  124. package/dist/components/charts/gauge/gauge.js +208 -0
  125. package/dist/components/charts/heatmap/heatmap.js +295 -0
  126. package/dist/components/charts/heatmap/index.js +2 -0
  127. package/dist/components/charts/legend/legend.js +228 -0
  128. package/dist/components/charts/line/line.js +308 -0
  129. package/dist/components/charts/series_label/series_label.js +100 -0
  130. package/dist/components/charts/single_stat/single_stat.js +152 -0
  131. package/dist/components/charts/sparkline/sparkline.js +261 -0
  132. package/dist/components/charts/stacked_column/stacked_column.js +335 -0
  133. package/dist/components/charts/tooltip/tooltip.js +251 -0
  134. package/dist/components/experimental/duo/chat/components/duo_chat_conversation/duo_chat_conversation.js +83 -0
  135. package/dist/components/experimental/duo/chat/components/duo_chat_loader/duo_chat_loader.js +100 -0
  136. package/dist/components/experimental/duo/chat/components/duo_chat_message/copy_code_element.js +35 -0
  137. package/dist/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.js +115 -0
  138. package/dist/components/experimental/duo/chat/components/duo_chat_message_sources/duo_chat_message_sources.js +104 -0
  139. package/dist/components/experimental/duo/chat/components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.js +64 -0
  140. package/dist/components/experimental/duo/chat/constants.js +23 -0
  141. package/dist/components/experimental/duo/chat/duo_chat.js +359 -0
  142. package/dist/components/experimental/duo/chat/mock_data.js +83 -0
  143. package/dist/components/experimental/duo/user_feedback/user_feedback.js +94 -0
  144. package/dist/components/experimental/duo/user_feedback/user_feedback_modal.js +124 -0
  145. package/dist/components/experimental/experiment_badge/constants.js +4 -0
  146. package/dist/components/experimental/experiment_badge/experiment_badge.js +107 -0
  147. package/dist/components/mixins/button_mixin.js +11 -0
  148. package/dist/components/mixins/safe_link_mixin.js +30 -0
  149. package/dist/components/mixins/tooltip_mixin.js +21 -0
  150. package/dist/components/regions/dashboard_skeleton/dashboard_skeleton.js +53 -0
  151. package/dist/components/regions/empty_state/empty_state.js +154 -0
  152. package/dist/components/shared_components/charts/tooltip_default_format.js +53 -0
  153. package/dist/components/shared_components/clear_icon_button/clear_icon_button.js +64 -0
  154. package/dist/components/shared_components/close_button/close_button.js +54 -0
  155. package/dist/components/utilities/animated_number/animated_number.js +131 -0
  156. package/dist/components/utilities/friendly_wrap/friendly_wrap.js +75 -0
  157. package/dist/components/utilities/intersection_observer/intersection_observer.js +88 -0
  158. package/dist/components/utilities/intersperse/intersperse.js +86 -0
  159. package/dist/components/utilities/sprintf/sprintf.js +172 -0
  160. package/dist/components/utilities/truncate/constants.js +7 -0
  161. package/dist/components/utilities/truncate/truncate.js +111 -0
  162. package/dist/components/utilities/truncate_text/constants.js +7 -0
  163. package/dist/components/utilities/truncate_text/truncate_text.js +146 -0
  164. package/dist/config.js +86 -0
  165. package/dist/directives/collapse_toggle.js +1 -0
  166. package/dist/directives/hover_load/hover_load.js +45 -0
  167. package/dist/directives/modal.js +1 -0
  168. package/dist/directives/outside/get_event_like_time_stamp.js +33 -0
  169. package/dist/directives/outside/outside.js +106 -0
  170. package/dist/directives/resize_observer/resize_observer.js +51 -0
  171. package/dist/directives/safe_html/constants.js +6 -0
  172. package/dist/directives/safe_html/safe_html.js +39 -0
  173. package/dist/directives/safe_link/mock_data.js +10 -0
  174. package/dist/directives/safe_link/safe_link.js +65 -0
  175. package/dist/directives/tooltip.js +1 -0
  176. package/dist/index.css +7 -0
  177. package/dist/index.css.map +1 -0
  178. package/dist/index.js +105 -0
  179. package/dist/tokens/common_story_options.js +54 -0
  180. package/dist/tokens/css/tokens.css +1 -1
  181. package/dist/tokens/css/tokens.dark.css +1 -1
  182. package/dist/tokens/js/tokens.dark.js +1 -1
  183. package/dist/tokens/js/tokens.js +1 -1
  184. package/dist/tokens/scss/_tokens.dark.scss +1 -1
  185. package/dist/tokens/scss/_tokens.scss +1 -1
  186. package/dist/utils/breakpoints.js +20 -0
  187. package/dist/utils/charts/config.js +556 -0
  188. package/dist/utils/charts/constants.js +63 -0
  189. package/dist/utils/charts/mock_data.js +211 -0
  190. package/dist/utils/charts/story_config.js +42 -0
  191. package/dist/utils/charts/theme.js +192 -0
  192. package/dist/utils/charts/utils.js +54 -0
  193. package/dist/utils/constants.js +288 -0
  194. package/dist/utils/data_utils.js +21 -0
  195. package/dist/utils/datetime_utility.js +61 -0
  196. package/dist/utils/i18n.js +15 -0
  197. package/dist/utils/is_slot_empty.js +38 -0
  198. package/dist/utils/number_utils.js +124 -0
  199. package/dist/utils/stories_constants.js +29 -0
  200. package/dist/utils/stories_utils.js +13 -0
  201. package/dist/utils/story_decorators/container.js +16 -0
  202. package/dist/utils/string_utils.js +69 -0
  203. package/dist/utils/svgs/svg_paths.js +7 -0
  204. package/dist/utils/test_utils.js +33 -0
  205. package/dist/utils/use_fake_date.js +29 -0
  206. package/dist/utils/use_mock_intersection_observer.js +108 -0
  207. package/dist/utils/utils.js +197 -0
  208. package/dist/utils.js +5 -0
  209. package/package.json +1 -1
@@ -0,0 +1,420 @@
1
+ import last from 'lodash/last';
2
+ import { Portal } from 'portal-vue';
3
+ import { LEFT_MOUSE_BUTTON } from '../../../utils/constants';
4
+ import GlFilteredSearchSuggestion from './filtered_search_suggestion';
5
+ import GlFilteredSearchSuggestionList from './filtered_search_suggestion_list';
6
+ import { TERM_TOKEN_TYPE, splitOnQuotes, match, wrapTokenInQuotes } from './filtered_search_utils';
7
+ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
8
+
9
+ // We need some helpers to ensure @vue/compat compatibility
10
+ // @vue/compat will render comment nodes for v-if and comments in HTML
11
+ // Also it makes use of fragments - both comments and nodes are Symbols.
12
+ // In Vue3 all of them (Comment, Fragment) are exposed as named exports on vue module
13
+ // However we want to maintain compatibility with Vue2, so taking this hacky approach
14
+ // relying on Symbol.toString()
15
+
16
+ // I'm keeping this directly here instead of helper to increase probability of
17
+ // fixing ASAP and because I don't want this helper to be reused
18
+ // FIXME: replace with Symbols when we will switch to Vue3
19
+
20
+ const isVue3Comment = vnode => {
21
+ var _vnode$type, _vnode$type$toString;
22
+ return (vnode === null || vnode === void 0 ? void 0 : (_vnode$type = vnode.type) === null || _vnode$type === void 0 ? void 0 : (_vnode$type$toString = _vnode$type.toString) === null || _vnode$type$toString === void 0 ? void 0 : _vnode$type$toString.call(_vnode$type)) === 'Symbol(Comment)';
23
+ };
24
+ const isVue3Fragment = vnode => {
25
+ var _vnode$type2, _vnode$type2$toString;
26
+ return (vnode === null || vnode === void 0 ? void 0 : (_vnode$type2 = vnode.type) === null || _vnode$type2 === void 0 ? void 0 : (_vnode$type2$toString = _vnode$type2.toString) === null || _vnode$type2$toString === void 0 ? void 0 : _vnode$type2$toString.call(_vnode$type2)) === 'Symbol(Fragment)';
27
+ };
28
+ const isVNodeEmpty = vnode => {
29
+ if (isVue3Fragment(vnode)) {
30
+ // vnode.children might be an array or single node in edge cases
31
+ return Array.isArray(vnode.children) ?
32
+ // eslint-disable-next-line unicorn/no-array-callback-reference
33
+ vnode.children.every(isVNodeEmpty) : isVNodeEmpty(vnode.children);
34
+ }
35
+ if (isVue3Comment(vnode)) {
36
+ return true;
37
+ }
38
+ return false;
39
+ };
40
+ const isSlotNotEmpty = slot => {
41
+ if (!slot) {
42
+ return false;
43
+ }
44
+ const vnodes = typeof slot === 'function' ? slot() : slot;
45
+ // eslint-disable-next-line unicorn/no-array-callback-reference
46
+ return !(Array.isArray(vnodes) ? vnodes.every(isVNodeEmpty) : isVNodeEmpty(vnodes));
47
+ };
48
+ var script = {
49
+ name: 'GlFilteredSearchTokenSegment',
50
+ components: {
51
+ Portal,
52
+ GlFilteredSearchSuggestionList,
53
+ GlFilteredSearchSuggestion
54
+ },
55
+ inject: ['portalName', 'alignSuggestions', 'termsAsTokens'],
56
+ inheritAttrs: false,
57
+ props: {
58
+ /**
59
+ * If this token segment is currently being edited.
60
+ */
61
+ active: {
62
+ type: Boolean,
63
+ required: false,
64
+ default: false
65
+ },
66
+ isTerm: {
67
+ type: Boolean,
68
+ required: false,
69
+ default: false
70
+ },
71
+ label: {
72
+ type: String,
73
+ required: false,
74
+ default: 'Search'
75
+ },
76
+ multiSelect: {
77
+ type: Boolean,
78
+ required: false,
79
+ default: false
80
+ },
81
+ options: {
82
+ type: Array,
83
+ required: false,
84
+ default: () => null
85
+ },
86
+ optionTextField: {
87
+ type: String,
88
+ required: false,
89
+ default: 'title'
90
+ },
91
+ customInputKeydownHandler: {
92
+ type: Function,
93
+ required: false,
94
+ default: () => () => false
95
+ },
96
+ /**
97
+ * Current term value
98
+ */
99
+ value: {
100
+ required: true,
101
+ validator: () => true
102
+ },
103
+ /**
104
+ * HTML attributes to add to the search input
105
+ */
106
+ searchInputAttributes: {
107
+ type: Object,
108
+ required: false,
109
+ default: () => ({})
110
+ },
111
+ /**
112
+ * If this is the last token
113
+ */
114
+ isLastToken: {
115
+ type: Boolean,
116
+ required: false,
117
+ default: false
118
+ },
119
+ currentValue: {
120
+ type: Array,
121
+ required: false,
122
+ default: () => []
123
+ },
124
+ cursorPosition: {
125
+ type: String,
126
+ required: false,
127
+ default: 'end',
128
+ validator: value => ['start', 'end'].includes(value)
129
+ },
130
+ viewOnly: {
131
+ type: Boolean,
132
+ required: false,
133
+ default: false
134
+ }
135
+ },
136
+ data() {
137
+ return {
138
+ fallbackValue: this.value
139
+ };
140
+ },
141
+ computed: {
142
+ hasTermSuggestion() {
143
+ if (!this.termsAsTokens()) return false;
144
+ if (!this.options) return false;
145
+ return this.options.some(_ref => {
146
+ let {
147
+ value
148
+ } = _ref;
149
+ return value === TERM_TOKEN_TYPE;
150
+ });
151
+ },
152
+ matchingOption() {
153
+ var _this$options;
154
+ return (_this$options = this.options) === null || _this$options === void 0 ? void 0 : _this$options.find(o => o.value === this.value);
155
+ },
156
+ nonMultipleValue() {
157
+ return Array.isArray(this.value) ? last(this.value) : this.value;
158
+ },
159
+ inputValue: {
160
+ get() {
161
+ if (this.isTerm) {
162
+ return this.nonMultipleValue;
163
+ }
164
+ return this.matchingOption ? this.matchingOption[this.optionTextField] : this.nonMultipleValue;
165
+ },
166
+ set(inputValue) {
167
+ /**
168
+ * Emitted when this token segment's value changes.
169
+ *
170
+ * @type {object} option The current option.
171
+ */
172
+ this.$emit('input', inputValue);
173
+ }
174
+ },
175
+ hasOptionsOrSuggestions() {
176
+ var _this$options2;
177
+ // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
178
+ return ((_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : _this$options2.length) || isSlotNotEmpty(this.$slots.suggestions);
179
+ },
180
+ defaultSuggestedValue() {
181
+ var _this$options$;
182
+ if (!this.options) {
183
+ return this.nonMultipleValue;
184
+ }
185
+ if (this.value) {
186
+ const option = this.getMatchingOptionForInputValue(this.inputValue) || this.getMatchingOptionForInputValue(this.inputValue, {
187
+ loose: true
188
+ });
189
+ if (option) return option.value;
190
+ if (this.hasTermSuggestion) return TERM_TOKEN_TYPE;
191
+ return null;
192
+ }
193
+ const defaultOption = this.options.find(op => op.default);
194
+ if (defaultOption) {
195
+ return defaultOption.value;
196
+ }
197
+ return this.isTerm ? undefined : (_this$options$ = this.options[0]) === null || _this$options$ === void 0 ? void 0 : _this$options$.value;
198
+ },
199
+ containerAttributes() {
200
+ return this.isLastToken && !this.active && this.currentValue.length > 1 && this.searchInputAttributes;
201
+ }
202
+ },
203
+ watch: {
204
+ active: {
205
+ immediate: true,
206
+ handler(newValue) {
207
+ if (newValue) {
208
+ this.activate();
209
+ } else {
210
+ this.deactivate();
211
+ }
212
+ }
213
+ },
214
+ inputValue(newValue) {
215
+ if (this.termsAsTokens()) return;
216
+ if (this.multiSelect) return;
217
+ const hasUnclosedQuote = newValue.split('"').length % 2 === 0;
218
+ if (newValue.indexOf(' ') === -1 || hasUnclosedQuote) {
219
+ return;
220
+ }
221
+ const [firstWord, ...otherWords] = splitOnQuotes(newValue).filter((w, idx, arr) => Boolean(w) || idx === arr.length - 1);
222
+ this.$emit('input', firstWord);
223
+ if (otherWords.length) {
224
+ /**
225
+ * Emitted when Space appears in token segment value
226
+ * @property {array|string} newStrings New strings to be converted into term tokens
227
+ */
228
+ this.$emit('split', otherWords);
229
+ }
230
+ }
231
+ },
232
+ methods: {
233
+ emitIfInactive(e) {
234
+ if (e.button === LEFT_MOUSE_BUTTON && !this.active) {
235
+ /**
236
+ * Emitted on mousedown event on the main component.
237
+ */
238
+ this.$emit('activate');
239
+ e.preventDefault();
240
+ }
241
+ },
242
+ getMatchingOptionForInputValue(inputValue) {
243
+ var _this$options3;
244
+ let {
245
+ loose
246
+ } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
247
+ loose: false
248
+ };
249
+ return (_this$options3 = this.options) === null || _this$options3 === void 0 ? void 0 : _this$options3.find(option => loose ? match(option[this.optionTextField], inputValue) : option[this.optionTextField] === inputValue);
250
+ },
251
+ activate() {
252
+ this.fallbackValue = this.value;
253
+ this.$nextTick(() => {
254
+ const {
255
+ input
256
+ } = this.$refs;
257
+ if (input) {
258
+ input.focus();
259
+ input.scrollIntoView({
260
+ block: 'nearest',
261
+ inline: 'end'
262
+ });
263
+ this.alignSuggestions(input);
264
+ if (this.cursorPosition === 'start') {
265
+ input === null || input === void 0 ? void 0 : input.setSelectionRange(0, 0);
266
+ }
267
+ }
268
+ });
269
+ },
270
+ deactivate() {
271
+ var _this$matchingOption;
272
+ if (!this.options || this.isTerm) {
273
+ return;
274
+ }
275
+ if (((_this$matchingOption = this.matchingOption) === null || _this$matchingOption === void 0 ? void 0 : _this$matchingOption.value) !== this.value) {
276
+ this.$emit('input', this.fallbackValue);
277
+ }
278
+ },
279
+ applySuggestion(suggestedValue) {
280
+ const formattedSuggestedValue = this.termsAsTokens() ? suggestedValue : wrapTokenInQuotes(suggestedValue);
281
+
282
+ /**
283
+ * Emitted when autocomplete entry is selected.
284
+ *
285
+ * @type {string} value The selected value.
286
+ */
287
+ this.$emit('select', formattedSuggestedValue);
288
+ if (!this.multiSelect) {
289
+ this.$emit('input', formattedSuggestedValue === TERM_TOKEN_TYPE ? this.inputValue : formattedSuggestedValue);
290
+ this.$emit('complete', formattedSuggestedValue);
291
+ }
292
+ },
293
+ handleInputKeydown(e) {
294
+ const {
295
+ key
296
+ } = e;
297
+ const {
298
+ suggestions,
299
+ input
300
+ } = this.$refs;
301
+ const suggestedValue = suggestions === null || suggestions === void 0 ? void 0 : suggestions.getValue();
302
+ const handlers = {
303
+ ArrowLeft: () => {
304
+ if (input.selectionStart === 0) {
305
+ e.preventDefault();
306
+ this.$emit('previous');
307
+ }
308
+ },
309
+ ArrowRight: () => {
310
+ if (input.selectionEnd === this.inputValue.length) {
311
+ e.preventDefault();
312
+ this.$emit('next');
313
+ }
314
+ },
315
+ Backspace: () => {
316
+ if (this.inputValue === '') {
317
+ e.preventDefault();
318
+ /**
319
+ * Emitted when Backspace is pressed and the value is empty
320
+ */
321
+ this.$emit('backspace');
322
+ }
323
+ },
324
+ Enter: () => {
325
+ e.preventDefault();
326
+ if (suggestedValue != null) {
327
+ this.applySuggestion(suggestedValue);
328
+ } else {
329
+ /**
330
+ * Emitted when Enter is pressed and no suggestion is selected
331
+ */
332
+ this.$emit('submit');
333
+ }
334
+ },
335
+ ':': () => {
336
+ if (suggestedValue != null) {
337
+ e.preventDefault();
338
+ this.applySuggestion(suggestedValue);
339
+ }
340
+ },
341
+ Escape: () => {
342
+ e.preventDefault();
343
+ /**
344
+ * Emitted when suggestion is selected from the suggestion list
345
+ */
346
+ this.$emit('complete');
347
+ }
348
+ };
349
+ const suggestionsHandlers = {
350
+ ArrowDown: () => suggestions.nextItem(),
351
+ Down: () => suggestions.nextItem(),
352
+ ArrowUp: () => suggestions.prevItem(),
353
+ Up: () => suggestions.prevItem()
354
+ };
355
+ if (this.hasOptionsOrSuggestions) {
356
+ Object.assign(handlers, suggestionsHandlers);
357
+ }
358
+ if (Object.keys(handlers).includes(key)) {
359
+ handlers[key]();
360
+ return;
361
+ }
362
+ this.customInputKeydownHandler(e, {
363
+ suggestedValue,
364
+ inputValue: this.inputValue,
365
+ applySuggestion: v => this.applySuggestion(v)
366
+ });
367
+ },
368
+ handleBlur() {
369
+ if (this.multiSelect) {
370
+ this.$emit('complete');
371
+ } else if (this.active) {
372
+ /**
373
+ * Emitted when this term token will lose its focus.
374
+ */
375
+ this.$emit('deactivate');
376
+ }
377
+ }
378
+ }
379
+ };
380
+
381
+ /* script */
382
+ const __vue_script__ = script;
383
+
384
+ /* template */
385
+ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._g(_vm._b({staticClass:"gl-filtered-search-token-segment",class:{
386
+ 'gl-filtered-search-token-segment-active': _vm.active,
387
+ 'gl-cursor-text!': _vm.viewOnly,
388
+ },attrs:{"data-testid":"filtered-search-token-segment"}},'div',_vm.containerAttributes,false),_vm.viewOnly ? {} : { mousedown: _vm.emitIfInactive }),[(_vm.active)?[_vm._t("before-input",null,null,{ submitValue: _vm.applySuggestion }),_vm._v(" "),(((_vm.searchInputAttributes).type)==='checkbox')?_c('input',_vm._b({directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],ref:"input",staticClass:"gl-filtered-search-token-segment-input",attrs:{"data-testid":"filtered-search-token-segment-input","aria-label":_vm.label,"readonly":_vm.viewOnly,"type":"checkbox"},domProps:{"checked":Array.isArray(_vm.inputValue)?_vm._i(_vm.inputValue,null)>-1:(_vm.inputValue)},on:{"keydown":_vm.handleInputKeydown,"blur":_vm.handleBlur,"change":function($event){var $$a=_vm.inputValue,$$el=$event.target,$$c=$$el.checked?(true):(false);if(Array.isArray($$a)){var $$v=null,$$i=_vm._i($$a,$$v);if($$el.checked){$$i<0&&(_vm.inputValue=$$a.concat([$$v]));}else {$$i>-1&&(_vm.inputValue=$$a.slice(0,$$i).concat($$a.slice($$i+1)));}}else {_vm.inputValue=$$c;}}}},'input',_vm.searchInputAttributes,false)):(((_vm.searchInputAttributes).type)==='radio')?_c('input',_vm._b({directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],ref:"input",staticClass:"gl-filtered-search-token-segment-input",attrs:{"data-testid":"filtered-search-token-segment-input","aria-label":_vm.label,"readonly":_vm.viewOnly,"type":"radio"},domProps:{"checked":_vm._q(_vm.inputValue,null)},on:{"keydown":_vm.handleInputKeydown,"blur":_vm.handleBlur,"change":function($event){_vm.inputValue=null;}}},'input',_vm.searchInputAttributes,false)):_c('input',_vm._b({directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],ref:"input",staticClass:"gl-filtered-search-token-segment-input",attrs:{"data-testid":"filtered-search-token-segment-input","aria-label":_vm.label,"readonly":_vm.viewOnly,"type":(_vm.searchInputAttributes).type},domProps:{"value":(_vm.inputValue)},on:{"keydown":_vm.handleInputKeydown,"blur":_vm.handleBlur,"input":function($event){if($event.target.composing){ return; }_vm.inputValue=$event.target.value;}}},'input',_vm.searchInputAttributes,false)),_vm._v(" "),_c('portal',{key:("operator-" + _vm._uid),attrs:{"to":_vm.portalName}},[(_vm.hasOptionsOrSuggestions)?_c('gl-filtered-search-suggestion-list',{key:("operator-" + _vm._uid),ref:"suggestions",attrs:{"initial-value":_vm.defaultSuggestedValue},on:{"suggestion":_vm.applySuggestion}},[(_vm.options)?_vm._l((_vm.options),function(option,idx){return _c('gl-filtered-search-suggestion',{key:((option.value) + "-" + idx),attrs:{"value":option.value,"icon-name":option.icon}},[_vm._t("option",function(){return [(option.component)?[_c(option.component,{tag:"component",attrs:{"option":option}})]:[_vm._v("\n "+_vm._s(option[_vm.optionTextField])+"\n ")]]},null,{ option: option })],2)}):_vm._t("suggestions")],2):_vm._e()],1)]:_vm._t("view",function(){return [_vm._v(_vm._s(_vm.inputValue))]},null,{ inputValue: _vm.inputValue })],2)};
389
+ var __vue_staticRenderFns__ = [];
390
+
391
+ /* style */
392
+ const __vue_inject_styles__ = undefined;
393
+ /* scoped */
394
+ const __vue_scope_id__ = undefined;
395
+ /* module identifier */
396
+ const __vue_module_identifier__ = undefined;
397
+ /* functional template */
398
+ const __vue_is_functional_template__ = false;
399
+ /* style inject */
400
+
401
+ /* style inject SSR */
402
+
403
+ /* style inject shadow dom */
404
+
405
+
406
+
407
+ const __vue_component__ = __vue_normalize__(
408
+ { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
409
+ __vue_inject_styles__,
410
+ __vue_script__,
411
+ __vue_scope_id__,
412
+ __vue_is_functional_template__,
413
+ __vue_module_identifier__,
414
+ false,
415
+ undefined,
416
+ undefined,
417
+ undefined
418
+ );
419
+
420
+ export default __vue_component__;
@@ -0,0 +1,242 @@
1
+ import first from 'lodash/first';
2
+ import last from 'lodash/last';
3
+ import isString from 'lodash/isString';
4
+ import { modulo } from '../../../utils/number_utils';
5
+
6
+ const TERM_TOKEN_TYPE = 'filtered-search-term';
7
+ const INTENT_ACTIVATE_PREVIOUS = 'intent-activate-previous';
8
+ const TOKEN_CLOSE_SELECTOR = '.gl-token-close';
9
+ function isEmptyTerm(token) {
10
+ return token.type === TERM_TOKEN_TYPE && token.value.data.trim() === '';
11
+ }
12
+ function normalizeTokens(tokens) {
13
+ const result = [];
14
+ tokens.forEach(token => {
15
+ if (isEmptyTerm(token)) {
16
+ return;
17
+ }
18
+ if (token.type !== TERM_TOKEN_TYPE) {
19
+ result.push({
20
+ ...token
21
+ });
22
+ } else if (result.length > 0 && typeof result[result.length - 1] === 'string') {
23
+ result[result.length - 1] += ` ${token.value.data}`;
24
+ } else {
25
+ result.push(token.value.data);
26
+ }
27
+ });
28
+ return result;
29
+ }
30
+ function assertValidTokens(tokens) {
31
+ if (!Array.isArray(tokens) && !typeof tokens === 'string') {
32
+ throw new TypeError('Either string or array of tokens is expected');
33
+ }
34
+ }
35
+ function needDenormalization(tokens) {
36
+ if (typeof tokens === 'string') {
37
+ return true;
38
+ }
39
+ assertValidTokens(tokens);
40
+ return tokens.some(t => typeof t === 'string' || !t.id);
41
+ }
42
+
43
+ /**
44
+ * Given an initial index, step size and array length, returns an index that is
45
+ * within the array bounds (unless step is 0; see † below).
46
+ *
47
+ * The step can be any positive or negative integer, including zero.
48
+ *
49
+ * An out-of-bounds index is considered 'uninitialised', and is handled
50
+ * specially. For instance, the 'next' index of 'uninitialised' is the first
51
+ * index:
52
+ *
53
+ * stepIndexAndWrap(-1, 1, 5) === 0
54
+ *
55
+ * The 'previous' index of 'uninitialised' is the last index:
56
+ *
57
+ * stepIndexAndWrap(-1, -1, 5) === 4
58
+ *
59
+ * †: If step is 0, the index is returned as-is, which may be out-of-bounds.
60
+ *
61
+ * @param {number} index The initial index.
62
+ * @param {number} step The amount to step by (positive or negative).
63
+ * @param {number} length The length of the array.
64
+ * @returns {number}
65
+ */
66
+ function stepIndexAndWrap(index, step, length) {
67
+ if (step === 0) return index;
68
+ let start;
69
+ const indexInRange = index >= 0 && index < length;
70
+ if (indexInRange) {
71
+ // Step from the valid index.
72
+ start = index;
73
+ } else if (step > 0) {
74
+ // Step forwards from the beginning of the array.
75
+ start = -1;
76
+ } else {
77
+ // Step backwards from the end of the array.
78
+ start = length;
79
+ }
80
+ return modulo(start + step, length);
81
+ }
82
+
83
+ /**
84
+ * Transforms a given token definition to an option definition.
85
+ *
86
+ * @param {Object} token A token definition (see GlFilteredSearch's
87
+ * availableTokens prop).
88
+ * @returns {Object} A option definition (see GlFilteredSearchTokenSegment's
89
+ * options prop).
90
+ */
91
+ function tokenToOption(_ref) {
92
+ let {
93
+ icon,
94
+ title,
95
+ type,
96
+ optionComponent
97
+ } = _ref;
98
+ return {
99
+ icon,
100
+ title,
101
+ value: type,
102
+ component: optionComponent
103
+ };
104
+ }
105
+ let tokenIdCounter = 0;
106
+ const getTokenId = () => {
107
+ const tokenId = `token-${tokenIdCounter}`;
108
+ tokenIdCounter += 1;
109
+ return tokenId;
110
+ };
111
+ /**
112
+ * Ensure the given token has an `id` property, which `GlFilteredSearch` relies
113
+ * on as a unique key for the token.
114
+ *
115
+ * If the given token does not have an `id`, it returns a shallow copy of the
116
+ * token with an `id`. Otherwise, it returns the given token.
117
+ *
118
+ * @param {object} token The token to check.
119
+ * @returns {object} A token with an `id`.
120
+ */
121
+ function ensureTokenId(token) {
122
+ if (!token.id) {
123
+ return {
124
+ ...token,
125
+ id: getTokenId()
126
+ };
127
+ }
128
+ return token;
129
+ }
130
+ function createTerm() {
131
+ let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
132
+ return {
133
+ id: getTokenId(),
134
+ type: TERM_TOKEN_TYPE,
135
+ value: {
136
+ data
137
+ }
138
+ };
139
+ }
140
+ function denormalizeTokens(inputTokens) {
141
+ let termsAsTokens = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
142
+ assertValidTokens(inputTokens);
143
+ const tokens = Array.isArray(inputTokens) ? inputTokens : [inputTokens];
144
+ return tokens.reduce((result, t) => {
145
+ if (typeof t === 'string') {
146
+ if (termsAsTokens) {
147
+ const trimmedText = t.trim();
148
+ if (trimmedText) result.push(createTerm(trimmedText));
149
+ } else {
150
+ const stringTokens = t.split(' ').filter(Boolean);
151
+ stringTokens.forEach(strToken => result.push(createTerm(strToken)));
152
+ }
153
+ } else {
154
+ result.push(ensureTokenId(t));
155
+ }
156
+ return result;
157
+ }, []);
158
+ }
159
+
160
+ /**
161
+ * Returns `true` if `text` contains `query` (case insensitive).
162
+ *
163
+ * This is used in `filter` and `find` array methods for token segment options.
164
+ *
165
+ * @param {string} text The string to look within.
166
+ * @param {string} query The string to find inside the text.
167
+ * @returns {boolean}
168
+ */
169
+ function match(text, query) {
170
+ return text.toLowerCase().includes(query.toLowerCase());
171
+ }
172
+ const termTokenDefinition = {
173
+ type: TERM_TOKEN_TYPE,
174
+ icon: 'title',
175
+ title: 'Search for this text'
176
+ };
177
+ function splitOnQuotes(str) {
178
+ if (first(str) === "'" && last(str) === "'") {
179
+ return [str];
180
+ }
181
+ if (first(str) === '"' && last(str) === '"') {
182
+ return [str];
183
+ }
184
+ const queue = str.split(' ');
185
+ const result = [];
186
+ let waitingForMatchingQuote = false;
187
+ let quoteContent = '';
188
+ while (queue.length) {
189
+ const part = queue.shift();
190
+ const quoteIndex = part.indexOf('"');
191
+ if (quoteIndex === -1) {
192
+ if (waitingForMatchingQuote) {
193
+ quoteContent += ` ${part}`;
194
+ } else {
195
+ result.push(part);
196
+ }
197
+ } else {
198
+ const [firstPart, secondPart] = part.split('"', 2);
199
+ if (waitingForMatchingQuote) {
200
+ waitingForMatchingQuote = false;
201
+ quoteContent += ` ${firstPart}"`;
202
+ result.push(quoteContent);
203
+ quoteContent = '';
204
+ if (secondPart.length) {
205
+ queue.unshift(secondPart);
206
+ }
207
+ } else {
208
+ waitingForMatchingQuote = true;
209
+ if (firstPart.length) {
210
+ result.push(firstPart);
211
+ }
212
+ quoteContent = `"${secondPart}`;
213
+ }
214
+ }
215
+ }
216
+ return result;
217
+ }
218
+
219
+ /**
220
+ * wraps the incoming token in double quotes.
221
+ * Eg. Foo Bar becomes "Foo Bar"
222
+ *
223
+ * 1. token must have space.
224
+ * 2. token should not already have a quote around it.
225
+ */
226
+ function wrapTokenInQuotes(token) {
227
+ if (!isString(token)) {
228
+ return token;
229
+ }
230
+ if (!token.includes(' ')) {
231
+ return token;
232
+ }
233
+ const quotes = ["'", '"'];
234
+
235
+ // If the token starts and ends with a quote, eg. "Foo Bar", then return the original token.
236
+ if (quotes.some(quote => first(token) === quote && last(token) === quote)) {
237
+ return token;
238
+ }
239
+ return `"${token}"`;
240
+ }
241
+
242
+ export { INTENT_ACTIVATE_PREVIOUS, TERM_TOKEN_TYPE, TOKEN_CLOSE_SELECTOR, createTerm, denormalizeTokens, ensureTokenId, isEmptyTerm, match, needDenormalization, normalizeTokens, splitOnQuotes, stepIndexAndWrap, termTokenDefinition, tokenToOption, wrapTokenInQuotes };