v1.0.0-beta.1
The beta introduces a few breaking changes, namely in the v-tabs
namespace, drastically increased test coverage and tons of QOL changes. Link to the beta docs. If you need help upgrading your application, come to the community.
Note: We are aware of the un-minified styles contain duplicates and as a result is significantly larger. This does not affect the minified version and will be corrected for next release.
New v-tabs
The tabs component has been completely rebuilt from the ground up. Now offering more flexibility in markup and functionality, the updated component will now accommodate vastly more use-cases than it did before, while also being just as performant.
While this is not an exhaustive list, some of the key highlights are:
- Removed the need to declare a
v-tabs-slider
. This is now done automatically and can be modified in one of two ways:- If a
v-tabs-slider
is detected withinv-tabs
, it will automatically be injected, so your previous settings do not have to be changed - You can change the color of the slider (most common use-case) by using the new slider-color prop
- If a
- Removed the need for
v-tabs-bar
. All functionality has been moved back tov-tabs
and this element can be removed entirely, just move its props tov-tabs
- Removed the need for
v-tabs-items
. There are 3 different ways that you can configure your tabs setup now:
// The most basic markup
<v-tabs>
<v-tab>Tab</v-tab>
<v-tab-item>Lorem Ipsum</v-tab-item>
</v-tabs>
// Useful when you need to modify the tab items container
<v-tabs>
<v-tab>Tab</v-tab>
<v-tabs-items class="myClass">
<v-tab-item>Lorem Ipsum</v-tab-item>
</v-tabs-items>
</v-tabs>
// Completely abstracted
<v-tabs v-model="tabs">
<v-tab>Tab</v-tab>
</v-tabs>
<v-tabs-items v-model="tabs">
<v-tab-item>Lorem Ipsum</v-tab-item>
</v-tabs-items>
Tabs now utilizes the registrable mixin to register children, along with parsing its slotted items to allow for much more diverse templates. This now also applies to $routes. The v-tabs
component will now properly update the model when it contains children that are activated by route (using the :to
prop).
This rewrite has also started paving way for a similar update to components that share the same general functionality, such as v-carousel
and v-stepper
. Look for similar functionality to come to these components in a future release.
Upgrade guide
v-tabs-bar
can be removed- Move props from
v-tabs-bar
tov-tabs
- Rename
v-tabs-item
tov-tab
- Rename
v-tabs-content
tov-tab-item
v-tabs-slider
is no longer required. If you only changed the color, use the slider-color prop onv-tabs
v-tabs-items
is no longer required- the icons prop has been renamed to icons-and-text
- the fixed prop has been renamed to fixed-tabs
Things we added
-
0e81afa Added new prop
v-text-field
andv-select
, solo-inverted. Depending on the selected theme (dark|light), will have a lower opacity when not focused and full opacity on focus.
e.g.
-
d714af9
v-avatar
now uses the colorable mixin -
73f7bf1 Added new stylus variables for
$tab-text-transform
(thanks @julkuh)
Things we changed
- 7272a58 Added missing !important declaration for grow, shrink and mx-auto grid helper classes
- 1a84be7 Refactored how the ssr-bootable mixin works. Abstracted functionality and reduced redundant code
- 0a55235 Refactored the directive interface for
v-resize
andv-scroll
. Can now utilize args and modifiers in line instead of only through object options
<div v-resize.200.quiet="callback"></div>
- d5154ad Improved
v-chip
spec compliance - #2845
v-icon
will now use its default size determined by css. This allows the value to be changed through a class, or still be defined with the size prop (thanks @mattpjohnson)
Things we fixed
Released in 0.17.5
- #2803 Fixed a typo in menuable's props
Released in 0.17.6
- #2544, d7aa97e Fixed click-outside on iOS devices
- #2780 Fixed a bug where tooltips and menus would stay active when changing routes (thanks @stormy251)
- #2779 Fixed a memory leak caused by
v-click-outside
,v-resize
andv-scroll
directives - #2269 Fixed a bug where the
v-select
menu's position would be wrong when using autocomplete near the bottom of the screen - #2757 Fixed a bug where the page would be cut off when printing in firefox (thanks @manico)
- #2514 Fixed a bug where editable
v-stepper
steps would have two icons when in an error state
Since alpha.3
- 36bc2a1 Fixed a bug where
v-toolbar
would process its onScroll method even if manual-scroll was specified - 50cfa89
v-text-field
was using different transition times for its prepended and appended icon - 0985915 Fixed a bug where
v-select
with the combobox prop
would reset the current value if lazySearch was empty - 5453fd6 Fixed a bug where
v-text-field
andv-select
(with any autocomplete prop) did not assign a width to the actual input element, causing overflow on smaller screens - #2161 Fixed a bug where
v-data-table
's actions would overflow with the screen (thanks @Phlow2001) - #2809 Fixed a bug where switching between date and month view using the type prop was not working in
v-date-picker
- #2812 Fixed a bug where active and current (dates && months) in
v-date-picker
has incorrect styles - #2853 Fixed a bug where
v-footer
did not have the proper text color when using the dark theme (thanks @phainv) - #2801 Fixed a bug where
v-bottom-nav
was not properly highlighting the currently active/selectedv-btn
. also updated default height to match spec, 48px -> 56px - #2870 Fixed a bug where
v-stepper-content
was not switching its internal height to auto after boot