Refactor #5437 - For OrderList

primefaces · Mar 21, 2024 · 2ac69c3 · 2ac69c3
1 parent 007ed56
commit 2ac69c3
Show file tree

Hide file tree

Showing 6 changed files with 118 additions and 421 deletions.
diff --git a/components/lib/listbox/Listbox.d.ts b/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;
 }
 
 /**

diff --git a/components/lib/listbox/Listbox.vue b/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() {

diff --git a/components/lib/orderlist/BaseOrderList.vue b/components/lib/orderlist/BaseOrderList.vue
@@ -46,30 +46,14 @@ export default {
             type: Boolean,
             default: false
         },
+        severity: {
+            type: String,
+            default: null
+        },
         tabindex: {
             type: Number,
             default: 0
         },
-        listProps: {
-            type: null,
-            default: null
-        },
-        moveUpButtonProps: {
-            type: null,
-            default: null
-        },
-        moveTopButtonProps: {
-            type: null,
-            default: null
-        },
-        moveDownButtonProps: {
-            type: null,
-            default: null
-        },
-        moveBottomButtonProps: {
-            type: null,
-            default: null
-        },
         ariaLabelledby: {
             type: String,
             default: null

diff --git a/components/lib/orderlist/OrderList.d.ts b/components/lib/orderlist/OrderList.d.ts
@@ -7,11 +7,12 @@
  * @module orderlist
  *
  */
-import { ButtonHTMLAttributes, HTMLAttributes, TransitionProps, VNode } from 'vue';
+import { TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
 import { ButtonPassThroughOptions } from '../button';
+import { ListboxPassThroughOptions } from '../listbox';
 import { PassThroughOptions } from '../passthrough';
-import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, HintedString, PassThrough } from '../ts-helpers';
 
 export declare type OrderListPassThroughOptionType = OrderListPassThroughAttributes | ((options: OrderListPassThroughMethodOptions) => OrderListPassThroughAttributes | string) | string | null | undefined;
 
@@ -33,10 +34,6 @@ export interface OrderListPassThroughMethodOptions {
      * Defines current inline state.
      */
     state: OrderListState;
-    /**
-     * Defines current options.
-     */
-    context: OrderListContext;
     /**
      * Defines valid attributes.
      */
@@ -114,18 +111,22 @@ export interface OrderListPassThroughOptions {
     controls?: OrderListPassThroughOptionType;
     /**
      * Used to pass attributes to the Button component.
+     * @see {@link ButtonPassThroughOptions}
      */
     moveUpButton?: ButtonPassThroughOptions<OrderListSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the Button component.
+     * @see {@link ButtonPassThroughOptions}
      */
     moveTopButton?: ButtonPassThroughOptions<OrderListSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the Button component.
+     * @see {@link ButtonPassThroughOptions}
      */
     moveDownButton?: ButtonPassThroughOptions<OrderListSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the Button component.
+     * @see {@link ButtonPassThroughOptions}
      */
     moveBottomButton?: ButtonPassThroughOptions<OrderListSharedPassThroughMethodOptions>;
     /**
@@ -137,13 +138,10 @@ export interface OrderListPassThroughOptions {
      */
     header?: OrderListPassThroughOptionType;
     /**
-     * Used to pass attributes to the list's DOM element.
-     */
-    list?: OrderListPassThroughOptionType;
-    /**
-     * Used to pass attributes to the item's DOM element.
+     * Used to pass attributes to the Listbox component.
+     * @see {@link ListboxPassThroughOptions}
      */
-    item?: OrderListPassThroughOptionType;
+    list?: ListboxPassThroughOptions<OrderListSharedPassThroughMethodOptions>;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
@@ -174,32 +172,6 @@ export interface OrderListState {
      * Current id state as a string.
      */
     d_selection: any[];
-    /**
-     * Current focused state as a boolean.
-     * @defaultValue false
-     */
-    focused: boolean;
-    /**
-     * Current focused item index as a number.
-     * @defaultvalue -1
-     */
-    focusedOptionIndex: number;
-}
-
-/**
- * Defines current options in OrderList component.
- */
-export interface OrderListContext {
-    /**
-     * Current active state of the item as a boolean.
-     * @defaultValue false
-     */
-    active: boolean;
-    /**
-     * Current focus state of the item as a boolean.
-     * @defaultValue false
-     */
-    focused: boolean;
 }
 
 /**
@@ -219,7 +191,7 @@ export interface OrderListProps {
      */
     selection?: any[];
     /**
-     * Defines whether metaKey is requred or not for the selection.
+     * Defines whether metaKey is required or not for the selection.
      * When true metaKey needs to be pressed to select or unselect an item and
      * when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.
      * @defaultValue false
@@ -258,25 +230,9 @@ export interface OrderListProps {
      */
     tabindex?: number | string | undefined;
     /**
-     *  Used to pass all properties of the HTMLAttributes to the list element.
-     */
-    listProps?: HTMLAttributes | undefined;
-    /**
-     * Used to pass all properties of the HTMLButtonElement to the move up button inside the component.
-     */
-    moveUpButtonProps?: ButtonHTMLAttributes | undefined;
-    /**
-     * Used to pass all properties of the HTMLButtonElement to the move top button inside the component.
-     */
-    moveTopButtonProps?: ButtonHTMLAttributes | undefined;
-    /**
-     * Used to pass all properties of the HTMLButtonElement to the move down button inside the component.
-     */
-    moveDownButtonProps?: ButtonHTMLAttributes | undefined;
-    /**
-     * Used to pass all properties of the HTMLButtonElement to the move bottom button inside the component.
+     * Defines the style of the button.
      */
-    moveBottomButtonProps?: ButtonHTMLAttributes | undefined;
+    severity?: HintedString<'secondary' | 'success' | 'info' | 'warning' | 'help' | 'danger' | 'contrast'> | undefined;
     /**
      * Defines a string value that labels an interactive list element.
      */