Refactor #5437 - For OrderList

components/lib/listbox/Listbox.d.ts

@@ -14,12 +14,12 @@ import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, GlobalComponentConstructor, HintedString, PassThrough } from '../ts-helpers';
 import { VirtualScrollerItemOptions, VirtualScrollerPassThroughOptionType, VirtualScrollerProps } from '../virtualscroller';
 
-export declare type ListboxPassThroughOptionType = ListboxPassThroughAttributes | ((options: ListboxPassThroughMethodOptions) => ListboxPassThroughAttributes | string) | string | null | undefined;
+export declare type ListboxPassThroughOptionType<T = any> = ListboxPassThroughAttributes | ((options: ListboxPassThroughMethodOptions<T>) => ListboxPassThroughAttributes | string) | string | null | undefined;
 
 /**
  * Custom passthrough(pt) option method.
  */
-export interface ListboxPassThroughMethodOptions {
+export interface ListboxPassThroughMethodOptions<T = any> {
     /**
      * Defines instance.
      */
@@ -43,7 +43,7 @@ export interface ListboxPassThroughMethodOptions {
     /**
      * Defines parent options.
      */
-    parent: any;
+    parent: T;
     /**
      * Defines passthrough(pt) options in global config.
      */
@@ -79,6 +79,21 @@ export interface ListboxChangeEvent {
     value: any;
 }
 
+/**
+ * Custom double click event.
+ * @see {@link ListboxEmits.['item-dblclick']}
+ */
+export interface ListboxItemDblClickEvent {
+    /**
+     * Original event
+     */
+    originalEvent: Event;
+    /**
+     * Selected option value
+     */
+    value: any;
+}
+
 /**
  * Custom filter event.
  * @see {@link ListboxEmits.filter}
@@ -98,7 +113,7 @@ export interface ListboxFilterEvent {
  * Custom passthrough(pt) options.
  * @see {@link ListboxProps.pt}
  */
-export interface ListboxPassThroughOptions {
+export interface ListboxPassThroughOptions<T = any> {
     /**
      * Used to pass attributes to the root's DOM element.
      */
@@ -132,7 +147,7 @@ export interface ListboxPassThroughOptions {
     /**
      * Used to pass attributes to the list's DOM element.
      */
-    list?: ListboxPassThroughOptionType;
+    list?: ListboxPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the item group's DOM element.
      */
@@ -526,6 +541,11 @@ export interface ListboxEmits {
      * @param {ListboxFilterEvent} event - Custom filter event.
      */
     filter(event: ListboxFilterEvent): void;
+    /**
+     * Callback to invoke on item double click.
+     * @param {ListboxItemDblClickEvent} event - Custom item double click event.
+     */
+    'item-dblclick'(event: ListboxItemDblClickEvent): void;
 }
 
 /**

components/lib/listbox/Listbox.vue

@@ -81,6 +81,7 @@
                                 @mousedown="onOptionMouseDown($event, getOptionIndex(i, getItemOptions))"
                                 @mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))"
                                 @touchend="onOptionTouchEnd()"
+                                @dblclick="onOptionDblClick($event, option)"
                                 v-bind="getPTOptions(option, getItemOptions, i, 'item')"
                                 :data-p-highlight="isSelected(option)"
                                 :data-p-focused="focusedOptionIndex === getOptionIndex(i, getItemOptions)"
@@ -136,7 +137,7 @@ export default {
     name: 'Listbox',
     extends: BaseListbox,
     inheritAttrs: false,
-    emits: ['update:modelValue', 'change', 'focus', 'blur', 'filter'],
+    emits: ['update:modelValue', 'change', 'focus', 'blur', 'filter', 'item-dblclick'],
     list: null,
     virtualScroller: null,
     optionTouched: false,
@@ -324,6 +325,12 @@ export default {
 
             this.optionTouched = true;
         },
+        onOptionDblClick(event, item) {
+            this.$emit('item-dblclick', {
+                originalEvent: event,
+                value: item
+            });
+        },
         onOptionSelectSingle(event, option) {
             let selected = this.isSelected(option);
             let valueChanged = false;
@@ -505,6 +512,7 @@ export default {
             }
         },
         onSpaceKey(event) {
+            event.preventDefault();
             this.onEnterKey(event);
         },
         onShiftKey() {