@dimailn/vuetify 2.7.2-alpha4 → 2.7.2-alpha41

package/src/util/mergeData.ts

@@ -4,12 +4,12 @@
  * @see https://github.com/alexsasharegan/vue-functional-data-merge
  */
 /* eslint-disable max-statements */
-import { VNodeData } from 'vue'
+import type { VNodeData } from '../types/vue-internal'
 import { camelize, wrapInArray } from './helpers'
 
 const pattern = {
   styleList: /;(?![^(]*\))/g,
-  styleProp: /:(.*)/,
+  styleProp: /:(.*)/
 } as const
 
 function parseStyle (style: string) {
@@ -60,20 +60,6 @@ export default function mergeData (): VNodeData {
             mergeTarget[prop] = mergeStyles(mergeTarget[prop], arguments[i][prop])
           }
           break
-        // Space delimited string concatenation strategy
-        case 'class':
-          if (!arguments[i][prop]) {
-            break
-          }
-          if (mergeTarget[prop] === undefined) {
-            mergeTarget[prop] = ''
-          }
-          if (mergeTarget[prop]) {
-            // Not an empty string, so concatenate
-            mergeTarget[prop] += ' '
-          }
-          mergeTarget[prop] += arguments[i][prop].trim()
-          break
         // Object, the properties of which to merge via array merge strategy (array concatenation).
         // Callback merge strategy merges callbacks to the beginning of the array,
         // so that the last defined callback will be invoked first.
@@ -136,23 +122,28 @@ export function mergeListeners (...args: [
   { [key: string]: Function | Function[] } | undefined,
   { [key: string]: Function | Function[] } | undefined
 ]) {
-  if (!args[0]) return args[1]
-  if (!args[1]) return args[0]
+  if (!args[0] && !args[1]) return undefined
 
   const dest: { [key: string]: Function | Function[] } = {}
 
   for (let i = 2; i--;) {
     const arg = args[i]
+    if (!arg) continue
+
     for (const event in arg) {
       if (!arg[event]) continue
 
-      if (dest[event]) {
+      const vueEventName = event.startsWith('on') && event.length > 2 && event.charAt(2) === event.charAt(2).toUpperCase()
+        ? event
+        : `on${event.charAt(0).toUpperCase() + event.slice(1)}`
+
+      if (dest[vueEventName]) {
         // Merge current listeners before (because we are iterating backwards).
         // Note that neither "target" or "source" must be altered.
-        dest[event] = ([] as Function[]).concat(arg[event], dest[event])
+        dest[vueEventName] = ([] as Function[]).concat(arg[event], dest[vueEventName])
       } else {
         // Straight assign.
-        dest[event] = arg[event]
+        dest[vueEventName] = arg[event]
       }
     }
   }

package/src/util/mixins.ts

@@ -1,11 +1,30 @@
 /* eslint-disable max-len, import/export, no-use-before-define */
-export default function mixins (...args){
+import { Component, defineComponent } from 'vue'
+
+export interface MixinBuilder {
+  extend: (options: Record<string, any>) => ReturnType<typeof defineComponent>
+}
+
+export default function mixins (...args: Component[]): MixinBuilder {
   return {
-    extend(options) {
-      return {
-        mixins: args,
+    extend (options: Record<string, any>) {
+      return defineComponent({
+        mixins: args as any,
         ...options
-      }
+      }) as ReturnType<typeof defineComponent>
     }
   }
-}
+}
+
+/**
+ * Returns the instance type from a Vue 3 Component
+ * Useful for adding types when using mixins().extend()
+ */
+export type ExtractVue<T extends Component | Component[]> = T extends (infer U)[]
+  ? UnionToIntersection<
+    U extends Component<infer V> ? V : never
+  >
+  : T extends Component<infer V> ? V : never
+
+type UnionToIntersection<U> =
+  (U extends any ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never

package/src/util/rebuildFunctionalSlots.ts

@@ -1,4 +1,4 @@
-import { CreateElement, VNode } from 'vue'
+import type { CreateElement, VNode } from '../types/vue-internal'
 
 export default function rebuildFunctionalSlots (slots: { [key: string]: VNode[] | undefined }, h: CreateElement) {
   const children: VNode[] = []

package/types/alacarte.d.ts

@@ -1,7 +1,8 @@
 declare module 'vuetify/es5/install' {
-  import { VueConstructor } from 'vue'
+  import type { App } from 'vue'
+  import type { VuetifyUseOptions } from 'vuetify'
 
-  const install: (Vue: VueConstructor, args: {}) => void
+  const install: (app: App, args?: VuetifyUseOptions) => void
 
   export { install }
 }
@@ -13,26 +14,26 @@ declare module 'vuetify/es5/components/Vuetify' {
 
 declare module 'vuetify/es5/components/*' {
   import { ComponentOrPack } from 'vuetify'
-  import { VueConstructor } from 'vue'
+  import { Component } from 'vue'
 
   const VuetifyComponent: {
-    default: ComponentOrPack & VueConstructor
-    [key: string]: ComponentOrPack & VueConstructor
+    default: ComponentOrPack & Component
+    [key: string]: ComponentOrPack & Component
   }
 
   export = VuetifyComponent
 }
 
 declare module 'vuetify/es5/directives' {
-  import { DirectiveOptions } from 'vue'
-
-  const ClickOutside: DirectiveOptions
-  const Intersect: DirectiveOptions
-  const Mutate: DirectiveOptions
-  const Resize: DirectiveOptions
-  const Ripple: DirectiveOptions
-  const Scroll: DirectiveOptions
-  const Touch: DirectiveOptions
+  import { Directive } from 'vue'
+
+  const ClickOutside: Directive
+  const Intersect: Directive
+  const Mutate: Directive
+  const Resize: Directive
+  const Ripple: Directive
+  const Scroll: Directive
+  const Touch: Directive
 
   export {
     ClickOutside,

package/types/index.d.ts

@@ -1,4 +1,4 @@
-import Vue, { Component, PluginFunction, VueConstructor, DirectiveOptions, VNode } from 'vue'
+import type { App, Component, Directive, VNode } from 'vue'
 import './lib'
 import './alacarte'
 import './colors'
@@ -21,7 +21,7 @@ import { GoToOptions, VuetifyGoToTarget } from './services/goto'
 export default class Vuetify {
   constructor (preset?: Partial<UserVuetifyPreset>)
 
-  static install: PluginFunction<VuetifyUseOptions>
+  static install: (app: App, options?: VuetifyUseOptions) => void
   static version: string
   static config: Config
 
@@ -41,8 +41,8 @@ export type ComponentOrPack = Component & {
 }
 
 export interface VuetifyUseOptions {
-  transitions?: Record<string, VueConstructor>
-  directives?: Record<string, DirectiveOptions>
+  transitions?: Record<string, Component>
+  directives?: Record<string, Directive>
   components?: Record<string, ComponentOrPack>
 }
 
@@ -57,20 +57,12 @@ export interface Framework {
   rtl: boolean
 }
 
-declare module 'vue/types/vue' {
-  export interface Vue {
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
     $vuetify: Framework
   }
-}
 
-declare module 'vue/types/options' {
-  export interface ComponentOptions<
-    V extends Vue,
-    Data=DefaultData<V>,
-    Methods=DefaultMethods<V>,
-    Computed=DefaultComputed,
-    PropsDef=PropsDefinition<DefaultProps>,
-    Props=DefaultProps> {
+  interface ComponentCustomOptions {
     vuetify?: Vuetify
   }
 }

package/types/lib.d.ts

@@ -14,172 +14,172 @@ declare module 'vuetify/lib' {
 }
 
 declare module 'vuetify/lib/components' {
-  import { VueConstructor } from 'vue'
+  import { Component, Directive } from 'vue'
 
-  const VApp: VueConstructor
-  const VAppBar: VueConstructor
-  const VAppBarNavIcon: VueConstructor
-  const VAppBarTitle: VueConstructor
-  const VAlert: VueConstructor
-  const VAutocomplete: VueConstructor
-  const VAvatar: VueConstructor
-  const VBadge: VueConstructor
-  const VBanner: VueConstructor
-  const VBottomNavigation: VueConstructor
-  const VBottomSheet: VueConstructor
-  const VBreadcrumbs: VueConstructor
-  const VBreadcrumbsItem: VueConstructor
-  const VBreadcrumbsDivider: VueConstructor
-  const VBtn: VueConstructor
-  const VBtnToggle: VueConstructor
-  const VCalendar: VueConstructor
-  const VCalendarCategory: VueConstructor
-  const VCalendarDaily: VueConstructor
-  const VCalendarWeekly: VueConstructor
-  const VCalendarMonthly: VueConstructor
-  const VCard: VueConstructor
-  const VCardTitle: VueConstructor
-  const VCardSubtitle: VueConstructor
-  const VCardActions: VueConstructor
-  const VCardText: VueConstructor
-  const VCarousel: VueConstructor
-  const VCarouselItem: VueConstructor
-  const VCheckbox: VueConstructor
-  const VSimpleCheckbox: VueConstructor
-  const VChip: VueConstructor
-  const VChipGroup: VueConstructor
-  const VColorPicker: VueConstructor
-  const VColorPickerSwatches: VueConstructor
-  const VColorPickerCanvas: VueConstructor
-  const VContent: VueConstructor
-  const VCombobox: VueConstructor
-  const VCounter: VueConstructor
-  const VData: VueConstructor
-  const VDataIterator: VueConstructor
-  const VDataFooter: VueConstructor
-  const VDataTable: VueConstructor
-  const VEditDialog: VueConstructor
-  const VTableOverflow: VueConstructor
-  const VDataTableHeader: VueConstructor
-  const VSimpleTable: VueConstructor
-  const VVirtualTable: VueConstructor
-  const VVirtualScroll: VueConstructor
-  const VDatePicker: VueConstructor
-  const VDatePickerTitle: VueConstructor
-  const VDatePickerHeader: VueConstructor
-  const VDatePickerDateTable: VueConstructor
-  const VDatePickerMonthTable: VueConstructor
-  const VDatePickerYears: VueConstructor
-  const VDialog: VueConstructor
-  const VDivider: VueConstructor
-  const VExpansionPanels: VueConstructor
-  const VExpansionPanel: VueConstructor
-  const VExpansionPanelHeader: VueConstructor
-  const VExpansionPanelContent: VueConstructor
-  const VFileInput: VueConstructor
-  const VFooter: VueConstructor
-  const VForm: VueConstructor
-  const VContainer: VueConstructor
-  const VCol: VueConstructor
-  const VRow: VueConstructor
-  const VSpacer: VueConstructor
-  const VLayout: VueConstructor
-  const VFlex: VueConstructor
-  const VHover: VueConstructor
-  const VIcon: VueConstructor
-  const VImg: VueConstructor
-  const VInput: VueConstructor
-  const VItem: VueConstructor
-  const VItemGroup: VueConstructor
-  const VLabel: VueConstructor
-  const VLazy: VueConstructor
-  const VListItemActionText: VueConstructor
-  const VListItemContent: VueConstructor
-  const VListItemTitle: VueConstructor
-  const VListItemSubtitle: VueConstructor
-  const VList: VueConstructor
-  const VListGroup: VueConstructor
-  const VListItem: VueConstructor
-  const VListItemAction: VueConstructor
-  const VListItemAvatar: VueConstructor
-  const VListItemIcon: VueConstructor
-  const VListItemGroup: VueConstructor
-  const VMain: VueConstructor
-  const VMenu: VueConstructor
-  const VMessages: VueConstructor
-  const VNavigationDrawer: VueConstructor
-  const VOverflowBtn: VueConstructor
-  const VOverlay: VueConstructor
-  const VOtpInput: VueConstructor
-  const VPagination: VueConstructor
-  const VSheet: VueConstructor
-  const VParallax: VueConstructor
-  const VPicker: VueConstructor
-  const VProgressCircular: VueConstructor
-  const VProgressLinear: VueConstructor
-  const VRadioGroup: VueConstructor
-  const VRadio: VueConstructor
-  const VRangeSlider: VueConstructor
-  const VRating: VueConstructor
-  const VResponsive: VueConstructor
-  const VSelect: VueConstructor
-  const VSkeletonLoader: VueConstructor
-  const VSlider: VueConstructor
-  const VSlideGroup: VueConstructor
-  const VSlideItem: VueConstructor
-  const VSnackbar: VueConstructor
-  const VSparkline: VueConstructor
-  const VSpeedDial: VueConstructor
-  const VStepper: VueConstructor
-  const VStepperContent: VueConstructor
-  const VStepperStep: VueConstructor
-  const VStepperHeader: VueConstructor
-  const VStepperItems: VueConstructor
-  const VSubheader: VueConstructor
-  const VSwitch: VueConstructor
-  const VSystemBar: VueConstructor
-  const VTabs: VueConstructor
-  const VTab: VueConstructor
-  const VTabItem: VueConstructor
-  const VTabsItems: VueConstructor
-  const VTabsSlider: VueConstructor
-  const VTextarea: VueConstructor
-  const VTextField: VueConstructor
-  const VThemeProvider: VueConstructor
-  const VTimeline: VueConstructor
-  const VTimelineItem: VueConstructor
-  const VTimePicker: VueConstructor
-  const VTimePickerClock: VueConstructor
-  const VTimePickerTitle: VueConstructor
-  const VToolbar: VueConstructor
-  const VToolbarItems: VueConstructor
-  const VToolbarTitle: VueConstructor
-  const VTooltip: VueConstructor
-  const VTreeview: VueConstructor
-  const VTreeviewNode: VueConstructor
-  const VWindow: VueConstructor
-  const VWindowItem: VueConstructor
-  const VCarouselTransition: VueConstructor
-  const VCarouselReverseTransition: VueConstructor
-  const VTabTransition: VueConstructor
-  const VTabReverseTransition: VueConstructor
-  const VMenuTransition: VueConstructor
-  const VFabTransition: VueConstructor
-  const VDialogTransition: VueConstructor
-  const VDialogBottomTransition: VueConstructor
-  const VDialogTopTransition: VueConstructor
-  const VFadeTransition: VueConstructor
-  const VScaleTransition: VueConstructor
-  const VScrollXTransition: VueConstructor
-  const VScrollXReverseTransition: VueConstructor
-  const VScrollYTransition: VueConstructor
-  const VScrollYReverseTransition: VueConstructor
-  const VSlideXTransition: VueConstructor
-  const VSlideXReverseTransition: VueConstructor
-  const VSlideYTransition: VueConstructor
-  const VSlideYReverseTransition: VueConstructor
-  const VExpandTransition: VueConstructor
-  const VExpandXTransition: VueConstructor
+  const VApp: Component
+  const VAppBar: Component
+  const VAppBarNavIcon: Component
+  const VAppBarTitle: Component
+  const VAlert: Component
+  const VAutocomplete: Component
+  const VAvatar: Component
+  const VBadge: Component
+  const VBanner: Component
+  const VBottomNavigation: Component
+  const VBottomSheet: Component
+  const VBreadcrumbs: Component
+  const VBreadcrumbsItem: Component
+  const VBreadcrumbsDivider: Component
+  const VBtn: Component
+  const VBtnToggle: Component
+  const VCalendar: Component
+  const VCalendarCategory: Component
+  const VCalendarDaily: Component
+  const VCalendarWeekly: Component
+  const VCalendarMonthly: Component
+  const VCard: Component
+  const VCardTitle: Component
+  const VCardSubtitle: Component
+  const VCardActions: Component
+  const VCardText: Component
+  const VCarousel: Component
+  const VCarouselItem: Component
+  const VCheckbox: Component
+  const VSimpleCheckbox: Component
+  const VChip: Component
+  const VChipGroup: Component
+  const VColorPicker: Component
+  const VColorPickerSwatches: Component
+  const VColorPickerCanvas: Component
+  const VContent: Component
+  const VCombobox: Component
+  const VCounter: Component
+  const VData: Component
+  const VDataIterator: Component
+  const VDataFooter: Component
+  const VDataTable: Component
+  const VEditDialog: Component
+  const VTableOverflow: Component
+  const VDataTableHeader: Component
+  const VSimpleTable: Component
+  const VVirtualTable: Component
+  const VVirtualScroll: Component
+  const VDatePicker: Component
+  const VDatePickerTitle: Component
+  const VDatePickerHeader: Component
+  const VDatePickerDateTable: Component
+  const VDatePickerMonthTable: Component
+  const VDatePickerYears: Component
+  const VDialog: Component
+  const VDivider: Component
+  const VExpansionPanels: Component
+  const VExpansionPanel: Component
+  const VExpansionPanelHeader: Component
+  const VExpansionPanelContent: Component
+  const VFileInput: Component
+  const VFooter: Component
+  const VForm: Component
+  const VContainer: Component
+  const VCol: Component
+  const VRow: Component
+  const VSpacer: Component
+  const VLayout: Component
+  const VFlex: Component
+  const VHover: Component
+  const VIcon: Component
+  const VImg: Component
+  const VInput: Component
+  const VItem: Component
+  const VItemGroup: Component
+  const VLabel: Component
+  const VLazy: Component
+  const VListItemActionText: Component
+  const VListItemContent: Component
+  const VListItemTitle: Component
+  const VListItemSubtitle: Component
+  const VList: Component
+  const VListGroup: Component
+  const VListItem: Component
+  const VListItemAction: Component
+  const VListItemAvatar: Component
+  const VListItemIcon: Component
+  const VListItemGroup: Component
+  const VMain: Component
+  const VMenu: Component
+  const VMessages: Component
+  const VNavigationDrawer: Component
+  const VOverflowBtn: Component
+  const VOverlay: Component
+  const VOtpInput: Component
+  const VPagination: Component
+  const VSheet: Component
+  const VParallax: Component
+  const VPicker: Component
+  const VProgressCircular: Component
+  const VProgressLinear: Component
+  const VRadioGroup: Component
+  const VRadio: Component
+  const VRangeSlider: Component
+  const VRating: Component
+  const VResponsive: Component
+  const VSelect: Component
+  const VSkeletonLoader: Component
+  const VSlider: Component
+  const VSlideGroup: Component
+  const VSlideItem: Component
+  const VSnackbar: Component
+  const VSparkline: Component
+  const VSpeedDial: Component
+  const VStepper: Component
+  const VStepperContent: Component
+  const VStepperStep: Component
+  const VStepperHeader: Component
+  const VStepperItems: Component
+  const VSubheader: Component
+  const VSwitch: Component
+  const VSystemBar: Component
+  const VTabs: Component
+  const VTab: Component
+  const VTabItem: Component
+  const VTabsItems: Component
+  const VTabsSlider: Component
+  const VTextarea: Component
+  const VTextField: Component
+  const VThemeProvider: Component
+  const VTimeline: Component
+  const VTimelineItem: Component
+  const VTimePicker: Component
+  const VTimePickerClock: Component
+  const VTimePickerTitle: Component
+  const VToolbar: Component
+  const VToolbarItems: Component
+  const VToolbarTitle: Component
+  const VTooltip: Component
+  const VTreeview: Component
+  const VTreeviewNode: Component
+  const VWindow: Component
+  const VWindowItem: Component
+  const VCarouselTransition: Component
+  const VCarouselReverseTransition: Component
+  const VTabTransition: Component
+  const VTabReverseTransition: Component
+  const VMenuTransition: Component
+  const VFabTransition: Component
+  const VDialogTransition: Component
+  const VDialogBottomTransition: Component
+  const VDialogTopTransition: Component
+  const VFadeTransition: Component
+  const VScaleTransition: Component
+  const VScrollXTransition: Component
+  const VScrollXReverseTransition: Component
+  const VScrollYTransition: Component
+  const VScrollYReverseTransition: Component
+  const VSlideXTransition: Component
+  const VSlideXReverseTransition: Component
+  const VSlideYTransition: Component
+  const VSlideYReverseTransition: Component
+  const VExpandTransition: Component
+  const VExpandXTransition: Component
 
   export {
     VApp,
@@ -350,15 +350,15 @@ declare module 'vuetify/lib/components' {
 }
 
 declare module 'vuetify/lib/directives' {
-  import { DirectiveOptions } from 'vue'
+  import { Directive } from 'vue'
 
-  const ClickOutside: DirectiveOptions
-  const Intersect: DirectiveOptions
-  const Mutate: DirectiveOptions
-  const Resize: DirectiveOptions
-  const Ripple: DirectiveOptions
-  const Scroll: DirectiveOptions
-  const Touch: DirectiveOptions
+  const ClickOutside: Directive
+  const Intersect: Directive
+  const Mutate: Directive
+  const Resize: Directive
+  const Ripple: Directive
+  const Scroll: Directive
+  const Touch: Directive
 
   export {
     ClickOutside,

package/types/services/goto.d.ts

@@ -1,7 +1,7 @@
 // Types
-import Vue from 'vue'
+import type { ComponentPublicInstance } from 'vue'
 
-export type VuetifyGoToTarget = number | string | HTMLElement | Vue
+export type VuetifyGoToTarget = number | string | HTMLElement | ComponentPublicInstance
 
 export type VuetifyGoToEasing =
   ((t: number) => number) |
@@ -20,7 +20,7 @@ export type VuetifyGoToEasing =
   'easeInOutQuint'
 
 export interface GoToOptions {
-  container?: string | HTMLElement | Vue
+  container?: string | HTMLElement | ComponentPublicInstance
   duration?: number
   offset?: number
   easing?: VuetifyGoToEasing

package/types/services/index.d.ts

@@ -1,11 +1,11 @@
 // Types
-import Vue from 'vue'
+import type { ComponentPublicInstance } from 'vue'
 import Framework from '../'
 import { VuetifyPreset } from 'vuetify/types/services/presets'
 
 export interface VuetifyServiceContract {
   framework: Record<string, VuetifyServiceContract>
-  init: (root: Vue, ssrContext?: object) => void
+  init: (root: ComponentPublicInstance, ssrContext?: object) => void
 }
 
 export interface VuetifyService {