@dimailn/vuetify 2.7.2-alpha2 → 2.7.2-superbundle

package/src/components/transitions/createTransition.ts

@@ -1,6 +1,5 @@
-import { FunctionalComponentOptions, VNode, VNodeData, Transition, TransitionGroup } from 'vue'
+import { FunctionalComponentOptions, VNode, VNodeData } from 'vue'
 import mergeData from '../../util/mergeData'
-import {h} from 'vue'
 
 function mergeTransitions (
   dest: Function | Function[] = [],
@@ -43,20 +42,23 @@ export function createSimpleTransition (
       },
     },
 
-    render (): VNode {
-      const tag = this.$props.group ? TransitionGroup : Transition
-
+    render (h, context): VNode {
+      const tag = `transition${context.props.group ? '-group' : ''}`
       const data: VNodeData = {
-        name,
-        mode: this.$props.mode,
-        onBeforeEnter: (el: HTMLElement) => {
-          el.style.transformOrigin = this.$props.origin
-          el.style.webkitTransformOrigin = this.$props.origin
-        }
+        props: {
+          name,
+          mode: context.props.mode,
+        },
+        on: {
+          beforeEnter (el: HTMLElement) {
+            el.style.transformOrigin = context.props.origin
+            el.style.webkitTransformOrigin = context.props.origin
+          },
+        },
       }
 
-      if (this.$props.leaveAbsolute) {
-        data.onLeave = mergeTransitions(data.onLeave, (el: HTMLElement) => {
+      if (context.props.leaveAbsolute) {
+        data.on!.leave = mergeTransitions(data.on!.leave, (el: HTMLElement) => {
           const { offsetTop, offsetLeft, offsetWidth, offsetHeight } = el
           el._transitionInitialStyles = {
             position: el.style.position,
@@ -71,7 +73,7 @@ export function createSimpleTransition (
           el.style.width = offsetWidth + 'px'
           el.style.height = offsetHeight + 'px'
         })
-        data.onAfterLeave = mergeTransitions(data.onAfterLeave, (el?: HTMLElement) => {
+        data.on!.afterLeave = mergeTransitions(data.on!.afterLeave, (el?: HTMLElement) => {
           if (el && el._transitionInitialStyles) {
             const { position, top, left, width, height } = el._transitionInitialStyles
             delete el._transitionInitialStyles
@@ -83,13 +85,13 @@ export function createSimpleTransition (
           }
         })
       }
-      if (this.$props.hideOnLeave) {
-        data.onLeave = mergeTransitions(data.onLeave, (el: HTMLElement) => {
+      if (context.props.hideOnLeave) {
+        data.on!.leave = mergeTransitions(data.on!.leave, (el: HTMLElement) => {
           el.style.setProperty('display', 'none', 'important')
         })
       }
 
-      return h(tag, mergeData(this.$attrs, data), this.$slots.default())
+      return h(tag, mergeData(context.data, data), context.children)
     },
   }
 }
@@ -111,14 +113,14 @@ export function createJavascriptTransition (
       },
     },
 
-    render (): VNode {
+    render (h, context): VNode {
       return h(
-        Transition,
-        mergeData(this.$attrs, {
-          name,
-          functions,
+        'transition',
+        mergeData(context.data, {
+          props: { name },
+          on: functions,
         }),
-        this.$slots.default()
+        context.children
       )
     },
   }

package/src/directives/click-outside/index.ts

@@ -77,7 +77,7 @@ export const ClickOutside = {
   // sure that the root element is
   // available, iOS does not support
   // clicks on body
-  mounted (el: HTMLElement, binding: ClickOutsideDirective, vnode: VNode) {
+  inserted (el: HTMLElement, binding: ClickOutsideDirective, vnode: VNode) {
     const onClick = (e: Event) => directive(e as PointerEvent, el, binding)
     const onMousedown = (e: Event) => {
       el._clickOutside!.lastMousedownWasOutside = checkEvent(e as PointerEvent, el, binding)
@@ -94,25 +94,25 @@ export const ClickOutside = {
       }
     }
 
-    el._clickOutside[vnode.ctx.uid] = {
+    el._clickOutside[vnode.context!._uid] = {
       onClick,
       onMousedown,
     }
   },
 
-  unmounted (el: HTMLElement, binding: ClickOutsideDirective, vnode: VNode) {
+  unbind (el: HTMLElement, binding: ClickOutsideDirective, vnode: VNode) {
     if (!el._clickOutside) return
 
     handleShadow(el, (app: HTMLElement) => {
-      if (!app || !el._clickOutside?.[vnode.ctx.uid]) return
+      if (!app || !el._clickOutside?.[vnode.context!._uid]) return
 
-      const { onClick, onMousedown } = el._clickOutside[vnode.ctx.uid]!
+      const { onClick, onMousedown } = el._clickOutside[vnode.context!._uid]!
 
       app.removeEventListener('click', onClick, true)
       app.removeEventListener('mousedown', onMousedown, true)
     })
 
-    delete el._clickOutside[vnode.ctx.uid]
+    delete el._clickOutside[vnode.context!._uid]
   },
 }
 

package/src/directives/intersect/index.ts

@@ -27,7 +27,7 @@ function inserted (el: HTMLElement, binding: ObserveVNodeDirective, vnode: VNode
     entries: IntersectionObserverEntry[] = [],
     observer: IntersectionObserver
   ) => {
-    const _observe = el._observe?.[vnode.ctx!.uid]
+    const _observe = el._observe?.[vnode.context!._uid]
     if (!_observe) return // Just in case, should never fire
 
     const isIntersecting = entries.some(entry => entry.isIntersecting)
@@ -52,22 +52,22 @@ function inserted (el: HTMLElement, binding: ObserveVNodeDirective, vnode: VNode
   }, options)
 
   el._observe = Object(el._observe)
-  el._observe![vnode.ctx!.uid] = { init: false, observer }
+  el._observe![vnode.context!._uid] = { init: false, observer }
 
   observer.observe(el)
 }
 
 function unbind (el: HTMLElement, binding: ObserveVNodeDirective, vnode: VNode) {
-  const observe = el._observe?.[vnode.ctx!.uid]
+  const observe = el._observe?.[vnode.context!._uid]
   if (!observe) return
 
   observe.observer.unobserve(el)
-  delete el._observe![vnode.ctx!.uid]
+  delete el._observe![vnode.context!._uid]
 }
 
 export const Intersect = {
-  mounted: inserted,
-  unmounted: unbind,
+  inserted,
+  unbind,
 }
 
 export default Intersect

package/src/directives/ripple/index.ts

@@ -4,7 +4,7 @@ import './VRipple.sass'
 // Utilities
 import { consoleWarn } from '../../util/console'
 import { keyCodes } from '../../util/helpers'
-import makeDirectiveActivatable from '../../util/make-directive-activatable'
+
 // Types
 import { VNode, VNodeDirective } from 'vue'
 
@@ -319,7 +319,7 @@ function directive (el: HTMLElement, binding: VNodeDirective, node: VNode) {
   }
 }
 
-function unbind (el: HTMLElement, binding) {
+function unbind (el: HTMLElement) {
   delete el._ripple
   removeListeners(el)
 }
@@ -334,12 +334,9 @@ function update (el: HTMLElement, binding: VNodeDirective) {
 }
 
 export const Ripple = {
-  mounted: directive,
-  unmounted: unbind,
-  updated: update,
+  bind: directive,
+  unbind,
+  update,
 }
 
-
-
-
-export default makeDirectiveActivatable(Ripple)
+export default Ripple

package/src/directives/touch/index.ts

@@ -1,7 +1,6 @@
 import { VNodeDirective, VNode } from 'vue/types/vnode'
 import { keys } from '../../util/helpers'
 import { TouchHandlers, TouchValue, TouchWrapper } from 'vuetify/types'
-import makeDirectiveActivatable from '../../util/make-directive-activatable'
 
 export interface TouchStoredHandlers {
   touchstart: (e: TouchEvent) => void
@@ -95,7 +94,7 @@ function inserted (el: HTMLElement, binding: TouchVNodeDirective, vnode: VNode)
 
   const handlers = createHandlers(binding.value!)
   target._touchHandlers = Object(target._touchHandlers)
-  target._touchHandlers![vnode.ctx.uid] = handlers
+  target._touchHandlers![vnode.context!._uid] = handlers
 
   keys(handlers).forEach(eventName => {
     target.addEventListener(eventName, handlers[eventName] as EventListener, options)
@@ -106,18 +105,16 @@ function unbind (el: HTMLElement, binding: TouchVNodeDirective, vnode: VNode) {
   const target = binding.value!.parent ? el.parentElement : el
   if (!target || !target._touchHandlers) return
 
-  const handlers = target._touchHandlers[vnode.ctx.uid]
+  const handlers = target._touchHandlers[vnode.context!._uid]
   keys(handlers).forEach(eventName => {
     target.removeEventListener(eventName, handlers[eventName])
   })
-  delete target._touchHandlers[vnode.ctx.uid]
+  delete target._touchHandlers[vnode.context!._uid]
 }
 
 export const Touch = {
-  mounted: inserted,
-  unmounted: unbind,
+  inserted,
+  unbind,
 }
 
-
-
-export default makeDirectiveActivatable(Touch)
+export default Touch

package/src/framework.ts

@@ -45,7 +45,6 @@ export default class Vuetify {
     this.use(services.Icons)
     this.use(services.Lang)
     this.use(services.Theme)
-
   }
 
   // Called on the new vuetify instance
@@ -74,7 +73,6 @@ export default class Vuetify {
 
     // TODO maybe a specific type for arg 2?
     this.framework[property] = new Service(this.preset, this as any)
-
     this.installed.push(property)
   }
 }

package/src/helpers.ts

@@ -0,0 +1,18 @@
+import { wrapInArray, convertToUnit } from './util/helpers'
+import dedupeModelListeners from './util/dedupeModelListeners'
+import rebuildSlots from './util/rebuildFunctionalSlots'
+import mergeData from './util/mergeData'
+import { keyCodes } from './util/helpers'
+import { getSlot } from './util/helpers'
+import { getPropertyFromItem } from './util/helpers'
+
+export {
+    wrapInArray,
+    convertToUnit,
+    dedupeModelListeners,
+    rebuildSlots,
+    mergeData,
+    keyCodes,
+    getSlot,
+    getPropertyFromItem
+}

package/src/index.ts

@@ -1,19 +1,3 @@
-import * as components from './components'
-import * as directives from './directives'
-import Vuetify from './framework'
-
-export default Vuetify
-
-const install = Vuetify.install
-
-Vuetify.install = (Vue, args) => {
-  install.call(Vuetify, Vue, {
-    components,
-    directives,
-    ...args,
-  })
-}
-
-// if (typeof window !== 'undefined' && window.Vue) {
-//   window.Vue.use(Vuetify)
-// }
+export * from './vuetify'
+export * from './components'
+export * from './helpers'

package/src/install.ts

@@ -1,17 +1,17 @@
-import { createApp, reactive } from 'vue'
+import OurVue, { VueConstructor } from 'vue'
 import { VuetifyUseOptions } from 'vuetify/types'
 import { consoleError } from './util/console'
 
-export function install (Vue: ReturnType<typeof createApp>, args: VuetifyUseOptions = {}) {
-  // if ((install as any).installed) return
-  // (install as any).installed = true
+export function install (Vue: VueConstructor, args: VuetifyUseOptions = {}) {
+  if ((install as any).installed) return
+  (install as any).installed = true
 
-//   if (OurVue !== Vue) {
-//     consoleError(`Multiple instances of Vue detected
-// See https://github.com/vuetifyjs/vuetify/issues/4068
+  if (OurVue !== Vue) {
+    consoleError(`Multiple instances of Vue detected
+See https://github.com/vuetifyjs/vuetify/issues/4068
 
-// If you're seeing "$attrs is readonly", it's caused by this`)
-//   }
+If you're seeing "$attrs is readonly", it's caused by this`)
+  }
 
   const components = args.components || {}
   const directives = args.directives || {}
@@ -22,7 +22,6 @@ export function install (Vue: ReturnType<typeof createApp>, args: VuetifyUseOpti
     Vue.directive(name, directive)
   }
 
-
   (function registerComponents (components: any) {
     if (components) {
       for (const key in components) {
@@ -48,7 +47,9 @@ export function install (Vue: ReturnType<typeof createApp>, args: VuetifyUseOpti
 
       if (options.vuetify) {
         options.vuetify.init(this, this.$ssrContext)
-        Vue.config.globalProperties.$vuetify = reactive(options.vuetify.framework)
+        this.$vuetify = Vue.observable(options.vuetify.framework)
+      } else {
+        this.$vuetify = (options.parent && options.parent.$vuetify) || this
       }
     },
     beforeMount () {
@@ -69,33 +70,5 @@ export function install (Vue: ReturnType<typeof createApp>, args: VuetifyUseOpti
         this.$vuetify.breakpoint.update()
       }
     },
-    methods: {
-      $emitLegacy(eventName, args) {
-        if(!this.eventsLegacy || !this.eventsLegacy[eventName]) return
-
-
-        this.eventsLegacy[eventName].forEach(listener => listener(args))
-      },
-      $on(eventName, listener) {
-        this.eventsLegacy ||= {}
-        this.eventsLegacy[eventName] ||= []
-        this.eventsLegacy[eventName].push(listener)
-        // console.warn("$on is not available")
-      },
-      $off(eventName, listener) {
-        this.eventsLegacy[eventName] = this.eventsLegacy[eventName].filter(_listener => _listener !== listener)
-        // console.warn('$off is not available')
-      }
-    },
-    computed: {
-      $listeners() {
-        const names = Object.keys(this.$attrs).filter(name => name.startsWith('on'))
-
-        return names.reduce((listeners, name) => {
-          listeners[name] = this.$attrs[name]
-          return listeners
-        }, {})
-      }
-    }
   })
 }

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

@@ -1,5 +1,5 @@
 // Libraries
-import {defineComponent} from 'vue'
+import Vue from 'vue'
 
 // Mixins
 import Activatable from '../'

package/src/mixins/activatable/index.ts

@@ -66,12 +66,6 @@ export default baseMixins.extend({
     this.removeActivatorEvents()
   },
 
-  computed: {
-    isActivatable() {
-      return true
-    }
-  },
-
   methods: {
     addActivatorEvents () {
       if (
@@ -89,10 +83,8 @@ export default baseMixins.extend({
     },
     genActivator () {
       const node = getSlot(this, 'activator', Object.assign(this.getValueProxy(), {
-        attrs: {
-          ...this.genActivatorListeners(),
-          ...this.genActivatorAttributes(),
-        }
+        on: this.genActivatorListeners(),
+        attrs: this.genActivatorAttributes(),
       })) || []
 
       this.activatorNode = node
@@ -112,16 +104,16 @@ export default baseMixins.extend({
       const listeners: Listeners = {}
 
       if (this.openOnHover) {
-        listeners.onMouseenter = (e: MouseEvent) => {
+        listeners.mouseenter = (e: MouseEvent) => {
           this.getActivator(e)
           this.runDelay('open')
         }
-        listeners.onMouseleave = (e: MouseEvent) => {
+        listeners.mouseleave = (e: MouseEvent) => {
           this.getActivator(e)
           this.runDelay('close')
         }
       } else if (this.openOnClick) {
-        listeners.onClick = (e: MouseEvent) => {
+        listeners.click = (e: MouseEvent) => {
           const activator = this.getActivator(e)
           if (activator) activator.focus()
 
@@ -132,7 +124,7 @@ export default baseMixins.extend({
       }
 
       if (this.openOnFocus) {
-        listeners.onFocus = (e: FocusEvent) => {
+        listeners.focus = (e: FocusEvent) => {
           this.getActivator(e)
 
           e.stopPropagation()
@@ -163,19 +155,19 @@ export default baseMixins.extend({
           activator = this.activator
         }
       } else if (this.activatorNode.length === 1 || (this.activatorNode.length && !e)) {
-
         // Use the contents of the activator slot
         // There's either only one element in it or we
         // don't have a click event to use as a last resort
-        const vm = this.activatorNode[0].component.ctx
+        const vm = this.activatorNode[0].componentInstance
         if (
           vm &&
-          (vm.isActivatable !== undefined || vm.isMenuable !== undefined)
+          vm.$options.mixins && //                         Activatable is indirectly used via Menuable
+          vm.$options.mixins.some((m: any) => m.options && ['activatable', 'menuable'].includes(m.options.name))
         ) {
           // Activator is actually another activatible component, use its activator (#8846)
           activator = (vm as any).getActivator()
         } else {
-          activator = this.activatorNode[0].el as HTMLElement
+          activator = this.activatorNode[0].elm as HTMLElement
         }
       } else if (e) {
         // Activated by a click or focus event
@@ -220,6 +212,6 @@ export default baseMixins.extend({
       this.activatorElement = null
       this.getActivator()
       this.addActivatorEvents()
-    }
+    },
   },
 })

package/src/mixins/binds-attrs/index.ts

@@ -1,4 +1,4 @@
-import {defineComponent} from 'vue'
+import Vue from 'vue'
 
 /**
  * This mixin provides `attrs$` and `listeners$` to work around
@@ -13,12 +13,12 @@ function makeWatcher (property: string): ThisType<Vue> & ((val: any, oldVal: any
       }
     }
     for (const attr in val) {
-      this.$data[property][attr] = val[attr]
+      this.$set(this.$data[property], attr, val[attr])
     }
   }
 }
 
-export default defineComponent({
+export default Vue.extend({
   data: () => ({
     attrs$: {} as Dictionary<string>,
     listeners$: {} as Dictionary<Function | Function[]>,

package/src/mixins/bootable/index.ts

@@ -1,10 +1,9 @@
 // Utilities
 import { removed } from '../../util/console'
-import {h} from 'vue'
 
 // Types
-import  { defineComponent, VNode, App } from 'vue'
-interface Toggleable extends App {
+import Vue, { VNode } from 'vue'
+interface Toggleable extends Vue {
   isActive?: boolean
 }
 
@@ -17,7 +16,7 @@ interface Toggleable extends App {
  * Otherwise can be set manually
  */
 /* @vue/component */
-export default defineComponent({
+export default Vue.extend<Vue & Toggleable>().extend({
   name: 'bootable',
 
   props: {
@@ -49,7 +48,7 @@ export default defineComponent({
 
   methods: {
     showLazyContent (content?: () => VNode[]): VNode[] {
-      return (this.hasContent && content) ? content() : [h()]
+      return (this.hasContent && content) ? content() : [this.$createElement()]
     },
   },
 })

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

@@ -1,11 +1,9 @@
 // Extensions
-import { defineComponent } from 'vue'
 import { BaseItemGroup } from '../../components/VItemGroup/VItemGroup'
 
 /* @vue/component */
-export default defineComponent({
+export default BaseItemGroup.extend({
   name: 'button-group',
-  extends: BaseItemGroup,
 
   provide (): object {
     return {
@@ -15,12 +13,12 @@ export default defineComponent({
 
   computed: {
     classes (): object {
-      return BaseItemGroup.computed.classes.call(this)
+      return BaseItemGroup.options.computed.classes.call(this)
     },
   },
 
   methods: {
     // Isn't being passed down through types
-    genData: BaseItemGroup.methods.genData,
+    genData: BaseItemGroup.options.methods.genData,
   },
 })

package/src/mixins/colorable/index.ts

@@ -1,9 +1,9 @@
-import {defineComponent} from 'vue'
+import Vue from 'vue'
 import { VNodeData } from 'vue/types/vnode'
 import { consoleError } from '../../util/console'
 import { isCssColor } from '../../util/colorUtils'
 
-export default defineComponent({
+export default Vue.extend({
   name: 'colorable',
 
   props: {
@@ -19,32 +19,11 @@ export default defineComponent({
         return data
       }
       if (typeof data.class === 'string') {
-        data.class = {
-          [data.class]: true
-        }
         // istanbul ignore next
-        // consoleError('class must be an object', this)
+        consoleError('class must be an object', this)
         // istanbul ignore next
-        // return data
-      }
-
-      if(data.class instanceof Array) {
-        data.class = data.class.reduce((classes, current) => {
-          if(typeof current === 'string') {
-            classes[current] = true
-          }
-
-          if(typeof current === 'object') {
-            classes = {
-              ...classes,
-              ...current
-            }
-          }
-
-          return classes
-        }, {})
+        return data
       }
-
       if (isCssColor(color)) {
         data.style = {
           ...data.style as object,
@@ -69,32 +48,11 @@ export default defineComponent({
         return data
       }
       if (typeof data.class === 'string') {
-        data.class = {
-          [data.class]: true
-        }
         // istanbul ignore next
-        // consoleError('class must be an object', this)
+        consoleError('class must be an object', this)
         // istanbul ignore next
-        // return data
-      }
-
-      if (data.class instanceof Array) {
-        data.class = data.class.reduce((classes, current) => {
-          if(typeof current === 'string') {
-            classes[current] = true
-          } else if(typeof current === 'object') {
-            classes = {
-              ...classes,
-              ...current
-            }
-          } else {
-            console.error(`Unknown type of class ${typeof current}`)
-          }
-
-          return classes
-        }, {})
+        return data
       }
-
       if (isCssColor(color)) {
         data.style = {
           ...data.style as object,
@@ -111,7 +69,6 @@ export default defineComponent({
           data.class['text--' + colorModifier] = true
         }
       }
-
       return data
     },
   },

package/src/mixins/comparable/index.ts

@@ -1,8 +1,8 @@
-import {defineComponent} from 'vue'
+import Vue from 'vue'
 import { PropValidator } from 'vue/types/options'
 import { deepEqual } from '../../util/helpers'
 
-export default defineComponent({
+export default Vue.extend({
   name: 'comparable',
   props: {
     valueComparator: {

package/src/mixins/delayable/index.ts

@@ -1,4 +1,4 @@
-import {defineComponent} from 'vue'
+import Vue from 'vue'
 
 /**
  * Delayable
@@ -7,7 +7,7 @@ import {defineComponent} from 'vue'
  *
  * Changes the open or close delay time for elements
  */
-export default defineComponent({
+export default Vue.extend<Vue & { isActive?: boolean }>().extend({
   name: 'delayable',
 
   props: {