buefy v0.3.0 Release Notes

  • Modal

    ๐Ÿ‘‰ Show any content you want in a modal programatically, like an image:

    this.$modal.open(
        `<p class="image is-4by3">
            <img src="./static/placeholder-1280x960.png">
        </p>`
    )
    

    or a component:

    import CustomComponent from './components/CustomComponent'
    
    this.$modal.open({
        component: CustomComponent
    })
    

    Table

    Breakable changes on it, now requires a scoped slot to wrap the columns, and a slot inside the column. You have now full control over the content of cells:

    <b-table :data="data">
        <template scope="props">
            <b-table-column field="id" label="ID" sortable numeric>
                {{ props.row.id }}
            </b-table-column>
    
            <b-table-column field="user.first_name" label="First Name" sortable>
                {{ props.row.user.first_name }}
            </b-table-column>
    
            <b-table-column field="date" label="Date" sortable
                v-html="formatDate(props.row.date)">
            </b-table-column>
    
            <b-table-column field="gender" label="Gender">
                <b-icon
                    pack="fa"
                    :icon="props.row.gender === 'Male' ? 'mars' : 'venus'">
                </b-icon>
                {{ props.row.gender }}
            </b-table-column>
        </template>
    </b-table>
    
    • ๐Ÿ”€ Prop selectable renamed to selected and expects an Object, if you have Vuejs v2.3+ you can use the .sync modifier to make it two-way binding:
    <b-table :data="data" :selected.sync="selectedRow">
    

    is the same as:

    <b-table :data="data" :selected="selectedRow" @select="row => selectedRow = row">
    
    • ๐Ÿ”€ Table new prop checked-rows that expects an Array, if you have Vuejs v2.3+ you can use the .sync modifier to make it two-way binding
    • ๐Ÿšš Table render-html prop removed thanks to the new syntax
    • ๐Ÿšš Column component prop removed thanks to the new syntax
    • Column field prop now accepts nested object keys

    Other

    • ๐Ÿ’ฅ Breaking: Select b-option is now only option
    • ๐Ÿ’ฅ Breaking: Dropdown b-option is now b-dropdown-option
    • ๐Ÿ›  Fix Dropdown background overlay index
    • #43 Fix Dialog cancel button focus state
    • #50 Add page-change event on Table
    • #52 Fix Select option
    • #53 Add type=button to notifications