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

View File

@ -197,7 +197,7 @@ export default {
name: 'AutoComplete', name: 'AutoComplete',
extends: BaseAutoComplete, extends: BaseAutoComplete,
inheritAttrs: false, 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, outsideClickListener: null,
resizeListener: null, resizeListener: null,
scrollHandler: null, scrollHandler: null,
@ -531,6 +531,7 @@ export default {
} }
this.$emit('item-select', { originalEvent: event, value: option }); this.$emit('item-select', { originalEvent: event, value: option });
this.$emit('option-select', { originalEvent: event, value: option });
isHide && this.hide(true); isHide && this.hide(true);
}, },
@ -662,6 +663,7 @@ export default {
this.$emit('update:modelValue', newValue); this.$emit('update:modelValue', newValue);
this.$emit('item-unselect', { originalEvent: event, value: removedValue }); this.$emit('item-unselect', { originalEvent: event, value: removedValue });
this.$emit('option-unselect', { originalEvent: event, value: removedValue });
} }
event.stopPropagation(); // To prevent onBackspaceKeyOnMultiple method event.stopPropagation(); // To prevent onBackspaceKeyOnMultiple method
@ -843,6 +845,7 @@ export default {
this.updateModel(event, value); this.updateModel(event, value);
this.$emit('item-unselect', { originalEvent: event, value: removedOption }); this.$emit('item-unselect', { originalEvent: event, value: removedOption });
this.$emit('option-unselect', { originalEvent: event, value: removedOption });
this.dirty = true; this.dirty = true;
DomHandler.focus(this.multiple ? this.$refs.focusInput : this.$refs.focusInput.$el); DomHandler.focus(this.multiple ? this.$refs.focusInput : this.$refs.focusInput.$el);
}, },

View File

