vuetify 2.5.14 → 2.6.2

package/src/components/VDataTable/Row.ts

@@ -3,7 +3,12 @@ import Vue, { VNode, PropType } from 'vue'
 import { DataTableHeader } from 'vuetify/types'
 
 // Utils
-import { getObjectValueByPath } from '../../util/helpers'
+import { getObjectValueByPath, wrapInArray } from '../../util/helpers'
+
+function needsTd (slot: VNode[] | undefined) {
+  return slot!.length !== 1 ||
+    !['td', 'th'].includes(slot![0]?.tag!)
+}
 
 export default Vue.extend({
   name: 'row',
@@ -20,39 +25,41 @@ export default Vue.extend({
   render (h, { props, slots, data }): VNode {
     const computedSlots = slots()
 
-    const columns: VNode[] = props.headers.map((header: DataTableHeader) => {
+    const columns = props.headers.map((header: DataTableHeader) => {
       const children = []
       const value = getObjectValueByPath(props.item, header.value)
 
       const slotName = header.value
-      const scopedSlot = data.scopedSlots && data.scopedSlots[slotName]
-      const regularSlot = computedSlots[slotName]
+      const scopedSlot = data.scopedSlots && data.scopedSlots.hasOwnProperty(slotName) && data.scopedSlots[slotName]
+      const regularSlot = computedSlots.hasOwnProperty(slotName) && computedSlots[slotName]
 
       if (scopedSlot) {
-        children.push(scopedSlot({
+        children.push(...wrapInArray(scopedSlot({
           item: props.item,
           isMobile: false,
           header,
           index: props.index,
           value,
-        }))
+        })))
       } else if (regularSlot) {
-        children.push(regularSlot)
+        children.push(...wrapInArray(regularSlot))
       } else {
         children.push(value == null ? value : String(value))
       }
 
       const textAlign = `text-${header.align || 'start'}`
 
-      return h('td', {
-        class: [
-          textAlign,
-          header.cellClass,
-          {
-            'v-data-table__divider': header.divider,
-          },
-        ],
-      }, children)
+      return needsTd(children)
+        ? h('td', {
+          class: [
+            textAlign,
+            header.cellClass,
+            {
+              'v-data-table__divider': header.divider,
+            },
+          ],
+        }, children)
+        : children
     })
 
     return h('tr', data, columns)

package/src/components/VDataTable/VDataTableHeaderDesktop.ts

@@ -73,7 +73,7 @@ export default mixins(header).extend({
       }
 
       children.push(
-        this.$scopedSlots[header.value]
+        this.$scopedSlots.hasOwnProperty(header.value)
           ? this.$scopedSlots[header.value]!({ header })
           : this.$createElement('span', [header.text])
       )

package/src/components/VDatePicker/__tests__/VDatePicker.date.spec.ts

@@ -695,6 +695,22 @@ describe('VDatePicker.ts', () => { // eslint-disable-line max-statements
     expect(change.mock.calls).toHaveLength(1)
   })
 
+  it('should add class for the first and last days in range', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        range: true,
+        showCurrent: '2019-01',
+        type: 'date',
+        value: ['2019-01-06', '2019-01-16'],
+      },
+    })
+
+    expect(wrapper.findAll('.v-date-picker-table--date tbody button.v-date-picker--first-in-range')
+      .exists()).toBe(true)
+    expect(wrapper.findAll('.v-date-picker-table--date tbody button.v-date-picker--last-in-range')
+      .exists()).toBe(true)
+  })
+
   it('should set proper tableDate', async () => {
     const wrapper = mountFunction({
       propsData: {

package/src/components/VDatePicker/__tests__/VDatePicker.month.spec.ts

@@ -332,4 +332,20 @@ describe('VDatePicker.ts', () => {
     expect(cb.mock.calls[0][0][0]).toBe(fromDate)
     expect(cb.mock.calls[1][0][0]).toBe(toDate)
   })
+
+  it('should add class for the first and last days in range', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        range: true,
+        showCurrent: '2019',
+        type: 'month',
+        value: ['2019-01', '2019-02'],
+      },
+    })
+
+    expect(wrapper.findAll('.v-date-picker-table--month tbody button.v-date-picker--first-in-range')
+      .exists()).toBe(true)
+    expect(wrapper.findAll('.v-date-picker-table--month tbody button.v-date-picker--last-in-range')
+      .exists()).toBe(true)
+  })
 })

package/src/components/VDatePicker/mixins/date-picker-table.ts

@@ -93,7 +93,14 @@ export default mixins(
   },
 
   methods: {
-    genButtonClasses (isAllowed: boolean, isFloating: boolean, isSelected: boolean, isCurrent: boolean) {
+    genButtonClasses (
+      isAllowed: boolean,
+      isFloating: boolean,
+      isSelected: boolean,
+      isCurrent: boolean,
+      isFirst: boolean,
+      isLast: boolean,
+    ) {
       return {
         'v-size--default': !isFloating,
         'v-date-picker-table__current': isCurrent,
@@ -103,6 +110,8 @@ export default mixins(
         'v-btn--rounded': isFloating,
         'v-btn--disabled': !isAllowed || this.disabled,
         'v-btn--outlined': isCurrent && !isSelected,
+        'v-date-picker--first-in-range': isFirst,
+        'v-date-picker--last-in-range': isLast,
         ...this.themeClasses,
       }
     },
@@ -121,10 +130,23 @@ export default mixins(
       const isCurrent = value === this.current
       const setColor = isSelected ? this.setBackgroundColor : this.setTextColor
       const color = (isSelected || isCurrent) && (this.color || 'accent')
+      let isFirst = false
+      let isLast = false
+      if (this.range && !!this.value && Array.isArray(this.value)) {
+        isFirst = value === this.value[0]
+        isLast = value === this.value[this.value.length - 1]
+      }
 
       return this.$createElement('button', setColor(color, {
         staticClass: 'v-btn',
-        class: this.genButtonClasses(isAllowed && !isOtherMonth, isFloating, isSelected, isCurrent),
+        class: this.genButtonClasses(
+          isAllowed && !isOtherMonth,
+          isFloating,
+          isSelected,
+          isCurrent,
+          isFirst,
+          isLast,
+        ),
         attrs: {
           type: 'button',
         },

package/src/components/VDialog/VDialog.ts

@@ -48,10 +48,7 @@ export default baseMixins.extend({
     disabled: Boolean,
     fullscreen: Boolean,
     light: Boolean,
-    maxWidth: {
-      type: [String, Number],
-      default: 'none',
-    },
+    maxWidth: [String, Number],
     noClickAnimation: Boolean,
     origin: {
       type: String,
@@ -67,10 +64,7 @@ export default baseMixins.extend({
       type: [String, Boolean],
       default: 'dialog-transition',
     },
-    width: {
-      type: [String, Number],
-      default: 'auto',
-    },
+    width: [String, Number],
   },
 
   data () {
@@ -306,8 +300,8 @@ export default baseMixins.extend({
       if (!this.fullscreen) {
         data.style = {
           ...data.style as object,
-          maxWidth: this.maxWidth === 'none' ? undefined : convertToUnit(this.maxWidth),
-          width: this.width === 'auto' ? undefined : convertToUnit(this.width),
+          maxWidth: convertToUnit(this.maxWidth),
+          width: convertToUnit(this.width),
         }
       }
 

package/src/components/VInput/VInput.sass

@@ -125,3 +125,11 @@
   &--has-state
     &.error--text .v-label
       animation: v-shake .6s map-get($transition, 'swing')
+
+  &--hide-spin-buttons
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button 
+      -webkit-appearance: none
+      margin: 0
+    input[type=number] 
+      -moz-appearance: textfield

package/src/components/VInput/VInput.ts

@@ -48,6 +48,7 @@ export default baseMixins.extend<options>().extend({
     dense: Boolean,
     height: [Number, String],
     hideDetails: [Boolean, String] as PropType<boolean | 'auto'>,
+    hideSpinButtons: Boolean,
     hint: String,
     id: String,
     label: String,
@@ -77,6 +78,7 @@ export default baseMixins.extend<options>().extend({
         'v-input--is-loading': this.loading !== false && this.loading != null,
         'v-input--is-readonly': this.isReadonly,
         'v-input--dense': this.dense,
+        'v-input--hide-spin-buttons': this.hideSpinButtons,
         ...this.themeClasses,
       }
     },

package/src/components/VItemGroup/VItemGroup.ts

@@ -2,6 +2,7 @@
 import './VItemGroup.sass'
 
 // Mixins
+import Comparable from '../../mixins/comparable'
 import Groupable from '../../mixins/groupable'
 import Proxyable from '../../mixins/proxyable'
 import Themeable from '../../mixins/themeable'
@@ -20,6 +21,7 @@ export type GroupableInstance = InstanceType<typeof Groupable> & {
  }
 
 export const BaseItemGroup = mixins(
+  Comparable,
   Proxyable,
   Themeable
 ).extend({
@@ -83,12 +85,12 @@ export const BaseItemGroup = mixins(
     },
     toggleMethod (): (v: any) => boolean {
       if (!this.multiple) {
-        return (v: any) => this.internalValue === v
+        return (v: any) => this.valueComparator(this.internalValue, v)
       }
 
       const internalValue = this.internalValue
       if (Array.isArray(internalValue)) {
-        return (v: any) => internalValue.includes(v)
+        return (v: any) => internalValue.some(intern => this.valueComparator(intern, v))
       }
 
       return () => false
@@ -114,7 +116,7 @@ export const BaseItemGroup = mixins(
       }
     },
     getValue (item: GroupableInstance, i: number): unknown {
-      return item.value == null || item.value === ''
+      return item.value === undefined
         ? i
         : item.value
     },

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

@@ -58,9 +58,9 @@ describe('VItemGroup', () => {
 
     const getValue = wrapper.vm.getValue
 
-    expect(getValue({ value: null }, 0)).toBe(0)
+    expect(getValue({ value: null }, 0)).toBeNull()
     expect(getValue({ value: undefined }, 1)).toBe(1)
-    expect(getValue({ value: '' }, 2)).toBe(2)
+    expect(getValue({ value: '' }, 2)).toBe('')
     expect(getValue({ value: 'foo' }, 'foo')).toBe('foo')
   })
 
@@ -167,6 +167,23 @@ describe('VItemGroup', () => {
     expect(wrapper.vm.toggleMethod(0)).toBe(false)
   })
 
+  it('should correctly be active with objects having different references', () => {
+    const wrapper = mountFunction()
+
+    wrapper.setProps({ value: { a: 1 } })
+    expect(wrapper.vm.toggleMethod({ a: 1 })).toBe(true)
+    expect(wrapper.vm.toggleMethod({ a: 2 })).toBe(false)
+  })
+
+  it('should have a customizable comparator function', () => {
+    const wrapper = mountFunction()
+
+    wrapper.setProps({ valueComparator: (a: any, b: any) => a === b + 1, value: 0 })
+
+    expect(wrapper.vm.toggleMethod(0)).toBe(false)
+    expect(wrapper.vm.toggleMethod(-1)).toBe(true)
+  })
+
   it('should select the first item if mandatory and no value', async () => {
     const wrapper = mountFunction({
       propsData: { mandatory: true },

package/src/components/VMenu/VMenu.ts

@@ -75,10 +75,6 @@ export default baseMixins.extend({
     },
     offsetX: Boolean,
     offsetY: Boolean,
-    openOnClick: {
-      type: Boolean,
-      default: true,
-    },
     openOnHover: Boolean,
     origin: {
       type: String,

package/src/components/VNavigationDrawer/VNavigationDrawer.ts

@@ -351,6 +351,8 @@ export default baseMixins.extend({
     },
     genListeners () {
       const on: Record<string, (e: Event) => void> = {
+        mouseenter: () => (this.isMouseover = true),
+        mouseleave: () => (this.isMouseover = false),
         transitionend: (e: Event) => {
           if (e.target !== e.currentTarget) return
           this.$emit('transitionend', e)
@@ -366,11 +368,6 @@ export default baseMixins.extend({
         on.click = () => this.$emit('update:mini-variant', false)
       }
 
-      if (this.expandOnHover) {
-        on.mouseenter = () => (this.isMouseover = true)
-        on.mouseleave = () => (this.isMouseover = false)
-      }
-
       return on
     },
     genPosition (name: 'prepend' | 'append') {
@@ -442,7 +439,7 @@ export default baseMixins.extend({
         !this.$el
       ) return 0
 
-      const width = Number(this.computedWidth)
+      const width = Number(this.miniVariant ? this.miniVariantWidth : this.width)
 
       return isNaN(width) ? this.$el.clientWidth : width
     },

package/src/components/VOtpInput/VOtpInput.sass

@@ -0,0 +1,37 @@
+// Imports
+@import './_variables.scss'
+
+// Theme
++theme(v-otp-input) using ($material)
+  .v-input
+    .v-input__control
+      .v-input__slot
+        background: map-get($material, 'bg-color')
+
+.v-otp-input
+  display: flex
+  flex-wrap: wrap
+  flex: 1 1 auto
+  margin-right: -$otp-gutter
+  margin-left: -$otp-gutter
+
+  input
+    text-align: center
+
+  .v-input
+    margin: 0
+    flex: 1 0 $otp-width + $otp-gutter * 2
+    max-width: 100%
+    width: 100%
+    padding: $otp-gutter
+
+    &.v-otp-input--plain
+      fieldset
+        display: none
+
+    input[type=number]::-webkit-outer-spin-button,
+    input[type=number]::-webkit-inner-spin-button
+      -webkit-appearance: none
+      margin: 0
+    input[type=number]
+      -moz-appearance: textfield