« Changelog History


buefy v0.9.0 Release Notes

Release Date: 2020-08-16 // over 3 years ago

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

    0️⃣ 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
    • 0️⃣ #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
    • 0️⃣ #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)