From 26a2374f1d32ca7a2d79051162fb6e926ea2d36c Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 2 Apr 2024 12:21:07 +0300
Subject: [PATCH] Visual updates to orderlist-picklist demos

---
 .../themes/primeone/base/picklist/index.js    |  4 +
 doc/orderlist/BasicDoc.vue                    |  8 +-
 doc/orderlist/TemplateDoc.vue                 | 74 +++++++++---------
 doc/picklist/BasicDoc.vue                     |  8 +-
 doc/picklist/TemplateDoc.vue                  | 76 +++++++++----------
 5 files changed, 81 insertions(+), 89 deletions(-)

diff --git a/components/lib/themes/primeone/base/picklist/index.js b/components/lib/themes/primeone/base/picklist/index.js
index 76d51145f..1d61eb2f2 100644
--- a/components/lib/themes/primeone/base/picklist/index.js
+++ b/components/lib/themes/primeone/base/picklist/index.js
@@ -15,5 +15,9 @@ export default {
 .p-picklist-list-wrapper {
     flex: 1 1 50%;
 }
+
+.p-picklist .p-listbox {
+    height: 100%;
+}
 `
 };
diff --git a/doc/orderlist/BasicDoc.vue b/doc/orderlist/BasicDoc.vue
index 1ea1d9476..42329316b 100644
--- a/doc/orderlist/BasicDoc.vue
+++ b/doc/orderlist/BasicDoc.vue
@@ -3,7 +3,7 @@
         <p>OrderList requires an array as its value bound with the <i>v-model</i> directive and <i>item</i> template for its content.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <OrderList v-model="products" dataKey="id" breakpoint="1400px">
+        <OrderList v-model="products" dataKey="id" breakpoint="1400px" pt:list:root="w-full md:w-14rem">
             <template #item="{ item }">
                 {{ item.name }}
             </template>
@@ -21,7 +21,7 @@ export default {
             products: null,
             code: {
                 basic: `
-<OrderList v-model="products" dataKey="id" breakpoint="1400px">
+<OrderList v-model="products" dataKey="id" breakpoint="1400px" pt:list:root="w-full md:w-14rem">
     <template #item="{ item }">
         {{ item.name }}
     </template>
@@ -30,7 +30,7 @@ export default {
                 options: `
 <template>
     <div class="card lg:flex lg:justify-content-center">
-        <OrderList v-model="products" dataKey="id" breakpoint="1400px">
+        <OrderList v-model="products" dataKey="id" breakpoint="1400px" pt:list:root="w-full md:w-14rem">
             <template #item="{ item }">
                 {{ item.name }}
             </template>
@@ -55,7 +55,7 @@ export default {
                 composition: `
 <template>
     <div class="card lg:flex lg:justify-content-center">
-        <OrderList v-model="products" dataKey="id" breakpoint="1400px">
+        <OrderList v-model="products" dataKey="id" breakpoint="1400px" pt:list:root="w-full md:w-14rem">
             <template #item="{ item }">
                 {{ item.name }}
             </template>
diff --git a/doc/orderlist/TemplateDoc.vue b/doc/orderlist/TemplateDoc.vue
index b642c3c1c..668e83656 100644
--- a/doc/orderlist/TemplateDoc.vue
+++ b/doc/orderlist/TemplateDoc.vue
@@ -3,16 +3,15 @@
         <p>For custom content support define an <i>item</i> template that gets the item instance as a parameter. In addition <i>header</i> slot is provided for further customization.</p>
     </DocSectionText>
     <div class="card lg:flex lg:justify-content-center">
-        <OrderList v-model="products" dataKey="id" breakpoint="1400px">
-            <template #header> List of Products </template>
+        <OrderList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem">
             <template #item="{ item }">
-                <div class="flex flex-wrap p-2 align-items-center gap-3">
-                    <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
-                    <div class="flex-1 flex flex-column gap-2">
-                        <span class="font-bold">{{ item.name }}</span>
-                        <div class="flex align-items-center gap-2">
-                            <i class="pi pi-tag text-sm"></i>
-                            <span>{{ item.category }}</span>
+                <div class="flex flex-wrap p-1 align-items-center gap-3">
+                    <img class="w-3rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
+                    <div class="flex-1 flex flex-column gap-1">
+                        <span class="font-medium">{{ item.name }}</span>
+                        <div class="flex align-items-center gap-1">
+                            <i class="pi pi-tag text-sm text-secondary"></i>
+                            <span class="text-sm text-secondary">{{ item.category }}</span>
                         </div>
                     </div>
                     <span class="font-bold">${{ item.price }}</span>
@@ -31,19 +30,18 @@ export default {
             products: null,
             code: {
                 basic: `
-<OrderList v-model="products" dataKey="id" breakpoint="1400px">
-    <template #header> List of Products </template>
+<OrderList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem">
     <template #item="{ item }">
-        <div class="flex flex-wrap p-2 align-items-center gap-3">
-            <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
-            <div class="flex-1 flex flex-column gap-2">
-                <span class="font-bold">{{ item.name }}</span>
-                <div class="flex align-items-center gap-2">
-                    <i class="pi pi-tag text-sm"></i>
-                    <span>{{ item.category }}</span>
+        <div class="flex flex-wrap p-1 align-items-center gap-3">
+            <img class="w-3rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
+            <div class="flex-1 flex flex-column gap-1">
+                <span class="font-medium">{{ item.name }}</span>
+                <div class="flex align-items-center gap-1">
+                    <i class="pi pi-tag text-sm text-secondary"></i>
+                    <span class="text-sm text-secondary">{{ item.category }}</span>
                 </div>
             </div>
-            <span class="font-bold">$ {{ item.price }}</span>
+            <span class="font-bold">\${{ item.price }}</span>
         </div>
     </template>
 </OrderList>
@@ -51,19 +49,18 @@ export default {
                 options: `
 <template>
     <div class="card lg:flex lg:justify-content-center">
-        <OrderList v-model="products" dataKey="id" breakpoint="1400px">
-            <template #header> List of Products </template>
+        <OrderList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem">
             <template #item="{ item }">
-                <div class="flex flex-wrap p-2 align-items-center gap-3">
-                    <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
-                    <div class="flex-1 flex flex-column gap-2">
-                        <span class="font-bold">{{ item.name }}</span>
-                        <div class="flex align-items-center gap-2">
-                            <i class="pi pi-tag text-sm"></i>
-                            <span>{{ item.category }}</span>
+                <div class="flex flex-wrap p-1 align-items-center gap-3">
+                    <img class="w-3rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
+                    <div class="flex-1 flex flex-column gap-1">
+                        <span class="font-medium">{{ item.name }}</span>
+                        <div class="flex align-items-center gap-1">
+                            <i class="pi pi-tag text-sm text-secondary"></i>
+                            <span class="text-sm text-secondary">{{ item.category }}</span>
                         </div>
                     </div>
-                    <span class="font-bold">$ {{ item.price }}</span>
+                    <span class="font-bold">\${{ item.price }}</span>
                 </div>
             </template>
         </OrderList>
@@ -87,19 +84,18 @@ export default {
                 composition: `
 <template>
     <div class="card lg:flex lg:justify-content-center">
-        <OrderList v-model="products" dataKey="id" breakpoint="1400px">
-            <template #header> List of Products </template>
+        <OrderList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem">
             <template #item="{ item }">
-                <div class="flex flex-wrap p-2 align-items-center gap-3">
-                    <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
-                    <div class="flex-1 flex flex-column gap-2">
-                        <span class="font-bold">{{ item.name }}</span>
-                        <div class="flex align-items-center gap-2">
-                            <i class="pi pi-tag text-sm"></i>
-                            <span>{{ item.category }}</span>
+                <div class="flex flex-wrap p-1 align-items-center gap-3">
+                    <img class="w-3rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
+                    <div class="flex-1 flex flex-column gap-1">
+                        <span class="font-medium">{{ item.name }}</span>
+                        <div class="flex align-items-center gap-1">
+                            <i class="pi pi-tag text-sm text-secondary"></i>
+                            <span class="text-sm text-secondary">{{ item.category }}</span>
                         </div>
                     </div>
-                    <span class="font-bold">$ {{ item.price }}</span>
+                    <span class="font-bold">\${{ item.price }}</span>
                 </div>
             </template>
         </OrderList>
diff --git a/doc/picklist/BasicDoc.vue b/doc/picklist/BasicDoc.vue
index 2562724dd..492dd8ad3 100644
--- a/doc/picklist/BasicDoc.vue
+++ b/doc/picklist/BasicDoc.vue
@@ -3,7 +3,7 @@
         <p>PickList requires a multidimensional array as its value bound with the <i>v-model </i>directive and a template for its content that gets the <i>item</i> instance and the index via slotProps.</p>
     </DocSectionText>
     <div class="card">
-        <PickList v-model="products" dataKey="id" listStyle="height:342px" breakpoint="1400px">
+        <PickList v-model="products" dataKey="id" breakpoint="1400px">
             <template #item="{ item }">
                 {{ item.name }}
             </template>
@@ -21,7 +21,7 @@ export default {
             products: null,
             code: {
                 basic: `
-<PickList v-model="products" dataKey="id" listStyle="height:342px" breakpoint="1400px">
+<PickList v-model="products" dataKey="id" breakpoint="1400px">
     <template #item="{ item }">
         {{ item.name }}
     </template>
@@ -30,7 +30,7 @@ export default {
                 options: `
 <template>
     <div class="card">
-        <PickList v-model="products" dataKey="id" listStyle="height:342px" breakpoint="1400px">
+        <PickList v-model="products" dataKey="id" breakpoint="1400px">
             <template #item="{ item }">
                 {{ item.name }}
             </template>
@@ -55,7 +55,7 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <PickList v-model="products" dataKey="id" listStyle="height:342px" breakpoint="1400px">
+        <PickList v-model="products" dataKey="id" breakpoint="1400px">
             <template #item="{ item }">
                 {{ item.name }}
             </template>
diff --git a/doc/picklist/TemplateDoc.vue b/doc/picklist/TemplateDoc.vue
index 20e8b4990..1867f1ab1 100644
--- a/doc/picklist/TemplateDoc.vue
+++ b/doc/picklist/TemplateDoc.vue
@@ -3,17 +3,15 @@
         <p>For custom content support define an <i>item</i> template that gets the item instance as a parameter. In addition <i>sourceheader</i> and <i>targetheader</i> slots are provided for further customization.</p>
     </DocSectionText>
     <div class="card">
-        <PickList v-model="products" dataKey="id" breakpoint="1400px" listStyle="height:342px">
-            <template #sourceheader> Available </template>
-            <template #targetheader> Selected </template>
+        <PickList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem">
             <template #item="{ item }">
-                <div class="flex flex-wrap p-2 align-items-center gap-3">
-                    <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
-                    <div class="flex-1 flex flex-column gap-2">
-                        <span class="font-bold">{{ item.name }}</span>
-                        <div class="flex align-items-center gap-2">
-                            <i class="pi pi-tag text-sm"></i>
-                            <span>{{ item.category }}</span>
+                <div class="flex flex-wrap p-1 align-items-center gap-3">
+                    <img class="w-3rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
+                    <div class="flex-1 flex flex-column gap-1">
+                        <span class="font-medium">{{ item.name }}</span>
+                        <div class="flex align-items-center gap-1">
+                            <i class="pi pi-tag text-sm text-secondary"></i>
+                            <span class="text-sm text-secondary">{{ item.category }}</span>
                         </div>
                     </div>
                     <span class="font-bold">${{ item.price }}</span>
@@ -33,20 +31,18 @@ export default {
             products: null,
             code: {
                 basic: `
-<PickList v-model="products" dataKey="id" breakpoint="1400px">
-    <template #sourceheader> Available </template>
-    <template #targetheader> Selected </template>
+<PickList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem>
     <template #item="{ item }">
-        <div class="flex flex-wrap p-2 align-items-center gap-3">
-            <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
-            <div class="flex-1 flex flex-column gap-2">
-                <span class="font-bold">{{ item.name }}</span>
-                <div class="flex align-items-center gap-2">
-                    <i class="pi pi-tag text-sm"></i>
-                    <span>{{ item.category }}</span>
+        <div class="flex flex-wrap p-1 align-items-center gap-3">
+            <img class="w-3rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
+            <div class="flex-1 flex flex-column gap-1">
+                <span class="font-medium">{{ item.name }}</span>
+                <div class="flex align-items-center gap-1">
+                    <i class="pi pi-tag text-sm text-secondary"></i>
+                    <span class="text-sm text-secondary">{{ item.category }}</span>
                 </div>
             </div>
-            <span class="font-bold">$ {{ item.price }}</span>
+            <span class="font-bold">\${{ item.price }}</span>
         </div>
     </template>
 </PickList>
@@ -54,20 +50,18 @@ export default {
                 options: `
 <template>
     <div class="card">
-        <PickList v-model="products" dataKey="id" breakpoint="1400px">
-            <template #sourceheader> Available </template>
-            <template #targetheader> Selected </template>
+        <PickList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem>
             <template #item="{ item }">
-                <div class="flex flex-wrap p-2 align-items-center gap-3">
-                    <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
-                    <div class="flex-1 flex flex-column gap-2">
-                        <span class="font-bold">{{ item.name }}</span>
-                        <div class="flex align-items-center gap-2">
-                            <i class="pi pi-tag text-sm"></i>
-                            <span>{{ item.category }}</span>
+                <div class="flex flex-wrap p-1 align-items-center gap-3">
+                    <img class="w-3rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
+                    <div class="flex-1 flex flex-column gap-1">
+                        <span class="font-medium">{{ item.name }}</span>
+                        <div class="flex align-items-center gap-1">
+                            <i class="pi pi-tag text-sm text-secondary"></i>
+                            <span class="text-sm text-secondary">{{ item.category }}</span>
                         </div>
                     </div>
-                    <span class="font-bold">$ {{ item.price }}</span>
+                    <span class="font-bold">\${{ item.price }}</span>
                 </div>
             </template>
         </PickList>
@@ -92,19 +86,17 @@ export default {
 <template>
     <div class="card">
         <PickList v-model="products" dataKey="id" breakpoint="1400px">
-            <template #sourceheader> Available </template>
-            <template #targetheader> Selected </template>
             <template #item="{ item }">
-                <div class="flex flex-wrap p-2 align-items-center gap-3">
-                    <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
-                    <div class="flex-1 flex flex-column gap-2">
-                        <span class="font-bold">{{ item.name }}</span>
-                        <div class="flex align-items-center gap-2">
-                            <i class="pi pi-tag text-sm"></i>
-                            <span>{{ item.category }}</span>
+                <div class="flex flex-wrap p-1 align-items-center gap-3">
+                    <img class="w-3rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
+                    <div class="flex-1 flex flex-column gap-1">
+                        <span class="font-medium">{{ item.name }}</span>
+                        <div class="flex align-items-center gap-1">
+                            <i class="pi pi-tag text-sm text-secondary"></i>
+                            <span class="text-sm text-secondary">{{ item.category }}</span>
                         </div>
                     </div>
-                    <span class="font-bold">$ {{ item.price }}</span>
+                    <span class="font-bold">\${{ item.price }}</span>
                 </div>
             </template>
         </PickList>