Lightweight UI components for Vue.js based on Bulma

Buefy

Last update: Jan 4, 2023

Overview

Buefy is a lightweight library of responsive UI components for Vue.js based on Bulma framework and design.

Features

Keep your current Bulma theme / variables easily
Supports both Material Design Icons and FontAwesome
Very lightweight with none internal dependencies aside from Vue & Bulma
About 88KB min+gzip (with Bulma included)
Semantic code output
Follows Bulma design and some of the Material Design UX
Focus on usability and performance without over-animating stuff

Documentation

The documentation is in the docs directory, it serves as the demo as well.

Browse online documentation here.

Quick start

You need Vue.js version 2.6+.

1 Install via npm

npm install buefy

2 Import and use Buefy

Bundle

import Vue from 'vue';
import Buefy from 'buefy';
import 'buefy/dist/buefy.css';

Vue.use(Buefy);

or Individual Components

import Vue from 'vue'
import { Field, Input } from 'buefy'
import 'buefy/dist/buefy.css'

Vue.use(Field)
Vue.use(Input)

3 Include Material Design Icons

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css">

If you want to customize the icons or the theme, refer to the customization section on the documentation.

Alternatively, you can use a CDN or even download

<!-- Buefy CSS -->
<link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css">

<!-- Buefy JavaScript -->
<script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>

Browser support

Recent versions of Firefox, Chrome, Edge, Opera and Safari. IE10+ is only partially supported.

Contributing

Please see the contributing guidelines

Versioning

Version will follow v0.Y.Z, where:

Y: Major (breaking changes)
Z: Minor or patch

Core Team

_{Walter Tommasi}

Special thanks to Rafael Beraldo, the original author.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{Rafael Beraldo} 💻	_{Alexandre Paradis} 💻	_{Yuxing Liao} 💻	_Adrien 💻	_{Apolokak Lab} 💻	_{Antério Vieira} 💻	_{Jorge Nieto} 💻	_{Mateus Machado Luna} 💻
_{All contributors}

This project follows the all-contributors specification. Contributions of any kind welcome!

License

Code released under MIT license.

Comments

Vuejs 3 (vue-next) support

Description

Vuejs 3 has been in development for a while and is seeing rapid improvements, currently in a alpha state Buetify should probably start looking at supporting it.
feature request breaking change

opened by brmdbr 138
Buefy Roadmap
Roadmap

Hello everyone, would like to share with you my thoughts on what I have in mind for Buefy in the future.

First of all, thanks a lot for contributing and spreading the package! Special thanks to @jtommy for the BIG help since the beginning!

A bit of background before anything else

I started Buefy to use on a project I'm working on. At the time I wanted to use Bulma as the CSS framework, but the vue/js options for it wasn't good enough. So I started creating these components on a folder in this project, when things started to get big I decided to open source it so more people could also make use. Glad to see a lot of you liked it!

Fun fact: I had everything I needed by version 0.4, every since is all about the community :)

Today and future

Today I still feel the same about this project — it should just be a lightweight UI layer:

I don't want to bloat it with tons of components that are just HTML (like card, bradcrumb) writing some HTML isn't that hard, is it? Bulma classes are so intuitive and easy to use.

I don't want to add anything too specific to components (dragging, manage localStorage, touch swipe, etc), if you need something like that you should extend the component to your needs.

Also, I will wait for Bulma v1 before releasing Buefy v1.

Overall things

[x] Update contributing style guide (some of what I wrote is not the case anymore)

[x] Create a vue-cli plugin

[ ] Improve docs

[x] More reusable code

[x] Add meta object on routes

[x] More fiddle examples

[ ] Layout examples

[x] Add a more complete tutorial page on how to work with SSR/Nuxt and a nuxt module

[x] Add page to show projects made with Buefy

[x] Discord server for the community

Code/component related

[x] Add eslint-plugin-vue

[ ] Update tooltip to stay on an overlay layer (to avoid getting cropped by some layouts)

[ ] Create a <b-app> component to be the root of the page/spa, it will manage every "global level" overlay component (toast/snackbar/dialog/modal/loading/tooltip)

