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

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


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


<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

    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

    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

    1. Is Buefy working good on SSR? I haven't touch it yet.
    2. What you find about my thoughts? Disagree with anything?
    3. What you think it's missing mostly?
    discussion 
    opened by rafaelpimpa 48
  • Datepicker is one day off

    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

    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

    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.

    ScreenGrab

    need-investigation 
    opened by jaredpg1 30
  • ES Module for browsers

    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+

    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

    [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

    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

    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/**/*[email protected](vue|js)'),
              path.join(__dirname, './public/index.html'),
              path.join(__dirname, './src/**/*[email protected](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

    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
  • Disable infinite scroll output

    Disable infinite scroll output

    The autocomplete component has a property that checks if it should emit infinite scroll events. This property only gets checked during mounted and destroyed. If you update the property to false the component should not emit the infinite-scroll event anymore.

    opened by Sjerd 0
  • progress bar won't update on Message

    progress bar won't update on Message

    Hello, I'm using a simpliest example of Message w/ progress bar attached, and the bar does not seem to be updated. All styles and values are in place, but the progress value is not decreasing, console log is empty. I tried importing individual components and the whole Buefy -- same result.

    Non-working example: https://codepen.io/feedanalytics/pen/YzvNVzN

    Can it be related to https://github.com/buefy/buefy/pull/3754? If so, when can we expect it to be released?

    Thanks!

    Buefy version: [0.9.22] Vuejs version: [2.7.13] OS/Browser: Monterey / Chrome

    opened by neonanal 0
  • Table: in a numeric column header, the sort icon is on the right side, but should be on the left

    Table: in a numeric column header, the sort icon is on the right side, but should be on the left

    Overview of the problem

    In a numeric column header, the sort icon is on the right side, but it should be on the left.

    Buefy version: 0.9.22 Vuejs version: 2.6.14 OS/Browser: macOS Big Sur 11.7/Ungoogled Chromium 106.0.5249.103

    Description

    In a numeric column header, the sort icon is on the right side, but according to the documentation, it should be on the left.

    Steps to reproduce

    1. Create a table with a numeric sortable column.

    Expected behavior

    • sort icon on the left

    Actual behavior

    • sort icon on the right
    • this is apparent in the documentation also: https://buefy.org/documentation/table#async-data (see Vote Count column)
    opened by anti-destin 0
  • Full width sidebar doesn't have a close button

    Full width sidebar doesn't have a close button

    Overview of the problem

    Buefy version: [0.9.22] Vuejs version: [3.2.40] OS/Browser: Windows 11/Brave

    Description

    Full width sidebar does not have a close button. It can be closed by pressing the Esc key however. This behaviour can confuse a user who is desperately trying to close the sidebar but is unable to find the close/exit button.

    Note: As a controlled component, one can always add a button inside the sidebar to hide it. That is not the point of this bug report.

    Steps to reproduce

    1. Navigate to Sidebar component in the website
    2. Turn ON the fullwidth switch
    3. Click the Show button
    4. A user won't be able to close unless s/he hits the Esc key

    Expected behavior

    Provide an internal default button and a default internal location for that Close button for the end-user to be able to close the fullwidthed Sidebar

    opened by swarmukhdefault 1
  • Change the background color dialogs

    Change the background color dialogs

    Hi,

    Description: Add the property to change the background color of dialogs and/or modals.

    Why To increase the number of properties that can be edited in a dialog and to give more emphasis to the dialog (is-danger, is-warning, etc.)

    feature request 
    opened by urielgi 0
  • Close tooltip when button clicked

    Close tooltip when button clicked

    If a click on the object the tooltip is encapsulating switches to a different screen, the tooltip can remain open. (and won't close until you return to the object, hover over it and hover-off) When the tooltip detects a click, if the tooltip is already open and the click is about to cause a switch away circumventing the default hover / blur close, then enforce a close first.

    No issue logged for this, happy to see this scrapped if there's a better way but it seems like an easy one-liner.

    Proposed Changes

    Just one; force a tooltip close in the tooltip onclick event. Reason; if your tooltip encompasses a button which causes a cached VueRouter switch to another pane, the blur event doesn't get called and the tooltop can stay on the screen. Click always needs to close the tooltip if it's open.

    Example that exhibits the issue;

    <b-tooltip 
        label='Show emails from the current service provider'
        position="is-top" type="is-dark" class="square-tooltip"
        v-if="allowEmails" append-to-body>
            <a class="square-button is-info" type="button" @click="onClickEmails">                    
                <div class="square-icon"><b-icon icon="email-search-outline" size="is-medium"></b-icon></div>
                <div class="square-text">Emails</div>
            </a>
    <b-tooltip>
    opened by oddjobz 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)

  • 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)

  • 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)

  • 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)

  • v0.9.12(Nov 8, 2021)

  • 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)

  • 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)

  • 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)

  • 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)
