vuetify 2.0.19 → 2.1.0

package/src/components/VSkeletonLoader/_variables.scss

@@ -0,0 +1,9 @@
+$skeleton-loader-border-radius: $border-radius-root !default;
+$skeleton-loader-button-border-radius: $border-radius-root !default;
+$skeleton-loader-chip-border-radius: 16px !default;
+$skeleton-loader-date-picker-border-radius: inherit !default;
+$skeleton-loader-divider-border-radius: 1px !default;
+$skeleton-loader-heading-border-radius: 12px !default;
+$skeleton-loader-text-border-radius: 6px !default;
+$skeleton-loader-loading-animation: loading 1.5s infinite !default;
+$skeleton-loader-loading-transform: translateX(-100%) !default;

package/src/components/VSkeletonLoader/index.ts

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

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

@@ -27,7 +27,7 @@
   &__wrapper
     align-items: center
     background-color: $snackbar-background-color
-    border-radius: 4px
+    border-radius: $snackbar-border-radius
     display: flex
     margin: 0 auto
     pointer-events: auto

package/src/components/VSnackbar/_variables.scss

@@ -1,3 +1,4 @@
 $snackbar-color: map-get($shades, 'white') !default;
 $snackbar-background-color: #323232 !default;
+$snackbar-border-radius: $border-radius-root !default;
 $snackbar-corner-offset: 16px !default;

package/src/components/VStepper/VStepper.sass

@@ -1,4 +1,5 @@
 @import '../../styles/styles.sass'
+@import './_variables.scss'
 
 +theme(v-stepper) using ($material)
   background: map-get($material, 'bg-color')
@@ -55,7 +56,7 @@
       border-left: 1px solid rgba(map-get($material, 'fg-color'), map-get($material, 'divider-percent'))
 
 .v-stepper
-  border-radius: 4px
+  border-radius: $stepper-border-radius
   overflow: hidden
   position: relative
   +elevation(2)

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

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

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

@@ -1,4 +1,6 @@
 @import '../../styles/styles.sass'
+@import './_mixins.sass'
+@import './_variables.scss'
 
 +theme(v-text-field) using ($material)
   & > .v-input__control > .v-input__slot:before
@@ -65,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
 
@@ -203,21 +212,46 @@
       align-items: stretch
       min-height: 56px
 
+    &.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: 6px
+
     .v-label
       top: 18px
 
       &--active
         transform: translateY(-6px) scale(.75)
 
+    &.v-input--dense
+      .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
     border-top-right-radius: 4px
@@ -235,11 +269,16 @@
       .v-progress-linear__background
         display: none
 
-    .v-input__prepend-outer,
-    .v-input__prepend-inner,
-    .v-input__append-inner,
-    .v-input__append-outer
-      margin-top: 16px
+    +prepend-append-margin-top(16px)
+
+    &.v-input--dense:not(.v-text-field--solo)
+      +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
@@ -272,11 +311,10 @@
     margin-bottom: 16px
     transition: border $primary-transition
 
-    .v-label
-      top: 18px
+    +label-position(18px, -24px)
 
-      &--active
-        transform: translateY(-24px) scale(.75)
+    &.v-input--dense
+      +label-position(10px, -16px)
 
     fieldset
       border-style: solid
@@ -331,7 +369,7 @@
 
   &--solo,
   &--outlined
-    border-radius: 4px
+    border-radius: $text-field-border-radius
 
     fieldset,
     .v-input__control,
@@ -369,6 +407,9 @@
       min-height: 48px
       padding: 0
 
+    &.v-input--dense > .v-input__control
+      min-height: 38px
+
     &:not(.v-text-field--solo-flat) > .v-input__control > .v-input__slot
       +elevation(2)
 
@@ -377,9 +418,10 @@
       align-self: center
       margin-top: 0
 
-    .v-input__prepend-outer,
-    .v-input__append-outer
-      margin-top: 12px
+    +outer-margin-top(12px)
+
+    &.v-input--dense
+      +outer-margin-top(7px)
 
   &.v-input--is-focused > .v-input__control > .v-input__slot:after
     transform: scaleX(1)

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,

package/src/components/VTextField/_mixins.sass

