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 v4.1.1, released 09.10.2023

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

• Added new tutorial about MDB Vue integration with Vitest.

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

New features

• Check out the latest tutorials - about MDB Vue integration with the most popular backend frameworks and optimizing .css files with PurgeCSS:
  • Express.js
  • ASP.NET
  • Django
  • Laravel
  • Ruby on Rails
  • Flask
  • PurgeCSS

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

• Transitions - Added whole new component which provides functionality of transitions - option built-in Vue
• Admin design blocks - Added new admin design blocks
• Admin Templates - Added new admin templates
• New tutorials in documentation:
  • Internationalization (i18n)
  • VeeValidate tutorial
  • PWA tutorial
  • Pinia tutorial

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

• Improved buttons
• Improved existing accordion and added new examples
• Improved stepper design
• Improved badges design
• Improved popovers and popconfirm design
• Fixed bottom frame modal bug on mobile

Version v2.0.0, released 11.07.2022

New plugins

• Treetable
• Organization Chart
• Color picker

New directives

• Clipboard
• Hot key
• Mutation observer
• Scroll lock
• Click outside
• Resize
• Intersection observer

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

• DateTimepicker
• Input Mask

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

• Parallax
• Scroll Status

Version v1.10.0, released 28.02.2022

New

• Captcha
• Countdown
• Data parser
• Dummy

Fixed & improved

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

Version v1.9.0, released 17.01.2022

New

• Design blocks - Admin
• eCommerce gallery plugin
• Multi Range Slider
• RTL

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

• Chips

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

• Mention
• Multi item carousel
• Onboarding

Version v1.5.0, released 18.10.2021

New

• Cookies management
• Storage management
• Transfer

Version v1.4.0, released 04.10.2021

New

• Filters
• Tree view
• WYSIWYG editor

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

• Vector maps
• File upload

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

• Drag and drop

Version v1.1.0, released 23.08.2021

New

• Calendar
• Collapsible scrollspy
• Plugins installation guide
• Ready-to-use dark theme
• Table editor

Fixed & improved

• Datatables: action buttons re-render
• Datatables: allow decimals

Version v1.0.0, released 28.06.2021

New components:

• Accordion
• Animated navbar
• Charts advanced

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:

• Autocomplete
• Infinite Scroll
• Smooth Scroll
• Popconfirm
• Lightbox

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:

• Loading Management
• Lazy Loading
• Rating
• Stepper

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:

• Sticky
• Touch

Fixed & improved

• Fixed horizontal scrolling in full height datatable

Version v1.0.0 Beta 4, released 04.05.2021

New components:

• Charts
• Datatables

Updates

• Added advanced modals examples

Version v1.0.0 Beta 3, released 19.04.2021

New components:

• Alerts
• Carousel
• Toasts

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:

• Datepicker
• Timepicker

Version v1.0.0 Beta 1, released 22.03.21

New components:

• Range
• File
• Switch
• Input Group
• Pills
• Tabs

Changes:

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:

• Ripple
• Scrollspy
• Validation
• Animations

Changes:

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:

• Modal
• Select
• Sidenav
• Scrollbar

Version v1.0.0 Alpha 2, released 25.01.2021

New components:

• Collapse
• Dropdown
• Popover
• Tooltip
• Checkbox
• Input
• Radio

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:

• Badges
• Buttons
• Button group
• Cards
• List group
• Progress
• Spinners
• Tables
• Breadcrumb
• Footer
• Headers
• Navbar
• Pagination

New sections:

• Layout
• Utilities
• Content & styles