chore: update vue to v2.7

Author: KaelWD

package.json

@@ -73,13 +73,13 @@
     "shelljs": "^0.8.4",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.1",
-    "typescript": "^4.0.3",
-    "vue": "^2.6.11",
+    "typescript": "~4.4.4",
+    "vue": "^2.7.2",
     "vue-analytics": "^5.16.1",
     "vue-loader": "^15.7.1",
     "vue-meta": "^2.4.0",
     "vue-router": "^3.5.1",
-    "vue-template-compiler": "^2.6.11",
+    "vue-template-compiler": "^2.7.2",
     "vuex": "^3.0.1",
     "webpack": "^4.39.1",
     "webpack-cli": "^3.3.6",

packages/api-generator/package.json

@@ -16,7 +16,7 @@
   "dependencies": {
     "deepmerge": "^4.0.0",
     "rimraf": "^3.0.2",
-    "vue": "^2.6.11",
+    "vue": "^2.7.2",
     "vuetify": "^2.6.7"
   },
   "devDependencies": {

packages/docs/package.json

@@ -71,7 +71,7 @@
     "vue-gtag": "^1.6.5",
     "vue-meta": "^2.4.0",
     "vue-prism-component": "^1.2.0",
-    "vue-server-renderer": "^2.6.11",
+    "vue-server-renderer": "^2.7.2",
     "vuelidate": "^0.7.5",
     "vuetify-loader": "^1.3.0",
     "vuex-pathify": "^1.4.1",

packages/vuetify/src/components/VDatePicker/VDatePicker.ts

@@ -231,7 +231,7 @@ export default mixins(
         year: { year: 'numeric', timeZone: 'UTC' },
         month: { month: 'long', timeZone: 'UTC' },
         date: { weekday: 'short', month: 'short', day: 'numeric', timeZone: 'UTC' },
-      }
+      } as const
 
       const titleDateFormatter = createNativeLocaleFormatter(this.currentLocale, titleFormats[this.type], {
         start: 0,

packages/vuetify/src/components/VOverflowBtn/__tests__/__snapshots__/VOverflowBtn.spec.ts.snap

@@ -6,17 +6,17 @@ exports[`VOverflowBtn.js should show label with persistentPlaceholder property s
     <div role="combobox"
          aria-haspopup="listbox"
          aria-expanded="false"
-         aria-owns="list-14"
+         aria-owns="list-15"
          class="v-input__slot"
     >
       <div class="v-select__slot">
-        <label for="input-14"
+        <label for="input-15"
                class="v-label theme--light"
         >
           Some label
         </label>
         <div class="v-select__selections">
-          <input id="input-14"
+          <input id="input-15"
                  readonly="readonly"
                  type="text"
           >
@@ -54,17 +54,17 @@ exports[`VOverflowBtn.js should show label with persistentPlaceholder property s
     <div role="combobox"
          aria-haspopup="listbox"
          aria-expanded="true"
-         aria-owns="list-14"
+         aria-owns="list-15"
          class="v-input__slot"
     >
       <div class="v-select__slot">
-        <label for="input-14"
+        <label for="input-15"
                class="v-label theme--light"
         >
           Some label
         </label>
         <div class="v-select__selections">
-          <input id="input-14"
+          <input id="input-15"
                  readonly="readonly"
                  type="text"
           >
@@ -145,7 +145,7 @@ exports[`VOverflowBtn.js should use default autocomplete selections 1`] = `
 `;
 
 exports[`VOverflowBtn.js should use default autocomplete selections 2`] = `
-<div class="v-input v-input--is-label-active v-input--is-dirty theme--light v-text-field v-text-field--single-line v-select v-select--is-multi v-autocomplete v-overflow-btn">
+<div class="v-input v-input--is-label-active v-input--is-dirty theme--light v-text-field v-text-field--single-line v-select v-autocomplete v-overflow-btn v-overflow-btn--segmented">
   <div class="v-input__control">
     <div role="combobox"
          aria-haspopup="listbox"
@@ -155,9 +155,13 @@ exports[`VOverflowBtn.js should use default autocomplete selections 2`] = `
     >
       <div class="v-select__slot">
         <div class="v-select__selections">
-          <div class="v-select__selection v-select__selection--comma">
-            foo
-          </div>
+          <button type="button"
+                  class="v-btn v-btn--text theme--light v-size--default"
+          >
+            <span class="v-btn__content">
+              foo
+            </span>
+          </button>
           <input id="input-1"
                  readonly="readonly"
                  type="text"

packages/vuetify/src/components/VRangeSlider/__tests__/VRangeSlider.spec.ts

@@ -5,7 +5,7 @@ import {
   Wrapper,
 } from '@vue/test-utils'
 
-describe('VRangeSlider.ts', () => {
+describe('VRangeSlider', () => {
   type Instance = InstanceType<typeof VRangeSlider>
   let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
 
@@ -33,7 +33,7 @@ describe('VRangeSlider.ts', () => {
     document.body.removeChild(el)
   })
 
-  it('should provide a default value if non provided', async () => {
+  it('should provide a default value if none provided', async () => {
     const wrapper = mountFunction()
 
     expect(wrapper.vm.lazyValue).toEqual([0, 0])

packages/vuetify/src/components/VRangeSlider/__tests__/__snapshots__/VRangeSlider.spec.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`VRangeSlider.ts should render a vertical slider 1`] = `
+exports[`VRangeSlider should render a vertical slider 1`] = `
 <div class="v-input v-input--is-label-active v-input--is-dirty theme--light v-input__slider v-input__slider--vertical v-input--range-slider">
   <div class="v-input__control">
     <div class="v-input__slot">
@@ -64,7 +64,7 @@ exports[`VRangeSlider.ts should render a vertical slider 1`] = `
 </div>
 `;
 
-exports[`VRangeSlider.ts should render disabled slider 1`] = `
+exports[`VRangeSlider should render disabled slider 1`] = `
 <div class="v-input v-input--is-label-active v-input--is-dirty v-input--is-disabled theme--light v-input__slider v-input--range-slider">
   <div class="v-input__control">
     <div class="v-input__slot">

packages/vuetify/src/components/VSlideGroup/VSlideGroup.ts

@@ -127,7 +127,7 @@ export const BaseSlideGroup = mixins<options &
     },
     showArrows: {
       type: [Boolean, String],
-      validator: v => (
+      validator: (v: any) => (
         typeof v === 'boolean' || [
           'always',
           'desktop',

packages/vuetify/src/components/VSlider/VSlider.ts

@@ -221,16 +221,10 @@ export default mixins<options &
       handler (v: number) {
         this.internalValue = v
       },
+      immediate: true,
     },
   },
 
-  // If done in as immediate in
-  // value watcher, causes issues
-  // with vue-test-utils
-  beforeMount () {
-    this.internalValue = this.value
-  },
-
   mounted () {
     // Without a v-app, iOS does not work with body selectors
     this.app = document.querySelector('[data-app]') ||

packages/vuetify/src/components/VSlider/__tests__/VSlider.spec.ts

@@ -559,7 +559,7 @@ describe('VSlider.ts', () => {
 
   it('should set value to min value if given a NaN value', () => {
     const input = jest.fn()
-    const wrapper = mountFunction({
+    mountFunction({
       propsData: {
         min: -20,
         max: 20,
@@ -570,7 +570,8 @@ describe('VSlider.ts', () => {
       },
     })
 
-    expect(wrapper.vm.internalValue).toBe(-20)
+    expect(input).toHaveBeenCalledTimes(1)
+    expect(input).toHaveBeenCalledWith(-20)
   })
 
   it('should correctly handle initial value of zero (#7320)', () => {

packages/vuetify/src/components/VTimePicker/VTimePicker.ts

@@ -40,7 +40,7 @@ export default mixins(
     format: {
       type: String as PropType<'ampm' | '24hr'>,
       default: 'ampm',
-      validator (val) {
+      validator (val: any) {
         return ['ampm', '24hr'].includes(val)
       },
     },

packages/vuetify/src/globals.d.ts

@@ -105,8 +105,8 @@ declare module 'vue/types/options' {
 }
 
 declare module 'vue/types/vue' {
-  export type OptionsVue<Instance extends Vue, Data, Methods, Computed, Props, Options = {}> = VueConstructor<
-    CombinedVueInstance<Instance, Data, Methods, Computed, Props> & Vue,
+  export type OptionsVue<Instance extends Vue, Data, Methods, Computed, Props, SetupBindings, Options = {}> = VueConstructor<
+    CombinedVueInstance<Instance, Data, Methods, Computed, Props, SetupBindings> & Vue,
     Options
   >
 
@@ -154,10 +154,10 @@ declare module 'vue/types/vue' {
     $_vuetify_installed?: true
     options: Options
 
-    extend<Data, Methods, Computed, Options, PropNames extends string = never> (options?: ThisTypedComponentOptionsWithArrayProps<V, Data, Methods, Computed, PropNames> & Options): OptionsVue<V, Data, Methods, Computed, Record<PropNames, any>, Options>
-    extend<Data, Methods, Computed, Props, Options> (options?: ThisTypedComponentOptionsWithRecordProps<V, Data, Methods, Computed, Props> & Options): OptionsVue<V, Data, Methods, Computed, Props, Options>
-    extend<Options, PropNames extends string = never> (definition: FunctionalComponentOptions<Record<PropNames, any>, PropNames[]> & Options): OptionsVue<V, {}, {}, {}, Record<PropNames, any>, Options>
+    extend<Data, Methods, Computed, Options, SetupBindings, PropNames extends string = never> (options?: ThisTypedComponentOptionsWithArrayProps<V, Data, Methods, Computed, PropNames, SetupBindings> & Options): OptionsVue<V, Data, Methods, Computed, Record<PropNames, any>, SetupBindings, Options>
+    extend<Data, Methods, Computed, Props, Options, SetupBindings> (options?: ThisTypedComponentOptionsWithRecordProps<V, Data, Methods, Computed, Props, SetupBindings> & Options): OptionsVue<V, Data, Methods, Computed, Props, SetupBindings, Options>
+    extend<Options, SetupBindings, PropNames extends string = never> (definition: FunctionalComponentOptions<Record<PropNames, any>, PropNames[]> & Options): OptionsVue<V, {}, {}, {}, Record<PropNames, any>, SetupBindings, Options>
     extend<Props, Options> (definition: FunctionalComponentOptions<Props, RecordPropsDefinition<Props>> & Options): OptionsVue<V, {}, {}, {}, Props, Options>
-    extend<V extends Vue = Vue> (options?: ComponentOptions<V> & Options): OptionsVue<V, {}, {}, {}, {}, Options>
+    extend<V extends Vue = Vue> (options?: ComponentOptions<V> & Options): OptionsVue<V, {}, {}, {}, {}, {}, Options>
   }
 }

packages/vuetify/src/mixins/applicationable/__tests__/applicationable.spec.ts

@@ -68,7 +68,7 @@ describe('applicationable.js', () => {
       mixins: [Applicationable(null, ['foo', 'bar'])],
     })
 
-    expect(wrapper.vm._watchers).toHaveLength(6)
+    expect(wrapper.vm._scope.effects).toHaveLength(6)
   })
 
   it('should call to remove application on destroy', async () => {

packages/vuetify/src/mixins/binds-attrs/index.ts

@@ -1,11 +1,11 @@
-import Vue, { WatchHandler } from 'vue'
+import Vue from 'vue'
 
 /**
  * This mixin provides `attrs$` and `listeners$` to work around
  * vue bug https://github.com/vuejs/vue/issues/10115
  */
 
-function makeWatcher (property: string): ThisType<Vue> & WatchHandler<any> {
+function makeWatcher (property: string): ThisType<Vue> & ((val: any, oldVal: any) => void) {
   return function (this: Vue, val, oldVal) {
     for (const attr in oldVal) {
       if (!Object.prototype.hasOwnProperty.call(val, attr)) {

packages/vuetify/src/mixins/overlayable/index.ts

@@ -128,8 +128,8 @@ export default Vue.extend<Vue & Toggleable & Stackable & options>().extend({
 
       showScroll && this.showScroll()
     },
-    scrollListener (e: WheelEvent & KeyboardEvent) {
-      if (e.type === 'keydown') {
+    scrollListener (e: WheelEvent | KeyboardEvent) {
+      if ('key' in e) {
         if (
           ['INPUT', 'TEXTAREA', 'SELECT'].includes((e.target as Element).tagName) ||
           // https://github.com/vuetifyjs/vuetify/issues/4715
@@ -150,7 +150,7 @@ export default Vue.extend<Vue & Toggleable & Stackable & options>().extend({
 
       if (e.target === this.overlay ||
         (e.type !== 'keydown' && e.target === document.body) ||
-        this.checkPath(e)) e.preventDefault()
+        this.checkPath(e as WheelEvent)) e.preventDefault()
     },
     hasScrollbar (el?: Element) {
       if (!el || el.nodeType !== Node.ELEMENT_NODE) return false
@@ -224,14 +224,14 @@ export default Vue.extend<Vue & Toggleable & Stackable & options>().extend({
       if (this.$vuetify.breakpoint.smAndDown) {
         document.documentElement!.classList.add('overflow-y-hidden')
       } else {
-        addPassiveEventListener(window, 'wheel', this.scrollListener as EventHandlerNonNull, { passive: false })
-        window.addEventListener('keydown', this.scrollListener as EventHandlerNonNull)
+        addPassiveEventListener(window, 'wheel', this.scrollListener, { passive: false })
+        window.addEventListener('keydown', this.scrollListener)
       }
     },
     showScroll () {
       document.documentElement!.classList.remove('overflow-y-hidden')
-      window.removeEventListener('wheel', this.scrollListener as EventHandlerNonNull)
-      window.removeEventListener('keydown', this.scrollListener as EventHandlerNonNull)
+      window.removeEventListener('wheel', this.scrollListener)
+      window.removeEventListener('keydown', this.scrollListener)
     },
   },
 })

packages/vuetify/src/util/component.ts

@@ -59,7 +59,7 @@ try {
       get: () => {
         passiveSupported = true
       },
-    })
+    }) as EventListener & EventListenerOptions
 
     window.addEventListener('testListener', testListenerOpts, testListenerOpts)
     window.removeEventListener('testListener', testListenerOpts, testListenerOpts)
@@ -70,7 +70,7 @@ export { passiveSupported }
 export function addPassiveEventListener (
   el: EventTarget,
   event: string,
-  cb: EventHandlerNonNull | (() => void),
+  cb: (event: any) => void,
   options: {}
 ): void {
   el.addEventListener(event, cb, passiveSupported ? options : false)

packages/vuetify/src/util/helpers.ts

@@ -1,7 +1,7 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "target": "ESNext",
+    "target": "es2018",
     "module": "ESNext",
     "outDir": "./lib-temp",
     "sourceMap": false,