Skip to content
Snippets Groups Projects

Add simple dropdown component and change severity filter to use it

5 unresolved threads
6 files
+ 445
184
Compare changes
  • Side-by-side
  • Inline
Files
6
 
<script>
 
import { GlDropdown } from '@gitlab/ui';
 
import DropdownButtonText from './dropdown_button_text.vue';
 
 
export default {
 
components: { GlDropdown, DropdownButtonText },
 
props: {
 
label: {
 
type: String,
 
required: true,
 
},
 
selectedTexts: {
 
type: Array,
 
required: true,
 
},
 
loading: {
 
type: Boolean,
 
required: false,
 
default: false,
 
},
 
},
 
computed: {
 
qaSelector() {
 
return `filter_${this.label.toLowerCase().replace(' ', '_')}_dropdown`;
 
},
 
},
 
};
 
</script>
 
 
<template>
 
<div>
 
<label class="gl-mb-2">{{ label }}</label>
 
<gl-dropdown
 
:header-text="label"
 
:loading="loading"
 
block
 
toggle-class="gl-mb-0"
 
@show="$emit('show')"
 
>
 
<template #button-text>
 
<dropdown-button-text :items="selectedTexts" :data-qa-selector="qaSelector" />
 
</template>
 
 
<template #header>
 
<slot name="header"></slot>
 
</template>
 
 
<template #highlighted-items>
 
<slot name="highlighted-items"></slot>
 
</template>
 
 
<slot></slot>
 
</gl-dropdown>
 
</div>
 
</template>
Loading