tdesign-mobile-vue
Version:
tdesign-mobile-vue
290 lines (282 loc) • 11.3 kB
JavaScript
/**
* tdesign v1.13.2
* (c) 2026 TDesign Group
* @license MIT
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var Vue = require('vue');
var tdesignIconsVueNext = require('tdesign-icons-vue-next');
var core = require('@vueuse/core');
var config = require('../config.js');
var shared_dom = require('../shared/dom.js');
var search_props = require('./props.js');
var hooks_useVModel = require('../hooks/useVModel.js');
var hooks_useClass = require('../hooks/useClass.js');
var hooks_tnode = require('../hooks/tnode.js');
var hooks_useLengthLimit = require('../hooks/useLengthLimit.js');
var _common_js_common = require('../_common/js/common.js');
var cell_cell = require('../cell/cell.js');
require('../_chunks/dep-abe9931d.js');
require('../_chunks/dep-d16bf091.js');
require('@babel/runtime/helpers/typeof');
require('../_chunks/dep-c041cd95.js');
require('../_chunks/dep-db763263.js');
require('../_chunks/dep-c6554877.js');
require('../_chunks/dep-a8725fec.js');
require('../_chunks/dep-016f6f84.js');
require('../_chunks/dep-ea3a180f.js');
require('../_chunks/dep-bcc78903.js');
require('../_chunks/dep-e1cc657b.js');
require('../_chunks/dep-a58ecafb.js');
require('../_chunks/dep-ede0b0a5.js');
require('../_chunks/dep-dafca6f5.js');
require('../_common/js/global-config/mobile/default-config.js');
require('../_common/js/global-config/mobile/locale/zh_CN.js');
require('../_chunks/dep-88b647f4.js');
require('../_chunks/dep-f339c931.js');
require('dayjs');
require('../_chunks/dep-89205991.js');
require('../_chunks/dep-082c7326.js');
require('../_chunks/dep-591548d1.js');
require('../_chunks/dep-a9fd9906.js');
require('../_chunks/dep-a837a88d.js');
require('../_chunks/dep-d2416277.js');
require('../_chunks/dep-4a0acbaa.js');
require('../_chunks/dep-f5894bc3.js');
require('../_chunks/dep-d404c733.js');
require('../_chunks/dep-bd009758.js');
require('../_chunks/dep-83213f5d.js');
require('../_chunks/dep-412d3c4b.js');
require('../_chunks/dep-644f5d6a.js');
require('../_chunks/dep-933759bc.js');
require('../_chunks/dep-a625ee7d.js');
require('../_chunks/dep-e49294a5.js');
require('../_chunks/dep-a1831458.js');
require('../hooks/render-tnode.js');
require('../_chunks/dep-88660f08.js');
require('../_chunks/dep-04cf2308.js');
require('../_chunks/dep-671f1b66.js');
require('../_common/js/utils/general.js');
require('../_common/js/log/log.js');
require('../_common/js/utils/helper.js');
require('@babel/runtime/helpers/toConsumableArray');
require('@babel/runtime/helpers/objectWithoutProperties');
require('../_chunks/dep-f8c1ee79.js');
require('../_chunks/dep-4e43cb11.js');
require('../_chunks/dep-dea6ba04.js');
require('../cell/props.js');
require('../form/hooks.js');
require('../_chunks/dep-f228bd6e.js');
require('../shared/hover.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
var prefix = config["default"].prefix;
var _Search = Vue.defineComponent({
name: "".concat(prefix, "-search"),
props: search_props["default"],
setup: function setup(props, context) {
var renderTNodeJSX = hooks_tnode.useTNodeJSX();
var classPrefix = hooks_useClass.usePrefixClass();
var searchClass = hooks_useClass.usePrefixClass("search");
var isShowResultList = Vue.ref(false);
var inputRef = Vue.ref();
var _useFocus = core.useFocus(inputRef, {
initialValue: props.focus
}),
focused = _useFocus.focused;
var _toRefs = Vue.toRefs(props),
value = _toRefs.value,
modelValue = _toRefs.modelValue;
var _useVModel = hooks_useVModel["default"](value, modelValue, props.defaultValue, props.onChange),
_useVModel2 = _slicedToArray__default["default"](_useVModel, 2),
searchValue = _useVModel2[0],
setSearchValue = _useVModel2[1];
var boxClasses = Vue.computed(function () {
return ["".concat(searchClass.value, "__input-box"), "".concat(searchClass.value, "__input-box--").concat(props.shape), _defineProperty__default["default"]({}, "".concat(classPrefix.value, "-is-focused"), focused.value)];
});
var inputClasses = Vue.computed(function () {
return ["".concat(classPrefix.value, "-input__keyword"), _defineProperty__default["default"]({}, "".concat(searchClass.value, "--center"), props.center)];
});
var limitParams = Vue.computed(function () {
return {
value: [void 0, null].includes(searchValue.value) ? void 0 : String(searchValue.value),
maxlength: Number(props.maxlength),
maxcharacter: props.maxcharacter,
allowInputOverMax: false
};
});
var _useLengthLimit = hooks_useLengthLimit["default"](limitParams),
getValueByLimitNumber = _useLengthLimit.getValueByLimitNumber;
var setInputValue = function setInputValue(v) {
var input = inputRef.value;
var sV = String(v);
if (!input) {
return;
}
if (input.value !== sV) {
input.value = sV;
}
};
var inputValueChangeHandle = function inputValueChangeHandle(e) {
var value2 = e.target.value;
setSearchValue(getValueByLimitNumber(value2), {
trigger: "input-change",
e: e
});
Vue.nextTick(function () {
return setInputValue(searchValue.value);
});
};
var handleInput = function handleInput(e) {
isShowResultList.value = true;
if (e instanceof InputEvent) {
var checkInputType = e.inputType && e.inputType === "insertCompositionText";
if (e.isComposing || checkInputType) return;
}
inputValueChangeHandle(e);
};
var handleClear = function handleClear(e) {
var _props$onClear;
setSearchValue("", {
trigger: "clear",
e: e
});
focused.value = true;
(_props$onClear = props.onClear) === null || _props$onClear === void 0 || _props$onClear.call(props, {
e: e
});
};
var handleFocus = function handleFocus(e) {
var _props$onFocus;
(_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 || _props$onFocus.call(props, {
value: searchValue.value,
e: e
});
};
var handleBlur = function handleBlur(e) {
var _props$onBlur;
(_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 || _props$onBlur.call(props, {
value: searchValue.value,
e: e
});
};
var handleCompositionend = function handleCompositionend(e) {
inputValueChangeHandle(e);
};
var handleAction = function handleAction(e) {
var _props$onActionClick;
(_props$onActionClick = props.onActionClick) === null || _props$onActionClick === void 0 || _props$onActionClick.call(props, {
e: e
});
};
var handleSearch = function handleSearch(e) {
if (_common_js_common.ENTER_REG.test(e.code) || _common_js_common.ENTER_REG.test(e.key)) {
var _inputRef$value, _props$onSubmit;
shared_dom.preventDefault(e, false);
(_inputRef$value = inputRef.value) === null || _inputRef$value === void 0 || _inputRef$value.blur();
(_props$onSubmit = props.onSubmit) === null || _props$onSubmit === void 0 || _props$onSubmit.call(props, {
value: searchValue.value,
e: e
});
}
};
return function () {
var readerLeftIcon = function readerLeftIcon() {
var leftIcon = renderTNodeJSX("leftIcon");
if (leftIcon === "search") {
return Vue.createVNode(tdesignIconsVueNext.SearchIcon, null, null);
}
return renderTNodeJSX("leftIcon");
};
var readerClear = function readerClear() {
if (props.clearable && searchValue.value && (props.clearTrigger === "always" || props.clearTrigger === "focus" && focused.value)) {
return Vue.createVNode("div", {
"class": "".concat(searchClass.value, "__clear"),
"onClick": handleClear
}, [Vue.createVNode(tdesignIconsVueNext.CloseCircleFilledIcon, null, null)]);
}
return null;
};
var readerAction = function readerAction() {
var action = renderTNodeJSX("action");
if (action) {
return Vue.createVNode("div", {
"class": "".concat(searchClass.value, "__search-action ").concat(classPrefix.value, "-class-action"),
"onClick": handleAction
}, [action]);
}
return null;
};
var onSelectOption = function onSelectOption(params) {
isShowResultList.value = false;
setSearchValue(params.item, {
trigger: "option-click",
e: params.e
});
};
var highlightSearchValue = function highlightSearchValue(item, searchValue2) {
var parts = item.split(new RegExp("(".concat(searchValue2, ")"), "gi"));
return parts.map(function (part, index) {
return part.toLowerCase() === searchValue2.toLowerCase() ? Vue.createVNode("span", {
"key": index,
"class": "".concat(searchClass.value, "__result-item--highLight")
}, [part]) : part;
});
};
var listNodes = function listNodes(params) {
return Vue.h(cell_cell["default"], {
key: params.index,
class: "".concat(searchClass.value, "__result-item"),
onClick: function onClick(context2) {
return onSelectOption({
item: params.item,
e: context2.e
});
}
}, {
title: function title() {
return highlightSearchValue(params.item, searchValue.value);
}
});
};
var extraProps = {
enterkeyhint: "search"
};
return Vue.createVNode("div", null, [Vue.createVNode("div", {
"class": "".concat(searchClass.value)
}, [Vue.createVNode("div", {
"class": boxClasses.value
}, [readerLeftIcon(), Vue.createVNode("input", Vue.mergeProps({
"ref": inputRef,
"value": searchValue.value,
"type": "search",
"class": inputClasses.value,
"style": props.cursorColor ? {
"--td-search-cursor-color": props.cursorColor
} : void 0,
"autofocus": props.focus,
"placeholder": props.placeholder,
"readonly": props.readonly,
"disabled": props.disabled,
"onKeypress": handleSearch,
"onFocus": handleFocus,
"onBlur": handleBlur,
"onInput": handleInput,
"onCompositionend": handleCompositionend
}, extraProps), null), readerClear()]), readerAction()]), isShowResultList.value && Vue.createVNode("div", {
"class": "".concat(searchClass.value, "__result-list")
}, [props.resultList.map(function (item, index) {
return listNodes({
item: item,
index: index
});
})])]);
};
}
});
exports["default"] = _Search;
//# sourceMappingURL=search.js.map