vuetify 2.1.0-beta.1 → 2.1.0

package/src/components/VInput/__tests__/__snapshots__/VInput.spec.ts.snap

@@ -64,7 +64,9 @@ exports[`VInput.ts should be in an error state 2`] = `
   <div class="v-input__control">
     <div class="v-input__slot">
     </div>
-    <div class="v-messages theme--light error--text">
+    <div class="v-messages theme--light error--text"
+         role="alert"
+    >
       <span name="message-transition"
             tag="div"
             class="v-messages__wrapper"

package/src/components/VLazy/VLazy.ts

@@ -68,8 +68,10 @@ export default mixins(Toggleable).extend({
       attrs: this.$attrs,
       directives: [{
         name: 'intersect',
-        options: this.options,
-        value: this.onObserve,
+        value: {
+          handler: this.onObserve,
+          options: this.options,
+        },
       }] as any,
       on: this.$listeners,
       style: this.styles,

package/src/components/VList/VListGroup.ts

@@ -57,7 +57,7 @@ export default baseMixins.extend<options>().extend({
     },
     appendIcon: {
       type: String,
-      default: '$vuetify.icons.expand',
+      default: '$expand',
     },
     color: {
       type: String,
@@ -175,7 +175,7 @@ export default baseMixins.extend<options>().extend({
       const icon = this.prependIcon
         ? this.prependIcon
         : this.subGroup
-          ? '$vuetify.icons.subgroup'
+          ? '$subgroup'
           : false
 
       if (!icon && !this.$slots.prependIcon) return null

package/src/components/VList/__tests__/__snapshots__/VListGroup.spec.ts.snap

@@ -11,7 +11,7 @@ exports[`VListGroup.ts should render component and match snapshot 1`] = `
       <i aria-hidden="true"
          class="v-icon notranslate material-icons theme--light"
       >
-        $vuetify.icons.expand
+        $expand
       </i>
     </div>
   </div>

package/src/components/VMenu/VMenu.sass

@@ -2,15 +2,10 @@
 @import './_variables.scss'
 
 .v-menu
-  display: inline
+  display: none
 
-  &__activator
-    align-items: center
-    cursor: pointer
-    display: flex
-
-    *
-      cursor: pointer
+  &--attached
+    display: inline
 
   &__content
     position: absolute

package/src/components/VMenu/VMenu.ts

