diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/segmented_control_button_group.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/segmented_control_button_group.vue | 35 |
1 files changed, 35 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/segmented_control_button_group.vue b/app/assets/javascripts/vue_shared/components/segmented_control_button_group.vue new file mode 100644 index 00000000000..f50706b6de8 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/segmented_control_button_group.vue @@ -0,0 +1,35 @@ +<script> +import { GlButtonGroup, GlButton } from '@gitlab/ui'; + +// TODO: We're planning to move this component to GitLab UI +// https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1787 +export default { + components: { + GlButtonGroup, + GlButton, + }, + props: { + options: { + type: Array, + required: true, + }, + value: { + type: [String, Number, Boolean], + required: true, + }, + }, +}; +</script> +<template> + <gl-button-group> + <gl-button + v-for="opt in options" + :key="opt.value" + :disabled="!!opt.disabled" + :selected="value === opt.value" + @click="$emit('input', opt.value)" + > + <slot name="button-content" v-bind="opt">{{ opt.text }}</slot> + </gl-button> + </gl-button-group> +</template> |