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() {

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

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.
+     * Used to pass attributes to the Listbox component.
+     * @see {@link ListboxPassThroughOptions}
      */
-    list?: OrderListPassThroughOptionType;
+    list?: ListboxPassThroughOptions<OrderListSharedPassThroughMethodOptions>;
-    /**
-     * Used to pass attributes to the item's DOM element.
-     */
-    item?: OrderListPassThroughOptionType;
     /**
      * 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.
+     * Defines the style of the button.
      */
-    listProps?: HTMLAttributes | undefined;
+    severity?: HintedString<'secondary' | 'success' | 'info' | 'warning' | 'help' | 'danger' | 'contrast'> | 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.
-     */
-    moveBottomButtonProps?: ButtonHTMLAttributes | undefined;
     /**
      * Defines a string value that labels an interactive list element.
      */

components/lib/orderlist/OrderList.vue

@@ -2,78 +2,65 @@
     <div :class="cx('root')" v-bind="ptmi('root')">
         <div :class="cx('controls')" v-bind="ptm('controls')">
             <slot name="controlsstart"></slot>
-            <OLButton type="button" @click="moveUp" :aria-label="moveUpAriaLabel" :disabled="moveDisabled()" v-bind="moveUpButtonProps" :pt="ptm('moveUpButton')" :unstyled="unstyled">
+            <Button @click="moveUp" :aria-label="moveUpAriaLabel" :disabled="moveDisabled()" :severity="severity" :pt="ptm('moveUpButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="moveupicon">
                         <AngleUpIcon v-bind="ptm('moveUpButton')['icon']" data-pc-section="moveupicon" />
                     </slot>
                 </template>
-            </OLButton>
+            </Button>
-            <OLButton type="button" @click="moveTop" :aria-label="moveTopAriaLabel" :disabled="moveDisabled()" v-bind="moveTopButtonProps" :pt="ptm('moveTopButton')" :unstyled="unstyled">
+            <Button @click="moveTop" :aria-label="moveTopAriaLabel" :disabled="moveDisabled()" :severity="severity" :pt="ptm('moveTopButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="movetopicon">
                         <AngleDoubleUpIcon v-bind="ptm('moveTopButton')['icon']" data-pc-section="movetopicon" />
                     </slot>
                 </template>
-            </OLButton>
+            </Button>
-            <OLButton type="button" @click="moveDown" :aria-label="moveDownAriaLabel" :disabled="moveDisabled()" v-bind="moveDownButtonProps" :pt="ptm('moveDownButton')" :unstyled="unstyled">
+            <Button @click="moveDown" :aria-label="moveDownAriaLabel" :disabled="moveDisabled()" :severity="severity" :pt="ptm('moveDownButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="movedownicon">
                         <AngleDownIcon v-bind="ptm('moveDownButton')['icon']" data-pc-section="movedownicon" />
                     </slot>
                 </template>
-            </OLButton>
+            </Button>
-            <OLButton type="button" @click="moveBottom" :aria-label="moveBottomAriaLabel" :disabled="moveDisabled()" v-bind="moveBottomButtonProps" :pt="ptm('moveBottomButton')" :unstyled="unstyled">
+            <Button @click="moveBottom" :aria-label="moveBottomAriaLabel" :disabled="moveDisabled()" :severity="severity" :pt="ptm('moveBottomButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="movebottomicon">
                         <AngleDoubleDownIcon v-bind="ptm('moveBottomButton')['icon']" data-pc-section="movebottomicon" />
                     </slot>
                 </template>
-            </OLButton>
+            </Button>
             <slot name="controlsend"></slot>
         </div>
-        <div :class="cx('container')" v-bind="ptm('container')">
+        <Listbox
-            <div v-if="$slots.header" :class="cx('header')" v-bind="ptm('header')">
+            ref="listbox"
-                <slot name="header"></slot>
+            :id="id"
-            </div>
+            :modelValue="d_selection"
-            <transition-group
+            :options="modelValue"
-                :ref="listRef"
+            multiple
-                :id="id + '_list'"
+            :metaKeySelection="metaKeySelection"
-                name="p-orderlist-flip"
+            :listStyle="listStyle"
-                tag="ul"
+            :tabindex="tabindex"
-                :class="cx('list')"
+            :dataKey="dataKey"
-                :style="listStyle"
+            :autoOptionFocus="autoOptionFocus"
-                role="listbox"
+            :focusOnHover="focusOnHover"
-                aria-multiselectable="true"
+            :ariaLabel="ariaLabel"
-                :tabindex="tabindex"
+            :ariaLabelledby="ariaLabelledby"
-                :aria-activedescendant="focused ? focusedOptionId : undefined"
+            :pt="ptm('list')"
-                :aria-label="ariaLabel"
+            :unstyled="unstyled"
-                :aria-labelledby="ariaLabelledby"
+            @focus="onListFocus"
-                @focus="onListFocus"
+            @blur="onListBlur"
-                @blur="onListBlur"
+            @change="onChangeSelection"
-                @keydown="onListKeyDown"
+        >
-                v-bind="{ ...listProps, ...ptm('list'), ...ptm('transition') }"
+            <template v-if="$slots.header" #header>
-            >
+                <div :class="cx('header')" v-bind="ptm('header')">
-                <template v-for="(item, i) of modelValue" :key="getItemKey(item, i)">
+                    <slot name="header"></slot>
-                    <li
+                </div>
-                        :id="id + '_' + i"
+            </template>
-                        v-ripple
+            <template #option="{ option, index }">
-                        role="option"
+                <slot name="item" :item="option" :index="index" />
-                        :class="cx('item', { item, id: `${id}_${i}` })"
+            </template>
-                        @click="onItemClick($event, item, i)"
+        </Listbox>
-                        @touchend="onItemTouchEnd"
-                        @mousedown="onOptionMouseDown($event, i)"
-                        @mousemove="onOptionMouseMove(i)"
-                        :aria-selected="isSelected(item)"
-                        v-bind="getPTOptions(item, 'item', i)"
-                        :data-p-highlight="isSelected(item)"
-                        :data-p-focused="`${id}_${i}` === focusedOptionId"
-                    >
-                        <slot name="item" :item="item" :index="i"> </slot>
-                    </li>
-                </template>
-            </transition-group>
-        </div>
     </div>
 </template>
 
@@ -83,6 +70,7 @@ import AngleDoubleDownIcon from 'primevue/icons/angledoubledown';
 import AngleDoubleUpIcon from 'primevue/icons/angledoubleup';
 import AngleDownIcon from 'primevue/icons/angledown';
 import AngleUpIcon from 'primevue/icons/angleup';
+import Listbox from 'primevue/listbox';
 import Ripple from 'primevue/ripple';
 import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
 import BaseOrderList from './BaseOrderList.vue';
@@ -99,9 +87,7 @@ export default {
     data() {
         return {
             id: this.$attrs.id,
-            d_selection: this.selection,
+            d_selection: this.selection
-            focused: false,
-            focusedOptionIndex: -1
         };
     },
     watch: {
@@ -126,222 +112,30 @@ export default {
         }
     },
     methods: {
-        getItemKey(item, index) {
+        updateSelection(event) {
-            return this.dataKey ? ObjectUtils.resolveFieldData(item, this.dataKey) : index;
+            this.$emit('update:selection', this.d_selection);
-        },
+            this.$emit('selection-change', {
-        getPTOptions(item, key, index) {
+                originalEvent: event,
-            return this.ptm(key, {
+                value: this.d_selection
-                context: {
-                    active: this.isSelected(item),
-                    focused: `${this.id}_${index}` === this.focusedOptionId
-                }
             });
         },
-        isSelected(item) {
+        onChangeSelection(params) {
-            return ObjectUtils.findIndexInList(item, this.d_selection) != -1;
+            this.d_selection = params.value;
+            this.updateSelection(params.event);
         },
         onListFocus(event) {
-            this.focused = true;
-            this.findCurrentFocusedIndex();
-            this.scrollInView(this.focusedOptionIndex);
             this.$emit('focus', event);
         },
         onListBlur(event) {
-            this.focused = false;
-            this.focusedOptionIndex = -1;
             this.$emit('blur', event);
         },
-        onListKeyDown(event) {
+        onReorderUpdate(event, value) {
-            switch (event.code) {
+            this.$emit('update:modelValue', value);
-                case 'ArrowDown':
+            this.$emit('reorder', {
-                    this.onArrowDownKey(event);
+                originalEvent: event,
-                    break;
+                value: value,
-
+                direction: this.reorderDirection
-                case 'ArrowUp':
+            });
-                    this.onArrowUpKey(event);
-                    break;
-
-                case 'Home':
-                    this.onHomeKey(event);
-                    break;
-
-                case 'End':
-                    this.onEndKey(event);
-                    break;
-
-                case 'Enter':
-                case 'NumpadEnter':
-                    this.onEnterKey(event);
-                    break;
-
-                case 'Space':
-                    this.onSpaceKey(event);
-                    break;
-
-                case 'KeyA':
-                    if (event.ctrlKey) {
-                        this.d_selection = [...this.modelValue];
-                        this.$emit('update:selection', this.d_selection);
-
-                        event.preventDefault();
-                    }
-
-                default:
-                    break;
-            }
-        },
-        onOptionMouseDown(event, index) {
-            this.changeFocusedOptionIndex(index);
-        },
-        onOptionMouseMove(index) {
-            if (this.focusOnHover && this.focused) {
-                this.changeFocusedOptionIndex(index);
-            }
-        },
-        onArrowDownKey(event) {
-            const optionIndex = this.focusedOptionIndex !== -1 ? this.findNextOptionIndex() : this.findFirstSelectedOptionIndex();
-
-            this.changeFocusedOptionIndex(optionIndex);
-
-            if (event.shiftKey) {
-                this.onEnterKey(event);
-            }
-
-            event.preventDefault();
-        },
-        onArrowUpKey(event) {
-            const optionIndex = this.focusedOptionIndex !== -1 ? this.findPrevOptionIndex() : this.findLastSelectedOptionIndex();
-
-            this.changeFocusedOptionIndex(optionIndex);
-
-            if (event.shiftKey) {
-                this.onEnterKey(event);
-            }
-
-            event.preventDefault();
-        },
-        onHomeKey(event) {
-            if (event.ctrlKey && event.shiftKey) {
-                const matchedOptionIndex = this.findMatchedOptionIndex();
-
-                this.d_selection = [...this.modelValue].slice(0, matchedOptionIndex + 1);
-                this.$emit('update:selection', this.d_selection);
-                this.$emit('selection-change', {
-                    originalEvent: event,
-                    value: this.d_selection
-                });
-            } else {
-                this.changeFocusedOptionIndex(0);
-            }
-
-            event.preventDefault();
-        },
-        onEndKey(event) {
-            if (event.ctrlKey && event.shiftKey) {
-                const matchedOptionIndex = this.findMatchedOptionIndex();
-
-                this.d_selection = [...this.modelValue].slice(matchedOptionIndex, items.length);
-                this.$emit('update:selection', this.d_selection);
-                this.$emit('selection-change', {
-                    originalEvent: event,
-                    value: this.d_selection
-                });
-            } else {
-                this.changeFocusedOptionIndex(this.findAllItems().length - 1);
-            }
-
-            event.preventDefault();
-        },
-        onEnterKey(event) {
-            const matchedOptionIndex = this.findMatchedOptionIndex();
-
-            this.onItemClick(event, this.modelValue[matchedOptionIndex], matchedOptionIndex);
-            event.preventDefault();
-        },
-        onSpaceKey(event) {
-            event.preventDefault();
-
-            if (event.shiftKey && this.d_selection && this.d_selection.length > 0) {
-                const selectedItemIndex = ObjectUtils.findIndexInList(this.d_selection[0], [...this.modelValue]);
-                const matchedOptionIndex = this.findMatchedOptionIndex();
-
-                this.d_selection = [...this.modelValue].slice(Math.min(selectedItemIndex, matchedOptionIndex), Math.max(selectedItemIndex, matchedOptionIndex) + 1);
-                this.$emit('update:selection', this.d_selection);
-                this.$emit('selection-change', {
-                    originalEvent: event,
-                    value: this.d_selection
-                });
-            } else {
-                this.onEnterKey(event);
-            }
-        },
-        findAllItems() {
-            return DomHandler.find(this.list, '[data-pc-section="item"]');
-        },
-        findFocusedItem() {
-            return DomHandler.findSingle(this.list, `[data-pc-section="item"][id=${this.focusedOptionIndex}]`);
-        },
-        findCurrentFocusedIndex() {
-            if (this.focusedOptionIndex === -1) {
-                this.focusedOptionIndex = this.findFirstSelectedOptionIndex();
-
-                if (this.autoOptionFocus && this.focusedOptionIndex === -1) {
-                    this.focusedOptionIndex = this.findFirstFocusedOptionIndex();
-                }
-            }
-        },
-        findFirstFocusedOptionIndex() {
-            const firstFocusableItem = DomHandler.findSingle(this.list, '[data-pc-section="item"]');
-
-            return DomHandler.getAttribute(firstFocusableItem, 'id');
-        },
-        findFirstSelectedOptionIndex() {
-            if (this.hasSelectedOption) {
-                const selectedFirstItem = DomHandler.findSingle(this.list, '[data-p-highlight="true"]');
-
-                return DomHandler.getAttribute(selectedFirstItem, 'id');
-            }
-
-            return -1;
-        },
-        findLastSelectedOptionIndex() {
-            if (this.hasSelectedOption) {
-                const selectedItems = DomHandler.find(this.list, '[data-p-highlight="true"]');
-
-                return ObjectUtils.findIndexInList(selectedItems[selectedItems.length - 1], this.list.children);
-            }
-
-            return -1;
-        },
-        findMatchedOptionIndex(id = this.focusedOptionIndex) {
-            const items = this.findAllItems();
-
-            return [...items].findIndex((link) => link.id === id);
-        },
-        findNextOptionIndex() {
-            const matchedOptionIndex = this.findMatchedOptionIndex();
-
-            return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0;
-        },
-        findPrevOptionIndex() {
-            const matchedOptionIndex = this.findMatchedOptionIndex();
-
-            return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0;
-        },
-        changeFocusedOptionIndex(index) {
-            const items = this.findAllItems();
-
-            let order = index >= items.length ? items.length - 1 : index < 0 ? 0 : index;
-
-            this.focusedOptionIndex = items[order] ? items[order].getAttribute('id') : -1;
-            this.scrollInView(this.focusedOptionIndex);
-        },
-        scrollInView(id) {
-            const element = DomHandler.findSingle(this.list, `[data-pc-section="item"][id="${id}"]`);
-
-            if (element) {
-                element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start', behavior: 'smooth' });
-            }
         },
         moveUp(event) {
             if (this.d_selection) {
@@ -363,12 +157,7 @@ export default {
                 }
 
                 this.reorderDirection = 'up';
-                this.$emit('update:modelValue', value);
+                this.onReorderUpdate(event, value);
-                this.$emit('reorder', {
-                    originalEvent: event,
-                    value: value,
-                    direction: this.reorderDirection
-                });
             }
         },
         moveTop(event) {
@@ -389,12 +178,7 @@ export default {
                 }
 
                 this.reorderDirection = 'top';
-                this.$emit('update:modelValue', value);
+                this.onReorderUpdate(event, value);
-                this.$emit('reorder', {
-                    originalEvent: event,
-                    value: value,
-                    direction: this.reorderDirection
-                });
             }
         },
         moveDown(event) {
@@ -417,12 +201,7 @@ export default {
                 }
 
                 this.reorderDirection = 'down';
-                this.$emit('update:modelValue', value);
+                this.onReorderUpdate(event, value);
-                this.$emit('reorder', {
-                    originalEvent: event,
-                    value: value,
-                    direction: this.reorderDirection
-                });
             }
         },
         moveBottom(event) {
@@ -443,51 +222,12 @@ export default {
                 }
 
                 this.reorderDirection = 'bottom';
-                this.$emit('update:modelValue', value);
+                this.onReorderUpdate(event, value);
-                this.$emit('reorder', {
-                    originalEvent: event,
-                    value: value,
-                    direction: this.reorderDirection
-                });
             }
         },
-        onItemClick(event, item, index) {
-            this.itemTouched = false;
-            const selectedIndex = ObjectUtils.findIndexInList(item, this.d_selection);
-            const selected = selectedIndex != -1;
-            const metaSelection = this.itemTouched ? false : this.metaKeySelection;
-            const selectedId = this.findAllItems()[index].getAttribute('id');
-
-            this.focusedOptionIndex = selectedId;
-
-            if (metaSelection) {
-                const metaKey = event.metaKey || event.ctrlKey;
-
-                if (selected && metaKey) {
-                    this.d_selection = this.d_selection.filter((val, index) => index !== selectedIndex);
-                } else {
-                    this.d_selection = metaKey ? (this.d_selection ? [...this.d_selection] : []) : [];
-                    ObjectUtils.insertIntoOrderedArray(item, index, this.d_selection, this.modelValue);
-                }
-            } else {
-                if (selected) {
-                    this.d_selection = this.d_selection.filter((val, index) => index !== selectedIndex);
-                } else {
-                    this.d_selection = this.d_selection ? [...this.d_selection] : [];
-                    ObjectUtils.insertIntoOrderedArray(item, index, this.d_selection, this.modelValue);
-                }
-            }
-
-            this.$emit('update:selection', this.d_selection);
-            this.$emit('selection-change', {
-                originalEvent: event,
-                value: this.d_selection
-            });
-        },
-        onItemTouchEnd() {
-            this.itemTouched = true;
-        },
         updateListScroll() {
+            this.list = DomHandler.findSingle(this.$refs.listbox.$el, '[data-pc-section="list"]');
+
             const listItems = DomHandler.find(this.list, '[data-pc-section="item"][data-p-highlight="true"]');
 
             if (listItems && listItems.length) {
@@ -556,18 +296,12 @@ export default {
             if (!this.d_selection || !this.d_selection.length) {
                 return true;
             }
-        },
-        listRef(el) {
-            this.list = el ? el.$el : undefined;
         }
     },
     computed: {
         attributeSelector() {
             return UniqueComponentId();
         },
-        focusedOptionId() {
-            return this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : null;
-        },
         moveUpAriaLabel() {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.moveUp : undefined;
         },
@@ -585,11 +319,12 @@ export default {
         }
     },
     components: {
-        OLButton: Button,
+        Listbox,
-        AngleUpIcon: AngleUpIcon,
+        Button,
-        AngleDownIcon: AngleDownIcon,
+        AngleUpIcon,
-        AngleDoubleUpIcon: AngleDoubleUpIcon,
+        AngleDownIcon,
-        AngleDoubleDownIcon: AngleDoubleDownIcon
+        AngleDoubleUpIcon,
+        AngleDoubleDownIcon
     },
     directives: {
         ripple: Ripple

components/lib/orderlist/style/OrderListStyle.js

@@ -11,13 +11,7 @@ const classes = {
     container: 'p-orderlist-list-container',
     header: 'p-orderlist-header',
     list: 'p-orderlist-list',
-    item: ({ instance, item, id }) => [
+    item: 'p-orderlist-item'
-        'p-orderlist-item',
-        {
-            'p-highlight': instance.isSelected(item),
-            'p-focus': id === instance.focusedOptionId
-        }
-    ]
 };
 
 export default BaseStyle.extend({