Plugin for Bootstrap Margins

We created a plugin for our margins.

const Fieldtype = {
  mixins: [window.Storyblok.plugin],
  template: `<div><div class="uk-grid">
<div class="uk-width-3-3">
<label class="uk-form-label">Margin Top</label>
<select style="margin-bottom:15px" class="uk-width-1-1" v-model="model.top"><option :value="option.value ? 'mt-' + option.value : ''" v-for="option in options">{{ option.name }}</option></select>
</div>
<div class="uk-width-3-3">
<label class="uk-form-label">Margin Bottom</label>
<select class="uk-width-1-1" v-model="model.bottom"><option :value="option.value ? 'mb-' + option.value : ''" v-for="option in options">{{ option.name }}</option></select>
</div>
</div></div>`,
  methods: {
    initWith() {
      return {
        plugin: 'bootstrap_margins',
        top: '',
        bottom: '',
      }
    }
  },
  data() {
    return {
      options: [{
        name: 'None',
        value: ''
      },
      {
        name: 'Small',
        value: '1'
      },
      {
        name: 'Medium',
        value: '3'
      },
      {
        name: 'Big',
        value: '5'
      }]
    }
  },
  watch: {
    'model': {
      handler: function (value) {
        this.$emit('changed-model', value ? value : null);
      },
      deep: true
    }
  }
}
2 Likes