98 lines
1.9 KiB
Vue
98 lines
1.9 KiB
Vue
<template>
|
|
<div>
|
|
<n8n-input-label :label="label">
|
|
<div :class="$style.copyText" @click="copy">
|
|
<span>{{ copyContent }}</span>
|
|
<div :class="$style.copyButton"><span>{{ copyButtonText }}</span></div>
|
|
</div>
|
|
</n8n-input-label>
|
|
<div :class="$style.subtitle">{{ subtitle }}</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import mixins from 'vue-typed-mixins';
|
|
import { copyPaste } from './mixins/copyPaste';
|
|
import { showMessage } from './mixins/showMessage';
|
|
|
|
export default mixins(copyPaste, showMessage).extend({
|
|
props: {
|
|
label: {
|
|
type: String,
|
|
},
|
|
subtitle: {
|
|
type: String,
|
|
},
|
|
copyContent: {
|
|
type: String,
|
|
},
|
|
copyButtonText: {
|
|
type: String,
|
|
},
|
|
successMessage: {
|
|
type: String,
|
|
},
|
|
},
|
|
methods: {
|
|
copy(): void {
|
|
this.copyToClipboard(this.$props.copyContent);
|
|
|
|
this.$showMessage({
|
|
title: this.$locale.baseText('credentialsEdit.showMessage.title'),
|
|
message: this.$props.successMessage,
|
|
type: 'success',
|
|
});
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" module>
|
|
|
|
.copyText {
|
|
span {
|
|
font-family: Monaco, Consolas;
|
|
line-height: 1.5;
|
|
font-size: var(--font-size-s);
|
|
}
|
|
|
|
padding: var(--spacing-xs);
|
|
background-color: var(--color-background-light);
|
|
border: var(--border-base);
|
|
border-radius: var(--border-radius-base);
|
|
cursor: pointer;
|
|
position: relative;
|
|
font-weight: var(--font-weight-regular);
|
|
|
|
&:hover {
|
|
--display-copy-button: flex;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.copyButton {
|
|
display: var(--display-copy-button, none);
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
padding: var(--spacing-xs);
|
|
background-color: var(--color-background-light);
|
|
height: 100%;
|
|
align-items: center;
|
|
border-radius: var(--border-radius-base);
|
|
|
|
span {
|
|
font-family: unset;
|
|
}
|
|
}
|
|
|
|
.subtitle {
|
|
margin-top: var(--spacing-2xs);
|
|
font-size: var(--font-size-2xs);
|
|
line-height: var(--font-line-height-loose);
|
|
font-weight: var(--font-weight-regular);
|
|
word-break: normal;
|
|
}
|
|
|
|
</style>
|