UNPKG

tdesign-mobile-vue

Version:
342 lines (338 loc) 13.5 kB
/** * tdesign v1.7.0 * (c) 2024 TDesign Group * @license MIT */ import { _ as _slicedToArray } from '../_chunks/dep-cd74809c.mjs'; import { _ as _defineProperty } from '../_chunks/dep-219bb5a7.mjs'; import { defineComponent, ref, inject, computed, nextTick, watch, createVNode } from 'vue'; import { CloseCircleFilledIcon, BrowseOffIcon, BrowseIcon } from 'tdesign-icons-vue-next'; import { i as isFunction_1 } from '../_chunks/dep-91d696ea.mjs'; import config from '../config.mjs'; import InputProps from './props.mjs'; import '../shared/index.mjs'; import { FormItemInjectionKey } from '../form/const.mjs'; import { useFormDisabled } from '../form/hooks.mjs'; import { usePrefixClass } from '../hooks/useClass.mjs'; import { useTNodeJSX } from '../hooks/tnode.mjs'; import useLengthLimit from '../hooks/useLengthLimit.mjs'; import { useDefault } from '../shared/useDefault/index.mjs'; import { extendAPI } from '../shared/component.mjs'; import '../_chunks/dep-8d37dbf8.mjs'; import '../_chunks/dep-620d73f7.mjs'; import '../_chunks/dep-8bf3054e.mjs'; import '../_chunks/dep-3d249f65.mjs'; import '../_chunks/dep-e6c129ab.mjs'; import '../shared/functions.mjs'; import '../shared/util.mjs'; import '../_chunks/dep-52fdc8e1.mjs'; import '../_chunks/dep-9b2de386.mjs'; import '../shared/constants.mjs'; import '../shared/render.mjs'; import '../_chunks/dep-60cadef8.mjs'; import '../_chunks/dep-8140c29b.mjs'; import '../_chunks/dep-0d52e58f.mjs'; import '../_chunks/dep-019e292f.mjs'; import '../_chunks/dep-32364550.mjs'; import '../_chunks/dep-a836a38c.mjs'; import '../_chunks/dep-0ea7bbde.mjs'; import '../_chunks/dep-b437ef0b.mjs'; import '../shared/dom.mjs'; import '../_chunks/dep-6303c50c.mjs'; import '../shared/render-tnode.mjs'; import '../shared/useToggle/index.mjs'; import '../shared/useCountDown/index.mjs'; import '../_chunks/dep-80e4de18.mjs'; import '@vueuse/core'; import '../shared/useCountDown/utils.mjs'; import '../shared/useChildSlots/index.mjs'; import '../_chunks/dep-f0f403be.mjs'; import '../shared/useVModel/index.mjs'; import '../_chunks/dep-6917b9bc.mjs'; import '../shared/useTouch/index.mjs'; import '../shared/useScrollParent/index.mjs'; import '../shared/useExpose/index.mjs'; import '../shared/useTest/index.mjs'; import '../shared/useClickAway/index.mjs'; import '../shared/useGesture/index.mjs'; import '@use-gesture/vanilla'; import '../shared/hover.mjs'; import '../_chunks/dep-ea9a17dc.mjs'; import '../_chunks/dep-b9b8ead5.mjs'; import '../_chunks/dep-6c53a3e4.mjs'; import '../_chunks/dep-d2161895.mjs'; import '../_chunks/dep-89951f45.mjs'; import '../_chunks/dep-08bc7a4c.mjs'; import '../_chunks/dep-6bc862af.mjs'; import '../_chunks/dep-4931819d.mjs'; import '../_chunks/dep-10f4d030.mjs'; import '../_chunks/dep-8ee6f5cd.mjs'; import '../_chunks/dep-e57d46f3.mjs'; import '../_chunks/dep-4f44985d.mjs'; import '../_chunks/dep-b84be35c.mjs'; import '../_chunks/dep-933f3a85.mjs'; import '../_chunks/dep-2bce42ea.mjs'; import '../_chunks/dep-ac139980.mjs'; import '../_chunks/dep-154c1925.mjs'; import '../_chunks/dep-ba131d9c.mjs'; import '../_chunks/dep-007f294e.mjs'; import '../_common/js/global-config/mobile/default-config.mjs'; import '../_common/js/global-config/mobile/locale/zh_CN.mjs'; import '../_chunks/dep-161f0c44.mjs'; import '../_chunks/dep-5fd0eaa4.mjs'; import '../_chunks/dep-3c59bf72.mjs'; import '../config-provider/type.mjs'; import '../hooks/render-tnode.mjs'; import '../_chunks/dep-40507aac.mjs'; import '../_common/js/log/index.mjs'; import '../_common/js/log/log.mjs'; import '../_common/js/utils/helper.mjs'; import '../_chunks/dep-8ece47c6.mjs'; import '../_chunks/dep-74a5dff9.mjs'; import '../_chunks/dep-1bbfa76e.mjs'; 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(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.prefix; var _Input = defineComponent({ name: "".concat(prefix, "-input"), props: _objectSpread(_objectSpread({}, InputProps), {}, { 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 = useTNodeJSX(); var inputClass = usePrefixClass("input"); var isDisabled = useFormDisabled(); var inputRef = ref(); var _useDefault = useDefault(props, context.emit, "value", "change"), _useDefault2 = _slicedToArray(_useDefault, 1), innerValue = _useDefault2[0]; var status = props.status || "default"; var renderType = ref(props.type); var focused = ref(false); var formItem = inject(FormItemInjectionKey, void 0); var inputClasses = computed(function () { return ["".concat(inputClass.value, "__control"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(inputClass.value, "--").concat(props.align), props.align !== "left"), "".concat(inputClass.value, "--").concat(status), status), "".concat(inputClass.value, "__control--disabled"), isDisabled.value)]; }); var rootClasses = computed(function () { return [inputClass.value, _defineProperty(_defineProperty(_defineProperty({}, "".concat(inputClass.value, "--layout-").concat(props.layout), props.layout), "".concat(inputClass.value, "--center"), props.labelAlign === "center"), "".concat(inputClass.value, "--border"), !props.borderless)]; }); var showClear = 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 = 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 = useLengthLimit(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); 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(); }; 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_1(props.format)) { innerValue.value = props.format(innerValue.value); 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"; }; watch(function () { return props.autofocus; }, function (v) { if (v === true) { nextTick(function () { focus(); }); } }, { immediate: true }); 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 createVNode("div", { "class": "".concat(inputClass.value, "__wrap--prefix") }, [prefixIcon && createVNode("div", { "class": "".concat(inputClass.value, "__icon--prefix") }, [prefixIcon]), createVNode("div", { "class": "".concat(inputClass.value, "__label") }, [label])]); }; var renderClearable = function renderClearable() { if (showClear.value) { return createVNode("div", { "class": "".concat(inputClass.value, "__wrap--clearable-icon"), "onTouchend": handleClear }, [createVNode(CloseCircleFilledIcon, null, null)]); } return null; }; var renderSuffix = function renderSuffix() { var suffix = renderTNodeJSX("suffix"); if (!suffix) { return null; } return 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 = createVNode(BrowseOffIcon, { "onClick": handlePwdIconClick }, null); } else if (renderType.value === "text") { suffixIcon = createVNode(BrowseIcon, { "onClick": handlePwdIconClick }, null); } } if (!suffixIcon) { return null; } return createVNode("div", { "class": "".concat(inputClass.value, "__wrap--suffix-icon") }, [suffixIcon]); }; var renderTips = function renderTips() { var tips = renderTNodeJSX("tips"); if (!tips) { return null; } return 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 createVNode("div", { "class": rootClasses.value }, [renderPrefix(), createVNode("div", { "class": "".concat(inputClass.value, "__wrap") }, [createVNode("div", { "class": "".concat(inputClass.value, "__content ").concat(inputClass.value, "--").concat(status || "default") }, [createVNode("input", inputAttrs, null), renderClearable(), renderSuffix(), renderSuffixIcon()]), renderTips()])]); }; } }); export { _Input as default }; //# sourceMappingURL=input.mjs.map