vuetify 2.6.7 → 2.6.10

package/src/components/VDataTable/__tests__/__snapshots__/VDataTable.spec.ts.snap

@@ -6911,7 +6911,7 @@ exports[`VDataTable.ts should render item slot when using group-by function 1`]
                 </i>
               </span>
             </button>
-            name: Frozen Yogurt
+            Dessert (100g serving): Frozen Yogurt
             <button type="button"
                     class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
             >
@@ -6941,7 +6941,7 @@ exports[`VDataTable.ts should render item slot when using group-by function 1`]
                 </i>
               </span>
             </button>
-            name: Ice cream sandwich
+            Dessert (100g serving): Ice cream sandwich
             <button type="button"
                     class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
             >
@@ -8477,7 +8477,7 @@ exports[`VDataTable.ts should render with group.summary scoped slot 1`] = `
                 </i>
               </span>
             </button>
-            calories: 159
+            Calories: 159
             <button type="button"
                     class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
             >
@@ -8551,7 +8551,7 @@ exports[`VDataTable.ts should render with group.summary scoped slot 1`] = `
                 </i>
               </span>
             </button>
-            calories: 237
+            Calories: 237
             <button type="button"
                     class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
             >
@@ -8625,7 +8625,7 @@ exports[`VDataTable.ts should render with group.summary scoped slot 1`] = `
                 </i>
               </span>
             </button>
-            calories: 262
+            Calories: 262
             <button type="button"
                     class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
             >
@@ -8699,7 +8699,7 @@ exports[`VDataTable.ts should render with group.summary scoped slot 1`] = `
                 </i>
               </span>
             </button>
-            calories: 305
+            Calories: 305
             <button type="button"
                     class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
             >
@@ -8773,7 +8773,7 @@ exports[`VDataTable.ts should render with group.summary scoped slot 1`] = `
                 </i>
               </span>
             </button>
-            calories: 356
+            Calories: 356
             <button type="button"
                     class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
             >
@@ -8988,7 +8988,7 @@ exports[`VDataTable.ts should render with grouped rows 1`] = `
                 </i>
               </span>
             </button>
-            protein: 0
+            Protein (g): 0
             <button type="button"
                     class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
             >
@@ -9099,7 +9099,7 @@ exports[`VDataTable.ts should render with grouped rows 1`] = `
                 </i>
               </span>
             </button>
-            protein: 3.9
+            Protein (g): 3.9
             <button type="button"
                     class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
             >
@@ -9168,7 +9168,7 @@ exports[`VDataTable.ts should render with grouped rows 1`] = `
                 </i>
               </span>
             </button>
-            protein: 4
+            Protein (g): 4
             <button type="button"
                     class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
             >
@@ -9237,7 +9237,7 @@ exports[`VDataTable.ts should render with grouped rows 1`] = `
                 </i>
               </span>
             </button>
-            protein: 4.3
+            Protein (g): 4.3
             <button type="button"
                     class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
             >
@@ -11644,7 +11644,7 @@ exports[`VDataTable.ts should search group-by column 1`] = `
                 </i>
               </span>
             </button>
-            name: Assistance
+            Name: Assistance
             <button type="button"
                     class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
             >
@@ -11681,7 +11681,7 @@ exports[`VDataTable.ts should search group-by column 1`] = `
                 </i>
               </span>
             </button>
-            name: Candidat
+            Name: Candidat
             <button type="button"
                     class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
             >
@@ -11856,7 +11856,7 @@ exports[`VDataTable.ts should search group-by column 2`] = `
                 </i>
               </span>
             </button>
-            name: Candidat
+            Name: Candidat
             <button type="button"
                     class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
             >

package/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,

package/src/components/VDialog/VDialog.ts

