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 v6.0.0, released 16.09.2024

    New features

    • Select- Added new excludeOptGroupsInFilter prop to exclude optgroup labels from filter results
    • Datepicker- Added new viewChanged event that triggers after the datepicker view is changed
    • Drag and drop- Added new blockXAxis and blockYAxis props to MDBSortable and MDBSortableItem components

    Fixed & improved

    • Tooltips- Fixed issue where tooltip was visible even when the #tip template was empty
    • Chips- Fixed issue with ChipsInput submiting forms instead of adding a new chip on enter key
    • DateTimepicker:
      • Fixed saving values when changing between timepicker and datepicker
      • Fixed styling on smaller screens
    • Input:
      • Fixed autocomplete styling
      • Fixed placeholder issues for inputs type date, datetime, time, month and week
    • Select:
      • Updated behaviour of the select dropdown after space key on focused input
      • Fixed input and label focused styling when select was validated
      • Fixed showing of optgroup labels while filtering. Labels of optgroup are now visible if an option from that group is visible aswell
    • Stepper- Fixed styling of the optional steps
    • Lightbox- Removed fontAwesome prop
    • Calendar- Fixed issues with displaying long events
    • Drag and drop - Fixed issue with blockXAxis and blockYAxis functionalities not working without container
    • File upload - Added bmp and gif file types to the type list
    • Vector maps - Fixed shadows for zoom buttons
    • Filters- Fixed issues with providing a single value in arrays via datasets
    • Transfer- Fixed issue with transfer not moving elements not visible on a list when pagination is present
    • fixed treeshaking issues
    • updated tsconfig.json

    Version v5.0.0, released 22.04.2024

    See legacy docs for this version

    Breaking changes

    • Improved and updated TypeScript to work with the strict: true flag: in all components and plugins.
    • Removed package vue3-perfect-scrollbar and replaced it with our own custom implementation.

    Fixed & improved

    • Calendar:
      • Added dateFormat prop.
      • Fixed working with custom date format.
    • Datatables:
      • Added possibility to implement id attribute for a table itself.
      • Fixed borders with Fixed columns example while table is resizing.
    • Datepicker:
      • Added aria-disabled attribute to disabled dates/months/years.
      • Added translated aria-label attribute (if translate was provided) and fixed position of it.
      • Fixed rows width to align dates with week days.
    • Dummy - fixed prop size when passing "100%" value.
    • Input - fixed recalc functionality when component is inside another one.
    • Lazy loading - fixed infinite loop of image loading when src and error props are invalid.
    • Link - changed hard-coded value for link decoration to a $link-decoration variable.
    • Select:
      • Fixed keyboard behavior which was standarized with a native element.
      • Fixed clear button behavior - now blocks when disabled prop is passed.
      • Added search event.
    • Popconfirm:
      • Added event cancel when exiting with click outside or escape key.
      • Added focus trap for modal version.
      • Added block for scrolling in modal verion.
    • Sidenav - removed animation when changing sidenav height.
    • Stepper:
      • Fixed style for disabled text.
      • Fixed issue with resize step's height whent it's too big than default value. Now you could use setHeight method to resize the content by yourself.
      • Fixed validation for linear vertical version.
      • Added new event: onChangedStep which is invoking after passing an active step.
    • Table editor:
      • Fixed navigation for smaller screens.
      • Fixed edit buttons position.
      • Added an object with edited row for edit event.
    • Timepicker:
      • Added clear event.
      • Fixed arrows working in inline version - now counting stops when user mouse up in another place in website.
      • Changed default value to false for ripple prop.
    • Transfer - checkboxes Source and Target are now labels instead of spans.
    • Transitions - fixed broken animations.
    • Treetable - fixed opening animation.
    • Tree view - fixed issue when selecting all children elements does not selected a parent checkbox.

    Version v4.1.1, released 09.10.2023

    See legacy docs for this version

    Fixed & improved

    • Modal - fixed issues with opening pro modal
    • Transfer - fixed issues with selecting items after adding titleTarget and titleSource properties

    Version v4.1.0, released 25.09.2023

    Fixed & improved

    • Datatable:
      • Fixed issue with loadingMessage prop not passing the custom message to the template
      • Fixed issue with selected-rows event showing only filtered data
      • Added new all-filtered-rows-selected event that emits after selecting each row in a filtered table
      • Fixed issues with advanced data structure with 0 as a number inside the first column
      • Fixed issues with search result beeing resetted when the dataset updated
      • Fixed issue with thead border not beeing visible on Firefox in darkmode
      • Fixed hover styles for fixed columns
    • File upload
      • Fixed issue related to the preview not beeing displayed when image inside defaultFiles have PNG format
      • Fixed issue with "Remove Button" not beeing displayed when defaultFiles prop was added
    • Calendar
      • Added possibility to decide whether to add or replace events via addEvents method
      • Fix timepicker errors that occured after adding new events via addEvents method
      • Fixed issue that caused Sundays events to not be visible in list view
      • Fixed issue with select value not beeing updated when view changed
      • Added new timepickerConfig and datepickerConfig props that allow to provide properties for timepicker and datepicker
    • DateTimepicker
      • Added possibility to change the container for the modal via new container prop
      • Fixed timepicker issues with disablePast and disableFuture props
    • Timepicker
      • Added possibility to change the container for the modal via new container prop
      • Added functionality that allows to hold the change time arrows in inline timepicker to increase/decrease time
      • Added ripple to buttons
      • Fixed issue that sometimes caused the time format to be displayed in lowercase
      • Fixed small screen ripple animation and styling issues for landscape orientation
    • Datepicker
      • Added possibility to change the container for the modal via new container prop
      • The picker now reacts on v-model changes
      • Fixed buttons styles on focus
      • Fixed rtl issues with arrows
    • Select
      • Fix issue that occured after adding filter prop while the app isn't verticaly scrollable
      • Added new filterFn prop that allows to customize the filter function
      • Fixed issue with autocomplete property not beeing passed to the input
      • Added new opened and closed events
      • Added new white prop that adjust input colors for dark backgrounds
    • Ripple
      • Fixed issue with Ripple not removing fictum from DOM
      • Fixed updated hook that caused to add .ripple-surface class when it should not
    • Sidenav
      • Fixed issues with animations in slim sidenav
      • Fixed issues with disappearing group titles in slim sidenav
      • Fixed .sidenav-link to use css variables for padding left
      • Remove duplicated default from SCSS variable $sidenav-link-font-size
    • Drag and drop - fixed issues with TouchEvent on Firefox
    • Table editor
      • Fixed issues with overflowing content not beeing visible (i.e. dropdowns)
      • Added focus trap to the edited row
      • Added support for datepicker, timepicker and autocomplete components via inputType option
      • Fixed typo in the scss file
    • Input - fixed issue with maxlenght not working without counter prop
    • Autocomplete - fixed issue related to the autocomplete list disappearing when the component was focused before the closing animation finished
    • Chips
      • Added new added-chip and deleted-chip events that emit when a chip was added or deleted
      • Fixed issue with update:modelValue event beeing emitted more than once after one change
    • Modal - fixed issue that occured when modal was opened and route changed without closing the modal that caused the page to be unscrollable
    • Infinite scroll - fixed issues that occured when loading ended with errors
    • Animations - added new beginHidden prop that makes the animating element hidden before the animation starts
    • Tree view - fixed animations after collapsing a tree
    • Stepper - added new dynamic prop to MDBStepperStep component that recalculates the stepper height on content change
    • Accordion - added type="button" property to MDBAccordionItem buttons to prevent them from submitting when put inside forms
    • Touch - provided event info as an argument inside directive callbacks
    • WYSIWYG editor - added preventive values to .wysiwyg-content class
    • eCommerce gallery - fixed issues that occured when the same image was added more than once
    • Color picker - fixed issue with gradient not beeing visible on the sliders on Firefox browsers
    • Multi Range Slider - fixed typo in the variable name
    • Buttons - adjusted SCSS to use variables for maped styles
    • Lightbox - fixed z-index css variable
    • Synchronized .scss files with MDB Standard 6.4.1
    • fixed $purple SCSS variable

    Version v4.0.0, released 04.05.2023

    Breaking changes

    • Clipboard - Now the name of the copied variable can be anything instead of value.
    • Chips - Added reactivity which allows dynamiclly re-rendered component after changes it values.

    New features

    Fixed & improved

    • General improvements related to animations working with setted up motion reduce option.
    • Added .map files for JavaScript and fixed old ones for CSS.
    • Scrollspy - Fixed smooth animation.
    • DateTimepicker - Fixed bug with input value which not updated picker himself.
    • Datatable:
      • Fixed error related to passing a null value in dataset.
      • Fixed error when data is passing as Ref.
      • Improved search performance with embedded elements such as custom HTML.
    • Color picker - Added a prop colorFormat which allows you to set a default color format.
    • Datepicker - Fixed bug when after closing a picker selected day was not highlighted.
    • Timepicker - Fixed bugs with keyboard accessibility.
    • Table editor - Fixed errors related to adding a new rows with empty value.
    • Organization chart - Fixed visual bugs related to unproper collapsing branches.
    • Select - Fixed bug which allows to select disabled elements while working with multiple prop.
    • Synchronized .scss files with MDB Standard 6.2.0

    Version v3.2.0, released 23.01.2023

    See legacy docs for this version

    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