@gitlab/ui 72.11.0 → 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 (225) hide show
  1. package/CHANGELOG.md +14 -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/directives/safe_html/safe_html.js +5 -0
  10. package/src/directives/safe_html/safe_html.spec.js +17 -0
  11. package/src/internal/color_contrast/color_contrast.md +8 -0
  12. package/src/internal/color_contrast/color_contrast.spec.js +34 -0
  13. package/src/internal/color_contrast/color_contrast.stories.js +41 -0
  14. package/src/internal/color_contrast/color_contrast.vue +52 -0
  15. package/src/tokens/color.dark.tokens.stories.js +36 -22
  16. package/src/tokens/color.data_viz.dark.tokens.stories.js +13 -30
  17. package/src/tokens/color.data_viz.tokens.stories.js +13 -30
  18. package/src/tokens/color.theme.dark.tokens.stories.js +15 -30
  19. package/src/tokens/color.theme.tokens.stories.js +15 -30
  20. package/src/tokens/color.tokens.stories.js +36 -22
  21. package/src/tokens/color.transparency.tokens.stories.js +9 -12
  22. package/src/tokens/common_story_options.js +22 -80
  23. package/src/utils/constants.js +25 -0
  24. package/src/utils/utils.js +21 -1
  25. package/dist/charts.js +0 -14
  26. package/dist/components/base/accordion/accordion.js +0 -73
  27. package/dist/components/base/accordion/accordion_item.js +0 -133
  28. package/dist/components/base/alert/alert.js +0 -222
  29. package/dist/components/base/avatar/avatar.js +0 -160
  30. package/dist/components/base/avatar_labeled/avatar_labeled.js +0 -107
  31. package/dist/components/base/avatar_link/avatar_link.js +0 -47
  32. package/dist/components/base/avatars_inline/avatars_inline.js +0 -119
  33. package/dist/components/base/badge/badge.js +0 -105
  34. package/dist/components/base/banner/banner.js +0 -139
  35. package/dist/components/base/breadcrumb/breadcrumb.js +0 -122
  36. package/dist/components/base/breadcrumb/breadcrumb_item.js +0 -73
  37. package/dist/components/base/broadcast_message/broadcast_message.js +0 -112
  38. package/dist/components/base/broadcast_message/constants.js +0 -5
  39. package/dist/components/base/button/button.js +0 -151
  40. package/dist/components/base/button_group/button_group.js +0 -47
  41. package/dist/components/base/card/card.js +0 -71
  42. package/dist/components/base/carousel/carousel.js +0 -48
  43. package/dist/components/base/carousel/carousel_slide.js +0 -47
  44. package/dist/components/base/collapse/collapse.js +0 -59
  45. package/dist/components/base/datepicker/datepicker.js +0 -386
  46. package/dist/components/base/daterange_picker/daterange_picker.js +0 -288
  47. package/dist/components/base/drawer/drawer.js +0 -127
  48. package/dist/components/base/dropdown/dropdown.js +0 -261
  49. package/dist/components/base/dropdown/dropdown_divider.js +0 -48
  50. package/dist/components/base/dropdown/dropdown_form.js +0 -48
  51. package/dist/components/base/dropdown/dropdown_item.js +0 -131
  52. package/dist/components/base/dropdown/dropdown_section_header.js +0 -48
  53. package/dist/components/base/dropdown/dropdown_text.js +0 -48
  54. package/dist/components/base/filtered_search/common_story_options.js +0 -14
  55. package/dist/components/base/filtered_search/filtered_search.js +0 -388
  56. package/dist/components/base/filtered_search/filtered_search_suggestion.js +0 -89
  57. package/dist/components/base/filtered_search/filtered_search_suggestion_list.js +0 -138
  58. package/dist/components/base/filtered_search/filtered_search_term.js +0 -203
  59. package/dist/components/base/filtered_search/filtered_search_token.js +0 -384
  60. package/dist/components/base/filtered_search/filtered_search_token_segment.js +0 -420
  61. package/dist/components/base/filtered_search/filtered_search_utils.js +0 -242
  62. package/dist/components/base/form/form.js +0 -49
  63. package/dist/components/base/form/form_checkbox/form_checkbox.js +0 -78
  64. package/dist/components/base/form/form_checkbox/form_checkbox_group.js +0 -60
  65. package/dist/components/base/form/form_checkbox_tree/checkbox_tree_node.js +0 -79
  66. package/dist/components/base/form/form_checkbox_tree/form_checkbox_tree.js +0 -138
  67. package/dist/components/base/form/form_checkbox_tree/models/constants.js +0 -12
  68. package/dist/components/base/form/form_checkbox_tree/models/node.js +0 -51
  69. package/dist/components/base/form/form_checkbox_tree/models/tree.js +0 -199
  70. package/dist/components/base/form/form_combobox/constants.js +0 -55
  71. package/dist/components/base/form/form_combobox/form_combobox.js +0 -230
  72. package/dist/components/base/form/form_date/form_date.js +0 -143
  73. package/dist/components/base/form/form_fields/form_field_validator.js +0 -93
  74. package/dist/components/base/form/form_fields/form_fields.js +0 -214
  75. package/dist/components/base/form/form_fields/mappers.js +0 -13
  76. package/dist/components/base/form/form_fields/validators.js +0 -48
  77. package/dist/components/base/form/form_group/form_group.js +0 -97
  78. package/dist/components/base/form/form_input/form_input.js +0 -121
  79. package/dist/components/base/form/form_input_group/form_input_group.js +0 -108
  80. package/dist/components/base/form/form_input_group/form_input_group_mixin.js +0 -41
  81. package/dist/components/base/form/form_radio/form_radio.js +0 -65
  82. package/dist/components/base/form/form_radio_group/form_radio_group.js +0 -78
  83. package/dist/components/base/form/form_select/constants.js +0 -12
  84. package/dist/components/base/form/form_select/form_select.js +0 -82
  85. package/dist/components/base/form/form_text/form_text.js +0 -38
  86. package/dist/components/base/form/form_textarea/form_textarea.js +0 -112
  87. package/dist/components/base/form/input_group_text/input_group_text.js +0 -48
  88. package/dist/components/base/icon/icon.js +0 -111
  89. package/dist/components/base/infinite_scroll/infinite_scroll.js +0 -197
  90. package/dist/components/base/keyset_pagination/keyset_pagination.js +0 -151
  91. package/dist/components/base/label/label.js +0 -163
  92. package/dist/components/base/link/link.js +0 -50
  93. package/dist/components/base/loading_icon/loading_icon.js +0 -111
  94. package/dist/components/base/markdown/markdown.js +0 -52
  95. package/dist/components/base/modal/modal.js +0 -204
  96. package/dist/components/base/nav/nav.js +0 -48
  97. package/dist/components/base/nav/nav_item.js +0 -48
  98. package/dist/components/base/nav/nav_item_dropdown.js +0 -62
  99. package/dist/components/base/navbar/navbar.js +0 -48
  100. package/dist/components/base/new_dropdowns/base_dropdown/base_dropdown.js +0 -453
  101. package/dist/components/base/new_dropdowns/base_dropdown/constants.js +0 -4
  102. package/dist/components/base/new_dropdowns/constants.js +0 -21
  103. package/dist/components/base/new_dropdowns/disclosure/constants.js +0 -8
  104. package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown.js +0 -370
  105. package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown_group.js +0 -110
  106. package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.js +0 -143
  107. package/dist/components/base/new_dropdowns/disclosure/mock_data.js +0 -147
  108. package/dist/components/base/new_dropdowns/disclosure/utils.js +0 -39
  109. package/dist/components/base/new_dropdowns/listbox/listbox.js +0 -767
  110. package/dist/components/base/new_dropdowns/listbox/listbox_group.js +0 -58
  111. package/dist/components/base/new_dropdowns/listbox/listbox_item.js +0 -91
  112. package/dist/components/base/new_dropdowns/listbox/listbox_search_input.js +0 -93
  113. package/dist/components/base/new_dropdowns/listbox/mock_data.js +0 -118
  114. package/dist/components/base/new_dropdowns/listbox/utils.js +0 -34
  115. package/dist/components/base/paginated_list/paginated_list.js +0 -180
  116. package/dist/components/base/pagination/pagination.js +0 -399
  117. package/dist/components/base/path/data.js +0 -34
  118. package/dist/components/base/path/path.js +0 -189
  119. package/dist/components/base/popover/popover.js +0 -110
  120. package/dist/components/base/progress_bar/progress_bar.js +0 -48
  121. package/dist/components/base/search_box_by_click/search_box_by_click.js +0 -235
  122. package/dist/components/base/search_box_by_type/search_box_by_type.js +0 -167
  123. package/dist/components/base/segmented_control/segmented_control.js +0 -109
  124. package/dist/components/base/skeleton_loader/skeleton_loader.js +0 -224
  125. package/dist/components/base/sorting/sorting.js +0 -171
  126. package/dist/components/base/sorting/sorting_item.js +0 -109
  127. package/dist/components/base/table/constants.js +0 -5
  128. package/dist/components/base/table/table.js +0 -89
  129. package/dist/components/base/table_lite/table_lite.js +0 -72
  130. package/dist/components/base/tabs/constants.js +0 -3
  131. package/dist/components/base/tabs/tab/tab.js +0 -83
  132. package/dist/components/base/tabs/tabs/scrollable_tabs.js +0 -143
  133. package/dist/components/base/tabs/tabs/tabs.js +0 -224
  134. package/dist/components/base/toast/toast.js +0 -82
  135. package/dist/components/base/toggle/toggle.js +0 -180
  136. package/dist/components/base/token/token.js +0 -85
  137. package/dist/components/base/token_selector/helpers.js +0 -5
  138. package/dist/components/base/token_selector/token_container.js +0 -165
  139. package/dist/components/base/token_selector/token_selector.js +0 -403
  140. package/dist/components/base/token_selector/token_selector_dropdown.js +0 -199
  141. package/dist/components/base/tooltip/tooltip.js +0 -55
  142. package/dist/components/charts/area/area.js +0 -311
  143. package/dist/components/charts/bar/bar.js +0 -253
  144. package/dist/components/charts/chart/chart.js +0 -215
  145. package/dist/components/charts/column/column.js +0 -226
  146. package/dist/components/charts/discrete_scatter/discrete_scatter.js +0 -203
  147. package/dist/components/charts/gauge/gauge.js +0 -208
  148. package/dist/components/charts/heatmap/heatmap.js +0 -295
  149. package/dist/components/charts/heatmap/index.js +0 -2
  150. package/dist/components/charts/legend/legend.js +0 -228
  151. package/dist/components/charts/line/line.js +0 -308
  152. package/dist/components/charts/series_label/series_label.js +0 -100
  153. package/dist/components/charts/single_stat/single_stat.js +0 -152
  154. package/dist/components/charts/sparkline/sparkline.js +0 -261
  155. package/dist/components/charts/stacked_column/stacked_column.js +0 -335
  156. package/dist/components/charts/tooltip/tooltip.js +0 -251
  157. package/dist/components/experimental/duo/chat/components/duo_chat_conversation/duo_chat_conversation.js +0 -83
  158. package/dist/components/experimental/duo/chat/components/duo_chat_loader/duo_chat_loader.js +0 -100
  159. package/dist/components/experimental/duo/chat/components/duo_chat_message/copy_code_element.js +0 -35
  160. package/dist/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.js +0 -115
  161. package/dist/components/experimental/duo/chat/components/duo_chat_message_sources/duo_chat_message_sources.js +0 -104
  162. package/dist/components/experimental/duo/chat/components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.js +0 -64
  163. package/dist/components/experimental/duo/chat/constants.js +0 -23
  164. package/dist/components/experimental/duo/chat/duo_chat.js +0 -359
  165. package/dist/components/experimental/duo/chat/mock_data.js +0 -83
  166. package/dist/components/experimental/duo/user_feedback/user_feedback.js +0 -94
  167. package/dist/components/experimental/duo/user_feedback/user_feedback_modal.js +0 -124
  168. package/dist/components/experimental/experiment_badge/constants.js +0 -4
  169. package/dist/components/experimental/experiment_badge/experiment_badge.js +0 -107
  170. package/dist/components/mixins/button_mixin.js +0 -11
  171. package/dist/components/mixins/safe_link_mixin.js +0 -30
  172. package/dist/components/mixins/tooltip_mixin.js +0 -21
  173. package/dist/components/regions/dashboard_skeleton/dashboard_skeleton.js +0 -53
  174. package/dist/components/regions/empty_state/empty_state.js +0 -154
  175. package/dist/components/shared_components/charts/tooltip_default_format.js +0 -53
  176. package/dist/components/shared_components/clear_icon_button/clear_icon_button.js +0 -64
  177. package/dist/components/shared_components/close_button/close_button.js +0 -54
  178. package/dist/components/utilities/animated_number/animated_number.js +0 -131
  179. package/dist/components/utilities/friendly_wrap/friendly_wrap.js +0 -75
  180. package/dist/components/utilities/intersection_observer/intersection_observer.js +0 -88
  181. package/dist/components/utilities/intersperse/intersperse.js +0 -86
  182. package/dist/components/utilities/sprintf/sprintf.js +0 -172
  183. package/dist/components/utilities/truncate/constants.js +0 -7
  184. package/dist/components/utilities/truncate/truncate.js +0 -111
  185. package/dist/components/utilities/truncate_text/constants.js +0 -7
  186. package/dist/components/utilities/truncate_text/truncate_text.js +0 -146
  187. package/dist/config.js +0 -86
  188. package/dist/directives/collapse_toggle.js +0 -1
  189. package/dist/directives/hover_load/hover_load.js +0 -45
  190. package/dist/directives/modal.js +0 -1
  191. package/dist/directives/outside/get_event_like_time_stamp.js +0 -33
  192. package/dist/directives/outside/outside.js +0 -106
  193. package/dist/directives/resize_observer/resize_observer.js +0 -51
  194. package/dist/directives/safe_html/constants.js +0 -6
  195. package/dist/directives/safe_html/safe_html.js +0 -35
  196. package/dist/directives/safe_link/mock_data.js +0 -10
  197. package/dist/directives/safe_link/safe_link.js +0 -65
  198. package/dist/directives/tooltip.js +0 -1
  199. package/dist/index.css +0 -7
  200. package/dist/index.css.map +0 -1
  201. package/dist/index.js +0 -105
  202. package/dist/tokens/common_story_options.js +0 -109
  203. package/dist/utils/breakpoints.js +0 -20
  204. package/dist/utils/charts/config.js +0 -556
  205. package/dist/utils/charts/constants.js +0 -63
  206. package/dist/utils/charts/mock_data.js +0 -211
  207. package/dist/utils/charts/story_config.js +0 -42
  208. package/dist/utils/charts/theme.js +0 -192
  209. package/dist/utils/charts/utils.js +0 -54
  210. package/dist/utils/constants.js +0 -270
  211. package/dist/utils/data_utils.js +0 -21
  212. package/dist/utils/datetime_utility.js +0 -61
  213. package/dist/utils/i18n.js +0 -15
  214. package/dist/utils/is_slot_empty.js +0 -38
  215. package/dist/utils/number_utils.js +0 -124
  216. package/dist/utils/stories_constants.js +0 -29
  217. package/dist/utils/stories_utils.js +0 -13
  218. package/dist/utils/story_decorators/container.js +0 -16
  219. package/dist/utils/string_utils.js +0 -69
  220. package/dist/utils/svgs/svg_paths.js +0 -7
  221. package/dist/utils/test_utils.js +0 -33
  222. package/dist/utils/use_fake_date.js +0 -29
  223. package/dist/utils/use_mock_intersection_observer.js +0 -108
  224. package/dist/utils/utils.js +0 -177
  225. package/dist/utils.js +0 -5
