78 lines
1.6 KiB
Vue
78 lines
1.6 KiB
Vue
<template>
|
|
<ui-property :field="params.field" :label="params.label" :description="params.description" :required="params.required" :class="classes" :is-text="view === 'output'">
|
|
<component v-if="fieldComponent" :is="fieldComponent" :component="component" :config="params" :value="value" @input="onChange" />
|
|
</ui-property>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import Axios from 'axios';
|
|
|
|
export default {
|
|
name: 'uiEditorComponent',
|
|
|
|
props: {
|
|
value: {
|
|
type: [ Object, Number, Array, String, Boolean, Date ]
|
|
},
|
|
component: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
deep: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
|
|
data: () => ({
|
|
fieldComponent: null
|
|
}),
|
|
|
|
computed: {
|
|
params()
|
|
{
|
|
return this.component.params;
|
|
},
|
|
view()
|
|
{
|
|
return this.component.params.view;
|
|
},
|
|
classes()
|
|
{
|
|
let classes = this.component.params.options.classes;
|
|
if (this.view === 'nested')
|
|
{
|
|
classes.push('full-width');
|
|
}
|
|
return classes;
|
|
}
|
|
},
|
|
|
|
created()
|
|
{
|
|
this.fieldComponent = () =>
|
|
{
|
|
if (this.view === 'custom')
|
|
{
|
|
return import('@/Plugins/' + this.component.params.componentPath);
|
|
}
|
|
else if (this.view === 'nested')
|
|
{
|
|
return import(`zero/editor/editor-nested`);
|
|
}
|
|
else
|
|
{
|
|
return import(`zero/editor/fields/${this.view}`);
|
|
}
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
onChange(value)
|
|
{
|
|
this.$emit('input', value);
|
|
}
|
|
}
|
|
}
|
|
</script> |