985 lines
32 KiB
JavaScript
985 lines
32 KiB
JavaScript
import {
|
|
handleNumber,
|
|
toFloatValueFixed
|
|
} from "./chunk-CYW3UC3Z.js";
|
|
import {
|
|
getEventTargetNode,
|
|
hasClass,
|
|
hasControlKey
|
|
} from "./chunk-PBZHTG65.js";
|
|
import {
|
|
eqEmptyValue,
|
|
getFuncText,
|
|
isEnableConf
|
|
} from "./chunk-REHJGRQO.js";
|
|
import {
|
|
getSlotVNs
|
|
} from "./chunk-LXH6LNL6.js";
|
|
import {
|
|
defineVxeComponent
|
|
} from "./chunk-ML6NAHIO.js";
|
|
import {
|
|
GLOBAL_EVENT_KEYS,
|
|
createEvent,
|
|
getConfig,
|
|
getI18n,
|
|
getIcon,
|
|
globalEvents,
|
|
renderEmptyElement,
|
|
require_xe_utils,
|
|
useSize
|
|
} from "./chunk-YJNUXQVJ.js";
|
|
import {
|
|
computed,
|
|
h,
|
|
inject,
|
|
nextTick,
|
|
onBeforeUnmount,
|
|
onMounted,
|
|
reactive,
|
|
ref,
|
|
watch
|
|
} from "./chunk-AAHVYXXY.js";
|
|
import {
|
|
__toESM
|
|
} from "./chunk-V4OQ3NZ2.js";
|
|
|
|
// ../node_modules/.pnpm/vxe-pc-ui@4.10.22_vue@3.5.24_typescript@5.9.3_/node_modules/vxe-pc-ui/es/number-input/src/number-input.js
|
|
var import_xe_utils = __toESM(require_xe_utils());
|
|
var number_input_default = defineVxeComponent({
|
|
name: "VxeNumberInput",
|
|
props: {
|
|
modelValue: [String, Number],
|
|
immediate: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
name: String,
|
|
type: {
|
|
type: String,
|
|
default: "number"
|
|
},
|
|
clearable: {
|
|
type: Boolean,
|
|
default: () => getConfig().numberInput.clearable
|
|
},
|
|
readonly: {
|
|
type: Boolean,
|
|
default: null
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: null
|
|
},
|
|
placeholder: String,
|
|
maxLength: {
|
|
type: [String, Number],
|
|
default: () => getConfig().numberInput.maxLength
|
|
},
|
|
autoComplete: {
|
|
type: String,
|
|
default: "off"
|
|
},
|
|
align: String,
|
|
form: String,
|
|
className: String,
|
|
size: {
|
|
type: String,
|
|
default: () => getConfig().numberInput.size || getConfig().size
|
|
},
|
|
// number、integer、float
|
|
min: {
|
|
type: [String, Number],
|
|
default: null
|
|
},
|
|
max: {
|
|
type: [String, Number],
|
|
default: null
|
|
},
|
|
step: [String, Number],
|
|
exponential: {
|
|
type: Boolean,
|
|
default: () => getConfig().numberInput.exponential
|
|
},
|
|
showCurrency: {
|
|
type: Boolean,
|
|
default: () => getConfig().numberInput.showCurrency
|
|
},
|
|
currencySymbol: {
|
|
type: String,
|
|
default: () => getConfig().numberInput.currencySymbol
|
|
},
|
|
controlConfig: Object,
|
|
// float
|
|
digits: {
|
|
type: [String, Number],
|
|
default: null
|
|
},
|
|
autoFill: {
|
|
type: Boolean,
|
|
default: () => getConfig().numberInput.autoFill
|
|
},
|
|
editable: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
plusIcon: String,
|
|
minusIcon: String,
|
|
prefixIcon: String,
|
|
suffixIcon: String,
|
|
// 已废弃
|
|
controls: {
|
|
type: Boolean,
|
|
default: null
|
|
},
|
|
// 已废弃
|
|
maxlength: [String, Number],
|
|
// 已废弃
|
|
autocomplete: String
|
|
},
|
|
emits: [
|
|
"update:modelValue",
|
|
"input",
|
|
"change",
|
|
"keydown",
|
|
"keyup",
|
|
"wheel",
|
|
"click",
|
|
"focus",
|
|
"blur",
|
|
"clear",
|
|
"lazy-change",
|
|
"plus-number",
|
|
"minus-number",
|
|
"prefix-click",
|
|
"suffix-click",
|
|
// 已废弃
|
|
"prev-number",
|
|
"next-number"
|
|
],
|
|
setup(props, context) {
|
|
const { slots, emit } = context;
|
|
const $xeForm = inject("$xeForm", null);
|
|
const formItemInfo = inject("xeFormItemInfo", null);
|
|
const xID = import_xe_utils.default.uniqueId();
|
|
const { computeSize } = useSize(props);
|
|
const reactData = reactive({
|
|
isFocus: false,
|
|
isActivated: false,
|
|
inputValue: props.modelValue
|
|
});
|
|
const internalData = {
|
|
// dnTimeout: undefined,
|
|
// ainTimeout: undefined,
|
|
// isMouseDown: undefined,
|
|
// isUM: undefined
|
|
};
|
|
const refElem = ref();
|
|
const refInputTarget = ref();
|
|
const refInputPanel = ref();
|
|
const computeFormReadonly = computed(() => {
|
|
const { readonly } = props;
|
|
if (readonly === null) {
|
|
if ($xeForm) {
|
|
return $xeForm.props.readonly;
|
|
}
|
|
return false;
|
|
}
|
|
return readonly;
|
|
});
|
|
const computeIsDisabled = computed(() => {
|
|
const { disabled } = props;
|
|
if (disabled === null) {
|
|
if ($xeForm) {
|
|
return $xeForm.props.disabled;
|
|
}
|
|
return false;
|
|
}
|
|
return disabled;
|
|
});
|
|
const computeDigitsValue = computed(() => {
|
|
const { type, digits } = props;
|
|
let defDigits = digits;
|
|
if (defDigits === null) {
|
|
defDigits = getConfig().numberInput.digits;
|
|
if (defDigits === null) {
|
|
if (type === "amount") {
|
|
defDigits = 2;
|
|
}
|
|
}
|
|
}
|
|
return import_xe_utils.default.toInteger(defDigits) || 1;
|
|
});
|
|
const computeControlOpts = computed(() => {
|
|
return Object.assign({}, getConfig().numberInput.controlConfig, props.controlConfig);
|
|
});
|
|
const computeDecimalsType = computed(() => {
|
|
const { type } = props;
|
|
return type === "float" || type === "amount";
|
|
});
|
|
const computeStepValue = computed(() => {
|
|
const { type } = props;
|
|
const digitsValue = computeDigitsValue.value;
|
|
const decimalsType = computeDecimalsType.value;
|
|
const step = props.step;
|
|
if (type === "integer") {
|
|
return import_xe_utils.default.toInteger(step) || 1;
|
|
} else if (decimalsType) {
|
|
return import_xe_utils.default.toNumber(step) || 1 / Math.pow(10, digitsValue);
|
|
}
|
|
return import_xe_utils.default.toNumber(step) || 1;
|
|
});
|
|
const computeIsClearable = computed(() => {
|
|
return props.clearable;
|
|
});
|
|
const computeInputReadonly = computed(() => {
|
|
const { editable } = props;
|
|
const formReadonly = computeFormReadonly.value;
|
|
return formReadonly || !editable;
|
|
});
|
|
const computeInpPlaceholder = computed(() => {
|
|
const { placeholder } = props;
|
|
if (placeholder) {
|
|
return getFuncText(placeholder);
|
|
}
|
|
const globalPlaceholder = getConfig().numberInput.placeholder;
|
|
if (globalPlaceholder) {
|
|
return getFuncText(globalPlaceholder);
|
|
}
|
|
return getI18n("vxe.base.pleaseInput");
|
|
});
|
|
const computeInpMaxLength = computed(() => {
|
|
const { maxLength, maxlength } = props;
|
|
return import_xe_utils.default.toNumber(maxLength || maxlength) || 16;
|
|
});
|
|
const computeInpImmediate = computed(() => {
|
|
const { immediate } = props;
|
|
return immediate;
|
|
});
|
|
const computeNumValue = computed(() => {
|
|
const { type } = props;
|
|
const { inputValue } = reactData;
|
|
return type === "integer" ? import_xe_utils.default.toInteger(handleNumber(inputValue)) : import_xe_utils.default.toNumber(handleNumber(inputValue));
|
|
});
|
|
const computeNumLabel = computed(() => {
|
|
const { type, showCurrency, currencySymbol, autoFill } = props;
|
|
const { inputValue } = reactData;
|
|
const digitsValue = computeDigitsValue.value;
|
|
if (type === "amount") {
|
|
const num = import_xe_utils.default.toNumber(inputValue);
|
|
let amountLabel = import_xe_utils.default.commafy(num, { digits: digitsValue });
|
|
if (!autoFill) {
|
|
const [iStr, dStr] = amountLabel.split(".");
|
|
if (dStr) {
|
|
const dRest = dStr.replace(/0+$/, "");
|
|
amountLabel = dRest ? [iStr, ".", dRest].join("") : iStr;
|
|
}
|
|
}
|
|
if (showCurrency) {
|
|
return `${currencySymbol || getI18n("vxe.numberInput.currencySymbol") || ""}${amountLabel}`;
|
|
}
|
|
return amountLabel;
|
|
}
|
|
return import_xe_utils.default.toString(inputValue);
|
|
});
|
|
const computeIsDisabledSubtractNumber = computed(() => {
|
|
const { min } = props;
|
|
const { inputValue } = reactData;
|
|
const numValue = computeNumValue.value;
|
|
if ((inputValue || inputValue === 0) && min !== null) {
|
|
return numValue <= import_xe_utils.default.toNumber(min);
|
|
}
|
|
return false;
|
|
});
|
|
const computeIsDisabledAddNumber = computed(() => {
|
|
const { max } = props;
|
|
const { inputValue } = reactData;
|
|
const numValue = computeNumValue.value;
|
|
if ((inputValue || inputValue === 0) && max !== null) {
|
|
return numValue >= import_xe_utils.default.toNumber(max);
|
|
}
|
|
return false;
|
|
});
|
|
const refMaps = {
|
|
refElem,
|
|
refInput: refInputTarget
|
|
};
|
|
const computeMaps = {
|
|
computeControlOpts
|
|
};
|
|
const $xeNumberInput = {
|
|
xID,
|
|
props,
|
|
context,
|
|
reactData,
|
|
internalData,
|
|
getRefMaps: () => refMaps,
|
|
getComputeMaps: () => computeMaps
|
|
};
|
|
let numberInputMethods = {};
|
|
const handleNumberString = (val) => {
|
|
if (import_xe_utils.default.eqNull(val)) {
|
|
return "";
|
|
}
|
|
return `${val}`;
|
|
};
|
|
const getNumberValue = (val) => {
|
|
const { exponential, autoFill } = props;
|
|
const inpMaxLength = computeInpMaxLength.value;
|
|
const digitsValue = computeDigitsValue.value;
|
|
const decimalsType = computeDecimalsType.value;
|
|
let restVal = "";
|
|
if (decimalsType) {
|
|
restVal = toFloatValueFixed(val, digitsValue);
|
|
if (!autoFill) {
|
|
restVal = handleNumberString(import_xe_utils.default.toNumber(restVal));
|
|
}
|
|
} else {
|
|
restVal = handleNumberString(val);
|
|
}
|
|
if (exponential && (val === restVal || handleNumberString(val).toLowerCase() === import_xe_utils.default.toNumber(restVal).toExponential())) {
|
|
return val;
|
|
}
|
|
return restVal.slice(0, inpMaxLength);
|
|
};
|
|
const triggerEvent = (evnt) => {
|
|
const { inputValue } = reactData;
|
|
numberInputMethods.dispatchEvent(evnt.type, { value: inputValue }, evnt);
|
|
};
|
|
const handleChange = (val, inputValue, evnt) => {
|
|
const value = eqEmptyValue(val) ? null : Number(val);
|
|
const isChange = value !== props.modelValue;
|
|
if (isChange) {
|
|
internalData.isUM = true;
|
|
emit("update:modelValue", value);
|
|
}
|
|
if (reactData.inputValue !== inputValue) {
|
|
nextTick(() => {
|
|
reactData.inputValue = inputValue || "";
|
|
});
|
|
}
|
|
numberInputMethods.dispatchEvent("input", { value }, evnt);
|
|
if (isChange) {
|
|
numberInputMethods.dispatchEvent("change", { value }, evnt);
|
|
if ($xeForm && formItemInfo) {
|
|
$xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
|
|
}
|
|
}
|
|
};
|
|
const emitInputEvent = (inputValue, evnt) => {
|
|
const inpImmediate = computeInpImmediate.value;
|
|
const value = eqEmptyValue(inputValue) ? null : import_xe_utils.default.toNumber(inputValue);
|
|
reactData.inputValue = inputValue;
|
|
if (inpImmediate) {
|
|
handleChange(value, inputValue, evnt);
|
|
} else {
|
|
numberInputMethods.dispatchEvent("input", { value }, evnt);
|
|
}
|
|
};
|
|
const inputEvent = (evnt) => {
|
|
const inputElem = evnt.target;
|
|
const value = inputElem.value;
|
|
emitInputEvent(value, evnt);
|
|
};
|
|
const changeEvent = (evnt) => {
|
|
const inpImmediate = computeInpImmediate.value;
|
|
if (!inpImmediate) {
|
|
triggerEvent(evnt);
|
|
}
|
|
$xeNumberInput.dispatchEvent("lazy-change", { value: reactData.inputValue }, evnt);
|
|
};
|
|
const focusEvent = (evnt) => {
|
|
const inputReadonly = computeInputReadonly.value;
|
|
if (!inputReadonly) {
|
|
const { inputValue } = reactData;
|
|
reactData.inputValue = eqEmptyValue(inputValue) ? "" : `${import_xe_utils.default.toNumber(inputValue)}`;
|
|
reactData.isFocus = true;
|
|
reactData.isActivated = true;
|
|
triggerEvent(evnt);
|
|
}
|
|
};
|
|
const clickPrefixEvent = (evnt) => {
|
|
const isDisabled = computeIsDisabled.value;
|
|
if (!isDisabled) {
|
|
const { inputValue } = reactData;
|
|
numberInputMethods.dispatchEvent("prefix-click", { value: inputValue }, evnt);
|
|
}
|
|
};
|
|
const clearValueEvent = (evnt, value) => {
|
|
focus();
|
|
handleChange(null, "", evnt);
|
|
numberInputMethods.dispatchEvent("clear", { value }, evnt);
|
|
$xeNumberInput.dispatchEvent("lazy-change", { value }, evnt);
|
|
};
|
|
const clickSuffixEvent = (evnt) => {
|
|
const isDisabled = computeIsDisabled.value;
|
|
if (!isDisabled) {
|
|
const { inputValue } = reactData;
|
|
numberInputMethods.dispatchEvent("suffix-click", { value: inputValue }, evnt);
|
|
}
|
|
};
|
|
const updateModel = (val) => {
|
|
const { autoFill } = props;
|
|
const { inputValue } = reactData;
|
|
const digitsValue = computeDigitsValue.value;
|
|
const decimalsType = computeDecimalsType.value;
|
|
if (eqEmptyValue(val)) {
|
|
reactData.inputValue = "";
|
|
} else {
|
|
let textValue = `${val}`;
|
|
if (decimalsType) {
|
|
textValue = toFloatValueFixed(val, digitsValue);
|
|
if (!autoFill) {
|
|
textValue = `${import_xe_utils.default.toNumber(textValue)}`;
|
|
}
|
|
}
|
|
if (textValue !== inputValue) {
|
|
reactData.inputValue = textValue;
|
|
}
|
|
}
|
|
};
|
|
const initValue = () => {
|
|
const { autoFill } = props;
|
|
const { inputValue } = reactData;
|
|
const digitsValue = computeDigitsValue.value;
|
|
const decimalsType = computeDecimalsType.value;
|
|
if (decimalsType) {
|
|
if (inputValue) {
|
|
let textValue = "";
|
|
let validValue = null;
|
|
if (inputValue) {
|
|
textValue = toFloatValueFixed(inputValue, digitsValue);
|
|
validValue = import_xe_utils.default.toNumber(textValue);
|
|
if (!autoFill) {
|
|
textValue = `${validValue}`;
|
|
}
|
|
}
|
|
if (inputValue !== validValue) {
|
|
handleChange(validValue, textValue, { type: "init" });
|
|
} else {
|
|
reactData.inputValue = textValue;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
const validMaxNum = (num) => {
|
|
return props.max === null || props.max === "" || import_xe_utils.default.toNumber(num) <= import_xe_utils.default.toNumber(props.max);
|
|
};
|
|
const validMinNum = (num) => {
|
|
return props.min === null || props.min === "" || import_xe_utils.default.toNumber(num) >= import_xe_utils.default.toNumber(props.min);
|
|
};
|
|
const afterCheckValue = () => {
|
|
const { type, min, max, exponential } = props;
|
|
const { inputValue } = reactData;
|
|
const inputReadonly = computeInputReadonly.value;
|
|
if (!inputReadonly) {
|
|
if (eqEmptyValue(inputValue)) {
|
|
let inpNumVal = null;
|
|
let inpValue = inputValue;
|
|
if (min || min === 0) {
|
|
inpNumVal = import_xe_utils.default.toNumber(min);
|
|
inpValue = `${inpNumVal}`;
|
|
}
|
|
handleChange(inpNumVal, `${inpValue || ""}`, { type: "check" });
|
|
return;
|
|
}
|
|
if (inputValue || (min || max)) {
|
|
let inpNumVal = type === "integer" ? import_xe_utils.default.toInteger(handleNumber(inputValue)) : import_xe_utils.default.toNumber(handleNumber(inputValue));
|
|
if (!validMinNum(inpNumVal)) {
|
|
inpNumVal = min;
|
|
} else if (!validMaxNum(inpNumVal)) {
|
|
inpNumVal = max;
|
|
}
|
|
if (exponential) {
|
|
const inpStringVal = handleNumberString(inputValue).toLowerCase();
|
|
if (inpStringVal === import_xe_utils.default.toNumber(inpNumVal).toExponential()) {
|
|
inpNumVal = inpStringVal;
|
|
}
|
|
}
|
|
const inpValue = getNumberValue(inpNumVal);
|
|
handleChange(eqEmptyValue(inpValue) ? null : Number(inpValue), inpValue, { type: "check" });
|
|
}
|
|
}
|
|
};
|
|
const blurEvent = (evnt) => {
|
|
const { inputValue } = reactData;
|
|
const inpImmediate = computeInpImmediate.value;
|
|
const value = inputValue ? Number(inputValue) : null;
|
|
if (!inpImmediate) {
|
|
handleChange(value, handleNumberString(inputValue), evnt);
|
|
}
|
|
afterCheckValue();
|
|
reactData.isFocus = false;
|
|
reactData.isActivated = false;
|
|
numberInputMethods.dispatchEvent("blur", { value }, evnt);
|
|
if ($xeForm && formItemInfo) {
|
|
$xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
|
|
}
|
|
};
|
|
const numberChange = (isPlus, evnt) => {
|
|
const { min, max, type } = props;
|
|
const { inputValue } = reactData;
|
|
const stepValue = computeStepValue.value;
|
|
const numValue = type === "integer" ? import_xe_utils.default.toInteger(handleNumber(inputValue)) : import_xe_utils.default.toNumber(handleNumber(inputValue));
|
|
const newValue = isPlus ? import_xe_utils.default.add(numValue, stepValue) : import_xe_utils.default.subtract(numValue, stepValue);
|
|
let restNum;
|
|
if (!validMinNum(newValue)) {
|
|
restNum = min;
|
|
} else if (!validMaxNum(newValue)) {
|
|
restNum = max;
|
|
} else {
|
|
restNum = newValue;
|
|
}
|
|
emitInputEvent(getNumberValue(restNum), evnt);
|
|
};
|
|
const numberPlusEvent = (evnt) => {
|
|
const isDisabled = computeIsDisabled.value;
|
|
const formReadonly = computeFormReadonly.value;
|
|
const isDisabledAddNumber = computeIsDisabledAddNumber.value;
|
|
if (!isDisabled && !formReadonly && !isDisabledAddNumber) {
|
|
numberChange(true, evnt);
|
|
}
|
|
reactData.isActivated = true;
|
|
numberInputMethods.dispatchEvent("plus-number", { value: reactData.inputValue }, evnt);
|
|
$xeNumberInput.dispatchEvent("lazy-change", { value: reactData.inputValue }, evnt);
|
|
numberInputMethods.dispatchEvent("next-number", { value: reactData.inputValue }, evnt);
|
|
};
|
|
const numberMinusEvent = (evnt) => {
|
|
const isDisabled = computeIsDisabled.value;
|
|
const formReadonly = computeFormReadonly.value;
|
|
const isDisabledSubtractNumber = computeIsDisabledSubtractNumber.value;
|
|
if (!isDisabled && !formReadonly && !isDisabledSubtractNumber) {
|
|
numberChange(false, evnt);
|
|
}
|
|
reactData.isActivated = true;
|
|
numberInputMethods.dispatchEvent("minus-number", { value: reactData.inputValue }, evnt);
|
|
$xeNumberInput.dispatchEvent("lazy-change", { value: reactData.inputValue }, evnt);
|
|
numberInputMethods.dispatchEvent("prev-number", { value: reactData.inputValue }, evnt);
|
|
};
|
|
const numberKeydownEvent = (evnt) => {
|
|
const isUpArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_UP);
|
|
const isDwArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_DOWN);
|
|
if (isUpArrow || isDwArrow) {
|
|
evnt.preventDefault();
|
|
if (isUpArrow) {
|
|
numberPlusEvent(evnt);
|
|
} else {
|
|
numberMinusEvent(evnt);
|
|
}
|
|
}
|
|
};
|
|
const keydownEvent = (evnt) => {
|
|
const { type, exponential, controls } = props;
|
|
const controlOpts = computeControlOpts.value;
|
|
const { isArrow } = controlOpts;
|
|
const inputReadonly = computeInputReadonly.value;
|
|
const isControlKey = hasControlKey(evnt);
|
|
const isShiftKey = evnt.shiftKey;
|
|
const isAltKey = evnt.altKey;
|
|
const keyCode = evnt.keyCode;
|
|
const isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE);
|
|
const isUpArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_UP);
|
|
const isDwArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_DOWN);
|
|
if (!isControlKey && !isShiftKey && !isAltKey) {
|
|
if (globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.SPACEBAR) || type === "integer" && keyCode === 110 || (!exponential || keyCode !== 69) && (keyCode >= 65 && keyCode <= 90) || keyCode >= 186 && keyCode <= 188 || keyCode >= 191) {
|
|
evnt.preventDefault();
|
|
}
|
|
}
|
|
if (isEsc) {
|
|
afterCheckValue();
|
|
} else if (isUpArrow || isDwArrow) {
|
|
if (isEnableConf(controlOpts) && (controls === false ? controls : isArrow) && !inputReadonly) {
|
|
numberKeydownEvent(evnt);
|
|
}
|
|
}
|
|
triggerEvent(evnt);
|
|
};
|
|
const keyupEvent = (evnt) => {
|
|
triggerEvent(evnt);
|
|
};
|
|
const stopDown = () => {
|
|
const { dnTimeout } = internalData;
|
|
if (dnTimeout) {
|
|
clearTimeout(dnTimeout);
|
|
internalData.dnTimeout = void 0;
|
|
}
|
|
};
|
|
const stopAutoIncrement = () => {
|
|
const { ainTimeout } = internalData;
|
|
if (ainTimeout) {
|
|
clearTimeout(ainTimeout);
|
|
internalData.ainTimeout = void 0;
|
|
}
|
|
};
|
|
const numberDownMinusEvent = (evnt) => {
|
|
numberStopAll();
|
|
internalData.ainTimeout = setTimeout(() => {
|
|
numberMinusEvent(evnt);
|
|
numberDownMinusEvent(evnt);
|
|
}, 60);
|
|
};
|
|
const numberDownPlusEvent = (evnt) => {
|
|
numberStopAll();
|
|
internalData.ainTimeout = setTimeout(() => {
|
|
numberPlusEvent(evnt);
|
|
numberDownPlusEvent(evnt);
|
|
}, 60);
|
|
};
|
|
const numberStopAll = () => {
|
|
stopDown();
|
|
stopAutoIncrement();
|
|
};
|
|
const numberClickEvent = (evnt) => {
|
|
if (internalData.isMouseDown) {
|
|
internalData.isMouseDown = false;
|
|
} else {
|
|
numberStopAll();
|
|
const isAddNumber = hasClass(evnt.currentTarget, "is--plus");
|
|
if (isAddNumber) {
|
|
numberPlusEvent(evnt);
|
|
} else {
|
|
numberMinusEvent(evnt);
|
|
}
|
|
}
|
|
};
|
|
const numberMousedownEvent = (evnt) => {
|
|
numberStopAll();
|
|
internalData.isMouseDown = true;
|
|
if (evnt.button === 0) {
|
|
const isAddNumber = hasClass(evnt.currentTarget, "is--plus");
|
|
if (isAddNumber) {
|
|
numberPlusEvent(evnt);
|
|
} else {
|
|
numberMinusEvent(evnt);
|
|
}
|
|
internalData.dnTimeout = setTimeout(() => {
|
|
if (isAddNumber) {
|
|
numberDownPlusEvent(evnt);
|
|
} else {
|
|
numberDownMinusEvent(evnt);
|
|
}
|
|
}, 500);
|
|
}
|
|
};
|
|
const wheelEvent = (evnt) => {
|
|
const { controls } = props;
|
|
const controlOpts = computeControlOpts.value;
|
|
const { isWheel } = controlOpts;
|
|
const inputReadonly = computeInputReadonly.value;
|
|
if (isEnableConf(controlOpts) && (controls === false ? controls : isWheel) && !inputReadonly) {
|
|
if (reactData.isActivated) {
|
|
evnt.stopPropagation();
|
|
evnt.preventDefault();
|
|
const delta = evnt.deltaY;
|
|
if (delta > 0) {
|
|
numberMinusEvent(evnt);
|
|
} else if (delta < 0) {
|
|
numberPlusEvent(evnt);
|
|
}
|
|
}
|
|
}
|
|
triggerEvent(evnt);
|
|
};
|
|
const clickEvent = (evnt) => {
|
|
triggerEvent(evnt);
|
|
};
|
|
const handleGlobalMousedownEvent = (evnt) => {
|
|
const { isActivated } = reactData;
|
|
const el = refElem.value;
|
|
const panelElem = refInputPanel.value;
|
|
const isDisabled = computeIsDisabled.value;
|
|
const inputReadonly = computeInputReadonly.value;
|
|
const inpImmediate = computeInpImmediate.value;
|
|
if (!isDisabled && !inputReadonly && isActivated) {
|
|
reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelElem).flag;
|
|
if (!reactData.isActivated) {
|
|
if (!inpImmediate) {
|
|
const { inputValue } = reactData;
|
|
const value = inputValue ? Number(inputValue) : null;
|
|
handleChange(value, handleNumberString(inputValue), evnt);
|
|
}
|
|
afterCheckValue();
|
|
}
|
|
}
|
|
};
|
|
const handleGlobalKeydownEvent = (evnt) => {
|
|
const { clearable } = props;
|
|
const isDisabled = computeIsDisabled.value;
|
|
const inputReadonly = computeInputReadonly.value;
|
|
if (!isDisabled && !inputReadonly) {
|
|
const isTab = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.TAB);
|
|
const isDel = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.DELETE);
|
|
let isActivated = reactData.isActivated;
|
|
if (isTab) {
|
|
if (isActivated) {
|
|
afterCheckValue();
|
|
}
|
|
isActivated = false;
|
|
reactData.isActivated = isActivated;
|
|
}
|
|
if (isDel && clearable) {
|
|
if (isActivated) {
|
|
clearValueEvent(evnt, null);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
const handleGlobalBlurEvent = () => {
|
|
const { isActivated } = reactData;
|
|
if (isActivated) {
|
|
afterCheckValue();
|
|
}
|
|
};
|
|
const dispatchEvent = (type, params, evnt) => {
|
|
emit(type, createEvent(evnt, { $numberInput: $xeNumberInput }, params));
|
|
};
|
|
numberInputMethods = {
|
|
dispatchEvent,
|
|
focus() {
|
|
const inputReadonly = computeInputReadonly.value;
|
|
if (!inputReadonly) {
|
|
const inputElem = refInputTarget.value;
|
|
reactData.isActivated = true;
|
|
inputElem.focus();
|
|
}
|
|
return nextTick();
|
|
},
|
|
blur() {
|
|
const inputElem = refInputTarget.value;
|
|
inputElem.blur();
|
|
reactData.isActivated = false;
|
|
return nextTick();
|
|
},
|
|
select() {
|
|
const inputElem = refInputTarget.value;
|
|
inputElem.select();
|
|
reactData.isActivated = false;
|
|
return nextTick();
|
|
}
|
|
};
|
|
Object.assign($xeNumberInput, numberInputMethods);
|
|
const renderPrefixIcon = () => {
|
|
const { prefixIcon } = props;
|
|
const prefixSlot = slots.prefix;
|
|
return prefixSlot || prefixIcon ? h("div", {
|
|
class: "vxe-number-input--prefix",
|
|
onClick: clickPrefixEvent
|
|
}, [
|
|
h("div", {
|
|
class: "vxe-number-input--prefix-icon"
|
|
}, prefixSlot ? getSlotVNs(prefixSlot({})) : [
|
|
h("i", {
|
|
class: prefixIcon
|
|
})
|
|
])
|
|
]) : renderEmptyElement($xeNumberInput);
|
|
};
|
|
const renderSuffixIcon = () => {
|
|
const { suffixIcon } = props;
|
|
const { inputValue } = reactData;
|
|
const suffixSlot = slots.suffix;
|
|
const isDisabled = computeIsDisabled.value;
|
|
const isClearable = computeIsClearable.value;
|
|
return h("div", {
|
|
class: ["vxe-number-input--suffix", {
|
|
"is--clear": isClearable && !isDisabled && !(inputValue === "" || import_xe_utils.default.eqNull(inputValue))
|
|
}]
|
|
}, [
|
|
isClearable ? h("div", {
|
|
class: "vxe-number-input--clear-icon",
|
|
onClick: clearValueEvent
|
|
}, [
|
|
h("i", {
|
|
class: getIcon().INPUT_CLEAR
|
|
})
|
|
]) : renderEmptyElement($xeNumberInput),
|
|
suffixSlot || suffixIcon ? h("div", {
|
|
class: "vxe-number-input--suffix-icon",
|
|
onClick: clickSuffixEvent
|
|
}, suffixSlot ? getSlotVNs(suffixSlot({})) : [
|
|
h("i", {
|
|
class: suffixIcon
|
|
})
|
|
]) : renderEmptyElement($xeNumberInput)
|
|
]);
|
|
};
|
|
const renderInput = () => {
|
|
const { type, name, autocomplete, autoComplete } = props;
|
|
const { inputValue, isFocus } = reactData;
|
|
const isDisabled = computeIsDisabled.value;
|
|
const numLabel = computeNumLabel.value;
|
|
const inputReadonly = computeInputReadonly.value;
|
|
const inpMaxLength = computeInpMaxLength.value;
|
|
const inpPlaceholder = computeInpPlaceholder.value;
|
|
return h("div", {
|
|
key: "ni",
|
|
class: "vxe-number-input--input-wrapper"
|
|
}, [
|
|
renderPrefixIcon(),
|
|
h("div", {
|
|
class: "vxe-number-input--input-inner"
|
|
}, [
|
|
h("input", {
|
|
ref: refInputTarget,
|
|
class: "vxe-number-input--input",
|
|
value: !isFocus && type === "amount" ? numLabel : inputValue,
|
|
name,
|
|
type: "text",
|
|
placeholder: inpPlaceholder,
|
|
maxlength: inpMaxLength,
|
|
readonly: inputReadonly,
|
|
disabled: isDisabled,
|
|
autocomplete: autoComplete || autocomplete,
|
|
onKeydown: keydownEvent,
|
|
onKeyup: keyupEvent,
|
|
onClick: clickEvent,
|
|
onInput: inputEvent,
|
|
onChange: changeEvent,
|
|
onFocus: focusEvent,
|
|
onBlur: blurEvent
|
|
})
|
|
]),
|
|
renderSuffixIcon()
|
|
]);
|
|
};
|
|
const renderMinusBtn = () => {
|
|
const { minusIcon } = props;
|
|
const isDisabledSubtractNumber = computeIsDisabledSubtractNumber.value;
|
|
return h("button", {
|
|
key: "prev",
|
|
class: ["vxe-number-input--minus-btn is--minus", {
|
|
"is--disabled": isDisabledSubtractNumber
|
|
}],
|
|
type: "button",
|
|
onClick: numberClickEvent,
|
|
onMousedown: numberMousedownEvent,
|
|
onMouseup: numberStopAll,
|
|
onMouseleave: numberStopAll
|
|
}, [
|
|
h("i", {
|
|
class: minusIcon || getIcon().NUMBER_INPUT_MINUS_NUM
|
|
})
|
|
]);
|
|
};
|
|
const renderPlusBtn = () => {
|
|
const { plusIcon } = props;
|
|
const isDisabledAddNumber = computeIsDisabledAddNumber.value;
|
|
return h("button", {
|
|
key: "next",
|
|
class: ["vxe-number-input--plus-btn is--plus", {
|
|
"is--disabled": isDisabledAddNumber
|
|
}],
|
|
type: "button",
|
|
onClick: numberClickEvent,
|
|
onMousedown: numberMousedownEvent,
|
|
onMouseup: numberStopAll,
|
|
onMouseleave: numberStopAll
|
|
}, [
|
|
h("i", {
|
|
class: plusIcon || getIcon().NUMBER_INPUT_PLUS_NUM
|
|
})
|
|
]);
|
|
};
|
|
const renderSideControl = () => {
|
|
return h("div", {
|
|
key: "cplr",
|
|
class: "vxe-number-input--side-control"
|
|
}, [
|
|
renderPlusBtn(),
|
|
renderMinusBtn()
|
|
]);
|
|
};
|
|
const renderVN = () => {
|
|
const { className, controls, type, align, prefixIcon, suffixIcon } = props;
|
|
const { inputValue, isActivated } = reactData;
|
|
const vSize = computeSize.value;
|
|
const controlOpts = computeControlOpts.value;
|
|
const { layout, showButton } = controlOpts;
|
|
const isDisabled = computeIsDisabled.value;
|
|
const formReadonly = computeFormReadonly.value;
|
|
const numLabel = computeNumLabel.value;
|
|
const prefixSlot = slots.prefix;
|
|
const suffixSlot = slots.suffix;
|
|
if (formReadonly) {
|
|
return h("div", {
|
|
ref: refElem,
|
|
class: ["vxe-number-input--readonly", `type--${type}`, className]
|
|
}, numLabel);
|
|
}
|
|
const inputReadonly = computeInputReadonly.value;
|
|
const isClearable = computeIsClearable.value;
|
|
const isControls = isEnableConf(controlOpts) && (controls === false ? controls : showButton);
|
|
return h("div", {
|
|
ref: refElem,
|
|
class: ["vxe-number-input", `type--${type}`, `ctl--${layout === "right" || layout === "left" ? layout : "default"}`, className, {
|
|
[`size--${vSize}`]: vSize,
|
|
[`is--${align}`]: align,
|
|
"is--controls": isControls && !inputReadonly,
|
|
"is--prefix": !!prefixSlot || prefixIcon,
|
|
"is--suffix": !!suffixSlot || suffixIcon,
|
|
"is--disabled": isDisabled,
|
|
"is--active": isActivated,
|
|
"show--clear": isClearable && !isDisabled && !(inputValue === "" || import_xe_utils.default.eqNull(inputValue))
|
|
}],
|
|
spellcheck: false
|
|
}, isControls ? layout === "right" ? [
|
|
renderInput(),
|
|
renderSideControl()
|
|
] : layout === "left" ? [
|
|
renderSideControl(),
|
|
renderInput()
|
|
] : [
|
|
renderMinusBtn(),
|
|
renderInput(),
|
|
renderPlusBtn()
|
|
] : [
|
|
renderInput()
|
|
]);
|
|
};
|
|
$xeNumberInput.renderVN = renderVN;
|
|
watch(() => props.modelValue, (val) => {
|
|
if (!internalData.isUM) {
|
|
updateModel(val);
|
|
}
|
|
internalData.isUM = false;
|
|
});
|
|
watch(() => props.type, () => {
|
|
Object.assign(reactData, {
|
|
inputValue: props.modelValue
|
|
});
|
|
initValue();
|
|
});
|
|
onMounted(() => {
|
|
const targetElem = refInputTarget.value;
|
|
if (targetElem) {
|
|
targetElem.addEventListener("wheel", wheelEvent, { passive: false });
|
|
}
|
|
globalEvents.on($xeNumberInput, "mousedown", handleGlobalMousedownEvent);
|
|
globalEvents.on($xeNumberInput, "keydown", handleGlobalKeydownEvent);
|
|
globalEvents.on($xeNumberInput, "blur", handleGlobalBlurEvent);
|
|
});
|
|
onBeforeUnmount(() => {
|
|
reactData.isFocus = false;
|
|
numberStopAll();
|
|
afterCheckValue();
|
|
const targetElem = refInputTarget.value;
|
|
if (targetElem) {
|
|
targetElem.removeEventListener("wheel", wheelEvent);
|
|
}
|
|
globalEvents.off($xeNumberInput, "mousedown");
|
|
globalEvents.off($xeNumberInput, "keydown");
|
|
globalEvents.off($xeNumberInput, "blur");
|
|
});
|
|
initValue();
|
|
return $xeNumberInput;
|
|
},
|
|
render() {
|
|
return this.renderVN();
|
|
}
|
|
});
|
|
|
|
export {
|
|
number_input_default
|
|
};
|
|
//# sourceMappingURL=chunk-PE3O5T24.js.map
|