vuetify 2.5.13 → 2.6.1

package/src/components/VCalendar/VCalendarCategory.sass

@@ -7,21 +7,88 @@
     border-right: map-deep-get($material, 'calendar', 'line-color') $calendar-line-width solid
 
 .v-calendar-category
+  overflow: auto
+  position: relative
+
   .v-calendar-category__category
     text-align: center
 
   .v-calendar-daily__day-container
+    width: min-content
     .v-calendar-category__columns
       position: absolute
       height: 100%
       width: 100%
       top: 0
 
+  .v-calendar-daily__day-body
+    display: flex
+    flex: 1
+    width: 100%
+    height: 100%
+
+  .v-calendar-daily__head
+    flex-direction: row
+    width: min-content
+    min-width: 100%
+    position: sticky
+    top: 0
+    background: white
+    z-index: 2
+
+  .v-calendar-daily_head-day
+    width: auto
+    position: unset
+
+  .v-calendar-daily__intervals-head
+    position: sticky
+    left: 0
+    top: 0
+    background: white
+    z-index: 2
+
+  .v-calendar-daily_head-weekday
+    position: sticky
+    left: 50%
+    width: $calendar-daily-head-weekday-size
+
+  .v-calendar-daily_head-day-label
+    width: $calendar-daily-head-day-label-size
+    position: sticky
+    left: 50%
+
+  .v-calendar-daily__day
+    min-width: $calendar-category-column-min-width
+
+  .v-calendar-daily__intervals-body
+    position: sticky
+    left: 0
+    background: white
+    z-index: 1
+
+  .v-calendar-daily__interval
+    &:last-of-type::after
+      display: none
+
+  .v-calendar-daily__body
+    overflow: visible
+    .v-calendar-daily__scroll-area
+      overflow-y: visible
+      flex: none
+
+  .v-calendar-daily__pane
+    overflow-y: visible
+
   .v-calendar-category__columns
     display: flex
+    width: min-content
+    min-width: 100%
 
     .v-calendar-category__column,
     .v-calendar-category__column-header
       flex: 1 1 auto
       width: 0
       position: relative
+
+    .v-calendar-category__column-header
+      min-width: $calendar-category-column-min-width

package/src/components/VCalendar/VCalendarDaily.ts