@@ -234,8 +234,8 @@ export default baseMixins.extend({
         // So we must have focused something outside the dialog and its children
       ) {
         // Find and focus the first available element inside the dialog
-        const focusable = this.$refs.dialog.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')
-        const el = [...focusable].find(el => !el.hasAttribute('disabled')) as HTMLElement | undefined
+        const focusable = this.$refs.dialog.querySelectorAll('button, [href], input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])')
+        const el = [...focusable].find(el => !el.hasAttribute('disabled') && !el.matches('[tabindex="-1"]')) as HTMLElement | undefined
         el && el.focus()
       }
     },

package/src/components/VFileInput/__tests__/__snapshots__/VFileInput.spec.ts.snap

@@ -61,6 +61,7 @@ exports[`VFileInput.ts should display file size 1`] = `
         <div class="v-input__icon v-input__icon--clear">
           <button type="button"
                   aria-label="clear icon"
+                  tabindex="-1"
                   class="v-icon notranslate v-icon--link material-icons theme--light"
           >
             $clear
@@ -107,6 +108,7 @@ exports[`VFileInput.ts should display file size 2`] = `
         <div class="v-input__icon v-input__icon--clear">
           <button type="button"
                   aria-label="clear icon"
+                  tabindex="-1"
                   class="v-icon notranslate v-icon--link material-icons theme--light"
           >
             $clear
@@ -153,6 +155,7 @@ exports[`VFileInput.ts should display total size in counter 1`] = `
         <div class="v-input__icon v-input__icon--clear">
           <button type="button"
                   aria-label="clear icon"
+                  tabindex="-1"
                   class="v-icon notranslate v-icon--link material-icons theme--light"
           >
             $clear
@@ -202,6 +205,7 @@ exports[`VFileInput.ts should display total size in counter 2`] = `
         <div class="v-input__icon v-input__icon--clear">
           <button type="button"
                   aria-label="clear icon"
+                  tabindex="-1"
                   class="v-icon notranslate v-icon--link material-icons theme--light"
           >
             $clear
@@ -294,6 +298,7 @@ exports[`VFileInput.ts should render chips 1`] = `
         <div class="v-input__icon v-input__icon--clear">
           <button type="button"
                   aria-label="clear icon"
+                  tabindex="-1"
                   class="v-icon notranslate v-icon--link material-icons theme--light"
           >
             $clear
@@ -340,6 +345,7 @@ exports[`VFileInput.ts should render counter 1`] = `
         <div class="v-input__icon v-input__icon--clear">
           <button type="button"
                   aria-label="clear icon"
+                  tabindex="-1"
                   class="v-icon notranslate v-icon--link material-icons theme--light"
           >
             $clear