@ -85,7 +85,7 @@ export interface ListboxChangeEvent {
* Custom double click event. * Custom double click event.
* @see {@link ListboxEmits.['item-dblclick']} * @see {@link ListboxEmits.['item-dblclick']}
*/ */
export interface ListboxItemDblClickEvent { export interface ListboxOptionDblClickEvent {
/** /**
* Original event * Original event
*/ */
@ -582,10 +582,15 @@ export interface ListboxEmits {
*/ */
filter(event: ListboxFilterEvent): void; filter(event: ListboxFilterEvent): void;
/** /**
* Callback to invoke on item double click. * Callback to invoke on option double click.
* @param {ListboxItemDblClickEvent} event - Custom item double click event. * @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', name: 'Listbox',
extends: BaseListbox, extends: BaseListbox,
inheritAttrs: false, inheritAttrs: false,
emits: ['update:modelValue', 'change', 'focus', 'blur', 'filter', 'item-dblclick'], emits: ['update:modelValue', 'change', 'focus', 'blur', 'filter', 'item-dblclick', 'option-dblclick'],
list: null, list: null,
virtualScroller: null, virtualScroller: null,
optionTouched: false, optionTouched: false,
@ -342,6 +342,10 @@ export default {
originalEvent: event, originalEvent: event,
value: item value: item
}); });
this.$emit('option-dblclick', {
originalEvent: event,
value: item
});
}, },
onOptionSelectSingle(event, option) { onOptionSelectSingle(event, option) {
let selected = this.isSelected(option); let selected = this.isSelected(option);

View File

@ -4109,7 +4109,7 @@
], ],
"methods": [] "methods": []
}, },
"AutoCompleteItemSelectEvent": { "AutoCompleteOptionSelectEvent": {
"description": "Custom item select event.", "description": "Custom item select event.",
"relatedProp": "AutoCompleteEmits['item-select']", "relatedProp": "AutoCompleteEmits['item-select']",
"props": [ "props": [
@ -4131,9 +4131,9 @@
} }
], ],
"methods": [], "methods": [],
"extendedBy": "AutoCompleteItemUnselectEvent" "extendedBy": "AutoCompleteOptionUnselectEvent"
}, },
"AutoCompleteItemUnselectEvent": { "AutoCompleteOptionUnselectEvent": {
"description": "Custom item unselect event.", "description": "Custom item unselect event.",
"relatedProp": "AutoCompleteEmits['item-unselect']", "relatedProp": "AutoCompleteEmits['item-unselect']",
"props": [ "props": [
@ -4155,7 +4155,7 @@
} }
], ],
"methods": [], "methods": [],
"extendedTypes": "AutoCompleteItemSelectEvent" "extendedTypes": "AutoCompleteOptionSelectEvent"
}, },
"AutoCompleteDropdownClickEvent": { "AutoCompleteDropdownClickEvent": {
"description": "Custom dropdown click event.", "description": "Custom dropdown click event.",
@ -4288,12 +4288,12 @@
"description": "Used to pass attributes to the dropdown icon's DOM element." "description": "Used to pass attributes to the dropdown icon's DOM element."
}, },
{ {
"name": "panel", "name": "overlay",
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "AutoCompletePassThroughOptionType", "type": "AutoCompletePassThroughOptionType",
"default": "", "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", "name": "virtualScroller",
@ -4544,7 +4544,7 @@
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "14rem", "default": "14rem",
"description": "Maximum height of the suggestions panel." "description": "Maximum height of the suggestions overlay."
}, },
{ {
"name": "dropdown", "name": "dropdown",
@ -4697,7 +4697,7 @@
"readonly": false, "readonly": false,
"type": "object", "type": "object",
"default": "", "default": "",
"description": "Inline style of the overlay panel." "description": "Inline style of the overlay."
}, },
{ {
"name": "panelClass", "name": "panelClass",
@ -4705,7 +4705,23 @@
"readonly": false, "readonly": false,
"type": "string | object", "type": "string | object",
"default": "", "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", "name": "dropdownIcon",
@ -4772,7 +4788,7 @@
"readonly": false, "readonly": false,
"type": "boolean", "type": "boolean",
"default": "false", "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", "name": "selectOnFocus",
@ -5147,12 +5163,13 @@
{ {
"name": "event", "name": "event",
"optional": false, "optional": false,
"type": "AutoCompleteItemSelectEvent", "type": "AutoCompleteOptionSelectEvent",
"description": "Custom item select event." "description": "Custom option select event."
} }
], ],
"returnType": "void", "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", "name": "item-unselect",
@ -5160,8 +5177,35 @@
{ {
"name": "event", "name": "event",
"optional": false, "optional": false,
"type": "AutoCompleteItemUnselectEvent", "type": "AutoCompleteOptionUnselectEvent",
"description": "Custom item unselect event." "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", "returnType": "void",
@ -11760,36 +11804,36 @@
"description": "Used to pass attributes to the list's DOM element." "description": "Used to pass attributes to the list's DOM element."
}, },
{ {
"name": "item", "name": "option",
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "CascadeSelectPassThroughOptionType", "type": "CascadeSelectPassThroughOptionType",
"default": "", "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, "optional": true,
"readonly": false, "readonly": false,
"type": "CascadeSelectPassThroughOptionType", "type": "CascadeSelectPassThroughOptionType",
"default": "", "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, "optional": true,
"readonly": false, "readonly": false,
"type": "CascadeSelectPassThroughOptionType", "type": "CascadeSelectPassThroughOptionType",
"default": "", "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, "optional": true,
"readonly": false, "readonly": false,
"type": "CascadeSelectPassThroughOptionType", "type": "CascadeSelectPassThroughOptionType",
"default": "", "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", "name": "groupIcon",
@ -11938,7 +11982,7 @@
"relatedProp": "", "relatedProp": "",
"props": [ "props": [
{ {
"name": "item", "name": "option",
"optional": false, "optional": false,
"readonly": false, "readonly": false,
"type": "any", "type": "any",
@ -11962,12 +12006,12 @@
"description": "Level of the option." "description": "Level of the option."
}, },
{ {
"name": "itemGroup", "name": "optionGroup",
"optional": false, "optional": false,
"readonly": false, "readonly": false,
"type": "boolean", "type": "boolean",
"default": "", "default": "",
"description": "Current item group state of option as a boolean." "description": "Current option group state of option as a boolean."
}, },
{ {
"name": "active", "name": "active",
@ -40798,7 +40842,7 @@
], ],
"methods": [] "methods": []
}, },
"ListboxItemDblClickEvent": { "ListboxOptionDblClickEvent": {
"description": "Custom double click event.", "description": "Custom double click event.",
"relatedProp": "listboxListboxEmits.['item-dblclick']", "relatedProp": "listboxListboxEmits.['item-dblclick']",
"props": [ "props": [
@ -41592,12 +41636,25 @@
{ {
"name": "event", "name": "event",
"optional": false, "optional": false,
"type": "ListboxItemDblClickEvent", "type": "ListboxOptionDblClickEvent",
"description": "Custom item double click event." "description": "Custom option double click event."
} }
], ],
"returnType": "void", "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."
} }
] ]
} }