UNPKG

@aplus-frontend/antdv

Version:

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

168 lines (167 loc) 5.77 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 _inputProps = _interopRequireDefault(require("../inputProps")); var _FormItemContext = require("../../form/FormItemContext"); var _useConfigInject = _interopRequireDefault(require("../../config-provider/hooks/useConfigInject")); var _classNames = _interopRequireDefault(require("../../_util/classNames")); var _otp = _interopRequireDefault(require("../style/otp")); var _OTPInput = _interopRequireDefault(require("./OTPInput")); var _statusUtils = require("../../_util/statusUtils"); var _warning = _interopRequireDefault(require("../../_util/warning")); var _default = exports.default = (0, _vue.defineComponent)({ compatConfig: { MODE: 3 }, name: 'AOTP', inheritAttrs: false, props: (0, _extends2.default)((0, _extends2.default)({}, (0, _inputProps.default)()), { length: { type: Number, default: 6 }, onChange: { type: Function, default: undefined }, onInput: { type: Function, default: undefined }, formatter: { type: Function, default: undefined }, defaultValue: { type: String, default: undefined }, mask: { type: [String, Boolean], default: false }, status: { type: String, default: undefined } }), setup(props, _ref) { let { attrs } = _ref; const { prefixCls, direction, size } = (0, _useConfigInject.default)('otp', props); // Style const [wrapSSR, hashId] = (0, _otp.default)(prefixCls); // ==================== Provider ========================= const formItemInputContext = _FormItemContext.FormItemInputContext.useInject(); const mergedStatus = (0, _vue.computed)(() => (0, _statusUtils.getMergedStatus)(formItemInputContext.status, props.status)); const refs = (0, _vue.ref)([]); const strToArr = str => (str || '').split(''); // keep reactive const internalFormatter = txt => props.formatter ? props.formatter(txt) : txt; const valueCells = (0, _vue.ref)(strToArr(internalFormatter(props.defaultValue || ''))); (0, _vue.watchEffect)(() => { if (typeof props.value !== 'undefined' && props.value !== null) { valueCells.value = strToArr(String(props.value)); } }); const patchValue = (index, txt) => { let nextCells = valueCells.value.slice(); for (let i = 0; i < index; i += 1) { if (!nextCells[i]) { nextCells[i] = ''; } } if (txt.length <= 1) { nextCells[index] = txt; } else { nextCells = nextCells.slice(0, index).concat(strToArr(txt)); } nextCells = nextCells.slice(0, props.length); for (let i = nextCells.length - 1; i >= 0; i -= 1) { if (nextCells[i]) { break; } nextCells.pop(); } const formattedValue = internalFormatter(nextCells.map(c => c || ' ').join('')); nextCells = strToArr(formattedValue).map((c, i) => { if (c === ' ' && !nextCells[i]) { return nextCells[i]; } return c; }); return nextCells; }; // ======================= Change handlers ================= const onInputActiveChange = nextIndex => { var _a; (_a = refs.value[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus(); }; const onInputChange = (index, value) => { var _a; const nextValueCells = patchValue(index, value); const nextIndex = Math.min(index + value.length, props.length); if (nextIndex !== index) { (_a = refs.value[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus(); } if (props.onInput) { props.onInput(nextValueCells); } if (props.onChange && nextValueCells.length === props.length && nextValueCells.every(v => v) && nextValueCells.some((v, i) => v !== valueCells.value[i])) { props.onChange(nextValueCells.join('')); } valueCells.value = nextValueCells.slice(); }; return () => { const cls = (0, _classNames.default)(prefixCls.value, { [`${prefixCls}-sm`]: size.value === 'small', [`${prefixCls}-lg`]: size.value === 'large', [`${prefixCls.value}-rtl`]: direction.value === 'rtl' }, attrs.class, hashId.value); const { length, autofocus, disabled, mask } = props; const inputShardProps = { disabled, mask }; if (process.env.NODE_ENV !== 'production') { (0, _warning.default)(!(typeof mask === 'string' && mask.length > 1), 'Input.OTP', '`mask` prop should be a single character.'); } return wrapSSR((0, _vue.createVNode)("div", { "class": cls }, [Array.from({ length }).map((_, index) => { const key = `opt-${index}`; const singleValue = valueCells.value[index]; return (0, _vue.createVNode)(_OTPInput.default, (0, _objectSpread2.default)({ "ref": ref => refs.value[index] = ref, "key": key, "index": index, "class": `${prefixCls.value}-input`, "value": singleValue, "htmlSize": 1, "onChange": onInputChange, "status": mergedStatus.value, "onActiveChange": onInputActiveChange, "autofocus": index === 0 && autofocus }, inputShardProps), null); })])); }; } });