From b9700aef2dea087c73556af347a361e8c0a4a095 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Tue, 2 Apr 2024 11:38:38 +0300
Subject: [PATCH] OrderList PickList demo updates

---
 doc/orderlist/BasicDoc.vue    |  77 ++++--------------
 doc/orderlist/TemplateDoc.vue | 142 ++++++++++++++++++++++++++++++++
 doc/picklist/BasicDoc.vue     |  72 +++--------------
 doc/picklist/TemplateDoc.vue  | 148 ++++++++++++++++++++++++++++++++++
 pages/orderlist/index.vue     |   6 ++
 pages/picklist/index.vue      |   6 ++
 6 files changed, 331 insertions(+), 120 deletions(-)
 create mode 100644 doc/orderlist/TemplateDoc.vue
 create mode 100644 doc/picklist/TemplateDoc.vue

diff --git a/doc/orderlist/BasicDoc.vue b/doc/orderlist/BasicDoc.vue
index ee3a0bd6f..1ea1d9476 100644
--- a/doc/orderlist/BasicDoc.vue
+++ b/doc/orderlist/BasicDoc.vue
@@ -2,21 +2,10 @@
     <DocSectionText v-bind="$attrs">
         <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 xl:flex xl:justify-content-center">
-        <OrderList v-model="products" listStyle="height:auto" dataKey="id">
-            <template #header> List of Products </template>
-            <template #item="slotProps">
-                <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/' + slotProps.item.image" :alt="slotProps.item.name" />
-                    <div class="flex-1 flex flex-column gap-2">
-                        <span class="font-bold">{{ slotProps.item.name }}</span>
-                        <div class="flex align-items-center gap-2">
-                            <i class="pi pi-tag text-sm"></i>
-                            <span>{{ slotProps.item.category }}</span>
-                        </div>
-                    </div>
-                    <span class="font-bold">${{ slotProps.item.price }}</span>
-                </div>
+    <div class="card flex justify-content-center">
+        <OrderList v-model="products" dataKey="id" breakpoint="1400px">
+            <template #item="{ item }">
+                {{ item.name }}
             </template>
         </OrderList>
     </div>
@@ -25,46 +14,25 @@
 
 <script>
 import { ProductService } from '@/service/ProductService';