@@ -438,6 +438,12 @@ export default baseMixins.extend({
   render (h): VNode {
     const data = {
       staticClass: 'v-menu',
+      class: {
+        'v-menu--attached':
+          this.attach === '' ||
+          this.attach === true ||
+          this.attach === 'attach',
+      },
       directives: [{
         arg: '500',
         name: 'resize',

package/src/components/VOverflowBtn/__tests__/__snapshots__/VOverflowBtn.spec.ts.snap

@@ -24,7 +24,7 @@ exports[`VOverflowBtn.js should use default autocomplete selections 1`] = `
             <i aria-hidden="true"
                class="v-icon notranslate material-icons theme--light"
             >
-              $vuetify.icons.dropdown
+              $dropdown
             </i>
           </div>
         </div>
@@ -73,7 +73,7 @@ exports[`VOverflowBtn.js should use default autocomplete selections 2`] = `
             <i aria-hidden="true"
                class="v-icon notranslate material-icons theme--light"
             >
-              $vuetify.icons.dropdown
+              $dropdown
             </i>
           </div>
         </div>

package/src/components/VPagination/VPagination.ts

@@ -29,11 +29,11 @@ export default mixins(Colorable, Themeable).extend({
     },
     nextIcon: {
       type: String,
-      default: '$vuetify.icons.next',
+      default: '$next',
     },
     prevIcon: {
       type: String,
-      default: '$vuetify.icons.prev',
+      default: '$prev',
     },
     totalVisible: [Number, String],
     value: {

package/src/components/VRadioGroup/VRadio.ts

@@ -47,11 +47,11 @@ export default baseMixins.extend<options>().extend({
     name: String,
     offIcon: {
       type: String,
-      default: '$vuetify.icons.radioOff',
+      default: '$radioOff',
     },
     onIcon: {
       type: String,
-      default: '$vuetify.icons.radioOn',
+      default: '$radioOn',
     },
     readonly: Boolean,
     value: {

package/src/components/VRadioGroup/__tests__/__snapshots__/VRadio.spec.ts.snap

@@ -14,7 +14,7 @@ exports[`VRadio.ts should not render aria-label attribute with no label value on
     <i aria-hidden="true"
        class="v-icon notranslate material-icons theme--light"
     >
-      $vuetify.icons.radioOff
+      $radioOff
     </i>
   </div>
 </div>
@@ -35,7 +35,7 @@ exports[`VRadio.ts should render proper input name 1`] = `
     <i aria-hidden="true"
        class="v-icon notranslate material-icons theme--light"
     >
-      $vuetify.icons.radioOff
+      $radioOff
     </i>
   </div>
 </div>
@@ -55,7 +55,7 @@ exports[`VRadio.ts should render role and aria-checked attributes on input group
     <i aria-hidden="true"
        class="v-icon notranslate material-icons theme--light accent--text"
     >
-      $vuetify.icons.radioOn
+      $radioOn
     </i>
   </div>
 </div>

package/src/components/VRating/VRating.ts

@@ -51,15 +51,15 @@ export default mixins(
     dense: Boolean,
     emptyIcon: {
       type: String,
-      default: '$vuetify.icons.ratingEmpty',
+      default: '$ratingEmpty',
     },
     fullIcon: {
       type: String,
-      default: '$vuetify.icons.ratingFull',
+      default: '$ratingFull',
     },
     halfIcon: {
       type: String,
-      default: '$vuetify.icons.ratingHalf',
+      default: '$ratingHalf',
     },
     halfIncrements: Boolean,
     hover: Boolean,

package/src/components/VSelect/VSelect.ts

@@ -64,7 +64,7 @@ export default baseMixins.extend<options>().extend({
   props: {
     appendIcon: {
       type: String,
-      default: '$vuetify.icons.dropdown',
+      default: '$dropdown',
     },
     attach: {
       default: false,

package/src/components/VSelect/__tests__/__snapshots__/VSelect.spec.ts.snap

@@ -33,7 +33,7 @@ exports[`VSelect.ts should only show items if they are in items 1`] = `
             <i aria-hidden="true"
                class="v-icon notranslate material-icons theme--light"
             >
-              $vuetify.icons.dropdown
+              $dropdown
             </i>
           </div>
         </div>
@@ -80,7 +80,7 @@ exports[`VSelect.ts should only show items if they are in items 2`] = `
             <i aria-hidden="true"
                class="v-icon notranslate material-icons theme--light"
             >
-              $vuetify.icons.dropdown
+              $dropdown
             </i>
           </div>
         </div>
@@ -130,7 +130,7 @@ exports[`VSelect.ts should only show items if they are in items 3`] = `
             <i aria-hidden="true"
                class="v-icon notranslate material-icons theme--light"
             >
-              $vuetify.icons.dropdown
+              $dropdown
             </i>
           </div>
         </div>
@@ -183,7 +183,7 @@ exports[`VSelect.ts should only show items if they are in items 4`] = `
             <i aria-hidden="true"
                class="v-icon notranslate material-icons theme--light"
             >
-              $vuetify.icons.dropdown
+              $dropdown
             </i>
           </div>
         </div>
@@ -230,7 +230,7 @@ exports[`VSelect.ts should render v-select correctly when not using scope slot 1
             <i aria-hidden="true"
                class="v-icon notranslate material-icons theme--light"
             >
-              $vuetify.icons.dropdown
+              $dropdown
             </i>
           </div>
         </div>
@@ -277,7 +277,7 @@ exports[`VSelect.ts should render v-select correctly when not using v-list-item
             <i aria-hidden="true"
                class="v-icon notranslate material-icons theme--light"
             >
-              $vuetify.icons.dropdown
+              $dropdown
             </i>
           </div>
         </div>
@@ -324,7 +324,7 @@ exports[`VSelect.ts should render v-select correctly when using v-list-item in i
             <i aria-hidden="true"
                class="v-icon notranslate material-icons theme--light"
             >
-              $vuetify.icons.dropdown
+              $dropdown
             </i>
           </div>
         </div>

package/src/components/VSelect/__tests__/__snapshots__/VSelect2.spec.ts.snap

@@ -25,7 +25,7 @@ exports[`VSelect.ts should be clearable with prop, dirty and multi select 1`] =
             <i role="button"
                class="v-icon notranslate v-icon--link material-icons theme--light"
             >
-              $vuetify.icons.clear
+              $clear
             </i>
           </div>
         </div>
@@ -34,7 +34,7 @@ exports[`VSelect.ts should be clearable with prop, dirty and multi select 1`] =
             <i aria-hidden="true"
                class="v-icon notranslate material-icons theme--light"
             >
-              $vuetify.icons.dropdown
+              $dropdown
             </i>
           </div>
         </div>
@@ -84,7 +84,7 @@ exports[`VSelect.ts should be clearable with prop, dirty and single select 1`] =
             <i role="button"
                class="v-icon notranslate v-icon--link material-icons theme--light"
             >
-              $vuetify.icons.clear
+              $clear
             </i>
           </div>
         </div>
@@ -93,7 +93,7 @@ exports[`VSelect.ts should be clearable with prop, dirty and single select 1`] =
             <i aria-hidden="true"
                class="v-icon notranslate material-icons theme--light"
             >
-              $vuetify.icons.dropdown
+              $dropdown
             </i>
           </div>
         </div>
@@ -143,7 +143,7 @@ exports[`VSelect.ts should use scoped slot for selection generation 1`] = `
             <i aria-hidden="true"
                class="v-icon notranslate material-icons theme--light"
             >
-              $vuetify.icons.dropdown
+              $dropdown
             </i>
           </div>
         </div>

package/src/components/VSelect/__tests__/__snapshots__/VSelect3.spec.ts.snap

@@ -25,7 +25,7 @@ exports[`VSelect.ts should add color to selected index 1`] = `
             <i aria-hidden="true"
                class="v-icon notranslate material-icons theme--light"
             >
-              $vuetify.icons.dropdown
+              $dropdown
             </i>
           </div>
         </div>

package/src/components/VSlideGroup/VSlideGroup.ts

@@ -59,7 +59,7 @@ export const BaseSlideGroup = mixins<options &
     centerActive: Boolean,
     nextIcon: {
       type: String,
-      default: '$vuetify.icons.next',
+      default: '$next',
     },
     mobileBreakPoint: {
       type: [Number, String],
@@ -68,7 +68,7 @@ export const BaseSlideGroup = mixins<options &
     },
     prevIcon: {
       type: String,
-      default: '$vuetify.icons.prev',
+      default: '$prev',
     },
     showArrows: Boolean,
   },

package/src/components/VSlideGroup/__tests__/__snapshots__/VSlideGroup.spec.ts.snap

@@ -5,7 +5,7 @@ exports[`VSlideGroup.ts should match snapshot in rtl 1`] = `
   <div class="v-slide-group__prev">
     <fade-transition-stub origin="top center 0">
       <vuecomponent-stub>
-        $vuetify.icons.next
+        $next
       </vuecomponent-stub>
     </fade-transition-stub>
   </div>
@@ -16,7 +16,7 @@ exports[`VSlideGroup.ts should match snapshot in rtl 1`] = `
   <div class="v-slide-group__next">
     <fade-transition-stub origin="top center 0">
       <vuecomponent-stub>
-        $vuetify.icons.prev
+        $prev
       </vuecomponent-stub>
     </fade-transition-stub>
   </div>
@@ -28,7 +28,7 @@ exports[`VSlideGroup.ts should match snapshot in rtl 2`] = `
   <div class="v-slide-group__prev">
     <fade-transition-stub origin="top center 0">
       <vuecomponent-stub>
-        $vuetify.icons.prev
+        $prev
       </vuecomponent-stub>
     </fade-transition-stub>
   </div>
@@ -39,7 +39,7 @@ exports[`VSlideGroup.ts should match snapshot in rtl 2`] = `
   <div class="v-slide-group__next">
     <fade-transition-stub origin="top center 0">
       <vuecomponent-stub>
-        $vuetify.icons.next
+        $next
       </vuecomponent-stub>
     </fade-transition-stub>
   </div>

package/src/components/VStepper/VStepperStep.ts

@@ -41,16 +41,16 @@ export default baseMixins.extend<options>().extend({
     complete: Boolean,
     completeIcon: {
       type: String,
-      default: '$vuetify.icons.complete',
+      default: '$complete',
     },
     editable: Boolean,
     editIcon: {
       type: String,
-      default: '$vuetify.icons.edit',
+      default: '$edit',
     },
     errorIcon: {
       type: String,
-      default: '$vuetify.icons.error',
+      default: '$error',
     },
     rules: {
       type: Array,

package/src/components/VTabs/VTabs.ts

@@ -64,12 +64,12 @@ export default baseMixins.extend<options>().extend({
     },
     nextIcon: {
       type: String,
-      default: '$vuetify.icons.next',
+      default: '$next',
     },
     optional: Boolean,
     prevIcon: {
       type: String,
-      default: '$vuetify.icons.prev',
+      default: '$prev',
     },
     right: Boolean,
     showArrows: Boolean,

package/src/components/VTextField/VTextField.sass

@@ -59,9 +59,6 @@
   padding-top: $text-field-active-label-height
   margin-top: $input-top-spacing - $text-field-active-label-height
 
-  &.v-input--dense
-    padding-top: 0px
-
   input
     flex: 1 1 auto
     line-height: 20px
@@ -70,6 +67,13 @@
     min-width: 0px
     width: 100%
 
+  &.v-input--dense
+    padding-top: 0
+
+    &:not(.v-text-field--outlined):not(.v-text-field--solo)
+      input
+        padding: 4px 0 8px
+
     &[type=text]::-ms-clear
       display: none
 
@@ -208,21 +212,31 @@
       align-items: stretch
       min-height: 56px
 
-    &.v-input--dense > .v-input__control > .v-input__slot
-      min-height: 38px
+    &.v-input--dense
+      > .v-input__control > .v-input__slot
+        min-height: 44px
+
+      &.v-text-field--single-line,
+      &.v-text-field--outlined
+        > .v-input__control > .v-input__slot
+          min-height: 40px
 
   &--filled,
   &--full-width
     input
       margin-top: 22px
 
+    &.v-input--dense
+      input
+        margin-top: 20px
+
     &.v-text-field--single-line
       input
         margin-top: 12px
 
       &.v-input--dense
         input
-          margin-top: 3px
+          margin-top: 6px
 
     .v-label
       top: 18px
@@ -231,8 +245,12 @@
         transform: translateY(-6px) scale(.75)
 
     &.v-input--dense
-      .v-label
-        top: 10px
+      .v-label--active
+        transform: translateY(-10px) scale(.75)
+
+      &.v-text-field--single-line
+        .v-label
+          top: 11px
 
   &--filled > .v-input__control > .v-input__slot
     border-top-left-radius: 4px
@@ -254,7 +272,13 @@
     +prepend-append-margin-top(16px)
 
     &.v-input--dense:not(.v-text-field--solo)
-      +prepend-append-margin-top(7px)
+      +prepend-append-margin-top(14px)
+
+      &.v-text-field--single-line
+        +prepend-append-margin-top(9px)
+
+      &.v-text-field--outlined
+        +prepend-append-margin-top(7px)
 
     .v-text-field__details,
     & > .v-input__control > .v-input__slot
@@ -290,7 +314,7 @@
     +label-position(18px, -24px)
 
     &.v-input--dense
-      +label-position(9px, -16px)
+      +label-position(10px, -16px)
 
     fieldset
       border-style: solid
@@ -384,7 +408,7 @@
       padding: 0
 
     &.v-input--dense > .v-input__control
-      min-height: 36px
+      min-height: 38px
 
     &:not(.v-text-field--solo-flat) > .v-input__control > .v-input__slot
       +elevation(2)

package/src/components/VTextField/VTextField.ts

@@ -52,7 +52,7 @@ export default baseMixins.extend<options>().extend({
     clearable: Boolean,
     clearIcon: {
       type: String,
-      default: '$vuetify.icons.clear',
+      default: '$clear',
     },
     counter: [Boolean, Number, String],
     filled: Boolean,
@@ -136,7 +136,7 @@ export default baseMixins.extend<options>().extend({
       return this.isDirty || dirtyTypes.includes(this.type)
     },
     isSingle (): boolean {
-      return this.isSolo || this.singleLine || this.fullWidth || (this.dense && !this.outlined)
+      return this.isSolo || this.singleLine || this.fullWidth
     },
     isSolo (): boolean {
       return this.solo || this.soloInverted

package/src/components/VTooltip/VTooltip.sass

@@ -2,7 +2,10 @@
 @import ./_variables
 
 .v-tooltip
-  display: inline
+  display: none
+
+  &--attached
+    display: inline
 
   &__content
     background: $tooltip-background-color
@@ -17,7 +20,7 @@
     width: auto
     opacity: 1
     pointer-events: none
-    
+
     &--fixed
       position: fixed
 

package/src/components/VTooltip/VTooltip.ts

@@ -110,6 +110,10 @@ export default mixins(Colorable, Delayable, Dependent, Detachable, Menuable, Tog
         'v-tooltip--right': this.right,
         'v-tooltip--bottom': this.bottom,
         'v-tooltip--left': this.left,
+        'v-tooltip--attached':
+          this.attach === '' ||
+          this.attach === true ||
+          this.attach === 'attach',
       }
     },
     computedTransition (): string {

package/src/components/VTreeview/VTreeviewNode.ts

@@ -39,11 +39,11 @@ export const VTreeviewNodeProps = {
   },
   expandIcon: {
     type: String,
-    default: '$vuetify.icons.subgroup',
+    default: '$subgroup',
   },
   indeterminateIcon: {
     type: String,
-    default: '$vuetify.icons.checkboxIndeterminate',
+    default: '$checkboxIndeterminate',
   },
   itemChildren: {
     type: String,
@@ -64,15 +64,15 @@ export const VTreeviewNodeProps = {
   loadChildren: Function as PropValidator<(item: any) => Promise<void>>,
   loadingIcon: {
     type: String,
-    default: '$vuetify.icons.loading',
+    default: '$loading',
   },
   offIcon: {
     type: String,
-    default: '$vuetify.icons.checkboxOff',
+    default: '$checkboxOff',
   },
   onIcon: {
     type: String,
-    default: '$vuetify.icons.checkboxOn',
+    default: '$checkboxOn',
   },
   openOnClick: Boolean,
   rounded: Boolean,

package/src/components/VTreeview/__tests__/VTreeviewNode.spec.ts

@@ -69,11 +69,11 @@ describe('VTreeViewNode.ts', () => {
       provide: { treeview },
     })
 
-    expect(wrapper.vm.computedIcon).toBe('$vuetify.icons.checkboxOff')
+    expect(wrapper.vm.computedIcon).toBe('$checkboxOff')
 
     wrapper.setData({ isIndeterminate: true })
 
-    expect(wrapper.vm.computedIcon).toBe('$vuetify.icons.checkboxIndeterminate')
+    expect(wrapper.vm.computedIcon).toBe('$checkboxIndeterminate')
   })
 
   it('should use scoped slots', () => {

package/src/components/VTreeview/__tests__/__snapshots__/VTreeview.spec.ts.snap

@@ -730,7 +730,7 @@ exports[`VTreeView.ts should select only leaf nodes 1`] = `
       <i role="button"
          class="v-icon notranslate v-treeview-node__checkbox v-icon--link material-icons theme--light"
       >
-        $vuetify.icons.checkboxIndeterminate
+        $checkboxIndeterminate
       </i>
       <div class="v-treeview-node__content">
         <div class="v-treeview-node__label">

package/src/components/VWindow/VWindow.ts

@@ -36,11 +36,11 @@ export default BaseItemGroup.extend({
     },
     nextIcon: {
       type: [Boolean, String],
-      default: '$vuetify.icons.next',
+      default: '$next',
     },
     prevIcon: {
       type: [Boolean, String],
-      default: '$vuetify.icons.prev',
+      default: '$prev',
     },
     reverse: {
       type: Boolean,

package/src/directives/index.ts

@@ -1,5 +1,6 @@
 export { ClickOutside } from './click-outside'
 export { Intersect } from './intersect'
+export { Mutate } from './mutate'
 export { Resize } from './resize'
 export { Ripple } from './ripple'
 export { Scroll } from './scroll'

package/src/directives/intersect/index.ts

@@ -1,13 +1,15 @@
 import { VNodeDirective } from 'vue/types/vnode'
 
 interface ObserveVNodeDirective extends VNodeDirective {
-  options?: undefined | IntersectionObserverInit
+  options?: IntersectionObserverInit
 }
 
 function inserted (el: HTMLElement, binding: ObserveVNodeDirective) {
   const modifiers = binding.modifiers || /* istanbul ignore next */ {}
-  const callback = binding.value!
-  const callbackWrapper = (
+  const value = binding.value
+  const isObject = typeof value === 'object'
+  const callback = isObject ? value.handler : value
+  const observer = new IntersectionObserver((
     entries: IntersectionObserverEntry[] = [],
     observer: IntersectionObserver
   ) => {
@@ -32,8 +34,7 @@ function inserted (el: HTMLElement, binding: ObserveVNodeDirective) {
     if (el._observe.init && modifiers.once) unbind(el)
     // Otherwise, mark the observer as initted
     else (el._observe.init = true)
-  }
-  const observer = new IntersectionObserver(callbackWrapper, binding.options || {})
+  }, value.options || {})
 
   el._observe = { init: false, observer }