MDB 5 Vue Changelog

Don't miss MDB Vue updates! Join our mailing list & receive information whenever a new update is released.

    By subscribing you agree to receive the newsletter & commercial information from the data administrator StartupFlow s.c. Kijowska 7, Warsaw. Policy

    Version v3.2.0, released 23.01.2023

    New features

    Fixed & improved

    • Synchronized .scss files with MDB Standard 6.0.1
    • Collapse - Fixed bug with duration prop when duration works as a delay and not changing the time of collapsing element.
    • Drag and drop - Fixed method in MDBSortable component addItem and resetPosition in MDBDraggable.
    • Mention - Fixed bugs with open and close methods.
    • Validation:
      • Added support for new components - MDBSelect and MDBAutocomplete.
      • Updated styles and props. Check out documentation page of those components to test it.
    • Timepicker:
      • Fixed bugs bound to 12-hours format with min and max properties.
      • Fixed bugs with disablePast and disableFuture properties.
    • Stepper:
      • Added new prop animation which allows to disable animation between switching steps.
      • Fixed animation problems after switching steps in vertical version.
    • Autocomplete:
      • Added new prop keepOpen which allows to stop closing the list after click outside and choosing value (in this case for closing list call close method).
      • Fixed emitting close event.
    • Color picker - Added new props:
      • disableAlphaRangeInput for making the alpha range input disabled.
      • removeAlphaInput for removing the fourth input to change the opacity (alpha) of the picked color.
      • disableHueRangeInput for making the hue range input disabled.

    Version v3.1.1, released 21.11.2022

    New features

    • MDB Vue is now compatibile with Nuxt - check out our newest tutorial how integrate our library with this SSR framework.

    Fixed & improved

    • Datepicker:
      • Fixed bug when disabled date was picking after clicking cancel button.
      • Fixed bug with clear button displaying NaN in header after click.
    • Timepicker - Fixed starting animation while putting the picker inside modal.
    • Modal - Fixed bug with moving content while putting modal/picker inside other modal.
    • Calendar - Fixed validation in new/edit event modal.
    • File - Fixed prop type to remove error, which makes MDB Vue compatibile with Nuxt.
    • Dropdown - Fixed toggle animation; animation is now smoother.
    • ListGroup - Updated code and props to the newest version.
    • Table editor:
      • Fixed bugged modal animation.
      • Fixed bugged inputs which were showing at the top and at the end of table while adding new element.
      • Fixed bugged editing rows.
      • Fixed sorting option while after asc and desc elements of the table were not showing initial positions.

    Version v3.1.0, released 31.10.2022

    New features

    Fixed & improved

    • Removed .npmignore file from repositories - src directory has come back in node_modules
    • Added name to components for stop showing "Anonymous Component" in Vue Devtools
    • Updated Vue version
    • Scrollbar - changed default prop wheelPropagation value to true
    • Datepicker:
      • Fixed closing inline datepicker on clicking outside the picker
      • Fixed selecting date with a custom date format
      • Added possibility to confirm date by select by adding new confirmDateOnSelect property
      • Added new props (removeClearBtn, removeCancelBtn, removeOkBtn) to hide action buttons in modal
      • Added possibility to change datepicker header content by adding new customHeader prop and named scoped slot
    • Dropdowns:
      • Fixed bug that occured after rapid clicks on dropdown toggler
      • Added ripple to the toggler
      • Added search option by passing filter prop to MDBDropdownMenu component (example can be found in new page in documentation - Search)
    • Datatables:
      • Fixed search working with advanced data structure
      • Removed All option in pagination from deafult setting
    • DateTimepicker - Added disablePast and disableFuture options
    • Input - Fixed label position issues for inputGroup
    • Modal - Fixed closing modal when initial click down is inside modal itself
    • Alerts, Toasts - Added new prop heightAnimation for animate height change (by default on false)
    • Sidenav - Added search option by passing filter prop to MDBSidenavMenu component (example can be found in new page in documentation - Search)
    • Collapse - Added horizontal version of animation

    Version v3.0.0, released 19.09.2022

    Breaking changes

    • We integrated MDB Vue 3.0.0 with Typescript - which could bring a lot of pros to your projects. It allows you - for example - to see all props which you could use with a particular component without checking the documentation; it provides also a lot additional informations and assets comes with static typing.
    • Our components are using script setup syntax now. This allows you to use it in the same way in your own project which has an impact on the amount of code you create. More about this you can read in the official Vue documentation.
    • We have changed the default build tool which is Vue CLI in favor of faster and lighter Vite - check out the official Vite documentation.
    • With a new release was also a changed version of Vue itself - now it is 3.2 which brought a lot of improvements and fixes.

    Fixed & improved

    • Datepicker:
      • Added disablePast and disableFuture options
      • Fixed bug with reversing picked date in particular format type
    • Timepicker - Added disablePast and disableFuture options
    • DateTimepicker:
      • Added reactive v-model
      • Added two new options: dateTimeSeparator - to change a way to separate date and time in input - and dateFormat - to change date format
    • Drag and drop:
      • Fixed delay option - delay now works properly
      • Fixed scrollable option - scrolling container with draggable element improved
      • Fixed bugs in sortable elements - return animation, dragging objects, moving objects between tables, coping items, sorting items
      • Fixed emitting events
      • Added removeItem method for sortable component
      • Fixed plugin for mobile devices
    • Mention - Fixed visibility of mentioned items while hidden
    • Parallax - Fixed transition styles
    • Transfer - Updated styles
    • Dummy - Updated placeholder link
    • Table editor - Fixed sorting with small letters
    • Caledar - Fixed bugged header which value hasn’t changed when skipping to another month
    • File upload - Fixed removed button in default file option
    • Datatable - Added setActivePage method for pages navigation
    • Dropdowns - Added closing functionality after click on one of the options in dropdown itself
    • Collapse - Fixed bug with resizing open collapses
    • Lightbox - Fixed bug with zooming pictures on mobile devices
    • Transfer - Added possibility to add customId to items

    Design updates

    Our basic color palette has been updated. We toned down our colors to be less flashy and more elegant and subtle. This affects virtually all of our components, so be aware of this before upgrading your project to MDB Vue 3.0.0.

    Read colors docs to learn more about the new palette.

    Breaking changes

    • Our base buttons have a slightly colorful shadow now. For this reason buttons with custom colors (like social buttons) cannot use base modifier classes like .btn-primary, .btn-danger, etc (because they will cast a shadow of a color that may be not consistent with the background color of the buttons). In this case we suggest to remove the modifier class and and add .text-white class to fix the problem with the text color.
    • We implemented a hierarchy in the buttons, so the secondary button changes its color and loses its shadow. We also added a new, tertiary button.
    • Button groups that uses secondary buttons now require .shadow-0 class to fix the problem with a shadow by default added to the .btn-group class.

    Fixed & improved

    Version v2.0.0, released 11.07.2022

    New plugins

    New directives

    Fixed & improved

    • Datatable:
      • Added option All to pagination
      • Added possibility to remove sorting back to default and leaving only ascending and descending
      • Fixed displaying wrong value after passing 0 (number) as data
      • Fixed searching by HTML attributes - search only checks the content of element
      • Improved rendering with HTML elements
    • Datepicker - fixed incorrect selection of values for min and max
    • Stepper:
      • Fixed triggering submit after putting Stepper inside form
      • Added option to disable changing steps by clicking on stepper head
      • Added option to change displayed name for: step, step of, next button and back button
    • Drag and Drop - added new event which returns new items order (emitted after sorting)
    • Rating - fixed rating icons position
    • Select - added tabindex prop
    • Tree view - improved disabled checkbox behavior
    • Sidenav:
      • Added option to lock scroll when Sidenav is open
      • Fixed spacebar scrolling behavior inside sidenav
    • List group:
      • Added new light prop which changes design
      • Added new small prop for MDBListGroup
      • Added new noBorder, spacing and ripple props for MDBListGroupItem
    • Added default flags to valid and invalid colors
    • Autocomplete - blocked clicking in no results found message
    • Table Editor - fixed removing record after clicking cancel
    • Synchronized .scss files with MDB Standard 4.2.0
    • Toasts - added new toast prop which changes design
    • Carousel:
      • Added new innerClass prop which allows adding classes to inner carousel element
      • Added option to use videos via video property in items array
    • Calendar:
      • Changed design to match MDB Standard
      • Redesigned toolbar, events, views and modals
      • Replaced view toggle buttons by a select
      • Created an Add Event button
      • Added Readonly events
      • Added Modules disabling
      • Added Blur option
      • Added Custom attributes integration
      • Improved long events styling
      • Improved displaying short events in week view

    Version v1.14.0, released 30.05.2022

    New feature

    • Added non-invasive option to Modal

    Fixed & improved

    • Lightbox:
      • Improved closing behavior
      • Improved zooming
      • Fixed displaying wrong cursor for disabled image
      • Improved image dragging
      • Improved focus trap behavior
    • Sidenav:
      • Fixed unnecessary animation when page was loaded with a width below modeBreakpoint value
      • Fixed incorrect animation with nonSlim attribute
    • Collapse - fixed animation behavior when the element was clicked before the end of the collapse
    • Datatable - fixed displaying 1 - 10 of 0 instead of 0 of 0 in pagination
    • Stepper - improved animations when system animations are off
    • Input Mask - fixed model value being cleared after blur

    Version v1.13.0, released 09.05.2022

    Fixed & improved

    • Added autoSelect option to Select and Autocomplete
    • Synchronized .scss files with MDB Standard 4.0.0
    • Datatable - added ability to translate of word
    • Sidenav - fixed slim and side mode behavior
    • Improved Input border animation
    • Select:
      • Improved keyboard accessibility
      • Added searching by label when dropdown is open
      • Fixed dropdown rendering
    • Datepicker:
      • Improved keyboard accessibility
      • Improved validation with min/max date
      • Fixed opening with proper date

    Version v1.12.0, released 04.04.2022

    New

    Fixed & improved

    • MDBSideNavLink to property should allow to use router's name key
    • Badges - add badge property for colors based on badge-$color classes
    • Icons - add fw property for fixed width icons
    • Timepicker - add open and close public methods
    • Timepicker - fixed jumping modal on picker close
    • Timepicker - fixed picker initial value for max and min properties
    • Datepicker - fixed disabled state
    • Datepicker - fixed updating value with empty string
    • Datepicker - clear button should reset the Datepicker state and calendar view
    • Datepicker - fixed startDate property value formatting
    • Datepicker - fixed inline modal not closing when opening non-inline version
    • Inputs - fixed init state for inputs with counter

    Version v1.11.0, released 14.03.2022

    New

    Version v1.10.0, released 28.02.2022

    New

    Fixed & improved

    • MDBSideNavLink to property should allow to use router's name key

    Version v1.9.0, released 17.01.2022

    New

    Fixed & improved

    • Add on-validate event to validable form elements
    • Add horizontal MDBStepper dynamic height
    • Synchronized .scss files with MDB Standard 3.10.1

    Optimization

    • MDB5 docs migration from Wordpress to Hugo

    Version v1.8.0, released 20.12.2021

    New

    Fixed & improved

    • Add watch for Datepicker's min and max properties.

    Version v1.7.0, released 22.11.2021

    New

    • Add Admin dashboard templates

    Fixed & improved

    • Fix Sidenav links, collapse, and ripple effects on mobile devices
    • Fix static Alert observer issue
    • Update Footer documentation examples
    • Update Button group documentation examples
    • Update Input fields documentation examples and API section
    • Update List group documentation examples and API section
    • Update Modal documentation examples, API section and add focus trap handling
    • Update Sidenav API section
    • Update Tooltips, Popovers and all their dependencies to Popper.js v2
    • Synchronized .scss files with MDB Standard 3.10.0

    Version v1.6.0, released 02.11.2021

    New

    Version v1.5.0, released 18.10.2021

    New

    Version v1.4.0, released 04.10.2021

    New

    Fixed & improved

    • Fix datepicker v-model value updates while typing
    • Fix datatable single select with async data
    • Fix accordion chevron icon wrong rotation

    Version v1.3.0, released 20.09.2021

    New

    Fixed & improved

    • Fixed searching in select component on touch devices
    • Added web-types
    • Added vetur-types
    • Fixed custom attributes duplication issue

    Version v1.2.0, released 06.09.2021

    New

    Version v1.1.0, released 23.08.2021

    New

    Fixed & improved

    Version v1.0.0, released 28.06.2021

    New components:

    Fixed & improved

    • Lightbox: Improved mouse and touch navigation
    • Timepicker: Fixed picking '00:xx' time in 24 hours format. Added external validation by props
    • Timepicker and Datepicker: Added reactivity for v-model values
    • Datatables: Component should emit render event on every change causing rerender of the table

    Version v1.0.0 Beta 7, released 14.06.2021

    New components:

    New feature

    • Optimization
    • Synchronized .scss files with MDB Standard 3.7.1.

    Fixed & improved

    • Added v-model synchronization to Tabs and Pills components.

    Version v1.0.0 Beta 6, released 31.05.2021

    New components:

    New feature

    • Synchronized .scss files with MDB Standard 3.6.0.

    Fixed & improved

    • Added Typescript module declaration file for 'mdb-vue-ui-kit' for resolving Typescript development issue.

    Version v1.0.0 Beta 5, released 17.05.2021

    New components:

    Fixed & improved

    • Fixed horizontal scrolling in full height datatable

    Version v1.0.0 Beta 4, released 04.05.2021

    New components:

    Updates

    • Added advanced modals examples

    Version v1.0.0 Beta 3, released 19.04.2021

    New components:

    Fixed

    • Removed extra leading zero from Timepicker minutes plate after manually typing time in input
    • Collapse in the Navbar component should properly render animation on navbar close

    Version v1.0.0 Beta 2, released 06.04.2021

    New components:

    Version v1.0.0 Beta 1, released 22.03.21

    New components:

    Changes:

    Input, Textarea, Checkbox, Radio

    • Simplified custom form elements validation by removing isInvalid property and using only isValid with proper value.

    Fixed

    • Dropdown should properly render on external target

    Improved

    • Added the ability to select styling options in the basic installation mode. By default, the compiled css file is selected. In the "editable in your project (SCSS)" mode, the generator places scss files in the project and allows you to edit them.

    Version v1.0.0 Alpha 4, released 08.03.21

    New components:

    Changes:

    Sidenav

    • Changed over, side and push properties into a single mode="over | side | push" property for easier mode handling.

    Input, Checkbox, Radio

    • Added properties related to validation functionality

    Fixed

    • Fixed Sidenav documentation examples containing improper imports
    • Fixed Dropdowns documentation examples containing improper imports
    • Fixed Modal documentation examples containing improper imports
    • Fixed open Modal not adding any padding to scrollable container od adding padding when container is not scrollable

    Version v1.0.0 Alpha 3, released 22.02.2021

    New components:

    Version v1.0.0 Alpha 2, released 25.01.2021

    New components:

    Version v1.0.0 Alpha 1, released 11.01.2021

    The initial release of MDB 5 Vue Alpha 1 integrated with MDB 5 Standard 3.0.0.

    New components:

    New sections:

    • Layout
    • Utilities
    • Content & styles