Vue - Component

Using slots

by Ben Clayton

HTML

<script src="https://unpkg.com/vue"></script>

<div style="border:1px solid red;font-size:12px;">
Header
</div>

<div id="cs3-content">

	<holo-contentwrapper v-bind:properties='{picture:"//holograph.digital/infxpageedit/img/default.gif"}'>
    SLOTS HERE
    
    <holo-multicol-frame>
    
    <holo-newpicture slot="col0"  v-bind:properties='{picture:"//holograph.digital/infxpageedit/img/default.gif"}'></holo-newpicture>

<holo-newpicture slot="col1"  v-bind:properties='{picture:"//holograph.digital/infxpageedit/img/default.gif"}'></holo-newpicture>

    </holo-multicol-frame>
    
    
	</holo-contentwrapper>

</div>


<hr>

<script id="vue-tmpl-contentwrapper" type="text/x-template">
    <div>contentwrapper<br>
    	<slot></slot>
    </div>
</script>

<script id="vue-tmpl-multicol-frame" type="text/x-template">
  <div>
		<holo-multicol-column v-for="(blk, index) in [1,2,3]" :key="index"  v-bind:properties="blk">
    XX {{index}}
<slot name="col0"></slot>
    </holo-multicol-column>
    
</div>
</script>


<script id="vue-tmpl-multicol-column" type="text/x-template">
  <div v-bind:style="colstyle">
    YY<slot></slot>
  </div>
</script>

<script id="vue-tmpl-htmlheading" type="text/x-template">
    {{ /* this is a heading */ }}
   	<h1 v-if=" properties.importance == 'h1' " class="text">{{ properties.myedit_html }}</h1>
   	<h2 v-if=" properties.importance == 'h2' " class="text">{{ properties.myedit_html }}</h2>
   	<h3 v-if=" properties.importance == 'h3' " class="text">{{ properties.myedit_html }}</h3>
   	<h4 v-if=" properties.importance == 'h4' " class="text">{{ properties.myedit_html }}</h4>
   	<h5 v-if=" properties.importance == 'h5' " class="text">{{ properties.myedit_html }}</h5>
   	<h6 v-if=" properties.importance == 'h6' " class="text">{{ properties.myedit_html }}</h6>
</script>


<script id="vue-tmpl-htmltext" type="text/x-template">
  <div class="text">
   	{{ properties.myedit_html }}
  </div>
</script>

<script id="vue-tmpl-newpicture"...

CSS

body {
	    font-size: 20px;
}

.text {
	font-size: 24px;
}

JavaScript

//---------------------------------------------------------

Vue.component('cs3-article', {
  template: "#vue-tmpl-article",
  props: ['properties'],
  created: function () {
  	//console.log("article properties:",this.properties);
  }
});

//---------------------------------------------------------

Vue.component('holo-block', {
  template: "#vue-tmpl-block",
  props: ['properties'],
  methods: {
		isArray : function () {
    	return (typeof this.properties.length != 'undefined')
    }
  },
  created: function () {
  	//console.log("properties:",this.properties);
  }
});


//---------------------------------------------------------
Vue.component('holo-contentwrapper', {
  template: "#vue-tmpl-contentwrapper",
  props: ['properties'],
  created: function () {
  	console.log("contentwrapper:",this.properties);
  }
});

//---------------------------------------------------------
Vue.component('holo-multicol-frame', {
  template: "#vue-tmpl-multicol-frame",
  props: ['properties']
});

//---------------------------------------------------------
Vue.component('holo-multicol-column', {
  template: "#vue-tmpl-multicol-column",
  props: ['properties'],
  created: function () {
  	//console.log("multicol column properties:",this.properties);
		//console.log("multicol column colstyle:",this.colstyle);
  }
});

//---------------------------------------------------------
Vue.component('holo-htmlheading', {
  template: "#vue-tmpl-htmlheading",
  props: ['properties'],
  created: function () {
  	//console.log("heading properties:",this.properties.text);
  }
});

//---------------------------------------------------------
Vue.component('holo-htmltext', {
  template: "#vue-tmpl-htmltext",
  props: ['properties'],
  created: function () {
  	//console.log("body properties:",this.properties.text);
  }
});

//---------------------------------------------------------
Vue.component('holo-newpicture', {
  template: "#vue-tmpl-newpicture",
  props: ['properties'],
  created: function...