@aplus-frontend/antdv/es/input/OTP/OTPInput.js

Vue basic component library maintained based on ant-design-vue

import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import { createVNode as _createVNode } from "vue";
import _extends from "@babel/runtime/helpers/esm/extends";
import Input from '../Input';
import { computed, defineComponent, nextTick, shallowRef } from 'vue';
import inputProps from '../inputProps';
import omit from '../../_util/omit';
import raf from '../../_util/raf';
import '../../_util/EventInterface';
import '../../_util/statusUtils';
export default defineComponent({
  compatConfig: {
    MODE: 3
  },
  name: 'AOTPInput',
  inheritAttrs: false,
  props: _extends(_extends({}, inputProps()), {
    index: Number,
    value: {
      type: String,
      default: undefined
    },
    mask: {
      type: [Boolean, String],
      default: false
    },
    onChange: {
      type: Function
    },
    onActiveChange: Function,
    status: {
      type: String,
      default: undefined
    }
  }),
  setup(props, _ref) {
    let {
      attrs,
      expose
    } = _ref;
    const inputRef = shallowRef();
    const internalValue = computed(() => {
      const {
        value,
        mask
      } = props;
      return value && typeof mask === 'string' ? mask : value;
    });
    const syncSelection = () => {
      raf(() => {
        const inputEle = inputRef.value.input.input;
        if (document.activeElement === inputEle && inputEle) {
          inputEle.select();
        }
      });
    };
    const forceUpdate = () => {
      var _a, _b;
      (_b = (_a = inputRef.value.input) === null || _a === void 0 ? void 0 : _a.rootInputForceUpdate) === null || _b === void 0 ? void 0 : _b.call(_a);
    };
    // ======================= Event handlers =================
    const onInternalChange = e => {
      const value = e.target.value;
      props.onChange(props.index, value);
      // Edge:  If the value after the formatter is the same as the original value
      // the Input component will not be updated, and since the input is not controlled
      // it will result in an inconsistent UI with the value.
      nextTick(() => {
        forceUpdate();
      });
    };
    const focus = () => {
      var _a;
      (_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.focus();
      syncSelection();
    };
    const onInternalKeydown = event => {
      const {
        key,
        ctrlKey,
        metaKey
      } = event;
      if (key === 'ArrowLeft') {
        props.onActiveChange(props.index - 1);
      } else if (key === 'ArrowRight') {
        props.onActiveChange(props.index + 1);
      } else if (key === 'z' && (ctrlKey || metaKey)) {
        event.preventDefault();
      }
      syncSelection();
    };
    const onInternalKeyUp = _ref2 => {
      let {
        key
      } = _ref2;
      if (key === 'Backspace' && !props.value) {
        props.onActiveChange(props.index - 1);
      }
      syncSelection();
    };
    expose({
      focus
    });
    return () => _createVNode(Input, _objectSpread(_objectSpread(_objectSpread({
      "ref": inputRef
    }, attrs), omit(props, ['index', 'value', 'mask', 'onChange'])), {}, {
      "class": attrs.class,
      "value": internalValue.value,
      "onRawInput": onInternalChange,
      "onFocus": syncSelection,
      "onMousedown": syncSelection,
      "onMouseUp": syncSelection,
      "onKeydown": onInternalKeydown,
      "onKeyup": onInternalKeyUp,
      "type": props.mask === true ? 'password' : 'text'
    }), null);
  }
});