vuetify 2.5.14 → 2.6.2

package/src/components/VOtpInput/VOtpInput.ts

@@ -0,0 +1,324 @@
+// Styles
+import '../VTextField/VTextField.sass'
+import './VOtpInput.sass'
+
+// Extensions
+import VInput from '../VInput'
+import VTextField from '../VTextField/VTextField'
+// Directives
+import ripple from '../../directives/ripple'
+
+// Utilities
+import { convertToUnit, keyCodes } from '../../util/helpers'
+import { breaking } from '../../util/console'
+
+// Types
+import mixins from '../../util/mixins'
+import { VNode } from 'vue'
+
+const baseMixins = mixins(
+  VInput,
+)
+
+interface options extends InstanceType<typeof baseMixins> {
+  $refs: {
+    input: HTMLInputElement[]
+  }
+}
+
+/* @vue/component */
+export default baseMixins.extend<options>().extend({
+  name: 'v-otp-input',
+
+  directives: {
+    ripple,
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    length: {
+      type: [Number, String],
+      default: 6,
+    },
+    type: {
+      type: String,
+      default: 'text',
+    },
+    plain: Boolean,
+  },
+
+  data: () => ({
+    badInput: false,
+    initialValue: null,
+    isBooted: false,
+    otp: [] as string[],
+  }),
+
+  computed: {
+    outlined (): Boolean {
+      return !this.plain
+    },
+    classes (): object {
+      return {
+        ...VInput.options.computed.classes.call(this),
+        ...VTextField.options.computed.classes.call(this),
+        'v-otp-input--plain': this.plain,
+      }
+    },
+    isDirty (): boolean {
+      return VInput.options.computed.isDirty.call(this) || this.badInput
+    },
+  },
+
+  watch: {
+    isFocused: 'updateValue',
+    value (val) {
+      this.lazyValue = val
+      this.otp = val?.split('') || []
+    },
+  },
+
+  created () {
+    /* istanbul ignore next */
+    if (this.$attrs.hasOwnProperty('browser-autocomplete')) {
+      breaking('browser-autocomplete', 'autocomplete', this)
+    }
+
+    this.otp = this.internalValue?.split('') || []
+  },
+
+  mounted () {
+    requestAnimationFrame(() => (this.isBooted = true))
+  },
+
+  methods: {
+    /** @public */
+    focus (e: Event, otpIdx: number) {
+      this.onFocus(e, otpIdx || 0)
+    },
+    genInputSlot (otpIdx: number) {
+      return this.$createElement('div', this.setBackgroundColor(this.backgroundColor, {
+        staticClass: 'v-input__slot',
+        style: { height: convertToUnit(this.height) },
+        on: {
+          click: () => this.onClick(otpIdx),
+          mousedown: (e: Event) => this.onMouseDown(e, otpIdx),
+          mouseup: (e: Event) => this.onMouseUp(e, otpIdx),
+        },
+      }), [this.genDefaultSlot(otpIdx)])
+    },
+    genControl (otpIdx: number) {
+      return this.$createElement('div', {
+        staticClass: 'v-input__control',
+      }, [
+        this.genInputSlot(otpIdx),
+      ])
+    },
+    genDefaultSlot (otpIdx: number) {
+      return [
+        this.genFieldset(),
+        this.genTextFieldSlot(otpIdx),
+      ]
+    },
+    genContent () {
+      return Array.from({ length: +this.length }, (_, i) => {
+        return this.$createElement('div', this.setTextColor(this.validationState, {
+          staticClass: 'v-input',
+          class: this.classes,
+        }), [this.genControl(i)])
+      })
+    },
+    genFieldset () {
+      return this.$createElement('fieldset', {
+        attrs: {
+          'aria-hidden': true,
+        },
+      }, [this.genLegend()])
+    },
+    genLegend () {
+      const span = this.$createElement('span', {
+        domProps: { innerHTML: '&#8203;' },
+      })
+
+      return this.$createElement('legend', {
+        style: {
+          width: '0px',
+        },
+      }, [span])
+    },
+    genInput (otpIdx: number) {
+      const listeners = Object.assign({}, this.listeners$)
+      delete listeners.change // Change should not be bound externally
+
+      return this.$createElement('input', {
+        style: {},
+        domProps: {
+          value: this.otp[otpIdx],
+          min: this.type === 'number' ? 0 : null,
+        },
+        attrs: {
+          ...this.attrs$,
+          disabled: this.isDisabled,
+          readonly: this.isReadonly,
+          type: this.type,
+          id: `${this.computedId}--${otpIdx}`,
+          class: `otp-field-box--${otpIdx}`,
+          maxlength: 1,
+        },
+        on: Object.assign(listeners, {
+          blur: this.onBlur,
+          input: (e: Event) => this.onInput(e, otpIdx),
+          focus: (e: Event) => this.onFocus(e, otpIdx),
+          paste: (e: ClipboardEvent) => this.onPaste(e, otpIdx),
+          keydown: this.onKeyDown,
+          keyup: (e: KeyboardEvent) => this.onKeyUp(e, otpIdx),
+        }),
+        ref: 'input',
+        refInFor: true,
+      })
+    },
+    genTextFieldSlot (otpIdx: number): VNode {
+      return this.$createElement('div', {
+        staticClass: 'v-text-field__slot',
+      }, [
+        this.genInput(otpIdx),
+      ])
+    },
+    onBlur (e?: Event) {
+      this.isFocused = false
+      e && this.$nextTick(() => this.$emit('blur', e))
+    },
+    onClick (otpIdx: number) {
+      if (this.isFocused || this.isDisabled || !this.$refs.input[otpIdx]) return
+
+      this.onFocus(undefined, otpIdx)
+    },
+    onFocus (e?: Event, otpIdx?: number) {
+      e?.preventDefault()
+      e?.stopPropagation()
+      const elements = this.$refs.input as HTMLInputElement[]
+      const ref = this.$refs.input && elements[otpIdx || 0]
+      if (!ref) return
+
+      if (document.activeElement !== ref) {
+        ref.focus()
+        return ref.select()
+      }
+
+      if (!this.isFocused) {
+        this.isFocused = true
+        ref.select()
+        e && this.$emit('focus', e)
+      }
+    },
+    onInput (e: Event, otpIdx: number) {
+      const target = e.target as HTMLInputElement
+      const value = target.value
+      this.applyValue(otpIdx, target.value, () => {
+        this.internalValue = this.otp.join('')
+      })
+      this.badInput = target.validity && target.validity.badInput
+
+      const nextIndex = otpIdx + 1
+      if (value) {
+        if (nextIndex < +this.length) {
+          this.changeFocus(nextIndex)
+        } else {
+          this.clearFocus(otpIdx)
+          this.onCompleted()
+        }
+      }
+    },
+    clearFocus (index: number) {
+      const input = this.$refs.input[index] as HTMLInputElement
+      input.blur()
+    },
+    onKeyDown (e: KeyboardEvent) {
+      if (e.keyCode === keyCodes.enter) {
+        this.$emit('change', this.internalValue)
+      }
+
+      this.$emit('keydown', e)
+    },
+    onMouseDown (e: Event, otpIdx: number) {
+      // Prevent input from being blurred
+      if (e.target !== this.$refs.input[otpIdx]) {
+        e.preventDefault()
+        e.stopPropagation()
+      }
+
+      VInput.options.methods.onMouseDown.call(this, e)
+    },
+    onMouseUp (e: Event, otpIdx: number) {
+      if (this.hasMouseDown) this.focus(e, otpIdx)
+
+      VInput.options.methods.onMouseUp.call(this, e)
+    },
+    onPaste (event: ClipboardEvent, index: number) {
+      const maxCursor = +this.length - 1
+      const inputVal = event?.clipboardData?.getData('Text')
+      const inputDataArray = inputVal?.split('') || []
+      event.preventDefault()
+      const newOtp: string[] = [...this.otp]
+      for (let i = 0; i < inputDataArray.length; i++) {
+        const appIdx = index + i
+        if (appIdx > maxCursor) break
+        newOtp[appIdx] = inputDataArray[i].toString()
+      }
+      this.otp = newOtp
+      this.internalValue = this.otp.join('')
+      const targetFocus = Math.min(index + inputDataArray.length, maxCursor)
+      this.changeFocus(targetFocus)
+
+      if (newOtp.length === +this.length) { this.onCompleted(); this.clearFocus(targetFocus) }
+    },
+    applyValue (index: number, inputVal: string, next: Function) {
+      const newOtp: string[] = [...this.otp]
+      newOtp[index] = inputVal
+      this.otp = newOtp
+      next()
+    },
+    changeFocus (index: number) {
+      this.onFocus(undefined, index || 0)
+    },
+    updateValue (val: boolean) {
+      // Sets validationState from validatable
+      this.hasColor = val
+
+      if (val) {
+        this.initialValue = this.lazyValue
+      } else if (this.initialValue !== this.lazyValue) {
+        this.$emit('change', this.lazyValue)
+      }
+    },
+    onKeyUp (event: KeyboardEvent, index: number) {
+      event.preventDefault()
+      const eventKey = event.key
+      if (['Tab', 'Shift', 'Meta', 'Control', 'Alt'].includes(eventKey)) {
+        return
+      }
+      if (['Delete'].includes(eventKey)) {
+        return
+      }
+      if (eventKey === 'ArrowLeft' || (eventKey === 'Backspace' && !this.otp[index])) {
+        return index > 0 && this.changeFocus(index - 1)
+      }
+      if (eventKey === 'ArrowRight') {
+        return index + 1 < +this.length && this.changeFocus(index + 1)
+      }
+    },
+    onCompleted () {
+      const rsp = this.otp.join('')
+      if (rsp.length === +this.length) {
+        this.$emit('finish', rsp)
+      }
+    },
+  },
+  render (h): VNode {
+    return h('div', {
+      staticClass: 'v-otp-input',
+      class: this.themeClasses,
+    }, this.genContent())
+  },
+})

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

