@aplus-frontend/antdv
Version:
Vue basic component library maintained based on ant-design-vue
124 lines (123 loc) • 3.9 kB
JavaScript
;
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);
}
});