import { Option, OptGroup } from '../vc-select' import Select, { AbstractSelectProps, SelectValue } from '../select' import Input from '../input' import InputElement from './InputElement' import PropTypes from '../_util/vue-types' import { getComponentFromProp, getOptionProps, filterEmpty } from '../_util/props-util' const DataSourceItemObject = PropTypes.shape({ value: String, text: String, }).loose const DataSourceItemType = PropTypes.oneOfType([ PropTypes.string, DataSourceItemObject, ]).isRequired // export interface AutoCompleteInputProps { // onChange?: React.FormEventHandler; // value: any; // } const AutoCompleteProps = { ...AbstractSelectProps, value: SelectValue, defaultValue: SelectValue, dataSource: PropTypes.arrayOf(DataSourceItemType), optionLabelProp: String, dropdownMatchSelectWidth: PropTypes.bool, // onChange?: (value: SelectValue) => void; // onSelect?: (value: SelectValue, option: Object) => any; } export default { name: 'AAutoComplete', props: { ...AutoCompleteProps, prefixCls: PropTypes.string.def('ant-select'), showSearch: PropTypes.bool.def(false), transitionName: PropTypes.string.def('slide-up'), choiceTransitionName: PropTypes.string.def('zoom'), optionLabelProp: PropTypes.string.def('children'), filterOption: PropTypes.oneOfType([ PropTypes.bool, PropTypes.func, ]).def(false), defaultActiveFirstOption: PropTypes.bool.def(true), }, Option: { ...Option, name: 'AAutoCompleteOption' }, OptGroup: { ...OptGroup, name: 'AAutoCompleteOptGroup' }, model: { prop: 'value', event: 'change', }, methods: { getInputElement () { const { $slots } = this const children = filterEmpty($slots.default) const element = children.length ? children[0] : return ( {element} ) }, focus () { this.$nextTick(() => { if (this.$refs.select) { this.$refs.select.focus() } }) }, blur () { this.$nextTick(() => { if (this.$refs.select) { this.$refs.select.blur() } }) }, }, render () { const { size, prefixCls, optionLabelProp, dataSource, $slots, $listeners, } = this const cls = { [`${prefixCls}-lg`]: size === 'large', [`${prefixCls}-sm`]: size === 'small', [`${prefixCls}-show-search`]: true, [`${prefixCls}-auto-complete`]: true, } let options const childArray = filterEmpty($slots.dataSource) if (childArray.length) { options = childArray } else { options = dataSource ? dataSource.map((item) => { switch (typeof item) { case 'string': return case 'object': return ( ) default: throw new Error('AutoComplete[dataSource] only supports type `string[] | Object[]`.') } }) : [] } const selectProps = { props: { ...getOptionProps(this), mode: 'combobox', optionLabelProp, getInputElement: this.getInputElement, notFoundContent: getComponentFromProp(this, 'notFoundContent'), }, class: cls, ref: 'select', on: { ...$listeners, }, } return ( ) }, }