@vuetify/nightly 2.6.0 → 2.6.2-master-20211201.0

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: (e: MouseEvent) => this.$emit('click:more', day, e),
-        },
+        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[],

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

@@ -30,8 +30,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(...wrapInArray(scopedSlot({

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

@@ -7,6 +7,7 @@
   overflow-y: auto
   pointer-events: auto
   transition: .3s map-get($transition, 'fast-in-fast-out')
+  width: 100%
   z-index: inherit
   +elevation($dialog-elevation)
 
@@ -62,7 +63,6 @@
 .v-dialog--fullscreen
   border-radius: 0
   margin: 0
-  width: 100%
   height: 100%
   position: fixed
   overflow-y: auto

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/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/VRadioGroup/VRadioGroup.ts

@@ -6,15 +6,11 @@ import './VRadioGroup.sass'
 import VInput from '../VInput'
 import { BaseItemGroup } from '../VItemGroup/VItemGroup'
 
-// Mixins
-import Comparable from '../../mixins/comparable'
-
 // Types
 import mixins from '../../util/mixins'
 import { PropType } from 'vue'
 
 const baseMixins = mixins(
-  Comparable,
   BaseItemGroup,
   VInput
 )

package/src/components/VStepper/VStepper.sass

@@ -137,9 +137,8 @@
           color: inherit
 
   &__label
-    align-items: flex-start
-    display: flex
-    flex-direction: column
+    display: block
+    flex-grow: 1
     line-height: $stepper-label-line-height
 
     +ltr()
@@ -149,6 +148,7 @@
       text-align: right
 
     small
+      display: block
       font-size: $stepper-label-small-font-size
       font-weight: $stepper-label-small-font-weight
       text-shadow: none
@@ -219,7 +219,7 @@
       flex-basis: $stepper-alt-labels-flex-basis
 
       small
-        align-self: center
+        text-align: center
 
     .v-stepper__step__step
       margin-bottom: $stepper-alt-labels-step-step-margin-bottom

package/src/components/VTabs/VTab.ts

@@ -11,6 +11,9 @@ import { ExtractVue } from './../../util/mixins'
 // Types
 import { VNode } from 'vue/types'
 
+// Components
+import VTabsBar from '../VTabs/VTabsBar'
+
 const baseMixins = mixins(
   Routable,
   // Must be after routable
@@ -19,8 +22,11 @@ const baseMixins = mixins(
   Themeable
 )
 
+type VTabBarInstance = InstanceType<typeof VTabsBar>
+
 interface options extends ExtractVue<typeof baseMixins> {
   $el: HTMLElement
+  tabsBar: VTabBarInstance
 }
 
 export default baseMixins.extend<options>().extend(
@@ -49,7 +55,9 @@ export default baseMixins.extend<options>().extend(
       }
     },
     value (): any {
-      let to = this.to || this.href || ''
+      let to = this.to || this.href
+
+      if (to == null) return to
 
       if (this.$router &&
         this.to === Object(this.to)
@@ -92,7 +100,7 @@ export default baseMixins.extend<options>().extend(
     },
     toggle () {
       // VItemGroup treats a change event as a click
-      if (!this.isActive) {
+      if (!this.isActive || (!this.tabsBar.mandatory && !this.to)) {
         this.$emit('change')
       }
     },

package/src/components/VTextarea/VTextarea.sass

@@ -1,5 +1,14 @@
 @import './_variables.scss'
 
++theme(v-textarea) using ($material)
+  &.v-text-field--solo-inverted
+    &.v-input--is-focused
+      textarea
+        color: map-deep-get($material, 'inputs', 'solo-inverted-focused-text')
+
+      textarea::placeholder
+        color: map-deep-get($material, 'inputs', 'solo-inverted-focused-placeholder')
+
 .v-textarea
   textarea
     align-self: stretch
@@ -49,6 +58,10 @@
   &.v-text-field--solo
     align-items: flex-start
 
+    .v-input__control
+      textarea
+        caret-color: auto
+
     // Essentially revert styles
     // applied by v-text-field
     .v-input__prepend-inner,

package/src/directives/ripple/VRipple.sass

@@ -1,4 +1,4 @@
-@import './_variables.scss'
+@import '../../styles/styles.sass'
 
 .v-ripple
   &__container
@@ -28,9 +28,12 @@
 
     &--enter
       transition: none
+      opacity: 0
 
     &--in
       transition: $ripple-animation-transition-in
+      opacity: $ripple-animation-visible-opacity
 
     &--out
       transition: $ripple-animation-transition-out
+      opacity: 0

package/src/directives/ripple/index.ts

@@ -17,10 +17,6 @@ function transform (el: HTMLElement, value: string) {
   el.style.webkitTransform = value
 }
 
-function opacity (el: HTMLElement, value: number) {
-  el.style.opacity = value.toString()
-}
-
 export interface RippleOptions {
   class?: string
   center?: boolean
@@ -109,14 +105,12 @@ const ripples = {
     animation.classList.add('v-ripple__animation--enter')
     animation.classList.add('v-ripple__animation--visible')
     transform(animation, `translate(${x}, ${y}) scale3d(${scale},${scale},${scale})`)
-    opacity(animation, 0)
     animation.dataset.activated = String(performance.now())
 
     setTimeout(() => {
       animation.classList.remove('v-ripple__animation--enter')
       animation.classList.add('v-ripple__animation--in')
       transform(animation, `translate(${centerX}, ${centerY}) scale3d(1,1,1)`)
-      opacity(animation, 0.25)
     }, 0)
   },
 
@@ -137,7 +131,6 @@ const ripples = {
     setTimeout(() => {
       animation.classList.remove('v-ripple__animation--in')
       animation.classList.add('v-ripple__animation--out')
-      opacity(animation, 0)
 
       setTimeout(() => {
         const ripples = el.getElementsByClassName('v-ripple__animation')

package/src/locale/it.ts

@@ -22,8 +22,8 @@ export default {
     itemsPerPageAll: 'Tutti',
     nextPage: 'Pagina seguente',
     prevPage: 'Pagina precedente',
-    firstPage: 'Pagina prima',
-    lastPage: 'Pagina ultima',
+    firstPage: 'Prima pagina',
+    lastPage: 'Ultima pagina',
     pageText: '{0}-{1} di {2}',
   },
   datePicker: {
@@ -38,15 +38,15 @@ export default {
     prev: 'Vista precedente',
     next: 'Prossima vista',
     ariaLabel: {
-      delimiter: 'Carousel slide {0} of {1}',
+      delimiter: 'Carousel slide {0} di {1}',
     },
   },
   calendar: {
     moreEvents: '{0} di più',
   },
   fileInput: {
-    counter: '{0} files',
-    counterSize: '{0} files ({1} in totale)',
+    counter: '{0} file',
+    counterSize: '{0} file ({1} in totale)',
   },
   timePicker: {
     am: 'AM',
@@ -63,7 +63,7 @@ export default {
   },
   rating: {
     ariaLabel: {
-      icon: 'Rating {0} of {1}',
+      icon: 'Valutazione {0} di {1}',
     },
   },
 }

package/src/mixins/routable/index.ts

@@ -80,9 +80,6 @@ export default Vue.extend({
   },
 
   methods: {
-    click (e: MouseEvent): void {
-      this.$emit('click', e)
-    },
     generateRouteLink () {
       let exact = this.exact
       let tag
@@ -100,7 +97,7 @@ export default Vue.extend({
         }],
         [this.to ? 'nativeOn' : 'on']: {
           ...this.$listeners,
-          click: this.click,
+          ...('click' in this ? { click: (this as any).click } : undefined), // #14447
         },
         ref: 'link',
       }

package/src/styles/settings/_variables.scss

@@ -250,7 +250,7 @@ $secondary-transition: 0.2s map-get($transition, 'ease-in-out') !default;
 // Ripples //;
 $ripple-animation-transition-in: transform 0.25s map-get($transition, 'fast-out-slow-in'), opacity 0.1s map-get($transition, 'fast-out-slow-in') !default;
 $ripple-animation-transition-out: opacity 0.3s map-get($transition, 'fast-out-slow-in') !default;
-$ripple-animation-visible-opacity: 0.15 !default;
+$ripple-animation-visible-opacity: 0.25 !default;
 
 // Elements //;
 $bootable-transition: 0.2s map-get($transition, 'fast-out-slow-in') !default;

package/src/util/helpers.ts

@@ -385,11 +385,11 @@ export function searchItems<T extends any = any> (items: T[], search: string): T
  *  - 'v-slot' for unbound v-slot (`#default`) - only if the third param is true, otherwise counts as scoped
  */
 export function getSlotType<T extends boolean = false> (vm: Vue, name: string, split?: T): (T extends true ? 'v-slot' : never) | 'normal' | 'scoped' | void {
-  if (vm.$slots[name] && vm.$scopedSlots[name] && (vm.$scopedSlots[name] as any).name) {
+  if (vm.$slots.hasOwnProperty(name) && vm.$scopedSlots.hasOwnProperty(name) && (vm.$scopedSlots[name] as any).name) {
     return split ? 'v-slot' as any : 'scoped'
   }
-  if (vm.$slots[name]) return 'normal'
-  if (vm.$scopedSlots[name]) return 'scoped'
+  if (vm.$slots.hasOwnProperty(name)) return 'normal'
+  if (vm.$scopedSlots.hasOwnProperty(name)) return 'scoped'
 }
 
 export function debounce (fn: Function, delay: number) {
@@ -419,9 +419,9 @@ export function getPrefixedScopedSlots (prefix: string, scopedSlots: any) {
 }
 
 export function getSlot (vm: Vue, name = 'default', data?: object | (() => object), optional = false) {
-  if (vm.$scopedSlots[name]) {
+  if (vm.$scopedSlots.hasOwnProperty(name)) {
     return vm.$scopedSlots[name]!(data instanceof Function ? data() : data)
-  } else if (vm.$slots[name] && (!data || optional)) {
+  } else if (vm.$slots.hasOwnProperty(name) && (!data || optional)) {
     return vm.$slots[name]
   }
   return undefined

package/CHANGELOG.md

@@ -1,45 +0,0 @@
-# [](https://github.com/vuetifyjs/vuetify/compare/v2.6.0...v) (2021-11-15)
-
-
-
-# [2.6.0](https://github.com/vuetifyjs/vuetify/compare/v2.5.14...v2.6.0) (2021-11-15)
-
-
-### Bug Fixes
-
-* **VOtpInput:** support string length ([6bc122c](https://github.com/vuetifyjs/vuetify/commit/6bc122cbcca59dc2f6d9cd1816a2797505e52ed4))
-
-
-### Features
-
-* **styles:** add $spacers-steps sass variable ([#14367](https://github.com/vuetifyjs/vuetify/issues/14367)) ([60d3e54](https://github.com/vuetifyjs/vuetify/commit/60d3e54be5cfd9dd810c9bd756c8a377a3c7a450)), closes [#12341](https://github.com/vuetifyjs/vuetify/issues/12341)
-* **VTreeview:** add disablePerNode prop ([#14297](https://github.com/vuetifyjs/vuetify/issues/14297)) ([f37438b](https://github.com/vuetifyjs/vuetify/commit/f37438bb30f1c1a96c08be9455151245a4be44d0)), closes [#14282](https://github.com/vuetifyjs/vuetify/issues/14282)
-
-
-
-# [2.6.0-beta.0](https://github.com/vuetifyjs/vuetify/compare/v2.5.10...v2.6.0-beta.0) (2021-10-12)
-
-
-### Bug Fixes
-
-* **VAutocomplete:** remove selected item when input is cleared ([#13854](https://github.com/vuetifyjs/vuetify/issues/13854)) ([57d3469](https://github.com/vuetifyjs/vuetify/commit/57d3469a95daf0b7c7f44d5abb6038d543b94cee)), closes [#5917](https://github.com/vuetifyjs/vuetify/issues/5917)
-* **VDialog:** default to auto width ([6ac8007](https://github.com/vuetifyjs/vuetify/commit/6ac800736f87f2d7a2186d04d93fa8772038a041)), closes [#6919](https://github.com/vuetifyjs/vuetify/issues/6919)
-
-
-### Features
-
-* **locale:** add danish locale ([#13733](https://github.com/vuetifyjs/vuetify/issues/13733)) ([0ec9d53](https://github.com/vuetifyjs/vuetify/commit/0ec9d53cdc0703b731a9943dd44d4b0ea1d7da1a))
-* **VCalendar:** pass native event to v-calendar click:* events ([#13760](https://github.com/vuetifyjs/vuetify/issues/13760)) ([4429e6e](https://github.com/vuetifyjs/vuetify/commit/4429e6e722b7502fe6aae272e6ee17a51d530032)), closes [#13142](https://github.com/vuetifyjs/vuetify/issues/13142)
-* **VCalendar:** support horizontal scroll ([#13164](https://github.com/vuetifyjs/vuetify/issues/13164)) ([f55ee97](https://github.com/vuetifyjs/vuetify/commit/f55ee97dc5917b9f1ba4ea134ea0c1e1454b4e9c)), closes [#13070](https://github.com/vuetifyjs/vuetify/issues/13070)
-* **VDataTable:** allow item.* slots to return a <td> or <th> element ([a4b8856](https://github.com/vuetifyjs/vuetify/commit/a4b8856d31ce62699f2801ece0597846462ea429)), closes [#8474](https://github.com/vuetifyjs/vuetify/issues/8474) [#12791](https://github.com/vuetifyjs/vuetify/issues/12791)
-* **VDatePicker:** add date range first & last classes ([#12855](https://github.com/vuetifyjs/vuetify/issues/12855)) ([988558b](https://github.com/vuetifyjs/vuetify/commit/988558bd1b8f420fecfdca7d2dabc580900d9561)), closes [#12851](https://github.com/vuetifyjs/vuetify/issues/12851) [#12851](https://github.com/vuetifyjs/vuetify/issues/12851) [#12851](https://github.com/vuetifyjs/vuetify/issues/12851) [#12851](https://github.com/vuetifyjs/vuetify/issues/12851)
-* **VInput:** add hide-spin-buttons prop ([#13682](https://github.com/vuetifyjs/vuetify/issues/13682)) ([bc2d6cb](https://github.com/vuetifyjs/vuetify/commit/bc2d6cbf2bcc778152e0aa93106a986d3b072adf)), closes [#6157](https://github.com/vuetifyjs/vuetify/issues/6157)
-* **VOtpInput:** create new v-otp-input component ([#12761](https://github.com/vuetifyjs/vuetify/issues/12761)) ([e3aeae7](https://github.com/vuetifyjs/vuetify/commit/e3aeae7e0e152dc1878006c137f944a3b9f5d68b)), closes [#11425](https://github.com/vuetifyjs/vuetify/issues/11425)
-* **VSlideGroup:** add overscroll friction ([3796587](https://github.com/vuetifyjs/vuetify/commit/3796587eaa9259acb477dab6d9e250ea49f79bb3))
-* **VSnackbar:** only add app padding if app prop is true ([28e9e9d](https://github.com/vuetifyjs/vuetify/commit/28e9e9d2bf6f8d9b24dfc954501f0458bb29c3b7)), closes [#11758](https://github.com/vuetifyjs/vuetify/issues/11758)
-* **VTooltip:** add $tooltip-opacity sass variable ([bfdd32c](https://github.com/vuetifyjs/vuetify/commit/bfdd32ca133c9a2b41926545cdf8c0526dcbd4a2)), closes [#11184](https://github.com/vuetifyjs/vuetify/issues/11184)
-* **VTreeview:** add disabled prop ([de0820c](https://github.com/vuetifyjs/vuetify/commit/de0820c66bb55fa3a695e7db8e8eec706ae209cc)), closes [#5918](https://github.com/vuetifyjs/vuetify/issues/5918)
-* add tag attribute to createSimpleFunctional ([682936b](https://github.com/vuetifyjs/vuetify/commit/682936b8b4aaa9485c5efbdc35a53a3097a2580a)), closes [#10026](https://github.com/vuetifyjs/vuetify/issues/10026) [#5469](https://github.com/vuetifyjs/vuetify/issues/5469)
-
-
-

package/src/directives/ripple/_variables.scss

@@ -1,6 +0,0 @@
-@import '../../styles/styles.sass';
-
-$ripple-animation-transition-in: transform .25s map-get($transition, 'fast-in-slow-out'),
-                                 opacity .1s map-get($transition, 'fast-in-slow-out') !default;
-$ripple-animation-transition-out: opacity .3s map-get($transition, 'fast-in-slow-out') !default;
-$ripple-animation-visible-opacity: .15 !default;

package/types/.npmignore

@@ -1,2 +0,0 @@
-# Ignore type tests
-test