@dimailn/vuetify 2.7.2-alpha2 → 2.7.2-superbundle

package/src/mixins/dependent/index.ts

@@ -1,4 +1,4 @@
-import {defineComponent} from 'vue'
+import Vue from 'vue'
 
 import mixins from '../../util/mixins'
 import { VOverlay } from '../../components/VOverlay'
@@ -17,16 +17,13 @@ interface DependentInstance extends Vue {
 }
 
 function searchChildren (children: Vue[]): DependentInstance[] {
-
-
   const results = []
   for (let index = 0; index < children.length; index++) {
     const child = children[index] as DependentInstance
-
     if (child.isActive && child.isDependent) {
       results.push(child)
     } else {
-      results.push(...searchChildren(child.children?.default?.() || []))
+      results.push(...searchChildren(child.$children))
     }
   }
 
@@ -58,12 +55,7 @@ export default mixins<Vue & options>().extend({
 
   methods: {
     getOpenDependents (): any[] {
-      const node = this.$slots.default?.()
-
-      if(!node) return []
-
-      if (this.closeDependents) return searchChildren(node)
-
+      if (this.closeDependents) return searchChildren(this.$children)
 
       return []
     },

package/src/mixins/detachable/__tests__/detachable.spec.ts

@@ -7,12 +7,12 @@ const Mock = Detachable.extend({
 
   render (h) {
     const content = h('div', {
-      class: 'content',
+      staticClass: 'content',
       ref: 'content',
     })
 
     return h('div', {
-      class: 'mock',
+      staticClass: 'mock',
     }, [this.$slots.default, content])
   },
 })
@@ -54,7 +54,7 @@ describe('detachable.ts', () => {
       },
       slots: {
         default: [{
-          render: h => h('div', { class: 'foo' }),
+          render: h => h('div', { staticClass: 'foo' }),
         }],
       },
     })

package/src/mixins/detachable/index.ts

@@ -73,14 +73,14 @@ export default mixins<options &
         const activator = Array.isArray(this.activatorNode) ? this.activatorNode : [this.activatorNode]
 
         activator.forEach(node => {
-          if (!node.el) return
+          if (!node.elm) return
           if (!this.$el.parentNode) return
 
           const target = this.$el === this.$el.parentNode.firstChild
             ? this.$el
             : this.$el.nextSibling
 
-          this.$el.parentNode.insertBefore(node.el, target)
+          this.$el.parentNode.insertBefore(node.elm, target)
         })
       }
     })

package/src/mixins/elevatable/index.ts

@@ -1,6 +1,6 @@
-import {defineComponent} from 'vue'
+import Vue from 'vue'
 
