Skip to content
This repository has been archived by the owner on Nov 5, 2020. It is now read-only.

Update dependency vuetify to v2.3.16 #62

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

renovate[bot]
Copy link

@renovate renovate bot commented Dec 3, 2019

This PR contains the following updates:

Package Type Update Change
vuetify (source) dependencies minor 2.1.12 -> 2.3.16

Release Notes

vuetifyjs/vuetify

v2.3.16

Compare Source

πŸ”§ Bug Fixes

v2.3.15

Compare Source

πŸ”§ Bug Fixes

v2.3.14

Compare Source

πŸ”§ Bug Fixes

v2.3.13

Compare Source

πŸ”§ Bug Fixes

v2.3.12

Compare Source

Reverts

v2.3.11

Compare Source

πŸ”§Bug Fixes

v2.3.10

Compare Source

πŸ”§ Bug Fixes
  • types: remove number type from Breakpoint'name' (592aca5)
  • VVirtualScroll: pass through native events (c2734d3), closes #​12077

v2.3.9

Compare Source

πŸ”§ Bug Fixes

v2.3.8

Compare Source

πŸ”§ Bug Fixes

v2.3.7

Compare Source

πŸ”§ Bug Fixes
πŸ”„ Reverts

v2.3.6

Compare Source

πŸ”§ Bug Fixes

v2.3.5

Compare Source

πŸ”§ Bug Fixes

v2.3.4

Compare Source

πŸ”§ Bug Fixes

v2.3.3

Compare Source

πŸ”§ Bug Fixes

v2.3.2

Compare Source

πŸ”§ Bug Fixes

v2.3.1

Compare Source

πŸ”§ Bug Fixes

v2.3.0

Compare Source

v2.3.0 Liberator

πŸ‘€ Pre-amble

Before continuing, please take a moment read the following:

Short and sweet, Vuetify has grown too big for one developer and Vuetify want's to hire Andrew Henry (Core Team), and I need your help. If Vuetify has ever helped you in any way, this is me phoning a friend to help us bring Andrew on as a full-time OSS developer. You can help by sponsoring Vuetify on Open Collective. Our goal is 60k a year, or ~5k per month. This is less than an entry level developer position in the United States and I know that we can do it. Sponsors also receive unique rewards such as chat and email support, priority GitHub issues, and more.

πŸ† TLDR: Help Vuetify hire Andrew Henry


πŸ“– Table of Contents

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

πŸ’₯ Release Introduction

Welcome to the official v2.3.0 release! After over 6 months and 30 patches for v2.2.x, the Vuetify team is proud to bring the next version of the framework. Liberator contains with over 40 new features, quality of life changes, a11y improvements, and more. These updates focus on preparing v2.x.x for Long-term Support (LTS). As the team transitions into full v3 development and the completion of a built from the ground up documentation experience, we look forward to your continued support. The community is what makes Vuetify and we love you all πŸ’– Without any further ado, the highlights of the next release! πŸŽ‰

A new challenger has appeared πŸ’ͺβ€”The new v-virtual-scroll component is designed for scrolling large amounts of uniform data without the performance cost of rendering every available item. v-snackbar and v-sheet now have access to new props for outlined, shaped, and text variants.

The v-calendar component recieved massive updates including a new calendar type, category. The event slot received an big overhaul and month-view calendars can now show week numbers. Scale your headings and other text with the new responsive typography classes. New offerings for screen-reader, border-radius, and text-decoration are also available.

We've normalized how readonly inputs interact with focus and it is now possible to tab through all readonly components. Natively, <input> elements for checkbox and radio do not support the readonly attribute as part of the HTML5 specification. However, this behavior is present by default in text inputs and created a weird user experience when tabbing through readonly content.

<v-form> now propagates disabled and readonly states to its registered children inputs. This reduced the amount of code needed to accomplish simple tasks like disabling multiple inputs

From everyone on the team, we hope that you enjoy the 🎊 v2.3 release and thank you for using Vuetify!

πŸŽ‰ Join the conversation in our Discord community and connect with thousands of developers across the world.