@@ -1,48 +0,0 @@
1
- import { BDropdownText } from 'bootstrap-vue/esm/index.js';
2
- import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
3
-
4
- var script = {
5
- name: 'GlDropdownText',
6
- components: {
7
- BDropdownText
8
- },
9
- inheritAttrs: false
10
- };
11
-
12
- /* script */
13
- const __vue_script__ = script;
14
-
15
- /* template */
16
- var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-dropdown-text',_vm._g(_vm._b({staticClass:"gl-dropdown-text"},'b-dropdown-text',_vm.$attrs,false),_vm.$listeners),[_vm._t("default")],2)};
17
- var __vue_staticRenderFns__ = [];
18
-
19
- /* style */
20
- const __vue_inject_styles__ = undefined;
21
- /* scoped */
22
- const __vue_scope_id__ = undefined;
23
- /* module identifier */
24
- const __vue_module_identifier__ = undefined;
25
- /* functional template */
26
- const __vue_is_functional_template__ = false;
27
- /* style inject */
28
-
29
- /* style inject SSR */
30
-
31
- /* style inject shadow dom */
32
-
33
-
34
-
35
- const __vue_component__ = __vue_normalize__(
36
- { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
37
- __vue_inject_styles__,
38
- __vue_script__,
39
- __vue_scope_id__,
40
- __vue_is_functional_template__,
41
- __vue_module_identifier__,
42
- false,
43
- undefined,
44
- undefined,
45
- undefined
46
- );
47
-
48
- export default __vue_component__;
@@ -1,14 +0,0 @@
1
- const noop = () => {};
2
-
3
- /**
4
- * A mocked provide option for components that expect to be descendants of
5
- * GlFilteredSearch, to be used in their stories.
6
- */
7
- const provide = () => ({
8
- portalName: 'portal',
9
- alignSuggestions: noop,
10
- suggestionsListClass: noop,
11
- termsAsTokens: () => false
12
- });
13
-
14
- export { provide };
@@ -1,388 +0,0 @@
1
- import isEqual from 'lodash/isEqual';
2
- import cloneDeep from 'lodash/cloneDeep';
3
- import { PortalTarget } from 'portal-vue';
4
- import { GlTooltipDirective } from '../../../directives/tooltip';
5
- import GlIcon from '../icon/icon';
6
- import GlSearchBoxByClick from '../search_box_by_click/search_box_by_click';
7
- import GlFilteredSearchTerm from './filtered_search_term';
8
- import { termTokenDefinition, createTerm, needDenormalization, denormalizeTokens, isEmptyTerm, INTENT_ACTIVATE_PREVIOUS, ensureTokenId, normalizeTokens } from './filtered_search_utils';
9
- import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
10
-
11
- let portalUuid = 0;
12
- function initialState() {
13
- return [createTerm()];
14
- }
15
- var script = {
16
- name: 'GlFilteredSearch',
17
- components: {
18
- GlSearchBoxByClick,
19
- GlIcon,
20
- PortalTarget
21
- },
22
- directives: {
23
- GlTooltip: GlTooltipDirective
24
- },
25
- provide() {
26
- portalUuid += 1;
27
- this.portalName = `filters_portal_${portalUuid}`;
28
- return {
29
- portalName: this.portalName,
30
- alignSuggestions: ref => this.alignSuggestions(ref),
31
- // Return a function reference instead of a prop to work around vue-apollo@3 bug.
32
- // TODO: This can be reverted once https://github.com/vuejs/vue-apollo/pull/1153
33
- // has been merged and we consume it, or we upgrade to vue-apollo@4.
34
- suggestionsListClass: () => this.suggestionsListClass,
35
- termsAsTokens: () => this.termsAsTokens
36
- };
37
- },
38
- inheritAttrs: false,
39
- props: {
40
- /**
41
- * If provided, used as value of filtered search
42
- */
43
- value: {
44
- required: false,
45
- type: Array,
46
- default: () => []
47
- },
48
- /**
49
- * Available tokens
50
- */
51
- availableTokens: {
52
- type: Array,
53
- required: false,
54
- default: () => [],
55
- validator(value) {
56
- // eslint-disable-next-line no-underscore-dangle
57
- if (!value.__v_raw) {
58
- // This is Vue 2
59
- return true;
60
- }
61
-
62
- // eslint-disable-next-line no-underscore-dangle
63
- const isOk = Array.isArray(value) && value.every(_ref => {
64
- let {
65
- token
66
- } = _ref;
67
- return token.__v_skip;
68
- });
69
- if (!isOk) {
70
- // eslint-disable-next-line no-console
71
- console.warn('You are using Vue3. In Vue3 each token component passed to filtered search must be wrapped into markRaw');
72
- }
73
- return isOk;
74
- }
75
- },
76
- /**
77
- * If provided, used as history items for this component
78
- */
79
- placeholder: {
80
- type: String,
81
- required: false,
82
- default: 'Search'
83
- },
84
- clearButtonTitle: {
85
- type: String,
86
- required: false,
87
- default: 'Clear'
88
- },
89
- historyItems: {
90
- type: Array,
91
- required: false,
92
- default: null
93
- },
94
- /**
95
- * Additional classes to add to the suggestion list menu. NOTE: this not reactive, and the value
96
- * must be available and fixed when the component is instantiated
97
- */
98
- suggestionsListClass: {
99
- type: [String, Array, Object],
100
- required: false,
101
- default: null
102
- },
103
- /**
104
- * Display operators' descriptions instead of their values (e.g., "is" instead of "=").
105
- */
106
- showFriendlyText: {
107
- type: Boolean,
108
- required: false,
109
- default: false
110
- },
111
- /**
112
- * HTML attributes to add to the search button
113
- */
114
- searchButtonAttributes: {
115
- type: Object,
116
- required: false,
117
- default: () => ({})
118
- },
119
- /**
120
- * HTML attributes to add to the search input
121
- */
122
- searchInputAttributes: {
123
- type: Object,
124
- required: false,
125
- default: () => ({})
126
- },
127
- viewOnly: {
128
- type: Boolean,
129
- required: false,
130
- default: false
131
- },
132
- /**
133
- * Render search terms as GlTokens. Ideally, this prop will be as
134
- * short-lived as possible, and this behavior will become the default and
135
- * only behavior.
136
- *
137
- * This prop is *not* reactive.
138
- *
139
- * See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2159.
140
- */
141
- termsAsTokens: {
142
- type: Boolean,
143
- required: false,
144
- default: false
145
- },
146
- /**
147
- * The title of the text search option. Ignored unless termsAsTokens is enabled.
148
- */
149
- searchTextOptionLabel: {
150
- type: String,
151
- required: false,
152
- default: termTokenDefinition.title
153
- }
154
- },
155
- data() {
156
- return {
157
- tokens: initialState(),
158
- activeTokenIdx: null,
159
- suggestionsStyle: {},
160
- intendedCursorPosition: 'end'
161
- };
162
- },
163
- computed: {
164
- activeToken() {
165
- return this.tokens[this.activeTokenIdx];
166
- },
167
- lastTokenIdx() {
168
- return this.tokens.length - 1;
169
- },
170
- isLastTokenActive() {
171
- return this.activeTokenIdx === this.lastTokenIdx;
172
- },
173
- hasValue() {
174
- return this.tokens.length > 1 || this.tokens[0].value.data !== '';
175
- },
176
- termPlaceholder() {
177
- return this.hasValue ? null : this.placeholder;
178
- },
179
- currentAvailableTokens() {
180
- return this.availableTokens.filter(token => {
181
- if (token.disabled) {
182
- return false;
183
- }
184
- if (token.unique) {
185
- return !this.tokens.find(t => t.type === token.type);
186
- }
187
- return true;
188
- });
189
- }
190
- },
191
- watch: {
192
- tokens: {
193
- handler() {
194
- if (process.env.NODE_ENV !== 'production') {
195
- const invalidToken = this.tokens.find(token => !token.id);
196
- if (invalidToken) {
197
- throw new Error(`Token does not have an id:\n${JSON.stringify(invalidToken)}`);
198
- }
199
- }
200
- if ((this.tokens.length === 0 || !this.isLastTokenEmpty()) && !this.viewOnly) {
201
- this.tokens.push(createTerm());
202
- }
203
-
204
- /**
205
- * Emitted when the tokens (value) changes
206
- * @property {array} tokens
207
- */
208
- this.$emit('input', this.tokens);
209
- },
210
- deep: true,
211
- immediate: true
212
- },
213
- value: {
214
- handler(newValue, oldValue) {
215
- if (newValue.length && !isEqual(newValue, oldValue)) {
216
- this.applyNewValue(cloneDeep(newValue));
217
- }
218
- },
219
- deep: true,
220
- immediate: true
221
- }
222
- },
223
- methods: {
224
- applyNewValue(newValue) {
225
- this.tokens = needDenormalization(newValue) ? denormalizeTokens(newValue, this.termsAsTokens) : newValue;
226
- },
227
- isActiveToken(idx) {
228
- return this.activeTokenIdx === idx;
229
- },
230
- isLastToken(idx) {
231
- return this.activeTokenIdx === null && idx === this.lastTokenIdx;
232
- },
233
- isLastTokenEmpty() {
234
- return isEmptyTerm(this.tokens[this.lastTokenIdx]);
235
- },
236
- getTokenEntry(type) {
237
- return this.availableTokens.find(t => t.type === type);
238
- },
239
- getTokenComponent(type) {
240
- var _this$getTokenEntry;
241
- return ((_this$getTokenEntry = this.getTokenEntry(type)) === null || _this$getTokenEntry === void 0 ? void 0 : _this$getTokenEntry.token) || GlFilteredSearchTerm;
242
- },
243
- getTokenClassList(idx) {
244
- return {
245
- 'gl-filtered-search-item': true,
246
- 'gl-filtered-search-last-item': this.isLastToken(idx) && !this.viewOnly
247
- };
248
- },
249
- activate(idx) {
250
- if (!this.viewOnly) {
251
- this.activeTokenIdx = idx;
252
- }
253
- },
254
- activatePreviousToken() {
255
- if (this.activeTokenIdx > 0) {
256
- this.activeTokenIdx -= 1;
257
- this.intendedCursorPosition = 'end';
258
- }
259
- },
260
- activateNextToken() {
261
- if (this.activeTokenIdx < this.value.length) {
262
- this.activeTokenIdx += 1;
263
- this.intendedCursorPosition = 'start';
264
- }
265
- },
266
- alignSuggestions(ref) {
267
- const offsetRef = ref.getBoundingClientRect().left;
268
- const offsetMenu = this.$el.getBoundingClientRect().left;
269
- const transform = `translateX(${Math.floor(offsetRef - offsetMenu)}px)`;
270
- this.suggestionsStyle = {
271
- transform
272
- };
273
- },
274
- deactivate(token) {
275
- this.intendedCursorPosition = 'end';
276
- const tokenIdx = this.tokens.indexOf(token);
277
- if (tokenIdx === -1 || this.activeTokenIdx !== tokenIdx) {
278
- return;
279
- }
280
- if (!this.isLastTokenEmpty()) {
281
- this.tokens.push(createTerm());
282
- }
283
- if (!this.isLastTokenActive && isEmptyTerm(this.activeToken)) {
284
- this.tokens.splice(tokenIdx, 1);
285
- }
286
- this.activeTokenIdx = null;
287
- },
288
- destroyToken(idx) {
289
- let {
290
- intent
291
- } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
292
- if (this.tokens.length === 1) {
293
- return;
294
- }
295
- this.tokens.splice(idx, 1);
296
-
297
- // First, attempt to honor the user's activation intent behind the
298
- // destruction of the token, if any. Otherwise, try to maintain the
299
- // active state for the token that was active at the time. If that's not
300
- // possible, make sure no token is active.
301
- if (intent === INTENT_ACTIVATE_PREVIOUS) {
302
- // If there is a previous token, activate it; else, activate the first token
303
- this.activeTokenIdx = Math.max(idx - 1, 0);
304
- } else if (idx < this.activeTokenIdx) {
305
- // Preserve the active token's active status (it shifted down one index)
306
- this.activeTokenIdx -= 1;
307
- } else if (idx === this.activeTokenIdx) {
308
- // User destroyed the active token; don't activate another one.
309
- this.activeTokenIdx = null;
310
- }
311
- // Do nothing if there was no active token, or if idx > this.activeTokenIdx,
312
- // to preserve the active state of the remaining tokens.
313
- },
314
- replaceToken(idx, token) {
315
- this.$set(this.tokens, idx, ensureTokenId({
316
- ...token,
317
- value: {
318
- data: '',
319
- ...token.value
320
- }
321
- }));
322
- this.activeTokenIdx = idx;
323
- },
324
- // This method can be deleted once termsAsTokens behavior is the default.
325
- createTokens(idx) {
326
- let newStrings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [''];
327
- if (!this.isLastTokenActive && newStrings.length === 1 && newStrings[0] === '') {
328
- this.activeTokenIdx = this.lastTokenIdx;
329
- return;
330
- }
331
- const newTokens = newStrings.map(data => createTerm(data));
332
- this.tokens.splice(idx + 1, 0, ...newTokens);
333
- this.activeTokenIdx = idx + newStrings.length;
334
- },
335
- completeToken() {
336
- if (this.activeTokenIdx === this.lastTokenIdx - 1) {
337
- this.activeTokenIdx = this.lastTokenIdx;
338
- } else {
339
- this.activeTokenIdx = null;
340
- }
341
- },
342
- submit() {
343
- /**
344
- * Emitted when search is submitted
345
- * @property {array} tokens
346
- */
347
- this.$emit('submit', normalizeTokens(cloneDeep(this.tokens)));
348
- }
349
- }
350
- };
351
-
352
- /* script */
353
- const __vue_script__ = script;
354
-
355
- /* template */
356
- var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-search-box-by-click',_vm._b({attrs:{"value":_vm.tokens,"history-items":_vm.historyItems,"clearable":_vm.hasValue,"search-button-attributes":_vm.searchButtonAttributes,"disabled":_vm.viewOnly,"data-testid":"filtered-search-input"},on:{"submit":_vm.submit,"input":_vm.applyNewValue,"history-item-selected":function($event){return _vm.$emit('history-item-selected', $event)},"clear":function($event){return _vm.$emit('clear')},"clear-history":function($event){return _vm.$emit('clear-history')}},scopedSlots:_vm._u([{key:"history-item",fn:function(slotScope){return [_vm._t("history-item",null,null,slotScope)]}},{key:"input",fn:function(){return [_c('div',{staticClass:"gl-filtered-search-scrollable-container",class:{ 'gl-bg-gray-10! gl-inset-border-1-gray-100!': _vm.viewOnly }},[_c('div',{staticClass:"gl-filtered-search-scrollable"},_vm._l((_vm.tokens),function(token,idx){return _c(_vm.getTokenComponent(token.type),{key:token.id,ref:"tokens",refInFor:true,tag:"component",class:_vm.getTokenClassList(idx),attrs:{"config":_vm.getTokenEntry(token.type),"active":_vm.activeTokenIdx === idx,"cursor-position":_vm.intendedCursorPosition,"available-tokens":_vm.currentAvailableTokens,"current-value":_vm.tokens,"index":idx,"placeholder":_vm.termPlaceholder,"show-friendly-text":_vm.showFriendlyText,"search-input-attributes":_vm.searchInputAttributes,"view-only":_vm.viewOnly,"is-last-token":_vm.isLastToken(idx),"search-text-option-label":_vm.searchTextOptionLabel},on:{"activate":function($event){return _vm.activate(idx)},"deactivate":function($event){return _vm.deactivate(token)},"destroy":function($event){return _vm.destroyToken(idx, $event)},"replace":function($event){return _vm.replaceToken(idx, $event)},"complete":_vm.completeToken,"submit":_vm.submit,"split":function($event){return _vm.createTokens(idx, $event)},"previous":_vm.activatePreviousToken,"next":_vm.activateNextToken},model:{value:(token.value),callback:function ($$v) {_vm.$set(token, "value", $$v);},expression:"token.value"}})}),1)]),_vm._v(" "),_c('portal-target',{key:_vm.activeTokenIdx,ref:"menu",style:(_vm.suggestionsStyle),attrs:{"name":_vm.portalName,"slim":""}})]},proxy:true}],null,true)},'gl-search-box-by-click',_vm.$attrs,false))};
357
- var __vue_staticRenderFns__ = [];
358
-
359
- /* style */
360
- const __vue_inject_styles__ = undefined;
361
- /* scoped */
362
- const __vue_scope_id__ = undefined;
363
- /* module identifier */
364
- const __vue_module_identifier__ = undefined;
365
- /* functional template */
366
- const __vue_is_functional_template__ = false;
367
- /* style inject */
368
-
369
- /* style inject SSR */
370
-
371
- /* style inject shadow dom */
372
-
373
-
374
-
375
- const __vue_component__ = __vue_normalize__(
376
- { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
377
- __vue_inject_styles__,
378
- __vue_script__,
379
- __vue_scope_id__,
380
- __vue_is_functional_template__,
381
- __vue_module_identifier__,
382
- false,
383
- undefined,
384
- undefined,
385
- undefined
386
- );
387
-
388
- export default __vue_component__;
@@ -1,89 +0,0 @@
1
- import GlDropdownItem from '../dropdown/dropdown_item';
2
- import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
3
-
4
- var script = {
5
- name: 'GlFilteredSearchSuggestion',
6
- components: {
7
- GlDropdownItem
8
- },
9
- inject: ['filteredSearchSuggestionListInstance'],
10
- inheritAttrs: false,
11
- props: {
12
- /**
13
- * Value that will be emitted if this suggestion is selected.
14
- */
15
- value: {
16
- required: true,
17
- validator: () => true
18
- }
19
- },
20
- computed: {
21
- isActive() {
22
- return this.filteredSearchSuggestionListInstance.activeItem === this;
23
- }
24
- },
25
- watch: {
26
- isActive(newValue) {
27
- if (newValue) {
28
- window.requestAnimationFrame(() => {
29
- var _this$$refs$item, _this$$refs$item$$el;
30
- (_this$$refs$item = this.$refs.item) === null || _this$$refs$item === void 0 ? void 0 : (_this$$refs$item$$el = _this$$refs$item.$el) === null || _this$$refs$item$$el === void 0 ? void 0 : _this$$refs$item$$el.scrollIntoView({
31
- block: 'nearest',
32
- inline: 'end'
33
- });
34
- });
35
- }
36
- }
37
- },
38
- created() {
39
- this.filteredSearchSuggestionListInstance.register(this);
40
- },
41
- beforeDestroy() {
42
- this.filteredSearchSuggestionListInstance.unregister(this);
43
- },
44
- methods: {
45
- emitValue() {
46
- // We use href argument for gl-dropdown-item to use <a> instead of <button>
47
- // due to https://bugs.webkit.org/show_bug.cgi?id=22261
48
- this.filteredSearchSuggestionListInstance.$emit('suggestion', this.value);
49
- }
50
- }
51
- };
52
-
53
- /* script */
54
- const __vue_script__ = script;
55
-
56
- /* template */
57
- var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-dropdown-item',_vm._b({ref:"item",staticClass:"gl-filtered-search-suggestion",class:{ 'gl-filtered-search-suggestion-active': _vm.isActive },attrs:{"data-testid":"filtered-search-suggestion","tabindex":"-1","href":"#"},nativeOn:{"mousedown":function($event){$event.preventDefault();return _vm.emitValue.apply(null, arguments)}}},'gl-dropdown-item',_vm.$attrs,false),[_vm._t("default")],2)};
58
- var __vue_staticRenderFns__ = [];
59
-
60
- /* style */
61
- const __vue_inject_styles__ = undefined;
62
- /* scoped */
63
- const __vue_scope_id__ = undefined;
64
- /* module identifier */
65
- const __vue_module_identifier__ = undefined;
66
- /* functional template */
67
- const __vue_is_functional_template__ = false;
68
- /* style inject */
69
-
70
- /* style inject SSR */
71
-
72
- /* style inject shadow dom */
73
-
74
-
75
-
76
- const __vue_component__ = __vue_normalize__(
77
- { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
78
- __vue_inject_styles__,
79
- __vue_script__,
80
- __vue_scope_id__,
81
- __vue_is_functional_template__,
82
- __vue_module_identifier__,
83
- false,
84
- undefined,
85
- undefined,
86
- undefined
87
- );
88
-
89
- export default __vue_component__;
@@ -1,138 +0,0 @@
1
- import { stepIndexAndWrap } from './filtered_search_utils';
2
- import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
3
-
4
- const DEFER_TO_INITIAL_VALUE = -1;
5
- const NO_ACTIVE_ITEM = -2;
6
- var script = {
7
- name: 'GlFilteredSearchSuggestionList',
8
- inject: ['suggestionsListClass', 'termsAsTokens'],
9
- provide() {
10
- return {
11
- filteredSearchSuggestionListInstance: this
12
- };
13
- },
14
- props: {
15
- /**
16
- * Value to be initially selected in list.
17
- */
18
- initialValue: {
19
- required: false,
20
- validator: () => true,
21
- default: null
22
- }
23
- },
24
- data() {
25
- return {
26
- activeIdx: DEFER_TO_INITIAL_VALUE,
27
- registeredItems: []
28
- };
29
- },
30
- computed: {
31
- initialActiveIdx() {
32
- return this.registeredItems.findIndex(item => this.valuesMatch(item.value, this.initialValue));
33
- },
34
- initialActiveItem() {
35
- return this.registeredItems[this.initialActiveIdx];
36
- },
37
- activeItem() {
38
- if (!this.termsAsTokens() && this.activeIdx === NO_ACTIVE_ITEM) return null;
39
- if (this.activeIdx === DEFER_TO_INITIAL_VALUE) return this.initialActiveItem;
40
- return this.registeredItems[this.activeIdx];
41
- },
42
- listClasses() {
43
- return [this.suggestionsListClass(), 'dropdown-menu gl-filtered-search-suggestion-list'];
44
- }
45
- },
46
- watch: {
47
- initialValue() {
48
- this.activeIdx = DEFER_TO_INITIAL_VALUE;
49
- }
50
- },
51
- methods: {
52
- valuesMatch(firstValue, secondValue) {
53
- if (firstValue == null || secondValue == null) return false;
54
- return typeof firstValue === 'string' && typeof secondValue === 'string' ? firstValue.toLowerCase() === secondValue.toLowerCase() : firstValue === secondValue;
55
- },
56
- register(item) {
57
- this.registeredItems.push(item);
58
- },
59
- unregister(item) {
60
- const idx = this.registeredItems.indexOf(item);
61
- if (idx !== -1) {
62
- this.registeredItems.splice(idx, 1);
63
- if (idx === this.activeIdx) {
64
- this.activeIdx = DEFER_TO_INITIAL_VALUE;
65
- }
66
- }
67
- },
68
- nextItem() {
69
- if (this.termsAsTokens()) {
70
- this.stepItem(1);
71
- } else {
72
- this.stepItem(1, this.registeredItems.length - 1);
73
- }
74
- },
75
- prevItem() {
76
- if (this.termsAsTokens()) {
77
- this.stepItem(-1);
78
- } else {
79
- this.stepItem(-1, 0);
80
- }
81
- },
82
- stepItem(direction, endIdx) {
83
- if (!this.termsAsTokens() && (this.activeIdx === endIdx || this.activeIdx === DEFER_TO_INITIAL_VALUE && this.initialActiveIdx === endIdx)) {
84
- // The user wants to move past the end of the list, so ensure nothing is selected.
85
- this.activeIdx = NO_ACTIVE_ITEM;
86
- } else {
87
- const index = this.activeIdx === DEFER_TO_INITIAL_VALUE ?
88
- // Currently active item is set by initialValue (i.e., text input matching),
89
- // so step relative to that.
90
- this.initialActiveIdx :
91
- // Otherwise, step relative to the explicitly (via up/down arrows) activated item.
92
- this.activeIdx;
93
- this.activeIdx = stepIndexAndWrap(index, direction, this.registeredItems.length);
94
- }
95
- },
96
- getValue() {
97
- return this.activeItem ? this.activeItem.value : null;
98
- }
99
- }
100
- };
101
-
102
- /* script */
103
- const __vue_script__ = script;
104
-
105
- /* template */
106
- var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('ul',{class:_vm.listClasses},[_vm._t("default")],2)};
107
- var __vue_staticRenderFns__ = [];
108
-
109
- /* style */
110
- const __vue_inject_styles__ = undefined;
111
- /* scoped */
112
- const __vue_scope_id__ = undefined;
113
- /* module identifier */
114
- const __vue_module_identifier__ = undefined;
115
- /* functional template */
116
- const __vue_is_functional_template__ = false;
117
- /* style inject */
118
-
119
- /* style inject SSR */
120
-
121
- /* style inject shadow dom */
122
-
123
-
124
-
125
- const __vue_component__ = __vue_normalize__(
126
- { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
127
- __vue_inject_styles__,
128
- __vue_script__,
129
- __vue_scope_id__,
130
- __vue_is_functional_template__,
131
- __vue_module_identifier__,
132
- false,
133
- undefined,
134
- undefined,
135
- undefined
136
- );
137
-
138
- export default __vue_component__;