@@ -0,0 +1,294 @@
+import VOtpInput from '../VOtpInput'
+import {
+  mount,
+  MountOptions,
+  Wrapper,
+} from '@vue/test-utils'
+
+describe('VOtpInput.ts', () => {
+  type Instance = InstanceType<typeof VOtpInput>
+  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  beforeEach(() => {
+    mountFunction = (options?: MountOptions<Instance>) => {
+      return mount(VOtpInput, {
+        // https://github.com/vuejs/vue-test-utils/issues/1130
+        sync: false,
+        ...options,
+      })
+    }
+  })
+
+  it('should update lazyValue when value is updated', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        value: 'foo',
+      },
+    })
+
+    expect(wrapper.vm.lazyValue).toBe('foo')
+
+    wrapper.setProps({ value: 'bar' })
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.vm.lazyValue).toBe('bar')
+  })
+
+  it('should trigger focus events', async () => {
+    // const updateValue = jest.fn()
+    const wrapper = mountFunction(
+      {
+        propsData: {
+          type: 'number',
+        },
+      }
+    )
+
+    wrapper.vm.focus(null, 0)
+
+    const focus = jest.fn()
+    wrapper.vm.$on('focus', focus)
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.vm.isFocused).toBe(true)
+    wrapper.setProps({ value: 'foo' })
+    await wrapper.vm.$nextTick()
+    wrapper.setData({ isFocused: false })
+    wrapper.vm.onFocus()
+  })
+
+  it('should fire change event when pressing enter', async () => {
+    const wrapper = mountFunction()
+    const input = wrapper.findAll('input').at(0)
+    const element = input.element as HTMLInputElement
+    const change = jest.fn()
+
+    wrapper.vm.$on('change', change)
+
+    input.trigger('focus')
+    element.value = 'a'
+    input.trigger('input')
+    await wrapper.vm.$nextTick()
+    input.trigger('focus')
+    await wrapper.vm.$nextTick()
+    input.trigger('keydown.space')
+    input.trigger('keydown.enter')
+    input.trigger('keydown.enter')
+
+    expect(change).toHaveBeenCalledTimes(2)
+  })
+
+  it('should call the correct event for different click locations', () => {
+    const onClick = jest.fn()
+    const onMouseDown = jest.fn()
+    const onMouseUp = jest.fn()
+    const wrapper = mountFunction({
+      methods: {
+        onClick,
+        onMouseDown,
+        onMouseUp,
+      },
+    })
+
+    const slot = wrapper.findAll('.v-input__slot').at(0)
+
+    wrapper.trigger('click')
+    wrapper.trigger('mousedown')
+    wrapper.trigger('mouseup')
+    slot.trigger('click')
+    slot.trigger('mousedown')
+    slot.trigger('mouseup')
+
+    expect(onClick).toHaveBeenCalledTimes(1)
+    expect(onMouseDown).toHaveBeenCalledTimes(1)
+    expect(onMouseUp).toHaveBeenCalledTimes(1)
+  })
+
+  it('should call the correct event for different click locations 2', () => {
+    const onMouseDown = jest.fn()
+    const wrapper = mountFunction()
+
+    const slot = wrapper.findAll('.v-input__slot').at(0)
+    const input = slot.find('input')
+
+    wrapper.trigger('click')
+    wrapper.trigger('mousedown')
+    slot.trigger('click')
+    slot.trigger('mousedown')
+    slot.trigger('click')
+    input.trigger('mousedown')
+
+    expect(onMouseDown).toHaveBeenCalledTimes(0)
+  })
+
+  it('should not focus input when mousedown did not originate from input', () => {
+    const focus = jest.fn()
+    const wrapper = mountFunction({
+      methods: { focus },
+    })
+
+    const input = wrapper.findAll('.v-input__slot').at(0)
+    const element = input.find('input').element as HTMLInputElement
+    input.trigger('mousedown')
+    input.trigger('mouseup')
+    input.trigger('mouseup')
+
+    expect(wrapper.vm.$refs.input[0]).toBe(element)
+    expect(focus).toHaveBeenCalledTimes(1)
+  })
+
+  it('should pass events to internal input field', () => {
+    const keyup = jest.fn()
+    const component = {
+      render (h) {
+        return h(VOtpInput, { on: { keyUp: keyup }, props: { }, attrs: {} })
+      },
+    }
+    const wrapper = mount(component)
+
+    const input = wrapper.findAll('input').at(0)
+    input.trigger('keyUp', { keyCode: 65 })
+
+    expect(keyup).toHaveBeenCalled()
+  })
+
+  it('should fire event when pressing keyboard defined keys', () => {
+    const wrapper = mountFunction()
+    const input = wrapper.find('input')
+    const element = input.element as HTMLInputElement
+    const change = jest.fn()
+
+    wrapper.vm.$on('change', change)
+
+    input.trigger('focus')
+    element.value = '1'
+    input.trigger('input')
+    input.trigger('keydown.enter')
+    input.trigger('keydown.enter')
+    const keys = ['Tab', 'Shift', 'Meta', 'Control', 'Alt', 'Delete', 'ArrowRight', 'Backspace']
+    keys.forEach(key => {
+      input.trigger('keyup', { key })
+    })
+
+    expect(change).toHaveBeenCalledTimes(2)
+  })
+
+  it('should process input when paste event', async () => {
+    const getData = jest.fn(() => '1337078')
+    const event = {
+      clipboardData: {
+        getData,
+      },
+    }
+
+    const wrapper = mountFunction({})
+
+    const input = wrapper.findAll('input').at(0)
+
+    const element = input.element as HTMLInputElement
+    input.trigger('focus')
+    await wrapper.vm.$nextTick()
+    expect(document.activeElement === element).toBe(true)
+
+    input.trigger('paste', event)
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.vm.otp).toStrictEqual('133707'.split(''))
+  })
+
+  it('should process input when paste event with empty event', async () => {
+    const event = {}
+
+    const wrapper = mountFunction({})
+
+    const input = wrapper.findAll('input').at(0)
+
+    const element = input.element as HTMLInputElement
+    input.trigger('focus')
+    await wrapper.vm.$nextTick()
+    expect(document.activeElement === element).toBe(true)
+
+    input.trigger('paste', event)
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.vm.otp).toStrictEqual(''.split(''))
+  })
+
+  it('should clear cursor when input typing is done', async () => {
+    const onFinish = jest.fn()
+    const clearFocus = jest.fn()
+    const wrapper = mountFunction({
+      propsData: {
+        value: '',
+        length: 2,
+      },
+      methods: {
+        clearFocus,
+      },
+    })
+
+    wrapper.vm.$on('finish', onFinish)
+
+    const input = wrapper.findAll('input').at(0)
+    const input2 = wrapper.findAll('input').at(1)
+    const element = input.element as HTMLInputElement
+    const element2 = input2.element as HTMLInputElement
+
+    input.trigger('focus')
+    await wrapper.vm.$nextTick()
+    element.value = 'a'
+    input.trigger('input')
+    await wrapper.vm.$nextTick()
+    expect(document.activeElement === element2).toBe(true)
+
+    await wrapper.vm.$nextTick()
+    element2.value = 'b'
+    input2.trigger('input')
+    await wrapper.vm.$nextTick()
+
+    const onFocus = jest.spyOn(wrapper.vm.$refs.input[0], 'focus')
+    expect(onFocus).toHaveBeenCalledTimes(0)
+    expect(onFinish).toHaveBeenCalledTimes(1)
+    expect(clearFocus).toHaveBeenCalledTimes(1)
+  })
+
+  it('should run onComplete when input cursor reached end without full OTP value', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        value: '',
+        length: 2,
+      },
+      methods: {
+      },
+    })
+
+    const input = wrapper.findAll('input').at(1)
+    const element = input.element as HTMLInputElement
+    input.trigger('focus')
+    await wrapper.vm.$nextTick()
+    input.trigger('input')
+    await wrapper.vm.$nextTick()
+    element.value = 'b'
+    input.trigger('input')
+    await wrapper.vm.$nextTick()
+
+    const onFocus = jest.spyOn(wrapper.vm.$refs.input[0], 'focus')
+    expect(onFocus).toHaveBeenCalledTimes(0)
+  })
+
+  it('should change cursor left when input focus and keyup left', async () => {
+    const wrapper = mountFunction()
+
+    const input = wrapper.findAll('input').at(1)
+    const input2 = wrapper.findAll('input').at(0)
+    const element = input2.element as HTMLInputElement
+    input.trigger('focus')
+    await wrapper.vm.$nextTick()
+    input.trigger('keyup', {
+      key: 'ArrowLeft',
+    })
+    await wrapper.vm.$nextTick()
+
+    expect(document.activeElement === element).toBe(true)
+  })
+})

