comand-component-library 4.2.42 → 4.2.44
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/comand-component-library.js +1914 -1790
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/ComponentLibrary.vue +15 -0
- package/src/assets/data/listOfComponents.json +1 -0
- package/src/componentSettingsDataAndControls.vue +6 -0
- package/src/components/CmdCodeOutput.vue +106 -0
- package/src/components/CmdMultistepFormProgressBar.vue +1 -0
- package/src/index.js +1 -0
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
|
|
2
|
+
<template>
|
|
3
|
+
<div :class="['cmd-code-output', {box : styleAsBox}]" style="max-height: maxHeight">
|
|
4
|
+
<a v-if="allowCopyByClick" href="#" @click.prevent="copyToClipboard()" :title="cmdIcon.tooltip">
|
|
5
|
+
<!-- begin CmdIcon -->
|
|
6
|
+
<CmdIcon :iconClass="cmdIcon.iconClass" :type="cmdIcon.iconType"/>
|
|
7
|
+
<!-- end CmdIcon -->
|
|
8
|
+
</a>
|
|
9
|
+
<!-- begin preformatted code (keep in one line) -->
|
|
10
|
+
<pre v-if="preformatted"><code ref="code">
|
|
11
|
+
<slot></slot>
|
|
12
|
+
</code></pre>
|
|
13
|
+
<!-- end preformatted code (keep in one line) -->
|
|
14
|
+
|
|
15
|
+
<!-- begin unformatted code -->
|
|
16
|
+
<code v-else ref="code">
|
|
17
|
+
<!-- begin slot-content -->
|
|
18
|
+
<slot></slot>
|
|
19
|
+
<!-- end slot-content -->
|
|
20
|
+
</code>
|
|
21
|
+
<!-- end unformatted code -->
|
|
22
|
+
</div>
|
|
23
|
+
</template>
|
|
24
|
+
|
|
25
|
+
<script>
|
|
26
|
+
import { ref } from "vue"
|
|
27
|
+
|
|
28
|
+
export default {
|
|
29
|
+
name: "CmdCodeOutput",
|
|
30
|
+
props: {
|
|
31
|
+
/**
|
|
32
|
+
* preformat code (keeps spaces, tabs, and line breaks exactly as written)
|
|
33
|
+
*
|
|
34
|
+
* @affectsStyling: true
|
|
35
|
+
*/
|
|
36
|
+
preformatted: {
|
|
37
|
+
type: Boolean,
|
|
38
|
+
default: true
|
|
39
|
+
},
|
|
40
|
+
/**
|
|
41
|
+
* style component like a box
|
|
42
|
+
*
|
|
43
|
+
* @affectsStyling: true
|
|
44
|
+
*/
|
|
45
|
+
styleAsBox: {
|
|
46
|
+
type: Boolean,
|
|
47
|
+
default: true
|
|
48
|
+
},
|
|
49
|
+
/**
|
|
50
|
+
* enable if data can be copied by click on icon
|
|
51
|
+
*/
|
|
52
|
+
allowCopyByClick: {
|
|
53
|
+
type: Boolean,
|
|
54
|
+
default: true
|
|
55
|
+
},
|
|
56
|
+
/**
|
|
57
|
+
* set max-height (content will scroll vertically)
|
|
58
|
+
*/
|
|
59
|
+
maxHeight: {
|
|
60
|
+
type: String,
|
|
61
|
+
default: "20rem"
|
|
62
|
+
},
|
|
63
|
+
/**
|
|
64
|
+
* icon 'copy'
|
|
65
|
+
*
|
|
66
|
+
* @requiredForAccessibility: partial
|
|
67
|
+
*/
|
|
68
|
+
cmdIcon: {
|
|
69
|
+
type: Object,
|
|
70
|
+
default() {
|
|
71
|
+
return {
|
|
72
|
+
iconClass: "icon-file-copy",
|
|
73
|
+
tooltip: "Copy data to clipboard!",
|
|
74
|
+
iconType: "auto"
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
},
|
|
79
|
+
methods: {
|
|
80
|
+
copyToClipboard() {
|
|
81
|
+
// get data, remove spaces and copy to clipboard
|
|
82
|
+
const code = this.$refs.code
|
|
83
|
+
const output = code.innerText.replace(/\t/g, ' ')
|
|
84
|
+
navigator.clipboard.writeText(output)
|
|
85
|
+
alert(output + " was copied to clipboard")
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
</script>
|
|
90
|
+
|
|
91
|
+
<style>
|
|
92
|
+
.cmd-code-output {
|
|
93
|
+
overflow-y: scroll;
|
|
94
|
+
|
|
95
|
+
&.box {
|
|
96
|
+
padding-right: calc(var(--default-padding) * 3);
|
|
97
|
+
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
> a {
|
|
101
|
+
position: absolute;
|
|
102
|
+
top: var(--default-padding);
|
|
103
|
+
right: var(--default-padding);
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
</style>
|
package/src/index.js
CHANGED
|
@@ -6,6 +6,7 @@ export { default as CmdBasicForm } from '@/components/CmdBasicForm.vue'
|
|
|
6
6
|
export { default as CmdBox } from '@/components/CmdBox.vue'
|
|
7
7
|
export { default as CmdBoxWrapper } from '@/components/CmdBoxWrapper.vue'
|
|
8
8
|
export { default as CmdBreadcrumbs } from '@/components/CmdBreadcrumbs.vue'
|
|
9
|
+
export { default as CmdCodeOutput } from '@/components/CmdCodeOutput.vue'
|
|
9
10
|
export { default as CmdCompanyLogo } from '@/components/CmdCompanyLogo.vue'
|
|
10
11
|
export { default as CmdContainer } from '@/components/CmdContainer.vue'
|
|
11
12
|
export { default as CmdCookieDisclaimer } from '@/components/CmdCookieDisclaimer.vue'
|