Vue - PE Properties Dialog

Vue ideas to drive Page Editor Properties dialog

by Ben Clayton

HTML

<script src="https://unpkg.com/vue"></script>
<div id="propdialog">
  <h5>
    Properties: ({{block.name}})
  </h5>
  <vue-propedit v-for="(option,idx) in options" :option="option" :block="block" :key="idx"></vue-propedit>

</div>
<hr>
<h5>
  Preview
</h5>
<div id="preview">
  <vue-box-block v-for="(block,idx) in blocks" :block="block" :key="idx"></vue-box-block>
</div>

CSS

label {
  display: inline-block;
  margin-right: 20px;
  width: 60px;
  white-space: nowrap;
}

.color-edit label {
  width: 230px;
}

#propdialog {
  width: 420px;
  border: 1px solid gray;
  padding: 20px;
}

.propedit {
  margin-bottom: 10px;
  margin-right:10px;
  display: inline-block;
}

.propedit .tb-edit {
  width: 200px;
}

.propedit .color-edit {

  width: 400px;
}

.color-edit input[type=range] {
  width: 50px;
}

#preview {
  margin-top: 30px;
  position: relative;
}

.boxblock {
  border: 1px solid gray;
  position: absolute;
}

.boxblock.selected {
  border: 2px solid blue;
}

input {
  background-color: #FFEEEE;
}

input:valid {
  background-color: #EEFFEE;
}

JavaScript

var menuitems = {
  importance: {
    control: "select-edit",
    propertyName: "importance",
    label: "Importance",
    options: "h1:h1,h2:h2,h3:h3,h4:h4,h5:h5,h6:h6"
  },
  width: {
    pattern: '^\\d+px$'
  }
}



Vue.component('vue-propedit', {
  props: ["option", "block", "trig"],
  data: function() {
    return {
      "propertyName": "",
      "label": "",
      "control": "textbox-edit",
      "options": [],
      "pattern": '^.*$'
    }
  },
  template: `
  	<div class="propedit"> 
      	<vue-textbox-edit v-if="control == 'textbox-edit'" :propertyName="propertyName" :label="label" :block="block" :pattern="pattern"></vue-textbox-edit>
      	<vue-color-edit v-else-if="control == 'color-edit'" :propertyName="propertyName" :label="label" :block="block"></vue-color-edit>
				<vue-select-edit v-else-if="control == 'select-edit'" :propertyName="propertyName" :label="label" :options="options" :block="block"></vue-select-edit>
		</div>    
      `,
  methods: {
    init() {
      var mi;
      if (typeof this.option == 'object') {
        mi = this.option
      }
      // debugger;
      mi = mi || menuitems[this.option] || {
        propertyName: this.option,
        label: this.option,
        control: 'textbox-edit'
      };
      this.propertyName = mi.propertyName || this.option;
      this.label = (mi.label || mi.propertyName || this.option)
        // insert a space before all caps
        .replace(/([A-Z])/g, ' $1')
        // uppercase the first character
        .replace(/^./, function(str) {
          return str.toUpperCase();
        })

      this.control = mi.control || 'textbox-edit';
      this.pattern = mi.pattern || this.pattern;
      var str = mi.options || "";
      this.options = str.split(',').map(opt => {
        return {
          text: opt.split(':')[0],
          value: opt.split(':')[1]
        }
      })

      //Setup game
    }
  },
  mounted() {
    this.init()
  }
})




Vue.component('vue-textbox-edit', {
  props:...