@gitlab/ui 112.2.2 → 112.3.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 (182) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/bin/migrate_custom_utils_to_tw.bundled.mjs +209 -32
  3. package/dist/components/base/accordion/accordion.js +1 -1
  4. package/dist/components/base/accordion/accordion_item.js +1 -1
  5. package/dist/components/base/alert/alert.js +1 -1
  6. package/dist/components/base/animated_icon/animated_chevron_down_up_icon.js +1 -1
  7. package/dist/components/base/animated_icon/animated_chevron_lg_down_up_icon.js +1 -1
  8. package/dist/components/base/animated_icon/animated_chevron_lg_right_down_icon.js +1 -1
  9. package/dist/components/base/animated_icon/animated_chevron_right_down_icon.js +1 -1
  10. package/dist/components/base/animated_icon/animated_duo_chat_icon.js +1 -1
  11. package/dist/components/base/animated_icon/animated_loader_icon.js +1 -1
  12. package/dist/components/base/animated_icon/animated_notifications_icon.js +1 -1
  13. package/dist/components/base/animated_icon/animated_sidebar_icon.js +1 -1
  14. package/dist/components/base/animated_icon/animated_smile_icon.js +1 -1
  15. package/dist/components/base/animated_icon/animated_sort_icon.js +1 -1
  16. package/dist/components/base/animated_icon/animated_star_icon.js +1 -1
  17. package/dist/components/base/animated_icon/animated_todo_icon.js +1 -1
  18. package/dist/components/base/animated_icon/animated_upload_icon.js +1 -1
  19. package/dist/components/base/animated_icon/base_animated_icon.js +1 -1
  20. package/dist/components/base/avatar/avatar.js +1 -1
  21. package/dist/components/base/avatar_labeled/avatar_labeled.js +1 -1
  22. package/dist/components/base/avatar_link/avatar_link.js +1 -1
  23. package/dist/components/base/avatars_inline/avatars_inline.js +1 -1
  24. package/dist/components/base/badge/badge.js +1 -1
  25. package/dist/components/base/banner/banner.js +1 -1
  26. package/dist/components/base/breadcrumb/breadcrumb.js +1 -1
  27. package/dist/components/base/breadcrumb/breadcrumb_item.js +1 -1
  28. package/dist/components/base/broadcast_message/broadcast_message.js +1 -1
  29. package/dist/components/base/button/button.js +1 -1
  30. package/dist/components/base/button_group/button_group.js +1 -1
  31. package/dist/components/base/card/card.js +1 -1
  32. package/dist/components/base/collapse/collapse.js +1 -1
  33. package/dist/components/base/datepicker/datepicker.js +1 -2
  34. package/dist/components/base/daterange_picker/daterange_picker.js +1 -1
  35. package/dist/components/base/drawer/drawer.js +1 -1
  36. package/dist/components/base/dropdown/dropdown.js +1 -2
  37. package/dist/components/base/dropdown/dropdown_divider.js +1 -1
  38. package/dist/components/base/dropdown/dropdown_form.js +1 -1
  39. package/dist/components/base/dropdown/dropdown_item.js +1 -1
  40. package/dist/components/base/dropdown/dropdown_section_header.js +1 -1
  41. package/dist/components/base/dropdown/dropdown_text.js +1 -1
  42. package/dist/components/base/filtered_search/filtered_search.js +2 -2
  43. package/dist/components/base/filtered_search/filtered_search_suggestion.js +1 -1
  44. package/dist/components/base/filtered_search/filtered_search_suggestion_list.js +1 -1
  45. package/dist/components/base/filtered_search/filtered_search_term.js +1 -1
  46. package/dist/components/base/filtered_search/filtered_search_token.js +1 -1
  47. package/dist/components/base/filtered_search/filtered_search_token_segment.js +1 -1
  48. package/dist/components/base/form/form.js +1 -1
  49. package/dist/components/base/form/form_character_count/form_character_count.js +1 -1
  50. package/dist/components/base/form/form_checkbox/form_checkbox.js +1 -1
  51. package/dist/components/base/form/form_checkbox/form_checkbox_group.js +1 -1
  52. package/dist/components/base/form/form_checkbox_tree/checkbox_tree_node.js +1 -1
  53. package/dist/components/base/form/form_checkbox_tree/form_checkbox_tree.js +1 -1
  54. package/dist/components/base/form/form_combobox/form_combobox.js +1 -1
  55. package/dist/components/base/form/form_date/form_date.js +1 -1
  56. package/dist/components/base/form/form_fields/form_field_validator.js +1 -1
  57. package/dist/components/base/form/form_fields/form_fields.js +1 -1
  58. package/dist/components/base/form/form_group/form_group.js +1 -1
  59. package/dist/components/base/form/form_input/form_input.js +1 -1
  60. package/dist/components/base/form/form_input_group/form_input_group.js +1 -1
  61. package/dist/components/base/form/form_radio/form_radio.js +1 -1
  62. package/dist/components/base/form/form_radio_group/form_radio_group.js +1 -1
  63. package/dist/components/base/form/form_select/form_select.js +1 -1
  64. package/dist/components/base/form/form_textarea/form_textarea.js +1 -1
  65. package/dist/components/base/form/input_group_text/input_group_text.js +1 -1
  66. package/dist/components/base/icon/icon.js +1 -1
  67. package/dist/components/base/infinite_scroll/infinite_scroll.js +1 -2
  68. package/dist/components/base/keyset_pagination/keyset_pagination.js +1 -1
  69. package/dist/components/base/label/label.js +1 -1
  70. package/dist/components/base/link/link.js +1 -1
  71. package/dist/components/base/loading_icon/loading_icon.js +1 -1
  72. package/dist/components/base/markdown/markdown.js +1 -1
  73. package/dist/components/base/modal/modal.js +1 -1
  74. package/dist/components/base/nav/nav.js +90 -6
  75. package/dist/components/base/nav/nav_item.js +1 -1
  76. package/dist/components/base/new_dropdowns/base_dropdown/base_dropdown.js +1 -2
  77. package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown.js +1 -2
  78. package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown_group.js +1 -2
  79. package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.js +1 -2
  80. package/dist/components/base/new_dropdowns/listbox/listbox.js +1 -2
  81. package/dist/components/base/new_dropdowns/listbox/listbox_group.js +1 -1
  82. package/dist/components/base/new_dropdowns/listbox/listbox_item.js +1 -1
  83. package/dist/components/base/new_dropdowns/listbox/listbox_search_input.js +1 -1
  84. package/dist/components/base/pagination/pagination.js +1 -1
  85. package/dist/components/base/path/path.js +1 -1
  86. package/dist/components/base/popover/popover.js +1 -1
  87. package/dist/components/base/progress_bar/progress_bar.js +1 -1
  88. package/dist/components/base/search_box_by_click/search_box_by_click.js +2 -2
  89. package/dist/components/base/search_box_by_type/search_box_by_type.js +1 -1
  90. package/dist/components/base/segmented_control/segmented_control.js +1 -1
  91. package/dist/components/base/skeleton_loader/skeleton_loader.js +1 -1
  92. package/dist/components/base/sorting/sorting.js +1 -1
  93. package/dist/components/base/table/table.js +2 -2
  94. package/dist/components/base/table_lite/table_lite.js +1 -1
  95. package/dist/components/base/tabs/tab/tab.js +1 -1
  96. package/dist/components/base/tabs/tabs/scrollable_tabs.js +1 -1
  97. package/dist/components/base/tabs/tabs/tabs.js +1 -1
  98. package/dist/components/base/toast/toast.js +1 -1
  99. package/dist/components/base/toggle/toggle.js +1 -1
  100. package/dist/components/base/token/token.js +1 -1
  101. package/dist/components/base/token_selector/token_container.js +1 -1
  102. package/dist/components/base/token_selector/token_selector.js +1 -1
  103. package/dist/components/base/token_selector/token_selector_dropdown.js +1 -1
  104. package/dist/components/base/tooltip/tooltip.js +1 -1
  105. package/dist/components/charts/area/area.js +1 -1
  106. package/dist/components/charts/bar/bar.js +1 -1
  107. package/dist/components/charts/chart/chart.js +1 -1
  108. package/dist/components/charts/column/column.js +1 -1
  109. package/dist/components/charts/discrete_scatter/discrete_scatter.js +1 -1
  110. package/dist/components/charts/gauge/gauge.js +2 -2
  111. package/dist/components/charts/heatmap/heatmap.js +1 -1
  112. package/dist/components/charts/legend/legend.js +1 -1
  113. package/dist/components/charts/line/line.js +1 -1
  114. package/dist/components/charts/series_label/series_label.js +1 -1
  115. package/dist/components/charts/shared/tooltip/tooltip.js +1 -1
  116. package/dist/components/charts/shared/tooltip/tooltip_default_format/tooltip_default_format.js +1 -1
  117. package/dist/components/charts/single_stat/single_stat.js +1 -1
  118. package/dist/components/charts/sparkline/sparkline.js +1 -1
  119. package/dist/components/charts/stacked_column/stacked_column.js +1 -1
  120. package/dist/components/dashboards/dashboard_panel/dashboard_panel.js +1 -1
  121. package/dist/components/experimental/experiment_badge/experiment_badge.js +1 -2
  122. package/dist/components/mixins/tooltip_mixin.js +1 -1
  123. package/dist/components/regions/dashboard_skeleton/dashboard_skeleton.js +1 -1
  124. package/dist/components/regions/empty_state/empty_state.js +1 -1
  125. package/dist/components/shared_components/clear_icon_button/clear_icon_button.js +1 -1
  126. package/dist/components/shared_components/close_button/close_button.js +1 -1
  127. package/dist/components/utilities/animated_number/animated_number.js +1 -1
  128. package/dist/components/utilities/friendly_wrap/friendly_wrap.js +1 -1
  129. package/dist/components/utilities/intersection_observer/intersection_observer.js +1 -1
  130. package/dist/components/utilities/intersperse/intersperse.js +1 -1
  131. package/dist/components/utilities/sprintf/sprintf.js +1 -1
  132. package/dist/components/utilities/truncate/truncate.js +1 -1
  133. package/dist/components/utilities/truncate_text/truncate_text.js +1 -1
  134. package/dist/config.js +1 -2
  135. package/dist/index.css +2 -2
  136. package/dist/index.css.map +1 -1
  137. package/dist/tailwind.css +1 -1
  138. package/dist/tokens/build/js/tokens.dark.js +80 -80
  139. package/dist/tokens/build/js/tokens.js +179 -179
  140. package/dist/tokens/css/tokens.css +50 -50
  141. package/dist/tokens/css/tokens.dark.css +25 -25
  142. package/dist/tokens/js/tokens.dark.js +80 -80
  143. package/dist/tokens/js/tokens.js +179 -179
  144. package/dist/tokens/json/tokens.dark.json +130 -130
  145. package/dist/tokens/json/tokens.json +229 -229
  146. package/dist/tokens/scss/_tokens.dark.scss +25 -25
  147. package/dist/tokens/scss/_tokens.scss +50 -50
  148. package/dist/tokens/tailwind/tokens.cjs +47 -47
  149. package/dist/tokens/tokens_story.js +1 -1
  150. package/dist/tokens/tokens_table.js +1 -1
  151. package/dist/vendor/bootstrap-vue/src/constants/components.js +1 -3
  152. package/dist/vendor/bootstrap-vue/src/utils/cache.js +1 -1
  153. package/dist/vendor/bootstrap-vue/src/utils/props.js +1 -1
  154. package/dist/vendor/bootstrap-vue/src/utils/router.js +1 -1
  155. package/package.json +2 -2
  156. package/src/components/base/nav/nav.md +182 -4
  157. package/src/components/base/nav/nav.vue +60 -7
  158. package/src/components/base/search_box_by_click/search_box_by_click.vue +9 -3
  159. package/src/tokens/build/css/tokens.css +50 -50
  160. package/src/tokens/build/css/tokens.dark.css +25 -25
  161. package/src/tokens/build/figma/constants.tokens.json +25 -25
  162. package/src/tokens/build/figma/deprecated.tokens.json +25 -25
  163. package/src/tokens/build/js/tokens.dark.js +80 -80
  164. package/src/tokens/build/js/tokens.js +179 -179
  165. package/src/tokens/build/json/tokens.dark.json +130 -130
  166. package/src/tokens/build/json/tokens.json +229 -229
  167. package/src/tokens/build/scss/_tokens.dark.scss +25 -25
  168. package/src/tokens/build/scss/_tokens.scss +50 -50
  169. package/src/tokens/build/tailwind/tokens.cjs +47 -47
  170. package/src/tokens/constant/color.tokens.json +25 -25
  171. package/src/tokens/deprecated/deprecated.color.tokens.json +25 -25
  172. package/src/vendor/bootstrap-vue/src/constants/components.js +0 -2
  173. package/dist/vendor/bootstrap-vue/src/components/collapse/collapse.js +0 -207
  174. package/dist/vendor/bootstrap-vue/src/components/collapse/helpers/bv-collapse.js +0 -90
  175. package/dist/vendor/bootstrap-vue/src/components/collapse/index.js +0 -1
  176. package/src/vendor/bootstrap-vue/src/components/collapse/MODIFICATIONS.md +0 -14
  177. package/src/vendor/bootstrap-vue/src/components/collapse/README.md +0 -321
  178. package/src/vendor/bootstrap-vue/src/components/collapse/collapse.js +0 -207
  179. package/src/vendor/bootstrap-vue/src/components/collapse/collapse.spec.js +0 -426
  180. package/src/vendor/bootstrap-vue/src/components/collapse/helpers/bv-collapse.js +0 -88
  181. package/src/vendor/bootstrap-vue/src/components/collapse/index.js +0 -3
  182. package/src/vendor/bootstrap-vue/src/components/collapse/package.json +0 -104
