npm vuetify 1.0.0-beta.1
v1.0.0-beta.1

latest releases: 3.6.0-beta.0.0, 3.5.17, 3.6.0-alpha.2...
6 years ago

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 within v-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
  • Removed the need for v-tabs-bar. All functionality has been moved back to v-tabs and this element can be removed entirely, just move its props to v-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 to v-tabs
  • Rename v-tabs-item to v-tab
  • Rename v-tabs-content to v-tab-item
  • v-tabs-slider is no longer required. If you only changed the color, use the slider-color prop on v-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 and v-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.
    image
    image

  • 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 and v-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 and v-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 and v-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/selected v-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

Don't miss a new vuetify release

NewReleases is sending notifications on new releases.