diff --git a/components/lib/autocomplete/AutoComplete.d.ts b/components/lib/autocomplete/AutoComplete.d.ts index 1c2bd0edb..494cfb10d 100755 --- a/components/lib/autocomplete/AutoComplete.d.ts +++ b/components/lib/autocomplete/AutoComplete.d.ts @@ -20,6 +20,7 @@ export declare type AutoCompletePassThroughOptionType = AutoCompletePassThroughA export interface AutoCompletePassThroughMethodOptions { props: AutoCompleteProps; state: AutoCompleteState; + context: AutoCompleteContext; } /** @@ -173,10 +174,55 @@ export interface AutoCompletePassThroughAttributes { */ export interface AutoCompleteState { /** - * Current collapsed state as a boolean. + * Current id state as a string. + */ + id: string; + /** + * Current focused state as a boolean. * @defaultValue false */ - d_collapsed: boolean; + focused: boolean; + /** + * Current focused item index as a number. + * @defaultvalue -1 + */ + focusedOptionIndex: number; + /** + * Current focused item index as a number. + * @defaultvalue -1 + */ + focusedMultipleOptionIndex: number; + /** + * Current overlay visible state as a boolean. + * @defaultValue false + */ + overlayVisible: boolean; + /** + * Current search state as a boolean. + * @defaultValue false + */ + searching: boolean; +} + +/** + * Defines current options in AutoComplete component. + */ +export interface AutoCompleteContext { + /** + * Current selection state of the item as a boolean. + * @defaultValue false + */ + selected: boolean; + /** + * Current focus state of the item as a boolean. + * @defaultValue false + */ + focused: boolean; + /** + * Current disabled state of the item as a boolean. + * @defaultValue false + */ + disabled: boolean; } /** diff --git a/components/lib/autocomplete/AutoComplete.vue b/components/lib/autocomplete/AutoComplete.vue index bbb1f8a5b..2b90502d3 100755 --- a/components/lib/autocomplete/AutoComplete.vue +++ b/components/lib/autocomplete/AutoComplete.vue @@ -98,7 +98,7 @@ - + {{ searchResultMessageText }} @@ -141,7 +141,7 @@ :aria-posinset="getAriaPosInset(getOptionIndex(i, getItemOptions))" @click="onOptionSelect($event, option)" @mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))" - v-bind="ptm('item')" + v-bind="getPTOptions(option, getItemOptions, i, 'item')" > {{ getOptionLabel(option) }} {{ getOptionLabel(option) }} @@ -158,7 +158,7 @@ - + {{ selectedMessageText }} @@ -409,6 +409,15 @@ export default { getOptionRenderKey(option, index) { return (this.dataKey ? ObjectUtils.resolveFieldData(option, this.dataKey) : this.getOptionLabel(option)) + '_' + index; }, + getPTOptions(option, itemOptions, index, key) { + return this.ptm(key, { + context: { + selected: this.isSelected(option), + focused: this.focusedOptionIndex === this.getOptionIndex(index, itemOptions), + disabled: this.isOptionDisabled(option) + } + }); + }, isOptionDisabled(option) { return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : false; },