[ ] Break bTable into separated internal components (for maintainability, it's getting huge!)

[x] Improve autocomplete to have scrollbar on dropdown

[x] New range input component

[x] New navbar component

[x] New menu component

[x] Unit tests

[x] Export individual components

My questions

Is Buefy working good on SSR? I haven't touch it yet.

What you find about my thoughts? Disagree with anything?

What you think it's missing mostly?

discussion
opened by rafaelpimpa 48

Datepicker is one day off

<b-field label="Startdatum">
   <b-datepicker v-model="startDate" placeholder="Selecteer..." icon="today" @click="start()"></b-datepicker>
</b-field>
<p>{{startDate}} </p>

Selecting a date displays day earlier

need more info

opened by focussing 47

Use b-table-column with v-slots
Overview of the problem

Buefy version: [0.9.3] Vuejs version: [2.6.xx] OS/Browser: Firefox

Description

The new syntax for table row definition do not allow anymore to use row data to configure b-table-column. or the documentation lack of description to illustrate the new syntax usage.

Steps to reproduce

Working code in 0.8.x (except for v-slot part of course)

<b-table-column field="name" label="Name" v-slot="props" :centered="!props.row.expect" :colspan="!props.row.expect ? 2 : 1" >{{ props.row.name }}</b-table-column>

Expected behavior

should make the column invisible, with a correct colspan.

Actual behavior

"TypeError: _vm.props is undefined"
discussion
opened by elmatou 37
Datepicker selected wrong date on mobile

Tested datepicker component on iOS. When selected a date with the datepicker, the wrong date is being added to the component. I've attached a screen capture of the video I took on my device. In this image, I selected November 9, 2019, but November 8, 2019 was displayed in the datepicker component.

need-investigation

opened by jaredpg1 30
ES Module for browsers

Description

It would be cool if Buefy had an ESM (ECMAScript Module) Build for browsers like Vuejs, Vue-i18n and more. For the moment I only use the Bulma CSS and would love to use Buefy instead!

Example of some ESM.browser builds: https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.esm.browser.js https://unpkg.com/browse/[email protected]/dist/vue-i18n.esm.browser.min.js https://unpkg.com/[email protected]/dist/vue-router.esm.browser.min.js https://unpkg.com/[email protected]/dist/vuex.esm.browser.min.js

Why Buefy need this feature

It will be a plus if you guys release a ESM for browsers build! Because people can use ES modules natively without any build process. So, for small and medium projects/applications, it's awesome! Everything is simplier and straightfoward. ❤
feature request

opened by mlebrasseur 30
Font-Awesome v5+

Overview of the problem

Buefy version: [0.6.2] Vuejs version: [2.5.2]

Description

First of all I would like to appreciate all the work and effort done in buefy. It works like a charm!

Although, one thing that it was missing or I have missed in the documentation regards to Font-Awesome versions 5+. Is there any support to them yet?

I mean, I could not find how to import for instance a far | fas class with <b-icon>. If you use <i> tags it works like it should be, but without the pre-formatting that <b-icon> offers.

opened by gugarosa 30

[Table] Cannot change columns dynamically

Overview of the problem

Buefy version: 0.6.6 Vuejs version: 2.5.16 OS/Browser: Windows (but probably all)

Description

I am trying to create a view where you can select a 'EntityType'. Depending on the selected entity type the table entities (rows) and its fields (columns) shall change.

Yes I am aware of "Always use the visible prop to hide/show columns, and NOT v-if or v-show." but i don't wont to show or hide columns. I want to override the columns array with a new one (because other entity types have other fields)

Steps to reproduce

Full example (may be used as a test case)

<template>
  <div>
    <select v-model="selected">
      <option v-for="(option, key) in results" :value="option" :key="key">
        {{ option.name }}
      </option>
    </select>
    <b-table v-if="selected" :data="selected.items">
      <template slot-scope="props">
        <b-table-column v-for="(column, key) in selected.items[0]"
          :key="key"
          :label="key">
          {{ props.row[key] }}
        </b-table-column>
      </template>
    </b-table>
  </div>
</template>

<script>

export default {
  data () {
    return {
      selected: null,
      results: [
        {
          name: "Monster Type", 
          items: [{"id":6,"name":"Drachenältester"},{"id":7,"name":"Vogelwyvern"},{"id":10,"name":"Fischwyvern"},{"id":11,"name":"Leviathan"},{"id":12,"name":"Carapaceon"},{"id":13,"name":"Flugwyvern"}]
        },
        {
          name: "Monster", 
          items: [{"id":5,"rivals":null,"isElder":"No","maxSize":"23.00","name":"Rathalos","minSize":"10.00","monsterType":"Flugwyvern"},{"id":8,"isElder":null,"maxSize":null,"minSize":null,"rivals":null,"name":"Rathian","monsterType":"Flugwyvern"}]
        }
      ]
    }
  }
}
</script>

Expected behavior

Depending on the selected entity type the columns change accordingly to its "fields"

Actual behavior

Strange behavior :D Columns may duplicate?

improvement need-investigation

opened by MeikelLP 24

make b-table with take number as px, or else user string directly

Fixes #

Proposed Changes

It would be really nice if we could use table column width as either a number, that is pixels as it is now, but if given as a string it it could be use it directly ?

This PR change the column render to handle this situation.

opened by druppy 23
Better PurgeCSS support
Description

Following the discussion in https://github.com/buefy/buefy/issues/1086#issuecomment-537259823, the Tailwind CSS documentation has a nice page about PurgeCSS, particularly on how class names should be presented in the processed code: https://tailwindcss.com/docs/controlling-file-size/#writing-purgeable-html

Their advice is simply to not dynamically construct class names, since PurgeCSS doesn't perform any sort of code evaluation (it just matches strings that may look like classes in one's code). Buefy has just a few cases like this (e.g. navbar), so to make it work out of the box Buefy should replace these cases to use complete string literals for class names. Another option could be to document the required whitelist; for instance, this is what I am using right now on a vue-cli project:

const PurgecssPlugin = require('purgecss-webpack-plugin'); const glob = require('glob-all'); const path = require('path'); module.exports = { configureWebpack: { plugins: [ new PurgecssPlugin({ paths: glob.sync([ path.join(__dirname, './node_modules/buefy/**/*.@(vue|js)'), path.join(__dirname, './public/index.html'), path.join(__dirname, './src/**/*.@(vue|js)') ]), whitelistPatterns: [/^navbar-/, /^has-text-/, /^fa-/, /^has-numberinput-/] }) ] } }

Why Buefy need this feature

PurgeCSS can greatly reduce the size of production builds, reducing loading times and therefore improving the overall user experience. PurgeCSS is also the only tool of its kind that easily integrates with Vue projects thanks to purgecss-webpack-plugin.
feature request contribution welcome stale
opened by pera 23
Customizing

