Refactor #3924 - For OrderList

api-generator/components/orderlist.js

@@ -47,6 +47,12 @@ const OrderListProps = [
         type: 'boolean',
         default: 'false',
         description: 'Whether to displays rows with alternating colors.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

components/lib/config/PrimeVue.d.ts

@@ -43,6 +43,7 @@ import { MenuPassThroughOptions } from '../menu';
 import { MenubarPassThroughOptions } from '../menubar';
 import { MessagePassThroughOptions } from '../message';
 import { MultiSelectPassThroughOptions } from '../multiselect';
+import { OrderListPassThroughOptions } from '../orderlist';
 import { OverlayPanelPassThroughOptions } from '../overlaypanel';
 import { PaginatorPassThroughOptions } from '../paginator';
 import { PanelPassThroughOptions } from '../panel';
@@ -134,6 +135,7 @@ interface PrimeVuePTOptions {
     menubar?: MenubarPassThroughOptions;
     message?: MessagePassThroughOptions;
     multiselect?: MultiSelectPassThroughOptions;
+    orderlist?: OrderListPassThroughOptions;
     overlaypanel?: OverlayPanelPassThroughOptions;
     paginator?: PaginatorPassThroughOptions;
     panel?: PanelPassThroughOptions;

components/lib/orderlist/OrderList.d.ts

@@ -8,8 +8,20 @@
  *
  */
 import { ButtonHTMLAttributes, HTMLAttributes, VNode } from 'vue';
+import { ButtonPassThroughOptionType } from '../button';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type OrderListPassThroughOptionType = OrderListPassThroughAttributes | ((options: OrderListPassThroughMethodOptions) => OrderListPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface OrderListPassThroughMethodOptions {
+    props: OrderListProps;
+    state: OrderListState;
+    context: OrderListState;
+}
+
 /**
  * Custom reorder event
  * @see {@link OrderListEmits.reorder}
@@ -44,6 +56,100 @@ export interface OrderListSelectionChangeEvent {
     value: any[];
 }
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link OrderListProps.pt}
+ */
+export interface OrderListPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: OrderListPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the controls' DOM element.
+     */
+    controls?: OrderListPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    moveUpButton?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    moveTopButton?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    moveDownButton?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    moveBottomButton?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the container's DOM element.
+     */
+    container?: OrderListPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: OrderListPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    list?: OrderListPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the item's DOM element.
+     */
+    item?: OrderListPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface OrderListPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in OrderList component.
+ */
+export interface OrderListState {
+    /**
+     * Current id state as a string.
+     */
+    id: string;
+    /**
+     * 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 inline state in OrderList component.
+ */
+export interface OrderListState {
+    /**
+     * 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;
+}
+
 /**
  * Defines valid properties in OrderList component.
  */

components/lib/orderlist/OrderList.vue

@@ -1,39 +1,39 @@
 <template>
-    <div :class="containerClass">
+    <div :class="containerClass" v-bind="ptm('root')">
-        <div class="p-orderlist-controls">
+        <div class="p-orderlist-controls" v-bind="ptm('controls')">
             <slot name="controlsstart"></slot>
-            <OLButton type="button" @click="moveUp" :aria-label="moveUpAriaLabel" :disabled="moveDisabled()" v-bind="moveUpButtonProps">
+            <OLButton type="button" @click="moveUp" :aria-label="moveUpAriaLabel" :disabled="moveDisabled()" v-bind="moveUpButtonProps" :pt="ptm('moveUpButton')">
                 <template #icon>
                     <slot name="moveupicon">
-                        <AngleUpIcon />
+                        <AngleUpIcon v-bind="ptm('moveUpButton')['icon']" />
                     </slot>
                 </template>
             </OLButton>
-            <OLButton type="button" @click="moveTop" :aria-label="moveTopAriaLabel" :disabled="moveDisabled()" v-bind="moveTopButtonProps">
+            <OLButton type="button" @click="moveTop" :aria-label="moveTopAriaLabel" :disabled="moveDisabled()" v-bind="moveTopButtonProps" :pt="ptm('moveTopButton')">
-                <template #icon
+                <template #icon>
-                    ><slot name="movetopicon">
+                    <slot name="movetopicon">
-                        <AngleDoubleUpIcon />
+                        <AngleDoubleUpIcon v-bind="ptm('moveTopButton')['icon']" />
                     </slot>
                 </template>
             </OLButton>
-            <OLButton type="button" @click="moveDown" :aria-label="moveDownAriaLabel" :disabled="moveDisabled()" v-bind="moveDownButtonProps">
+            <OLButton type="button" @click="moveDown" :aria-label="moveDownAriaLabel" :disabled="moveDisabled()" v-bind="moveDownButtonProps" :pt="ptm('moveDownButton')">
                 <template #icon>
                     <slot name="movedownicon">
-                        <AngleDownIcon />
+                        <AngleDownIcon v-bind="ptm('moveDownButton')['icon']" />
                     </slot>
                 </template>
             </OLButton>
-            <OLButton type="button" @click="moveBottom" :aria-label="moveBottomAriaLabel" :disabled="moveDisabled()" v-bind="moveBottomButtonProps">
+            <OLButton type="button" @click="moveBottom" :aria-label="moveBottomAriaLabel" :disabled="moveDisabled()" v-bind="moveBottomButtonProps" :pt="ptm('moveBottomButton')">
                 <template #icon>
                     <slot name="movebottomicon">
-                        <AngleDoubleDownIcon />
+                        <AngleDoubleDownIcon v-bind="ptm('moveBottomButton')['icon']" />
                     </slot>
                 </template>
             </OLButton>
             <slot name="controlsend"></slot>
         </div>
-        <div class="p-orderlist-list-container">
+        <div class="p-orderlist-list-container" v-bind="ptm('container')">
-            <div v-if="$slots.header" class="p-orderlist-header">
+            <div v-if="$slots.header" class="p-orderlist-header" v-bind="ptm('header')">
                 <slot name="header"></slot>
             </div>
             <transition-group
@@ -52,10 +52,20 @@
                 @focus="onListFocus"
                 @blur="onListBlur"
                 @keydown="onListKeyDown"
-                v-bind="listProps"
+                v-bind="{ ...listProps, ...ptm('list') }"
             >
                 <template v-for="(item, i) of modelValue" :key="getItemKey(item, i)">
-                    <li :id="id + '_' + i" v-ripple role="option" :class="itemClass(item, `${id}_${i}`)" @click="onItemClick($event, item, i)" @touchend="onItemTouchEnd" :aria-selected="isSelected(item)" @mousedown="onOptionMouseDown(i)">
+                    <li
+                        :id="id + '_' + i"
+                        v-ripple
+                        role="option"
+                        :class="itemClass(item, `${id}_${i}`)"
+                        @click="onItemClick($event, item, i)"
+                        @touchend="onItemTouchEnd"
+                        :aria-selected="isSelected(item)"
+                        @mousedown="onOptionMouseDown(i)"
+                        v-bind="getPTOptions(item, 'item')"
+                    >
                         <slot name="item" :item="item" :index="i"> </slot>
                     </li>
                 </template>
@@ -65,6 +75,7 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import Button from 'primevue/button';
 import AngleDoubleDownIcon from 'primevue/icons/angledoubledown';
 import AngleDoubleUpIcon from 'primevue/icons/angledoubleup';
@@ -75,6 +86,7 @@ import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'OrderList',
+    extends: BaseComponent,
     emits: ['update:modelValue', 'reorder', 'update:selection', 'selection-change', 'focus', 'blur'],
     props: {
         modelValue: {
@@ -179,6 +191,14 @@ export default {
         getItemKey(item, index) {
             return this.dataKey ? ObjectUtils.resolveFieldData(item, this.dataKey) : index;
         },
+        getPTOptions(item, key) {
+            return this.ptm(key, {
+                context: {
+                    active: this.isSelected(item),
+                    focused: this.id === this.focusedOptionId
+                }
+            });
+        },
         isSelected(item) {
             return ObjectUtils.findIndexInList(item, this.d_selection) != -1;
         },