yanzhen-design-vue
Version:
56 lines (55 loc) • 1.78 kB
JavaScript
import { ref, computed } from "vue";
const SEARCH_MARK = "__rc_cascader_search_mark__";
const defaultFilter = (search, options, { label }) => options.some((opt) => String(opt[label]).toLowerCase().includes(search.toLowerCase()));
const defaultRender = ({ path, fieldNames }) => path.map((opt) => opt[fieldNames.label]).join(" / ");
function useSearchOptions(options, fieldNames) {
const searchValue = ref("");
const setSearchValue = (value) => {
searchValue.value = value;
};
const searchOptions = computed(() => {
const filter = defaultFilter;
const render = defaultRender;
const filteredOptions = [];
if (!searchValue.value) {
return [];
}
function dig(list, pathOptions) {
list.forEach((option) => {
const connectedPathOptions = [...pathOptions, option];
const children = option[fieldNames.value.children];
if (
// If is leaf option
!children || children.length === 0
) {
if (filter(searchValue.value, connectedPathOptions, { label: fieldNames.value.label })) {
filteredOptions.push({
...option,
[fieldNames.value.label]: render({
// inputValue: searchValue.value,
path: connectedPathOptions,
// prefixCls: prefixCls.value,
fieldNames: fieldNames.value
}),
[SEARCH_MARK]: connectedPathOptions
});
}
}
if (children) {
dig(option[fieldNames.value.children], connectedPathOptions);
}
});
}
dig(options.value, []);
return filteredOptions;
});
return {
searchValue,
setSearchValue,
searchOptions
};
}
export {
SEARCH_MARK,
useSearchOptions
};