package/src/components/VOtpInput/_variables.scss

@@ -0,0 +1,4 @@
+@import '../../styles/styles.sass';
+
+$otp-gutter: 4px !default;
+$otp-width: 24px !default;

package/src/components/VOtpInput/index.ts

@@ -0,0 +1,4 @@
+import VOtpInput from './VOtpInput'
+
+export { VOtpInput }
+export default VOtpInput

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

@@ -325,6 +325,10 @@ export default baseMixins.extend<options>().extend({
       for (let index = 0; index < arr.length; ++index) {
         const item = arr[index]
 
+        // Do not return null values if existant (#14421)
+        if (item == null) {
+          continue
+        }
         // Do not deduplicate headers or dividers (#12517)
         if (item.header || item.divider) {
           uniqueValues.set(item, item)

package/src/components/VSlideGroup/VSlideGroup.ts

@@ -42,6 +42,12 @@ interface options extends Vue {
   }
 }
 
+function bias (val: number) {
+  const c = 0.501
+  const x = Math.abs(val)
+  return Math.sign(val) * (x / ((1 / c - 2) * (1 - x) + 1))
+}
+
 export function calculateUpdatedOffset (
   selectedElement: HTMLElement,
   widths: Widths,
@@ -210,7 +216,18 @@ export const BaseSlideGroup = mixins<options &
     // and need to be recalculated
     isOverflowing: 'setWidths',
     scrollOffset (val) {
-      this.$refs.content.style.transform = `translateX(${-val}px)`
+      if (this.$vuetify.rtl) val = -val
+
+      let scroll =
+        val <= 0
+          ? bias(-val)
+          : val > this.widths.content - this.widths.wrapper
+            ? -(this.widths.content - this.widths.wrapper) + bias(this.widths.content - this.widths.wrapper - val)
+            : -val
+
+      if (this.$vuetify.rtl) scroll = -scroll
+
+      this.$refs.content.style.transform = `translateX(${scroll}px)`
     },
   },
 
@@ -462,8 +479,10 @@ export const BaseSlideGroup = mixins<options &
         wrapper: this.$refs.wrapper ? this.$refs.wrapper.clientWidth : 0,
       }, this.$vuetify.rtl, this.scrollOffset)
     },
-    setWidths /* istanbul ignore next */  () {
+    setWidths () {
       window.requestAnimationFrame(() => {
+        if (this._isDestroyed) return
+
         const { content, wrapper } = this.$refs
 
         this.widths = {