Implemented Striped Rows for Listbox

components/lib/listbox/style/ListboxStyle.js

@@ -69,6 +69,10 @@ const theme = ({ dt }) => `
             box-shadow ${dt('listbox.transition.duration')}, outline-color ${dt('listbox.transition.duration')};
 }
 
+.p-listbox-striped li:nth-child(even of .p-listbox-option) {
+    background: ${dt('listbox.option.striped.background')};
+}
+
 .p-listbox .p-listbox-list .p-listbox-option.p-listbox-option-selected {
     background: ${dt('listbox.option.selected.background')};
     color: ${dt('listbox.option.selected.color')};

components/lib/themes/aura/listbox/index.js

@@ -50,5 +50,17 @@ export default {
     },
     emptyMessage: {
         padding: '{list.option.padding}'
+    },
+    colorScheme: {
+        light: {
+            option: {
+                stripedBackground: '{surface.50}'
+            }
+        },
+        dark: {
+            option: {
+                stripedBackground: '{surface.900}'
+            }
+        }
     }
 };

components/lib/themes/lara/listbox/index.js

@@ -50,5 +50,17 @@ export default {
     },
     emptyMessage: {
         padding: '{list.option.padding}'
+    },
+    colorScheme: {
+        light: {
+            option: {
+                stripedBackground: '{surface.50}'
+            }
+        },
+        dark: {
+            option: {
+                stripedBackground: '{surface.900}'
+            }
+        }
     }
 };

components/lib/themes/nora/listbox/index.js

@@ -50,5 +50,17 @@ export default {
     },
     emptyMessage: {
         padding: '{list.option.padding}'
+    },
+    colorScheme: {
+        light: {
+            option: {
+                stripedBackground: '{surface.100}'
+            }
+        },
+        dark: {
+            option: {
+                stripedBackground: '{surface.800}'
+            }
+        }
     }
 };

doc/listbox/VirtualScrollDoc.vue

@@ -6,7 +6,7 @@
         </p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <Listbox v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ itemSize: 38 }" class="w-full md:w-56" listStyle="height:250px" />
+        <Listbox v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ itemSize: 38 }" class="w-full md:w-56" listStyle="height:250px" stripedRows />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -20,13 +20,13 @@ export default {
             code: {
                 basic: `
 <Listbox v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
-    :virtualScrollerOptions="{ itemSize: 38 }" class="w-full md:w-56" listStyle="height:250px" />
+    :virtualScrollerOptions="{ itemSize: 38 }" class="w-full md:w-56" listStyle="height:250px" stripedRows />
 `,
                 options: `
 <template>
     <div class="card flex justify-center">
         <Listbox v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"    
-            :virtualScrollerOptions="{ itemSize: 38 }" class="w-full md:w-56" listStyle="height:250px" />
+            :virtualScrollerOptions="{ itemSize: 38 }" class="w-full md:w-56" listStyle="height:250px" stripedRows />
     </div>
 </template>
 
@@ -45,7 +45,7 @@ export default {
 <template>
     <div class="card flex justify-center">
         <Listbox v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
-            :virtualScrollerOptions="{ itemSize: 38 }" class="w-full md:w-56" listStyle="height:250px" />
+            :virtualScrollerOptions="{ itemSize: 38 }" class="w-full md:w-56" listStyle="height:250px" stripedRows />
     </div>
 </template>