β€”John Leider

Have questions? Check out our Frequently Asked Questions or join our Discord community.

Documentation
Become a Github Sponsor (supports the author)
Become a Patreon Sponsor (supports the author)
Support the Core Team on Open Collective (supports the development team)
Become a subscriber on Tidelift (supports the author, John)
Community Discord
Twitter
Store
Vuetify Consulting

🀚 FAQ

  • Where is the Vuetify documentation?
  • Where is the upgrade guide?
    • Steps on how to upgrade your application from v2.2.x to v2.3 is located below
    • It is recommended to upgrade to the latest version of v2.2.x before upgrading
  • Where can I get help with upgrading?

⚑ New Components & Features

The next version of Vuetify is chalked full of new features, improvements, and bug fixes. Below is a summary of the more prominent changes. For detailed information on all of the changes, navigate to the [Release Notes](#user-content-release-notes) section. ##### [πŸ”— v-virtual-scroll](https://vuetifyjs.com/en/components/virtual-scrollers/)

The new v-virtual-scroll component provides a clean interface for handling larges amount of uniform data. This was an unexpected addition to v2.3 and has NOT been implemented in any components such as v-select, v-data-table, and others. For v3, the virtual scroll component will provide a much needed baseline for handling long lists and table rows.

Virtual scroll component

Virtual scroll component
##### [πŸ”— v-calendar](https://vuetifyjs.com/en/components/calendars/)

The v-calendar component received substantial updates for version 2.3 that vastly expand its capabilities and covered use cases. A new category view has been added with a myriad of functionality from new events, slots, and more. The new first-time prop allows you to specify the first time displayed on the day view calendar. In addition, the calendar received multiple quality of life changes and bug fixes:

  • Added support for seconds and the JavaScript Date Object.
  • Resolved a native-on console warning

Calendar events

Calendar Events
##### [πŸ”— v-form](https://vuetifyjs.com/en/components/data-tables/)

It's easier than ever to affect the state of multiple inputs using a single source of truth, the v-form component. Propagate disabled and readonly states to all children inputs.

<template>
  <!-- v2.2.x -->
  <v-form>
    <v-text-field :disabled="disabled"></v-text-field>

    <v-text-field :disabled="disabled"></v-text-field>

    <v-textarea :disabled="disabled"></v-textarea>

    <v-btn type="submit">Submit</v-btn>
  </v-form>
</template>
<template>
  <!-- v2.3 -->
  <v-form :disabled="disabled">
    <v-text-field></v-text-field>

    <v-text-field></v-text-field>

    <v-textarea></v-textarea>

    <v-btn type="submit">Submit</v-btn>
  </v-form>
</template>
πŸ”— v-snackbar

The v-snackbar component will no longer overlap layout components vertically by default.

image

The snackbar can also contain itself horizontally using the app prop:

<template>
  <v-snackbar app>
    ...
  </v-snackbar>
</template>

A new scoped slot action has been added that provides attributes for v-btn styling.
The timeout property now accepts strings and is converted using Number.

The following SASS variables have been added

  • $snackbar-font-size
  • $snackbar-btn-margin-left
  • $snackbar-btn-margin-right
  • $snackbar-content-first-btn-margin
  • $snackbar-corner-offset
  • $snackbar-wrapper-max-width
  • $snackbar-wrapper-min-width

The following new props have been added:

  • centered - centers the snackbar on the x and y axis
  • content-class - used to apply class from v-snackbar to its content as the content now has a wrapper
  • dark
  • elevation
  • light
  • outlined
  • shaped
  • rounded
  • text
  • transition
Helper classes

We've added new utility classes to help you do more with less in your application. New responsive typography allows you to effortlessly scale font-size based on the browser viewport. Spacing intervals (pl-1, ma-3) now support up to 16 intervals.

πŸ”— Text and typography classes

New text classes based off of the MD2 specification make it easier than ever to scale your application's text over a variety of screen sizes and viewports.

<template>
  <!-- .text-h4 defines all breakpoints -->
  <!-- while .text-md-h2 only applies -->
  <!-- on medium size screens and up -->
  <div class="text-h4 text-md-h2">
    Heading
  </div>
</template>
πŸ”— Spacing classes

Spacing utility classes now scale up to 64px:

<template>
  <div class="pa-16 mx-16">...</div>
</template>
πŸ”— Screen reader classes

Conditionally render elements using one of the new screen readers utility classes:

<template>
  <div class="d-sr-only">Visually hides elements but will still announce to screen readers.</div>

  <div class="d-sr-only-focusable">Visually hides an element until it is focused.</div>
</template>
πŸ”— Text decoration classes

Adjust text decoration css property using text-decoration utility classes:

<template>
  <a href="#" class="text-decoration-none">Non-underlined link</a>

  <div class="text-decoration-line-through">Line-through text</div>
</template>
Framework

The core of Vuetify has received some much needed QOL updates for both the theme and breakpoint services.

Theme:

When the Vuetify theme service generates classes for your application's colors, (e.g. .primary--text), it also creates variations for each color name:

.primary--text
.primary--text.text--darken-1 through 4
.primary--text.text--lighten-1 through 5

In practice, these generated styles are largely not used. If you do not utilize classes such as .primary--text text--lighten-2, it is ecommended that you disable theme variations. This is configurable via theme.options.

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

Vue.use(Vuetify)

export default new Vuetify({
  theme: {
    themes: {
      light: { ... }
    },
    options: { variations: false }
  }
})

This end result is significantly fewer generated styles:

Disabled color variations

Disabling color variations

Breakpoint:
The breakpoint service now globally controls the mobile-breakpoint property for components such as v-navigation-drawer, v-slide-group, v-banner, and v-data-iterator. This new service feature

The mobile-breakpoint property (renamed from mobile-break-point for some components)

In addition, the breakpoint service allows you to specific a breakpoint by it's string name, (e.g. xs, sm, md, lg, and xl) as shown below:

<template>
  // The `sm` value is equivalent to using a value of 960
  <v-navigation-drawer mobile-breakpoint="sm">
    ...
  </v-navigation-drawer>
</template>
Directives
πŸ”— v-click-outside

The v-click-outside directive has existed for a very long time within the framework but hasn't been made public until today! This provides the exact same functionality that is availble in components such as v-menu and v-dialog.

<template>
  <div v-click-outside="onClickOutside">
    ...
  </div>
</template>

<script>
  export default {
    methods: {
      onClickOutside () {
        // Perform action
      }
    }
  }
</script>
πŸ”— v-scroll

The v-scroll directive has received a QOL change that allows you to easily bind the listener to the containing element:

<template>
  <div v-scroll.self="onScroll">
    ...
  </div>
</template>

<script>
  export default {
    methods: {
      onScroll () {
        // Perform action
      }
    }
  }
</script>
πŸ”— v-ripple

Ripples will now show when pressing the enter key when focused on the element.

Keyboard ripple

πŸ“‘ Upgrade guide

Liberator contains a few small upgrades for deprecated functionality. Don't worry, these upgrades are BACKWARDS compatible. If you experience anything that suggests otherwise, please reach out to us in our Discord community.

General Changes

  • v-content is now v-main
  • The property mobile-break-point for all components is now mobile-breakpoint (controlled by the breakpoint service)
  • v-list and v-sheet now have a default border radius of 0

The following Typography classes have been deprecated:

  • .display-4 is now .text-h1
  • .display-3 is now .text-h2
  • .display-2 is now .text-h3
  • .display-1 is now .text-h4
  • .headline is now .text-h5
  • .title is now .text-h6
  • .subtitle-1 is now .text-subtitle-1
  • .subtitle-2 is now .text-subtitle-2
  • .body-1 is now .text-body-1
  • .body-2 is now .text-body-2
  • .caption is now .text-caption
  • .overline is now .text-overline

The following internal classes have been deprecated:

  • .v-card--flat
  • .v-card--shaped

The following changes have been made to v-snackbar to closer match md spec:

  • The default value for timeout has changed from 6000 to 5000 to match specification.
  • Changed the value to disable the timeout from 0 to -1.

πŸ’― Release notes

Full Notes ##### πŸš€ Features
πŸ”§ Bug Fixes

πŸ†˜ I need help!

If you are stuck and need help, don't fret! We have a very large and dedicated community that is able to provide help 24/7. Come to the #release-migration channel.

v2.2.34

Compare Source

πŸ”§ Bug Fixes

v2.2.33

Compare Source

πŸ”§ Bug Fixes

v2.2.32

Compare Source

πŸ”§ Bug Fixes

v2.2.31

Compare Source

πŸ”§ Bug Fixes
  • VAutocomplete: add minimum input width when focused (254bb29)
πŸ”„ Reverts

v2.2.30

Compare Source

πŸ”§ Bug Fixes

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 you tick the rebase/retry checkbox.

πŸ”• 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 WhiteSource Renovate. View repository job log here.

@renovate renovate bot added the dependencies Pull requests that update a dependency file label Dec 3, 2019
@renovate renovate bot changed the title Update dependency vuetify to v2.1.13 Update dependency vuetify to v2.1.14 Dec 11, 2019
@renovate renovate bot changed the title Update dependency vuetify to v2.1.14 Update dependency vuetify to v2.1.15 Dec 17, 2019
@renovate renovate bot changed the title Update dependency vuetify to v2.1.15 Update dependency vuetify to v2.1.16 Dec 31, 2019
@renovate renovate bot changed the title Update dependency vuetify to v2.1.16 Update dependency vuetify to v2.1.17 Jan 1, 2020
@renovate renovate bot changed the title Update dependency vuetify to v2.1.17 Update dependency vuetify to v2.1.18 Jan 2, 2020
@renovate renovate bot changed the title Update dependency vuetify to v2.1.18 Update dependency vuetify to v2.2.0 Jan 2, 2020
@renovate renovate bot changed the title Update dependency vuetify to v2.2.0 Update dependency vuetify to v2.2.1 Jan 2, 2020
@renovate renovate bot changed the title Update dependency vuetify to v2.2.1 Update dependency vuetify to v2.2.2 Jan 7, 2020
@renovate renovate bot changed the title Update dependency vuetify to v2.2.2 Update dependency vuetify to v2.2.3 Jan 8, 2020
@renovate renovate bot changed the title Update dependency vuetify to v2.2.3 Update dependency vuetify to v2.2.4 Jan 14, 2020
@renovate renovate bot changed the title Update dependency vuetify to v2.2.4 Update dependency vuetify to v2.2.5 Jan 21, 2020
@renovate renovate bot changed the title Update dependency vuetify to v2.2.5 Update dependency vuetify to v2.2.6 Jan 23, 2020
@renovate renovate bot changed the title Update dependency vuetify to v2.2.6 Update dependency vuetify to v2.2.11 Feb 9, 2020
@renovate renovate bot changed the title Update dependency vuetify to v2.2.11 Update dependency vuetify to v2.2.14 Feb 22, 2020
@renovate renovate bot changed the title Update dependency vuetify to v2.2.14 Update dependency vuetify to v2.2.15 Mar 11, 2020
@renovate renovate bot changed the title Update dependency vuetify to v2.2.15 Update dependency vuetify to v2.2.26 May 2, 2020
@renovate renovate bot changed the title Update dependency vuetify to v2.2.26 Update dependency vuetify to v2.2.27 May 7, 2020
@renovate renovate bot changed the title Update dependency vuetify to v2.2.27 Update dependency vuetify to v2.3.3 Jul 1, 2020
@renovate renovate bot changed the title Update dependency vuetify to v2.3.3 Update dependency vuetify to v2.3.4 Jul 10, 2020
@renovate renovate bot changed the title Update dependency vuetify to v2.3.4 Update dependency vuetify to v2.3.9 Aug 24, 2020
@renovate renovate bot changed the title Update dependency vuetify to v2.3.9 Update dependency vuetify to v2.3.16 Oct 28, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
dependencies Pull requests that update a dependency file
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants