diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-09-16 21:09:47 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-09-16 21:09:47 +0300 |
commit | bf1600d157465f9408aace91073954fd5790c054 (patch) | |
tree | f317bb99330769c4eb37621c860af014810e554b /app/assets/javascripts/vue_shared/components/actions_button.vue | |
parent | 6de7d2c195a8a7fa5702cafa4365f7a9fcac37cd (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/actions_button.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/actions_button.vue | 90 |
1 files changed, 90 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/actions_button.vue b/app/assets/javascripts/vue_shared/components/actions_button.vue new file mode 100644 index 00000000000..f333ab49ead --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/actions_button.vue @@ -0,0 +1,90 @@ +<script> +import { + GlDropdown, + GlDropdownItem, + GlDropdownDivider, + GlLink, + GlTooltipDirective, +} from '@gitlab/ui'; + +export default { + components: { + GlDropdown, + GlDropdownItem, + GlDropdownDivider, + GlLink, + }, + directives: { + GlTooltip: GlTooltipDirective, + }, + props: { + actions: { + type: Array, + required: true, + }, + selectedKey: { + type: String, + required: false, + default: '', + }, + }, + computed: { + hasMultipleActions() { + return this.actions.length > 1; + }, + selectedAction() { + return this.actions.find(x => x.key === this.selectedKey) || this.actions[0]; + }, + }, + methods: { + handleItemClick(action) { + this.$emit('select', action.key); + }, + handleClick(action, evt) { + return action.handle?.(evt); + }, + }, +}; +</script> + +<template> + <gl-dropdown + v-if="hasMultipleActions" + v-gl-tooltip="selectedAction.tooltip" + class="gl-button-deprecated-adapter" + :text="selectedAction.text" + :split-href="selectedAction.href" + split + @click="handleClick(selectedAction, $event)" + > + <template slot="button-content"> + <span class="gl-new-dropdown-button-text" v-bind="selectedAction.attrs"> + {{ selectedAction.text }} + </span> + </template> + <template v-for="(action, index) in actions"> + <gl-dropdown-item + :key="action.key" + class="gl-dropdown-item-deprecated-adapter" + :is-check-item="true" + :is-checked="action.key === selectedAction.key" + :secondary-text="action.secondaryText" + :data-testid="`action_${action.key}`" + @click="handleItemClick(action)" + > + {{ action.text }} + </gl-dropdown-item> + <gl-dropdown-divider v-if="index != actions.length - 1" :key="action.key + '_divider'" /> + </template> + </gl-dropdown> + <gl-link + v-else-if="selectedAction" + v-gl-tooltip="selectedAction.tooltip" + v-bind="selectedAction.attrs" + class="btn" + :href="selectedAction.href" + @click="handleClick(selectedAction, $event)" + > + {{ selectedAction.text }} + </gl-link> +</template> |