mixtape/zero.Web.UI/App/editor/editor.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>