@@ -0,0 +1,18 @@
+@mixin prepend-append-margin-top($margin-top)
+  .v-input__prepend-outer,
+  .v-input__prepend-inner,
+  .v-input__append-inner,
+  .v-input__append-outer
+    margin-top: $margin-top
+
+@mixin outer-margin-top($margin-top)
+  .v-input__prepend-outer,
+  .v-input__append-outer
+    margin-top: $margin-top
+
+@mixin label-position($top, $translateY, $scale: .75)
+  .v-label
+    top: $top
+
+    &--active
+      transform: translateY($translateY) scale($scale)

package/src/components/VTextField/_variables.scss

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

package/src/components/VTimePicker/VTimePicker.ts

@@ -333,8 +333,8 @@ export default mixins(
       return this.$createElement('div', this.setTextColor(this.color || 'primary', {
         staticClass: 'v-time-picker-clock__ampm',
       }), [
-        this.genPickerButton('period', 'am', 'AM', this.disabled || this.readonly),
-        this.genPickerButton('period', 'pm', 'PM', this.disabled || this.readonly),
+        this.genPickerButton('period', 'am', this.$vuetify.lang.t('$vuetify.timePicker.am'), this.disabled || this.readonly),
+        this.genPickerButton('period', 'pm', this.$vuetify.lang.t('$vuetify.timePicker.pm'), this.disabled || this.readonly),
       ])
     },
     genPickerBody () {

package/src/components/VTimePicker/VTimePickerTitle.ts

@@ -60,8 +60,8 @@ export default mixins(
       return this.$createElement('div', {
         staticClass: 'v-time-picker-title__ampm',
       }, [
-        this.genPickerButton('period', 'am', 'am', this.disabled || this.readonly),
-        this.genPickerButton('period', 'pm', 'pm', this.disabled || this.readonly),
+        this.genPickerButton('period', 'am', this.$vuetify.lang.t('$vuetify.timePicker.am'), this.disabled || this.readonly),
+        this.genPickerButton('period', 'pm', this.$vuetify.lang.t('$vuetify.timePicker.pm'), this.disabled || this.readonly),
       ])
     },
   },

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

@@ -1,4 +1,5 @@
 import Vue from 'vue'
