Field to use with Bulma

BField.vue

<script>
  export default {
    name: "b-field",
    inheritAttrs: false,
    props: {
      coverErrors: Boolean,
      errors: {
        type: Array,
        default: function() {
          return [];
        }
      },
      isHorizontal: Boolean,
      label: String,
      required: Boolean
    },
    data() {
      return {
        errorsActive: this.errors.length > 0 && !this.coverErrors
      };
    },
    computed: {
      hasAddons() {
        if (this.$slots.addonsleft !== undefined) return true;
        if (this.$slots.addonsright !== undefined) return true;

        return false;
      },
      hasErrors() {
        return this.errorsActive && !this.coverErrors;
      }
    },
    methods: {
      hideErrors() {
        this.errorsActive = false;
      },
      showErrors() {
        this.errorsActive = true;
      }
    },
    render(createElement) {
      var errors,
        label,
        required,
        addonsleft,
        addonsright,
        field,
        defaultSlot;

      if (this.required === true)
        required = createElement("span", { class: "field-required" });

      if (this.label) {
        label = createElement(
          "label",
          { class: ["label", { "field-label": this.isHorizontal }] },
          [this.label, " ", this.$slots.checkbox, " ", required]
        );
      }

      if (this.hasErrors) {
        errors = this.errors.map((e, i) => {
          return createElement("p", { class: "help is-danger", key: i }, [e]);
        });
      }

      if (this.hasAddons) {
        addonsleft = createElement("div", { class: "control" }, [
          this.$slots.addonsleft
        ]);

        addonsright = createElement("div", { class: "control" }, [
          this.$slots.addonsright
        ]);
      }

      defaultSlot = createElement(
        "div",
        { class: ["control", { "is-expanded": this.hasAddons }] },
        [this.$slots.default]
      );

      if (!this.isHorizontal)
        return createElement("div", { class: "field" }, [
          label,
          createElement(
            "div",
            {
              class: ["field", { "has-addons": this.hasAddons }]
            },
            [addonsleft, defaultSlot, addonsright, errors]
          )
        ]);

      var defaultLength = this.$slots.default.length;

      var fieldBody = createElement("div", { class: "field-body" }, [
        defaultLength > 1
          ? this.$slots.default
          : createElement("div", { class: "field is-expanded" }, [
              this.$slots.default,
              errors
            ])
      ]);

      return createElement("div", { class: "field is-horizontal" }, [
        label,
        fieldBody
      ]);
    }
  };
</script>