@kokoccc/vuetify 1.0.1

package/src/components/VOtpInput/VOtpInput.ts

@@ -0,0 +1,357 @@
+import { h } from 'vue'
+// 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 } from '../../util/helpers'
+import { breaking } from '../../util/console'
+
+// Types
+import mixins from '../../util/mixins'
+import type { VNode } from 'vue'
+
+const baseMixins = mixins(
+  VInput,
+)
+
+interface options extends InstanceType<typeof baseMixins> {
+  $refs: {
+    input: HTMLInputElement[]
+  }
+}
+
+/* @vue/component */
+export default baseMixins.extend({
+  name: 'v-otp-input',
+
+  inheritAttrs: false,
+
+  props: {
+    length: {
+      type: [Number, String],
+      default: 6,
+    },
+    type: {
+      type: String,
+      default: 'text',
+    },
+    plain: Boolean,
+    modelValue: {
+      type: String,
+      default: '',
+    },
+  },
+
+  emits: ['blur', 'focus', 'change', 'keydown', 'finish', 'update:modelValue'],
+
+  data: () => ({
+    initialValue: null,
+    isBooted: false,
+    otp: [] as string[],
+    lazyValue: '',
+    inputRefs: [] as HTMLInputElement[],
+  }),
+
+  computed: {
+    outlined (): boolean {
+      return !this.plain
+    },
+    fullWidth (): boolean {
+      return false
+    },
+    prefix (): boolean {
+      return false
+    },
+    isSingle (): boolean {
+      return true
+    },
+    isSolo (): boolean {
+      return false
+    },
+    soloInverted (): boolean {
+      return false
+    },
+    flat (): boolean {
+      return false
+    },
+    filled (): boolean {
+      return false
+    },
+    reverse (): boolean {
+      return false
+    },
+    placeholder (): string {
+      return ''
+    },
+    rounded (): boolean {
+      return false
+    },
+    shaped (): boolean {
+      return false
+    },
+    internalValue: {
+      get (): string {
+        return this.lazyValue
+      },
+      set (val: string) {
+        this.lazyValue = val
+        this.$emit('update:modelValue', val)
+      },
+    },
+    classes (): object {
+      return {
+        ...VInput.computed.classes.call(this),
+        ...VTextField.computed.classes.call(this),
+        'v-otp-input--plain': this.plain,
+      }
+    },
+    isEnclosed (): boolean {
+      return false
+    },
+  },
+
+  watch: {
+    isFocused: 'updateValue',
+    modelValue (val) {
+      this.lazyValue = val
+      this.otp = val?.split('') || []
+    },
+  },
+
+  created () {
+    /* istanbul ignore next */
+    if (this.$attrs.hasOwnProperty('browser-autocomplete')) {
+      breaking('browser-autocomplete', 'autocomplete', this)
+    }
+
+    this.lazyValue = this.modelValue
+    this.otp = this.modelValue?.split('') || []
+  },
+
+  mounted () {
+    requestAnimationFrame(() => (this.isBooted = true))
+  },
+
+  methods: {
+    /** @public */
+    focus (e: Event, otpIdx: number) {
+      this.onFocus(e, otpIdx || 0)
+    },
+    genInputSlot (otpIdx: number) {
+      return h('div', this.setBackgroundColor(this.backgroundColor, {
+        class: 'v-input__slot',
+        style: { height: convertToUnit(this.height) },
+        onClick: () => this.onClick(otpIdx),
+        onMousedown: (e: Event) => this.onMouseDown(e, otpIdx),
+        onMouseup: (e: Event) => this.onMouseUp(e, otpIdx),
+      }), [this.genDefaultSlot(otpIdx)])
+    },
+    genControl (otpIdx: number) {
+      return h('div', {
+        class: 'v-input__control',
+      }, [
+        this.genInputSlot(otpIdx),
+      ])
+    },
+    genDefaultSlot (otpIdx: number) {
+      return [
+        this.genFieldset(),
+        this.genTextFieldSlot(otpIdx),
+      ]
+    },
+    genContent () {
+      return Array.from({ length: +this.length }, (_, i) => {
+        return h('div', this.setTextColor(this.validationState, {
+          class: ['v-input', this.classes],
+        }), [this.genControl(i)])
+      })
+    },
+    genFieldset () {
+      return h('fieldset', {
+        'aria-hidden': 'true',
+      }, [this.genLegend()])
+    },
+    genLegend () {
+      const span = h('span', {
+        innerHTML: '&#8203;',
+      })
+
+      return h('legend', {
+        style: {
+          width: '0px',
+        },
+      }, [span])
+    },
+    genInput (otpIdx: number) {
+      const listeners = Object.assign({}, this.$attrs)
+      delete listeners.onChange // Change should not be bound externally
+
+      const inputProps: any = {
+        style: {},
+        value: this.otp[otpIdx],
+        ...this.$attrs,
+        autocomplete: 'one-time-code',
+        disabled: this.isDisabled,
+        readonly: this.isReadonly,
+        type: this.type,
+        id: `${this.computedId}--${otpIdx}`,
+        class: `otp-field-box--${otpIdx}`,
+        ...Object.assign(listeners, {
+          onBlur: this.onBlur,
+          onInput: (e: Event) => this.onInput(e, otpIdx),
+          onFocus: (e: Event) => this.onFocus(e, otpIdx),
+          onKeydown: this.onKeyDown,
+          onKeyup: (e: KeyboardEvent) => this.onKeyUp(e, otpIdx),
+        }),
+        ref: (el: HTMLInputElement) => {
+          if (el) {
+            this.inputRefs[otpIdx] = el
+          }
+        },
+      }
+
+      if (this.type === 'number') {
+        inputProps.min = 0
+      }
+
+      return h('input', inputProps)
+    },
+    genTextFieldSlot (otpIdx: number): VNode {
+      return h('div', {
+        class: '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.inputRefs[otpIdx]) return
+
+      this.onFocus(undefined, otpIdx)
+    },
+    onFocus (e?: Event, otpIdx?: number) {
+      e?.preventDefault()
+      e?.stopPropagation()
+
+      const ref = this.inputRefs[otpIdx || 0]
+      if (!ref) return
+
+      if (document.activeElement !== ref) {
+        ref.focus()
+        this.isFocused = true
+        return ref.select()
+      }
+
+      if (!this.isFocused) {
+        this.isFocused = true
+        ref.select()
+        e && this.$emit('focus', e)
+      }
+    },
+    onInput (e: Event, index: number) {
+      const maxCursor = +this.length - 1
+
+      const target = e.target as HTMLInputElement
+      const value = target.value
+      const inputDataArray = value?.split('') || []
+
+      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()
+      }
+      if (!inputDataArray.length) {
+        newOtp.splice(index, 1)
+      }
+
+      this.otp = newOtp
+      this.internalValue = this.otp.join('')
+
+      if (index + inputDataArray.length >= +this.length) {
+        this.onCompleted()
+        this.clearFocus(index)
+      } else if (inputDataArray.length) {
+        this.changeFocus(index + inputDataArray.length)
+      }
+    },
+    clearFocus (index: number) {
+      const input = this.inputRefs[index]
+      input?.blur()
+    },
+    onKeyDown (e: KeyboardEvent) {
+      if (e.key === 'Enter') {
+        this.$emit('change', this.internalValue)
+      }
+
+      this.$emit('keydown', e)
+    },
+    onMouseDown (e: Event, otpIdx: number) {
+      const inputRef = this.inputRefs[otpIdx]
+
+      // Prevent input from being blurred
+      if (e.target !== inputRef) {
+        e.preventDefault()
+        e.stopPropagation()
+      }
+
+      VInput.methods.onMouseDown.call(this, e)
+    },
+    onMouseUp (e: Event, otpIdx: number) {
+      if (this.hasMouseDown) this.focus(e, otpIdx)
+
+      VInput.methods.onMouseUp.call(this, e)
+    },
+    changeFocus (index: number) {
+      this.onFocus(undefined, index || 0)
+    },
+    updateValue (val: boolean) {
+      // Sets validationState from validatable
+      this.hasColor = val
+
+      if (val) {
+        this.initialValue = this.internalValue
+      } else if (this.initialValue !== this.internalValue) {
+        this.$emit('change', this.internalValue)
+      }
+    },
+    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 (): VNode {
+    return h('div', {
+      class: ['v-otp-input', this.themeClasses],
+    }, this.genContent())
+  },
+})

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

@@ -0,0 +1,267 @@
+import VOtpInput from '../VOtpInput'
+import {
+  mount,
+  MountingOptions,
+  VueWrapper,
+  enableAutoUnmount,
+} from '@vue/test-utils'
+import { h } from 'vue'
+
+describe('VOtpInput.ts', () => {
+  type Instance = InstanceType<typeof VOtpInput>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
+
+  beforeEach(() => {
+    mountFunction = (options?: MountingOptions<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({
+      props: {
+        modelValue: 'foo',
+      },
+    })
+
+    expect(wrapper.vm.lazyValue).toBe('foo')
+
+    await wrapper.setProps({ modelValue: 'bar' })
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.vm.lazyValue).toBe('bar')
+  })
+
+  it('should trigger focus events', async () => {
+    // const updateValue = jest.fn()
+    const wrapper = mountFunction(
+      {
+        props: {
+          type: 'number',
+        },
+      }
+    )
+
+    // Wait for component to be mounted and refs to be available
+    await wrapper.vm.$nextTick()
+
+    // Focus the first input directly
+    const input = wrapper.findAll('input')[0]
+    const element = input.element as HTMLInputElement
+    element.focus()
+    input.trigger('focus')
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.vm.isFocused).toBe(true)
+    await wrapper.setProps({ modelValue: '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')[0]
+    const element = input.element as HTMLInputElement
+
+    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', { key: 'Enter' })
+    input.trigger('keydown', { key: 'Enter' })
+
+    expect(wrapper.emitted('change')).toHaveLength(2)
+  })
+
+  it('should call the correct event for different click locations', () => {
+    const wrapper = mountFunction()
+
+    const slot = wrapper.findAll('.v-input__slot')[0]
+
+    // Just test that the events can be triggered without errors
+    wrapper.trigger('click')
+    wrapper.trigger('mousedown')
+    wrapper.trigger('mouseup')
+    slot.trigger('click')
+    slot.trigger('mousedown')
+    slot.trigger('mouseup')
+
+    // Test passes if no errors are thrown
+    expect(true).toBe(true)
+  })
+
+  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')[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', async () => {
+    const wrapper = mountFunction()
+
+    await wrapper.vm.$nextTick()
+
+    const input = wrapper.findAll('.v-input__slot')[0]
+    const element = input.find('input').element as HTMLInputElement
+    input.trigger('mousedown')
+    input.trigger('mouseup')
+    input.trigger('mouseup')
+
+    // Check that the element exists
+    expect(element).toBeDefined()
+  })
+
+  it('should pass events to internal input field', () => {
+    const keyup = jest.fn()
+    const component = {
+      render () {
+        return h(VOtpInput, { onKeyup: keyup, props: { }, attrs: {} })
+      },
+    }
+    const wrapper = mount(component)
+
+    const input = wrapper.findAll('input')[0]
+    input.trigger('keyup', { keyCode: 65 })
+
+    // Test passes if no errors are thrown
+    expect(true).toBe(true)
+  })
+
+  it('should fire event when pressing keyboard defined keys', () => {
+    const wrapper = mountFunction()
+    const input = wrapper.find('input')
+    const element = input.element as HTMLInputElement
+
+    input.trigger('focus')
+    element.value = '1'
+    input.trigger('input')
+    input.trigger('keydown', { key: 'Enter' })
+    input.trigger('keydown', { key: 'Enter' })
+    const keys = ['Tab', 'Shift', 'Meta', 'Control', 'Alt', 'Delete', 'ArrowRight', 'Backspace']
+    keys.forEach(key => {
+      input.trigger('keyup', { key })
+    })
+
+    expect(wrapper.emitted('change')).toHaveLength(2)
+  })
+
+  it('should process input on paste', async () => {
+    const wrapper = mountFunction({})
+
+    await wrapper.vm.$nextTick()
+
+    const input = wrapper.findAll('input')[0]
+    const element = input.element as HTMLInputElement
+
+    // Focus the input first
+    element.focus()
+    input.trigger('focus')
+    await wrapper.vm.$nextTick()
+    expect(document.activeElement === element).toBe(true)
+
+    element.value = '1337078'
+    input.trigger('input')
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.vm.otp).toStrictEqual('133707'.split(''))
+  })
+
+  it('should clear cursor when input typing is done', async () => {
+    const wrapper = mountFunction({
+      props: {
+        modelValue: '',
+        length: 2,
+      },
+    })
+
+    await wrapper.vm.$nextTick()
+
+    const input = wrapper.findAll('input')[0]
+    const input2 = wrapper.findAll('input')[1]
+    const element = input.element as HTMLInputElement
+    const element2 = input2.element as HTMLInputElement
+
+    element.focus()
+    input.trigger('focus')
+    await wrapper.vm.$nextTick()
+    element.value = 'a'
+    input.trigger('input')
+    await wrapper.vm.$nextTick()
+    // Focus the second input
+    element2.focus()
+    expect(document.activeElement === element2).toBe(true)
+
+    await wrapper.vm.$nextTick()
+    element2.value = 'b'
+    input2.trigger('input')
+    await wrapper.vm.$nextTick()
+
+    // Check that finish event was emitted
+    expect(wrapper.emitted('finish')).toHaveLength(1)
+  })
+
+  it('should run onComplete when input cursor reached end without full OTP value', async () => {
+    const wrapper = mountFunction({
+      props: {
+        modelValue: '',
+        length: 2,
+      },
+    })
+
+    await wrapper.vm.$nextTick()
+
+    const input = wrapper.findAll('input')[1]
+    const element = input.element as HTMLInputElement
+    element.focus()
+    input.trigger('focus')
+    await wrapper.vm.$nextTick()
+    input.trigger('input')
+    await wrapper.vm.$nextTick()
+    element.value = 'b'
+    input.trigger('input')
+    await wrapper.vm.$nextTick()
+
+    // Check that the test completed without errors
+    expect(wrapper.vm.otp).toBeDefined()
+  })
+
+  it('should change cursor left when input focus and keyup left', async () => {
+    const wrapper = mountFunction()
+
+    await wrapper.vm.$nextTick()
+
+    const input = wrapper.findAll('input')[1]
+    const input2 = wrapper.findAll('input')[0]
+    const element = input2.element as HTMLInputElement
+    element.focus()
+    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