Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore(deps): update dependency vuetify to v2 - autoclosed #24

Closed
wants to merge 1 commit into from
Closed

chore(deps): update dependency vuetify to v2 - autoclosed #24

wants to merge 1 commit into from

Conversation

renovate[bot]
Copy link

@renovate renovate bot commented Aug 13, 2019 •
edited
Loading

This PR contains the following updates:

Package Type Update Change
vuetify (source) dependencies major ^1.5.13 -> ^2.0.8

Release Notes

vuetifyjs/vuetify

v2.0.8

Compare Source

🔧 Bug Fixes

v2.0.7

Compare Source

Reverts

v2.0.6

Compare Source

🔧 Bug Fixes

v2.0.5

Compare Source

🔧 Bug Fixes
  • locale: fix polish translation of dataTable.sortBy (4f5d329)
  • VAlert: adjust dismissable button margins, decrease size (d3bfccb)
  • VBtn/VToolbar: better scope default v-btn size (c3812fa), closes #​8035
  • VCardActions: update icon boundary when using v-btn (6517b58), closes #​8042
  • VListGroup: fade hover/focus effect when active (a9283e7), closes #​8115
  • VNavigationDrawer: display overlay over v-app-bar (6255bf5), closes #​8040
  • VProgressLinear: make progress not overlapped by buffer (b36e27f), closes #​8114
  • VRating: flip in RTL (d0eb357), closes #​7381
  • VSpeedDial: fix transition for tooltips (e8dbd0b), closes #​8159
  • VSpeedDial: make speed dial list non-clickable when it's closing (c158d04), closes #​8203
  • VTabs: prevent prop style bleed for nested tabs (8f126b8), closes #​8303
  • VTextField: recalculate prefix on prop change (f9049b3), closes #​8268

v2.0.4

Compare Source

🔧 Bug Fixes

v2.0.3

Compare Source

🔧 Bug Fixes

v2.0.2

Compare Source

🔧 Bug Fixes

v2.0.1

Compare Source

🔧 Bug Fixes
  • VContainer: import new grid styles (0315233), closes #​7978
  • VSpeedDialog: change spacing between list and fab from margin to padding (4bfd0b4), closes #​8015
  • VTabs: allow proper adjustment of slider size (c31b01d), closes #​8014

v2.0.0

Compare Source

v2.0.0 Arcadia

Welcome to the official version 2.0 release of Vuetify! Before getting into the actual release introduction, I wanted to take a moment of your time to talk about project sponsorship and a unique opportunity that I've been fortunate enough to be a part of.

Version 2.0 represents the culmination of 8 months of development. Through the combined efforts of numerous developers, we have been able to bring the largest update we have ever had — the framework has never felt better.

Github has recently released a new program called Github Sponsors, something I've been fortunate enough to receive a beta invite for. Some of you know that I currently run a Patreon campaign for the same purpose. With my invite, I have started to transition supporters to the new platform due to the amazing benefits that Github is offering. What that is in a nutshell:

  • Funding matching for the 1st year
  • Waived processing fees for the 1st year
  • Offered on a platform that more people know and are comfortable with

With that being said, I wanted to quickly talk about the 3 pillars of support available with sponsorship and highlight how it can benefit developers and businesses that use Vuetify.

Single developer
  • Sponsor support channel
  • Vue/Vuetify consulting services
Company
  • Elite Sponsor support channel (direct support from me)
  • Monthly live support calls
  • Github issue prioritization
Enterprise
  • Subscription based model through Tidelift
  • Github issue prioritization

The generous fund matching program from Github provides a rare opportunity for me to be able to invest more into the Vuetify ecosystem and continue to provide developers with a polished and expansive library for Vue.

Thank you for your support and please consider sponsoring the project.

If you have any questions, please do not hesitate to reach out to me in the community. Thank you for using Vuetify!

—John

📖 Table of Contents

#Release Introduction
#Important Links
#New Components & Features
#Documentation Updates
#Upgrade Guide
#Release Notes
#Known Issues
#I need help! 🆘