Hello, trying to override some default bulma's variables.

// Fonts @import url('https://fonts.googleapis.com/css?family=Rubik:400,500&subset=cyrillic');

// Import Bulma's core @import "~bulma/sass/utilities/_all";

$family-sans-serif: "Rubik", "Roboto", sans-serif;

// Set your colors $lightblue: #ecf5fe; $primary: #8c67ef; $primary-invert: findColorInvert($primary); $twitter: #4099FF; $twitter-invert: findColorInvert($twitter);

// Setup $colors to use as bulma classes (e.g. 'is-twitter') $colors: ( "white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert), "twitter": ($twitter, $twitter-invert), );

// Links $link: $primary; $link-invert: $primary-invert; $link-focus-border: $primary;

// Import Bulma and Buefy styles @import "~bulma"; @import "~buefy/src/scss/buefy";

All example variables working good, but for example $family-sans-serif or $background-color are not working at all.

Font family still default: font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
need more info

opened by tridcatij 23
new property Autocomplet.disable

Description

A new property for the autocomplete componentent to set it disable.

Why Buefy need this feature

Consistence though all components. :balloon:

Workarround ATM

use a wrapper component which will show a b-inut.disabled
feature request

opened by flipflopsimsommer 0
Buefy Date picker Max year range not following the max-datetime range given

