UNPKG

@aplus-frontend/antdv

Version:

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

124 lines (123 loc) 3.9 kB
"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); Object.defineProperty(exports, "__esModule", { value: true }); exports.default = void 0; var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2")); var _vue = require("vue"); var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); var _Input = _interopRequireDefault(require("../Input")); var _inputProps = _interopRequireDefault(require("../inputProps")); var _omit = _interopRequireDefault(require("../../_util/omit")); var _raf = _interopRequireDefault(require("../../_util/raf")); require("../../_util/EventInterface"); require("../../_util/statusUtils"); var _default = exports.default = (0, _vue.defineComponent)({ compatConfig: { MODE: 3 }, name: 'AOTPInput', inheritAttrs: false, props: (0, _extends2.default)((0, _extends2.default)({}, (0, _inputProps.default)()), { 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 = (0, _vue.shallowRef)(); const internalValue = (0, _vue.computed)(() => { const { value, mask } = props; return value && typeof mask === 'string' ? mask : value; }); const syncSelection = () => { (0, _raf.default)(() => { 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. (0, _vue.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 () => (0, _vue.createVNode)(_Input.default, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({ "ref": inputRef }, attrs), (0, _omit.default)(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); } });