Incompatibility issue with Bulma 0.4.0

[MBach]

Hi, With latest release of Bulma (0.4.0), writing forms must be enclosed by DIV with class field, like this:

<div class="field">
  <label class="label" for="country">Country</label>
  <p class="control is-expanded">
    <span class="select is-fullwidth">
      <select class="is-fullwidth" name="country" v-model="selected_country" @input="updateUser">
        <option v-for="c in countries" v-bind:value="c.id">
          {{ c.country_fr }}
        </option>
      </select>
    </span>
  </p>
</div>

which produces:

If I do the same thing with datepicker and "has-addons" on the enclosing DIV, here's what I have:

<label class="label">Start date</label>
<div class="field has-addons">
  <datepicker name="dateForm" v-model="dateForm" :config="{ dateFormat: 'd/m/Y', wrap: true, locale: fr }">
    <a class="button" data-toggle><i class="fa fa-calendar"></i></a>
    <a class="button" data-clear><i class="fa fa-close"></i></a>
  </datepicker>
</div>

Note that LABEL needs to be outside when using "has-addons". I think this is another issue from Bulma itself.

[JTallis]

Yeah as a result of this I had to copy the files and edit them to my taste. I'm not git savvy myself but here was my solution:

WrapperInput.vue

<template>
    <div class="field has-addons">
        <p class="control is-expanded flatpickr" data-wrap="true" data-clickOpens="false" :class="{ [`has-addons-${alignment}`]: alignment }">
            <input class="input" :class="inputClass" type="text" :placeholder="placeholder" :readonly="readonly" v-model="date" data-input />
        </p>
        <slot></slot>
    </div>
</template>

Form.vue (or whatever you call it)

<div class="field">
    <div class="control has-icon">
        <datepicker placeholder="Date of Birth" :config="{ dateFormat: 'Y-m-d', wrap: true, maxDate: 'today' }">
            <p class="control">
                <a class="button" data-toggle>
                    <i class="fa fa-calendar"></i>
                </a>
            </p>
            <p class="control">
                <a class="button" data-clear>
                    <i class="fa fa-close"></i>
                </a>
            </p>
        </datepicker>
        <span class="icon is-small">
            <i class="fa fa-birthday-cake"></i>
        </span>
    </div>
</div>

I added an icon myself as I'm using it as a date of birth field but of course that is easily omitted.

[uptownhr]

any update here?

[luventa]

Sorry for replying so late. I'm going to upgrade version of Bulma for vue-admin and fix this issue these days.