vuetify 2.4.1 → 2.4.5

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

@@ -433,10 +433,10 @@
 
     &.v-text-field--reverse legend
       +ltr()
-        text-align: right
+        margin-left: auto
 
       +rtl()
-        text-align: left
+        margin-right: auto
 
     &.v-text-field--rounded
       legend

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/services/theme/utils.ts

@@ -1,3 +1,4 @@
+import { keys } from '../../util/helpers'
 import { colorToInt, intToHex, colorToHex, ColorInt } from '../../util/colorUtils'
 import * as sRGB from '../../util/color/transformSRGB'
 import * as LAB from '../../util/color/transformCIELAB'
@@ -97,7 +98,7 @@ export function genStyles (theme: VuetifyParsedTheme, cssVar = false): string {
     css += genBaseColor(name, cssVar ? genColorVariable(name) : value.base)
     cssVar && (variablesCss += `  ${genColorVariableName(name)}: ${value.base};\n`)
 
-    const variants = Object.keys(value)
+    const variants = keys(value)
     for (let i = 0; i < variants.length; ++i) {
       const variant = variants[i]
       const variantValue = value[variant]

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

package/types/services/theme.d.ts

@@ -63,8 +63,6 @@ export interface VuetifyParsedTheme {
 }
 
 export interface VuetifyParsedThemeItem {
-  [name: string]: string
-
   base: string
   lighten5: string
   lighten4: string