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

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

152 lines
3.1 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
2019-12-21 20:55:43 +05:30
* title="Copy"
2018-10-15 14:42:47 +05:30
* text="Content to be copied"
* css-class="btn-transparent"
* />
*/
2021-01-03 14:25:43 +05:30
import { GlButton, GlTooltipDirective } from '@gitlab/ui';
2022-03-02 08:16:31 +05:30
import { uniqueId } from 'lodash';
import { __ } from '~/locale';
import {
CLIPBOARD_SUCCESS_EVENT,
CLIPBOARD_ERROR_EVENT,
I18N_ERROR_MESSAGE,
} from '~/behaviors/copy_to_clipboard';
2018-03-17 18:26:18 +05:30
2018-10-15 14:42:47 +05:30
export default {
name: 'ClipboardButton',
2022-03-02 08:16:31 +05:30
i18n: {
copied: __('Copied'),
error: I18N_ERROR_MESSAGE,
},
CLIPBOARD_SUCCESS_EVENT,
CLIPBOARD_ERROR_EVENT,
2018-10-15 14:42:47 +05:30
directives: {
2019-02-15 15:39:39 +05:30
GlTooltip: GlTooltipDirective,
2018-10-15 14:42:47 +05:30
},
2018-11-18 11:00:15 +05:30
components: {
2021-01-03 14:25:43 +05:30
GlButton,
2018-11-18 11:00:15 +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,
},
2021-04-17 20:07:23 +05:30
tooltipBoundary: {
type: String,
required: false,
default: null,
},
2018-10-15 14:42:47 +05:30
cssClass: {
type: String,
required: false,
2021-01-03 14:25:43 +05:30
default: null,
},
category: {
type: String,
required: false,
default: 'secondary',
},
size: {
type: String,
required: false,
default: 'medium',
2018-10-15 14:42:47 +05:30
},
2022-01-26 12:08:38 +05:30
variant: {
type: String,
required: false,
default: 'default',
},
2018-10-15 14:42:47 +05:30
},
2022-03-02 08:16:31 +05:30
data() {
return {
localTitle: this.title,
titleTimeout: null,
id: null,
};
},
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;
},
2022-03-02 08:16:31 +05:30
tooltipDirectiveOptions() {
return {
placement: this.tooltipPlacement,
container: this.tooltipContainer,
boundary: this.tooltipBoundary,
};
},
},
created() {
this.id = uniqueId('clipboard-button-');
},
methods: {
updateTooltip(title) {
this.localTitle = title;
this.$root.$emit('bv::show::tooltip', this.id);
clearTimeout(this.titleTimeout);
this.titleTimeout = setTimeout(() => {
this.localTitle = this.title;
this.$root.$emit('bv::hide::tooltip', this.id);
}, 1000);
},
2018-11-18 11:00:15 +05:30
},
2018-10-15 14:42:47 +05:30
};
2018-03-17 18:26:18 +05:30
</script>
<template>
2021-01-03 14:25:43 +05:30
<gl-button
2022-03-02 08:16:31 +05:30
:id="id"
ref="copyButton"
v-gl-tooltip.hover.focus.click.viewport="tooltipDirectiveOptions"
2018-03-27 19:54:05 +05:30
:class="cssClass"
2022-03-02 08:16:31 +05:30
:title="localTitle"
2018-11-18 11:00:15 +05:30
:data-clipboard-text="clipboardText"
2022-03-02 08:16:31 +05:30
data-clipboard-handle-tooltip="false"
2021-01-03 14:25:43 +05:30
:category="category"
:size="size"
icon="copy-to-clipboard"
2022-01-26 12:08:38 +05:30
:variant="variant"
2022-03-02 08:16:31 +05:30
:aria-label="localTitle"
aria-live="polite"
@[$options.CLIPBOARD_SUCCESS_EVENT]="updateTooltip($options.i18n.copied)"
@[$options.CLIPBOARD_ERROR_EVENT]="updateTooltip($options.i18n.error)"
2021-02-22 17:27:13 +05:30
v-on="$listeners"
>
<slot></slot>
</gl-button>
2018-03-17 18:26:18 +05:30
</template>