pull/5756/head
tugcekucukoglu 2024-05-10 14:50:11 +03:00
parent b37dd8d4d6
commit be1cf3625b
5 changed files with 124 additions and 43 deletions

View File

@ -86,7 +86,7 @@ export interface AutoCompleteChangeEvent {
* Custom item select event.
* @see {@link AutoCompleteEmits['item-select']}
*/
export interface AutoCompleteItemSelectEvent {
export interface AutoCompleteOptionSelectEvent {
/**
* Browser event
*/
@ -100,9 +100,9 @@ export interface AutoCompleteItemSelectEvent {
/**
* Custom item unselect event.
* @see {@link AutoCompleteEmits['item-unselect']}
* @extends AutoCompleteItemSelectEvent
* @extends AutoCompleteOptionSelectEvent
*/
export interface AutoCompleteItemUnselectEvent extends AutoCompleteItemSelectEvent {}
export interface AutoCompleteOptionUnselectEvent extends AutoCompleteOptionSelectEvent {}
/**
* Custom dropdown click event.
@ -795,15 +795,27 @@ export interface AutoCompleteEmits {
*/
blur(event: Event): void;
/**
* @deprecated since v4.0. Use 'option-select' emit.
* Callback to invoke when a suggestion is selected.
* @param {AutoCompleteItemSelectEvent} event - Custom item select event.
* @param {AutoCompleteOptionSelectEvent} event - Custom option select event.
*/
'item-select'(event: AutoCompleteItemSelectEvent): void;
'item-select'(event: AutoCompleteOptionSelectEvent): void;
/**
* @deprecated since v4.0. Use 'option-unselect' emit.
* Callback to invoke when a selected value is removed.
* @param {AutoCompleteOptionUnselectEvent} event - Custom option unselect event.
*/
'item-unselect'(event: AutoCompleteOptionUnselectEvent): void;
/**
* Callback to invoke when a suggestion is selected.
* @param {AutoCompleteOptionSelectEvent} event - Custom option select event.
*/
'option-select'(event: AutoCompleteOptionSelectEvent): void;
/**
* Callback to invoke when a selected value is removed.
* @param {AutoCompleteItemUnselectEvent} event - Custom item unselect event.
* @param {AutoCompleteOptionUnselectEvent} event - Custom option unselect event.
*/
'item-unselect'(event: AutoCompleteItemUnselectEvent): void;
'option-unselect'(event: AutoCompleteOptionUnselectEvent): void;
/**
* Callback to invoke to when dropdown button is clicked.
* @param {AutoCompleteDropdownClickEvent} event - Custom dropdown click event.

View File

@ -197,7 +197,7 @@ export default {
name: 'AutoComplete',
extends: BaseAutoComplete,
inheritAttrs: false,
emits: ['update:modelValue', 'change', 'focus', 'blur', 'item-select', 'item-unselect', 'dropdown-click', 'clear', 'complete', 'before-show', 'before-hide', 'show', 'hide'],
emits: ['update:modelValue', 'change', 'focus', 'blur', 'item-select', 'item-unselect', 'option-select', 'option-unselect', 'dropdown-click', 'clear', 'complete', 'before-show', 'before-hide', 'show', 'hide'],
outsideClickListener: null,
resizeListener: null,
scrollHandler: null,
@ -531,6 +531,7 @@ export default {
}
this.$emit('item-select', { originalEvent: event, value: option });
this.$emit('option-select', { originalEvent: event, value: option });
isHide && this.hide(true);
},
@ -662,6 +663,7 @@ export default {
this.$emit('update:modelValue', newValue);
this.$emit('item-unselect', { originalEvent: event, value: removedValue });
this.$emit('option-unselect', { originalEvent: event, value: removedValue });
}
event.stopPropagation(); // To prevent onBackspaceKeyOnMultiple method
@ -843,6 +845,7 @@ export default {
this.updateModel(event, value);
this.$emit('item-unselect', { originalEvent: event, value: removedOption });
this.$emit('option-unselect', { originalEvent: event, value: removedOption });
this.dirty = true;
DomHandler.focus(this.multiple ? this.$refs.focusInput : this.$refs.focusInput.$el);
},

View File

@ -85,7 +85,7 @@ export interface ListboxChangeEvent {
* Custom double click event.
* @see {@link ListboxEmits.['item-dblclick']}
*/
export interface ListboxItemDblClickEvent {
export interface ListboxOptionDblClickEvent {
/**
* Original event
*/
@ -582,10 +582,15 @@ export interface ListboxEmits {
*/
filter(event: ListboxFilterEvent): void;
/**
* Callback to invoke on item double click.
* @param {ListboxItemDblClickEvent} event - Custom item double click event.
* Callback to invoke on option double click.
* @param {ListboxOptionDblClickEvent} event - Custom option double click event.
*/
'item-dblclick'(event: ListboxItemDblClickEvent): void;
'item-dblclick'(event: ListboxOptionDblClickEvent): void;
/**
* Callback to invoke on option double click.
* @param {ListboxOptionDblClickEvent} event - Custom option double click event.
*/
'option-dblclick'(event: ListboxOptionDblClickEvent): void;
}
/**

View File

@ -149,7 +149,7 @@ export default {
name: 'Listbox',
extends: BaseListbox,
inheritAttrs: false,
emits: ['update:modelValue', 'change', 'focus', 'blur', 'filter', 'item-dblclick'],
emits: ['update:modelValue', 'change', 'focus', 'blur', 'filter', 'item-dblclick', 'option-dblclick'],
list: null,
virtualScroller: null,
optionTouched: false,
@ -342,6 +342,10 @@ export default {
originalEvent: event,
value: item
});
this.$emit('option-dblclick', {
originalEvent: event,
value: item
});
},
onOptionSelectSingle(event, option) {
let selected = this.isSelected(option);

View File

@ -4109,7 +4109,7 @@
],
"methods": []
},
"AutoCompleteItemSelectEvent": {
"AutoCompleteOptionSelectEvent": {
"description": "Custom item select event.",
"relatedProp": "AutoCompleteEmits['item-select']",
"props": [
@ -4131,9 +4131,9 @@
}
],
"methods": [],
"extendedBy": "AutoCompleteItemUnselectEvent"
"extendedBy": "AutoCompleteOptionUnselectEvent"
},
"AutoCompleteItemUnselectEvent": {
"AutoCompleteOptionUnselectEvent": {
"description": "Custom item unselect event.",
"relatedProp": "AutoCompleteEmits['item-unselect']",
"props": [
@ -4155,7 +4155,7 @@
}
],
"methods": [],
"extendedTypes": "AutoCompleteItemSelectEvent"
"extendedTypes": "AutoCompleteOptionSelectEvent"
},
"AutoCompleteDropdownClickEvent": {
"description": "Custom dropdown click event.",
@ -4288,12 +4288,12 @@
"description": "Used to pass attributes to the dropdown icon's DOM element."
},
{
"name": "panel",
"name": "overlay",
"optional": true,
"readonly": false,
"type": "AutoCompletePassThroughOptionType",
"default": "",
"description": "Used to pass attributes to the panel's DOM element."
"description": "Used to pass attributes to the overlay's DOM element."
},
{
"name": "virtualScroller",
@ -4544,7 +4544,7 @@
"readonly": false,
"type": "string",
"default": "14rem",
"description": "Maximum height of the suggestions panel."
"description": "Maximum height of the suggestions overlay."
},
{
"name": "dropdown",
@ -4697,7 +4697,7 @@
"readonly": false,
"type": "object",
"default": "",
"description": "Inline style of the overlay panel."
"description": "Inline style of the overlay."
},
{
"name": "panelClass",
@ -4705,7 +4705,23 @@
"readonly": false,
"type": "string | object",
"default": "",
"description": "Style class of the overlay panel."
"description": "Style class of the overlay."
},
{
"name": "overlayStyle",
"optional": true,
"readonly": false,
"type": "object",
"default": "",
"description": "Inline style of the overlay overlay."
},
{
"name": "overlayClass",
"optional": true,
"readonly": false,
"type": "string | object",
"default": "",
"description": "Style class of the overlay overlay."
},
{
"name": "dropdownIcon",
@ -4772,7 +4788,7 @@
"readonly": false,
"type": "boolean",
"default": "false",
"description": "Whether to focus on the first visible or selected element when the overlay panel is shown."
"description": "Whether to focus on the first visible or selected element when the overlay is shown."
},
{
"name": "selectOnFocus",
@ -5147,12 +5163,13 @@
{
"name": "event",
"optional": false,
"type": "AutoCompleteItemSelectEvent",
"description": "Custom item select event."
"type": "AutoCompleteOptionSelectEvent",
"description": "Custom option select event."
}
],
"returnType": "void",
"description": "Callback to invoke when a suggestion is selected."
"description": "",
"deprecated": "since v4.0. Use 'option-select' emit.\nCallback to invoke when a suggestion is selected."
},
{
"name": "item-unselect",
@ -5160,8 +5177,35 @@
{
"name": "event",
"optional": false,
"type": "AutoCompleteItemUnselectEvent",
"description": "Custom item unselect event."
"type": "AutoCompleteOptionUnselectEvent",
"description": "Custom option unselect event."
}
],
"returnType": "void",
"description": "",
"deprecated": "since v4.0. Use 'option-unselect' emit.\nCallback to invoke when a selected value is removed."
},
{
"name": "option-select",
"parameters": [
{
"name": "event",
"optional": false,
"type": "AutoCompleteOptionSelectEvent",
"description": "Custom option select event."
}
],
"returnType": "void",
"description": "Callback to invoke when a suggestion is selected."
},
{
"name": "option-unselect",
"parameters": [
{
"name": "event",
"optional": false,
"type": "AutoCompleteOptionUnselectEvent",
"description": "Custom option unselect event."
}
],
"returnType": "void",
@ -11760,36 +11804,36 @@
"description": "Used to pass attributes to the list's DOM element."
},
{
"name": "item",
"name": "option",
"optional": true,
"readonly": false,
"type": "CascadeSelectPassThroughOptionType",
"default": "",
"description": "Used to pass attributes to the item's DOM element."
"description": "Used to pass attributes to the option's DOM element."
},
{
"name": "itemContent",
"name": "optionContent",
"optional": true,
"readonly": false,
"type": "CascadeSelectPassThroughOptionType",
"default": "",
"description": "Used to pass attributes to the item content's DOM element."
"description": "Used to pass attributes to the option content's DOM element."
},
{
"name": "itemText",
"name": "optionText",
"optional": true,
"readonly": false,
"type": "CascadeSelectPassThroughOptionType",
"default": "",
"description": "Used to pass attributes to the item text's DOM element."
"description": "Used to pass attributes to the option text's DOM element."
},
{
"name": "itemList",
"name": "optionList",
"optional": true,
"readonly": false,
"type": "CascadeSelectPassThroughOptionType",
"default": "",
"description": "Used to pass attributes to the item list's DOM element."
"description": "Used to pass attributes to the option list's DOM element."
},
{
"name": "groupIcon",
@ -11938,7 +11982,7 @@
"relatedProp": "",
"props": [
{
"name": "item",
"name": "option",
"optional": false,
"readonly": false,
"type": "any",
@ -11962,12 +12006,12 @@
"description": "Level of the option."
},
{
"name": "itemGroup",
"name": "optionGroup",
"optional": false,
"readonly": false,
"type": "boolean",
"default": "",
"description": "Current item group state of option as a boolean."
"description": "Current option group state of option as a boolean."
},
{
"name": "active",
@ -40798,7 +40842,7 @@
],
"methods": []
},
"ListboxItemDblClickEvent": {
"ListboxOptionDblClickEvent": {
"description": "Custom double click event.",
"relatedProp": "listboxListboxEmits.['item-dblclick']",
"props": [
@ -41592,12 +41636,25 @@
{
"name": "event",
"optional": false,
"type": "ListboxItemDblClickEvent",
"description": "Custom item double click event."
"type": "ListboxOptionDblClickEvent",
"description": "Custom option double click event."
}
],
"returnType": "void",
"description": "Callback to invoke on item double click."
"description": "Callback to invoke on option double click."
},
{
"name": "option-dblclick",
"parameters": [
{
"name": "event",
"optional": false,
"type": "ListboxOptionDblClickEvent",
"description": "Custom option double click event."
}
],
"returnType": "void",
"description": "Callback to invoke on option double click."
}
]
}