@opensig/opendesign
Version:
400 lines (399 loc) • 17.8 kB
JavaScript
;
const vue = require("vue");
const index = require("../select/index.js");
const index$1 = require("../option/index.js");
const index$2 = require("../input/index.js");
const is = require("../_utils/is.js");
const string = require("../_utils/string.js");
const helper = require("../_utils/helper.js");
require("../icon-components/OIconZoomOut/OIconZoomOut.vue2.js");
require("../icon-components/OIconZoomIn/OIconZoomIn.vue2.js");
require("../icon-components/OIconVideoPlay/OIconVideoPlay.vue2.js");
require("../icon-components/OIconTime/OIconTime.vue2.js");
require("../icon-components/OIconStar/OIconStar.vue2.js");
const OIconSearch = require("../icon-components/OIconSearch/OIconSearch.vue.js");
require("../icon-components/OIconRefresh/OIconRefresh.vue2.js");
require("../icon-components/OIconOneToOne/OIconOneToOne.vue2.js");
require("../icon-components/OIconMinus/OIconMinus.vue2.js");
require("../icon-components/OIconLoading/OIconLoading.vue2.js");
require("../icon-components/OIconLoadingSmall/OIconLoadingSmall.vue2.js");
require("../icon-components/OIconLink/OIconLink.vue2.js");
require("../icon-components/OIconInfoTip/OIconInfoTip.vue2.js");
require("../icon-components/OIconImgError/OIconImgError.vue2.js");
require("../icon-components/OIconImageError/OIconImageError.vue2.js");
require("../icon-components/OIconFilter/OIconFilter.vue2.js");
require("../icon-components/OIconFile/OIconFile.vue2.js");
require("../icon-components/OIconEye/OIconEye.vue2.js");
require("../icon-components/OIconEyeOff/OIconEyeOff.vue2.js");
require("../icon-components/OIconEllipsis/OIconEllipsis.vue2.js");
require("../icon-components/OIconEdit/OIconEdit.vue2.js");
require("../icon-components/OIconDownload/OIconDownload.vue2.js");
require("../icon-components/OIconDoubleArrowUp/OIconDoubleArrowUp.vue2.js");
require("../icon-components/OIconDoubleArrowRight/OIconDoubleArrowRight.vue2.js");
require("../icon-components/OIconDoubleArrowLeft/OIconDoubleArrowLeft.vue2.js");
require("../icon-components/OIconDoubleArrowDown/OIconDoubleArrowDown.vue2.js");
require("../icon-components/OIconDone/OIconDone.vue2.js");
require("../icon-components/OIconDelete/OIconDelete.vue2.js");
require("../icon-components/OIconClose/OIconClose.vue2.js");
require("../icon-components/OIconChevronUp/OIconChevronUp.vue2.js");
require("../icon-components/OIconChevronRight/OIconChevronRight.vue2.js");
require("../icon-components/OIconChevronRightSmall/OIconChevronRightSmall.vue2.js");
require("../icon-components/OIconChevronLeft/OIconChevronLeft.vue2.js");
require("../icon-components/OIconChevronDown/OIconChevronDown.vue2.js");
require("../icon-components/OIconChevronDownBold/OIconChevronDownBold.vue2.js");
require("../icon-components/OIconChecked/OIconChecked.vue2.js");
require("../icon-components/OIconCaretUp/OIconCaretUp.vue2.js");
require("../icon-components/OIconCaretRight/OIconCaretRight.vue2.js");
require("../icon-components/OIconCaretLeft/OIconCaretLeft.vue2.js");
require("../icon-components/OIconCaretDown/OIconCaretDown.vue2.js");
require("../icon-components/OIconCalendar/OIconCalendar.vue2.js");
require("../icon-components/OIconAvatar/OIconAvatar.vue2.js");
require("../icon-components/OIconArrowUp/OIconArrowUp.vue2.js");
require("../icon-components/OIconArrowRight/OIconArrowRight.vue2.js");
require("../icon-components/OIconArrowLeft/OIconArrowLeft.vue2.js");
require("../icon-components/OIconArrowDown/OIconArrowDown.vue2.js");
require("../icon-components/OIconAdd/OIconAdd.vue2.js");
require("../icon-components/OIconWarning/OIconWarning.vue2.js");
require("../icon-components/OIconSun/OIconSun.vue2.js");
require("../icon-components/OIconSuccess/OIconSuccess.vue2.js");
require("../icon-components/OIconSort/OIconSort.vue2.js");
require("../icon-components/OIconSkill/OIconSkill.vue2.js");
require("../icon-components/OIconNoData/OIconNoData.vue2.js");
require("../icon-components/OIconMoon/OIconMoon.vue2.js");
require("../icon-components/OIconKunpeng/OIconKunpeng.vue2.js");
require("../icon-components/OIconInfo/OIconInfo.vue2.js");
require("../icon-components/OIconExclamationMark/OIconExclamationMark.vue2.js");
require("../icon-components/OIconDanger/OIconDanger.vue2.js");
require("../icon-components/OIconCheckMark/OIconCheckMark.vue2.js");
require("../icon-components/OIconAscend/OIconAscend.vue2.js");
const provide = require("../form/provide.js");
const clickOutside = require("../directives/click-outside.js");
require("../hooks/use-theme.js");
require("../_utils/global.js");
require("@vueuse/core");
const types = require("./types.js");
const _hoisted_1 = { class: "o-search-option" };
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
__name: "OSearch",
props: types.searchProps,
emits: ["update:modelValue", "change", "input", "blur", "focus", "clear", "prefix-selected", "suffix-selected", "suggesstion-selected", "pressEnter", "options-visible-change"],
setup(__props, { emit: __emit }) {
const props = __props;
const emits = __emit;
const formItemInjection = vue.inject(provide.formItemInjectKey, null);
const searchInputRef = vue.ref();
const searchSelectRef = vue.ref();
const selectedValOfPrefix = vue.ref(props.prefixSelectedVal);
const selectedValOfSuffix = vue.ref(props.suffixSelectedVal);
const inputValue = vue.ref(props.modelValue ?? (props.defaultValue || ""));
let previousValue = inputValue.value;
const isOutClick = vue.ref(false);
const color = vue.computed(() => {
var _a;
if (formItemInjection == null ? void 0 : formItemInjection.fieldResult.value) {
return ((_a = formItemInjection == null ? void 0 : formItemInjection.fieldResult.value) == null ? void 0 : _a.type) || void 0;
} else {
return props.color;
}
});
const size = vue.computed(() => {
if (props.size === "medium") {
return props.size;
}
return "large";
});
const optionsOfPrefixSelect = vue.computed(() => {
return is.isArray(props.optionsOfPrefixSelect) ? props.optionsOfPrefixSelect : [];
});
const optionsOfSuffixSelect = vue.computed(() => {
return is.isArray(props.optionsOfSuffixSelect) ? props.optionsOfSuffixSelect : [];
});
const showPrefixSelect = vue.computed(() => {
return props.showPrefixSelect && optionsOfPrefixSelect.value.length;
});
const showSuffixSelect = vue.computed(() => {
return props.showSuffixSelect && optionsOfSuffixSelect.value.length;
});
const suggesstions = vue.computed(() => {
return is.isArray(props.suggesstions) ? props.suggesstions : [];
});
const formatOptions = (options, keyword) => {
return options.map((item) => {
return {
...item,
labelSegments: string.splitByMatch(item.label, keyword)
};
}).filter((v) => v.labelSegments.length > 1);
};
const realSuggesstions = vue.ref(formatOptions(suggesstions.value, inputValue.value));
const isShowingSuggesstiongs = vue.computed(() => {
var _a, _b;
return ((_a = realSuggesstions.value) == null ? void 0 : _a.length) && ((_b = searchSelectRef.value) == null ? void 0 : _b.isSelecting);
});
const updateSuggesstions = async (keyword) => {
var _a, _b;
realSuggesstions.value = formatOptions(suggesstions.value, keyword);
if (realSuggesstions.value.length) {
await vue.nextTick();
(_b = (_a = searchSelectRef.value) == null ? void 0 : _a.selectRef) == null ? void 0 : _b.click();
}
};
const formatSuggesstions = helper.debounce(updateSuggesstions, 200, false);
const emitUpdateValue = () => {
emits("update:modelValue", inputValue.value);
};
const onInput = (evt, value) => {
var _a, _b;
emits("input", evt, value);
formatSuggesstions(value);
(_b = formItemInjection == null ? void 0 : (_a = formItemInjection.fieldHandlers).onInput) == null ? void 0 : _b.call(_a);
};
const onFocus = (evt) => {
var _a, _b;
emits("focus", evt);
(_b = formItemInjection == null ? void 0 : (_a = formItemInjection.fieldHandlers).onFocus) == null ? void 0 : _b.call(_a);
};
const onBlur = (evt) => {
var _a, _b;
emits("blur", evt);
(_b = formItemInjection == null ? void 0 : (_a = formItemInjection.fieldHandlers).onBlur) == null ? void 0 : _b.call(_a);
};
const onPressEnter = (evt) => {
emits("pressEnter", evt);
};
const onClear = (evt) => {
emits("clear", evt);
updateSuggesstions(inputValue.value);
};
const emitChange = () => {
var _a, _b;
if (inputValue.value !== previousValue) {
emits("change", inputValue.value);
previousValue = inputValue.value;
(_b = formItemInjection == null ? void 0 : (_a = formItemInjection.fieldHandlers).onChange) == null ? void 0 : _b.call(_a);
}
};
const onChange = (value) => {
inputValue.value = value;
emitChange();
};
const onUpdateModelValue = (value) => {
inputValue.value = value;
emitUpdateValue();
};
const onSuggesstionSelected = (val) => {
onUpdateModelValue(val);
emits("suggesstion-selected", val);
};
const handleClick = () => {
if (props.disabled) {
return;
}
isOutClick.value = false;
updateSuggesstions(inputValue.value);
};
const shouldHideOptions = () => {
return isOutClick.value || !isShowingSuggesstiongs.value;
};
const onOutClick = () => {
isOutClick.value = true;
};
vue.watch(
() => props.modelValue,
(val) => {
if (inputValue.value !== val) {
inputValue.value = val || "";
}
}
);
vue.watch(selectedValOfPrefix, (val) => {
emits("prefix-selected", val);
});
vue.watch(selectedValOfSuffix, (val) => {
emits("suffix-selected", val);
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
"div",
{
class: vue.normalizeClass(["o-search", [{ "o-search-with-prefix": showPrefixSelect.value, "o-search-with-suffix": showSuffixSelect.value }, `o-search-${props.size}`]])
},
[
vue.createCommentVNode(" 头部筛选框 "),
props.showPrefixSelect ? (vue.openBlock(), vue.createBlock(vue.unref(index.OSelect), {
key: 0,
modelValue: selectedValOfPrefix.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedValOfPrefix.value = $event),
class: "o-search-prefix o-search-select",
placeholder: props.placeholderOfPrefixSelect,
size: size.value,
round: props.round,
color: color.value,
variant: props.variant,
disabled: props.disabled,
readonly: props.readonly
}, {
prefix: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "prefix-of-search-prefix")
]),
default: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(optionsOfPrefixSelect.value, (item) => {
return vue.openBlock(), vue.createBlock(vue.unref(index$1.OOption), {
key: item.value,
label: item.label,
value: item.value
}, null, 8, ["label", "value"]);
}),
128
/* KEYED_FRAGMENT */
))
]),
_: 3
/* FORWARDED */
}, 8, ["modelValue", "placeholder", "size", "round", "color", "variant", "disabled", "readonly"])) : vue.createCommentVNode("v-if", true),
vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
class: "o-search-input-wrap",
onClick: handleClick
}, [
vue.createVNode(vue.unref(index$2.OInput), {
ref_key: "searchInputRef",
ref: searchInputRef,
class: "o-search-input",
"model-value": inputValue.value,
placeholder: props.placeholder,
size: size.value,
round: props.round,
color: color.value,
variant: props.variant,
disabled: props.disabled,
readonly: props.readonly,
clearable: props.clearable,
onInput,
onBlur,
onFocus,
onChange,
onClear,
onPressEnter,
"onUpdate:modelValue": onUpdateModelValue,
onClick: _cache[1] || (_cache[1] = vue.withModifiers(() => {
}, ["prevent"]))
}, {
prefix: vue.withCtx(() => [
vue.createVNode(vue.unref(OIconSearch), { class: "o-search-icon" })
]),
_: 1
/* STABLE */
}, 8, ["model-value", "placeholder", "size", "round", "color", "variant", "disabled", "readonly", "clearable"]),
vue.createCommentVNode(" 联想建议筛选框 "),
realSuggesstions.value.length ? (vue.openBlock(), vue.createBlock(vue.unref(index.OSelect), {
key: 0,
ref_key: "searchSelectRef",
ref: searchSelectRef,
class: "o-search-select-placeholder",
"option-width-mode": "width",
trigger: "click-outclick",
"model-value": inputValue.value,
size: size.value,
round: props.round,
color: color.value,
variant: props.variant,
disabled: props.disabled,
readonly: props.readonly,
"before-options-hide": shouldHideOptions,
"no-responsive": true,
"onUpdate:modelValue": onSuggesstionSelected,
onClick: _cache[2] || (_cache[2] = vue.withModifiers(() => {
}, ["stop"]))
}, {
default: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(realSuggesstions.value, (item) => {
return vue.openBlock(), vue.createBlock(vue.unref(index$1.OOption), {
key: item.value,
label: item.label,
value: item.value
}, {
default: vue.withCtx(() => [
vue.createElementVNode("div", _hoisted_1, [
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(item.labelSegments, (segment, idx) => {
return vue.openBlock(), vue.createElementBlock(
"span",
{
key: idx,
class: vue.normalizeClass(["o-search-label", { "o-search-keyword-highlight": idx % 2 !== 0 }])
},
vue.toDisplayString(segment),
3
/* TEXT, CLASS */
);
}),
128
/* KEYED_FRAGMENT */
))
])
]),
_: 2
/* DYNAMIC */
}, 1032, ["label", "value"]);
}),
128
/* KEYED_FRAGMENT */
))
]),
_: 1
/* STABLE */
}, 8, ["model-value", "size", "round", "color", "variant", "disabled", "readonly"])) : vue.createCommentVNode("v-if", true)
])), [
[vue.unref(clickOutside.vOutClick), onOutClick]
]),
vue.createCommentVNode(" 尾部筛选框 "),
props.showSuffixSelect ? (vue.openBlock(), vue.createBlock(vue.unref(index.OSelect), {
key: 1,
modelValue: selectedValOfSuffix.value,
"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => selectedValOfSuffix.value = $event),
class: "o-search-suffix o-search-select",
placeholder: props.placeholderOfSuffixSelect,
size: size.value,
round: props.round,
color: color.value,
variant: props.variant,
disabled: props.disabled,
readonly: props.readonly
}, {
prefix: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "prefix-of-search-suffix")
]),
default: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(optionsOfSuffixSelect.value, (item) => {
return vue.openBlock(), vue.createBlock(vue.unref(index$1.OOption), {
key: item.value,
label: item.label,
value: item.value
}, null, 8, ["label", "value"]);
}),
128
/* KEYED_FRAGMENT */
))
]),
_: 3
/* FORWARDED */
}, 8, ["modelValue", "placeholder", "size", "round", "color", "variant", "disabled", "readonly"])) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
};
}
});
module.exports = _sfc_main;