Lightweight UI components for Vue.js based on Bulma
MIT License
Bot releases are visible (Hide)
Published by rafaberaldo over 7 years ago
label
, icon
and icon-pack
properties from DropdownOption thanks to the new syntax, see docs
content
property from TableColumn, use v-html
on an element inside TableColumn insteadposition
property now needs the is-
prefix (eg. is-top-left
or is-centered
) — Gotta fix these inconsistencies while it's still in beta
on-off
prop from Switch$speed-slower: 250ms !default
size
prop to Switch.sync
modifier to Pagination current
propactive
property and changed animations of Notification and MessagePublished by rafaberaldo over 7 years ago
content
prop to Table Column. Use this instead of v-html
or it might break on tables with mobile-cards
(collapsed rows)mobile-cards
Published by rafaberaldo over 7 years ago
grouped
now also works on nested Fields.sync
modifierchecked-rows
prop not updating on ChromePublished by rafaberaldo over 7 years ago
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
})
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>
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">
checked-rows
that expects an Array, if you have Vuejs v2.3+ you can use the .sync
modifier to make it two-way bindingrender-html
prop removed thanks to the new syntaxcomponent
prop removed thanks to the new syntaxfield
prop now accepts nested object keysb-option
is now only option
b-option
is now b-dropdown-option
page-change
event on Tabletype=button
to notificationsPublished by rafaberaldo over 7 years ago
default-sort
searchable
propertyPublished by rafaberaldo over 7 years ago
loading
property to Selectdisabled
stylev-model
is updatedloading
overlapping other iconspassword-reveal
icon being overlapped by Field type
iconbackend-sorting
resetting sorted columntype
and message
Published by rafaberaldo over 7 years ago
html
to render-html
bordered
sorted columnbackend-sorting
property and sort
event, see more here
component
property on Table. Thanks to korpa!Published by rafaberaldo over 7 years ago
Published by rafaberaldo over 7 years ago
Published by rafaberaldo over 7 years ago