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 toselected
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 onlyoption
- ๐ฅ Breaking: Dropdown
b-option
is nowb-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
- ๐ Prop