tdesign-mobile-vue
Version:
tdesign-mobile-vue
305 lines (297 loc) • 12.5 kB
JavaScript
/**
* tdesign v1.7.0
* (c) 2024 TDesign Group
* @license MIT
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var vue = require('vue');
var tdesignIconsVueNext = require('tdesign-icons-vue-next');
var isFunction = require('lodash/isFunction');
var config = require('../config.js');
var input_props = require('./props.js');
var form_const = require('../form/const.js');
var form_hooks = require('../form/hooks.js');
var hooks_useClass = require('../hooks/useClass.js');
var hooks_tnode = require('../hooks/tnode.js');
var hooks_useLengthLimit = require('../hooks/useLengthLimit.js');
var shared_component = require('../shared/component.js');
var shared_useDefault_index = require('../shared/useDefault/index.js');
require('lodash/isBoolean');
require('../config-provider/useConfig.js');
require('lodash/cloneDeep');
require('lodash/isString');
require('../config-provider/context.js');
require('lodash/mergeWith');
require('lodash/merge');
require('lodash/isArray');
require('../_common/js/global-config/mobile/default-config.js');
require('../_common/js/global-config/mobile/locale/zh_CN.js');
require('../_chunks/dep-8d930798.js');
require('@babel/runtime/helpers/typeof');
require('../_chunks/dep-a20a5149.js');
require('dayjs');
require('lodash/camelCase');
require('lodash/kebabCase');
require('../hooks/render-tnode.js');
require('lodash/isEmpty');
require('lodash/isObject');
require('lodash/isNumber');
require('../_common/js/log/log.js');
require('../_common/js/utils/helper.js');
require('@babel/runtime/helpers/toConsumableArray');
require('@babel/runtime/helpers/objectWithoutProperties');
require('lodash/isNull');
require('lodash/isUndefined');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
var isFunction__default = /*#__PURE__*/_interopDefaultLegacy(isFunction);
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var prefix = config["default"].prefix;
var _Input = vue.defineComponent({
name: "".concat(prefix, "-input"),
props: _objectSpread(_objectSpread({}, input_props["default"]), {}, {
labelAlign: {
type: String,
default: "top"
},
pattern: {
type: String
},
inputmode: {
type: String,
validator: function validator(val) {
if (!val) return true;
return ["search", "text", "none", "url", "tel", "email", "numeric", "decimal"].includes(val);
}
}
}),
setup: function setup(props, context) {
var renderTNodeJSX = hooks_tnode.useTNodeJSX();
var inputClass = hooks_useClass.usePrefixClass("input");
var isDisabled = form_hooks.useFormDisabled();
var inputRef = vue.ref();
var _useDefault = shared_useDefault_index.useDefault(props, context.emit, "value", "change"),
_useDefault2 = _slicedToArray__default["default"](_useDefault, 1),
innerValue = _useDefault2[0];
var status = props.status || "default";
var renderType = vue.ref(props.type);
var focused = vue.ref(false);
var formItem = vue.inject(form_const.FormItemInjectionKey, void 0);
var inputClasses = vue.computed(function () {
return ["".concat(inputClass.value, "__control"), _defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"]({}, "".concat(inputClass.value, "--").concat(props.align), props.align !== "left"), "".concat(inputClass.value, "--").concat(status), status), "".concat(inputClass.value, "__control--disabled"), isDisabled.value)];
});
var rootClasses = vue.computed(function () {
return [inputClass.value, _defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"]({}, "".concat(inputClass.value, "--layout-").concat(props.layout), props.layout), "".concat(inputClass.value, "--center"), props.labelAlign === "center"), "".concat(inputClass.value, "--border"), !props.borderless)];
});
var showClear = vue.computed(function () {
if (isDisabled.value || props.readonly === true) return false;
if (props.clearable && innerValue.value && innerValue.value.length > 0) {
return props.clearTrigger === "always" || props.clearTrigger === "focus" && focused.value;
}
return false;
});
var limitParams = vue.computed(function () {
return {
value: [void 0, null].includes(innerValue.value) ? void 0 : String(innerValue.value),
maxlength: Number(props.maxlength),
maxcharacter: props.maxcharacter,
allowInputOverMax: props.allowInputOverMax
};
});
var _useLengthLimit = hooks_useLengthLimit["default"](limitParams),
getValueByLimitNumber = _useLengthLimit.getValueByLimitNumber;
var setInputValue = function setInputValue() {
var v = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
var input = inputRef.value;
var sV = String(v);
if (!input) {
return;
}
if (input.value !== sV) {
input.value = sV;
}
};
var handleInput = function handleInput(e) {
if (e instanceof InputEvent) {
var checkInputType = e.inputType && e.inputType === "insertCompositionText";
if (e.isComposing || checkInputType) return;
}
inputValueChangeHandle(e);
};
var inputValueChangeHandle = function inputValueChangeHandle(e) {
var value = e.target.value;
innerValue.value = getValueByLimitNumber(value);
vue.nextTick(function () {
return setInputValue(innerValue.value);
});
};
var focus = function focus() {
var _inputRef$value;
focused.value = true;
(_inputRef$value = inputRef.value) === null || _inputRef$value === void 0 || _inputRef$value.focus();
};
var blur = function blur() {
var _inputRef$value2;
focused.value = false;
(_inputRef$value2 = inputRef.value) === null || _inputRef$value2 === void 0 || _inputRef$value2.blur();
};
shared_component.extendAPI({
focus: focus,
blur: blur
});
var handleClear = function handleClear(e) {
var _props$onClear;
e.preventDefault();
innerValue.value = "";
focus();
(_props$onClear = props.onClear) === null || _props$onClear === void 0 || _props$onClear.call(props, {
e: e
});
};
var handleFocus = function handleFocus(e) {
var _props$onFocus;
focused.value = true;
(_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 || _props$onFocus.call(props, innerValue.value, {
e: e
});
};
var handleBlur = function handleBlur(e) {
var _props$onBlur2;
focused.value = false;
if (isFunction__default["default"](props.format)) {
innerValue.value = props.format(innerValue.value);
vue.nextTick(function () {
var _props$onBlur;
setInputValue(innerValue.value);
(_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 || _props$onBlur.call(props, innerValue.value, {
e: e
});
formItem === null || formItem === void 0 || formItem.handleBlur();
});
return;
}
(_props$onBlur2 = props.onBlur) === null || _props$onBlur2 === void 0 || _props$onBlur2.call(props, innerValue.value, {
e: e
});
formItem === null || formItem === void 0 || formItem.handleBlur();
};
var handleCompositionend = function handleCompositionend(e) {
inputValueChangeHandle(e);
};
var handlePwdIconClick = function handlePwdIconClick() {
if (isDisabled.value) return;
renderType.value = renderType.value === "password" ? "text" : "password";
};
vue.watch(function () {
return props.autofocus;
}, function (v) {
if (v === true) {
vue.nextTick(function () {
focus();
});
}
}, {
immediate: true
});
vue.watch(function () {
return props.type;
}, function (v) {
renderType.value = v;
}, {
immediate: true
});
return function () {
var renderPrefix = function renderPrefix() {
var prefixIcon = renderTNodeJSX("prefixIcon");
var label = renderTNodeJSX("label");
return vue.createVNode("div", {
"class": "".concat(inputClass.value, "__wrap--prefix")
}, [prefixIcon && vue.createVNode("div", {
"class": "".concat(inputClass.value, "__icon--prefix")
}, [prefixIcon]), vue.createVNode("div", {
"class": "".concat(inputClass.value, "__label")
}, [label])]);
};
var renderClearable = function renderClearable() {
if (showClear.value) {
return vue.createVNode("div", {
"class": "".concat(inputClass.value, "__wrap--clearable-icon"),
"onTouchend": handleClear
}, [vue.createVNode(tdesignIconsVueNext.CloseCircleFilledIcon, null, null)]);
}
return null;
};
var renderSuffix = function renderSuffix() {
var suffix = renderTNodeJSX("suffix");
if (!suffix) {
return null;
}
return vue.createVNode("div", {
"class": "".concat(inputClass.value, "__wrap--suffix")
}, [suffix]);
};
var renderSuffixIcon = function renderSuffixIcon() {
var suffixIcon = renderTNodeJSX("suffixIcon");
if (props.type === "password") {
if (renderType.value === "password") {
suffixIcon = vue.createVNode(tdesignIconsVueNext.BrowseOffIcon, {
"onClick": handlePwdIconClick
}, null);
} else if (renderType.value === "text") {
suffixIcon = vue.createVNode(tdesignIconsVueNext.BrowseIcon, {
"onClick": handlePwdIconClick
}, null);
}
}
if (!suffixIcon) {
return null;
}
return vue.createVNode("div", {
"class": "".concat(inputClass.value, "__wrap--suffix-icon")
}, [suffixIcon]);
};
var renderTips = function renderTips() {
var tips = renderTNodeJSX("tips");
if (!tips) {
return null;
}
return vue.createVNode("div", {
"class": "".concat(inputClass.value, "__tips ").concat(inputClass.value, "--").concat(props.align)
}, [tips]);
};
var inputAttrs = {
ref: inputRef,
class: inputClasses.value,
value: innerValue.value,
name: props.name,
type: renderType.value,
disabled: isDisabled.value,
autocomplete: props.autocomplete ? "On" : "Off",
placeholder: props.placeholder,
readonly: props.readonly,
pattern: props.pattern,
inputmode: props.inputmode,
spellcheck: props.spellCheck,
enterkeyhint: props.enterkeyhint,
onFocus: handleFocus,
onBlur: handleBlur,
onInput: handleInput,
onCompositionend: handleCompositionend
};
return vue.createVNode("div", {
"class": rootClasses.value
}, [renderPrefix(), vue.createVNode("div", {
"class": "".concat(inputClass.value, "__wrap")
}, [vue.createVNode("div", {
"class": "".concat(inputClass.value, "__content ").concat(inputClass.value, "--").concat(status || "default")
}, [vue.createVNode("input", inputAttrs, null), renderClearable(), renderSuffix(), renderSuffixIcon()]), renderTips()])]);
};
}
});
exports["default"] = _Input;
//# sourceMappingURL=input.js.map