interface.html

<div id="app" class="is-loading">
  <div class="col-sm-12 loading-message">
    <br />
    <p class="alert alert-warning">
      Loading the form builder... Please wait
    </p>
    <div class="progress">
      <div class="progress-bar progress-bar-striped active" role="progressbar" style="width: 100%"></div>
    </div>
  </div>
  <main>
    <section v-if="chooseTemplate" class="col-sm-12">
      <br />
      <label class="control-label">Step 1. Choose your form template</label>
      <p>Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.</p>
      <select class="form-control" v-model="settings.templateId">
        <option value="" disabled>-- Select a template</option>
        <option v-for="template in templates" :value="template.id">\{{ template.settings.name }}</option>
      </select>

      <hr />

      <label class="control-label">Step 2. Give your form a name</label>
      <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
      <input placeholder="Form name" class="form-control" type="text" v-model="settings.name" :disabled="!settings.templateId"/>
    </section>
    <div class="builder" v-else>

      <nav>
        <ul class="nav nav-tabs">
          <li v-bind:class="{ active: section === 'form' }">
            <a href="#" v-on:click.prevent="section = 'form'">Edit form</a>
          </li>
          <li v-bind:class="{ active: section === 'settings' }">
            <a href="#" v-on:click.prevent="section = 'settings'">Settings</a>
          </li>
        </ul>
        <a href="#" class="btn btn-xs btn-primary" v-on:click.prevent="changeTemplate()">Change template</a>
      </nav>

      <div class="content">
        <section class="col-sm-12" v-show="section === 'settings'">
          <h3>Configure form</h3>
          <form>
            <div class="form-group">
              <label for="formName" class="control-label">Form name</label>
              <input id="formName" type="text" v-model="settings.name" class="form-control" />
            </div>
            <div class="form-group" v-if="dataSources.length">
              <label for="selectDataSource" class="control-label">Save results to data source</label>
              <select id="selectDataSource" class="form-control" v-model="settings.dataSourceId" required>
                <option value="" disabled="disabled">Select a data source</option>
                <option v-for="dataSource in dataSources" v-bind:value="dataSource.id">
                  \{{ dataSource.name }}
                </option>
              </select>
            </div>
            <div class="form-group">
              <label for="formResult" class="control-label">Result HTML message</label>
              <textarea id="formResult" v-model="settings.resultHtml" class="form-control"></textarea>
            </div>
            <div class="form-group">
              <label for="formSubmitLabel" class="control-label">Submit button label</label>
              <input id="formSubmitLabel" type="text" v-model="settings.submitLabel" class="form-control" maxlength="32" required />
            </div>
          </form>
        </section>

        <div v-show="section === 'form'">
          <section class="col-sm-6 form-preview">
            <br />
            <input placeholder="Form name" class="form-control" type="text" v-model="settings.name" :disabled="!settings.templateId"/>
            <br />

            <div class="form-html form-horizontal" v-sortable="{ group: { name: 'fields', pull: false }, onAdd: onAdd, onUpdate: onSort }">
              <div class="component" :data-id="field.name" v-for="(field, index) in fields" v-on:click="onFieldClick(field)" v-bind:class="{ editing: field.name === activeFieldId }">
                <component :is="field._type" v-bind="field"></component>
                <i>Click to edit</i> - <a class="text-danger" href="#" v-on:click.prevent.stop="deleteField(index)">Delete field</a>
              </div>
            </div>
          </section>

          <section class="components-list col-sm-6">
            <h3>Components</h3>
            <div class="form-html form-horizontal" v-sortable="{ sort: false, group: { name: 'fields', pull: 'clone', put: false, revertClone: true } }">
              <div class="component" v-for="(field, index) in formFields">
                <a href="#" class="add" v-on:click.prevent.stop="addField(fields.length, index)">+</a>
                <component :is="field"></component>
              </div>
            </div>
          </section>

          <div class="modal" tabindex="-1" role="dialog" v-bind:class="{ active: !!activeFieldConfigType }">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" v-on:click.prevent="closeEdit" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                  <h4 class="modal-title">Configure form field</h4>
                </div>
                <div class="modal-body">
                  <component :is="activeFieldConfigType" v-bind="activeField"></component>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </main>
</div>