v0.17.0

@jacekkarczmarczyk

I like your style

Hello everyone! Last time we spoke this release was not planned. @jacekkarczmarczyk did some amazing work with v-date-picker and the team was able to pull together the new dynamic themes feature. We did not want to launch 1.0 with such large breaking changes, so we have split that into 0.17. While there will still be a few breaking changes for release next month, they should be relatively painless.

I'd like to thank everyone who has backed the project on Patreon. Since the announcement of my transition, I have had an overwhelming amount of support from the community.

Next month we will be releasing v1.0. It also happens to be the 1 year anniversary from when Vuetify was first announced. Since, the package has changed drastically. With over 3,000 closed requests and 6,000 stars, the activity on this project has been at a very high level for a very short period of time. I am extremely humbled by the support I have received from the talented community, especially team members:

in no particular order

These individuals have been instrumental to the success of this project and I cannot give them enough praise. I thank you for your continued support and look forward to the official 1.0 release next month!

TLDR

New dynamic themes SSR Ready
Completely refactored v-date-picker
Completely refactored v-select
Completely refactored v-navigation-drawer

Upgrade guide

Vuetify now requires Vue.js ^2.5.0
vuetify-loader is no longer necessary to use custom themes together with a-la-carte components, and should be removed. See templates upgrade guide below for examples of changes needed.
Block level styling has been removed from headings, lists, buttons and blockquotes
Stylus declared themes are no longer needed (and will not work). After the theme is removed, if you have no other reasons to rebuild the Vuetify styles, change your import to 'vuetify/dist/vuetify.min.css'
- Theme colors are now defined in the Vue.use statement instead of stylus, docs
Remove the <main> wrapper from around your v-content, it is now generated automatically (#2298)
v-navigation-drawer must now have fixed explicitly set, default is initial
v-tabs theme declaration has been moved to v-tabs-bar
v-date-picker will now only accept Strings, (no more Date object). You can use date-fns to convert time formats now.

Template upgrade guides

Things we broke

v-btn raised prop has been deprecated in favor of depressed. No longer requires an explicit boolean value
v-breadcrumbs divider prop now only accepts Strings. Also has a new slot, divider, where any markup can be added as a divider. This will be the new method for assigning icons and will allow any icon to be used
v-date-picker has been completely refactored to better handle various locales
v-dialog no longer has a default width of 290px
- You may need to update the width of your dialog's if they contain a v-date-picker or v-time-picker
The default color for all selection control components (v-checkbox, v-radio, v-switch) now properly use the application's accent color
v-navigation-drawer must be specifically designated as absolute or fixed
v-navigation-drawer now has the resize watcher enabled by default, must be disabled with either disable-resize-watcher or stateless
removed the persistent prop from v-navigation-drawer. it is now the default state
v-tabs has had its theme declaration (light|dark) move to v-tabs-bar

Things we added

#1914 v-slider now supports home/end/page up/page down keys and fractional steps
#1977 #2252 Added new slots to v-data-table for no-data and no-results
#2109 v-date-picker has been refactored to operate completely off of strings and require less dependency from the java-script Date object. This improves the ability to handle multiple locales and time zones
#2098 Changed the default widths of v-dialog to auto
#2164 Added a disabled prop to v-tooltip
#2188 Added fixed and absolute props to v-system-bar
#2199 Added color and header-color props to v-date-picker and v-time-picker
#2260 Added hide-selected prop to v-select
#2291 v-select with the tags prop now supports the tab key to enter a value
4cc9c01 The mobile-break-point prop in v-navigation-drawer now supports Strings
#2210 #2085 Added support for dynamic themes at the JavaScript level
e6993e5 Fixed v-select with the combobox prop functionality (previously released but not documented)
623ebca Added back a form of contextual support to v-alert through the type prop
02fa9f7 v-pagination now supports the color prop
6f0b6c6 v-app will have the application--touch-support class applied on touchscreen devices, or you can use this.$vuetify.touchSupport
d6a2582 v-select will now properly escape text values
da6bec6 Added open-on-clear prop to v-select which will re-open the v-select's menu when cleared (closed by default now)
0614a23 v-switch can now be swiped to toggle it on touch devices
#2314 - Added stateless prop to v-navigation-drawer. when this prop is used, the drawer will only change its state if the developer does.
#2438 rows-per-page will now automatically hide if v-data-table only one option is provided
Added the colorable mixin to v-pagination, v-bottom-nav
729569a Added the dense prop to v-select. This will apply the dense prop to select's v-list
f5ac6ec v-tabs now detects its mobile state more efficiently (using the breakpoint object)

Things we changed

#2242 v-slider - removed snap prop, added ticks prop, changed default of step prop to 1, updated v-slider styles to match the Material Design specs
#2207 Changed selection controls' default color from teal to accent
#2189 Active menu items in v-select component use the same color as v-select
#2109 v-date-picker now operates on ISO8601 string instead of Date objects. You will have to handle timezone conversion yourself or use an external library such as date-fns
5168d64 Changed the default v-dialog width and max-width to auto and none respectively
#1916 A function passed to the allowed-hours prop of a v-time-picker will now receive 24-hour formatted time
#2237 v-tooltip now has a 200ms delay before opening
d72b548 Removed the raised prop from v-btn and replaced it with depressed (me too thanks)
#2308 Improved v-date-picker performance
#2255 Focusing a v-select with the autocomplete prop will now automatically select the inputs text
6e42fea v-select with the tags or combobox prop will no longer automatically highlight the first filtered result when searching
6a39afa All elevation classes have been refactored to be more in line with Material Design spec
8d0ee31 Removed unnecessary usage of translate3d in numerous locations
#2430 Navigation drawer states have been redone to better align with the MD spec.
- The default behaviour is now persistent on large screens and temporary on small ones, and the persistent prop has been removed
- Navigation drawers are no longer fixed by default, that will have to be set now for most cases
- The absolute prop will now size the drawer correctly to match the main content height
- An overlay will now be created when dynamically switching to temporary mode
#2391 Item text in select menus will now be escaped to prevent HTML injection
#2402 v-date-picker will now have the correct header colour when using the dark theme
4e2464b v-card and v-expansion-panel now have a default elevation of 1
#2423 Added app support to v-bottom-nav

Things we fixed

#1766 Fixed a bug where v-icon was not displayed correctly inside v-breadcrumbs-item
#1935 Fixed a bug where v-slider with the disabled prop did not have consistent spacing around the thumb location
#2067 Fixed a bug where v-navigation-drawer would not properly update the application dimensions when the right prop was toggled. Also fixed a bug where v-toolbar was not properly updating the layout when switching between clipped-left and clipped-right
#2092 Fixed a bug where a v-dialog containing a v-select with the autocomplete prop was closing after pressing enter
#2208 #2121 Fixed a bug where in some cases, $vuetify.breakpoint was not available before page load
#2133 Reverted a change that meant multiple validation errors would be displayed
#2106 Fixed a bug where changing month in the month view resulted in the selected date being changed as well in v-date-picker
#2261 Fixed a bug where pressing the tab key would not focus action buttons inside of v-dialog
#2171 Fixed a bug where selection-control components would not have the proper width with wrapped in a v-tooltip
#2200 Fixed a bug where clearing the v-select and selecting another value didn't close the select menu
#2220 Fixed a bug where the height of the expanded row in v-data-table wasn't properly set
#2229 Fixed a bug where pressing ENTER on an autocomplete v-select in a dialog caused the dialog to close
#2248 #2286 Fixed a bug where components using the touchable mixin were not properly unbinding event listeners
#2319 Fixed a bug where pressing the up/down arrow in v-text-field with the multiline prop while inside of v-dialog was not working properly
#2346 Fixed a bug where v-card with the img prop was not being properly escaped
#2353 Fixed a bug where v-icon with the color prop was not applying the correct color
#2359 Fixed a bug where v-text-field with the mask prop was not working properly with evaluating some special characters
#2057 Fixed a bug where masked inputs would emit invalid characters
#2096 Fixed a bug where <v-text-field return-masked-input> would return characters not in the displayed input value
#2158 Fixed a bug where a v-text-field with type="number" would cause an error
f51e2ab Fixed a bug where v-navigation-drawer was not updating the content area when destroyed when using the app prop
7203c7d Fixed a regression from #2298
bd0ce95 Fixed a bug where v-tabs would sometimes reference the slider method after being destroyed
676d4a3 Fixed a bug where v-navigation-drawer with the temporary prop on desktop resolutions was moving v-content when toggled
08284ac Fixed a bug where v-chip with the small prop was not styled properly
#2417 Fixed a bug where inputs with hide-details would still show error messages
#2103 Fixed a bug where the v-select arrow would sometimes point in the wrong direction
#2445 Fixed a bug where native form validation methods would be shown when trying to submit a v-form
#2437 Fixed a bug where a v-btn with an href would have the incorrect text colour
#2437 Fixed v-btn text color (was broke in beta)
#2254 #2401 #2100 #2411 Refactored v-select (surprise!) to fix multiple underlying issues with state
#2321 Fixed a bug where components implementing the routable mixin were defining href to be javascript:; if none was provided
#2342 Fixed a bug where v-text-field would only validate on blur
#2433 Fixed a bug where v-pagination where the action buttons were not disabled when the pagination has a length of 0
#2447 Fixed a bug where v-toolbar did not have the proper height when in landscape
#2054 Fixed a bug where import order when using a-la-carte was affecting styles
#2063 Fixed a bug where form components with the prepend-icon prop had a misaligned v-progress-bar when the loading prop was true
#1971 Added hide-delimiters prop to v-carousel. enabling this will hide the next and prev icons
#1045 v-data-table now only filters on corresponding header values
#2377 Fixed a bug where v-select did not have the proper menu positioning when the hide-details prop was used
#2463 Fixed a bug where when selecting text in a v-text-field that is inside of a v-dialog and dragging our cursor outside of the v-dialog, would cause the dialog to close on Firefox

Things you added

#2153 Added an option to set v-data-table header width (thanks @rafaelrenanpacheco)
53597aa Added a new prop to v-alert, outline. This is an alternate style option for the component (thanks @HendrikGrobler )

Things you changed

#2160 Changed the default v-tooltip position to top (thanks @rafaelrenanpacheco)
#2177 Made the v-ripple directive reactive (thanks @Phlow2001)
#1946 Refactored data table progress markup to follow W3C standard (thanks @sindrepm)
#2209 Removed stylus @extend for block-level import (thanks @Zeph33)
#2097 Invalid values sent into the v-model of a masked input will now be corrected and updated (thanks @azaars)
06b9ceb Updated v-select font-size declaration to use the $input-font-size variable (thanks @cassvail )

Things you fixed

#1902 Fixed a bug where block level imports were not working properly (thanks @Zeph33 )
0e74084 Fixed a bug where typing the same input in v-select with the tags prop would remove the value. Will now push it to the end instead (thanks @Phlow2001 )

Provide feedback

Saved searches

Use saved searches to filter your results more quickly