@dimailn/vuetify 2.7.2-alpha0 → 2.7.2-superbundle

package/src/mixins/rippleable/index.ts

@@ -2,9 +2,9 @@
 import ripple from '../../directives/ripple'
 
 // Types
-import Vue, { VNode, VNodeData, VNodeDirective, defineComponent, withDirectives, h } from 'vue'
+import Vue, { VNode, VNodeData, VNodeDirective } from 'vue'
 
-export default defineComponent({
+export default Vue.extend({
   name: 'rippleable',
 
   directives: { ripple },
@@ -20,22 +20,15 @@ export default defineComponent({
     genRipple (data: VNodeData = {}): VNode | null {
       if (!this.ripple) return null
 
-      data.class = 'v-input--selection-controls__ripple'
+      data.staticClass = 'v-input--selection-controls__ripple'
 
-      const node = h('div', data)
+      data.directives = data.directives || []
+      data.directives.push({
+        name: 'ripple',
+        value: { center: true },
+      } as VNodeDirective)
 
-      const directives = data.directives || []
-      delete data.directives
-
-      return withDirectives(node, [
-        ...(directives),
-        [
-          ripple,
-          { center: true },
-          '',
-          {}
-        ]
-      ])
+      return this.$createElement('div', data)
     },
   },
 })

package/src/mixins/roundable/index.ts

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

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

@@ -1,7 +1,7 @@
 import Routable from '../'
 import { createLocalVue, mount, Wrapper } from '@vue/test-utils'
 import Router from 'vue-router'
-import Vue, { VNode, withDirectives } from 'vue'
+import Vue, { VNode } from 'vue'
 
 describe('routable.ts', () => {
   let mountFunction: (options?: object) => Wrapper<Vue>
@@ -25,7 +25,7 @@ describe('routable.ts', () => {
           },
         },
         render (h): VNode {
-          const { tag, data, directives } = this.generateRouteLink()
+          const { tag, data } = this.generateRouteLink()
 
           data.attrs = {
             ...data.attrs,
@@ -34,10 +34,7 @@ describe('routable.ts', () => {
             ...data.on,
           }
 
-          return withDirectives(
-            h(tag, data, this.$slots.default),
-            directives
-          )
+          return h(tag, data, this.$slots.default)
         },
       }, {
         localVue,

package/src/mixins/routable/index.ts

@@ -1,4 +1,4 @@
-import { VNodeData, PropType, defineComponent, resolveComponent } from 'vue'
+import Vue, { VNodeData, PropType } from 'vue'
 
 // Directives
 import Ripple, { RippleOptions } from '../../directives/ripple'
@@ -6,7 +6,7 @@ import Ripple, { RippleOptions } from '../../directives/ripple'
 // Utilities
 import { getObjectValueByPath } from '../../util/helpers'
 
-export default defineComponent({
+export default Vue.extend({
   name: 'routable',
 
   directives: {
@@ -34,7 +34,6 @@ export default defineComponent({
     },
     tag: String,
     target: String,
-    notALink: Boolean
   },
 
   data: () => ({
@@ -48,9 +47,7 @@ export default defineComponent({
 
       if (this.to) return classes
 
-      const activeClass = this.activeClass || this.$activeClass
-
-      if (activeClass) classes[activeClass] = this.isActive
+      if (this.activeClass) classes[this.activeClass] = this.isActive
       if (this.proxyClass) classes[this.proxyClass] = this.isActive
 
       return classes
@@ -59,14 +56,12 @@ export default defineComponent({
       return this.ripple ?? (!this.disabled && this.isClickable)
     },
     isClickable (): boolean {
-      if(this.notALink) return false
-
       if (this.disabled) return false
 
       return Boolean(
         this.isLink ||
-        this.$attrs.onClick ||
-        this.$attrs['on!click'] ||
+        this.$listeners.click ||
+        this.$listeners['!click'] ||
         this.$attrs.tabindex
       )
     },
@@ -89,18 +84,22 @@ export default defineComponent({
       let exact = this.exact
       let tag
 
-      const directives = [[
-        Ripple,
-        this.computedRipple,
-      ]]
-
       const data: VNodeData = {
-        tabindex: 'tabindex' in this.$attrs ? this.$attrs.tabindex : undefined,
+        attrs: {
+          tabindex: 'tabindex' in this.$attrs ? this.$attrs.tabindex : undefined,
+        },
         class: this.classes,
         style: this.styles,
-        ...this.$listeners,
-        ...('click' in this ? { onClick: (this as any).click } : undefined), // #14447
-        ref: 'link'
+        props: {},
+        directives: [{
+          name: 'ripple',
+          value: this.computedRipple,
+        }],
+        [this.to ? 'nativeOn' : 'on']: {
+          ...this.$listeners,
+          ...('click' in this ? { click: (this as any).click } : undefined), // #14447
+        },
+        ref: 'link',
       }
 
       if (typeof this.exact === 'undefined') {
@@ -119,8 +118,8 @@ export default defineComponent({
           exactActiveClass = `${exactActiveClass} ${this.proxyClass}`.trim()
         }
 
-        tag = resolveComponent(this.nuxt ? 'nuxt-link' : 'router-link')
-        Object.assign(data, {
+        tag = this.nuxt ? 'nuxt-link' : 'router-link'
+        Object.assign(data.props, {
           to: this.to,
           exact,
           exactPath: this.exactPath,
@@ -132,12 +131,12 @@ export default defineComponent({
       } else {
         tag = (this.href && 'a') || this.tag || 'div'
 
-        if (tag === 'a' && this.href) data.href = this.href
+        if (tag === 'a' && this.href) data.attrs!.href = this.href
       }
 
-      if (this.target) data.target = this.target
+      if (this.target) data.attrs!.target = this.target
 
-      return { tag, data, directives }
+      return { tag, data }
     },
     onRouteChange () {
       if (!this.to || !this.$refs.link || !this.$route) return

package/src/mixins/scrollable/index.ts

@@ -5,7 +5,7 @@ import { Scroll } from '../../directives'
 import { consoleWarn } from '../../util/console'
 
 // Types
-import {defineComponent} from 'vue'
+import Vue from 'vue'
 
 /**
  * Scrollable
@@ -16,7 +16,7 @@ import {defineComponent} from 'vue'
  * met.
  */
 /* @vue/component */
-export default defineComponent({
+export default Vue.extend({
   name: 'scrollable',
 
   directives: { Scroll },

package/src/mixins/selectable/index.ts

@@ -7,7 +7,6 @@ import Comparable from '../comparable'
 
 // Utilities
 import mixins from '../../util/mixins'
-import {h} from 'vue'
 
 export function prevent (e: Event) {
   e.preventDefault()
@@ -28,7 +27,7 @@ export default mixins(
 
   props: {
     id: String,
-    value: null as any,
+    inputValue: null as any,
     falseValue: null as any,
     trueValue: null as any,
     multiple: {
@@ -40,8 +39,8 @@ export default mixins(
 
   data () {
     return {
-      hasColor: this.modelValue,
-      lazyValue: this.modelValue,
+      hasColor: this.inputValue,
+      lazyValue: this.inputValue,
     }
   },
 
@@ -84,7 +83,7 @@ export default mixins(
   },
 
   watch: {
-    modelValue (val) {
+    inputValue (val) {
       this.lazyValue = val
       this.hasColor = val
     },
@@ -92,32 +91,38 @@ export default mixins(
 
   methods: {
     genLabel () {
-      const label = VInput.methods.genLabel.call(this)
+      const label = VInput.options.methods.genLabel.call(this)
 
       if (!label) return label
 
-      // Label shouldn't cause the input to focus
-      label!.onClick = prevent
+      label!.data!.on = {
+        // Label shouldn't cause the input to focus
+        click: prevent,
+      }
 
       return label
     },
     genInput (type: string, attrs: object) {
-      return h('input', {
-        ...Object.assign({
+      return this.$createElement('input', {
+        attrs: Object.assign({
           'aria-checked': this.isActive.toString(),
           disabled: this.isDisabled,
           id: this.computedId,
           role: type,
           type,
         }, attrs),
-        value: this.value,
-        checked: this.isActive,
-        onBlur: this.onBlur,
-        onChange: this.onChange,
-        onFocus: this.onFocus,
-        onKeydown: this.onKeydown,
-        onClick: prevent,
-        ref: 'input'
+        domProps: {
+          value: this.value,
+          checked: this.isActive,
+        },
+        on: {
+          blur: this.onBlur,
+          change: this.onChange,
+          focus: this.onFocus,
+          keydown: this.onKeydown,
+          click: prevent,
+        },
+        ref: 'input',
       })
     },
     onClick (e: Event) {

package/src/mixins/sizeable/index.ts

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

package/src/mixins/ssr-bootable/index.ts

@@ -1,4 +1,4 @@
-import {defineComponent} from 'vue'
+import Vue from 'vue'
 
 /**
  * SSRBootable
@@ -8,7 +8,7 @@ import {defineComponent} from 'vue'
  * Used in layout components (drawer, toolbar, content)
  * to avoid an entry animation when using SSR
  */
-export default defineComponent({
+export default Vue.extend({
   name: 'ssr-bootable',
 
   data: () => ({

package/src/mixins/stackable/index.ts

@@ -1,4 +1,4 @@
-import {defineComponent} from 'vue'
+import Vue from 'vue'
 
 import { getZIndex } from '../../util/helpers'
 
@@ -9,7 +9,7 @@ interface options extends Vue {
 }
 
 /* @vue/component */
-export default defineComponent({
+export default Vue.extend<options>().extend({
   name: 'stackable',
 
   data () {

package/src/mixins/themeable/index.ts

@@ -1,14 +1,14 @@
-import {defineComponent, App} from 'vue'
+import Vue from 'vue'
 import { PropType, RenderContext } from 'vue/types/options'
 
-interface options extends App {
+interface options extends Vue {
   theme: {
     isDark: boolean
   }
 }
 
 /* @vue/component */
-const Themeable = defineComponent({
+const Themeable = Vue.extend<options>().extend({
   name: 'themeable',
 
   provide (): object {
@@ -101,7 +101,11 @@ const Themeable = defineComponent({
 
 export default Themeable
 
-export function functionalThemeClasses (vm: any): object {
-  const isDark = Themeable.computed.isDark.call(vm)
-  return Themeable.computed.themeClasses.call({ isDark })
+export function functionalThemeClasses (context: RenderContext): object {
+  const vm = {
+    ...context.props,
+    ...context.injections,
+  }
+  const isDark = Themeable.options.computed.isDark.call(vm)
+  return Themeable.options.computed.themeClasses.call({ isDark })
 }

package/src/mixins/toggleable/index.ts

@@ -1,11 +1,14 @@
-import { defineComponent, VueConstructor } from 'vue'
+import Vue, { VueConstructor } from 'vue'
 
 export type Toggleable<T extends string = 'value'> = VueConstructor<Vue & { isActive: boolean } & Record<T, any>>
 
 export function factory<T extends string = 'value'> (prop?: T, event?: string): Toggleable<T>
-export function factory (prop = 'modelValue', event = 'update:modelValue') {
-  return defineComponent({
+export function factory (prop = 'value', event = 'input') {
+  return Vue.extend({
     name: 'toggleable',
+
+    model: { prop, event },
+
     props: {
       [prop]: { required: false },
     },

package/src/mixins/transitionable/index.ts

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

package/src/mixins/translatable/index.ts

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

package/src/mixins/validatable/index.ts

@@ -54,7 +54,7 @@ export default baseMixins.extend({
       default: () => [],
     } as PropValidator<InputMessage | null>,
     validateOnBlur: Boolean,
-    modelValue: { required: false },
+    value: { required: false },
   },
 
   data () {

package/src/services/goto/util.ts

@@ -7,7 +7,6 @@ export function getOffset (target: any): number {
   }
 
   let el = $(target)
-
   if (!el) {
     throw typeof target === 'string'
       ? new Error(`Target element "${target}" not found.`)

package/src/services/theme/index.ts

@@ -7,7 +7,7 @@ import * as ThemeUtils from './utils'
 import { getNestedValue } from '../../util/helpers'
 
 // Types
-import {App, reactive} from 'vue'
+import Vue from 'vue'
 import { VuetifyPreset } from 'vuetify/types/services/presets'
 import {
   VuetifyParsedTheme,
@@ -101,7 +101,7 @@ export class Theme extends Service {
   // Initialize theme for SSR and SPA
   // Attach to ssrContext head or
   // apply new theme to document
-  public init (root: App, ssrContext?: any): void {
+  public init (root: Vue, ssrContext?: any): void {
     if (this.disabled) return
 
     /* istanbul ignore else */
@@ -116,7 +116,6 @@ export class Theme extends Service {
 
   // Allows for you to set target theme
   public setTheme (theme: 'light' | 'dark', value: object) {
-    console.log('setTheme')
     this.themes[theme] = Object.assign(this.themes[theme], value)
     this.applyTheme()
   }
@@ -171,7 +170,6 @@ export class Theme extends Service {
   }
 
   private initVueMeta (root: any) {
-    console.log('init vue meta')
     this.vueMeta = root.$meta()
     if (this.isVueMeta23) {
       // vue-meta needs to apply after mounted()
@@ -224,7 +222,7 @@ export class Theme extends Service {
     ssrContext.head += `<style type="text/css" id="vuetify-theme-stylesheet"${nonce}>${this.generatedStyles}</style>`
   }
 
-  private initTheme (root: App) {
+  private initTheme (root: Vue) {
     // Only watch for reactivity on client side
     if (typeof document === 'undefined') return
 
@@ -237,13 +235,10 @@ export class Theme extends Service {
 
     // TODO: Update to use RFC if merged
     // https://github.com/vuejs/rfcs/blob/advanced-reactivity-api/active-rfcs/0000-advanced-reactivity-api.md
-
-    // root.$once('hook:created', () => {
-    //   const obs = reactive({ themes: this.themes })
-    //   this.unwatch = root.$watch(() => obs.themes, () => this.applyTheme(), { deep: true })
-    // })
-
-
+    root.$once('hook:created', () => {
+      const obs = Vue.observable({ themes: this.themes })
+      this.unwatch = root.$watch(() => obs.themes, () => this.applyTheme(), { deep: true })
+    })
     this.applyTheme()
   }
 

package/src/util/helpers.ts

@@ -1,4 +1,4 @@
-import {defineComponent, h} from 'vue'
+import Vue from 'vue'
 import { VNode, VNodeDirective } from 'vue/types'
 import { VuetifyIcon } from 'vuetify/types/services/icons'
 import { DataTableCompareFunction, SelectItemKey, ItemGroup } from 'vuetify/types'
@@ -8,7 +8,7 @@ export function createSimpleFunctional (
   el = 'div',
   name?: string
 ) {
-  return defineComponent({
+  return Vue.extend({
     name: name || c.replace(/__/g, '-'),
 
     functional: true,
@@ -20,12 +20,10 @@ export function createSimpleFunctional (
       },
     },
 
-    render (): VNode {
-      const data = { ...this.$attrs }
+    render (h, { data, props, children }): VNode {
+      data.staticClass = (`${c} ${data.staticClass || ''}`).trim()
 
-      data.class = (`${c} ${data.class || ''}`).trim()
-
-      return h(this.tag, data, this.$slots.default?.())
+      return h(props.tag, data, children)
     },
   })
 }
@@ -125,7 +123,7 @@ export function deepEqual (a: any, b: any): boolean {
 export function getObjectValueByPath (obj: any, path: string, fallback?: any): any {
   // credit: http://stackoverflow.com/questions/6491463/accessing-nested-javascript-objects-with-string-key#comment55278413_6491621
   if (obj == null || !path || typeof path !== 'string') return fallback
-  if (path in obj && obj[path] !== undefined) return obj[path]
+  if (obj[path] !== undefined) return obj[path]
   path = path.replace(/\[(\w+)\]/g, '.$1') // convert indexes to properties
   path = path.replace(/^\./, '') // strip a leading dot
   return getNestedValue(obj, path.split('.'), fallback)
@@ -231,7 +229,6 @@ export function remapInternalIcon (vm: Vue, iconName: string): VuetifyIcon {
 
     // Now look up icon indirection name,
     // e.g. '$vuetify.icons.values.cancel'
-
     const override = getObjectValueByPath(vm, iconPath, iconName)
 
     if (typeof override === 'string') iconName = override
@@ -378,13 +375,11 @@ export function searchItems<T extends any = any> (items: T[], search: string): T
  *  - 'v-slot' for unbound v-slot (`#default`) - only if the third param is true, otherwise counts as scoped
  */
 export function getSlotType<T extends boolean = false> (vm: Vue, name: string, split?: T): (T extends true ? 'v-slot' : never) | 'normal' | 'scoped' | void {
-  return 'scoped'
-
-  if (vm.$slots.hasOwnProperty(name) && vm.$slots.hasOwnProperty(name) && (vm.$slots[name] as any).name) {
+  if (vm.$slots.hasOwnProperty(name) && vm.$scopedSlots.hasOwnProperty(name) && (vm.$scopedSlots[name] as any).name) {
     return split ? 'v-slot' as any : 'scoped'
   }
   if (vm.$slots.hasOwnProperty(name)) return 'normal'
-  if (vm.$slots.hasOwnProperty(name)) return 'scoped'
+  if (vm.$scopedSlots.hasOwnProperty(name)) return 'scoped'
 }
 
 export function debounce (fn: Function, delay: number) {
@@ -415,11 +410,10 @@ export function getPrefixedScopedSlots (prefix: string, scopedSlots: any) {
 
 export function getSlot (vm: Vue, name = 'default', data?: object | (() => object), optional = false) {
   const kebabName = kebabCase(name)
-
-  if (vm.$slots.hasOwnProperty(name)) {
-    return vm.$slots[name]!(data instanceof Function ? data() : data)
-  } else if (vm.$slots.hasOwnProperty(kebabName)) {
-    return vm.$slots[kebabName]!(data instanceof Function ? data() : data)
+  if (vm.$scopedSlots.hasOwnProperty(name)) {
+    return vm.$scopedSlots[name]!(data instanceof Function ? data() : data)
+  } else if (vm.$scopedSlots.hasOwnProperty(kebabName)) {
+    return vm.$scopedSlots[kebabName]!(data instanceof Function ? data() : data)
   } else if (vm.$slots.hasOwnProperty(name) && (!data || optional)) {
     return vm.$slots[name]
   } else if (vm.$slots.hasOwnProperty(kebabName) && (!data || optional)) {
@@ -520,15 +514,3 @@ export function composedPath (e: Event): EventTarget[] {
   }
   return path
 }
-
-export function normalizeAttrs (attrs) {
-  const keys = Object.keys(attrs).sort()
-
-  const obj = {}
-
-  for(let i = 0; i < keys.length; i++) {
-    obj[keys[i]] = attrs[keys[i]]
-  }
-
-  return obj
-}

package/src/util/mergeData.ts

@@ -61,7 +61,7 @@ export default function mergeData (): VNodeData {
           }
           break
         // Space delimited string concatenation strategy
-        case 'class':
+        case 'staticClass':
           if (!arguments[i][prop]) {
             break
           }

package/src/util/mixins.ts

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

package/src/vuetify.ts

@@ -0,0 +1,19 @@
+import * as components from './components'
+import * as directives from './directives'
+import Vuetify from './framework'
+
+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 { Vuetify }