buefy

Lightweight UI components for Vue.js based on Bulma

MIT License

Downloads
187.9K
Stars
9.5K
Committers
390

Bot releases are hidden (Show)

buefy - v0.4.0

Published by rafaberaldo over 7 years ago

I've broke some stuff...

  • Remove label, icon and icon-pack properties from DropdownOption thanks to the new syntax, see docs
  • Remove content property from TableColumn, use v-html on an element inside TableColumn instead
  • Field, Snackbar and Toast position property now needs the is- prefix (eg. is-top-left or is-centered) — Gotta fix these inconsistencies while it's still in beta
  • Remove on-off prop from Switch

Additions and fixes

  • New component: Autocomplete, see docs
  • Switch design overhaul, see new style
  • Fix Tabs dynamic height
  • Add one more Sass variable: $speed-slower: 250ms !default
  • Add size prop to Switch
  • Add .sync modifier to Pagination current prop
  • Add active property and changed animations of Notification and Message
  • Add Dropdown within nav example
  • All selections control (Checkbox, Radio, RadioButton and Switch) can now be focused and changed by keyboard
  • #69 Add loading state to Table
  • #71 Add background for checked rows on Table (thanks @mikejavier)
  • #72 Fix Table overflow
  • #74 Fix DropdownOption slots, can customize with HTML now
  • #76 Modal close event accepts parameters (thanks @gongzza)
  • #77 Add index to Table scoped slot (thanks @UrVerySpecial)
  • #78 Fix Table sorting zero values (thanks @gwvt)
  • #82 Fix Select with numeric zero value
buefy - v0.3.2

Published by rafaberaldo over 7 years ago

  • New component: Tabs, see docs
  • Add content prop to Table Column. Use this instead of v-html or it might break on tables with mobile-cards (collapsed rows)
  • Alert Dialog accepts string as well
  • Dialog open with focus on confirm button (easier to just hit enter)
  • Modal can be used in template as well (non programmatic)
  • Table automatically scrolls if overflowed
  • #62 Add sort direction with Table mobile-cards
  • #67 Fix Table sort null values
buefy - v0.3.1

Published by rafaberaldo over 7 years ago

  • Field grouped now also works on nested Fields
  • Add Modal props
  • Fix all animations
  • Fix Table row click error
  • Fix Table .sync modifier
  • #56 Fix selection controls initial state always false
  • #58 Fix Table checked-rows prop not updating on Chrome
buefy - v0.3.0

Published by rafaberaldo over 7 years ago

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
buefy - v0.2.2

Published by rafaberaldo over 7 years ago

  • Update Vue to 2.2.6
  • Update Bulma to 0.4.1
  • #35 Fix Dropdown TypeError
  • #29, #39 Fix SSR
  • #42 Fix Table default-sort
  • #40 Select now use native select, removed searchable property
buefy - v0.2.1

Published by rafaberaldo over 7 years ago

  • Add loading property to Select
  • Fix Checkbox disabled style
  • Fix Input not being validated when v-model is updated
  • Fix Input loading overlapping other icons
  • Fix Input password-reveal icon being overlapped by Field type icon
  • #23 Fix Select with addons overflowing
  • #30 Fix Table backend-sorting resetting sorted column
  • #33 Fix Input and Select on-blur listener removing user-defined Field type and message
buefy - v0.2.0

Published by rafaberaldo over 7 years ago

  • New component: Select
  • New component: Dropdown
  • BREAKING: Rename Table property html to render-html
  • Fix Pagination buttons messing up at pages 3 and 4
  • Fix Dialog keeping keyup event
  • Fix prompt Dialog not validating before confirming
  • #6 Fix docs not working on IE. Thanks to AngelMunoz!
  • #9 Fix Table bordered sorted column
  • #10 Add Table backend-sorting property and sort event, see more here
  • #14 Add component property on Table. Thanks to korpa!
buefy - v0.1.4

Published by rafaberaldo over 7 years ago

  • Fix #5 — now serving compiled files
  • Fix #6 (partially) — docs now working on Edge
  • Added "UI Elements" on docs to specify that the user can use anything from Bulma
  • Redone the construtor options structure to work with the compiled build
buefy - v0.1.2

Published by rafaberaldo over 7 years ago

  • Fixed Switch two-way data binding not working correctly
  • Fixed Radio animation not working properly
  • Fixed #2 — select arrow misplaced
  • Fixed Input's help message overlapping maxlength's counter
  • Fixed Table column sorting — should start with ASC
  • Fixed Table mobile sorting not working
buefy - v0.1.0 — Initial release

Published by rafaberaldo over 7 years ago

Components

  • Checkbox
  • Dialog
  • Icon
  • Input
  • Message
  • Notification
  • Pagination
  • Radio
  • Radio Button
  • Snackbar
  • Switch
  • Table
  • Toast
  • Tooltip
Package Rankings
Top 0.58% on Npmjs.org
Top 15.37% on Repo1.maven.org