@dimailn/vuetify 2.7.2-alpha0 → 2.7.2-alpha3

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/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/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/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/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/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/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

@@ -66,6 +66,12 @@ export default baseMixins.extend({
     this.removeActivatorEvents()
   },
 
+  computed: {
+    isActivatable() {
+      return true
+    }
+  },
+
   methods: {
     addActivatorEvents () {
       if (
@@ -87,7 +93,6 @@ export default baseMixins.extend({
           ...this.genActivatorListeners(),
           ...this.genActivatorAttributes(),
         }
-
       })) || []
 
       this.activatorNode = node
@@ -165,8 +170,7 @@ export default baseMixins.extend({
         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 +220,6 @@ export default baseMixins.extend({
       this.activatorElement = null
       this.getActivator()
       this.addActivatorEvents()
-    },
+    }
   },
 })

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

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) => {

package/src/mixins/overlayable/index.ts

@@ -142,8 +142,6 @@ export default defineComponent({
           this.overlayApp.unmount()
           this.overlayApp = null
           this.overlay = null
-          console.log('destroyed')
-
         })
 
         // Cancel animation frame in case

package/src/mixins/proxyable/index.ts

@@ -13,11 +13,6 @@ export function factory (
   return defineComponent({
     name: 'proxyable',
 
-    model: {
-      prop,
-      event,
-    },
-
     props: {
       [prop]: {
         required: false,

package/src/styles/generic/_transitions.scss

@@ -11,11 +11,11 @@
 
 // Component specific transitions
 .carousel-transition {
-  &-enter {
+  &-enter-from {
     transform: translate(100%, 0);
   }
 
-  &-leave, &-leave-to {
+  &-leave-from, &-leave-to {
     position: absolute;
     top: 0;
     transform: translate(-100%, 0);
@@ -23,11 +23,11 @@
 }
 
 .carousel-reverse-transition {
-  &-enter {
+  &-enter-from {
     transform: translate(-100%, 0);
   }
 
-  &-leave, &-leave-to {
+  &-leave-from, &-leave-to {
     position: absolute;
     top: 0;
     transform: translate(100%, 0);
@@ -40,24 +40,24 @@
     pointer-events: none !important;
   }
 
-  &-enter, &-leave-to {
+  &-enter-from, &-leave-to {
     transform: scale(0.5);
     opacity: 0;
   }
 
-  &-enter-to, &-leave {
+  &-enter-to, &-leave-from {
     opacity: 1;
   }
 }
 
 .dialog-bottom-transition {
-  &-enter, &-leave-to {
+  &-enter-from, &-leave-to {
     transform: translateY(100%);
   }
 }
 
 .dialog-top-transition {
-  &-enter, &-leave-to {
+  &-enter-from, &-leave-to {
     transform: translateY(-100%);
   }
 }
@@ -69,12 +69,12 @@
     transition: .3s map-get($transition, 'linear-out-slow-in');
   }
 
-  &-enter,
+  &-enter-from,
   &-leave-to {
     opacity: 0;
   }
 
-  &-leave,
+  &-leave-from,
   &-leave-active,
   &-leave-to {
     position: absolute !important;
@@ -82,7 +82,7 @@
 }
 
 .picker-transition {
-  &-enter {
+  &-enter-from {
     transform: translate(0, 100%);
   }
 
@@ -92,7 +92,7 @@
 }
 
 .picker-reverse-transition {
-  &-enter {
+  &-enter-from {
     transform: translate(0, -100%);
   }
 
@@ -103,11 +103,11 @@
 
 .picker-title-transition {
   &-enter-to,
-  &-leave {
+  &-leave-from {
     transform: translate(0, 0);
   }
 
-  &-enter {
+  &-enter-from {
     transform: translate(-100%, 0);
   }
 
@@ -116,7 +116,7 @@
     transform: translate(100%, 0);
   }
 
-  &-leave,
+  &-leave-from,
   &-leave-to,
   &-leave-active {
     position: absolute !important;
@@ -124,11 +124,11 @@
 }
 
 .tab-transition {
-  &-enter {
+  &-enter-from {
     transform: translate(100%, 0);
   }
 
-  &-leave, &-leave-active {
+  &-leave-from, &-leave-active {
     position: absolute;
     top: 0;
   }
@@ -140,11 +140,11 @@
 }
 
 .tab-reverse-transition {
-  &-enter {
+  &-enter-from {
     transform: translate(-100%, 0);
   }
 
-  &-leave, &-leave-to {
+  &-leave-from, &-leave-to {
     top: 0;
     position: absolute;
     transform: translate(100%, 0);
@@ -163,7 +163,7 @@
 .scale-transition {
   @include transition-default();
 
-  &-enter, &-leave, &-leave-to {
+  &-enter-from, &-leave-from, &-leave-to {
     opacity: 0;
     transform: scale(0);
   }
@@ -172,7 +172,7 @@
 .scale-rotate-transition {
   @include transition-default();
 
-  &-enter, &-leave, &-leave-to {
+  &-enter-from, &-leave-from, &-leave-to {
     opacity: 0;
     transform: scale(0) rotate(-45deg);
   }
@@ -181,7 +181,7 @@
 .scale-rotate-reverse-transition {
   @include transition-default();
 
-  &-enter, &-leave, &-leave-to {
+  &-enter-from, &-leave-from, &-leave-to {
     opacity: 0;
     transform: scale(0) rotate(45deg);
   }
@@ -190,12 +190,12 @@
 .message-transition {
   @include transition-default();
 
-  &-enter, &-leave-to {
+  &-enter-from, &-leave-to {
     opacity: 0;
     transform: translateY(-15px);
   }
 
-  &-leave, &-leave-active {
+  &-leave-from, &-leave-active {
     position: absolute;
   }
 }
@@ -203,7 +203,7 @@
 .slide-y-transition {
   @include transition-default();
 
-  &-enter, &-leave-to {
+  &-enter-from, &-leave-to {
     opacity: 0;
     transform: translateY(-15px);
   }
@@ -212,7 +212,7 @@
 .slide-y-reverse-transition {
   @include transition-default();
 
-  &-enter, &-leave-to {
+  &-enter-from, &-leave-to {
     opacity: 0;
     transform: translateY(15px);
   }
@@ -221,11 +221,11 @@
 .scroll-y-transition {
   @include transition-default();
 
-  &-enter, &-leave-to {
+  &-enter-from, &-leave-to {
     opacity: 0;
   }
 
-  &-enter {
+  &-enter-from {
     transform: translateY(-15px);
   }
 
@@ -237,11 +237,11 @@
 .scroll-y-reverse-transition {
   @include transition-default();
 
-  &-enter, &-leave-to {
+  &-enter-from, &-leave-to {
     opacity: 0;
   }
 
-  &-enter {
+  &-enter-from {
     transform: translateY(15px);
   }
 
@@ -253,11 +253,11 @@
 .scroll-x-transition {
   @include transition-default();
 
-  &-enter, &-leave-to {
+  &-enter-from, &-leave-to {
     opacity: 0;
   }
 
-  &-enter {
+  &-enter-from {
     transform: translateX(-15px);
   }
 
@@ -269,11 +269,11 @@
 .scroll-x-reverse-transition {
   @include transition-default();
 
-  &-enter, &-leave-to {
+  &-enter-from, &-leave-to {
     opacity: 0;
   }
 
-  &-enter {
+  &-enter-from {
     transform: translateX(15px);
   }
 
@@ -285,7 +285,7 @@
 .slide-x-transition {
   @include transition-default();
 
-  &-enter, &-leave-to {
+  &-enter-from, &-leave-to {
     opacity: 0;
     transform: translateX(-15px);
   }
@@ -294,7 +294,7 @@
 .slide-x-reverse-transition {
   @include transition-default();
 
-  &-enter, &-leave-to {
+  &-enter-from, &-leave-to {
     opacity: 0;
     transform: translateX(15px);
   }
@@ -303,7 +303,7 @@
 .fade-transition {
   @include transition-default();
 
-  &-enter, &-leave-to {
+  &-enter-from, &-leave-to {
     opacity: 0 !important;
   }
 }
@@ -311,7 +311,7 @@
 .fab-transition {
   @include transition-default();
 
-  &-enter, &-leave-to {
+  &-enter-from, &-leave-to {
     transform: scale(0) rotate(-45deg);
   }
 }