Vue

by Phil Brown

HTML

<div id="app">
<field-wrapper :wrap="true" label="Wrapped">
  <span> Description </span>
  <div>more stuff here </div>
</field-wrapper>
<field-wrapper :wrap="false" label="Not wrapped">
  <span> Description </span>
  <div>more stuff here </div>
</field-wrapper>

</div>

CSS

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

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

label {
  display: block;
  font-weight: bold;
}

fieldset {
  border: 1px solid !important;
  margin: 1em;
}

Vue

Vue.component('FieldWrapper', {
	template: `
  <div>
  <fieldset v-if="wrap">
    <legend>{{ label }}</legend>
    <slot></slot>
  </fieldset>
  <template v-else>
    <label>{{ label }}</label>
    <slot></slot>
  </template>
  </div>`,
  name: 'FieldWrapper',
  props: {
    wrap: Boolean,
    label: String
  }
})
new Vue({
  el: "#app"
})