vuetify 2.4.4 → 2.4.5

package/src/components/VAutocomplete/__tests__/VAutocomplete2.spec.ts

@@ -156,6 +156,7 @@ describe('VAutocomplete.ts', () => {
 
   it('should not hide menu when no data but has no-data slot', async () => {
     const wrapper = mountFunction({
+      attachToDocument: true,
       propsData: {
         combobox: true,
       },
@@ -278,6 +279,7 @@ describe('VAutocomplete.ts', () => {
 
   it('should not show menu when items are updated and hide-no-data is enabled', async () => {
     const wrapper = mountFunction({
+      attachToDocument: true,
       propsData: {
         hideNoData: true,
         items: ['Something first'],
@@ -373,6 +375,7 @@ describe('VAutocomplete.ts', () => {
   // https://github.com/vuetifyjs/vuetify/issues/4580
   it('should display menu when hide-no-date and hide-selected are enabled and selected item does not match search', async () => {
     const wrapper = mountFunction({
+      attachToDocument: true,
       propsData: {
         items: [1, 2],
         value: 1,

package/src/components/VAutocomplete/__tests__/VAutocomplete3.spec.ts

@@ -43,6 +43,7 @@ describe('VAutocomplete.ts', () => {
   // https://github.com/vuetifyjs/vuetify/issues/7259
   it('should update search when same item is selected', async () => {
     const wrapper = mountFunction({
+      attachToDocument: true,
       propsData: {
         items: ['foo'],
         value: 'foo',

package/src/components/VCalendar/VCalendarCategory.ts

@@ -71,11 +71,13 @@ export default VCalendarDaily.extend({
       }, categoryName === null ? this.categoryForInvalid : categoryName)
     },
     genDays (): VNode[] {
-      const d = this.days[0]
-      let days = this.days.slice()
-      days = new Array(this.parsedCategories.length)
-      days.fill(d)
-      return days.map((v, i) => this.genDay(v, 0, i))
+      const days: VNode[] = []
+      this.days.forEach(d => {
+        const day = new Array(this.parsedCategories.length)
+        day.fill(d)
+        days.push(...day.map((v, i) => this.genDay(v, 0, i)))
+      })
+      return days
     },
     genDay (day: CalendarTimestamp, index: number, categoryIndex: number): VNode {
       const category = this.parsedCategories[categoryIndex]

package/src/components/VCombobox/VCombobox.ts

@@ -154,6 +154,16 @@ export default VAutocomplete.extend({
         this.updateEditing()
       } else {
         VAutocomplete.options.methods.selectItem.call(this, item)
+
+        // if selected item contains search value,
+        // remove the search string
+        if (
+          this.internalSearch &&
+          this.multiple &&
+          this.getText(item).toLocaleLowerCase().includes(this.internalSearch.toLocaleLowerCase())
+        ) {
+          this.internalSearch = null
+        }
       }
     },
     setSelectedItems () {

package/src/components/VCombobox/__tests__/VCombobox-multiple.spec.ts

@@ -403,7 +403,7 @@ describe('VCombobox.ts', () => {
 
     await wrapper.vm.$nextTick()
 
-    expect(wrapper.vm.internalSearch).toBe('a')
+    expect(wrapper.vm.internalSearch).toBeNull()
     expect(change).toHaveBeenCalledWith(['aaa'])
   })
 

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

@@ -234,6 +234,7 @@ describe('VCombobox.ts', () => {
       { text: 'Vuetify', value: 3 },
     ]
     const wrapper = mountFunction({
+      attachToDocument: true,
       propsData: {
         items,
       },

package/src/components/VData/VData.ts

@@ -365,7 +365,7 @@ export default Vue.extend({
       // Make sure we don't try to display non-existant page if items suddenly change
       // TODO: Could possibly move this to pageStart/pageStop?
       if (this.serverItemsLength === -1 && items.length <= this.pageStart) {
-        this.internalOptions.page = Math.max(1, this.internalOptions.page - 1)
+        this.internalOptions.page = Math.max(1, Math.ceil(items.length / this.internalOptions.itemsPerPage))
       }
 
       return items.slice(this.pageStart, this.pageStop)

package/src/components/VDataTable/VDataTableHeader.sass

@@ -27,6 +27,8 @@
       pointer-events: auto
       cursor: pointer
       outline: 0
+      .v-data-table-header__icon
+        line-height: .9
 
     &.active, &:hover
       .v-data-table-header__icon

package/src/components/VFileInput/VFileInput.ts

@@ -120,7 +120,7 @@ export default VTextField.extend({
       return this.$attrs.hasOwnProperty('multiple')
     },
     text (): string[] {
-      if (!this.isDirty) return [this.placeholder]
+      if (!this.isDirty && (this.isFocused || !this.hasLabel)) return [this.placeholder]
 
       return this.internalArrayValue.map((file: File) => {
         const {

package/src/components/VLazy/VLazy.ts

@@ -52,18 +52,13 @@ export default mixins(
 
   methods: {
     genContent () {
-      const slot = getSlot(this)
+      const children = this.isActive && getSlot(this)
 
-      /* istanbul ignore if */
-      if (!this.transition) return slot
-
-      const children = []
-
-      if (this.isActive) children.push(slot)
-
-      return this.$createElement('transition', {
-        props: { name: this.transition },
-      }, children)
+      return this.transition
+        ? this.$createElement('transition', {
+          props: { name: this.transition },
+        }, children)
+        : children
     },
     onObserve (
       entries: IntersectionObserverEntry[],

package/src/components/VList/VListItem.ts

@@ -139,7 +139,7 @@ export default baseMixins.extend<options>().extend({
       } else if (this.isInNav) {
         // do nothing, role is inherit
       } else if (this.isInGroup) {
-        attrs.role = 'listitem'
+        attrs.role = 'option'
         attrs['aria-selected'] = String(this.isActive)
       } else if (this.isInMenu) {
         attrs.role = this.isClickable ? 'menuitem' : undefined

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

@@ -202,7 +202,7 @@ describe('VListItem.ts', () => {
     const wrapper3 = mountFunction({
       provide: { isInGroup: true },
     })
-    expect(wrapper3.element.getAttribute('role')).toBe('listitem')
+    expect(wrapper3.element.getAttribute('role')).toBe('option')
 
     // In menu
     const wrapper4 = mountFunction({

package/src/components/VRating/VRating.ts

@@ -224,7 +224,6 @@ export default mixins(
 
       return this.$createElement(VIcon, this.setTextColor(this.getColor(props), {
         attrs: {
-          tabindex: -1,
           'aria-label': this.$vuetify.lang.t(this.iconLabel, i + 1, Number(this.length)),
         },
         directives: this.directives,

package/src/components/VSelect/VSelect.ts

@@ -155,9 +155,15 @@ export default baseMixins.extend<options>().extend({
       return `list-${this._uid}`
     },
     computedCounterValue (): number {
-      return this.multiple
-        ? this.selectedItems.length
-        : (this.getText(this.selectedItems[0]) || '').toString().length
+      const value = this.multiple
+        ? this.selectedItems
+        : (this.getText(this.selectedItems[0]) || '').toString()
+
+      if (typeof this.counterValue === 'function') {
+        return this.counterValue(value)
+      }
+
+      return value.length
     },
     directives (): VNodeDirective[] | undefined {
       return this.isFocused ? [{
@@ -790,6 +796,9 @@ export default baseMixins.extend<options>().extend({
 
       window.requestAnimationFrame(() => {
         menu.getTiles()
+
+        if (!menu.hasClickableTiles) return this.activateMenu()
+
         switch (keyCode) {
           case keyCodes.up:
             menu.prevTile()
@@ -804,7 +813,7 @@ export default baseMixins.extend<options>().extend({
             menu.lastTile()
             break
         }
-        menu.activeTile && menu.activeTile.click()
+        this.selectItem(this.allItems[this.getMenuIndex()])
       })
     },
     selectItem (item: object) {

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

@@ -3,6 +3,7 @@ import Vue from 'vue'
 
 // Components
 import VSelect from '../VSelect'
+import VDialog from '../../VDialog/VDialog'
 import {
   VListItem,
   VListItemTitle,
@@ -14,6 +15,8 @@ import {
   mount,
   Wrapper,
 } from '@vue/test-utils'
+import { keyCodes } from '../../../util/helpers'
+import { waitAnimationFrame } from '../../../../test'
 
 // eslint-disable-next-line max-statements
 describe('VSelect.ts', () => {
@@ -456,4 +459,68 @@ describe('VSelect.ts', () => {
 
     expect(wrapper.vm.$attrs.autocomplete).toBe('on')
   })
+
+  // Based on issue: https://github.com/vuetifyjs/vuetify/issues/12769
+  it('should cycle through selected items as per kep up & down without closing hosting menu dialog', async () => {
+    const items = ['Foo', 'Bar', 'Fizz', 'Buzz']
+
+    const dialogClickOutside = jest.fn()
+
+    const dialogWrapper = mount(VDialog, {
+      slots: {
+        default: {
+          render: h => h(VSelect, {
+            props: {
+              items,
+            },
+          }),
+        },
+      },
+      propsData: {
+        value: false,
+        fullscreen: true,
+      },
+      mocks: {
+        $vuetify: {
+          lang: {
+            t: (val: string) => val,
+          },
+          theme: {
+            dark: false,
+          },
+          breakpoint: {},
+        },
+      },
+    }) as Wrapper<InstanceType<typeof VDialog>>
+
+    dialogWrapper.vm.$on('click:outside', dialogClickOutside)
+
+    // Open dialog
+    dialogWrapper.setProps({ value: true })
+    await dialogWrapper.vm.$nextTick()
+
+    // Confirm Dialog is open
+    expect(dialogWrapper.vm.isActive).toBe(true)
+
+    const selectWrapper = dialogWrapper.find({ name: 'v-select' }) as Wrapper<Instance>
+
+    // Press key down twice to move selected item from null to Bar
+    const keyDownEvent = new KeyboardEvent('keydown', { keyCode: keyCodes.down })
+    selectWrapper.vm.onKeyDown(keyDownEvent)
+    await waitAnimationFrame()
+    selectWrapper.vm.onKeyDown(keyDownEvent)
+    await waitAnimationFrame()
+    expect(selectWrapper.vm.internalValue).toBe('Bar')
+
+    // Press key up once to move selected item from Bar to Foo
+    const keyUpEvent = new KeyboardEvent('keyup', { keyCode: keyCodes.up })
+    selectWrapper.vm.onKeyDown(keyUpEvent)
+    await waitAnimationFrame()
+    expect(selectWrapper.vm.internalValue).toBe('Foo')
+
+    // Confirm dialog click outside event has not been called
+    expect(dialogClickOutside).toHaveBeenCalledTimes(0)
+    // Confirm dialog is still open
+    expect(dialogWrapper.vm.isActive).toBe(true)
+  })
 })

package/src/components/VSelect/__tests__/VSelect2.spec.ts

@@ -162,6 +162,32 @@ describe('VSelect.ts', () => {
     expect(wrapper.vm.computedCounterValue).toBe(2)
   })
 
+  it('should return the correct counter value', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        items: ['foo', 'bar'],
+        value: 'foo',
+      },
+    })
+
+    expect(wrapper.vm.computedCounterValue).toBe(3)
+
+    wrapper.setProps({
+      multiple: true,
+      value: ['foo'],
+    })
+
+    expect(wrapper.vm.computedCounterValue).toBe(1)
+
+    wrapper.setProps({
+      counterValue: (value?: string): number => 2,
+      multiple: false,
+      value: undefined,
+    })
+
+    expect(wrapper.vm.computedCounterValue).toBe(2)
+  })
+
   it('should emit a single change event', async () => {
     const wrapper = mountFunction({
       attachToDocument: true,

package/src/components/VSelect/__tests__/__snapshots__/VSelect2.spec.ts.snap

@@ -6,7 +6,7 @@ exports[`VSelect.ts should be clearable with prop, dirty and multi select 1`] =
     <div role="button"
          aria-haspopup="listbox"
          aria-expanded="false"
-         aria-owns="list-100"
+         aria-owns="list-106"
          class="v-input__slot"
     >
       <div class="v-select__slot">
@@ -14,7 +14,7 @@ exports[`VSelect.ts should be clearable with prop, dirty and multi select 1`] =
           <div class="v-select__selection v-select__selection--comma">
             1
           </div>
-          <input id="input-100"
+          <input id="input-106"
                  readonly="readonly"
                  type="text"
                  aria-readonly="false"
@@ -66,7 +66,7 @@ exports[`VSelect.ts should be clearable with prop, dirty and single select 1`] =
     <div role="button"
          aria-haspopup="listbox"
          aria-expanded="false"
-         aria-owns="list-93"
+         aria-owns="list-99"
          class="v-input__slot"
     >
       <div class="v-select__slot">
@@ -74,7 +74,7 @@ exports[`VSelect.ts should be clearable with prop, dirty and single select 1`] =
           <div class="v-select__selection v-select__selection--comma">
             1
           </div>
-          <input id="input-93"
+          <input id="input-99"
                  readonly="readonly"
                  type="text"
                  aria-readonly="false"

package/src/components/VTextField/VTextField.ts

@@ -18,6 +18,7 @@ import resize from '../../directives/resize'
 import ripple from '../../directives/ripple'
 
 // Utilities
+import { attachedRoot } from '../../util/dom'
 import { convertToUnit, keyCodes } from '../../util/helpers'
 import { breaking, consoleWarn } from '../../util/console'
 
@@ -446,7 +447,10 @@ export default baseMixins.extend<options>().extend({
     onFocus (e?: Event) {
       if (!this.$refs.input) return
 
-      if (document.activeElement !== this.$refs.input) {
+      const root = attachedRoot(this.$el)
+      if (!root) return
+
+      if (root.activeElement !== this.$refs.input) {
         return this.$refs.input.focus()
       }
 
@@ -500,9 +504,10 @@ export default baseMixins.extend<options>().extend({
       if (
         !this.autofocus ||
         typeof document === 'undefined' ||
-        !this.$refs.input ||
-        document.activeElement === this.$refs.input
-      ) return false
+        !this.$refs.input) return false
+
+      const root = attachedRoot(this.$el)
+      if (!root || root.activeElement === this.$refs.input) return false
 
       this.$refs.input.focus()
 

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

@@ -96,7 +96,9 @@ describe('VTextField.ts', () => { // eslint-disable-line max-statements
   })
 
   it('should start validating on input', async () => {
-    const wrapper = mountFunction()
+    const wrapper = mountFunction({
+      attachToDocument: true,
+    })
 
     expect(wrapper.vm.shouldValidate).toEqual(false)
     wrapper.setProps({ value: 'asd' })
@@ -218,6 +220,7 @@ describe('VTextField.ts', () => { // eslint-disable-line max-statements
   it('should start validating on blur', async () => {
     const rule = jest.fn().mockReturnValue(true)
     const wrapper = mountFunction({
+      attachToDocument: true,
       propsData: {
         rules: [rule],
         validateOnBlur: true,
@@ -291,7 +294,9 @@ describe('VTextField.ts', () => { // eslint-disable-line max-statements
         })
       },
     }
-    const wrapper = mount(component)
+    const wrapper = mount(component, {
+      attachToDocument: true,
+    })
 
     const input = wrapper.findAll('input').at(0)
 
@@ -640,7 +645,9 @@ describe('VTextField.ts', () => { // eslint-disable-line max-statements
   })
 
   it('should have focus and blur methods', async () => {
-    const wrapper = mountFunction()
+    const wrapper = mountFunction({
+      attachToDocument: true,
+    })
     const onBlur = jest.spyOn(wrapper.vm.$refs.input, 'blur')
     const onFocus = jest.spyOn(wrapper.vm.$refs.input, 'focus')
 
@@ -777,7 +784,9 @@ describe('VTextField.ts', () => { // eslint-disable-line max-statements
         })
       },
     }
-    const wrapper = mount(component)
+    const wrapper = mount(component, {
+      attachToDocument: true,
+    })
 
     const inputElement = wrapper.findAll('input').at(0)
     const clearIcon = wrapper.find('.v-input__icon--clear .v-icon')
@@ -812,6 +821,7 @@ describe('VTextField.ts', () => { // eslint-disable-line max-statements
 
   it('should autofocus text-field when intersected', async () => {
     const wrapper = mountFunction({
+      attachToDocument: true,
       propsData: { autofocus: true },
     })
     const input = wrapper.find('input')
@@ -844,6 +854,7 @@ describe('VTextField.ts', () => { // eslint-disable-line max-statements
 
   it('should use the correct icon color when using the solo inverted prop', () => {
     const wrapper = mountFunction({
+      attachToDocument: true,
       propsData: { soloInverted: true },
       mocks: {
         $vuetify: {

package/src/locale/sk.ts

@@ -63,7 +63,7 @@ export default {
   },
   rating: {
     ariaLabel: {
-      icon: 'Rating {0} of {1}',
+      icon: 'Hodnotenie {0} z {1}',
     },
   },
 }

package/src/util/__tests__/dom.spec.ts

@@ -0,0 +1,42 @@
+import Vue from 'vue'
+import {
+  mount,
+} from '@vue/test-utils'
+import {
+  attachedRoot,
+} from '../dom'
+
+const FooComponent = Vue.extend({
+  render (h) {
+    return h('div', ['foo'])
+  },
+})
+
+describe('dom', () => {
+  it('should properly detect an element\'s root', () => {
+    const shadowHost = document.createElement('div')
+    expect(attachedRoot(shadowHost)).toBeNull()
+
+    const shadowRoot = shadowHost.attachShadow({ mode: 'closed' })
+    expect(attachedRoot(shadowRoot)).toBeNull()
+
+    document.body.appendChild(shadowHost)
+    expect(attachedRoot(shadowHost)).toBe(document)
+
+    expect(attachedRoot(shadowRoot)).toBe(shadowRoot)
+
+    const insideDiv = document.createElement('div')
+    expect(attachedRoot(insideDiv)).toBeNull()
+
+    shadowRoot.appendChild(insideDiv)
+    expect(attachedRoot(insideDiv)).toBe(shadowRoot)
+  })
+
+  it('should detect the root of mounted components', () => {
+    const attachedWrapper = mount(FooComponent, { attachToDocument: true })
+    expect(attachedRoot(attachedWrapper.element)).toBe(document)
+
+    const detachedWrapper = mount(FooComponent, { attachToDocument: false })
+    expect(attachedRoot(detachedWrapper.element)).toBeNull()
+  })
+})

package/src/util/dom.ts

@@ -0,0 +1,24 @@
+/**
+ * Returns:
+ *  - 'null' if the node is not attached to the DOM
+ *  - the root node (HTMLDocument | ShadowRoot) otherwise
+ */
+export function attachedRoot (node: Node): null | HTMLDocument | ShadowRoot {
+  /* istanbul ignore next */
+  if (typeof node.getRootNode !== 'function') {
+    // Shadow DOM not supported (IE11), lets find the root of this node
+    while (node.parentNode) node = node.parentNode
+
+    // The root parent is the document if the node is attached to the DOM
+    if (node !== document) return null
+
+    return document
+  }
+
+  const root = node.getRootNode()
+
+  // The composed root node is the document if the node is attached to the DOM
+  if (root !== document && root.getRootNode({ composed: true }) !== document) return null
+
+  return root as HTMLDocument | ShadowRoot
+}

package/types/services/icons.d.ts

@@ -2,7 +2,6 @@
 import { Component } from 'vue'
 
 export interface Icons extends IconsOptions {
-  component?: Component | string
   iconfont: Iconfont
   values: VuetifyIcons
 }
@@ -10,13 +9,14 @@ export interface Icons extends IconsOptions {
 export type Iconfont = 'mdi' | 'mdiSvg' | 'md' | 'fa' | 'faSvg' | 'fa4'
 
 export interface IconsOptions {
+  component?: Component | string
   /**
    * Select a base icon font to use. Note that none of these are included, you must install them yourself
    *
    * md: <a href="https://material.io/icons">material.io</a> (default)
    * mdi: <a href="https://materialdesignicons.com">MDI</a>
    * fa: <a href="https://fontawesome.com/get-started/web-fonts-with-css">FontAwesome 5</a>
-   * fa4: <a href="">FontAwesome 4</a> TODO: link
+   * fa4: <a href="https://fontawesome.com/v4.7.0/">FontAwesome 4</a>
    * faSvg: <a href="https://fontawesome.com/how-to-use/on-the-web/using-with/vuejs">FontAwesome SVG</a>
    */
   iconfont?: Iconfont