+import { Lang } from '../../../services/lang'
 import VTimePicker, { SelectingTimes } from '../VTimePicker'
 import {
   mount,
@@ -6,6 +7,10 @@ import {
   Wrapper,
 } from '@vue/test-utils'
 
+Vue.prototype.$vuetify = {
+  lang: new Lang(),
+}
+
 describe('VTimePicker.ts', () => {
   type Instance = InstanceType<typeof VTimePicker>
   let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>

package/src/components/VTimePicker/__tests__/VTimePickerTitle.spec.ts

@@ -1,11 +1,17 @@
+import Vue from 'vue'
 import VTimePickerTitle from '../VTimePickerTitle'
 import { SelectingTimes } from '../VTimePicker'
+import { Lang } from '../../../services/lang'
 import {
   mount,
   Wrapper,
   MountOptions,
 } from '@vue/test-utils'
 
+Vue.prototype.$vuetify = {
+  lang: new Lang(),
+}
+
 describe('VTimePickerTitle.ts', () => {
   type Instance = InstanceType<typeof VTimePickerTitle>
   let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>

package/src/components/VTimePicker/__tests__/__snapshots__/VTimePickerTitle.spec.ts.snap

@@ -15,10 +15,10 @@ exports[`VTimePickerTitle.ts should render component in 12hr 1`] = `
   </div>
   <div class="v-time-picker-title__ampm">
     <div class="v-picker__title__btn">
-      am
+      AM
     </div>
     <div class="v-picker__title__btn v-picker__title__btn--active">
-      pm
+      PM
     </div>
   </div>
 </div>
@@ -45,10 +45,10 @@ exports[`VTimePickerTitle.ts should render component in 12hr. with useSeconds 1`
   </div>
   <div class="v-time-picker-title__ampm">
     <div class="v-picker__title__btn">
-      am
+      AM
     </div>
     <div class="v-picker__title__btn v-picker__title__btn--active">
-      pm
+      PM
     </div>
   </div>
 </div>
@@ -145,10 +145,10 @@ exports[`VTimePickerTitle.ts should render disabled component 1`] = `
   </div>
   <div class="v-time-picker-title__ampm">
     <div class="v-picker__title__btn v-picker__title__btn--readonly">
-      am
+      AM
     </div>
     <div class="v-picker__title__btn v-picker__title__btn--active v-picker__title__btn--readonly">
-      pm
+      PM
     </div>
   </div>
 </div>
@@ -175,10 +175,10 @@ exports[`VTimePickerTitle.ts should render disabled component. with useSeconds 1
   </div>
   <div class="v-time-picker-title__ampm">
     <div class="v-picker__title__btn v-picker__title__btn--readonly">
-      am
+      AM
     </div>
     <div class="v-picker__title__btn v-picker__title__btn--active v-picker__title__btn--readonly">
-      pm
+      PM
     </div>
   </div>
 </div>

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/VTooltip/_variables.sass

@@ -1,4 +1,4 @@
 $tooltip-background-color: rgba(map-get($grey, 'darken-2'), 0.9) !default
 $tooltip-text-color: map-get($shades, 'white') !default
-$tooltip-border-radius: 4px !default
+$tooltip-border-radius: $border-radius-root !default
 $tooltip-font-size: 14px !default

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/components/index.ts

@@ -37,6 +37,7 @@ export * from './VImg'
 export * from './VInput'
 export * from './VItemGroup'
 export * from './VLabel'
+export * from './VLazy'
 export * from './VList'
 export * from './VMenu'
 export * from './VMessages'
@@ -54,6 +55,7 @@ export * from './VRangeSlider'
 export * from './VRating'
 export * from './VResponsive'
 export * from './VSelect'
+export * from './VSkeletonLoader'
 export * from './VSlider'
 export * from './VSlideGroup'
 export * from './VSnackbar'

package/src/directives/index.ts

@@ -1,4 +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/__tests__/intersect.spec.ts

@@ -0,0 +1,47 @@
+// Directives
+import Intersect from '../'
+
+describe('resize.ts', () => {
+  it('should bind event on inserted', () => {
+    const callback = jest.fn()
+    const el = document.createElement('div')
+    document.body.appendChild(el)
+
+    Intersect.inserted(el, {
+      value: callback,
+      modifiers: { quiet: true } } as any
+    )
+
+    expect((el as any)._observe).toBeTruthy()
+    expect(callback).not.toHaveBeenCalled()
+
+    document.body.removeChild(el)
+
+    Intersect.unbind(el)
+
+    expect((el as any)._observe).toBeFalsy()
+  })
+
+  it('should invoke callback once and unbind', () => {
+    const el = document.createElement('div')
+
+    document.body.appendChild(el)
+
+    const callback = jest.fn()
+
+    Intersect.inserted(el, {
+      value: callback,
+      modifiers: { once: true },
+    } as any)
+
+    expect(callback).toHaveBeenCalled()
+    expect((el as any)._observe).toBeTruthy()
+
+    if ((el as any)._observe) {
+      (el as any)._observe.observer.callback()
+    }
+
+    expect(callback).toHaveBeenCalledTimes(2)
+    expect((el as any)._observe).toBeFalsy()
+  })
+})

package/src/directives/intersect/index.ts

@@ -0,0 +1,57 @@
+import { VNodeDirective } from 'vue/types/vnode'
+
+interface ObserveVNodeDirective extends VNodeDirective {
+  options?: IntersectionObserverInit
+}
+
+function inserted (el: HTMLElement, binding: ObserveVNodeDirective) {
+  const modifiers = binding.modifiers || /* istanbul ignore next */ {}
+  const value = binding.value
+  const isObject = typeof value === 'object'
+  const callback = isObject ? value.handler : value
+  const observer = new IntersectionObserver((
+    entries: IntersectionObserverEntry[] = [],
+    observer: IntersectionObserver
+  ) => {
+    /* istanbul ignore if */
+    if (!el._observe) return // Just in case, should never fire
+
+    // If is not quiet or has already been
+    // initted, invoke the user callback
+    if (
+      callback && (
+        !modifiers.quiet ||
+        el._observe.init
+      )
+    ) {
+      const isIntersecting = Boolean(entries.find(entry => entry.isIntersecting))
+
+      callback(entries, observer, isIntersecting)
+    }
+
+    // If has already been initted and
+    // has the once modifier, unbind
+    if (el._observe.init && modifiers.once) unbind(el)
+    // Otherwise, mark the observer as initted
+    else (el._observe.init = true)
+  }, value.options || {})
+
+  el._observe = { init: false, observer }
+
+  observer.observe(el)
+}
+
+function unbind (el: HTMLElement) {
+  /* istanbul ignore if */
+  if (!el._observe) return
+
+  el._observe.observer.unobserve(el)
+  delete el._observe
+}
+
+export const Intersect = {
+  inserted,
+  unbind,
+}
+
+export default Intersect