138 lines
3.7 KiB
Vue
138 lines
3.7 KiB
Vue
<template>
|
|
<div>
|
|
<div class="editor-outer" v-if="loaded" :class="{ 'has-tabs': hasTabs, '-infos-aside': !nested && infos != 'none', 'is-page': isPage, 'as-boxes': asBoxes }">
|
|
<ui-tabs class="editor">
|
|
<ui-tab v-if="!tab.disabled(value)" v-for="(tab, index) in tabs" class="ui-box" :class="tab.class" :label="tab.name" :count="tab.count(value)" :key="index">
|
|
<h3 v-if="asBoxes" class="ui-headline" v-localize="tab.name"></h3>
|
|
<editor-component v-for="(field, fieldIndex) in tab.fields" :key="fieldIndex" :config="field" @input="onChange" :editor="editorConfig" :value="value" />
|
|
<component v-if="tab.component" :is="tab.component" v-model="value" />
|
|
</ui-tab>
|
|
</ui-tabs>
|
|
<editor-aside :editor="editorConfig" :value="value" v-if="infos != 'none' && !isPage" v-bind="{ infos, activeToggle, nested, isPage }">
|
|
<template v-slot:info-boxes>
|
|
<slot name="info-boxes"></slot>
|
|
</template>
|
|
<template v-slot:settings>
|
|
<slot name="settings"></slot>
|
|
</template>
|
|
<template v-slot:settings-properties>
|
|
<slot name="settings-properties"></slot>
|
|
</template>
|
|
<template v-slot:infos>
|
|
<slot name="infos"></slot>
|
|
</template>
|
|
<template v-slot:infos-more>
|
|
<slot name="infos-more"></slot>
|
|
</template>
|
|
<template v-slot:infos-after>
|
|
<slot name="infos-after"></slot>
|
|
</template>
|
|
</editor-aside>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import './editor.scss';
|
|
import EditorComponent from 'zero/editor/editor-component.vue';
|
|
import EditorAside from './editor-aside.vue';
|
|
|
|
export default {
|
|
name: 'uiEditor',
|
|
|
|
provide: function ()
|
|
{
|
|
return {
|
|
meta: this.meta
|
|
};
|
|
},
|
|
|
|
props: {
|
|
config: {
|
|
type: [String, Object],
|
|
required: true
|
|
},
|
|
meta: {
|
|
type: Object,
|
|
default: () => { }
|
|
},
|
|
value: {
|
|
type: Object
|
|
},
|
|
infos: {
|
|
type: String,
|
|
default: 'aside'
|
|
},
|
|
activeToggle: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
nested: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
isPage: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
onConfigure: {
|
|
type: Function,
|
|
default: () => { }
|
|
},
|
|
},
|
|
|
|
components: { EditorComponent, EditorAside },
|
|
|
|
data: () => ({
|
|
editorConfig: null,
|
|
loaded: false,
|
|
hasTabs: false,
|
|
asBoxes: false,
|
|
coreDatabase: false,
|
|
tabs: []
|
|
}),
|
|
|
|
created()
|
|
{
|
|
this.editorConfig = typeof this.config === 'string' ? this.zero.getEditor(this.config) : this.config;
|
|
|
|
if (this.editorConfig.tabs.length > 0)
|
|
{
|
|
this.hasTabs = true;
|
|
this.tabs = this.editorConfig.tabs.map(tab =>
|
|
{
|
|
return {
|
|
...tab,
|
|
count: value => typeof tab.count === 'number' ? tab.count : (typeof tab.count === 'function' ? tab.count(value) : 0),
|
|
disabled: value => typeof tab.disabled === 'boolean' ? tab.disabled : (typeof tab.disabled === 'function' ? tab.disabled(value) : false),
|
|
fields: this.editorConfig.getFields(tab)
|
|
};
|
|
});
|
|
}
|
|
else
|
|
{
|
|
this.tabs = [{
|
|
name: '_',
|
|
count: value => 0,
|
|
disabled: value => false,
|
|
fields: this.editorConfig.getFields()
|
|
}];
|
|
}
|
|
|
|
this.asBoxes = this.editorConfig.options.boxes;
|
|
this.coreDatabase = this.editorConfig.options.coreDatabase;
|
|
this.onConfigure(this);
|
|
|
|
this.loaded = true;
|
|
},
|
|
|
|
methods: {
|
|
|
|
onChange()
|
|
{
|
|
this.$emit('input', this.value);
|
|
}
|
|
}
|
|
}
|
|
</script> |