+
 export default {
     data() {
         return {
             products: null,
             code: {
                 basic: `
-<OrderList v-model="products" listStyle="height:auto" dataKey="id">
-    <template #header> List of Products </template>
-    <template #item="slotProps">
-        <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/' + slotProps.item.image" :alt="slotProps.item.name" />
-            <div class="flex-1 flex flex-column gap-2">
-                <span class="font-bold">{{ slotProps.item.name }}</span>
-                <div class="flex align-items-center gap-2">
-                    <i class="pi pi-tag text-sm"></i>
-                    <span>{{ slotProps.item.category }}</span>
-                </div>
-            </div>
-            <span class="font-bold">$ {{ slotProps.item.price }}</span>
-        </div>
+<OrderList v-model="products" dataKey="id" breakpoint="1400px">
+    <template #item="{ item }">
+        {{ item.name }}
     </template>
 </OrderList>
 `,
                 options: `
 <template>
-    <div class="card xl:flex xl:justify-content-center">
-        <OrderList v-model="products" listStyle="height:auto" dataKey="id">
-            <template #header> List of Products </template>
-            <template #item="slotProps">
-                <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/' + slotProps.item.image" :alt="slotProps.item.name" />
-                    <div class="flex-1 flex flex-column gap-2">
-                        <span class="font-bold">{{ slotProps.item.name }}</span>
-                        <div class="flex align-items-center gap-2">
-                            <i class="pi pi-tag text-sm"></i>
-                            <span>{{ slotProps.item.category }}</span>
-                        </div>
-                    </div>
-                    <span class="font-bold">$ {{ slotProps.item.price }}</span>
-                </div>
+    <div class="card lg:flex lg:justify-content-center">
+        <OrderList v-model="products" dataKey="id" breakpoint="1400px">
+            <template #item="{ item }">
+                {{ item.name }}
             </template>
         </OrderList>
     </div>
@@ -86,21 +54,10 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card xl:flex xl:justify-content-center">
-        <OrderList v-model="products" listStyle="height:auto" dataKey="id">
-            <template #header> List of Products </template>
-            <template #item="slotProps">
-                <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/' + slotProps.item.image" :alt="slotProps.item.name" />
-                    <div class="flex-1 flex flex-column gap-2">
-                        <span class="font-bold">{{ slotProps.item.name }}</span>
-                        <div class="flex align-items-center gap-2">
-                            <i class="pi pi-tag text-sm"></i>
-                            <span>{{ slotProps.item.category }}</span>
-                        </div>
-                    </div>
-                    <span class="font-bold">$ {{ slotProps.item.price }}</span>
-                </div>
+    <div class="card lg:flex lg:justify-content-center">
+        <OrderList v-model="products" dataKey="id" breakpoint="1400px">
+            <template #item="{ item }">
+                {{ item.name }}
             </template>
         </OrderList>
     </div>
@@ -118,7 +75,7 @@ onMounted(() => {
 <\/script>
 `,
                 data: `
-/* ProductService */        
+/* ProductService */
 {
     id: '1000',
     code: 'f230fh0g3',
diff --git a/doc/orderlist/TemplateDoc.vue b/doc/orderlist/TemplateDoc.vue
new file mode 100644
index 000000000..b642c3c1c
--- /dev/null
+++ b/doc/orderlist/TemplateDoc.vue
@@ -0,0 +1,142 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <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>
+            <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>
+                    </div>
+                    <span class="font-bold">${{ item.price }}</span>
+                </div>
+            </template>
+        </OrderList>
+    </div>
+    <DocSectionCode :code="code" v-bind="$attrs" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+export default {
+    data() {
+        return {
+            products: null,
+            code: {
+                basic: `
+<OrderList v-model="products" dataKey="id" breakpoint="1400px">
+    <template #header> List of Products </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>
+            </div>
+            <span class="font-bold">$ {{ item.price }}</span>
+        </div>
+    </template>
+</OrderList>
+`,
+                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>
+            <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>
+                    </div>
+                    <span class="font-bold">$ {{ item.price }}</span>
+                </div>
+            </template>
+        </OrderList>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService'
+export default {
+    data() {
+        return {
+            products: null
+        }
+    },
+    mounted() {
+        ProductService.getProductsSmall().then((data) => (this.products = data));
+    }
+};
+<\/script>
+`,
+                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>
+            <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>
+                    </div>
+                    <span class="font-bold">$ {{ item.price }}</span>
+                </div>
+            </template>
+        </OrderList>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ProductService } from '@/service/ProductService'
+
+const products = ref(null);
+
+onMounted(() => {
+    ProductService.getProductsSmall().then((data) => (products.value = data));
+});
+<\/script>
+`,
+                data: `
+/* ProductService */
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...`
+            }
+        };
+    },
+    mounted() {
+        ProductService.getProductsSmall().then((data) => (this.products = data));
+    }
+};
+</script>
diff --git a/doc/picklist/BasicDoc.vue b/doc/picklist/BasicDoc.vue
index 9eda3558d..785ae945f 100644
--- a/doc/picklist/BasicDoc.vue
+++ b/doc/picklist/BasicDoc.vue
@@ -3,21 +3,9 @@
         <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" listStyle="height:342px" dataKey="id" breakpoint="1400px">
-            <template #sourceheader> Available </template>
-            <template #targetheader> Selected </template>
-            <template #item="slotProps">
-                <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/' + slotProps.item.image" :alt="slotProps.item.name" />
-                    <div class="flex-1 flex flex-column gap-2">
-                        <span class="font-bold">{{ slotProps.item.name }}</span>
-                        <div class="flex align-items-center gap-2">
-                            <i class="pi pi-tag text-sm"></i>
-                            <span>{{ slotProps.item.category }}</span>
-                        </div>
-                    </div>
-                    <span class="font-bold">${{ slotProps.item.price }}</span>
-                </div>
+        <PickList v-model="products" dataKey="id" breakpoint="1400px">
+            <template #item="{ item }">
+                {{ item.name }}
             </template>
         </PickList>
     </div>
@@ -33,42 +21,18 @@ export default {
             products: null,
             code: {
                 basic: `
-<PickList v-model="products" listStyle="height:342px" dataKey="id" breakpoint="1400px">
-    <template #sourceheader> Available </template>
-    <template #targetheader> Selected </template>
-    <template #item="slotProps">
-        <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/' + slotProps.item.image" :alt="slotProps.item.name" />
-            <div class="flex-1 flex flex-column gap-2">
-                <span class="font-bold">{{ slotProps.item.name }}</span>
-                <div class="flex align-items-center gap-2">
-                    <i class="pi pi-tag text-sm"></i>
-                    <span>{{ slotProps.item.category }}</span>
-                </div>
-            </div>
-            <span class="font-bold">$ {{ slotProps.item.price }}</span>
-        </div>
+<PickList v-model="products" dataKey="id" listStyle="height:342px" breakpoint="1400px">
+    <template #item="{ item }">
+        {{ item.name }}
     </template>
 </PickList>
 `,
                 options: `
 <template>
     <div class="card">
-        <PickList v-model="products" listStyle="height:342px" dataKey="id" breakpoint="1400px">
-            <template #sourceheader> Available </template>
-            <template #targetheader> Selected </template>
-            <template #item="slotProps">
-                <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/' + slotProps.item.image" :alt="slotProps.item.name" />
-                    <div class="flex-1 flex flex-column gap-2">
-                        <span class="font-bold">{{ slotProps.item.name }}</span>
-                        <div class="flex align-items-center gap-2">
-                            <i class="pi pi-tag text-sm"></i>
-                            <span>{{ slotProps.item.category }}</span>
-                        </div>
-                    </div>
-                    <span class="font-bold">$ {{ slotProps.item.price }}</span>
-                </div>
+        <PickList v-model="products" dataKey="id" listStyle="height:342px" breakpoint="1400px">
+            <template #item="{ item }">
+                {{ item.name }}
             </template>
         </PickList>
     </div>
@@ -91,21 +55,9 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <PickList v-model="products" listStyle="height:342px" dataKey="id" breakpoint="1400px">
-            <template #sourceheader> Available </template>
-            <template #targetheader> Selected </template>
-            <template #item="slotProps">
-                <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/' + slotProps.item.image" :alt="slotProps.item.name" />
-                    <div class="flex-1 flex flex-column gap-2">
-                        <span class="font-bold">{{ slotProps.item.name }}</span>
-                        <div class="flex align-items-center gap-2">
-                            <i class="pi pi-tag text-sm"></i>
-                            <span>{{ slotProps.item.category }}</span>
-                        </div>
-                    </div>
-                    <span class="font-bold">$ {{ slotProps.item.price }}</span>
-                </div>
+        <PickList v-model="products" dataKey="id" listStyle="height:342px" breakpoint="1400px">
+            <template #item="{ item }">
+                {{ item.name }}
             </template>
         </PickList>
     </div>
diff --git a/doc/picklist/TemplateDoc.vue b/doc/picklist/TemplateDoc.vue
new file mode 100644
index 000000000..20e8b4990
--- /dev/null
+++ b/doc/picklist/TemplateDoc.vue
@@ -0,0 +1,148 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <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>
+            <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>
+                    </div>
+                    <span class="font-bold">${{ item.price }}</span>
+                </div>
+            </template>
+        </PickList>
+    </div>
+    <DocSectionCode :code="code" v-bind="$attrs" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            code: {
+                basic: `
+<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>
+            </div>
+            <span class="font-bold">$ {{ item.price }}</span>
+        </div>
+    </template>
+</PickList>
+`,
+                options: `
+<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>
+                    </div>
+                    <span class="font-bold">$ {{ item.price }}</span>
+                </div>
+            </template>
+        </PickList>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService'
+export default {
+    data() {
+        return {
+            products: null
+        }
+    },
+    mounted() {
+        ProductService.getProductsSmall().then((data) => (this.products = [data, []]));
+    }
+};
+<\/script>
+`,
+                composition: `
+<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>
+                    </div>
+                    <span class="font-bold">$ {{ item.price }}</span>
+                </div>
+            </template>
+        </PickList>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ProductService } from '@/service/ProductService'
+
+const products = ref(null);
+
+onMounted(() => {
+    ProductService.getProductsSmall().then((data) => (products.value = [data, []]));
+});
+<\/script>
+`,
+                data: `
+/* ProductService */
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: '/bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+            }
+        };
+    },
+    mounted() {
+        ProductService.getProductsSmall().then((data) => (this.products = [data, []]));
+    }
+};
+</script>
diff --git a/pages/orderlist/index.vue b/pages/orderlist/index.vue
index 79677a806..d2b7e92a4 100755
--- a/pages/orderlist/index.vue
+++ b/pages/orderlist/index.vue
@@ -6,6 +6,7 @@
 import AccessibilityDoc from '@/doc/orderlist/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/orderlist/BasicDoc.vue';
 import ImportDoc from '@/doc/orderlist/ImportDoc.vue';
+import TemplateDoc from '@/doc/orderlist/TemplateDoc.vue';
 import PTComponent from '@/doc/orderlist/pt/index.vue';
 import ThemingDoc from '@/doc/orderlist/theming/index.vue';
 
@@ -23,6 +24,11 @@ export default {
                     label: 'Basic',
                     component: BasicDoc
                 },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
diff --git a/pages/picklist/index.vue b/pages/picklist/index.vue
index df41fbf73..509a11991 100755
--- a/pages/picklist/index.vue
+++ b/pages/picklist/index.vue
@@ -6,6 +6,7 @@
 import AccessibilityDoc from '@/doc/picklist/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/picklist/BasicDoc.vue';
 import ImportDoc from '@/doc/picklist/ImportDoc.vue';
+import TemplateDoc from '@/doc/picklist/TemplateDoc.vue';
 import PTComponent from '@/doc/picklist/pt/index.vue';
 import ThemingDoc from '@/doc/picklist/theming/index.vue';
 
@@ -23,6 +24,11 @@ export default {
                     label: 'Basic',
                     component: BasicDoc
                 },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',