Refactor #5785 - for OrderList PickList

components/lib/orderlist/OrderList.d.ts

@@ -291,6 +291,7 @@ export interface OrderListSlots {
      */
     header(): VNode[];
     /**
+     * @deprecated since v4.0. Use option slot instead.
      * Custom item template.
      * @param {Object} scope - item slot's params.
      */
@@ -308,6 +309,24 @@ export interface OrderListSlots {
          */
         index: number;
     }): VNode[];
+    /**
+     * Custom option template.
+     * @param {Object} scope - option slot's params.
+     */
+    option(scope: {
+        /**
+         * Option of the component
+         */
+        option: any;
+        /**
+         * Selection state
+         */
+        selected: boolean;
+        /**
+         * Index of the option.
+         */
+        index: number;
+    }): VNode[];
     /**
      * Custom controls start template.
      */

components/lib/orderlist/OrderList.vue

@@ -59,8 +59,9 @@
                 <slot name="header"></slot>
             </template>
             <template #option="{ option, selected, index }">
-                <slot name="item" :item="option" :selected="selected" :index="index" />
+                <slot :name="$slots.option ? 'option' : 'item'" :item="option" :option="option" :selected="selected" :index="index" />
             </template>
+            <!-- //TODO: item slot deprecated since v4.0. Use option slot. -->
         </Listbox>
     </div>
 </template>

components/lib/picklist/PickList.d.ts

@@ -438,6 +438,7 @@ export interface PickListSlots {
      */
     header(): VNode[];
     /**
+     * @deprecated since v4.0. Use option slot instead.
      * Custom item template.
      * @param {Object} scope - item slot's params.
      */
@@ -451,7 +452,25 @@ export interface PickListSlots {
          */
         selected: boolean;
         /**
-         * Index of the item
+         * Index of the item.
+         */
+        index: number;
+    }): VNode[];
+    /**
+     * Custom option template.
+     * @param {Object} scope - option slot's params.
+     */
+    option(scope: {
+        /**
+         * Option of the component
+         */
+        option: any;
+        /**
+         * Selection state
+         */
+        selected: boolean;
+        /**
+         * Index of the option.
          */
         index: number;
     }): VNode[];

components/lib/picklist/PickList.vue

@@ -60,8 +60,9 @@
                     <slot name="sourceheader"></slot>
                 </template>
                 <template #option="{ option, selected, index }">
-                    <slot name="item" :item="option" :selected="selected" :index="index" />
+                    <slot :name="$slots.option ? 'option' : 'item'" :item="option" :option="option" :selected="selected" :index="index" />
                 </template>
+                <!-- //TODO: item slot deprecated since v4.0. Use option slot. -->
             </Listbox>
         </div>
         <div :class="cx('transferControls')" v-bind="ptm('transferControls')" data-pc-group-section="controls">
@@ -124,8 +125,9 @@
                     <slot name="targetheader"></slot>
                 </template>
                 <template #option="{ option, selected, index }">
-                    <slot name="item" :item="option" :selected="selected" :index="index" />
+                    <slot :name="$slots.option ? 'option' : 'item'" :item="option" :option="option" :selected="selected" :index="index" />
                 </template>
+                <!-- //TODO: item slot deprecated since v4.0. Use option slot. -->
             </Listbox>
         </div>
         <div v-if="showTargetControls" :class="cx('targetControls')" v-bind="ptm('targetControls')" data-pc-group-section="controls">