@@ -433,6 +439,7 @@ exports[`VFileInput.ts should render small chips 1`] = `
         <div class="v-input__icon v-input__icon--clear">
           <button type="button"
                   aria-label="clear icon"
+                  tabindex="-1"
                   class="v-icon notranslate v-icon--link material-icons theme--light"
           >
             $clear

package/src/components/VInput/VInput.sass

@@ -100,12 +100,12 @@
 
   &__slot
     align-items: center
-    color: inherit
     display: flex
     margin-bottom: $input-slot-margin-bottom
     min-height: inherit
     position: relative
     transition: $primary-transition
+    transition-property: height, min-height
     width: 100%
 
   &--dense > .v-input__control > .v-input__slot

package/src/components/VInput/VInput.ts

@@ -184,6 +184,7 @@ export default baseMixins.extend<options>().extend({
           dark: this.dark,
           disabled: this.isDisabled,
           light: this.light,
+          tabindex: type === 'clear' ? -1 : undefined,
         },
         on: !hasListener
           ? undefined

package/src/components/VItemGroup/VItemGroup.ts

@@ -219,7 +219,7 @@ export const BaseItemGroup = mixins(
         ? this.internalValue
         : []
       const internalValue = defaultValue.slice()
-      const index = internalValue.findIndex(val => val === value)
+      const index = internalValue.findIndex(val => this.valueComparator(val, value))
 
       if (
         this.mandatory &&
@@ -245,7 +245,7 @@ export const BaseItemGroup = mixins(
       this.internalValue = internalValue
     },
     updateSingle (value: any) {
-      const isSame = value === this.internalValue
+      const isSame = this.valueComparator(this.internalValue, value)
 
       if (this.mandatory && isSame) return
 

package/src/components/VItemGroup/__tests__/VItemGroup.spec.ts

@@ -217,6 +217,18 @@ describe('VItemGroup', () => {
     wrapper.vm.updateSingle('foo')
     expect(wrapper.vm.internalValue).toBeUndefined()
 
+    // Toggling on and off object references
+    wrapper.vm.updateSingle({ foo: 'foo' })
+    expect(wrapper.vm.internalValue).toEqual({ foo: 'foo' })
+    wrapper.vm.updateSingle({ foo: 'foo' })
+    expect(wrapper.vm.internalValue).toBeUndefined()
+
+    // Toggling on and off with custom comparator
+    wrapper.setProps({ valueComparator: (a: any, b: any) => a?.startsWith(b?.[0]), value: 'foo' })
+    expect(wrapper.vm.internalValue).toBe('foo')
+    wrapper.vm.updateSingle('foobar')
+    expect(wrapper.vm.internalValue).toBeUndefined()
+
     wrapper.setProps({ mandatory: true })
 
     // Toggling off single mandatory
@@ -237,6 +249,12 @@ describe('VItemGroup', () => {
     wrapper.vm.updateMultiple('foo')
     expect(wrapper.vm.internalValue).toEqual([])
 
+    // Toggling on and off object references
+    wrapper.vm.updateMultiple({ foo: 'foo' })
+    expect(wrapper.vm.internalValue).toEqual([{ foo: 'foo' }])
+    wrapper.vm.updateMultiple({ foo: 'foo' })
+    expect(wrapper.vm.internalValue).toEqual([])
+
     wrapper.setProps({ mandatory: true })
 
     // Toggling off single mandatory
@@ -256,6 +274,17 @@ describe('VItemGroup', () => {
     expect(wrapper.vm.internalValue).toEqual(['foo', 'bar', 'fizz'])
   })
 
+  it('should update a multiple item group with a custom comparator', () => {
+    const wrapper = mountFunction({
+      propsData: { multiple: true },
+    })
+
+    wrapper.setProps({ valueComparator: (a: any, b: any) => a?.startsWith(b?.[0]), value: ['foo'] })
+    expect(wrapper.vm.internalValue).toEqual(['foo'])
+    wrapper.vm.updateMultiple('foobar')
+    expect(wrapper.vm.internalValue).toEqual([])
+  })
+
   it('should update value if mandatory and dynamic items', async () => {
     const wrapper = mountFunction({
       propsData: {

package/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"

package/src/components/VPagination/VPagination.ts

@@ -89,7 +89,7 @@ export default mixins(
     items (): (string | number)[] {
       const totalVisible = parseInt(this.totalVisible, 10)
 
-      if (totalVisible === 0) {
+      if (totalVisible === 0 || isNaN(this.length) || this.length > Number.MAX_SAFE_INTEGER) {
         return []
       }
 

package/src/components/VRadioGroup/VRadio.ts

@@ -74,6 +74,7 @@ export default baseMixins.extend<options>().extend({
       }
     },
     computedColor (): string | undefined {
+      if (this.isDisabled) return undefined
       return Selectable.options.computed.computedColor.call(this)
     },
     computedIcon (): string {

package/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])

package/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">

package/src/components/VSelect/VSelectList.ts

@@ -18,10 +18,7 @@ import Colorable from '../../mixins/colorable'
 import Themeable from '../../mixins/themeable'
 
 // Helpers
-import {
-  escapeHTML,
-  getPropertyFromItem,
-} from '../../util/helpers'
+import { getPropertyFromItem } from '../../util/helpers'
 
 // Types
 import mixins from '../../util/mixins'
@@ -113,17 +110,17 @@ export default mixins(Colorable, Themeable).extend({
     genFilteredText (text: string) {
       text = text || ''
 
-      if (!this.searchInput || this.noFilter) return escapeHTML(text)
+      if (!this.searchInput || this.noFilter) return text
 
       const { start, middle, end } = this.getMaskedCharacters(text)
 
-      return `${escapeHTML(start)}${this.genHighlight(middle)}${escapeHTML(end)}`
+      return [start, this.genHighlight(middle), end]
     },
     genHeader (props: { [key: string]: any }): VNode {
       return this.$createElement(VSubheader, { props }, props.header)
     },
-    genHighlight (text: string): string {
-      return `<span class="v-list-item__mask">${escapeHTML(text)}</span>`
+    genHighlight (text: string) {
+      return this.$createElement('span', { staticClass: 'v-list-item__mask' }, text)
     },
     getMaskedCharacters (text: string): {
       start: string
@@ -202,13 +199,11 @@ export default mixins(Colorable, Themeable).extend({
         : scopedSlot
     },
     genTileContent (item: any, index = 0): VNode {
-      const innerHTML = this.genFilteredText(this.getText(item))
-
-      return this.$createElement(VListItemContent,
-        [this.$createElement(VListItemTitle, {
-          domProps: { innerHTML },
-        })]
-      )
+      return this.$createElement(VListItemContent, [
+        this.$createElement(VListItemTitle, [
+          this.genFilteredText(this.getText(item)),
+        ]),
+      ])
     },
     hasItem (item: object) {
       return this.parsedItems.indexOf(this.getValue(item)) > -1

package/src/components/VSelect/__tests__/__snapshots__/VSelect2.spec.ts.snap

@@ -25,6 +25,7 @@ exports[`VSelect.ts should be clearable with prop, dirty and multi select 1`] =
           <div class="v-input__icon v-input__icon--clear">
             <button type="button"
                     aria-label="clear icon"
+                    tabindex="-1"
                     class="v-icon notranslate v-icon--link material-icons theme--light"
             >
               $clear
@@ -85,6 +86,7 @@ exports[`VSelect.ts should be clearable with prop, dirty and single select 1`] =
           <div class="v-input__icon v-input__icon--clear">
             <button type="button"
                     aria-label="clear icon"
+                    tabindex="-1"
                     class="v-icon notranslate v-icon--link material-icons theme--light"
             >
               $clear

package/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',

package/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]') ||

package/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)', () => {

package/src/components/VSwitch/VSwitch.sass

@@ -45,6 +45,7 @@
 
   .v-input--selection-controls__input
     width: $switch-width
+    transition: opacity $primary-transition
 
   .v-input--selection-controls__ripple
     top: $switch-ripple-top
@@ -68,8 +69,8 @@
     .v-input--selection-controls__ripple
       top: $switch-ripple-dense-top
 
-  &.v-input--is-dirty
-    &.v-input--is-disabled
+  &.v-input--is-dirty.v-input--is-disabled
+    .v-input--selection-controls__input
       opacity: $switch-disabled-opacity
 
   +ltr()

package/src/components/VTextField/VTextField.sass

@@ -504,6 +504,15 @@
   &.v-input--has-state > .v-input__control > .v-input__slot:before
     border-color: currentColor
 
+  .v-input__icon--clear
+    opacity: 0
+    transition: opacity $primary-transition
+
+  &.v-input--is-focused,
+  &.v-input--is-dirty:hover
+    .v-input__icon--clear
+      opacity: 1
+
   // TODO: where are the corresponding rules for LTR?
   //
   // +rtl()

package/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)
       },
     },

package/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>
   }
 }

package/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 () => {

package/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)) {

package/src/mixins/menuable/index.ts

@@ -281,7 +281,10 @@ export default baseMixins.extend<options>().extend({
       }
     },
     checkActivatorFixed () {
-      if (this.attach !== false) return
+      if (this.attach !== false) {
+        this.activatorFixed = false
+        return
+      }
       let el = this.getActivator()
       while (el) {
         if (window.getComputedStyle(el).position === 'fixed') {