xdesign-vue-next
Version:
XDesign Component for vue-next
308 lines (304 loc) • 10.8 kB
JavaScript
/**
* xdesign v1.0.6
* (c) 2023 xdesign
* @license MIT
*/
import { _ as _slicedToArray } from '../_chunks/dep-32d4c595.mjs';
import { toRefs, ref, computed, nextTick, inject, watch } from 'vue';
import { FormItemInjectionKey } from '../form/const.mjs';
import useVModel from '../hooks/useVModel.mjs';
import { useFormDisabled } from '../form/hooks.mjs';
import useLengthLimit from './useLengthLimit.mjs';
import '../_chunks/dep-89b966f4.mjs';
import '../hooks/index.mjs';
import '../hooks/icon.mjs';
import '../_chunks/dep-1cc1c24f.mjs';
import '../_chunks/dep-10a947a6.mjs';
import '../_chunks/dep-b75d8d74.mjs';
import '../_chunks/dep-82805301.mjs';
import '../_chunks/dep-6ad18815.mjs';
import '../hooks/slot.mjs';
import '../_chunks/dep-a95026f2.mjs';
import '../hooks/tnode.mjs';
import '../_chunks/dep-a628549d.mjs';
import '../_chunks/dep-4903a8a8.mjs';
import '../_chunks/dep-068e912d.mjs';
import '../_chunks/dep-7dcfa37a.mjs';
import '../_chunks/dep-addc2a84.mjs';
import '../_chunks/dep-f4eba04c.mjs';
import '../_chunks/dep-735bcd0d.mjs';
import '../_chunks/dep-765678ef.mjs';
import '../_chunks/dep-8db27830.mjs';
import '../_chunks/dep-ae4bffa5.mjs';
import '../utils/render-tnode.mjs';
import '../_chunks/dep-9d7ebc32.mjs';
import '../_chunks/dep-69963a8c.mjs';
import '../_chunks/dep-6e7b37b8.mjs';
import '../_chunks/dep-e1ab85c5.mjs';
import '../_chunks/dep-5f0e0453.mjs';
import '../_chunks/dep-db381ece.mjs';
import '../_chunks/dep-5755c21c.mjs';
import '../_chunks/dep-8d1c9a23.mjs';
import '../_chunks/dep-dafada74.mjs';
import '../_chunks/dep-0e832fc7.mjs';
import '../_chunks/dep-11fa9c2c.mjs';
import '../hooks/useConfig.mjs';
import '../config-provider/useConfig.mjs';
import '../_chunks/dep-91ac8f71.mjs';
import '../_chunks/dep-c4737535.mjs';
import '../_chunks/dep-81c83986.mjs';
import '../_chunks/dep-6aa0223b.mjs';
import '../_chunks/dep-7f239c43.mjs';
import '../_chunks/dep-6f04869e.mjs';
import '../_chunks/dep-d32fbbb3.mjs';
import '../_chunks/dep-71f84cf2.mjs';
import '../_chunks/dep-03412fab.mjs';
import '../_chunks/dep-205ff58d.mjs';
import '../_chunks/dep-b09f48fa.mjs';
import '../_chunks/dep-26bf361a.mjs';
import '../_chunks/dep-3ec3335a.mjs';
import '../_chunks/dep-ed4e7c50.mjs';
import '../_chunks/dep-a666b9ad.mjs';
import '../_common/js/global-config/default-config.mjs';
import '../_common/js/global-config/locale/en_US.mjs';
import '../config-provider/type.mjs';
import '../hooks/useCommonClassName.mjs';
import '../hooks/useDefaultValue.mjs';
import '../hooks/useDestroyOnClose.mjs';
import '../hooks/useKeepAnimation.mjs';
import '../hooks/useRipple.mjs';
import '../utils/set-style.mjs';
import '../hooks/useVirtualScroll.mjs';
import '../_chunks/dep-f9e836af.mjs';
import '../hooks/useImagePreviewUrl.mjs';
import '../_common/js/upload/utils.mjs';
import '../_common/js/log/log.mjs';
import '../_common/js/log/index.mjs';
import '../_common/js/utils/helper.mjs';
import '../_chunks/dep-5bec687c.mjs';
import '../_chunks/dep-53e379cd.mjs';
import '../_chunks/dep-5a2ce53e.mjs';
import '../_chunks/dep-1bae6a97.mjs';
import '../_chunks/dep-23f91684.mjs';
function useInput(props, expose) {
var _toRefs = toRefs(props),
value = _toRefs.value,
modelValue = _toRefs.modelValue;
var inputValue = ref();
var isComposition = ref(false);
var compositionValue = ref();
var clearIconRef = ref(null);
var innerClickElement = ref();
var disabled = useFormDisabled();
var _useVModel = useVModel(value, modelValue, props.defaultValue, props.onChange),
_useVModel2 = _slicedToArray(_useVModel, 2),
innerValue = _useVModel2[0],
setInnerValue = _useVModel2[1];
var isHover = ref(false);
var focused = ref(false);
var renderType = ref(props.type);
var inputRef = ref(null);
var limitParams = computed(function () {
return {
value: [void 0, null].includes(innerValue.value) ? void 0 : String(innerValue.value),
status: props.status,
maxlength: props.maxlength,
maxcharacter: props.maxcharacter,
allowInputOverMax: props.allowInputOverMax,
onValidate: props.onValidate
};
});
var _useLengthLimit = useLengthLimit(limitParams),
limitNumber = _useLengthLimit.limitNumber,
getValueByLimitNumber = _useLengthLimit.getValueByLimitNumber,
tStatus = _useLengthLimit.tStatus;
var showClear = computed(function () {
return (innerValue.value && !disabled.value && props.clearable && !props.readonly || props.showClearIconOnEmpty) && isHover.value;
});
var focus = function focus() {
var _inputRef$value;
return (_inputRef$value = inputRef.value) === null || _inputRef$value === void 0 ? void 0 : _inputRef$value.focus();
};
var blur = function blur() {
var _inputRef$value2;
return (_inputRef$value2 = inputRef.value) === null || _inputRef$value2 === void 0 ? void 0 : _inputRef$value2.blur();
};
var emitFocus = function emitFocus(e) {
var _props$onFocus;
inputValue.value = innerValue.value;
if (props.disabled) return;
focused.value = true;
(_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 ? void 0 : _props$onFocus.call(props, innerValue.value, {
e: e
});
};
var emitClear = function emitClear(_ref) {
var _props$onClear;
var e = _ref.e;
setInnerValue("", {
e: e,
trigger: "clear"
});
(_props$onClear = props.onClear) === null || _props$onClear === void 0 ? void 0 : _props$onClear.call(props, {
e: e
});
};
var onClearIconMousedown = function onClearIconMousedown(e) {
innerClickElement.value = e.target;
};
var emitPassword = function emitPassword() {
var toggleType = renderType.value === "password" ? "text" : "password";
renderType.value = toggleType;
};
var setInputElValue = function setInputElValue() {
var v = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
var inputEl = inputRef.value;
if (!inputEl) return;
var sV = String(v);
if (!inputEl.value) {
return;
}
if (inputEl.value !== sV) {
inputEl.value = sV;
}
};
var inputValueChangeHandle = function inputValueChangeHandle(e) {
var _innerValue$value;
var target = e.target;
var val = target.value;
if (props.type !== "number" && val.length > ((_innerValue$value = innerValue.value) === null || _innerValue$value === void 0 ? void 0 : _innerValue$value.length)) {
val = getValueByLimitNumber(val);
}
setInnerValue(val, {
e: e
});
nextTick(function () {
setInputElValue(innerValue.value);
});
};
var handleInput = function handleInput(e) {
var checkInputType = e.inputType && e.inputType === "insertCompositionText";
var val = e.currentTarget.value;
if (checkInputType || isComposition.value) {
compositionValue.value = val;
return;
}
inputValueChangeHandle(e);
};
var isClearIcon = function isClearIcon() {
var _clearIconRef$value;
var tmp = innerClickElement.value;
if (!tmp || !tmp.tagName || !((_clearIconRef$value = clearIconRef.value) !== null && _clearIconRef$value !== void 0 && _clearIconRef$value.$el) || !["path", "svg"].includes(tmp.tagName)) return false;
while (tmp) {
var _clearIconRef$value2;
if (((_clearIconRef$value2 = clearIconRef.value) === null || _clearIconRef$value2 === void 0 ? void 0 : _clearIconRef$value2.$el) === tmp) {
return true;
}
tmp = tmp.parentNode;
}
return false;
};
var formItem = inject(FormItemInjectionKey, void 0);
var formatAndEmitBlur = function formatAndEmitBlur(e) {
if (props.format) {
inputValue.value = props.format(innerValue.value);
}
focused.value = false;
if (!isClearIcon() && props.allowTriggerBlur) {
var _props$onBlur;
(_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 ? void 0 : _props$onBlur.call(props, innerValue.value, {
e: e
});
formItem === null || formItem === void 0 ? void 0 : formItem.handleBlur();
}
};
var onHandleCompositionend = function onHandleCompositionend(e) {
var _props$onCompositione;
isComposition.value = false;
compositionValue.value = "";
inputValueChangeHandle(e);
(_props$onCompositione = props.onCompositionend) === null || _props$onCompositione === void 0 ? void 0 : _props$onCompositione.call(props, innerValue.value, {
e: e
});
};
var onHandleCompositionstart = function onHandleCompositionstart(e) {
var _props$onCompositions;
isComposition.value = true;
var value2 = e.currentTarget.value;
compositionValue.value = value2;
(_props$onCompositions = props.onCompositionstart) === null || _props$onCompositions === void 0 ? void 0 : _props$onCompositions.call(props, innerValue.value, {
e: e
});
};
var onRootClick = function onRootClick(e) {
var _inputRef$value3, _props$onClick;
(_inputRef$value3 = inputRef.value) === null || _inputRef$value3 === void 0 ? void 0 : _inputRef$value3.focus();
(_props$onClick = props.onClick) === null || _props$onClick === void 0 ? void 0 : _props$onClick.call(props, {
e: e
});
};
watch(function () {
return props.autofocus;
}, function (value2) {
if (value2 === true) {
nextTick(function () {
var _inputRef$value4;
(_inputRef$value4 = inputRef.value) === null || _inputRef$value4 === void 0 ? void 0 : _inputRef$value4.focus();
});
}
}, {
immediate: true
});
watch(innerValue, function (val, oldVal) {
if (oldVal === void 0 && props.format) {
inputValue.value = props.format(val);
} else {
inputValue.value = val;
}
var newVal = getValueByLimitNumber(val);
if (newVal !== val && props.type !== "number") {
setInnerValue(newVal, {
trigger: "initial"
});
}
}, {
immediate: true
});
watch(function () {
return props.type;
}, function (v) {
renderType.value = v;
}, {
immediate: true
});
expose({
inputRef: inputRef,
focus: focus,
blur: blur
});
return {
isHover: isHover,
focused: focused,
renderType: renderType,
showClear: showClear,
inputRef: inputRef,
clearIconRef: clearIconRef,
inputValue: inputValue,
isComposition: isComposition,
compositionValue: compositionValue,
limitNumber: limitNumber,
tStatus: tStatus,
emitFocus: emitFocus,
formatAndEmitBlur: formatAndEmitBlur,
onHandleCompositionend: onHandleCompositionend,
onHandleCompositionstart: onHandleCompositionstart,
onRootClick: onRootClick,
emitPassword: emitPassword,
handleInput: handleInput,
emitClear: emitClear,
onClearIconMousedown: onClearIconMousedown,
innerValue: innerValue
};
}
export { useInput as default };
//# sourceMappingURL=useInput.mjs.map