83 lines
1.4 KiB
Vue
83 lines
1.4 KiB
Vue
<template>
|
|
<div
|
|
v-if="template.type === 'object'"
|
|
class="editor"
|
|
>
|
|
<p v-text="template.name" />
|
|
<ConfigEditor
|
|
v-for="(prop,key) of template.properties"
|
|
:key="key"
|
|
:template="prop"
|
|
:config="config[prop.name]"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-else-if="template.type === 'array'"
|
|
class="editor"
|
|
>
|
|
<ConfigEditor
|
|
v-for="(child,key) of config"
|
|
:key="key"
|
|
:config="child"
|
|
:template="template.child"
|
|
/>
|
|
<button type="button">
|
|
add
|
|
</button>
|
|
</div>
|
|
<div
|
|
v-else-if="template.type === 'string'"
|
|
class="editor"
|
|
>
|
|
<label v-text="template.name || ''" />
|
|
<input
|
|
v-model="config"
|
|
type="text"
|
|
>
|
|
</div>
|
|
<div
|
|
v-else-if="template.type === 'number'"
|
|
class="editor"
|
|
>
|
|
<label v-text="template.name || ''" />
|
|
<input
|
|
v-model="config"
|
|
type="number"
|
|
>
|
|
</div>
|
|
<div
|
|
v-else-if="template.type === 'boolean'"
|
|
class="editor"
|
|
>
|
|
<label v-text="template.name || ''" />
|
|
<input
|
|
v-model="config"
|
|
type="checkbox"
|
|
>
|
|
</div>
|
|
<pre v-else>
|
|
invalid config
|
|
</pre>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'ConfigEditor',
|
|
props: {
|
|
// eslint-disable-next-line vue/require-prop-types
|
|
config: { required: true },
|
|
template: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.editor {
|
|
border: 1px solid black;
|
|
margin-left: 10px;
|
|
}
|
|
</style>
|