112 lines
3.0 KiB
JavaScript
112 lines
3.0 KiB
JavaScript
import { useTooltipContentProps } from '../../tooltip/src/content.mjs';
|
|
import { inputProps } from '../../input/src/input.mjs';
|
|
import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
|
|
import { NOOP, isObject, isString } from '@vue/shared';
|
|
import { isNumber } from '../../../utils/types.mjs';
|
|
import { CHANGE_EVENT, INPUT_EVENT, UPDATE_MODEL_EVENT } from '../../../constants/event.mjs';
|
|
|
|
const autocompleteProps = buildProps({
|
|
...inputProps,
|
|
/**
|
|
* @description key name of the input suggestion object for display
|
|
*/
|
|
valueKey: {
|
|
type: String,
|
|
default: "value"
|
|
},
|
|
/**
|
|
* @description binding value
|
|
*/
|
|
modelValue: {
|
|
type: [String, Number],
|
|
default: ""
|
|
},
|
|
/**
|
|
* @description debounce delay when typing, in milliseconds
|
|
*/
|
|
debounce: {
|
|
type: Number,
|
|
default: 300
|
|
},
|
|
/**
|
|
* @description placement of the popup menu
|
|
*/
|
|
placement: {
|
|
type: definePropType(String),
|
|
values: [
|
|
"top",
|
|
"top-start",
|
|
"top-end",
|
|
"bottom",
|
|
"bottom-start",
|
|
"bottom-end"
|
|
],
|
|
default: "bottom-start"
|
|
},
|
|
/**
|
|
* @description a method to fetch input suggestions. When suggestions are ready, invoke `callback(data:[])` to return them to Autocomplete
|
|
*/
|
|
fetchSuggestions: {
|
|
type: definePropType([Function, Array]),
|
|
default: NOOP
|
|
},
|
|
/**
|
|
* @description custom class name for autocomplete's dropdown
|
|
*/
|
|
popperClass: useTooltipContentProps.popperClass,
|
|
/**
|
|
* @description custom style for autocomplete's dropdown
|
|
*/
|
|
popperStyle: useTooltipContentProps.popperStyle,
|
|
/**
|
|
* @description whether show suggestions when input focus
|
|
*/
|
|
triggerOnFocus: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
/**
|
|
* @description whether to emit a `select` event on enter when there is no autocomplete match
|
|
*/
|
|
selectWhenUnmatched: Boolean,
|
|
/**
|
|
* @description whether to hide the loading icon in remote search
|
|
*/
|
|
hideLoading: Boolean,
|
|
/**
|
|
* @description whether select dropdown is teleported to the body
|
|
*/
|
|
teleported: useTooltipContentProps.teleported,
|
|
/**
|
|
* @description which select dropdown appends to
|
|
*/
|
|
appendTo: useTooltipContentProps.appendTo,
|
|
/**
|
|
* @description whether to highlight first item in remote search suggestions by default
|
|
*/
|
|
highlightFirstItem: Boolean,
|
|
/**
|
|
* @description whether the width of the dropdown is the same as the input
|
|
*/
|
|
fitInputWidth: Boolean,
|
|
/**
|
|
* @description whether keyboard navigation loops from end to start
|
|
*/
|
|
loopNavigation: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
});
|
|
const autocompleteEmits = {
|
|
[UPDATE_MODEL_EVENT]: (value) => isString(value) || isNumber(value),
|
|
[INPUT_EVENT]: (value) => isString(value) || isNumber(value),
|
|
[CHANGE_EVENT]: (value) => isString(value) || isNumber(value),
|
|
focus: (evt) => evt instanceof FocusEvent,
|
|
blur: (evt) => evt instanceof FocusEvent,
|
|
clear: () => true,
|
|
select: (item) => isObject(item)
|
|
};
|
|
|
|
export { autocompleteEmits, autocompleteProps };
|
|
//# sourceMappingURL=autocomplete.mjs.map
|