From 838be3bb873e46e707d23c361648821a3ed8de78 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Mon, 14 Feb 2022 10:56:41 +0300
Subject: [PATCH] New stripedRows for Orderlist

---
 src/components/orderlist/OrderList.d.ts |  4 ++++
 src/components/orderlist/OrderList.vue  | 11 ++++++++++-
 src/views/orderlist/OrderListDemo.vue   |  2 +-
 src/views/orderlist/OrderListDoc.vue    |  6 ++++++
 4 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/orderlist/OrderList.d.ts b/src/components/orderlist/OrderList.d.ts
index f777831f5..7e22d6c75 100755
--- a/src/components/orderlist/OrderList.d.ts
+++ b/src/components/orderlist/OrderList.d.ts
@@ -61,6 +61,10 @@ export interface OrderListProps {
      * Default value is '960px'.
      */
     breakpoint?: string | undefined;
+    /**
+     * Whether to displays rows with alternating colors.
+     */
+    stripedRows?: boolean | undefined;
 }
 
 export interface OrderListSlots {
diff --git a/src/components/orderlist/OrderList.vue b/src/components/orderlist/OrderList.vue
index 3c4d20206..8bcd83317 100755
--- a/src/components/orderlist/OrderList.vue
+++ b/src/components/orderlist/OrderList.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="p-orderlist p-component">
+    <div :class="containerClass">
         <div class="p-orderlist-controls">
             <slot name="controlsstart"></slot>
             <OLButton type="button" icon="pi pi-angle-up" @click="moveUp"></OLButton>
@@ -61,6 +61,10 @@ export default {
         breakpoint: {
             type: String,
             default: '960px'
+        },
+        stripedRows: {
+            type: Boolean,
+            default: false
         }
     },
     itemTouched: false,
@@ -352,6 +356,11 @@ export default {
         }
     },
     computed: {
+        containerClass() {
+            return ['p-orderlist p-component', {
+                'p-orderlist-striped': this.stripedRows
+            }];
+        },
         attributeSelector() {
             return UniqueComponentId();
         }
diff --git a/src/views/orderlist/OrderListDemo.vue b/src/views/orderlist/OrderListDemo.vue
index fd8374a54..486468f09 100755
--- a/src/views/orderlist/OrderListDemo.vue
+++ b/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">
+                <OrderList v-model="products" listStyle="height:auto" dataKey="id" stripedRows>
                     <template #header>
                         List of Products
                     </template>
diff --git a/src/views/orderlist/OrderListDoc.vue b/src/views/orderlist/OrderListDoc.vue
index 71568f3e0..6efd9e4aa 100755
--- a/src/views/orderlist/OrderListDoc.vue
+++ b/src/views/orderlist/OrderListDoc.vue
@@ -125,6 +125,12 @@ import OrderList from 'primevue/orderlist';
                         <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>