💥 Release Introduction

Hello and welcome to the v2.0 release, Arcadia. It has been almost 8 months since development kicked off and I believe we have accomplished something very special. As described in my talk in last year's VueConf TO presentation, we have performed a massive overhaul to every aspect of the framework, making it easier to use and maintain.

  • Updated every component to the new Material Design 2 specification
  • Added an improved grid system
  • Every component has been updated with proper accessibility (a11y) support
  • Every component has been updated with proper bidirectionality (rtl) support
  • Converted from stylus to sass
  • Converted from javascript to typescript
  • Converted from avoriaz to vue-test-utils
  • Moved all styles and unit tests into its corresponding component's folder

This is only a small list of overall framework improvements from quality of life changes, to new features and functionality (outside of the MD2 improvements). The documentation has been massively updated with over 250 new examples, tons of updated information on how to use the framework's internals, details on long-term support, an extended roadmap and a better API display for components. We have also setup a process for exporting the component api for vetur so that it is easier for us to keep it up to date.

I have also teamed up with Vue Mastery to bring high-quality tutorials into the Vuetify ecosystem. This video series has been developed around using version 2, is taught by Ben Hong and is perfect for new and experienced Vuetify developers alike. Make sure to check it out!

Since early alpha, we have been working with the community on small and large projects to ensure we have an easy and managable upgrade process from v1.5. Kael has even created an eslint-plugin to make the process of upgrading to the new grid even easier. If you run into any issues that do not appear to be covered in the Upgrade guide, please reach out to a developer in the release migration channel.

I'd like to give a huge thank you to everyone for your unwaivering support and for enabling me to work on open source as a full-time job. For the first time in the framework's history, I feel like we have a solid base for maintaining and developing new features and I've never been more excited for the future. Finally, while this release was an effort by many Vuetify developers, I would like to send a special thank you to some that went above and beyond in ensuring the v2 release was as polished as possible. In no particular order:

Thank you everyone for using Vuetify!

—John

❗️ Important Links

Documentation
Becoming a Github Sponsor (supports the author, John)
Becoming a backer on OpenCollective (supports the development team)
Become a subscriber on Tidelift (supports the author, John)
Consulting with the author, John
Community discord
Twitter
Medium publication
Shop

🤚 FAQ

  • What will be happening to v1.5?
    • No more features
    • Issues will be resolved on a case by case basis. Any security vulnerabilities will also be fixed.
    • Long-term support until July 2020
  • Will the light and dark theme variants apply to individual components? (e.g. a light theme application with a dark <v-card>)
    • No. Variants only apply from the designation of $vuetify.theme.dark being boolean true or false.
  • My application is saying "Cannot read dark of undefined"
  • Is it still possible to view the v1.5 documentation?
  • Should I upgrade to v1.5 before upgrading to v2.0?
  • Where can I suggest changes to the upgrade guide?

⚡ New Components & Features

##### [🔗 **VAppBar**](https://vuetifyjs.com/components/app-bars) Brand new component that was created to better scope the functionality of `v-toolbar`. All existing scrolling techniques and **app** functionality from `v-toolbar` has been moved. New scrolling techniques such as collapsing bar, scroll shrink and more have been added.

app-bar-shrink
app-bar-img

🔗 VBanner

Brand new component introduced in MD2. You can find more information in the banner specification.

image

🔗 VChipGroup

Brand new component for grouping multiple v-chips together in a column or row based format.

chips-filter
chips-selection

🔗 VColorPicker

Brand new component designed to making color selection a breeze. With 5 available formats, hex, hexa, rgba, hsla and hsva, v-color-picker can accommodate a wide variety of use cases.

color-picker-types
color-picker-swatch

🔗 VFileInput

The long awaited and highly anticipated file upload component. The v-file-input is aimed to replacing the default functionality and behavior of a regular <input type="file">. It features a multitude of customization options for tweaking the way selections are displayed, all of the available styling of v-text-field and more.

image
image
image