-export default defineComponent({
+export default Vue.extend({
   name: 'elevatable',
 
   props: {

package/src/mixins/filterable/index.ts

@@ -1,7 +1,7 @@
-import {defineComponent} from 'vue'
+import Vue from 'vue'
 
 /* @vue/component */
-export default defineComponent({
+export default Vue.extend({
   name: 'filterable',
 
   props: {

package/src/mixins/groupable/index.ts

@@ -19,13 +19,17 @@ export function factory<T extends string, C extends VueConstructor | null = null
   child?: string,
   parent?: string
 ): Groupable<T, C> {
-  return {
+  return RegistrableInject<T, C>(namespace, child, parent).extend({
     name: 'groupable',
 
-    extends: RegistrableInject<T, C>(namespace, child, parent),
     props: {
       activeClass: {
         type: String,
+        default (): string | undefined {
+          if (!this[namespace]) return undefined
+
+          return this[namespace].activeClass
+        },
       } as any as PropValidator<string>,
       disabled: Boolean,
     },
@@ -37,18 +41,11 @@ export function factory<T extends string, C extends VueConstructor | null = null
     },
 
     computed: {
-      $activeClass() {
-        if(this.activeClass) return this.activeClass
-
-        if (!this[namespace]) return undefined
-
-        return this[namespace].activeClass
-      },
       groupClasses (): object {
-        if (!this.$activeClass) return {}
+        if (!this.activeClass) return {}
 
         return {
-          [this.$activeClass]: this.isActive,
+          [this.activeClass]: this.isActive,
         }
       },
     },
@@ -71,10 +68,9 @@ export function factory<T extends string, C extends VueConstructor | null = null
           return
         }
         this.$emit('change')
-        this.$emitLegacy('change')
       },
     },
-  }
+  })
 }
 
 /* eslint-disable-next-line @typescript-eslint/no-redeclare */

package/src/mixins/intersectable/index.ts

@@ -5,10 +5,10 @@ import Intersect from '../../directives/intersect'
 import { consoleWarn } from '../../util/console'
 
 // Types
-import {defineComponent, getCurrentInstance} from 'vue'
+import Vue from 'vue'
 
 export default function intersectable (options: { onVisible: string[] }) {
-  return defineComponent({
+  return Vue.extend({
     name: 'intersectable',
 
     data: () => ({
@@ -16,20 +16,17 @@ export default function intersectable (options: { onVisible: string[] }) {
     }),
 
     mounted () {
-      const {vnode} = getCurrentInstance()
-      Intersect.mounted(this.$el as HTMLElement, {
+      Intersect.inserted(this.$el as HTMLElement, {
         name: 'intersect',
         value: this.onObserve,
-      }, vnode)
+      }, this.$vnode)
     },
 
     destroyed () {
-      const {vnode} = getCurrentInstance()
-
       Intersect.unbind(this.$el as HTMLElement, {
         name: 'intersect',
         value: this.onObserve,
-      }, vnode)
+      }, this.$vnode)
     },
 
     methods: {

package/src/mixins/loadable/index.ts

@@ -1,8 +1,8 @@
-import { defineComponent, VNode, App, h } from 'vue'
+import Vue, { VNode } from 'vue'
 import VProgressLinear from '../../components/VProgressLinear'
 import { getSlot } from '../../util/helpers'
 
-interface colorable extends App {
+interface colorable extends Vue {
   color?: string
 }
 
@@ -16,7 +16,7 @@ interface colorable extends App {
  * or designate a custom progress linear bar
  */
 /* @vue/component */
-export default defineComponent({
+export default Vue.extend<colorable>().extend({
   name: 'loadable',
 
   props: {
@@ -34,13 +34,15 @@ export default defineComponent({
     genProgress (): VNode | VNode[] | null {
       if (this.loading === false) return null
 
-      return getSlot(this, 'progress') || h(VProgressLinear, {
-        absolute: true,
-        color: (this.loading === true || this.loading === '')
-          ? (this.color || 'primary')
-          : this.loading,
-        height: this.loaderHeight,
-        indeterminate: true,
+      return getSlot(this, 'progress') || this.$createElement(VProgressLinear, {
+        props: {
+          absolute: true,
+          color: (this.loading === true || this.loading === '')
+            ? (this.color || 'primary')
+            : this.loading,
+          height: this.loaderHeight,
+          indeterminate: true,
+        },
       })
     },
   },

package/src/mixins/localable/index.ts

@@ -1,6 +1,6 @@
-import {defineComponent} from 'vue'
+import Vue from 'vue'
 
-export default defineComponent({
+export default Vue.extend({
   name: 'localable',
 
   props: {

package/src/mixins/measurable/index.ts

@@ -2,11 +2,11 @@
 import { convertToUnit } from '../../util/helpers'
 
 // Types
-import { defineComponent, PropType } from 'vue'
+import Vue, { PropType } from 'vue'
 
 export type NumberOrNumberString = PropType<string | number | undefined>
 
-export default defineComponent({
+export default Vue.extend({
   name: 'measurable',
 
   props: {

package/src/mixins/menuable/index.ts

@@ -45,7 +45,7 @@ interface options extends ExtractVue<typeof baseMixins> {
 }
 
 /* @vue/component */
-export default baseMixins.extend({
+export default baseMixins.extend<options>().extend({
   name: 'menuable',
 
   props: {
@@ -133,9 +133,6 @@ export default baseMixins.extend({
   }),
 
   computed: {
-    isMenuable() {
-      return true
-    },
     computedLeft () {
       const a = this.dimensions.activator
       const c = this.dimensions.content
@@ -171,7 +168,7 @@ export default baseMixins.extend({
       return top
     },
     hasActivator (): boolean {
-      return !!this.$slots.activator || !!this.$slots.activator || !!this.activator || !!this.inputActivator
+      return !!this.$slots.activator || !!this.$scopedSlots.activator || !!this.activator || !!this.inputActivator
     },
     absoluteYOffset (): number {
       return this.pageYOffset - this.relativeYOffset
@@ -300,12 +297,12 @@ export default baseMixins.extend({
     },
     deactivate () {},
     genActivatorListeners () {
-      const listeners = Activatable.methods.genActivatorListeners.call(this)
+      const listeners = Activatable.options.methods.genActivatorListeners.call(this)
 
-      const onClick = listeners.onClick
+      const onClick = listeners.click
 
       if (onClick) {
-        listeners.onClick = (e: MouseEvent & KeyboardEvent & FocusEvent) => {
+        listeners.click = (e: MouseEvent & KeyboardEvent & FocusEvent) => {
           if (this.openOnClick) {
             onClick && onClick(e)
           }

package/src/mixins/mobile/index.ts

@@ -1,15 +1,22 @@
 // Types
 import { BreakpointName } from 'vuetify/types/services/breakpoint'
 import { deprecate } from '../../util/console'
-import { defineComponent, PropType } from 'vue'
+import Vue, { PropType } from 'vue'
 
 /* @vue/component */
-export default defineComponent({
+export default Vue.extend({
   name: 'mobile',
 
   props: {
     mobileBreakpoint: {
       type: [Number, String] as PropType<number | BreakpointName>,
+      default (): number | BreakpointName | undefined {
+        // Avoid destroying unit
+        // tests for users
+        return this.$vuetify
+          ? this.$vuetify.breakpoint.mobileBreakpoint
+          : undefined
+      },
       validator: v => (
         !isNaN(Number(v)) ||
         ['xs', 'sm', 'md', 'lg', 'xl'].includes(String(v))
@@ -18,11 +25,6 @@ export default defineComponent({
   },
 
   computed: {
-    $mobileBreakpoint() {
-      return this.mobileBreakpoint || (this.$vuetify
-      ? this.$vuetify.breakpoint.mobileBreakpoint
-      : undefined)
-    },
     isMobile (): boolean {
       const {
         mobile,
@@ -33,14 +35,14 @@ export default defineComponent({
 
       // Check if local mobileBreakpoint matches
       // the application's mobileBreakpoint
-      if (mobileBreakpoint === this.$mobileBreakpoint) return mobile
+      if (mobileBreakpoint === this.mobileBreakpoint) return mobile
 
-      const mobileWidth = parseInt(this.$mobileBreakpoint, 10)
+      const mobileWidth = parseInt(this.mobileBreakpoint, 10)
       const isNumber = !isNaN(mobileWidth)
 
       return isNumber
         ? width < mobileWidth
-        : name === this.$mobileBreakpoint
+        : name === this.mobileBreakpoint
     },
   },
 

package/src/mixins/mouse/index.ts

@@ -1,4 +1,4 @@
-import {defineComponent} from 'vue'
+import Vue from 'vue'
 
 export type MouseHandler = (e: MouseEvent | TouchEvent) => any
 
@@ -19,17 +19,12 @@ export type MouseEventsMap = {
   [event: string]: MouseHandler | MouseHandler[]
 }
 
-function mapEventName(str) {
-  let newStr = "on" + str;
-  return newStr.charAt(0).toUpperCase() + newStr.slice(1);
-}
-
-export default defineComponent({
+export default Vue.extend({
   name: 'mouse',
 
   methods: {
     getDefaultMouseEventHandlers (suffix: string, getData: MouseHandler, eventFirst = false): MouseEventsMap {
-      const listeners = Object.keys(this.$attrs)
+      const listeners = Object.keys(this.$listeners)
         .filter(key => key.endsWith(suffix))
         .reduce((acc, key) => {
           acc[key] = { event: key.slice(0, -suffix.length) }
@@ -47,7 +42,7 @@ export default defineComponent({
       for (const event in events) {
         const eventOptions = events[event]
 
-        if (!this.$attrs[mapEventName(event)]) continue
+        if (!this.$listeners[event]) continue
 
         // TODO somehow pull in modifiers
 

package/src/mixins/overlayable/index.ts

@@ -11,13 +11,13 @@ import {
 } from '../../util/helpers'
 
 // Types
-import {defineComponent, App, createApp, h} from 'vue'
+import Vue from 'vue'
 
-interface Toggleable extends App {
+interface Toggleable extends Vue {
   isActive?: boolean
 }
 
-interface Stackable extends App {
+interface Stackable extends Vue {
   activeZIndex: number
 }
 
@@ -30,7 +30,7 @@ interface options {
 }
 
 /* @vue/component */
-export default defineComponent({
+export default Vue.extend<Vue & Toggleable & Stackable & options>().extend({
   name: 'overlayable',
 
   props: {
@@ -61,49 +61,24 @@ export default defineComponent({
 
   methods: {
     createOverlay () {
-      // Create a container element
-      const container = document.createElement('div');
-
-      const props = {
-        absolute: this.absolute,
-        color: this.overlayColor,
-        opacity: this.overlayOpacity
-      }
-      const wrapper = {
-        data() {
-          return { value: false }
+      const overlay = new VOverlay({
+        propsData: {
+          absolute: this.absolute,
+          value: false,
+          color: this.overlayColor,
+          opacity: this.overlayOpacity,
         },
-        render() {
-          return h(VOverlay, {
-            value: this.value,
-            ...props
-          })
-        }
-      }
-      // // Create the overlay app
-      // const overlayApp = createApp(VOverlay, {
-      //   absolute: this.absolute,
-      //   value: false,
-      //   color: this.overlayColor,
-      //   opacity: this.overlayOpacity,
-      // });
-
-      const overlayApp = createApp(wrapper)
+      })
 
-      // Mount the app to the container
-      const overlayInstance = overlayApp.mount(container);
+      overlay.$mount()
 
-      // Determine the parent element
       const parent = this.absolute
         ? this.$el.parentNode
-        : document.querySelector('[data-app]');
+        : document.querySelector('[data-app]')
 
-      if (parent) {
-        parent.insertBefore(container, parent.firstChild);
-      }
+      parent && parent.insertBefore(overlay.$el, parent.firstChild)
 
-      this.overlay = overlayInstance;
-      this.overlayApp = overlayApp
+      this.overlay = overlay
     },
     genOverlay () {
       this.hideScroll()
@@ -139,11 +114,8 @@ export default defineComponent({
           ) return
 
           this.overlay.$el.parentNode.removeChild(this.overlay.$el)
-          this.overlayApp.unmount()
-          this.overlayApp = null
+          this.overlay.$destroy()
           this.overlay = null
-          console.log('destroyed')
-
         })
 
         // Cancel animation frame in case

package/src/mixins/picker/index.ts

@@ -11,7 +11,7 @@ import mixins from '../../util/mixins'
 import { getSlot } from '../../util/helpers'
 
 // Types
-import { VNode, h } from 'vue'
+import { VNode } from 'vue'
 
 export default mixins(
   Colorable,
@@ -41,35 +41,37 @@ export default mixins(
       return null
     },
     genPickerActionsSlot () {
-      return this.$slots.default ? this.$slots.default({
+      return this.$scopedSlots.default ? this.$scopedSlots.default({
         save: (this as any).save,
         cancel: (this as any).cancel,
       }) : getSlot(this)
     },
     genPicker (staticClass: string) {
-      const children = {}
+      const children: VNode[] = []
 
       if (!this.noTitle) {
         const title = this.genPickerTitle()
-        title && (children.title = title)
+        title && children.push(title)
       }
 
       const body = this.genPickerBody()
-      body && (children.default = body)
+      body && children.push(body)
 
-      children.actions = (h('template', {}, [this.genPickerActionsSlot()]))
+      children.push(this.$createElement('template', { slot: 'actions' }, [this.genPickerActionsSlot()]))
 
-      return h(VPicker, {
-        class: staticClass,
-        color: this.headerColor || this.color,
-        dark: this.dark,
-        elevation: this.elevation,
-        flat: this.flat,
-        fullWidth: this.fullWidth,
-        landscape: this.landscape,
-        light: this.light,
-        width: this.width,
-        noTitle: this.noTitle
+      return this.$createElement(VPicker, {
+        staticClass,
+        props: {
+          color: this.headerColor || this.color,
+          dark: this.dark,
+          elevation: this.elevation,
+          flat: this.flat,
+          fullWidth: this.fullWidth,
+          landscape: this.landscape,
+          light: this.light,
+          width: this.width,
+          noTitle: this.noTitle,
+        },
       }, children)
     },
   },

package/src/mixins/picker-button/index.ts

@@ -6,7 +6,7 @@ import mixins from '../../util/mixins'
 import { kebabCase } from '../../util/helpers'
 
 // Types
-import { VNodeChildren, h } from 'vue'
+import { VNodeChildren } from 'vue'
 
 /* @vue/component */
 export default mixins(
@@ -21,17 +21,18 @@ export default mixins(
       staticClass = ''
     ) {
       const active = (this as any)[prop] === value
-      const onClick = (event: Event) => {
+      const click = (event: Event) => {
         event.stopPropagation()
         this.$emit(`update:${kebabCase(prop)}`, value)
       }
 
-      return h('div', {
-        class: [`v-picker__title__btn ${staticClass}`.trim(), {
+      return this.$createElement('div', {
+        staticClass: `v-picker__title__btn ${staticClass}`.trim(),
+        class: {
           'v-picker__title__btn--active': active,
           'v-picker__title__btn--readonly': readonly,
-        }],
-        ...((active || readonly) ? {} : { onClick }),
+        },
+        on: (active || readonly) ? undefined : { click },
       }, Array.isArray(content) ? content : [content])
     },
   },

package/src/mixins/positionable/index.ts

@@ -1,4 +1,4 @@
-import {defineComponent} from 'vue'
+import Vue from 'vue'
 import { filterObjectOnKeys } from '../../util/helpers'
 import { OptionsVue, VueConstructor } from 'vue/types/vue'
 
@@ -17,7 +17,7 @@ export type Positionable<S extends keyof props> = VueConstructor<Vue & { [P in S
 export function factory <S extends keyof props> (selected?: S[]): Positionable<S>
 export function factory (selected: undefined): OptionsVue<Vue, {}, {}, {}, props, typeof availableProps>
 export function factory (selected: any[] = []): any {
-  return defineComponent({
+  return Vue.extend({
     name: 'positionable',
     props: selected.length ? filterObjectOnKeys(availableProps, selected) : availableProps,
   })

package/src/mixins/proxyable/index.ts

@@ -1,16 +1,16 @@
-import { defineComponent, VueConstructor, App } from 'vue'
+import Vue, { VueConstructor } from 'vue'
 
-export type Proxyable<T extends string = 'value'> = VueConstructor<App & {
+export type Proxyable<T extends string = 'value'> = VueConstructor<Vue & {
   internalLazyValue: unknown
   internalValue: unknown
 } & Record<T, any>>
 
 export function factory<T extends string = 'value'> (prop?: T, event?: string): Proxyable<T>
 export function factory (
-  prop = 'modelValue',
-  event = 'update:modelValue'
+  prop = 'value',
+  event = 'change'
 ) {
-  return defineComponent({
+  return Vue.extend({
     name: 'proxyable',
 
     model: {

package/src/mixins/registrable/index.ts

@@ -1,4 +1,4 @@
-import {defineComponent} from 'vue'
+import Vue from 'vue'
 import { VueConstructor } from 'vue/types/vue'
 import { consoleWarn } from '../../util/console'
 
@@ -21,7 +21,7 @@ export function inject<
     unregister: generateWarning(child, parent),
   } : null
 
-  return defineComponent({
+  return Vue.extend({
     name: 'registrable-inject',
 
     inject: {
@@ -33,7 +33,7 @@ export function inject<
 }
 
 export function provide (namespace: string, self = false) {
-  return defineComponent({
+  return Vue.extend({
     name: 'registrable-provide',
 
     provide (): object {

package/src/mixins/returnable/index.ts

@@ -1,7 +1,7 @@
-import {defineComponent} from 'vue'
+import Vue from 'vue'
 
 /* @vue/component */
-export default defineComponent({
+export default Vue.extend({
   name: 'returnable',
 
   props: {