@@ -82,8 +82,8 @@ export default CalendarWithIntervals.extend({
         key: day.date,
         staticClass: 'v-calendar-daily_head-day',
         class: this.getRelativeClasses(day),
-        on: this.getDefaultMouseEventHandlers(':day', _e => {
-          return this.getSlotScope(day)
+        on: this.getDefaultMouseEventHandlers(':day', nativeEvent => {
+          return { nativeEvent, ...this.getSlotScope(day) }
         }),
       }, [
         this.genHeadWeekday(day),
@@ -120,8 +120,8 @@ export default CalendarWithIntervals.extend({
         on: this.getMouseEventHandlers({
           'click:date': { event: 'click', stop: true },
           'contextmenu:date': { event: 'contextmenu', stop: true, prevent: true, result: false },
-        }, _e => {
-          return day
+        }, nativeEvent => {
+          return { nativeEvent, ...day }
         }),
       }, this.dayFormatter(day, false))
     },
@@ -167,8 +167,8 @@ export default CalendarWithIntervals.extend({
         key: day.date,
         staticClass: 'v-calendar-daily__day',
         class: this.getRelativeClasses(day),
-        on: this.getDefaultMouseEventHandlers(':time', e => {
-          return this.getSlotScope(this.getTimestampAtEvent(e, day))
+        on: this.getDefaultMouseEventHandlers(':time', nativeEvent => {
+          return { nativeEvent, ...this.getSlotScope(this.getTimestampAtEvent(nativeEvent, day)) }
         }),
       }, [
         ...this.genDayIntervals(index),
@@ -192,6 +192,7 @@ export default CalendarWithIntervals.extend({
           height,
           ...styler(interval),
         },
+
       }
 
       const children = getSlot(this, 'interval', () => this.getSlotScope(interval))
@@ -205,8 +206,8 @@ export default CalendarWithIntervals.extend({
         style: {
           width,
         },
-        on: this.getDefaultMouseEventHandlers(':interval', e => {
-          return this.getTimestampAtEvent(e, this.parsedStart)
+        on: this.getDefaultMouseEventHandlers(':interval', nativeEvent => {
+          return { nativeEvent, ...this.getTimestampAtEvent(nativeEvent, this.parsedStart) }
         }),
       }
 

package/src/components/VCalendar/VCalendarWeekly.ts

@@ -159,7 +159,9 @@ export default CalendarBase.extend({
         key: day.date,
         staticClass: 'v-calendar-weekly__day',
         class: this.getRelativeClasses(day, outside),
-        on: this.getDefaultMouseEventHandlers(':day', _e => day),
+        on: this.getDefaultMouseEventHandlers(':day', nativeEvent => {
+          return { nativeEvent, ...day }
+        }),
       }, [
         this.genDayLabel(day),
         ...(getSlot(this, 'day', () => ({ outside, index, week, ...day })) || []),
@@ -184,7 +186,7 @@ export default CalendarBase.extend({
         on: this.getMouseEventHandlers({
           'click:date': { event: 'click', stop: true },
           'contextmenu:date': { event: 'contextmenu', stop: true, prevent: true, result: false },
-        }, _e => day),
+        }, nativeEvent => ({ nativeEvent, ...day })),
       }, hasMonth
         ? this.monthFormatter(day, this.shortMonths) + ' ' + this.dayFormatter(day, false)
         : this.dayFormatter(day, false)

package/src/components/VCalendar/_variables.scss

@@ -2,6 +2,8 @@
 
 $calendar-line-width: 1px !default;
 
+$calendar-daily-head-day-label-size: 56px !default;
+$calendar-daily-head-weekday-size: 50px !default;
 $calendar-daily-weekday-padding: 3px 0px 0px 0px !default;
 $calendar-daily-weekday-font-size: 11px !default;
 $calendar-daily-day-padding: 0px 0px 3px 0px !default;
@@ -12,6 +14,8 @@ $calendar-daily-interval-gutter-align: right !default;
 $calendar-daily-interval-gutter-line-width: 8px !default;
 $calendar-daily-interval-gutter-font-size: 10px !default;
 
+$calendar-category-column-min-width: 200px !default;
+
 $calendar-weekly-weekday-padding: 0px 4px 0px 4px !default;
 $calendar-weekly-weekday-font-size: 11px !default;
 $calendar-weekly-day-padding: 0px 0px 0px 0px !default;

package/src/components/VCalendar/mixins/calendar-with-events.ts

@@ -384,9 +384,10 @@ export default CalendarBase.extend({
           name: 'ripple',
           value: this.eventRipple ?? true,
         }],
-        on: {
-          click: () => this.$emit('click:more', day),
-        },
+        on: this.getDefaultMouseEventHandlers(':more', nativeEvent => {
+          return { nativeEvent, ...day }
+        }),
+
         style: {
           display: 'none',
           height: `${eventHeight}px`,

package/src/components/VCalendar/mixins/mouse.ts

@@ -65,11 +65,17 @@ export default Vue.extend({
             // Ref: https://developer.mozilla.org/en-US/docs/Web/API/Touch/target
             // This block of code aims to make sure touchEvent is always dispatched from the element that is being pointed at
             if (e && 'touches' in e) {
-              const currentTarget = document.elementFromPoint(e.changedTouches[0].clientX, e.changedTouches[0].clientY)
+              const classSeparator = ' '
+
+              const eventTargetClasses = (e.currentTarget as HTMLElement)?.className.split(classSeparator)
+              const currentTargets = document.elementsFromPoint(e.changedTouches[0].clientX, e.changedTouches[0].clientY)
+
+              // Get "the same kind" current hovering target by checking
+              // If element has the same class of initial touch start element (which has touch event listener registered)
+              const currentTarget = currentTargets.find(t => t.className.split(classSeparator).some(c => eventTargetClasses.includes(c)))
 
               if (currentTarget &&
-                !(e.target as HTMLElement)?.isSameNode(currentTarget) &&
-                (e.target as HTMLElement)?.className === currentTarget.className
+                !(e.target as HTMLElement)?.isSameNode(currentTarget)
               ) {
                 currentTarget.dispatchEvent(new TouchEvent(e.type, {
                   changedTouches: e.changedTouches as unknown as Touch[],
@@ -80,7 +86,7 @@ export default Vue.extend({
               }
             }
 
-            this.$emit(event, getEvent(e))
+            this.$emit(event, getEvent(e), e)
           }
 
           return eventOptions.result

package/src/components/VDataTable/MobileRow.ts

@@ -27,8 +27,8 @@ export default Vue.extend({
       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({

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

@@ -391,7 +391,7 @@ export default baseMixins.extend({
     getTiles () {
       if (!this.$refs.content) return
 
-      this.tiles = Array.from(this.$refs.content.querySelectorAll('.v-list-item'))
+      this.tiles = Array.from(this.$refs.content.querySelectorAll('.v-list-item, .v-divider, .v-subheader'))
     },
     mouseEnterHandler () {
       this.runDelay('open', () => {

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