125 lines
3.1 KiB
Vue
125 lines
3.1 KiB
Vue
<template>
|
|
<ui-property v-if="!isHidden" :field="config.path" :label="label" :hide-label="config.options.hideLabel" :description="description" :required="isRequired" :disabled="isDisabled" :class="{'is-disabled': isDisabled }">
|
|
<component :is="config.component" v-bind="config.componentOptions" :value="model" :entity="value" @input="onChange" :disabled="isDisabled" />
|
|
<p v-if="config.options.helpText" class="ui-property-help" v-localize="config.options.helpText"></p>
|
|
</ui-property>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import Strings from 'zero/helpers/strings.js';
|
|
import Objects from 'zero/helpers/objects.js';
|
|
import Editor from 'zero/core/editor.ts';
|
|
import EditorField from 'zero/core/editor-field.ts';
|
|
import Localization from 'zero/helpers/localization.js';
|
|
|
|
export default {
|
|
name: 'uiEditorComponent',
|
|
|
|
inject: [ 'meta' ],
|
|
|
|
props: {
|
|
config: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
editor: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
value: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
},
|
|
|
|
watch: {
|
|
value: {
|
|
deep: true,
|
|
handler: function ()
|
|
{
|
|
this.rebuildModel();
|
|
}
|
|
}
|
|
},
|
|
|
|
data: () => ({
|
|
model: null
|
|
}),
|
|
|
|
mounted()
|
|
{
|
|
this.rebuildModel();
|
|
},
|
|
|
|
computed: {
|
|
isHidden()
|
|
{
|
|
return typeof this.config.options.condition === 'function' && !this.config.options.condition(this.value);
|
|
},
|
|
isRequired()
|
|
{
|
|
return typeof this.config.isRequired === 'function' ? this.config.isRequired(this.value) : this.config.isRequired;
|
|
},
|
|
isDisabled()
|
|
{
|
|
return (typeof this.config.options.disabled === 'boolean' && this.config.options.disabled) || (typeof this.config.options.disabled === 'function' && this.config.options.disabled(this.value, this.model));
|
|
},
|
|
label()
|
|
{
|
|
return this.config.options.label || this.editor.templateLabel(this.config.path);
|
|
},
|
|
description()
|
|
{
|
|
return Localization.localize(this.config.options.description || this.editor.templateDescription(this.config.path), { hideEmpty: true });
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
|
|
rebuildModel()
|
|
{
|
|
this.selector = Strings.selectorToArray(this.config.path);
|
|
let currentValue = this.value;
|
|
let found = false;
|
|
|
|
if (!this.selector || !this.selector.length || !currentValue)
|
|
{
|
|
found = true;
|
|
this.model = null;
|
|
}
|
|
else
|
|
{
|
|
for (var key of this.selector)
|
|
{
|
|
if (key in currentValue)
|
|
{
|
|
found = true;
|
|
currentValue = currentValue[key];
|
|
}
|
|
else
|
|
{
|
|
break;
|
|
}
|
|
}
|
|
|
|
this.model = found ? currentValue : null;
|
|
}
|
|
},
|
|
|
|
|
|
onChange(value)
|
|
{
|
|
if (typeof value === 'function')
|
|
{
|
|
value(this.value);
|
|
}
|
|
else
|
|
{
|
|
Objects.setValue(this.value, this.selector, value);
|
|
}
|
|
this.$emit('input', this.value);
|
|
}
|
|
}
|
|
}
|
|
</script> |