Buefy version: [0.9.0 Vuejs version: [2.6.10] OS/Browser: windows 11

Description

When set a max-datetime duration something above 10 years component does not show year range above 10 years there is a limitation in the components to cut down the years in future max upto 10 years.

This bug shows in your example codes as well. I have attached screenshot below.

Steps to reproduce

Expected behavior

default past years-range is 100 from current year and default future year-range is 10 this should be 100 as well. Other wise component behaviour is not same as past and future. once set the max-datetime to 50 years user suppose to see all those years not limited to 10 years from the current year by default.

as per my knowledge setting up years-range:[-100, 100] by default this error could be easily handled. Component needs similar behavior when picking dates in past and future.

opened by Nutcracker52 1
Bump minimatch from 3.0.4 to 3.1.2
Bumps minimatch from 3.0.4 to 3.1.2.

Commits

699c459 3.1.2

2f2b5ff fix: trim pattern

25d7c0d 3.1.1

55dda29 fix: treat nocase:true as always having magic

5e1fb8d 3.1.0

f8145c5 Add 'allowWindowsEscape' option

570e8b1 add publishConfig for v3 publishes

5b7cd33 3.0.6

20b4b56 [fix] revert all breaking syntax changes

2ff0388 document, expose, and test 'partial:true' option

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 0
Bump decode-uri-component from 0.2.0 to 0.2.2
Bumps decode-uri-component from 0.2.0 to 0.2.2.

Release notes

Sourced from decode-uri-component's releases.

v0.2.2

Prevent overwriting previously decoded tokens 980e0bf

https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

v0.2.1

Switch to GitHub workflows 76abc93

Fix issue where decode throws - fixes #6 746ca5d

Update license (#1) 486d7e2

Tidelift tasks a650457

Meta tweaks 66e1c28

https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

Commits

a0eea46 0.2.2

980e0bf Prevent overwriting previously decoded tokens

3c8a373 0.2.1

76abc93 Switch to GitHub workflows

746ca5d Fix issue where decode throws - fixes #6

486d7e2 Update license (#1)

a650457 Tidelift tasks

66e1c28 Meta tweaks

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 0
Bump express from 4.15.0 to 4.17.3
Bumps express from 4.15.0 to 4.17.3.

Release notes

Sourced from express's releases.

4.17.3

deps: accepts@~1.3.8

deps: mime-types@~2.1.34

deps: [email protected]

deps: [email protected]

deps: [email protected]

deps: [email protected]

deps: [email protected]

deps: [email protected]

deps: [email protected]

Fix handling of __proto__ keys

pref: remove unnecessary regexp for trust proxy

4.17.2

Fix handling of undefined in res.jsonp

Fix handling of undefined when "json escape" is enabled

Fix incorrect middleware execution with unanchored RegExps

Fix res.jsonp(obj, status) deprecation message

Fix typo in res.is JSDoc

deps: [email protected]

deps: [email protected]

deps: [email protected]

deps: [email protected]

deps: [email protected]

deps: [email protected]

deps: type-is@~1.6.18

deps: [email protected]

deps: [email protected]

deps: [email protected]

Fix maxAge option to reject invalid values

deps: proxy-addr@~2.0.7

Use req.socket over deprecated req.connection

deps: [email protected]

deps: [email protected]

deps: [email protected]

deps: [email protected]

deps: [email protected]

deps: [email protected]

deps: [email protected]

pref: ignore empty http tokens

deps: [email protected]

deps: [email protected]

deps: [email protected]

4.17.1

Revert "Improve error message for null/undefined to res.status"

4.17.0

Add express.raw to parse bodies into Buffer

Add express.text to parse bodies into string

... (truncated)

Changelog

Sourced from express's changelog.

4.17.3 / 2022-02-16

deps: accepts@~1.3.8

deps: mime-types@~2.1.34

deps: [email protected]

deps: [email protected]

deps: [email protected]

deps: [email protected]

deps: [email protected]

deps: [email protected]

deps: [email protected]

Fix handling of __proto__ keys

pref: remove unnecessary regexp for trust proxy

4.17.2 / 2021-12-16

Fix handling of undefined in res.jsonp

Fix handling of undefined when "json escape" is enabled

Fix incorrect middleware execution with unanchored RegExps

Fix res.jsonp(obj, status) deprecation message

Fix typo in res.is JSDoc

deps: [email protected]

deps: [email protected]

deps: [email protected]

deps: [email protected]

deps: [email protected]

deps: [email protected]

deps: type-is@~1.6.18

deps: [email protected]

deps: [email protected]

deps: [email protected]

Fix maxAge option to reject invalid values

deps: proxy-addr@~2.0.7

Use req.socket over deprecated req.connection

deps: [email protected]

deps: [email protected]

deps: [email protected]

deps: [email protected]

deps: [email protected]

deps: [email protected]

deps: [email protected]

pref: ignore empty http tokens

deps: [email protected]

deps: [email protected]

deps: [email protected]

4.17.1 / 2019-05-25

... (truncated)

Commits

3d7fce5 4.17.3

f906371 build: update example dependencies

6381bc6 deps: [email protected]

a007863 deps: [email protected]

e98f584 Revert "build: use [email protected] for Node.js < 4"

a659137 tests: use strict mode

a39e409 tests: prevent leaking changes to NODE_ENV

82de4de examples: fix path traversal in downloads example

12310c5 build: use nyc for test coverage

884657d examples: remove bitwise syntax for includes check

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 0

Releases(v0.9.22)

v0.9.22(Sep 11, 2022)
New features

Shipped with Bulma 0.9.4 (release note)

Add messages prop to message slot in field (thanks @GMartigny)

Add long-press prop to number input (thanks @SylvainMarty )

Fixes

Fix input type not updated when type prop is changed (thanks @GMartigny)

Fix horizontal classes typo (thanks @daniil4udo)

Fix #3484 table overflow when last column is numeric (thanks @gmercey)

Fix #3731 input with emoji don't show the right length (thanks @joaoGabriel55)

Source code(tar.gz)
Source code(zip)
v0.9.21(May 21, 2022)
Fixes

Fix #3734 refresh columns on destroy

Fix setting type html attribute on non-button tags (thanks @tcitworld)

Source code(tar.gz)
Source code(zip)
v0.9.20(Apr 17, 2022)
New features

Add search feature to docs (thanks @Mars073)

Add checkbox-type prop to table (thanks @Mars073)

Fixes

Fix #3432 accessibility using keyboard on checkbox into the table (thanks @chadlafontaine)

Fix #3705 validation error on focus instead of blur (thanks @lucraraujo)

Fix #3707 field inner type

Fix issues about colorpicker (thanks @Mars073)

Fix expanded on menu item (thanks @adamgreenhall)

Fix clockpicker close (thanks @s-nesbigall)

Source code(tar.gz)
Source code(zip)
v0.9.19(Mar 2, 2022)
Fixes

Fix theme css build

Source code(tar.gz)
Source code(zip)
v0.9.18(Mar 1, 2022)
New features

Add open and close events to tooltip (thanks @GMartigny)

Improve accessibility of dropdown, collapse and tabs (thanks @mateuswetah)

Fixes

Fix #2889 tooltip when append-to-body

Fix #2998 sidebar close when content is dynamic

Fix #3677 emit active-change when hoverable

Source code(tar.gz)
Source code(zip)
v0.9.17(Feb 21, 2022)
Fixes

Fix #3676 table sort when backend

Source code(tar.gz)
Source code(zip)
v0.9.16(Feb 18, 2022)
New features

Add Font Awesome 6 support (http://fontawesome.com/)

Fixes

Fix #3672 filter table when multiple filters

Fix colorpicker sass warnings (thanks @SomethingNew71)

Source code(tar.gz)
Source code(zip)
v0.9.15(Feb 16, 2022)
New features

New component: Colorpicker, see docs (thanks @Mars073)

Add year to week-number-click event (thanks @geeksilva97)

Add icon-size prop to notification (thanks @matt3188)

Add page input to pagination and table (thanks @chadlafontaine)

Allow any keyword as step of numberinput (thanks @OrestHk)

Fixes

Fix #3614 display zero in numberinput (thanks @rockandre)

Fix #3649 datetimepicker parser when minute is 59

Fix #3663 increment/decrement when v-model is null/undefined

Fix #3664 clip when mobile dropdown is active as modal (thanks @Jimmar)

Fix reset multi-sort table (thanks @nimaebra)

Fix tooltip span to div, w3 validation (thanks @nimbleStalker)

Source code(tar.gz)
Source code(zip)
v0.9.14(Dec 30, 2021)
New features

Add normalize string for search in tables (thanks @matheushahnn)

Add year to week-number-click event (thanks @geeksilva97)

Add start and end slot to tabs

Add active-change event to navbar dropdown (thanks @arusahni)

Fixes

Fix table sort when null values (thanks @Ryan-Case-SingleStone)

Fix queue notification (thanks @geeksilva97)

Fix upload validation (thanks @l1bra2013)

Fix #3599 table using multiple column filters

Fix #3624 reset hovered autocomplete

Source code(tar.gz)
Source code(zip)
v0.9.13(Nov 8, 2021)
Fixes

Fix reset type and message when inner field

Source code(tar.gz)
Source code(zip)
v0.9.12(Nov 8, 2021)
Fixes

Fix #3571 custom-class prop to image

Fix #3572 datepicker timezone

Fix #3577 field loop using message

Source code(tar.gz)
Source code(zip)
v0.9.11(Oct 30, 2021)
Fixes

Fix stay open on mouse click when autocomplete is keep-open

Fix emitting autocomplete header and footer events (thanks @geeksilva97)

Fix loading when using fixed navbar (thanks @geeksilva97)

Fix datetimepicker when use granularity (thanks @geeksilva97)

Fix numberinput increment bug (thanks @geeksilva97)

Fix #3475 attributes duplication on navbar (thanks @GMartigny)

Fix #3490 duplicate tags on select with enter and allow-new

Fix #3543 focused date when is range

Fix #3277 avoid to emit event when clear-on-select

Fix #3418 timepicker hour 12 displayed as 0 (thanks @cain)

New features

New component: Breadcrumb, see docs (thanks @mouadTaoussi)

Add progress bar (remaining time to close) to notification (thanks @mouadTaoussi)

Add selectable-header and selectable-footer props to autocomplete (thanks @JDurman)

Add close-button-aria-label prop to modal (thanks @tcitworld)

Add navbar burger and dropdowns to be focusable and keyboard selectable (thanks @tcitworld)

Source code(tar.gz)
Source code(zip)
v0.9.10(Aug 27, 2021)
Fixes

Fix double select event when clear-on-select

Fix event prevent on "Tab" key of autocomplete

Source code(tar.gz)
Source code(zip)
v0.9.9(Aug 25, 2021)
New features

Add tag prop to navbar dropdown (thanks @GMartigny)

Add select-on-click-outside prop to autocomplete (thanks @elisamuelps)

Add aria-labelledby prop to checkbox and switch (thanks @milad-mirkarimi)

Add icon-right and icon-right-clickable props to datepicker and datetimepicker (thanks @rubjo)

Add caption prop to table (thanks @eveenendaal)

Add pause-on-hover prop to toast (thanks @milad-mirkarimi)

Improve number input validation (thanks @fabiofdsantos)

Enable click event to notification (thanks @franciscoh017)

Show switch control label if slot exists (thanks @cain)

Prevent emitting the prompt value when inputted text is compositing (thanks @soudai-s)

Fixes

Fix autocomplete using keep first (thanks @dauriata)

Fix combination of filters with custom searches (AND operator) (thanks @massimozappino)

Fix avoid reading undefined range on datepicker (thanks @apauly)

Fix sidebar delay on hover leave (thanks @holtolee)

Fix #3431 disable sort when column is not sortable (multisort)

Fix #3438 reset current tag when duplicated

Fix #3442 wrong prop on timepicker

Fix #3461 check if a detail row is visible before trying to close it (thanks @GMartigny)

Fix #3473 emit typing to force reload items on tagsinput

Source code(tar.gz)
Source code(zip)
v0.9.8(Jun 19, 2021)
New features

Shipped with Bulma 0.9.3 (release note)

Support keep first on taginput elements (thanks @fabiofdsantos)

Add missing typehints for the notification component (thanks @maartenvanasperen)

Improve accessibility to dropdown and autocomplete (thanks @eveenendaal)

Add detail-icon prop to Table component (thanks @holtolee)

Add delay prop to Sidebar component (thanks @holtolee)

Fixes

Fix #3329 checkbox autocompletion (thanks @markovejnovic)

Fix datepicker tab navigation with nearby-selectable-month-days prop (thanks @Raljuk)

Fix #3342 iPad detection (thanks @lboecker)

Fix #3333 multiple datepicker stay on month on date removal (thanks @mateusbw)

Fix #3366 notification animation effect on close (thanks @LeoMouyna)

Source code(tar.gz)
Source code(zip)
v0.9.7(Apr 21, 2021)
New features

Add transition appear to tabs/steps (thanks @jermel)

Add draggable-column prop to table (thanks @T0RAT0RA)

Fixes

Resotre tzOffeset on datetimepicker

Fix #3224 datepicker on select a date in the next month when multiple (thanks @markokos01)

Fix #3278 weekdays off by one day (thanks @waldeck-dev)

Fix #3280 controls on number-input when disabled (thanks @service-paradis)

Source code(tar.gz)
Source code(zip)
v0.9.6(Apr 7, 2021)
Fixes

Fix datetimepicker timezone

Fix datepicker when append-to-body and auto open when value change (thanks @service-paradis)

Fix #3258 remove outline from step-item and tab-item on focus (thanks @service-paradis)

Fix #3262 first option selected on taginput when autocomplete (thanks @fabiofdsantos)

Source code(tar.gz)
Source code(zip)
v0.9.5(Mar 29, 2021)
New features

Shipped with Bulma 0.9.2 (release note)

Add rounded prop to Upload (thanks @major-mayer)

Add icon-right-type prop to Input (thanks @Propaganistas)

Add icon-right prop to Datepicker (thanks @darotar)

Add cancel-text prop to Snackbar (thanks @adamgreenhall)

Add indefinite prop to Toast (thanks @service-paradis)

Automatically select hovered option on blur for Autocomplete (thanks @fabiofdsantos)

Add aria-label prop to Modal (thanks @crowdcow-shae)

Add alt attribute to placeholder image (thanks @chazmcgarvey )

Add caption slot to Image (thanks @chazmcgarvey )

Add defaultSwitchRounded default configuration option (thanks @service-paradis)

Add detail-transition prop to Table (thanks @service-paradis)

Accept Date as values for Select (thanks @service-paradis)

Display events on unselectable Datepicker cell (thanks @service-paradis)

Add aria-minus-label and aria-plus-label functions for b-numberinput (thanks @service-paradis)

Add th-attrs and td-attrs functions for b-table

Improve a11y on tab component (thanks @service-paradis)

Fixes

Fix #2678: tab navigation with boxed navbar dropdown (thanks @yuwu9145)

Fix #2848: incorrect inset shadow for b-radio-button (thanks @service-paradis)

Fix #2879: open DatetimePicker using the enter key (thanks @service-paradis)

Fix #2990: table sorting on multiple column (thanks @yuwu9145)

Fix #2994: table striped style with sticky columns (thanks @service-paradis)

Fix #3011: blur events for ClockPicker (thanks @yuwu9145)

Fix #3022: use aria labels on table pagination buttons (thanks @service-paradis)

Fix #3028: use aria labels on pagination next/previous buttons (thanks @service-paradis)

Fix #3035: autocomplete default content width in modal

Fix #3040: fix mutation of value in multiple dropdown (thanks @VictorCazanave)

Fix #3056: reset time on carousel when using arrows (thanks @harryJst)

Fix #3104: defaultDialogConfirmText not working

Fix #3107: keyboard usage with Datepicker date range (thanks @service-paradis)

Fix #3109: handle number values as expected for NumberInput (thanks @yuwu9145)

Fix #3113: dropdown with append-to-body z-index when inactive (thanks @Dragoncall)

Fix #3119: duplicated hovered event with Autocomplete (thanks @fabiofdsantos)

Fix #3124: restore tree shaking functionnality with default config (thanks @MartinodF)

Fix #3135: multiple fixed Navbar on the same page (thanks @WTDuck)

Fix #3161: display close button when Modal is displayed at start (thanks @aglio)

Fix #3168: wrong DatetimePicker behavior with empty value

Fix #3177: navigate to Datepicker footer using Tab (thanks @service-paradis)

Fix #3195: Tooltip auto-close with inside and outside (thanks @elC0mpa)

Fix #3216: unexpected form submit on enter in Autocomplete

Fix #3226: reactive Datepicker dates when using multiple (thanks @service-paradis)

Fix #3235: emit event on Table listeners (thanks @service-paradis)

Fix #3247: Remove extraneous a element in tag (thanks @service-paradis)

Source code(tar.gz)
Source code(zip)
v0.9.4(Oct 30, 2020)
New features

Shipped with Bulma 0.9.1

Add is-light variant to tooltip (thanks @service-paradis)

Add support for multiple progress bars (thanks @service-paradis)

Add cellclick event to b-table (thanks @dauriata)

Add controls-alignment prop to Numberinput (thanks @jonagoldman)

Add left-label prop to switch component (thanks @kaangokdemir)

Add indicator prop to show Slider value inside thumb (thanks @re2005)

Add autoFocus prop to Modal (thanks @mateuswetah)

Add aria-close-label prop to Taginput (thanks @service-paradis)

Support locale in Slider (thanks @service-paradis)

Add sticky-checkbox option to b-table (thanks @Numenorian)

Add rounded prop to table pagination (thanks @nastiaKuzanastasia.kuznetsova)

Add tooltip-always prop for Slider component (thanks @kaangokdemir)

Add #header slot inside of b-message to place a custom header (thanks @m4st3rm4tz3)

Add week-number-click event to Datepicker

Add toggleDetails to default Table slot

Add invalid event to Upload (thanks @adamgreenhall)

Add custom-search prop to table column

Fixes

Fix #2858: Too much events fired by BNavbar component (thanks @service-paradis)

Fix problem using lazy prop for Image component (thanks @service-paradis)

Fix #2862: setSelect null when clear button is triggered (thanks @re2005)

Fix #2851: table current page update parent value (thanks @re2005)

Fix #2865: table visible column count (thanks @service-paradis)

Fix #2893: select height in Datepicker when using label-position="inside" (thanks @service-paradis)

Fix #2904: check for null/undefined and not any false for Numberinput (thanks @damian-bal)

Use $slider-track-background for Slider track background (thanks @service-paradis)

Fix #2853: Sidebar closes when clicking on dynamically visible elements (thanks @service-paradis)

Fix #2916: select inside carousel (thanks @Tofandel)

Fix #2683: Datepicker focus when using arrow keys (thanks @service-paradis)

Fix Datepicker initial value fullYear when v-model is present (thanks @re2005)

Fix #2914: Label overlapping input text (thanks @service-paradis)

Fix #2933: sidebar can-cancel docs

Fix #2909: rounded prop to datetimepicker

Fix #2938: border-right missing in timepicker select (thanks @service-paradis)

Fix #2949: Do not emit drag/drop events if table is not draggable (thanks @service-paradis)

Fix #2945: Checking if minNumber is undefined before assigning it in NumberInput (thanks @elC0mpa)

Fix dropdown when expanded and append-to-body

Fix #2940: trigger tooltip when append-to-body

Fix MenuItem expanded prop update (thanks @aquaminer)

Fix #2944: header slot on tabs (thanks @yuchaosydney)

Fix #2871: Improve tabbing with autocompleted taginputs (thanks @rubjo)

Fix #3003: close tooltip when triggers is focus

Fix #2918: columns prop when individual import

Fix sidebar z-index

Fix #2977: disable scroll when sidebar is overlay

Source code(tar.gz)
Source code(zip)
v0.9.3(Sep 3, 2020)
New features

Add animation prop to steps and tabs

Add range to datepicker when type is month (thanks @ryo-gk)

Add after-enter and after-leave events tp modal (thanks @aglio)

Add min-step prop to number input (thanks @abroekhof)

Add lazy prop to input (thanks @304NotModified)

Add centered propt to navbar (thanks @holtolee)

Add new progress bar text color (thanks @service-paradis)

Fixes

Fix #2830 carousel animation refresh (thanks @Tofandel)

Fix #2824 background color marging when table cards (thanks @holtolee)

Fix empty slot check in autocomplete

Fix empty slot name in taginput (thanks @rubjo)

Fix contextmenu event always being prevented on tooltips (thanks @adriaanmeuris)

Fix use correct sidebar breakpoint variable (thanks @btkostner)

Fix focused date when max date < current date (thanks @re2005)

Source code(tar.gz)
Source code(zip)
v0.9.2(Aug 21, 2020)
New features

Add group-label and group-options prop to autocomplete and taginput

Add support to vnode array on programmatic component using message prop

Add defaultTooltipDelay constructor option

Add contextmenu event to tooltip triggers

Add alt, src-fallback and error prop to image (thanks @service-paradis)

Add append staticClass to tooltip when append-to-body

Fixes

Fix #2759 overlay on table when loading

Fix #2767 restore v-html on programmatic component (dialog, snackbar, toast, modal, loading, notification)

Fix #2773 remove select-arrow-color in order to use Bulma input-arrow sass variable

Fix #2774 datepicker weekday names by locale

Fix #2778 tooltip using append-to-body and always (thanks @jacenre)

Fix #2783 unclickable content on tooltip

Fix #2789 space on menu-item

Fix #2791 right margin on number input (thanks @user501254)

Fix taginput default height in order to be compliant with Bulma 0.8.x breaking changes

Source code(tar.gz)
Source code(zip)
v0.9.1(Aug 18, 2020)
New features

Add is-expanded class to menu item (thanks @btkostner)

Fixes

Fix #2750 internal html to vdom using programmatic components

Fix #2751 table props index value

Fix #2752 incorrect base css

Fix #2753 field type when addons

Fix #2761 close tooltip when delay

Fix indeterminate watcher in progress (thanks @service-paradis)

Source code(tar.gz)
Source code(zip)
v0.9.0(Aug 16, 2020)
Breaking changes

Vue.js 2.6+ is now the minimum required version

Bulma 0.8.0 and 0.9.0

Table, new default slot and table column syntax

From

<b-table :data="myData"> <template slot-scope="props"> <b-table-column field="name" label="Name"> {{ props.row.name }} </b-table-column> <b-table-column field="age" numeric label="Age"> {{ props.row.age }} </b-table-column> </template> </b-table>

To

<b-table :data="myData"> <b-table-column field="name" label="Name" v-slot="props"> {{ props.row.name }} </b-table-column> <b-table-column field="age" label="Age"> <template v-slot:default="props"> {{ props.row.age }} </template> </b-table-column> </b-table>

Add triggers prop and remove hoverable prop to dropdown

Add placeholder option to number inputs removing default value 0 (thanks @rcoundon)

Show check-all checkbox when table cards

Refacor carousel and carousel list and removing config prop too (thanks @Tofandel)

Add position prop and default alignment to skeleton (thanks @EmmanuelVlad)

Replace is-active with active prop to navbar

Replace default value of defaultDatepickerYearsRange constructor option from [-100, 3] to [-100, 10]

Build with condense option to avoid leading/trailing whitespaces

SVG:

$icon-svg-width: auto !default;

$icon-svg-height: auto !default;

Internationalization, Buefy is now using Intl package to format dates and numbers A prop named locale which accept a BCP 47 language tag have been added to some components. The default value for this prop is undefined which will use the browser locale. It can affect the following components:

Progress:

Intl is used to format the displayed value

Rate

Intl is used to format the displayed score

Datepicker and Datetimepicker:

Intl is used to get month names

Intl is used to get week day names

Intl is used to format the displayed date(s)

Intl is used to parse the given date when editable

Timepicker, Clockpicker and Datetimepicker

Intl is used to get separators

Intl is used to format the displayed time

Intl is used to parse the given date when editable

Configuration

defaultTrapFocus is now true. It can affect the following components:

Datepicker

Dialog

Dropdown

Modal

defaultLocale

Default value is undefined, which means it will use the user browser locale

It accept a string with a BCP 47 language tag, or an array of such strings (see Unicode BCP 47 locale identifier).

monthNames

Default value is now undefined. It will use the given locale (default to browser locale) to get localized month names

dayNames

Default value is now undefined. It will use the given locale (default to browser locale) to get localized day names

Use KeyboardEvent.key instead of keyCode. It can affect the following component:

Taginput:

remove-on-keys default is now ["Backspace"] instead of [8]

confirm-key-codes is now called confirm-keys and the default is [",", "Enter"] instead of [13, 188]

New features

New component: Image, see docs

.sync deprecated (except of table), use v-model but you can use .sync until next breaking version

#1953 Add promise support to dialog using defaultPromiseProgrammatically constructor options

#2553 Add trigger slot to datepicker, timepicker and datetimepicker

#2568 Hide content message when empty slot

#2577 Add defaultStatusIcon constructor option and status-icon prop to field

Add icon-size prop to menu item (thanks @cyberShaw)

Add debounce-search prop to table (thanks @sc0ra)

Add reset-on-meridian-change to timepicker (thanks @taverasady)

Add close-icon to tag (thanks @kaangokdemir)

Add close-type to tag input (thanks @kaangokdemir)

Add header-class prop to tab item and step item (thanks @Tofandel)

Add exponential prop to number input (thanks @Tofandel)

Add defaultTabsType and defaultTabsExpanded constructor options (thanks @wrabit)

Improve handle events for customElement components (thanks @vvkk77)

Refactor components (table, tabs, steps, carousel, etc) using provide/inject

Fixes

Fix XSS on programmatic components

Fix #1226 and #2658 using message with fields addons and groups

Fix #2196 carousel v-model sync using arrow navigation buttons (thanks @Tofandel)

Fix #2518 set Autocomplete focus on clear

Fix #2584 default table sort when backend

Fix #2591 carousel does not continue to slide even pause-hover is false (thanks @Tofandel)

Fix #2599 disabled select and input have different colors

Fix #2608 taginput wrong value when allow-duplicates is false (thanks @nithesh247)

Fix #2631 table with sticky searchable column

Fix #2647 progress bar truncate whole number zeroes

Fix #2683 datepicker lost focus using arrow keys

Fix #2684 timepicker hour check using unselectable-dates

Fix #2639 datepicker clone before formatter

Fix #2706 number input steps (thanks @rcoundon)

Fix #2707 autocomplete index error using arrow keys

Fix #2725 open autocomplete when focused

Fix #2732 upload emit input when same file

Fix #2738 regex check when searchable table

Improve datepicker a11y on older browsers (#2641)

Source code(tar.gz)
Source code(zip)
v0.8.20(May 25, 2020)
New features

Add close-on-confirm prop to dialog (thanks @kaangokdemir)

Add bulma-css-vars extension to docs (thanks @wtho)

Fixes

Fix typo activeStep variable (thanks @speedpro)

Fix #2518 open autocomplete on clearable icon when open-on-focus

Source code(tar.gz)
Source code(zip)
v0.8.19(May 17, 2020)
New features

Add value prop to tabs-item and steps-item

Add size prop to skeleton

Add passive-type prop for switch (thanks @kaangokdemir)

#2507 icon-right get higher priority than status icon on input

#2513 add cursor pointer to pickers when not editable

Fixes

Fix #2499 remove prevent click on carousel slide

Fix #2501 set type when vertical on steps (thanks @service-paradis)

Fix #2503 searchable table column slot

Fix #2504 display on skeletons (thanks @EmmanuelVlad)

Fix #2509 keep table search filtering when data are updated (thanks @VictorCazanave)

Fix #2514 radio-button and checkbox-button style

Thanks @roy20021 for vetur tags script !

Source code(tar.gz)
Source code(zip)
v0.8.18(May 10, 2020)
New features

Add message slot to field

Add scrollable and max-height to dropdown (thanks @franciscoh017)

Add rounded prop to skeleton

Add mobile-mode prop and $steps-mobile-max-width SCSS variable to step

Add expand-on-hover-fixed prop to sidebar

Add expanded prop to upload (thanks @kaangokdemir)

Add close-type prop to tag (thanks @kaangokdemir)

Add defaultTabsAnimated constructor options

#2474 Add icon-click event to autcomplete

#2487 Add native event as second parameter of select event on autocomplete

Fixes

Fix security (XSS) on message field

Fix taginput shallow copy in watcher (thanks @lunfel)

Fix #2456 double message when field horizontal and multiple fields

Fix #2459 checkbox, radio, switch group on mobile

Fix #2469 keep sort during search

Fix #2485 datepicker and timepicker default shadow when not editable

Fix #2489 dropdown item padding on mobile when has-link

Fix #2493 clean hovered on select option (autocomplete and taginput)

Source code(tar.gz)
Source code(zip)
v0.8.17(Apr 25, 2020)
New features

Add types to ConfigProgrammatic

Fixes

Fix #2438 create modal content only when is active

Source code(tar.gz)
Source code(zip)
v0.8.16(Apr 22, 2020)
New features

New component: Skeleton, see docs

Add destroy-on-hide prop to modal

Add searchable slot to table (thanks @service-paradis)

Add icon-right prop to autocomplete

Add vertical and rounded props to steps (thanks @service-paradis)

Add step prop to step item (thanks @service-paradis)

Add card-layout prop to table

Add is-row-selectable prop to table

Fixes

Fix icon type to account for colors that are hyphenated (thanks @BrauBeast)

Fix width of options menu when autocomplete on taginput

Fix #2156 focus on tag remove

Fix #2211 check only one tab selected at once (thanks @service-paradis)

Fix #2328, #2358 slider resize (thanks @service-paradis)

Fix #2364 close sidebar when is not overlay

Fix #2371 clean hovered after select

Fix #2381 label-position when position is right

Fix #2425 reactive data on carousel list

Source code(tar.gz)
Source code(zip)
v0.8.15(Mar 31, 2020)
Fixes

Fix check whitelist on fixed sidebar

Fix static sidebar on press esc key

Source code(tar.gz)
Source code(zip)
v0.8.14(Mar 31, 2020)
New features

New component: Sidebar, see docs

Add append-to-body prop to dropdown, autocomplete, datepicker, timepicker and datetimepicker

Add dropdown-position prop to dropdown

Add collapsible prop to navbar dropdown

Fixes

Fix switch elastic animation for non-rounded (thanks @service-paradis)

Fix #1666 native validation on datepicker

Fix #2317 default icon prev and next (thanks @service-paradis)

Fix #2325 native validation on autocomplete

Fix #2336 animation on tabs when vertical (top - bottom)

Source code(tar.gz)
Source code(zip)