@@ -1,426 +0,0 @@
1
- import { createWrapper, mount } from '@vue/test-utils'
2
- import { waitNT, waitRAF } from '../../../tests/utils'
3
- import { BCollapse } from './collapse'
4
-
5
- const ROOT_ACTION_EVENT_NAME_REQUEST_STATE = 'bv::request-state::collapse'
6
- const ROOT_ACTION_EVENT_NAME_TOGGLE = 'bv::toggle::collapse'
7
-
8
- const ROOT_EVENT_NAME_ACCORDION = 'bv::collapse::accordion'
9
- const ROOT_EVENT_NAME_STATE = 'bv::collapse::state'
10
- const ROOT_EVENT_NAME_SYNC_STATE = 'bv::collapse::sync-state'
11
-
12
- describe('collapse', () => {
13
- const origGetBCR = Element.prototype.getBoundingClientRect
14
-
15
- beforeEach(() => {
16
- // Mock `getBoundingClientRect()` so that the we can get a fake height for element
17
- // Needed for keyboard navigation testing
18
- Element.prototype.getBoundingClientRect = jest.fn(() => ({
19
- width: 100,
20
- height: 100,
21
- top: 0,
22
- left: 0,
23
- bottom: 0,
24
- right: 0
25
- }))
26
- })
27
-
28
- afterEach(() => {
29
- // Reset overrides
30
- Element.prototype.getBoundingClientRect = origGetBCR
31
- })
32
-
33
- it('should have expected default structure', async () => {
34
- const wrapper = mount(BCollapse, {
35
- attachTo: document.body,
36
- propsData: {
37
- // 'id' is a required prop
38
- id: 'test'
39
- }
40
- })
41
- // const rootWrapper = createWrapper(wrapper.vm.$root)
42
- expect(wrapper.vm).toBeDefined()
43
- await waitNT(wrapper.vm)
44
- await waitRAF()
45
- expect(wrapper.element.tagName).toBe('DIV')
46
- expect(wrapper.attributes('id')).toBeDefined()
47
- expect(wrapper.attributes('id')).toEqual('test')
48
- expect(wrapper.classes()).toContain('collapse')
49
- expect(wrapper.classes()).not.toContain('show')
50
- expect(wrapper.element.style.display).toEqual('none')
51
- expect(wrapper.text()).toEqual('')
52
-
53
- wrapper.destroy()
54
- })
55
-
56
- it('renders default slot content', async () => {
57
- const wrapper = mount(BCollapse, {
58
- attachTo: document.body,
59
- propsData: {
60
- // 'id' is a required prop
61
- id: 'test'
62
- },
63
- slots: {
64
- default: '<div>foobar</div>'
65
- }
66
- })
67
- expect(wrapper.vm).toBeDefined()
68
- await waitNT(wrapper.vm)
69
- await waitRAF()
70
- expect(wrapper.element.tagName).toBe('DIV')
71
- expect(wrapper.attributes('id')).toBeDefined()
72
- expect(wrapper.attributes('id')).toEqual('test')
73
- expect(wrapper.classes()).toContain('collapse')
74
- expect(wrapper.classes()).not.toContain('show')
75
- expect(wrapper.element.style.display).toEqual('none')
76
- expect(wrapper.find('div > div').exists()).toBe(true)
77
- expect(wrapper.text()).toEqual('foobar')
78
-
79
- wrapper.destroy()
80
- })
81
-
82
- it('should mount as visible when prop visible is true', async () => {
83
- const wrapper = mount(BCollapse, {
84
- attachTo: document.body,
85
- propsData: {
86
- // 'id' is a required prop
87
- id: 'test',
88
- visible: true
89
- },
90
- slots: {
91
- default: '<div>foobar</div>'
92
- }
93
- })
94
- expect(wrapper.vm).toBeDefined()
95
- await waitNT(wrapper.vm)
96
- await waitRAF()
97
- expect(wrapper.element.tagName).toBe('DIV')
98
- expect(wrapper.attributes('id')).toBeDefined()
99
- expect(wrapper.attributes('id')).toEqual('test')
100
- expect(wrapper.classes()).toContain('show')
101
- expect(wrapper.classes()).toContain('collapse')
102
- expect(wrapper.element.style.display).toEqual('')
103
- expect(wrapper.find('div > div').exists()).toBe(true)
104
- expect(wrapper.text()).toEqual('foobar')
105
-
106
- wrapper.destroy()
107
- })
108
-
109
- it('should emit its state on mount (initially hidden)', async () => {
110
- const wrapper = mount(BCollapse, {
111
- attachTo: document.body,
112
- propsData: {
113
- // 'id' is a required prop
114
- id: 'test'
115
- },
116
- slots: {
117
- default: '<div>foobar</div>'
118
- }
119
- })
120
- const rootWrapper = createWrapper(wrapper.vm.$root)
121
- await waitNT(wrapper.vm)
122
- await waitRAF()
123
- expect(wrapper.emitted('show')).toBeUndefined()
124
- expect(wrapper.emitted('input')).toBeDefined()
125
- expect(wrapper.emitted('input').length).toBe(1)
126
- expect(wrapper.emitted('input')[0][0]).toBe(false)
127
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_ACCORDION)).toBeUndefined()
128
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_STATE)).toBeDefined()
129
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_STATE).length).toBe(1)
130
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_STATE)[0][0]).toBe('test') // ID
131
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_STATE)[0][1]).toBe(false) // Visible state
132
- expect(wrapper.element.style.display).toEqual('none')
133
-
134
- wrapper.destroy()
135
- })
136
-
137
- it('should emit its state on mount (initially visible)', async () => {
138
- const wrapper = mount(BCollapse, {
139
- attachTo: document.body,
140
- propsData: {
141
- // 'id' is a required prop
142
- id: 'test',
143
- visible: true
144
- },
145
- slots: {
146
- default: '<div>foobar</div>'
147
- }
148
- })
149
- const rootWrapper = createWrapper(wrapper.vm.$root)
150
- await waitNT(wrapper.vm)
151
- await waitRAF()
152
- expect(wrapper.emitted('show')).toBeUndefined() // Does not emit show when initially visible
153
- expect(wrapper.emitted('input')).toBeDefined()
154
- expect(wrapper.emitted('input').length).toBe(1)
155
- expect(wrapper.emitted('input')[0][0]).toBe(true)
156
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_ACCORDION)).toBeUndefined()
157
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_STATE)).toBeDefined()
158
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_STATE).length).toBe(1)
159
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_STATE)[0][0]).toBe('test') // ID
160
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_STATE)[0][1]).toBe(true) // Visible state
161
- expect(wrapper.element.style.display).toEqual('')
162
-
163
- wrapper.destroy()
164
- })
165
-
166
- it('should respond to state sync requests', async () => {
167
- const wrapper = mount(BCollapse, {
168
- attachTo: document.body,
169
- propsData: {
170
- // 'id' is a required prop
171
- id: 'test',
172
- visible: true
173
- },
174
- slots: {
175
- default: '<div>foobar</div>'
176
- }
177
- })
178
- const rootWrapper = createWrapper(wrapper.vm.$root)
179
- await waitNT(wrapper.vm)
180
- await waitRAF()
181
- expect(wrapper.element.style.display).toEqual('')
182
- expect(wrapper.emitted('show')).toBeUndefined() // Does not emit show when initially visible
183
- expect(wrapper.emitted('input')).toBeDefined()
184
- expect(wrapper.emitted('input').length).toBe(1)
185
- expect(wrapper.emitted('input')[0][0]).toBe(true)
186
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_ACCORDION)).toBeUndefined()
187
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_STATE)).toBeDefined()
188
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_STATE).length).toBe(1)
189
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_STATE)[0][0]).toBe('test') // ID
190
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_STATE)[0][1]).toBe(true) // Visible state
191
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_SYNC_STATE)).toBeUndefined()
192
-
193
- rootWrapper.vm.$root.$emit(ROOT_ACTION_EVENT_NAME_REQUEST_STATE, 'test')
194
- await waitNT(wrapper.vm)
195
- await waitRAF()
196
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_SYNC_STATE)).toBeDefined()
197
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_SYNC_STATE).length).toBe(1)
198
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_SYNC_STATE)[0][0]).toBe('test') // ID
199
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_SYNC_STATE)[0][1]).toBe(true) // Visible state
200
-
201
- wrapper.destroy()
202
- })
203
-
204
- it('setting visible to true after mount shows collapse', async () => {
205
- const wrapper = mount(BCollapse, {
206
- attachTo: document.body,
207
- propsData: {
208
- // 'id' is a required prop
209
- id: 'test',
210
- visible: false
211
- },
212
- slots: {
213
- default: '<div>foobar</div>'
214
- }
215
- })
216
- const rootWrapper = createWrapper(wrapper.vm.$root)
217
- await waitNT(wrapper.vm)
218
- await waitRAF()
219
-
220
- expect(wrapper.emitted('show')).toBeUndefined()
221
- expect(wrapper.emitted('input')).toBeDefined()
222
- expect(wrapper.emitted('input').length).toBe(1)
223
- expect(wrapper.emitted('input')[0][0]).toBe(false)
224
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_STATE)).toBeDefined()
225
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_STATE).length).toBe(1)
226
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_STATE)[0][0]).toBe('test') // ID
227
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_STATE)[0][1]).toBe(false) // Visible state
228
- expect(wrapper.element.style.display).toEqual('none')
229
-
230
- // Change visible prop
231
- await wrapper.setProps({
232
- visible: true
233
- })
234
- await waitNT(wrapper.vm)
235
- await waitRAF()
236
-
237
- expect(wrapper.emitted('show')).toBeDefined()
238
- expect(wrapper.emitted('show').length).toBe(1)
239
- expect(wrapper.emitted('input').length).toBe(2)
240
- expect(wrapper.emitted('input')[1][0]).toBe(true)
241
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_STATE).length).toBe(2)
242
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_STATE)[1][0]).toBe('test') // ID
243
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_STATE)[1][1]).toBe(true) // Visible state
244
- expect(wrapper.element.style.display).toEqual('')
245
-
246
- wrapper.destroy()
247
- })
248
-
249
- it('should respond to according events', async () => {
250
- const wrapper = mount(BCollapse, {
251
- attachTo: document.body,
252
- propsData: {
253
- // 'id' is a required prop
254
- id: 'test',
255
- accordion: 'foo',
256
- visible: true
257
- },
258
- slots: {
259
- default: '<div>foobar</div>'
260
- }
261
- })
262
- const rootWrapper = createWrapper(wrapper.vm.$root)
263
- await waitNT(wrapper.vm)
264
- await waitRAF()
265
-
266
- expect(wrapper.element.style.display).toEqual('')
267
- expect(wrapper.emitted('show')).toBeUndefined()
268
- expect(wrapper.emitted('input')).toBeDefined()
269
- expect(wrapper.emitted('input').length).toBe(1)
270
- expect(wrapper.emitted('input')[0][0]).toBe(true)
271
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_STATE)).toBeDefined()
272
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_STATE).length).toBe(1)
273
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_STATE)[0][0]).toBe('test') // ID
274
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_STATE)[0][1]).toBe(true) // Visible state
275
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_ACCORDION)).toBeDefined()
276
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_ACCORDION).length).toBe(1)
277
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_ACCORDION)[0][0]).toBe('test')
278
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_ACCORDION)[0][1]).toBe('foo')
279
-
280
- // Does not respond to accordion events for different accordion ID
281
- wrapper.vm.$root.$emit(ROOT_EVENT_NAME_ACCORDION, 'test', 'bar')
282
- await waitNT(wrapper.vm)
283
- await waitRAF()
284
-
285
- expect(wrapper.emitted('input').length).toBe(1)
286
- expect(wrapper.emitted('input')[0][0]).toBe(true)
287
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_STATE).length).toBe(1)
288
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_ACCORDION).length).toBe(2) // The event we just emitted
289
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_ACCORDION)[1][0]).toBe('test')
290
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_ACCORDION)[1][1]).toBe('bar')
291
- expect(wrapper.element.style.display).toEqual('')
292
-
293
- // Should respond to accordion events
294
- wrapper.vm.$root.$emit(ROOT_EVENT_NAME_ACCORDION, 'nottest', 'foo')
295
- await waitNT(wrapper.vm)
296
- await waitRAF()
297
- await waitNT(wrapper.vm)
298
- await waitRAF()
299
-
300
- expect(wrapper.emitted('input').length).toBe(2)
301
- expect(wrapper.emitted('input')[1][0]).toBe(false)
302
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_STATE).length).toBe(2)
303
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_STATE)[1][0]).toBe('test') // ID
304
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_STATE)[1][1]).toBe(false) // Visible state
305
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_ACCORDION).length).toBe(3) // The event we just emitted
306
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_ACCORDION)[2][0]).toBe('nottest')
307
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_ACCORDION)[2][1]).toBe('foo')
308
- expect(wrapper.element.style.display).toEqual('none')
309
-
310
- // Toggling this closed collapse emits accordion event
311
- wrapper.vm.$root.$emit(ROOT_ACTION_EVENT_NAME_TOGGLE, 'test')
312
- await waitNT(wrapper.vm)
313
- await waitRAF()
314
- await waitNT(wrapper.vm)
315
- await waitRAF()
316
-
317
- expect(wrapper.emitted('input').length).toBe(3)
318
- expect(wrapper.emitted('input')[2][0]).toBe(true)
319
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_STATE).length).toBe(3)
320
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_STATE)[2][0]).toBe('test') // ID
321
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_STATE)[2][1]).toBe(true) // Visible state
322
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_ACCORDION).length).toBe(4) // The event emitted by collapse
323
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_ACCORDION)[3][0]).toBe('test')
324
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_ACCORDION)[3][1]).toBe('foo')
325
- expect(wrapper.element.style.display).toEqual('')
326
-
327
- // Toggling this open collapse to be closed
328
- wrapper.vm.$root.$emit(ROOT_ACTION_EVENT_NAME_TOGGLE, 'test')
329
- await waitNT(wrapper.vm)
330
- await waitRAF()
331
- await waitNT(wrapper.vm)
332
- await waitRAF()
333
- expect(wrapper.element.style.display).toEqual('none')
334
-
335
- // Should respond to accordion events targeting this ID when closed
336
- wrapper.vm.$root.$emit(ROOT_EVENT_NAME_ACCORDION, 'test', 'foo')
337
- await waitNT(wrapper.vm)
338
- await waitRAF()
339
- await waitNT(wrapper.vm)
340
- await waitRAF()
341
- expect(wrapper.element.style.display).toEqual('')
342
-
343
- wrapper.destroy()
344
- })
345
-
346
- it('should not respond to root toggle event that does not match ID', async () => {
347
- const wrapper = mount(BCollapse, {
348
- attachTo: document.body,
349
- propsData: {
350
- // 'id' is a required prop
351
- id: 'test'
352
- },
353
- slots: {
354
- default: '<div>foobar</div>'
355
- }
356
- })
357
- // const rootWrapper = createWrapper(wrapper.vm.$root)
358
- expect(wrapper.vm).toBeDefined()
359
- await waitNT(wrapper.vm)
360
- await waitRAF()
361
- expect(wrapper.classes()).not.toContain('show')
362
- expect(wrapper.element.style.display).toEqual('none')
363
-
364
- // Emit root event with different ID
365
- wrapper.vm.$root.$emit(ROOT_ACTION_EVENT_NAME_TOGGLE, 'not-test')
366
- await waitNT(wrapper.vm)
367
- await waitRAF()
368
- await waitNT(wrapper.vm)
369
- await waitRAF()
370
- expect(wrapper.classes()).not.toContain('show')
371
- expect(wrapper.element.style.display).toEqual('none')
372
-
373
- wrapper.destroy()
374
- })
375
-
376
- it('default slot scope works', async () => {
377
- let scope = null
378
- const wrapper = mount(BCollapse, {
379
- attachTo: document.body,
380
- propsData: {
381
- // 'id' is a required prop
382
- id: 'test',
383
- visible: true
384
- },
385
- scopedSlots: {
386
- default(props) {
387
- scope = props
388
- return this.$createElement('div', 'foobar')
389
- }
390
- }
391
- })
392
- const rootWrapper = createWrapper(wrapper.vm.$root)
393
- await waitNT(wrapper.vm)
394
- await waitRAF()
395
- expect(wrapper.element.style.display).toEqual('')
396
- expect(wrapper.emitted('show')).toBeUndefined() // Does not emit show when initially visible
397
- expect(wrapper.emitted('input')).toBeDefined()
398
- expect(wrapper.emitted('input').length).toBe(1)
399
- expect(wrapper.emitted('input')[0][0]).toBe(true)
400
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_ACCORDION)).toBeUndefined()
401
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_STATE)).toBeDefined()
402
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_STATE).length).toBe(1)
403
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_STATE)[0][0]).toBe('test') // ID
404
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_STATE)[0][1]).toBe(true) // Visible state
405
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_SYNC_STATE)).toBeUndefined()
406
-
407
- expect(scope).not.toBe(null)
408
- expect(scope.visible).toBe(true)
409
- expect(typeof scope.close).toBe('function')
410
-
411
- scope.close()
412
- await waitNT(wrapper.vm)
413
- await waitRAF()
414
-
415
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_SYNC_STATE)).toBeDefined()
416
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_SYNC_STATE).length).toBe(2)
417
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_SYNC_STATE)[1][0]).toBe('test') // ID
418
- expect(rootWrapper.emitted(ROOT_EVENT_NAME_SYNC_STATE)[1][1]).toBe(false) // Visible state
419
-
420
- expect(scope).not.toBe(null)
421
- expect(scope.visible).toBe(false)
422
- expect(typeof scope.close).toBe('function')
423
-
424
- wrapper.destroy()
425
- })
426
- })
@@ -1,88 +0,0 @@
1
- // Generic collapse transion helper component
2
- //
3
- // Note:
4
- // Applies the classes `collapse`, `show` and `collapsing`
5
- // during the enter/leave transition phases only
6
- // Although it appears that Vue may be leaving the classes
7
- // in-place after the transition completes
8
- import { extend, mergeData } from '../../../vue'
9
- import { NAME_COLLAPSE_HELPER } from '../../../constants/components'
10
- import { PROP_TYPE_BOOLEAN } from '../../../constants/props'
11
- import { getBCR, reflow, removeStyle, requestAF, setStyle } from '../../../utils/dom'
12
- import { makeProp } from '../../../utils/props'
13
-
14
- // --- Helper methods ---
15
-
16
- // Transition event handler helpers
17
- const onEnter = el => {
18
- setStyle(el, 'height', 0)
19
- // In a `requestAF()` for `appear` to work
20
- requestAF(() => {
21
- reflow(el)
22
- setStyle(el, 'height', `${el.scrollHeight}px`)
23
- })
24
- }
25
-
26
- const onAfterEnter = el => {
27
- removeStyle(el, 'height')
28
- }
29
-
30
- const onLeave = el => {
31
- setStyle(el, 'height', 'auto')
32
- setStyle(el, 'display', 'block')
33
- setStyle(el, 'height', `${getBCR(el).height}px`)
34
- reflow(el)
35
- setStyle(el, 'height', 0)
36
- }
37
-
38
- const onAfterLeave = el => {
39
- removeStyle(el, 'height')
40
- }
41
-
42
- // --- Constants ---
43
-
44
- // Default transition props
45
- // `appear` will use the enter classes
46
- const TRANSITION_PROPS = {
47
- css: true,
48
- enterClass: '',
49
- enterActiveClass: 'collapsing',
50
- enterToClass: 'collapse show',
51
- leaveClass: 'collapse show',
52
- leaveActiveClass: 'collapsing',
53
- leaveToClass: 'collapse'
54
- }
55
-
56
- // Default transition handlers
57
- // `appear` will use the enter handlers
58
- const TRANSITION_HANDLERS = {
59
- enter: onEnter,
60
- afterEnter: onAfterEnter,
61
- leave: onLeave,
62
- afterLeave: onAfterLeave
63
- }
64
-
65
- // --- Main component ---
66
-
67
- export const props = {
68
- // // If `true` (and `visible` is `true` on mount), animate initially visible
69
- appear: makeProp(PROP_TYPE_BOOLEAN, false)
70
- }
71
-
72
- // --- Main component ---
73
-
74
- // @vue/component
75
- export const BVCollapse = /*#__PURE__*/ extend({
76
- name: NAME_COLLAPSE_HELPER,
77
- functional: true,
78
- props,
79
- render(h, { props, data, children }) {
80
- return h(
81
- 'transition',
82
- // We merge in the `appear` prop last
83
- mergeData(data, { props: TRANSITION_PROPS, on: TRANSITION_HANDLERS }, { props }),
84
- // Note: `<transition>` supports a single root element only
85
- children
86
- )
87
- }
88
- })
@@ -1,3 +0,0 @@
1
- import { BCollapse } from './collapse'
2
-
3
- export { BCollapse }
@@ -1,104 +0,0 @@
1
- {
2
- "name": "@bootstrap-vue/collapse",
3
- "version": "1.0.0",
4
- "meta": {
5
- "title": "Collapse",
6
- "description": "Easily toggle content visibility on your pages. Includes support for making accordions.",
7
- "components": [
8
- {
9
- "component": "BCollapse",
10
- "props": [
11
- {
12
- "prop": "accordion",
13
- "description": "The name of the accordion group that this collapse belongs to"
14
- },
15
- {
16
- "prop": "appear",
17
- "version": "2.2.0",
18
- "description": "When set, and prop 'visible' is true on mount, will animate on initial mount"
19
- },
20
- {
21
- "prop": "visible",
22
- "description": "When 'true', expands the collapse"
23
- }
24
- ],
25
- "slots": [
26
- {
27
- "name": "default",
28
- "version": "2.2.0",
29
- "scope": [
30
- {
31
- "prop": "close",
32
- "type": "Function",
33
- "description": "Method for closing the collapse"
34
- },
35
- {
36
- "prop": "visible",
37
- "type": "Boolean",
38
- "description": "Visible state of the collapse. `true` if the collapse is visible"
39
- }
40
- ]
41
- }
42
- ],
43
- "events": [
44
- {
45
- "event": "bv::collapse::state",
46
- "description": "Emitted on $root when collapse has changed its state",
47
- "args": [
48
- {
49
- "arg": "id",
50
- "type": "String",
51
- "description": "Changed state collapse ID"
52
- },
53
- {
54
- "arg": "state",
55
- "type": "Boolean",
56
- "description": "`true` or `false`, i.e. opened or closed"
57
- }
58
- ]
59
- },
60
- {
61
- "event": "hidden",
62
- "description": "Emitted when collapse has finished closing"
63
- },
64
- {
65
- "event": "hide",
66
- "description": "Emitted when collapse has started to close"
67
- },
68
- {
69
- "event": "input",
70
- "description": "Used to update the v-model",
71
- "args": [
72
- {
73
- "arg": "visible",
74
- "type": "Boolean",
75
- "description": "Will be true if the collapse is visible"
76
- }
77
- ]
78
- },
79
- {
80
- "event": "show",
81
- "description": "Emitted when collapse has started to open"
82
- },
83
- {
84
- "event": "shown",
85
- "description": "Emitted when collapse has finished opening"
86
- }
87
- ],
88
- "rootEventListeners": [
89
- {
90
- "event": "bv::toggle::collapse",
91
- "description": "Toggles visible state of collapse with specified ID when this event is emitted on $root",
92
- "args": [
93
- {
94
- "arg": "id",
95
- "type": "String",
96
- "description": "Collapse ID to toggle"
97
- }
98
- ]
99
- }
100
- ]
101
- }
102
- ]
103
- }
104
- }