Owner
Buefy
Lightweight UI components for Vue.js based on Bulma.
Buefy
Simple components library used for building lightweight vuejs projects

slim-ui slim-ui is a simple vue components library contains needed UI elements. It was developed to solve zerodha's application frontend needs and gen

htoniv 53 Nov 12, 2022
We are refactoring it, using the latest Vue and Bulma. WIP

Vue Bulma WIP We are refactoring it, using the latest Vue and Bulma. Todo vue-next vue-bulma bulma v0.8 modules Sponsors Currently, I am a freelancer

null 9.5k Nov 26, 2022
👩‍🎨👨‍🎨 A minimalist dark design system for Vue.js. Based components designed for the insomniacs who enjoy dark interfaces as much as we do.

Documentation You can browse the documentation for Vue Dark Mode on the website. Installation npm install @growthbunker/vuedarkmode # Or if you prefe

Julien Le Coupanec 1.1k Nov 16, 2022
A responsive Vue UI library for web site interfaces

Vuikit A responsive Vue 2 UI library for web site interfaces based on the UIkit 3 framework. If you are enjoying Vuikit and want to support the projec

Vuikit 1.5k Nov 2, 2022
Vue components based on the JUI components available in Vue.js

vue-uix A vue component library based on the JUI components available in vuejs. Installation NPM npm install --save vue-uix Browser (Legacy) If you ar

JUI Framework 15 Feb 9, 2021
New Framework Components for Vue.js 2

Supporting through Patreon Vuesax is an open source MIT project if you want to contribute to keep improving, If you are interested in supporting this

Lusaxweb 5.5k Nov 19, 2022
🎨 Vue.js components implementing Microsoft Fluent Design

Vuent Vuent is a set of reusable UI components for Vue created according to Microsoft Fluent Design, in particular its official variation about buildi

Artur Mizera 269 Nov 27, 2022
Components library for VUE used by the Ebury online team

Components library for VUE used by the Ebury online team

Ebury 19 Nov 24, 2022
🧬 Equal is a Vue 3 UI library based on TypeScript

Equal UI Equal UI is a Vue 3 components library with 30+ components based on TypeScript and personal design system. Explore Equal UI docs Features Ent

Yan Savinov 858 Nov 16, 2022
A mostly renderless Vue UI component and utility framework.

Banshee A mostly renderless Vue UI component and utility library. Introduction Banshee is a component library for Vue which seeks to only provide the

null 88 Sep 23, 2022
The components are mostly a straight-forward port of the PatternFly 4 components to Vue 3

The components are mostly a straight-forward port of the PatternFly 4 components to Vue 3 with some differences where it makes sense to improve ergonomics or add new features.

Massimiliano Torromeo 13 Nov 2, 2022
A Vue.js 2 UI component library.

atlas Documentation and examples at https://vue-atlas.com Installation and usage $ yarn add vue-atlas # or $ npm install vue-atlas Usage Import everyt

Jonathan Pyers 184 Nov 24, 2022
fun vue component library for my own use.

@knowscount/vue-lib vue component library containing fun stuff. ?? to-dos marked in issues. ?? usage see #3. to install the library, run npm install -

KnowsCount 9 Jun 13, 2021
Vue UI and data visualization components

DevExtreme Vue UI and Visualization Components This project allows you to use DevExtreme components in Vue applications. Documentation Technical Demos

Developer Express Inc. 243 Nov 10, 2022
A Component Library for Vue3.0 + ts

A Component Library for Vue3.0 + ts

tflin 12 Jul 7, 2022
DaisyUI - Tailwind CSS Components Adds component classes like btn, card and more to Tailwind CSS

DaisyUI - Tailwind CSS Components Adds component classes like btn, card and more to Tailwind CSS

Pouya Saadeghi 15.7k Nov 26, 2022
Material web components for Vue.js

If you're looking for vue-mdl, check the mdl branch. To learn about what's happening, check #139 Vue Material Components web Material Components Web f

Eduardo San Martin Morote 1.2k Oct 10, 2022
Bootstrap 3 components implemented by Vue 2.

If this project has helped you out, please support it with a star ?? . 中文文档 Introduction uiv is a Bootstrap 3 component lib implemented by Vue 2. Ligh

uiv 916 Nov 20, 2022
Bootstrap components built with Vue.js

vue-strap Bootstrap components built with Vue.js. This repository contains a set of native Vue.js components based on Bootstrap's markup and CSS. As a

Willem Franco 341 Jul 1, 2022