diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-07-28 12:11:43 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-07-28 12:11:43 +0300 |
commit | c00c766f13d6e0291831a25434eb54057708cc47 (patch) | |
tree | b1db8dd9d5b109486f107be231dc0edb82457d61 /app/assets/javascripts/vue_shared/components | |
parent | 99f384810fcb98be5dc45c22552eb80a76021387 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/vue_shared/components')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/page_size_selector.vue | 37 |
1 files changed, 21 insertions, 16 deletions
diff --git a/app/assets/javascripts/vue_shared/components/page_size_selector.vue b/app/assets/javascripts/vue_shared/components/page_size_selector.vue index 9783946b786..5c097220d23 100644 --- a/app/assets/javascripts/vue_shared/components/page_size_selector.vue +++ b/app/assets/javascripts/vue_shared/components/page_size_selector.vue @@ -1,37 +1,42 @@ <script> -import { GlDropdown, GlDropdownItem } from '@gitlab/ui'; -import { s__, sprintf } from '~/locale'; +import { GlCollapsibleListbox } from '@gitlab/ui'; +import { n__ } from '~/locale'; -export const PAGE_SIZES = [20, 50, 100]; +export const PAGE_SIZES = [20, 50, 100].map((value) => ({ + value, + text: n__('SecurityReports|Show %d item', 'SecurityReports|Show %d items', value), +})); export default { - components: { GlDropdown, GlDropdownItem }, + components: { GlCollapsibleListbox }, props: { value: { type: Number, required: true, }, }, + computed: { + selectedItem() { + return PAGE_SIZES.find(({ value }) => value === this.value); + }, + toggleText() { + return this.selectedItem.text; + }, + }, methods: { emitInput(pageSize) { this.$emit('input', pageSize); }, - getPageSizeText(pageSize) { - return sprintf(s__('SecurityReports|Show %{pageSize} items'), { pageSize }); - }, }, PAGE_SIZES, }; </script> <template> - <gl-dropdown :text="getPageSizeText(value)" right menu-class="gl-w-auto! gl-min-w-0"> - <gl-dropdown-item - v-for="pageSize in $options.PAGE_SIZES" - :key="pageSize" - @click="emitInput(pageSize)" - > - <span class="gl-white-space-nowrap">{{ getPageSizeText(pageSize) }}</span> - </gl-dropdown-item> - </gl-dropdown> + <gl-collapsible-listbox + :toggle-text="toggleText" + :items="$options.PAGE_SIZES" + :selected="value" + @select="emitInput($event)" + /> </template> |