@@ -7,8 +7,15 @@ import sqlHljs from 'highlight.js/lib/languages/sql';
7
7
import xmlHljs from ' highlight.js/lib/languages/xml' ;
8
8
import yamlHljs from ' highlight.js/lib/languages/yaml' ;
9
9
import iniHljs from ' highlight.js/lib/languages/ini' ;
10
+ import bashHljs from ' highlight.js/lib/languages/bash' ;
10
11
import markdownHljs from ' highlight.js/lib/languages/markdown' ;
12
+ import jsHljs from ' highlight.js/lib/languages/javascript' ;
13
+ import cssHljs from ' highlight.js/lib/languages/css' ;
14
+ import goHljs from ' highlight.js/lib/languages/go' ;
15
+ import csharpHljs from ' highlight.js/lib/languages/csharp' ;
16
+ import { Base64 } from ' js-base64' ;
11
17
import { useCopy } from ' @/composable/copy' ;
18
+ import { useDownloadFileFromBase64 } from ' @/composable/downloadBase64' ;
12
19
13
20
const props = withDefaults (
14
21
defineProps <{
@@ -18,12 +25,16 @@ const props = withDefaults(
18
25
copyPlacement? : ' top-right' | ' bottom-right' | ' outside' | ' none'
19
26
copyMessage? : string
20
27
wordWrap? : boolean
28
+ downloadFileName? : string
29
+ downloadButtonText? : string
21
30
}>(),
22
31
{
23
32
followHeightOf: null ,
24
33
language: ' txt' ,
25
34
copyPlacement: ' top-right' ,
26
35
copyMessage: ' Copy to clipboard' ,
36
+ downloadFileName: ' ' ,
37
+ downloadButtonText: ' Download' ,
27
38
},
28
39
);
29
40
hljs .registerLanguage (' sql' , sqlHljs );
@@ -32,13 +43,25 @@ hljs.registerLanguage('html', xmlHljs);
32
43
hljs .registerLanguage (' xml' , xmlHljs );
33
44
hljs .registerLanguage (' yaml' , yamlHljs );
34
45
hljs .registerLanguage (' toml' , iniHljs );
46
+ hljs .registerLanguage (' bash' , bashHljs );
35
47
hljs .registerLanguage (' markdown' , markdownHljs );
48
+ hljs .registerLanguage (' css' , cssHljs );
49
+ hljs .registerLanguage (' javascript' , jsHljs );
50
+ hljs .registerLanguage (' go' , goHljs );
51
+ hljs .registerLanguage (' csharp' , csharpHljs );
36
52
37
- const { value, language, followHeightOf, copyPlacement, copyMessage } = toRefs (props );
53
+ const { value, language, followHeightOf, copyPlacement, copyMessage, downloadFileName, downloadButtonText } = toRefs (props );
38
54
const { height } = followHeightOf .value ? useElementSize (followHeightOf ) : { height: ref (null ) };
39
55
40
56
const { copy, isJustCopied } = useCopy ({ source: value , createToast: false });
41
57
const tooltipText = computed (() => isJustCopied .value ? ' Copied!' : copyMessage .value );
58
+
59
+ const valueBase64 = computed (() => Base64 .encode (value .value ));
60
+ const { download } = useDownloadFileFromBase64 (
61
+ {
62
+ source: valueBase64 ,
63
+ filename: downloadFileName ,
64
+ });
42
65
</script >
43
66
44
67
<template >
@@ -53,8 +76,13 @@ const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : copyMessage.
53
76
<n-code :code =" value" :language =" language" :word-wrap =" wordWrap" :trim =" false" data-test-id =" area-content" />
54
77
</n-config-provider >
55
78
</n-scrollbar >
56
- <div absolute right-10px top-10px >
57
- <c-tooltip v-if =" value" :tooltip =" tooltipText" position =" left" >
79
+ <div
80
+ v-if =" value && copyPlacement !== 'none'"
81
+ absolute right-10px
82
+ :top-10px =" copyPlacement === 'top-right' ? '' : 'no'"
83
+ :bottom-10px =" copyPlacement === 'bottom-right' ? '' : 'no'"
84
+ >
85
+ <c-tooltip v-if =" value && copyPlacement !== 'outside'" :tooltip =" tooltipText" position =" left" >
58
86
<c-button circle important:h-10 important:w-10 @click =" copy()" >
59
87
<n-icon size =" 22" :component =" Copy" />
60
88
</c-button >
@@ -66,6 +94,11 @@ const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : copyMessage.
66
94
{{ tooltipText }}
67
95
</c-button >
68
96
</div >
97
+ <div v-if =" downloadFileName !== '' && value !== ''" mt-5 flex justify-center >
98
+ <c-button secondary @click =" download" >
99
+ {{ downloadButtonText }}
100
+ </c-button >
101
+ </div >
69
102
</div >
70
103
</template >
71
104
0 commit comments