Developers notes: You may be wondering about 2 things: built in upload support and drag-and-drop. There will be an upcoming second component, v-upload, that is designed to have a more visual interface for manipulating file uploads and will support xml requests. With its introduction, we will be bringing drag-and-drop to both upload components.

🔗 VListItemGroup

Brand new component for grouping multiple v-list-items together.

list-select-item
list-select-single

🔗 VOverlay

A staple feature that was previously integrated as part of dialogs and navigation-drawers has been abstracted into its own component for consumption.

overlay
overlay-hover

🔗 VSimpleTable

Meant to be a replacement for a generic table element.

image
image

🔗 VSlideGroup

A new group component designed to provide the functionality of v-item-group within a custom slide interface.

slide-group

📃 Documentation Updates

  • Over 250 new examples
    • Heavy focus on providing examples for all props
    • Added playgrounds
  • Improved property descriptions with relevant links to corresponding functionality
  • Added snippets for object based properties displaying what properties are available
    • Individual property descriptions coming soon
  • Improved existing information on advanced Vuetify usage with more examples and better explanations
  • Brand new API design for components
  • Numerous a11y improvements throughout the docs
  • Greatly improved performance with lazy loading

🛠 Upgrade Guide

Version 2 contains non backwards compatible breaking changes. This includes previously deprecated functionality from v1.x.x. These breaking changes are noted in the console for the corresponding components.

The existing grid is still operational and has an eslint plugin to help with migration. This plugin can also be used to help upgrade to the new grid.

Upgrade now! ##### Bootstrap Vuetify must now be instantiated and passed to the initial Vue instance. This is similar to how **vue-router** and **vuex** are bootstrapped. ##### Vue-CLI 3 Vuetify plugin install ```js // v1.5 // src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/app.styl'

Vue.use(Vuetify, {
iconfont: 'md',
})

// src/main.js
import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
render: h => h(App),
}).$mount('#app')

