buefy

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)

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)

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)

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)

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

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)

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

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)

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)

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

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 !

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)

New features

• Add types to ConfigProgrammatic

Fixes

• Fix #2438 create modal content only when is active

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

Fixes

• Fix check whitelist on fixed sidebar
• Fix static sidebar on press esc key

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)

New features

• Add selected slot to taginput
• Add scrollable prop to table
• Add sticky prop to table column
• Add cell-class and header-class prop to table column
• Add height prop to table
• Add filters-event prop to table
• Add slide animation to menu item and in the core code
• Improve accessibility to datepicker (thanks @service-paradis)
• #2269 Add bigger-slider-focus prop to slider (thanks @melogustavo)
• #2290 Add activable prop to menu
• #2308 Add max-height prop to autocomplete

Fixes

• Fix datepicker clearing selected array in the first selection when multiple
• Fix #2195 switch transition on Safari (thanks @bender-a)
• Fix #2205 datepicker table rendering on Safari (thanks @bender-a)
• Fix #2236 table performance on destroy
• Fix #2257 button with icon and without default slot
• Fix #2262 numberinput custom icons
• Fix #2270 taginput when remove a tag on mobile
• Fix #2272 check input ref before to focus (thanks @bender-a)
• Fix #2273 end animation on dropdown
• Fix #2292 sticky header using subheading
• Fix #2293 focus on icon click when type "textarea"

New features

• Add sticky-header prop to table

Fixes

• Fix #2254 button with icon in the default slot
• Fix #2250 taginput option item when autocomplete without slot

• Add multi column sorting to table (thanks @suneab)
• Add clearable prop to autocomplete (thanks @melogustavo)
• Add icon-right prop to input (thanks @melogustavo)
• Add tag slot to taginput (thanks @jacobgoh101)
• Add tz-offset prop to datepicker (thanks @zedrdave)
• Add repeat prop to carousel (thanks @GerryWilko)
• Add icon prop to nofitication and message (thanks @service-paradis)
• Add multiline prop to tabs
• Add aria attributes to dropdown (thanks @mariusj)

Fixes

• Fix missing export taginput component
• Fix prevent table thead jumping when sorting is changed
• Fix #2152 tab-item rendering using header slot (thanks @service-paradis)
• Fix #2153 text overflow to progress bar (thanks @service-paradis)
• Fix #2157 carousel when autoplay and no pause
• Fix #2160 remove body classes of navbar on destroy
• Fix #2185 taginput when over maxtags
• Fix #2187 taginput rendering when attached and over maxtags
• Fix #2189 'undefined' on carousel (thanks @service-paradis)
• Fix #2190 remove margin when not exists text on button
• Fix #2191 navbar dropdown close on click when hoverable
• Fix #2216 menu item warning
• Fix #2217 percentage calc on progress bar (thanks @service-paradis)
• Fix #2219 field label when position is inside and add-on
• Fix #2227 double blur event emitted by pickers
• Fix #2228 check if the row is checkable before unchecking it (thanks @service-paradis)
• Fix #2240 check ref datetimepicker on mount when mobile

New features

• Improve rendering performance on table
• Add focusand blur event on datetimepicker
• Add animation prop to notification (thanks @service-paradis)
• Add trap-focus prop to datepicker (thanks @service-paradis)
• Add hour-increment prop to timepicker (thanks @LeoMouyna)
• Add backend-filtering prop and filters-change event to table (thanks @zeljkokalezic)

Fixes

• Fix #1473 tooltip z-index (lower than modal) (thanks @rolandschuetz)
• Fix #1889 add body padding for fixed spaced navbar (thanks @a-kriya)
• Fix #2109 disabled button (thanks @service-paradis)
• Fix #2114 limit the select options of month in Datepicker with min-date and max-date (thanks @service-paradis)
• Fix #2121 fix tabs warning when items aren't already visible (thanks @service-paradis)
• Fix #2133 table colspan when detailed and hidden icon (thanks @rolandschuetz)
• Fix #2135 keep open taginput on add/remove when open-on-focus
• Fix #2141 taginput using sortablejs