debian-mirror-gitlab/app/assets/javascripts/vue_shared/components/clipboard_button.vue

78 lines
1.5 KiB
Vue
Raw Normal View History

2018-03-17 18:26:18 +05:30
<script>
2018-10-15 14:42:47 +05:30
/**
* Falls back to the code used in `copy_to_clipboard.js`
*
* Renders a button with a clipboard icon that copies the content of `data-clipboard-text`
* when clicked.
*
* @example
* <clipboard-button
* title="Copy to clipbard"
* text="Content to be copied"
* css-class="btn-transparent"
* />
*/
2018-12-23 12:14:25 +05:30
import { GlButton, GlTooltipDirective } from '@gitlab/ui';
2018-11-18 11:00:15 +05:30
import Icon from '../components/icon.vue';
2018-03-17 18:26:18 +05:30
2018-10-15 14:42:47 +05:30
export default {
name: 'ClipboardButton',
directives: {
2018-12-23 12:14:25 +05:30
GlTooltip: GlTooltipDirective,
2018-10-15 14:42:47 +05:30
},
2018-11-18 11:00:15 +05:30
components: {
2018-12-23 12:14:25 +05:30
GlButton,
2018-11-18 11:00:15 +05:30
Icon,
},
2018-10-15 14:42:47 +05:30
props: {
text: {
type: String,
required: true,
2018-03-17 18:26:18 +05:30
},
2018-11-18 11:00:15 +05:30
gfm: {
type: String,
required: false,
default: null,
},
2018-10-15 14:42:47 +05:30
title: {
type: String,
required: true,
2018-03-17 18:26:18 +05:30
},
2018-10-15 14:42:47 +05:30
tooltipPlacement: {
type: String,
required: false,
default: 'top',
},
tooltipContainer: {
type: [String, Boolean],
required: false,
default: false,
},
cssClass: {
type: String,
required: false,
default: 'btn-default',
},
},
2018-11-18 11:00:15 +05:30
computed: {
clipboardText() {
if (this.gfm !== null) {
return JSON.stringify({ text: this.text, gfm: this.gfm });
}
return this.text;
},
},
2018-10-15 14:42:47 +05:30
};
2018-03-17 18:26:18 +05:30
</script>
<template>
2018-12-23 12:14:25 +05:30
<gl-button
v-gl-tooltip="{ placement: tooltipPlacement, container: tooltipContainer }"
2018-03-27 19:54:05 +05:30
:class="cssClass"
2018-03-17 18:26:18 +05:30
:title="title"
2018-11-18 11:00:15 +05:30
:data-clipboard-text="clipboardText"
2018-03-17 18:26:18 +05:30
>
2018-11-18 11:00:15 +05:30
<icon name="duplicate" />
2018-12-23 12:14:25 +05:30
</gl-button>
2018-03-17 18:26:18 +05:30
</template>