Vue

by joplomacedo

HTML

<div id="app">
<form-card
    title="This is bananas"
    :optional="true"
>
</form-card>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

.this {
	background-color: #fff;
	padding: 16px 20px 30px;
 }

Vue

Vue.component('form-card', {

  template: `
	<div class="this">
		<div class="header" v-if="hasHeader">
			<div class="header__title" v-if="hasTitle">
				<b-switch v-if="optional" v-model="isToggled" />
				<span class="t-label t-label--dark">{{ title }}</span>
			</div>

			<div class="header__controls" v-if="hasControls">
				<slot name="controls"></slot>
			</div>
		</div>

		<div class="body" v-if="isToggled">
			<slot name="body"></slot>
		</div>
	</div>
  `,
  
	props: {
		title: {
			type: String,
			default: null
		},
		optional: {
			type: Boolean,
			default: false
		}
	},

	data() {
		return {
			isToggled: true
		};
	},

	computed: {
  	hasTitle() {
    	return this.title !== null;
    },
    
    hasControls() {
    	return !!this.$slots.controls;
    },
		hasHeader() {
			return this.hasTitle || this.hasControls;
		}
	}
});
X

new Vue({
  el: "#app",
  data: {

  },
  methods: {

  }
})