vuetify 2.0.19 → 2.1.0

package/src/components/VLazy/__tests__/VLazy.spec.ts

@@ -0,0 +1,78 @@
+// Components
+import VLazy from '../VLazy'
+
+// Utilities
+import {
+  mount,
+  MountOptions,
+  Wrapper,
+} from '@vue/test-utils'
+
+describe('VLazy.ts', () => {
+  type Instance = InstanceType<typeof VLazy>
+  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+
+  beforeEach(() => {
+    mountFunction = (options = {}) => {
+      return mount(VLazy, {
+        ...options,
+      })
+    }
+  })
+
+  it('should conditionally render content', async () => {
+    const wrapper = mountFunction({
+      slots: {
+        default: '<div>foobar</div>',
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+
+    wrapper.setProps({ value: true })
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should set a minimum height', () => {
+    const wrapper = mountFunction({
+      propsData: {
+        minHeight: 200,
+      },
+    })
+
+    expect(wrapper.element.style.minHeight).toBe('200px')
+  })
+
+  it('should activate the slot when element is intersected', () => {
+    const wrapper = mountFunction()
+
+    expect(wrapper.vm.isActive).toBeFalsy()
+
+    wrapper.vm.onObserve([
+      { isIntersecting: false },
+      { isIntersecting: false },
+      { isIntersecting: false },
+    ] as IntersectionObserverEntry[])
+
+    expect(wrapper.vm.isActive).toBeFalsy()
+
+    wrapper.vm.onObserve([
+      { isIntersecting: false },
+      { isIntersecting: false },
+      { isIntersecting: true },
+    ] as IntersectionObserverEntry[])
+
+    expect(wrapper.vm.isActive).toBeTruthy()
+
+    wrapper.vm.onObserve([
+      { isIntersecting: false },
+      { isIntersecting: false },
+      { isIntersecting: false },
+    ] as IntersectionObserverEntry[])
+
+    expect(wrapper.vm.isActive).toBeTruthy()
+  })
+})

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

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VLazy.ts should conditionally render content 1`] = `
+<div class="v-observe">
+</div>
+`;
+
+exports[`VLazy.ts should conditionally render content 2`] = `
+<div class="v-observe">
+  <div>
+    foobar
+  </div>
+</div>
+`;

package/src/components/VLazy/index.ts

@@ -0,0 +1,4 @@
+import VLazy from './VLazy'
+
+export { VLazy }
+export default VLazy

package/src/components/VList/VList.sass

@@ -27,6 +27,7 @@
 
 // Block
 .v-list
+  border-radius: $list-border-radius
   display: block
   padding: 8px 0
   position: static
@@ -65,7 +66,7 @@
 
   .v-list-item,
   .v-list-item:before
-    border-radius: 4px
+    border-radius: $list-border-radius
 
 .v-list--shaped
   +list-shaped($list-item-min-height)

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/VListItem.sass

@@ -39,6 +39,9 @@
   &--disabled
     pointer-events: none
 
+  &--selectable
+    user-select: auto
+
 // Element
 .v-list-item__action
   align-self: center

package/src/components/VList/VListItem.ts

@@ -74,6 +74,9 @@ export default baseMixins.extend<options>().extend({
     dense: Boolean,
     inactive: Boolean,
     link: Boolean,
+    selectable: {
+      type: Boolean,
+    },
     tag: {
       type: String,
       default: 'div',
@@ -95,6 +98,7 @@ export default baseMixins.extend<options>().extend({
         'v-list-item--dense': this.dense,
         'v-list-item--disabled': this.disabled,
         'v-list-item--link': this.isClickable && !this.inactive,
+        'v-list-item--selectable': this.selectable,
         'v-list-item--three-line': this.threeLine,
         'v-list-item--two-line': this.twoLine,
         ...this.themeClasses,

package/src/components/VList/__tests__/VListItem.spec.ts

@@ -101,6 +101,16 @@ describe('VListItem.ts', () => {
     expect(wrapper.classes('v-list-item--link')).toBe(true)
   })
 
+  it('should have --selectable class if the selectable property is true', () => {
+    const wrapper = mountFunction({
+      propsData: {
+        selectable: true,
+      },
+    })
+
+    expect(wrapper.classes('v-list-item--selectable')).toBe(true)
+  })
+
   it('should react to keydown.enter', () => {
     const click = jest.fn()
     const wrapper = mountFunction({

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/VList/_variables.scss

@@ -1,5 +1,5 @@
 $avatar-margin-x: 16px !default;
-
+$list-border-radius: $border-radius-root !default;
 $list-dense-subheader-font-size: 0.75rem !default;
 $list-dense-subheader-height: 40px !default;
 

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/VMenu/_variables.scss

@@ -1 +1 @@
-$menu-content-border-radius: 4px !default;
+$menu-content-border-radius: $border-radius-root !default;

package/src/components/VOverflowBtn/VOverflowBtn.sass

@@ -36,6 +36,10 @@
   .v-select__slot
     height: 48px
 
+  &.v-input--dense
+    .v-select__slot
+      height: 38px
+
     input
       margin-left: 16px
       cursor: pointer

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.sass

@@ -1,4 +1,5 @@
 @import '../../styles/styles.sass'
+@import './_variables.scss'
 
 // Theme
 +theme(v-pagination) using ($material)
@@ -43,7 +44,7 @@
 
   &__item
     +elevation(2)
-    border-radius: 4px
+    border-radius: $pagination-border-radius
     font-size: 14px
     background: transparent
     height: 34px
@@ -57,13 +58,12 @@
 
   &__navigation
     +elevation(2)
+    border-radius: $pagination-border-radius
     display: inline-flex
     justify-content: center
     align-items: center
     text-decoration: none
     height: 2rem
-
-    border-radius: 4px
     width: 2rem
     margin: .3rem 10px
 

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/VPagination/_variables.scss

@@ -0,0 +1 @@
+$pagination-border-radius: $border-radius-root !default;

package/src/components/VPicker/_variables.scss

@@ -1,4 +1,4 @@
-$picker-border-radius: 2px !default;
+$picker-border-radius: $border-radius-root !default;
 $picker-title-padding: 16px !default;
 $picker-inactive-btn-opacity: .6 !default;
 $picker-active-btn-opacity: 1 !default;

package/src/components/VProgressLinear/VProgressLinear.sass

@@ -99,7 +99,7 @@
     pointer-events: none
 
 .v-progress-linear--rounded
-  border-radius: 4px
+  border-radius: $progress-linear-border-radius
 
 .v-progress-linear--striped
   .v-progress-linear__determinate

package/src/components/VProgressLinear/_variables.scss

@@ -1,3 +1,4 @@
+$progress-linear-border-radius: $border-radius-root !default;
 $progress-linear-stripe-gradient: linear-gradient(
   135deg,
   hsla(0, 0%, 100%, .25) 25%,

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.sass

@@ -60,6 +60,10 @@
     .v-select__selections
       padding: 8px 0
 
+    &.v-input--dense
+      .v-select__selections
+        padding: 4px 0
+
   &.v-text-field
     input
       flex: 1 1 // Doesn't resize on IE11 with 3rd param
@@ -79,6 +83,10 @@
     .v-select__selections
       min-height: 42px
 
+    &.v-input--dense
+      .v-select__selections
+        min-height: 40px
+
     // Explicit override since active chips
     // in select are not focused
     .v-chip--select.v-chip--active::before
@@ -94,10 +102,19 @@
         .v-select__selections
           min-height: 68px
 
+        &.v-input--dense
+          .v-select__selections
+            min-height: 40px
+
         &.v-select--chips--small
           .v-select__selections
             min-height: 56px
 
+          &.v-input--dense
+            .v-select__selections
+              min-height: 38px
+
+
   &.v-text-field--reverse
     .v-select__slot,
     .v-select__selections

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,
@@ -73,7 +73,6 @@ export default baseMixins.extend<options>().extend({
     chips: Boolean,
     clearable: Boolean,
     deletableChips: Boolean,
-    dense: Boolean,
     eager: Boolean,
     hideSelected: Boolean,
     items: {

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/VSheet/VSheet.sass

@@ -1,6 +1,5 @@
 // Imports
 @import '../../styles/styles.sass'
-@import './_variables.scss'
 
 // Theme
 +theme(v-sheet) using ($material)
@@ -9,15 +8,5 @@
   color: map-deep-get($material, 'text', 'primary')
 
 .v-sheet
-  border-radius: $sheet-border-radius
-
-  > *:first-child:not(.v-btn):not(.v-chip)
-    border-top-left-radius: inherit
-    border-top-right-radius: inherit
-
-  > *:last-child:not(.v-btn):not(.v-chip)
-    border-bottom-left-radius: inherit
-    border-bottom-right-radius: inherit
-
   &--tile
     border-radius: 0