@dimailn/vuetify 2.7.2-alpha0 → 2.7.2-alpha10

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dimailn/vuetify",
   "description": "Vue Material Component Framework",
-  "version": "2.7.2-alpha0",
+  "version": "2.7.2-alpha10",
   "author": {
     "name": "John Leider",
     "email": "john@vuetifyjs.com"

package/src/components/VAutocomplete/VAutocomplete.ts

@@ -204,7 +204,7 @@ export default defineComponent({
     this.setSearch()
   },
 
-  destroyed () {
+  unmounted () {
     document.removeEventListener('copy', this.onCopy)
   },
 

package/src/components/VBadge/VBadge.ts

@@ -11,7 +11,7 @@ import Themeable from '../../mixins/themeable'
 import Toggleable from '../../mixins/toggleable'
 import Transitionable from '../../mixins/transitionable'
 import { factory as PositionableFactory } from '../../mixins/positionable'
-
+import mergeData from '../../util/mergeData'
 // Utilities
 import mixins from '../../util/mixins'
 import {
@@ -186,9 +186,9 @@ export default mixins(
     if (this.inline && this.left) children.unshift(badge)
     else children.push(badge)
 
-    return h('span', {
-      class: ['v-badge' this.classes],
-      ...attrs
-    }, children)
+    return h('span', mergeData({
+      class: ['v-badge', this.classes]
+    }, attrs)
+    , children)
   },
 })

package/src/components/VBottomSheet/VBottomSheet.sass

@@ -2,7 +2,7 @@
 
 // Transition
 .bottom-sheet-transition
-  &-enter
+  &-enter-from
     transform: translateY(100%)
 
   &-leave-to

package/src/components/VData/VData.ts

@@ -203,7 +203,15 @@ export default defineComponent({
         this.$emit('update:options', options)
       },
       deep: true,
-      immediate: true,
+      /*
+        In Vue 3 this watcher fires even before created hook and
+        if mounting fails and the consumer code relies on update:options event to fetch data
+        it causes infinite loop because each data update triggers an attempt to render a table,
+        but because mounting constantly fails(for example, due to error in slot) it never happens.
+        Previously, in Vue 2 slot errors didn't cause mounting failure, we had partially rendered component.
+        This immediate prop is compensated by firing event in mounted hook.
+      */
+      // immediate: true,
     },
     page (page: number) {
       this.updateOptions({ page })
@@ -378,4 +386,7 @@ export default defineComponent({
   render (): VNode {
     return this.$slots.default && this.$slots.default(this.scopedProps)[0] as any
   },
+  mounted() {
+    this.$emit('update:options', this.internalOptions)
+  },
 })

package/src/components/VDataIterator/VDataIterator.ts

@@ -154,7 +154,7 @@ export default mixins(
     window.addEventListener('keydown', this.onKeyDown)
     window.addEventListener('keyup', this.onKeyUp)
   },
-  beforeDestroy () {
+  beforeUnmount () {
     window.removeEventListener('keydown', this.onKeyDown)
     window.removeEventListener('keyup', this.onKeyUp)
   },

package/src/components/VDataTable/VDataTable.ts

@@ -241,7 +241,7 @@ export default mixins(
     }
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     if (this.calculateWidths) {
       window.removeEventListener('resize', this.calcWidths)
     }

package/src/components/VDataTable/VVirtualTable.ts

@@ -98,7 +98,7 @@ export default baseMixins.extend({
     this.$refs.table.addEventListener('scroll', this.scrollDebounce, { passive: true })
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     this.$refs.table.removeEventListener('scroll', this.scrollDebounce)
   },
 

package/src/components/VDataTable/mixins/header.ts

@@ -55,8 +55,8 @@ export default mixins<options>().extend({
       const data = {
         value: this.everyItem,
         indeterminate: !this.everyItem && this.someItems,
-        color: this.checkboxColor ?? ''
-        onInput: (v: boolean) => this.$emit('toggle-select-all', v),
+        color: this.checkboxColor ?? '',
+        onInput: (v: boolean) => this.$emit('toggle-select-all', v)
       }
 
       if (this.$slots['data-table-select']) {

package/src/components/VDialog/VDialog.ts

@@ -137,7 +137,7 @@ export default baseMixins.extend({
     })
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     if (typeof window !== 'undefined') this.unbind()
   },
 

package/src/components/VExpansionPanel/VExpansionPanelContent.ts

@@ -55,7 +55,7 @@ export default baseMixins.extend({
     this.expansionPanel.registerContent(this)
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     this.expansionPanel.unregisterContent()
   },
 

package/src/components/VExpansionPanel/VExpansionPanelHeader.ts

@@ -72,7 +72,7 @@ export default baseMixins.extend({
     this.expansionPanel.registerHeader(this)
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     this.expansionPanel.unregisterHeader()
   },
 

package/src/components/VForm/VForm.ts

@@ -127,7 +127,7 @@ export default mixins(
 
       this.watchers = this.watchers.filter(i => i._uid !== found._uid)
       this.inputs = this.inputs.filter(i => i._uid !== found._uid)
-      this.$delete(this.errorBag, found._uid)
+      delete this.errorBag[found._uid]
     },
   },
 

package/src/components/VGrid/VCol.ts

@@ -68,7 +68,7 @@ const cache = new Map<string, any[]>()
 
 export default defineComponent({
   name: 'v-col',
-  functional: true,
+  inheritAttrs: false,
   props: {
     cols: {
       type: [Boolean, String, Number],
@@ -134,6 +134,6 @@ export default defineComponent({
       cache.set(cacheKey, classList)
     }
 
-    return h(props.tag, mergeData(data, { class: classList }), children)
+    return h(props.tag, mergeData({ class: classList }, data), children)
   },
 })

package/src/components/VImg/VImg.ts

@@ -244,7 +244,7 @@ export default mixins(
       let content: VNode = VResponsive.methods.genContent.call(this)
 
       if (this.naturalWidth) {
-        content = h(content.type, mergeProps(content.data!, {
+        content = h(content.type, mergeProps(content.props, {
           style: { width: `${this.naturalWidth}px` },
         }), content.children)
       }

package/src/components/VInput/VInput.ts

@@ -134,7 +134,7 @@ export default baseMixins.extend({
   },
 
   watch: {
-    value (val) {
+    modelValue (val) {
       this.lazyValue = val
     },
   },

package/src/components/VItemGroup/VItemGroup.ts

@@ -52,8 +52,8 @@ export const BaseItemGroup = mixins(
       // As long as a value is defined, show it
       // Otherwise, check if multiple
       // to determine which default to provide
-      internalLazyValue: this.value !== undefined
-        ? this.value
+      internalLazyValue: this.modelValue !== undefined
+        ? this.modelValue
         : this.multiple ? [] : undefined,
       items: [] as GroupableInstance[],
     }
@@ -102,7 +102,7 @@ export const BaseItemGroup = mixins(
 
   watch: {
     internalValue: 'updateItemsState',
-    items: 'updateItemsState',
+    items: 'updateItemsState'
   },
 
   created () {

package/src/components/VList/VListGroup.ts

@@ -108,7 +108,7 @@ export default baseMixins.extend({
     }
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     this.list && this.list.unregister(this)
   },
 

package/src/components/VMenu/VMenu.sass

@@ -36,7 +36,7 @@
     max-width: none
 
   &-transition
-    &-enter
+    &-enter-from
       .v-list-item
         min-width: 0
         pointer-events: none
@@ -48,7 +48,7 @@
     &-leave-to
       pointer-events: none
 
-    &-enter,
+    &-enter-from,
     &-leave-to
       opacity: 0
 

package/src/components/VMenu/VMenu.ts

@@ -282,6 +282,7 @@ export default baseMixins.extend({
       return this.isActive &&
         !this._isDestroyed &&
         this.closeOnClick &&
+        this.$refs.content &&
         !this.$refs.content.contains(target)
     },
     genActivatorAttributes () {

package/src/components/VOverlay/VOverlay.ts

@@ -36,7 +36,7 @@ export default mixins(
       type: [Number, String],
       default: 0.46,
     },
-    value: {
+    modelValue: {
       default: true,
     },
     zIndex: {

package/src/components/VRadioGroup/VRadioGroup.ts

@@ -12,8 +12,8 @@ import { PropType } from 'vue'
 import {h} from 'vue'
 
 const baseMixins = mixins(
+  VInput,
   BaseItemGroup,
-  VInput
 )
 
 /* @vue/component */
@@ -40,7 +40,7 @@ export default baseMixins.extend({
     // If no value set on VRadio
     // will match valueComparator
     // force default to null
-    value: null as unknown as PropType<any>,
+    modelValue: null as unknown as PropType<any>,
   },
 
   computed: {

package/src/components/VSelect/VSelect.ts

@@ -241,7 +241,7 @@ export default baseMixins.extend({
       return {
         ...defaultMenuProps,
         eager: this.eager,
-        value: this.menuCanShow && this.isMenuActive,
+        modelValue: this.menuCanShow && this.isMenuActive,
         nudgeBottom: normalisedProps.offsetY ? 1 : 0, // convert to int
         ...normalisedProps,
       }
@@ -287,8 +287,6 @@ export default baseMixins.extend({
   methods: {
     /** @public */
     blur (e?: Event) {
-      console.log("BLUUUUR")
-
       VTextField.methods.blur.call(this, e)
       this.isMenuActive = false
       this.isFocused = false
@@ -453,7 +451,6 @@ export default baseMixins.extend({
       delete input.props.name
 
       input.props = mergeData(input.props, {
-        value: null,
         readonly: true,
         type: 'text',
         'aria-readonly': String(this.isReadonly),
@@ -463,10 +460,9 @@ export default baseMixins.extend({
         onKeypress: this.onKeyPress,
       })
 
+      input.props = { ...input.props, value: null }
       input.props = normalizeAttrs(input.props)
 
-      // console.log(input)
-
       return input
     },
     genHiddenInput (): VNode {

package/src/components/VSheet/VSheet.ts

@@ -57,7 +57,7 @@ export default defineComponent({
     const data = {
       class: this.classes,
       style: this.styles,
-      on: this.listeners$,
+      ...this.listeners$,
     }
 
     return h(

package/src/components/VSnackbar/VSnackbar.sass

@@ -132,11 +132,11 @@
       margin-bottom: $snackbar-vertical-action-margin-bottom
 
 .v-snack-transition
-  &-enter
+  &-enter-from
     &.v-snack__wrapper
       transform: scale($snackbar-transition-wrapper-transform)
 
-  &-enter,
+  &-enter-from,
   &-leave-to
     &.v-snack__wrapper
       opacity: 0

package/src/components/VStepper/VStepperContent.ts

@@ -99,7 +99,7 @@ export default baseMixins.extend({
     this.stepper && this.stepper.register(this)
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     this.$refs.wrapper.removeEventListener(
       'transitionend',
       this.onTransition,

package/src/components/VStepper/VStepperStep.ts

@@ -87,7 +87,7 @@ export default baseMixins.extend({
     this.stepper && this.stepper.register(this)
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     this.stepper && this.stepper.unregister(this)
   },
 

package/src/components/VSubheader/VSubheader.ts

@@ -22,11 +22,11 @@ export default mixins(
 
   render (): VNode {
     return h('div', {
+      ...this.$attrs,
       class: ['v-subheader', {
         'v-subheader--inset': this.inset,
         ...this.themeClasses,
-      }],
-      ...this.$attrs,
+      }, this.$attrs.class],
       ...this.$listeners
     }, getSlot(this))
   },

package/src/components/VTabs/VTab.ts

@@ -115,7 +115,7 @@ export default baseMixins.extend({
     let { tag, data, directives } = this.generateRouteLink()
 
     data = {
-      ...data
+      ...data,
       'aria-selected': String(this.isActive),
       role: 'tab',
       tabindex: this.disabled ? -1 : 0,

package/src/components/VTabs/VTabs.ts

@@ -232,7 +232,6 @@ export default baseMixins.extend({
       return h(VTabsItems, {
         modelValue: this.internalValue,
         'onUpdate:modelValue': (val: any) => {
-          console.log(val)
           this.internalValue = val
         }
       }, item)

package/src/components/VTextField/VTextField.ts

@@ -205,7 +205,7 @@ export default baseMixins.extend({
       this.$nextTick(this.setPrefixWidth)
     },
     isFocused: 'updateValue',
-    value (val) {
+    modelValue (val) {
       this.lazyValue = val
     },
   },

package/src/components/VTreeview/VTreeviewNode.ts

@@ -161,7 +161,7 @@ const VTreeviewNode = baseMixins.extend({
     this.treeview.register(this)
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     this.treeview.unregister(this)
   },
 

package/src/components/transitions/createTransition.ts

@@ -88,7 +88,6 @@ export function createSimpleTransition (
           el.style.setProperty('display', 'none', 'important')
         })
       }
-
       return h(tag, mergeData(this.$attrs, data), this.$slots.default())
     },
   }
@@ -116,7 +115,7 @@ export function createJavascriptTransition (
         Transition,
         mergeData(this.$attrs, {
           name,
-          functions,
+          ...functions,
         }),
         this.$slots.default()
       )

package/src/components/transitions/expand-transition.ts

@@ -15,7 +15,7 @@ export default function (expandedParentClass = '', x = false) {
   const offsetProperty = `offset${upperFirst(sizeProperty)}` as 'offsetHeight' | 'offsetWidth'
 
   return {
-    beforeEnter (el: HTMLExpandElement) {
+    onBeforeEnter (el: HTMLExpandElement) {
       el._parent = el.parentNode as (Node & ParentNode & HTMLElement) | null
       el._initialStyle = {
         transition: el.style.transition,
@@ -24,7 +24,7 @@ export default function (expandedParentClass = '', x = false) {
       }
     },
 
-    enter (el: HTMLExpandElement) {
+    onEnter (el: HTMLExpandElement) {
       const initialStyle = el._initialStyle!
 
       el.style.setProperty('transition', 'none', 'important')
@@ -47,10 +47,10 @@ export default function (expandedParentClass = '', x = false) {
       })
     },
 
-    afterEnter: resetStyles,
-    enterCancelled: resetStyles,
+    onAfterEnter: resetStyles,
+    onEnterCancelled: resetStyles,
 
-    leave (el: HTMLExpandElement) {
+    onLeave (el: HTMLExpandElement) {
       el._initialStyle = {
         transition: '',
         overflow: el.style.overflow,
@@ -64,8 +64,8 @@ export default function (expandedParentClass = '', x = false) {
       requestAnimationFrame(() => (el.style[sizeProperty] = '0'))
     },
 
-    afterLeave,
-    leaveCancelled: afterLeave,
+    onAfterLeave: afterLeave,
+    onLeaveCancelled: afterLeave,
   }
 
   function afterLeave (el: HTMLExpandElement) {

package/src/mixins/activatable/index.ts

@@ -62,10 +62,16 @@ export default baseMixins.extend({
     this.addActivatorEvents()
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     this.removeActivatorEvents()
   },
 
+  computed: {
+    isActivatable() {
+      return true
+    }
+  },
+
   methods: {
     addActivatorEvents () {
       if (
@@ -82,15 +88,18 @@ export default baseMixins.extend({
       }
     },
     genActivator () {
-      const node = getSlot(this, 'activator', Object.assign(this.getValueProxy(), {
+      let node = getSlot(this, 'activator', Object.assign(this.getValueProxy(), {
         attrs: {
           ...this.genActivatorListeners(),
           ...this.genActivatorAttributes(),
         }
-
       })) || []
 
-      this.activatorNode = node
+      node = Array.isArray(node) ? node : [node]
+
+      this.activatorNode = node.flatMap(node => {
+        return node.type === Symbol.for('v-fgt') ? node.children : node
+      })
 
       return node
     },
@@ -162,11 +171,10 @@ export default baseMixins.extend({
         // 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].component?.ctx
         if (
           vm &&
-          vm.$options.mixins && //                         Activatable is indirectly used via Menuable
-          vm.$options.mixins.some((m: any) => m.options && ['activatable', 'menuable'].includes(m.options.name))
+          (vm.isActivatable !== undefined || vm.isMenuable !== undefined)
         ) {
           // Activator is actually another activatible component, use its activator (#8846)
           activator = (vm as any).getActivator()
@@ -216,6 +224,6 @@ export default baseMixins.extend({
       this.activatorElement = null
       this.getActivator()
       this.addActivatorEvents()
-    },
+    }
   },
 })

package/src/mixins/applicationable/index.ts

@@ -51,7 +51,7 @@ export default function applicationable (value: TargetProp, events: string[] = [
       this.removeApplication()
     },
 
-    destroyed () {
+    unmounted () {
       this.removeApplication()
     },
 

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

@@ -9,7 +9,7 @@ function makeWatcher (property: string): ThisType<Vue> & ((val: any, oldVal: any
   return function (this: Vue, val, oldVal) {
     for (const attr in oldVal) {
       if (!Object.prototype.hasOwnProperty.call(val, attr)) {
-        this.$delete(this.$data[property], attr)
+        delete this.$data[property][attr]
       }
     }
     for (const attr in val) {

package/src/mixins/detachable/index.ts

@@ -27,9 +27,9 @@ function validateAttachTarget (val: any) {
 
 function removeActivator (activator: VNode[]) {
   activator.forEach(node => {
-    node.elm &&
-    node.elm.parentNode &&
-    node.elm.parentNode.removeChild(node.elm)
+    node.el &&
+    node.el.parentNode &&
+    node.el.parentNode.removeChild(node.el)
   })
 }
 
@@ -94,7 +94,7 @@ export default mixins<options &
     this.isActive = false
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     if (
       this.$refs.content &&
       this.$refs.content.parentNode
@@ -103,7 +103,7 @@ export default mixins<options &
     }
   },
 
-  destroyed () {
+  unmounted () {
     if (this.activatorNode) {
       const activator = Array.isArray(this.activatorNode) ? this.activatorNode : [this.activatorNode]
       if (this.$el.isConnected) {

package/src/mixins/groupable/index.ts

@@ -57,7 +57,7 @@ export function factory<T extends string, C extends VueConstructor | null = null
       this[namespace] && (this[namespace] as any).register(this)
     },
 
-    beforeDestroy () {
+    beforeUnmount () {
       this[namespace] && (this[namespace] as any).unregister(this)
     },
 

package/src/mixins/intersectable/index.ts

@@ -23,10 +23,10 @@ export default function intersectable (options: { onVisible: string[] }) {
       }, vnode)
     },
 
-    destroyed () {
+    unmounted () {
       const {vnode} = getCurrentInstance()
 
-      Intersect.unbind(this.$el as HTMLElement, {
+      Intersect.unmounted(this.$el as HTMLElement, {
         name: 'intersect',
         value: this.onObserve,
       }, vnode)

package/src/mixins/menuable/index.ts

@@ -133,6 +133,9 @@ export default baseMixins.extend({
   }),
 
   computed: {
+    isMenuable() {
+      return true
+    },
     computedLeft () {
       const a = this.dimensions.activator
       const c = this.dimensions.content
@@ -196,7 +199,7 @@ export default baseMixins.extend({
     }
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     if (this.hasWindow) {
       window.removeEventListener('resize', this.updateDimensions, false)
     }

package/src/mixins/mouse/index.ts

@@ -29,7 +29,6 @@ export default defineComponent({
 
   methods: {
     getDefaultMouseEventHandlers (suffix: string, getData: MouseHandler, eventFirst = false): MouseEventsMap {
-      console.log(this.$attrs)
       const listeners = Object.keys(this.$attrs)
         .filter(key => key.endsWith(suffix))
         .reduce((acc, key) => {