New stripedRows prop for PickList

api-generator/components/orderlist.js

@@ -40,6 +40,12 @@ const OrderListProps = [
         type: "string",
         default: "960px",
         description: "The breakpoint to define the maximum width boundary when responsiveness is enabled."
+    },
+    {
+        name: "stripedRows",
+        type: "boolean",
+        default: "false",
+        description: "Whether to displays rows with alternating colors."
     }
 ];
 

api-generator/components/picklist.js

@@ -40,6 +40,12 @@ const PickListProps = [
         type: "string",
         default: "960px",
         description: "The breakpoint to define the maximum width boundary when responsiveness is enabled."
+    },
+    {
+        name: "stripedRows",
+        type: "boolean",
+        default: "false",
+        description: "Whether to displays rows with alternating colors."
     }
 ];
 

src/components/picklist/PickList.d.ts

@@ -91,6 +91,10 @@ export interface PickListProps {
      * Default value is '960px'.
      */
     breakpoint?: string | undefined;
+    /**
+     * Whether to displays rows with alternating colors.
+     */
+    stripedRows?: boolean | undefined;
 }
 
 export interface PickListSlots {

src/components/picklist/PickList.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="p-picklist p-component">
+    <div :class="containerClass">
         <div class="p-picklist-buttons p-picklist-source-controls">
             <slot name="sourcecontrolsstart"></slot>
             <PLButton type="button" icon="pi pi-angle-up" @click="moveUp($event, 0)"></PLButton>
@@ -91,6 +91,10 @@ export default {
         breakpoint: {
             type: String,
             default: '960px'
+        },
+        stripedRows: {
+            type: Boolean,
+            default: false
         }
     },
     itemTouched: false,
@@ -552,6 +556,11 @@ export default {
         }
     },
     computed: {
+        containerClass() {
+            return ['p-picklist p-component', {
+                'p-picklist-striped': this.stripedRows
+            }];
+        },
         sourceList() {
             return this.modelValue && this.modelValue[0] ? this.modelValue[0] : null;
         },

src/views/orderlist/OrderListDemo.vue

@@ -10,7 +10,7 @@
 
         <div class="content-section implementation">
             <div class="card">
-                <OrderList v-model="products" listStyle="height:auto" dataKey="id" stripedRows>
+                <OrderList v-model="products" listStyle="height:auto" dataKey="id">
                     <template #header>
                         List of Products
                     </template>

src/views/picklist/PickListDoc.vue

@@ -136,6 +136,12 @@ import PickList from 'primevue/picklist';
                         <td>string</td>
                         <td>960px</td>
                         <td>The breakpoint to define the maximum width boundary when responsiveness is enabled.</td>
+                    </tr>
+                    <tr>
+                        <td>stripedRows</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether to displays rows with alternating colors.</td>
                     </tr>
 				</tbody>
 			</table>