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

84 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"
* />
*/
2019-01-03 12:48:30 +05:30
import tooltip from '../directives/tooltip';
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',
2019-01-03 12:48:30 +05:30
2018-10-15 14:42:47 +05:30
directives: {
2019-01-03 12:48:30 +05:30
tooltip,
2018-10-15 14:42:47 +05:30
},
2019-01-03 12:48:30 +05:30
2018-11-18 11:00:15 +05:30
components: {
Icon,
},
2019-01-03 12:48:30 +05:30
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>
2019-01-03 12:48:30 +05:30
<button
v-tooltip
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"
2019-01-03 12:48:30 +05:30
:data-container="tooltipContainer"
:data-placement="tooltipPlacement"
type="button"
class="btn"
2018-03-17 18:26:18 +05:30
>
2018-11-18 11:00:15 +05:30
<icon name="duplicate" />
2019-01-03 12:48:30 +05:30
</button>
2018-03-17 18:26:18 +05:30
</template>