From be1cf3625bd9cc60af792d00addd18898b504df6 Mon Sep 17 00:00:00 2001 From: tugcekucukoglu Date: Fri, 10 May 2024 14:50:11 +0300 Subject: [PATCH] Refactor #5721 --- components/lib/autocomplete/AutoComplete.d.ts | 26 ++-- components/lib/autocomplete/AutoComplete.vue | 5 +- components/lib/listbox/Listbox.d.ts | 13 +- components/lib/listbox/Listbox.vue | 6 +- doc/common/apidoc/index.json | 117 +++++++++++++----- 5 files changed, 124 insertions(+), 43 deletions(-) diff --git a/components/lib/autocomplete/AutoComplete.d.ts b/components/lib/autocomplete/AutoComplete.d.ts index 0b32c2ee4..425b49717 100755 --- a/components/lib/autocomplete/AutoComplete.d.ts +++ b/components/lib/autocomplete/AutoComplete.d.ts @@ -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. diff --git a/components/lib/autocomplete/AutoComplete.vue b/components/lib/autocomplete/AutoComplete.vue index 3f49859d6..446aca487 100755 --- a/components/lib/autocomplete/AutoComplete.vue +++ b/components/lib/autocomplete/AutoComplete.vue @@ -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); }, diff --git a/components/lib/listbox/Listbox.d.ts b/components/lib/listbox/Listbox.d.ts index c554f4aeb..b5b473c73 100755 --- a/components/lib/listbox/Listbox.d.ts +++ b/components/lib/listbox/Listbox.d.ts @@ -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; } /** diff --git a/components/lib/listbox/Listbox.vue b/components/lib/listbox/Listbox.vue index 126284ecf..73bc4882d 100755 --- a/components/lib/listbox/Listbox.vue +++ b/components/lib/listbox/Listbox.vue @@ -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); diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json index 4aad55466..4d82a8b19 100644 --- a/doc/common/apidoc/index.json +++ b/doc/common/apidoc/index.json @@ -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." } ] }