vuetify 2.6.0-beta.0 → 2.6.3

package/src/styles/generic/_transitions.scss

@@ -9,305 +9,309 @@
   }
 }
 
-.v-application
-  // Component specific transitions
-  .carousel-transition {
-    &-enter {
-      transform: translate(100%, 0);
-    }
-
-    &-leave, &-leave-to {
-      position: absolute;
-      top: 0;
-      transform: translate(-100%, 0);
-    }
+// Component specific transitions
+.carousel-transition {
+  &-enter {
+    transform: translate(100%, 0);
   }
 
-  .carousel-reverse-transition {
-    &-enter {
-      transform: translate(-100%, 0);
-    }
+  &-leave, &-leave-to {
+    position: absolute;
+    top: 0;
+    transform: translate(-100%, 0);
+  }
+}
 
-    &-leave, &-leave-to {
-      position: absolute;
-      top: 0;
-      transform: translate(100%, 0);
-    }
+.carousel-reverse-transition {
+  &-enter {
+    transform: translate(-100%, 0);
   }
 
-  .dialog-transition {
-    &-enter, &-leave-to {
-      transform: scale(0.5);
-      opacity: 0;
-    }
+  &-leave, &-leave-to {
+    position: absolute;
+    top: 0;
+    transform: translate(100%, 0);
+  }
+}
 
-    &-enter-to, &-leave {
-      opacity: 1;
-    }
-  }
+.dialog-transition {
+  &-enter-active,
+  &-leave-active {
+    pointer-events: none !important;
+  }
 
-  .dialog-bottom-transition {
-    &-enter, &-leave-to {
-      transform: translateY(100%);
-    }
+  &-enter, &-leave-to {
+    transform: scale(0.5);
+    opacity: 0;
   }
 
-  .dialog-top-transition {
-    &-enter, &-leave-to {
-      transform: translateY(-100%);
-    }
+  &-enter-to, &-leave {
+    opacity: 1;
   }
+}
 
-  .picker-transition,
-  .picker-reverse-transition {
-    &-enter-active,
-    &-leave-active {
-      transition: .3s map-get($transition, 'linear-out-slow-in');
-    }
+.dialog-bottom-transition {
+  &-enter, &-leave-to {
+    transform: translateY(100%);
+  }
+}
 
-    &-enter,
-    &-leave-to {
-      opacity: 0;
-    }
+.dialog-top-transition {
+  &-enter, &-leave-to {
+    transform: translateY(-100%);
+  }
+}
 
-    &-leave,
-    &-leave-active,
-    &-leave-to {
-      position: absolute !important;
-    }
+.picker-transition,
+.picker-reverse-transition {
+  &-enter-active,
+  &-leave-active {
+    transition: .3s map-get($transition, 'linear-out-slow-in');
   }
 
-  .picker-transition {
-    &-enter {
-      transform: translate(0, 100%);
-    }
+  &-enter,
+  &-leave-to {
+    opacity: 0;
+  }
 
-    &-leave-to {
-      transform: translate(0, -100%);
-    }
+  &-leave,
+  &-leave-active,
+  &-leave-to {
+    position: absolute !important;
   }
+}
 
-  .picker-reverse-transition {
-    &-enter {
-      transform: translate(0, -100%);
-    }
+.picker-transition {
+  &-enter {
+    transform: translate(0, 100%);
+  }
 
-    &-leave-to {
-      transform: translate(0, 100%);
-    }
+  &-leave-to {
+    transform: translate(0, -100%);
   }
+}
 
-  .picker-title-transition {
-    &-enter-to,
-    &-leave {
-      transform: translate(0, 0);
-    }
+.picker-reverse-transition {
+  &-enter {
+    transform: translate(0, -100%);
+  }
 
-    &-enter {
-      transform: translate(-100%, 0);
-    }
+  &-leave-to {
+    transform: translate(0, 100%);
+  }
+}
 
-    &-leave-to {
-      opacity: 0;
-      transform: translate(100%, 0);
-    }
+.picker-title-transition {
+  &-enter-to,
+  &-leave {
+    transform: translate(0, 0);
+  }
 
-    &-leave,
-    &-leave-to,
-    &-leave-active {
-      position: absolute !important;
-    }
+  &-enter {
+    transform: translate(-100%, 0);
   }
 
-  .tab-transition {
-    &-enter {
-      transform: translate(100%, 0);
-    }
+  &-leave-to {
+    opacity: 0;
+    transform: translate(100%, 0);
+  }
 
-    &-leave, &-leave-active {
-      position: absolute;
-      top: 0;
-    }
+  &-leave,
+  &-leave-to,
+  &-leave-active {
+    position: absolute !important;
+  }
+}
 
-    &-leave-to {
-      position: absolute;
-      transform: translate(-100%, 0);
-    }
+.tab-transition {
+  &-enter {
+    transform: translate(100%, 0);
   }
 
-  .tab-reverse-transition {
-    &-enter {
-      transform: translate(-100%, 0);
-    }
+  &-leave, &-leave-active {
+    position: absolute;
+    top: 0;
+  }
 
-    &-leave, &-leave-to {
-      top: 0;
-      position: absolute;
-      transform: translate(100%, 0);
-    }
+  &-leave-to {
+    position: absolute;
+    transform: translate(-100%, 0);
   }
+}
 
-  // Generic transitions
-  .expand-transition {
-    @include transition-default();
+.tab-reverse-transition {
+  &-enter {
+    transform: translate(-100%, 0);
   }
 
-  .expand-x-transition {
-    @include transition-default();
+  &-leave, &-leave-to {
+    top: 0;
+    position: absolute;
+    transform: translate(100%, 0);
   }
+}
+
+// Generic transitions
+.expand-transition {
+  @include transition-default();
+}
 
-  .scale-transition {
-    @include transition-default();
+.expand-x-transition {
+  @include transition-default();
+}
 
-    &-enter, &-leave, &-leave-to {
-      opacity: 0;
-      transform: scale(0);
-    }
+.scale-transition {
+  @include transition-default();
+
+  &-enter, &-leave, &-leave-to {
+    opacity: 0;
+    transform: scale(0);
   }
+}
 
-  .scale-rotate-transition {
-    @include transition-default();
+.scale-rotate-transition {
+  @include transition-default();
 
-    &-enter, &-leave, &-leave-to {
-      opacity: 0;
-      transform: scale(0) rotate(-45deg);
-    }
+  &-enter, &-leave, &-leave-to {
+    opacity: 0;
+    transform: scale(0) rotate(-45deg);
   }
+}
 
-  .scale-rotate-reverse-transition {
-    @include transition-default();
+.scale-rotate-reverse-transition {
+  @include transition-default();
 
-    &-enter, &-leave, &-leave-to {
-      opacity: 0;
-      transform: scale(0) rotate(45deg);
-    }
+  &-enter, &-leave, &-leave-to {
+    opacity: 0;
+    transform: scale(0) rotate(45deg);
   }
+}
 
-  .message-transition {
-    @include transition-default();
+.message-transition {
+  @include transition-default();
 
-    &-enter, &-leave-to {
-      opacity: 0;
-      transform: translateY(-15px);
-    }
+  &-enter, &-leave-to {
+    opacity: 0;
+    transform: translateY(-15px);
+  }
 
-    &-leave, &-leave-active {
-      position: absolute;
-    }
+  &-leave, &-leave-active {
+    position: absolute;
   }
+}
 
-  .slide-y-transition {
-    @include transition-default();
+.slide-y-transition {
+  @include transition-default();
 
-    &-enter, &-leave-to {
-      opacity: 0;
-      transform: translateY(-15px);
-    }
+  &-enter, &-leave-to {
+    opacity: 0;
+    transform: translateY(-15px);
   }
+}
 
-  .slide-y-reverse-transition {
-    @include transition-default();
+.slide-y-reverse-transition {
+  @include transition-default();
 
-    &-enter, &-leave-to {
-      opacity: 0;
-      transform: translateY(15px);
-    }
+  &-enter, &-leave-to {
+    opacity: 0;
+    transform: translateY(15px);
   }
+}
 
-  .scroll-y-transition {
-    @include transition-default();
+.scroll-y-transition {
+  @include transition-default();
 
-    &-enter, &-leave-to {
-      opacity: 0;
-    }
+  &-enter, &-leave-to {
+    opacity: 0;
+  }
 
-    &-enter {
-      transform: translateY(-15px);
-    }
+  &-enter {
+    transform: translateY(-15px);
+  }
 
-    &-leave-to {
-      transform: translateY(15px);
-    }
+  &-leave-to {
+    transform: translateY(15px);
   }
+}
 
-  .scroll-y-reverse-transition {
-    @include transition-default();
+.scroll-y-reverse-transition {
+  @include transition-default();
 
-    &-enter, &-leave-to {
-      opacity: 0;
-    }
+  &-enter, &-leave-to {
+    opacity: 0;
+  }
 
-    &-enter {
-      transform: translateY(15px);
-    }
+  &-enter {
+    transform: translateY(15px);
+  }
 
-    &-leave-to {
-      transform: translateY(-15px);
-    }
+  &-leave-to {
+    transform: translateY(-15px);
   }
+}
 
-  .scroll-x-transition {
-    @include transition-default();
+.scroll-x-transition {
+  @include transition-default();
 
-    &-enter, &-leave-to {
-      opacity: 0;
-    }
+  &-enter, &-leave-to {
+    opacity: 0;
+  }
 
-    &-enter {
-      transform: translateX(-15px);
-    }
+  &-enter {
+    transform: translateX(-15px);
+  }
 
-    &-leave-to {
-      transform: translateX(15px);
-    }
+  &-leave-to {
+    transform: translateX(15px);
   }
+}
 
-  .scroll-x-reverse-transition {
-    @include transition-default();
+.scroll-x-reverse-transition {
+  @include transition-default();
 
-    &-enter, &-leave-to {
-      opacity: 0;
-    }
+  &-enter, &-leave-to {
+    opacity: 0;
+  }
 
-    &-enter {
-      transform: translateX(15px);
-    }
+  &-enter {
+    transform: translateX(15px);
+  }
 
-    &-leave-to {
-      transform: translateX(-15px);
-    }
+  &-leave-to {
+    transform: translateX(-15px);
   }
+}
 
-  .slide-x-transition {
-    @include transition-default();
+.slide-x-transition {
+  @include transition-default();
 
-    &-enter, &-leave-to {
-      opacity: 0;
-      transform: translateX(-15px);
-    }
+  &-enter, &-leave-to {
+    opacity: 0;
+    transform: translateX(-15px);
   }
+}
 
-  .slide-x-reverse-transition {
-    @include transition-default();
+.slide-x-reverse-transition {
+  @include transition-default();
 
-    &-enter, &-leave-to {
-      opacity: 0;
-      transform: translateX(15px);
-    }
+  &-enter, &-leave-to {
+    opacity: 0;
+    transform: translateX(15px);
   }
+}
 
-  .fade-transition {
-    @include transition-default();
+.fade-transition {
+  @include transition-default();
 
-    &-enter, &-leave-to {
-      opacity: 0 !important;
-    }
+  &-enter, &-leave-to {
+    opacity: 0 !important;
   }
+}
 
-  .fab-transition {
-    @include transition-default();
+.fab-transition {
+  @include transition-default();
 
-    &-enter, &-leave-to {
-      transform: scale(0) rotate(-45deg);
-    }
+  &-enter, &-leave-to {
+    transform: scale(0) rotate(-45deg);
   }
+}

package/src/styles/settings/_variables.scss

@@ -22,17 +22,18 @@ $rounded: map-deep-merge(
 );
 
 $spacer: 4px !default;
+$spacers-steps: 16 !default; 
 
 $spacers: () !default;
 @if (type-of($spacers) == list) {
-  @for $i from 0 through 16 {
+  @for $i from 0 through $spacers-steps {
     $spacers: map-merge($spacers, ($i: $spacer * $i))
   }
 }
 
 $negative-spacers: () !default;
 @if (type-of($negative-spacers) == list) {
-  @for $i from 1 through 16 {
+  @for $i from 1 through $spacers-steps {
     $negative-spacers: map-merge($negative-spacers, ("n" + $i: -$spacer * $i))
   }
 }
@@ -82,15 +83,15 @@ $display-breakpoints: map-deep-merge(
   (
     'print-only': 'only print',
     'screen-only': 'only screen',
-    'xs-only': 'only screen and (max-width: #{map-get($grid-breakpoints, 'sm') - 1})',
-    'sm-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'sm')}) and (max-width: #{map-get($grid-breakpoints, 'md') - 1})',
-    'sm-and-down': 'only screen and (max-width: #{map-get($grid-breakpoints, 'md') - 1})',
+    'xs-only': 'only screen and (max-width: #{map-get($grid-breakpoints, 'sm') - 0.02})',
+    'sm-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'sm')}) and (max-width: #{map-get($grid-breakpoints, 'md') - 0.02})',
+    'sm-and-down': 'only screen and (max-width: #{map-get($grid-breakpoints, 'md') - 0.02})',
     'sm-and-up': 'only screen and (min-width: #{map-get($grid-breakpoints, 'sm')})',
-    'md-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'md')}) and (max-width: #{map-get($grid-breakpoints, 'lg') - 1})',
-    'md-and-down': 'only screen and (max-width: #{map-get($grid-breakpoints, 'lg') - 1})',
+    'md-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'md')}) and (max-width: #{map-get($grid-breakpoints, 'lg') - 0.02})',
+    'md-and-down': 'only screen and (max-width: #{map-get($grid-breakpoints, 'lg') - 0.02})',
     'md-and-up': 'only screen and (min-width: #{map-get($grid-breakpoints, 'md')})',
-    'lg-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'lg')}) and (max-width: #{map-get($grid-breakpoints, 'xl') - 1})',
-    'lg-and-down': 'only screen and (max-width: #{map-get($grid-breakpoints, 'xl') - 1})',
+    'lg-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'lg')}) and (max-width: #{map-get($grid-breakpoints, 'xl') - 0.02})',
+    'lg-and-down': 'only screen and (max-width: #{map-get($grid-breakpoints, 'xl') - 0.02})',
     'lg-and-up': 'only screen and (min-width: #{map-get($grid-breakpoints, 'lg')})',
     'xl-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'xl')})'
   ),
@@ -249,7 +250,7 @@ $secondary-transition: 0.2s map-get($transition, 'ease-in-out') !default;
 // Ripples //;
 $ripple-animation-transition-in: transform 0.25s map-get($transition, 'fast-out-slow-in'), opacity 0.1s map-get($transition, 'fast-out-slow-in') !default;
 $ripple-animation-transition-out: opacity 0.3s map-get($transition, 'fast-out-slow-in') !default;
-$ripple-animation-visible-opacity: 0.15 !default;
+$ripple-animation-visible-opacity: 0.25 !default;
 
 // Elements //;
 $bootable-transition: 0.2s map-get($transition, 'fast-out-slow-in') !default;

package/src/util/helpers.ts

@@ -385,11 +385,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 {
-  if (vm.$slots[name] && vm.$scopedSlots[name] && (vm.$scopedSlots[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[name]) return 'normal'
-  if (vm.$scopedSlots[name]) return 'scoped'
+  if (vm.$slots.hasOwnProperty(name)) return 'normal'
+  if (vm.$scopedSlots.hasOwnProperty(name)) return 'scoped'
 }
 
 export function debounce (fn: Function, delay: number) {
@@ -419,9 +419,9 @@ export function getPrefixedScopedSlots (prefix: string, scopedSlots: any) {
 }
 
 export function getSlot (vm: Vue, name = 'default', data?: object | (() => object), optional = false) {
-  if (vm.$scopedSlots[name]) {
+  if (vm.$scopedSlots.hasOwnProperty(name)) {
     return vm.$scopedSlots[name]!(data instanceof Function ? data() : data)
-  } else if (vm.$slots[name] && (!data || optional)) {
+  } else if (vm.$slots.hasOwnProperty(name) && (!data || optional)) {
     return vm.$slots[name]
   }
   return undefined

package/types/lib.d.ts

@@ -110,6 +110,7 @@ declare module 'vuetify/lib/components' {
   const VNavigationDrawer: VueConstructor
   const VOverflowBtn: VueConstructor
   const VOverlay: VueConstructor
+  const VOtpInput: VueConstructor
   const VPagination: VueConstructor
   const VSheet: VueConstructor
   const VParallax: VueConstructor
@@ -275,6 +276,7 @@ declare module 'vuetify/lib/components' {
     VNavigationDrawer,
     VOverflowBtn,
     VOverlay,
+    VOtpInput,
     VPagination,
     VSheet,
     VParallax,

package/src/directives/ripple/_variables.scss

@@ -1,6 +0,0 @@
-@import '../../styles/styles.sass';
-
-$ripple-animation-transition-in: transform .25s map-get($transition, 'fast-in-slow-out'),
-                                 opacity .1s map-get($transition, 'fast-in-slow-out') !default;
-$ripple-animation-transition-out: opacity .3s map-get($transition, 'fast-in-slow-out') !default;
-$ripple-animation-visible-opacity: .15 !default;