|
10 | 10 | <div class="vp-code-group vp-doc" v-if="java"> |
11 | 11 | <CodeGroup :groups="[ |
12 | 12 | { id: 'java-appyml', label: 'application.yml', lang: 'yml', group, code: javaAppyml }, |
13 | | - { id: 'java-sysprop', label: 'System property', lang: 'properties', group, code: javaEnvStr } |
| 13 | + { id: 'java-sysprop', label: 'System property', lang: 'properties', group, code: javaEnvStr, transient: true } |
14 | 14 | ]" /> |
15 | 15 | </div> |
16 | 16 | <div class="vp-code-group vp-doc" v-else> |
17 | 17 | <CodeGroup :groups="[ |
18 | 18 | { id: 'pkg', label: 'package/.cdsrc.json', lang: 'json', group, code: pkgStr }, |
| 19 | + { id: 'js', label: '.cdsrc.js', lang: 'js', group, code: jsStr }, |
| 20 | + { id: 'yml', label: '.cdsrc.yaml', lang: 'yml', group, code: ymlStr }, |
19 | 21 | { id: 'env', label: '.env file', lang: 'properties', group, code: propStr }, |
20 | | - { id: 'shl', label: 'Linux/macOS Shells', lang: 'sh', group, code: envStr }, |
21 | | - { id: 'shp', label: 'Powershell', lang: 'powershell', group, code: '$Env:'+envStr }, |
22 | | - { id: 'shw', label: 'Cmd Shell', lang: 'cmd', group, code: 'set '+envStr } |
| 22 | + { id: 'shl', label: 'Linux/macOS Shells', lang: 'sh', group, code: envStr, transient: true }, |
| 23 | + { id: 'shp', label: 'Powershell', lang: 'powershell', group, code: '$Env:'+envStr, transient: true }, |
| 24 | + { id: 'shw', label: 'Cmd Shell', lang: 'cmd', group, code: 'set '+envStr, transient: true } |
23 | 25 | ]" /> |
24 | 26 | </div> |
25 | 27 | </template> |
|
32 | 34 | import FloatingVue from 'floating-vue' |
33 | 35 | import yaml from 'yaml' |
34 | 36 |
|
| 37 | + const { java, keyOnly, filesOnly, label:labelProp } = defineProps<{ |
| 38 | + java?: boolean, |
| 39 | + keyOnly?: boolean, |
| 40 | + filesOnly?: boolean, |
| 41 | + label?: string |
| 42 | + }>() |
| 43 | +
|
35 | 44 | // sub component that renders code blocks similar to the markdown `::: code-block` syntax |
36 | 45 | const CodeGroup = defineComponent( |
37 | 46 | ({ groups }) => () => [ |
38 | | - h('div', { class: 'tabs' }, groups.flatMap((b, idx) => [ |
39 | | - h('input', { type: 'radio', name: 'group', id: `${b.group}-${b.id}`, checked: idx === 0 }), |
40 | | - h('label', { for: `${b.group}-${b.id}` }, b.label) |
| 47 | + h('div', { class: 'tabs' }, groups |
| 48 | + .filter((b) => filesOnly ? !b.transient : true) |
| 49 | + .flatMap((b, idx) => [ |
| 50 | + h('input', { type: 'radio', name: 'group', id: `${b.group}-${b.id}`, checked: idx === 0 }), |
| 51 | + h('label', { for: `${b.group}-${b.id}` }, b.label) |
41 | 52 | ])), |
42 | 53 | h('div', { class: 'blocks' }, groups.flatMap((b, idx) => [ |
43 | 54 | h('div', { class: ['language-'+b.lang, idx === 0 ? 'active': ''] }, [ |
|
54 | 65 | ])) |
55 | 66 | ], { |
56 | 67 | props: { |
57 | | - groups: { type: Array<{id:string, group:string, code:string, label:string, lang:string }>, required: true } |
| 68 | + groups: { type: Array<{id:string, group:string, code:string, label:string, lang:string, transient?:boolean }>, required: true } |
58 | 69 | } |
59 | 70 | } |
60 | 71 | ) |
61 | 72 |
|
62 | | - const { java, keyOnly, label:labelProp } = defineProps<{ |
63 | | - java?: boolean, |
64 | | - keyOnly?: boolean, |
65 | | - label?: string |
66 | | - }>() |
67 | 73 | FloatingVue.options.themes.cfgPopper = { $extend: 'dropdown' } |
68 | 74 |
|
69 | 75 | const slots = useSlots() |
|
76 | 82 | const popperVisible = ref(false) |
77 | 83 | const group = ref() |
78 | 84 | const pkgStr = ref() |
| 85 | + const jsStr = ref() |
| 86 | + const ymlStr = ref() |
79 | 87 | const propStr = ref() |
80 | 88 | const envStr = ref() |
81 | 89 | const javaAppyml = ref() |
|
100 | 108 | const pkg = toJson(key, jsonVal ?? value) |
101 | 109 |
|
102 | 110 | pkgStr.value = JSON.stringify(pkg, null, 2) |
| 111 | + jsStr.value = 'module.exports = ' + pkgStr.value.replace(/"(\w*?)":/g, '$1:') |
103 | 112 | propStr.value = `${key}=${jsonVal ? JSON.stringify(jsonVal) : value}` |
104 | 113 | envStr.value = `${key.replaceAll('_', '__').replaceAll('.', '_').toUpperCase()}=${jsonVal ? JSON.stringify(jsonVal) : value}` |
105 | 114 |
|
106 | | - javaAppyml.value = yaml.stringify(pkg) |
| 115 | + javaAppyml.value = ymlStr.value = yaml.stringify(pkg) |
107 | 116 | javaEnvStr.value = `-D${propStr.value}` |
108 | | -
|
109 | 117 | }) |
110 | 118 |
|
111 | 119 | function toJson(key:string, value:string): Record<string, any> { |
|
0 commit comments