Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | <script> import { GlButton } from '@gitlab/ui'; import { __ } from '~/locale'; export default { components: { GlButton, }, props: { title: { type: String, required: true, }, isLoading: { type: Boolean, required: false, default: false, }, hasError: { type: Boolean, required: false, default: false, }, }, data() { return { isCollapsed: true, }; }, computed: { arrowIconName() { return this.isCollapsed ? 'chevron-right' : 'chevron-down'; }, ariaLabel() { return this.isCollapsed ? __('Expand') : __('Collapse'); }, }, methods: { toggleCollapsed() { this.isCollapsed = !this.isCollapsed; }, }, }; </script> <template> <div class="mr-widget-extension"> <div class="d-flex gl-align-items-center pl-3 gl-py-3"> <div v-if="hasError" class="ci-widget media"> <div class="media-body"> <span class="gl-font-sm gl-ml-7 gl-line-height-24 js-error-state"> {{ title }} </span> </div> </div> <template v-else> <gl-button class="gl-mr-3" size="small" :aria-label="ariaLabel" :loading="isLoading" :icon="arrowIconName" category="tertiary" @click="toggleCollapsed" /> <template v-if="isCollapsed"> <slot name="header"></slot> <gl-button category="tertiary" variant="confirm" size="small" data-testid="mr-collapsible-title" :disabled="isLoading" :class="{ 'border-0': isLoading }" @click="toggleCollapsed" > {{ title }} </gl-button> </template> <gl-button v-else category="tertiary" variant="confirm" size="small" data-testid="mr-collapsible-title" :disabled="isLoading" :class="{ 'border-0': isLoading }" @click="toggleCollapsed" >{{ __('Collapse') }}</gl-button > </template> </div> <div v-if="!isCollapsed" class="border-top js-slot-container"> <slot></slot> </div> </div> </template> |