2017-09-15 13:10:08 +00:00
|
|
|
<script>
|
2018-04-19 14:36:37 +00:00
|
|
|
/**
|
|
|
|
* 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
|
2019-10-09 12:06:13 +00:00
|
|
|
* title="Copy"
|
2018-04-19 14:36:37 +00:00
|
|
|
* text="Content to be copied"
|
|
|
|
* css-class="btn-transparent"
|
|
|
|
* />
|
|
|
|
*/
|
2020-04-03 09:09:31 +00:00
|
|
|
import { GlDeprecatedButton, GlTooltipDirective, GlIcon } from '@gitlab/ui';
|
2017-09-15 16:05:46 +00:00
|
|
|
|
2018-04-19 14:36:37 +00:00
|
|
|
export default {
|
|
|
|
name: 'ClipboardButton',
|
|
|
|
directives: {
|
2018-11-08 18:09:18 +00:00
|
|
|
GlTooltip: GlTooltipDirective,
|
2018-04-19 14:36:37 +00:00
|
|
|
},
|
2018-07-23 14:58:21 +00:00
|
|
|
components: {
|
2020-04-03 09:09:31 +00:00
|
|
|
GlDeprecatedButton,
|
2020-01-31 15:08:42 +00:00
|
|
|
GlIcon,
|
2018-07-23 14:58:21 +00:00
|
|
|
},
|
2018-04-19 14:36:37 +00:00
|
|
|
props: {
|
|
|
|
text: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
2018-01-10 13:24:00 +00:00
|
|
|
},
|
2018-07-30 13:37:28 +00:00
|
|
|
gfm: {
|
|
|
|
type: String,
|
|
|
|
required: false,
|
|
|
|
default: null,
|
|
|
|
},
|
2018-04-19 14:36:37 +00:00
|
|
|
title: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
2017-09-15 13:10:08 +00:00
|
|
|
},
|
2018-04-19 14:36:37 +00:00
|
|
|
tooltipPlacement: {
|
|
|
|
type: String,
|
|
|
|
required: false,
|
|
|
|
default: 'top',
|
|
|
|
},
|
|
|
|
tooltipContainer: {
|
|
|
|
type: [String, Boolean],
|
|
|
|
required: false,
|
|
|
|
default: false,
|
|
|
|
},
|
|
|
|
cssClass: {
|
|
|
|
type: String,
|
|
|
|
required: false,
|
|
|
|
default: 'btn-default',
|
|
|
|
},
|
|
|
|
},
|
2018-07-30 13:37:28 +00:00
|
|
|
computed: {
|
|
|
|
clipboardText() {
|
|
|
|
if (this.gfm !== null) {
|
|
|
|
return JSON.stringify({ text: this.text, gfm: this.gfm });
|
|
|
|
}
|
|
|
|
return this.text;
|
|
|
|
},
|
|
|
|
},
|
2018-04-19 14:36:37 +00:00
|
|
|
};
|
2017-09-15 13:10:08 +00:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
2020-04-03 09:09:31 +00:00
|
|
|
<gl-deprecated-button
|
2018-11-08 18:09:18 +00:00
|
|
|
v-gl-tooltip="{ placement: tooltipPlacement, container: tooltipContainer }"
|
2020-04-28 18:09:35 +00:00
|
|
|
v-gl-tooltip.hover.blur
|
2018-02-19 14:03:41 +00:00
|
|
|
:class="cssClass"
|
2018-01-10 13:24:00 +00:00
|
|
|
:title="title"
|
2018-07-30 13:37:28 +00:00
|
|
|
:data-clipboard-text="clipboardText"
|
2018-01-05 00:18:35 +00:00
|
|
|
>
|
2020-01-31 15:08:42 +00:00
|
|
|
<gl-icon name="copy-to-clipboard" />
|
2020-04-03 09:09:31 +00:00
|
|
|
</gl-deprecated-button>
|
2017-09-15 13:10:08 +00:00
|
|
|
</template>
|