tdesign-mobile-vue
Version:
tdesign-mobile-vue
293 lines (289 loc) • 11 kB
JavaScript
/**
* tdesign v1.7.0
* (c) 2024 TDesign Group
* @license MIT
*/
import { _ as _defineProperty } from '../_chunks/dep-219bb5a7.mjs';
import { _ as _slicedToArray } from '../_chunks/dep-cd74809c.mjs';
import { defineComponent, ref, computed, nextTick, createVNode, h, mergeProps } from 'vue';
import { SearchIcon, CloseCircleFilledIcon } from 'tdesign-icons-vue-next';
import { useFocus } from '@vueuse/core';
import config from '../config.mjs';
import { preventDefault } from '../shared/dom.mjs';
import searchProps from './props.mjs';
import { useDefault } from '../shared/useDefault/index.mjs';
import { usePrefixClass } from '../hooks/useClass.mjs';
import { useTNodeJSX } from '../hooks/tnode.mjs';
import useLengthLimit from '../hooks/useLengthLimit.mjs';
import { ENTER_REG } from '../_common/js/common.mjs';
import _Cell from '../cell/cell.mjs';
import '../_chunks/dep-620d73f7.mjs';
import '../_chunks/dep-8d37dbf8.mjs';
import '../_chunks/dep-91d696ea.mjs';
import '../_chunks/dep-8bf3054e.mjs';
import '../_chunks/dep-3d249f65.mjs';
import '../_chunks/dep-e6c129ab.mjs';
import '../_chunks/dep-6303c50c.mjs';
import '../_chunks/dep-019e292f.mjs';
import '../_chunks/dep-32364550.mjs';
import '../_chunks/dep-9b2de386.mjs';
import '../_chunks/dep-60cadef8.mjs';
import '../_chunks/dep-8140c29b.mjs';
import '../_chunks/dep-0d52e58f.mjs';
import '../_chunks/dep-a836a38c.mjs';
import '../_chunks/dep-0ea7bbde.mjs';
import '../_chunks/dep-b437ef0b.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 '../_chunks/dep-6917b9bc.mjs';
import '../hooks/render-tnode.mjs';
import '../_chunks/dep-40507aac.mjs';
import '../_chunks/dep-52fdc8e1.mjs';
import '../_common/js/log/index.mjs';
import '../_common/js/log/log.mjs';
import '../_common/js/utils/helper.mjs';
import '../_chunks/dep-f0f403be.mjs';
import '../_chunks/dep-8ece47c6.mjs';
import '../_chunks/dep-74a5dff9.mjs';
import '../_chunks/dep-1bbfa76e.mjs';
import '../shared/index.mjs';
import '../shared/functions.mjs';
import '../shared/util.mjs';
import '../shared/component.mjs';
import '../shared/constants.mjs';
import '../shared/render.mjs';
import '../shared/render-tnode.mjs';
import '../shared/useToggle/index.mjs';
import '../shared/useCountDown/index.mjs';
import '../_chunks/dep-80e4de18.mjs';
import '../shared/useCountDown/utils.mjs';
import '../shared/useChildSlots/index.mjs';
import '../shared/useVModel/index.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 '../cell/props.mjs';
import '../form/hooks.mjs';
import '../_chunks/dep-ea9a17dc.mjs';
var prefix = config.prefix;
var _Search = defineComponent({
name: "".concat(prefix, "-search"),
props: searchProps,
setup: function setup(props, context) {
var renderTNodeJSX = useTNodeJSX();
var searchClass = usePrefixClass("search");
var isShowResultList = ref(false);
var isShowAction = ref(false);
var inputRef = ref();
var _useFocus = useFocus(inputRef, {
initialValue: props.focus
}),
focused = _useFocus.focused;
var _useDefault = useDefault(props, context.emit, "value", "change"),
_useDefault2 = _slicedToArray(_useDefault, 1),
searchValue = _useDefault2[0];
var boxClasses = computed(function () {
return ["".concat(searchClass.value, "__input-box"), "".concat(searchClass.value, "__input-box--").concat(props.shape), _defineProperty({}, "".concat(prefix, "-is-focused"), focused.value)];
});
var inputClasses = computed(function () {
return ["".concat(prefix, "-input__keyword"), _defineProperty({}, "".concat(searchClass.value, "--center"), props.center)];
});
var limitParams = 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 = useLengthLimit(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 value = e.target.value;
searchValue.value = getValueByLimitNumber(value);
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;
searchValue.value = "";
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;
isShowAction.value = true;
(_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;
isShowAction.value = false;
(_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 (ENTER_REG.test(e.code) || ENTER_REG.test(e.key)) {
var _inputRef$value, _props$onSubmit;
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 createVNode(SearchIcon, {
"size": "24px"
}, null);
}
return renderTNodeJSX("leftIcon");
};
var readerClear = function readerClear() {
if (props.clearable && searchValue.value) {
return createVNode("div", {
"class": "".concat(searchClass.value, "__clear"),
"onClick": handleClear
}, [createVNode(CloseCircleFilledIcon, {
"size": "24"
}, null)]);
}
return null;
};
var readerAction = function readerAction() {
var action = renderTNodeJSX("action");
if (action && isShowAction.value) {
return createVNode("div", {
"class": "".concat(searchClass.value, "__search-action ").concat(prefix, "-class-action"),
"onClick": handleAction
}, [action]);
}
return null;
};
var onSelectResultItem = function onSelectResultItem(params) {
isShowResultList.value = false;
searchValue.value = params.item;
};
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() ? createVNode("span", {
"key": index,
"class": "".concat(searchClass.value, "__result-item--highLight")
}, [part]) : part;
});
};
var listNodes = function listNodes(params) {
return h(_Cell, {
key: params.index,
class: "".concat(searchClass.value, "__result-item"),
onClick: function onClick() {
return onSelectResultItem({
item: params.item
});
}
}, {
title: function title() {
return highlightSearchValue(params.item, searchValue.value);
}
});
};
var extraProps = {
enterkeyhint: "search"
};
return createVNode("div", null, [createVNode("div", {
"class": "".concat(searchClass.value)
}, [createVNode("div", {
"class": boxClasses.value
}, [readerLeftIcon(), createVNode("input", mergeProps({
"ref": inputRef,
"value": searchValue.value,
"type": "search",
"class": inputClasses.value,
"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 && createVNode("div", {
"class": "".concat(searchClass.value, "__result-list")
}, [props.resultList.map(function (item, index) {
return listNodes({
item: item,
index: index
});
})])]);
};
}
});
export { _Search as default };
//# sourceMappingURL=search.mjs.map