@gitlab/ui
Version:
GitLab UI Components
101 lines (90 loc) • 2.66 kB
JavaScript
import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
import GlButton from '../../base/button/button';
import { translate } from '../../../utils/i18n';
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
var script = {
name: 'ClipboardButton',
components: {
GlButton
},
directives: {
GlTooltip: GlTooltipDirective
},
props: {
/**
* The text to copy to clipboard
*/
text: {
type: String,
required: true
},
/**
* The tooltip text shown on hover
*/
title: {
type: String,
required: false,
default: () => translate('ClipboardButton.title', 'Copy to clipboard')
},
/**
* Button size
*/
size: {
type: String,
required: false,
default: 'medium'
}
},
data() {
return {
localTitle: this.title,
titleTimeout: null
};
},
methods: {
updateTooltip(title) {
this.localTitle = title;
clearTimeout(this.titleTimeout);
this.titleTimeout = setTimeout(() => {
this.localTitle = this.title;
}, 1000);
},
async handleClick() {
try {
await navigator.clipboard.writeText(this.text);
this.updateTooltip(translate('ClipboardButton.copied', 'Copied'));
} catch {
this.updateTooltip(translate('ClipboardButton.error', 'Copy failed'));
}
}
}
};
/* script */
const __vue_script__ = script;
/* template */
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip.hover.focus.top",modifiers:{"hover":true,"focus":true,"top":true}}],attrs:{"variant":"default","category":"tertiary","icon":"copy-to-clipboard","size":_vm.size,"title":_vm.localTitle,"aria-label":_vm.localTitle},on:{"click":_vm.handleClick}})};
var __vue_staticRenderFns__ = [];
/* style */
const __vue_inject_styles__ = undefined;
/* scoped */
const __vue_scope_id__ = undefined;
/* module identifier */
const __vue_module_identifier__ = undefined;
/* functional template */
const __vue_is_functional_template__ = false;
/* style inject */
/* style inject SSR */
/* style inject shadow dom */
const __vue_component__ = /*#__PURE__*/__vue_normalize__(
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
__vue_inject_styles__,
__vue_script__,
__vue_scope_id__,
__vue_is_functional_template__,
__vue_module_identifier__,
false,
undefined,
undefined,
undefined
);
export { __vue_component__ as default };