```js
// v2.0
// src/plugins/vuetify.js

import Vue from 'vue';
import Vuetify from 'vuetify/lib';

Vue.use(Vuetify);

export default new Vuetify({
  icons: {
    iconfont: 'mdi',
  },
});

// src/main.js
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';

Vue.config.productionTip = false

new Vue({
  vuetify,
  render: h => h(App)
}).$mount('#app')
Full Install
// v1.5

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/src/stylus/main.styl'

const opts = { ... }
Vue.use(Vuetify, opts)

new Vue(...).$mount('#app')
// v2.0

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

const opts = { ... }
Vue.use(Vuetify)

new Vue({
  vuetify: new Vuetify(opts)
}).$mount('#app')
A-La-Carte Install (vuetify-loader)
// v1.5

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/main.styl'

const opts = { ... }
Vue.use(Vuetify, opts)

new Vue(...).$mount('#app')
// v2.0

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

const opts = { ... }
Vue.use(Vuetify)

new Vue({
  vuetify: new Vuetify(opts)
}).$mount('#app')
Framework

The following components are now lazy by default. This means they will not render their content until they are explicitly activated. This drastically improves performance but may not be wanted depending upon your application's needs (i.e. For SEO purposes). To return to the previous behavior, use the eager prop.

  • v-badge
  • v-menu
  • v-tooltip
  • v-dialog
  • v-bottom-sheet

vuetify/lib is now compiled to es6. This means supporting IE requires transpileDependencies or similar to be used, along with @babel/polyfill

Theme

Now supports dark/light theme variants. The dark property has been moved into the theme property. Will dynamically change when toggling $vuetify.theme.dark. If only using one variant, you only need to define its colors.

// v1.5

const opts = {
  dark: true,
  theme: {
    primary: '...',
    ...
  }
}
// v2.0

const opts = {
  theme: {
    dark: true,
    themes: {
      light: {
        primary: '...',
        ...
      },
      dark: {
        primary: '...',
        ...
      }
    }
  }
}

In order to disable the theme style sheet creation, you must use the disable property of the theme object.

// v1.5

const opts = {
  theme: false
}
// v2.0
const opts = {
  theme: { disable: true }
}
Icons

Icon and iconfont declaration is now scoped under the icons property.

// v1.5

const opts = {
  iconfont: 'fa4',
  icons: { ... }
}
// v2.0

const opts = {
  icons: {
    iconfont: 'fa4',
    values: { ... }
  }
}
  • Now defaults to use mdi icons. For information on how to install please navigate here.
  • Is now located under the icons property of the Vuetify options

If you want to use a custom iconfont, you must set it up in the initial Vuetify options now.

// v1.5

import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify, {
  iconfont: 'fa4'
})
// v2.0

import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify, {
  icons: {
    iconfont: 'fa4'
  }
})
Goto (scrolling helper)

Import location has changed. Must be explicitly bootstrapped with the Vuetify instance to use in vue-router scroll-behavior. Example of how to do this here. Reference documentation for scroll-behavior usage here.

// v1.5

import goTo from 'vuetify/es5/components/Vuetify/goTo'
// v2.0

import goTo from 'vuetify/lib/services/goto'
Lang

The translator function t is now nested under the lang property.

// v1.5

this.$vuetify.t(...)
// v2.0

this.$vuetify.lang.t(...)
Grid

The grid has been rebuilt modeled after bootstrap. The existing grid still works and needs some slight modifications. Kael has created an eslint plugin to help with this process.

  • eslint-plugin-vuetify to fix most of these for you
  • Spacing helpers have changed to represent the number of 4px intervals from 0-12 (0-48px)
    • eg. px-7 is 7 * 4 = 28px
    • 3 → 4
    • 4 → 6
    • 5 → 12
  • Most "breakpointed" and "non-breakpointed" helpers have been normalised, eg. .text-xs-center is now text-center as it applies to all screen widths unless overridden
  • Children of .d-flex no longer have extra flex rules applied. This can be done manually with .flex-grow-1
  • Helper classes changed:
    • .fluid → .container--fluid
    • .scroll-y → .overflow-y-auto
    • .hide-overflow → .overflow-hidden
    • .show-overflow → .overflow-visible
    • .no-wrap → .text-no-wrap
    • .ellipsis → .text-truncate
    • .left → .float-left
    • .right → .float-right
  • <v-layout row> should not be used as .row is now part of the new grid instead (#​7956)

Use the following regex to update spacing classes:

find: ([\s"][mp][axytblr])-5
replace: $1-12

find: ([\s"][mp][axytblr])-4
replace: $1-6

find: ([\s"][mp][axytblr])-3
replace: $1-4
Styles

The main framework styles are now imported automatically.

// v1.5
// src/plugins/vuetify.js

import 'vuetify/src/styles/main.sass' // can be removed

Must install the sass package

yarn add sass -D
// OR
npm install sass -D

Do not install node-sass, it is not the correct library.

Typography

The root font-size (per MD2 specification) is now 16px.

  • The following typography classes have been replaced:
    • subheading → subtitle-1
Event names

All event names has been changed from camelCase to kebab-case:

  • update:searchInput → update:search-input
  • update:inputValue → update:input-value
  • update:miniVariant → update:mini-variant
  • update:pickerDate → update:picker-date
  • update:selectingYear → update:selecting-year
  • tableDate → update:table-date
  • update:returnValue → update:return-value
Activators
  • Components with activators, v-tooltip, v-menu, v-dialog, v-list-group and v-bottom-sheet must now be bound using the new v-slot syntax.
    • Requires Vue@2.6
  • We understand this is considerably more verbose than the v1.5 counterpart. We are still exploring ways to support the new v-slot in a more concise manner.
    • You can find more information on the official Vue documentation for Destructuring Slot Props.
    • You can find more information on the official Vue documentation for v-slot.
  • The upside to this change is it is easier to support nested activators and provide proper a11y support
Regular activator
<!-- v1.5 -->

<v-dialog>
  <v-btn slot="activator">...</v-btn>
</v-dialog>
<!-- v2.0 -->

<v-dialog>
  <template v-slot:activator="{ on }"
    <v-btn v-on="on">...</v-btn>
  </template>
</v-dialog>
Nested activator
<!-- v2.0 -->

<v-menu>
  <template v-slot:activator="{ on: menu }">
    <v-tooltip bottom>
      <template v-slot:activator="{ on: tooltip }">
        <v-btn
          color="primary"
          dark
          v-on="{ ...tooltip, ...menu }"
        >
          Dropdown w/ Tooltip
        </v-btn>
      </template>
      <span>Im A ToolTip</span>
    </v-tooltip>
  </template>
</v-menu>
Unit tests

Testing with Vuetify is now similar to that of vue-router and vuex.

// setup.js

import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify)
// Component.spec.js

import { createLocalVue, mount } from '@&#8203;vue/test-utils'
import Vuetify from 'vuetify'
import Component from 'path/to/my/component'

const localVue = createLocalVue()

describe('Component.vue', () => {
  let vuetify

  beforeEach(() => {
    vuetify = new Vuetify(...)
  })

  it('should...', () => {
    const wrapper = mount(Component, {
      localVue,
      vuetify
    })
  })
})
Form Input Validation

All form inputs default to white when using the dark prop unless the application is explicitly set to dark mode.

Removed Component Properties

These are previous deprecations from earlier versions that have now been removed:

  • <v-text-field textarea> will no longer render <v-textarea>
  • <v-select autocomplete> will no longer render <v-autocomplete>
  • <v-select combobox> will no longer render <v-combobox>
  • <v-select overflow> will no longer render <v-overflow-btn>
  • <v-select segmented> will no longer render <v-overflow-btn segmented>
  • <v-select editable> will no longer render <v-overflow-btn editable>
Individual Components

These are the changes required for existing components.

v-app
  • Component classes have been prepended with v-. eg .application → .v-application
  • The dark and light prop no longer have an effect on application theme variants
<!-- v1.5 src/App.vue -->

<template>
  <v-app dark>
    ...
  </v-app>
</template>
// v2.0 src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify)

export default new Vuetify({
  theme: { dark: true }
})
v-alert
  • Alerts are visible by default
<!-- v1.5 -->

<template>
  <v-alert :value="true">
    ...
  </v-alert>
</template>
<!-- v2.0 -->

<template>
  <v-alert>
    ...
  </v-alert>
</template>
v-carousel
  • The cycle prop is no longer implicit, must be defined in order to have screens switch
v-btn
  • The flat prop is now text
  • The round prop is now rounded
  • No longer has explicit margin
v-chip
  • value no longer controls visibility, use active
  • input event emitted when clicking
  • The close event is now click:close
  • @​input listener is now @​active.sync
<!-- v1.5 -->

<v-chip :value="chip" @&#8203;input="chip = $event">...</v-chip>
<v-chip v-model="chip">...</v-chip>
<!-- v2.0 -->

<v-chip :active="chip" @&#8203;update:active="chip = $event">...</v-chip>
<v-chip :active.sync="active">...</v-chip>
v-bottom-nav
  • Renamed from v-bottom-nav to v-bottom-navigation
v-bottom-navigation
  • The color prop is now background-color
  • The color prop now affects the active <v-btn> color
v-bottom-sheet-transition
  • Component has been removed

Developer notes: Was never explicitly listed in API

v-btn
  • The flat prop is now text
  • The round prop is now rounded
  • No longer has explicit margin
v-card-media
  • Component has been removed
v-carousel
  • The cycle prop is no longer implicit, must be defined in order to have screens switch
v-chip
  • The value prop is now active
  • value no longer controls visibility. input event emitted when clicking
  • The selected prop is now input-value or v-model
  • The close event is now click:close
v-data-iterator & v-data-table

Data table (and iterator) have been rewritten from the ground up to be both easier to use and to allow for more flexibilty in more advanced use cases. This has resulted in a number of breaking changes. Some of these are shared between both components while some are unique to each.

Shared
  • disable-initial-sort has been removed. Neither component initially sorts data anymore. Use sort-by (or options) prop to sort.
  • filter prop has been removed. Instead use custom-filter. This was done in an effort to make custom filtering less confusing.
  • pagination prop has been removed. Instead use the separate props such as page, sort-by, etc. If you want to provide a single object you can use the new options prop instead. NOTE: The options prop has a different object structure than pagination. Check API docs for details.
  • total-items prop has been renamed to server-items-length
  • hide-actions prop has been renamed to hide-default-footer. Also it no longer changes the visible items per page
  • Props related to the default footer have been move to the footer-props prop. These are:
    • prev-icon
    • next-icon
    • rows-per-page-items → items-per-page-options
    • rows-per-page-text → items-per-page-text
  • The expand prop has been removed.
v-data-iterator
  • The content-tag, content-props, content-class props have been removed. Instead simply use the default scoped slot to implement your intended markup.
v-data-table
  • items slot has been renamed to item
  • headers slot renamed to header
  • item slot (and header) now require you to define a <tr> element. Previously this was optional.
  • expand slot renamed to expanded-item. It no longer includes an expansion transition, and the slot is inside the <tr> element so that you can define your own <td> columns. To get back to a similar look as in 1.5, you will need a <td> with colspan equal to the number of columns in your header.
  • hide-header has been renamed to hide-default-header
  • select-all has been renamed to show-select. This will also render a checkbox on each item row as long as you are not defining a slot that overrides the internal row rendering (such as item or body).
  • Props related to the default header have been moved to the header-props prop. These are:
    • sort-icon
v-expansion-panel et al
  • Many components have been renamed and props moved
    • v-expansion-panel → v-expansion-panels
    • v-expansion-panel-content → v-expansion-panel
  • New components
    • v-expansion-panel-header
    • v-expansion-panel-content
<!-- v1.5 -->

<v-expansion-panel>
  <v-expansion-panel-content
    v-for="(item,i) in 5"
    :key="i"
  >
    <template v-slot:header>Item</template>
    <v-card>
      ...
    </v-card>
  </v-expansion-panel-content>
</v-expansion-panel>
<!-- v2.0 -->

<v-expansion-panels>
  <v-expansion-panel
    v-for="(item,i) in 5"
    :key="i"
  >
    <v-expansion-panel-header>
      Item
    </v-expansion-panel-header>
    <v-expansion-panel-content>
      <v-card>
        ...
      </v-card>
    </v-expansion-panel-content>
  </v-expansion-panel>
</v-expansion-panels>
v-footer
  • Now has explicit padding to match other similar MD components. Can be removed with the padless prop or a helper class, class="pa-0"
v-jumbotron
  • Component has been removed
v-list et al
  • Many components have been renamed
    • v-list-tile → v-list-item
    • v-list-tile-action → v-list-item-action
    • v-list-tile-avatar → v-list-item-avatar
    • v-list-tile-content → v-list-item-content
    • v-list-tile-title → v-list-item-title
    • v-list-tile-sub-title → v-list-item-subtitle
    • The avatar prop has been removed
v-list-group
  • Can no longer use v-list-items in the activator slot
    • listeners are passed through to the internal v-list-item for activators
    • use v-list-item-content/v-list-item-title etc instead
v-navigation-drawer
  • Default width has been changed from 300px to 256px. You can adjust it using width prop.
v-select, v-autocomplete, v-combobox, v-overflow-btn
  • Now passes attributes and listeners to item slot for proper a11y support (split from tile to match other implementations).
<!-- v1.5 -->

<v-select>
  <template v-slot:item="{ item, tile }">
    <v-list-tile v-bind="tile">
       ...
    </v-list-tile>
  </template>
</v-select>
<!-- v2.0 -->

<v-select>
  <template v-slot:item="{ item, attrs, on }">
    <v-list-item v-bind="attrs" v-on="on">
       ...
    </v-list-item>
  </template>
</v-select>

The item scoped slot value of { tile } is now{ attrs, on }. is now bound similar to the v-menu activator slot.

v-select
  • No longer has a default autocomplete of on
v-speed-dial
  • Icons no longer have inferred swapping for activator through css
  • The activator slot will provide a model in the future
<!-- v1.5 -->

<v-speed-dial>
  <template v-slot:activator>
    <v-btn
      dark
      fab
    >
      <v-icon>account_circle</v-icon>
      <v-icon>close</v-icon>
   </v-btn>
  </template>
</v-speed-dial>
<!-- v2.0 -->

<v-speed-dial v-model="fab">
  <template v-slot:activator>
    <v-btn
      dark
      fab
    >
      <v-icon v-if="fab">account_circle</v-icon>
      <v-icon v-else>close</v-icon>
    </v-btn>
  </template>
</v-speed-dial>
v-tabs
  • The color prop is now background-color. Color now affects the default text and slider color
  • Various class names have been changed throughout
    • v-tab__div removed, use v-tab
    • v-tab__item → v-tab
    • v-tabs__slider → v-tabs-slider
    • v-tabs__bar → v-tabs-bar
v-tabs-items
  • No longer implicitly inherits the v-tabs model when nested. Must have :value or v-model explicitly bound.
<!-- v1.5 -->

<v-tabs v-model="tabs">
  ...
  <v-tabs-items>
    ...
  </v-tabs-items>
</vtabs>
<!-- v2.0 -->

<v-tabs v-model="tabs">
  ...
  <v-tabs-items v-model="tabs">
    ...
  </v-tabs-items>
</vtabs>

Developer notes: The tabs-items component does not have to be provided and is only necessary for custom implementations.

v-text-field
  • The mask prop and functionality has been removed. Instead you can use 3rd party libraries such as vue-the-mask.
v-text-field, v-select, v-textarea, v-autocomplete, v-combobox
  • The box prop is now filled
<!-- v1.5 -->

<v-text-field box></v-text-field>
<!-- v2.0 -->

<v-text-field filled></v-text-field>
##### `v-text-field`, `v-select`, `v-textarea`, `v-autocomplete`, `v-combobox`, `v-btn`, `v-alert` * The **outline** prop is now **outlined** 
<!-- v1.5 -->

<v-btn outline></v-text-field>
<v-autocomplete outline></v-autocomplete>
<v-alert outline></v-alert>
<!-- v2.0 -->

<v-btn outlined></v-text-field>
<v-autocomplete outlined></v-autocomplete>
<v-alert outlined></v-alert>

💯 Release notes

Below is a consolidated list of changes made in v2. Every component that has a MD2 specification has been updated to match (with the exception of the known issues below). Every component that has a MD1 specification (and not 2) has been re-verified and updated to ensure that it matches the previous spec.

##### New Components New components are listed under the [**New Components & Features**](#user-content-new-components-and-features) section. ##### Framework * Rebuilt the entire core for better usability and maintainability * Scoped all Vuetify global styles to `.v-application` * Added theme support for default anchor colors * All components are now lazy by default meaning they will not render their content unless activated. This can be overriden with the **eager** prop * Converted all components and functionality from javascript to typescript * Converted all components and functionality from stylus to sass * Converted all unit tests from avoriaz to vue-test-utils * Added support for **dark** and **light** theme color palettes * **Issues closed:** * [#​6020](https://togithub.com/vuetifyj

Renovate configuration

📅 Schedule: At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻️ Rebasing: Whenever PR becomes conflicted, or if you modify the PR title to begin with "rebase!".

🔕 Ignore: Close this PR and you won't be reminded about this update again.

  • If you want to rebase/retry this PR, check this box

This PR has been generated by Renovate Bot. View repository job log here.

@renovate renovate bot changed the title chore(deps): update dependency vuetify to v2 chore(deps): update dependency vuetify to v2 - autoclosed Aug 20, 2019
@renovate renovate bot closed this Aug 20, 2019
@renovate renovate bot deleted the renovate/vuetify-2.x branch August 20, 2019 20:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
1 participant
@renovate-bot