From cda1e16bd84a9949474e5d97216250c26b827632 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Thu, 30 May 2024 14:10:35 +0300
Subject: [PATCH] OrderList PickList demo updates

---
 doc/common/apidoc/index.json  | 34 +++++++++++++++++++++++++---
 doc/orderlist/BasicDoc.vue    | 18 +++++++--------
 doc/orderlist/TemplateDoc.vue | 42 +++++++++++++++++------------------
 doc/picklist/BasicDoc.vue     | 18 +++++++--------
 doc/picklist/TemplateDoc.vue  | 42 +++++++++++++++++------------------
 5 files changed, 91 insertions(+), 63 deletions(-)

diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json
index cf27e7097..e9a217bd0 100644
--- a/doc/common/apidoc/index.json
+++ b/doc/common/apidoc/index.json
@@ -51047,7 +51047,21 @@
                                 }
                             ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
-                            "description": "Custom item template."
+                            "description": "",
+                            "deprecated": "since v4.0. Use option slot instead.\nCustom item template."
+                        },
+                        {
+                            "name": "option",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">option</span>: <span class=\"doc-option-parameter-type\">any</span>, <span class=\"doc-option-parameter-type\">// Option of the component</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">selected</span>: <span class=\"doc-option-parameter-type\">boolean</span>, <span class=\"doc-option-parameter-type\">// Selection state</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">index</span>: <span class=\"doc-option-parameter-type\">number</span>, <span class=\"doc-option-parameter-type\">// Index of the option.</span>\n }",
+                                    "description": "option slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom option template."
                         },
                         {
                             "name": "controlsstart",
@@ -57039,12 +57053,26 @@
                                 {
                                     "name": "scope",
                                     "optional": false,
-                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">item</span>: <span class=\"doc-option-parameter-type\">any</span>, <span class=\"doc-option-parameter-type\">// Item of the component</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">selected</span>: <span class=\"doc-option-parameter-type\">boolean</span>, <span class=\"doc-option-parameter-type\">// Selection state</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">index</span>: <span class=\"doc-option-parameter-type\">number</span>, <span class=\"doc-option-parameter-type\">// Index of the item</span>\n }",
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">item</span>: <span class=\"doc-option-parameter-type\">any</span>, <span class=\"doc-option-parameter-type\">// Item of the component</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">selected</span>: <span class=\"doc-option-parameter-type\">boolean</span>, <span class=\"doc-option-parameter-type\">// Selection state</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">index</span>: <span class=\"doc-option-parameter-type\">number</span>, <span class=\"doc-option-parameter-type\">// Index of the item.</span>\n }",
                                     "description": "item slot's params."
                                 }
                             ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
-                            "description": "Custom item template."
+                            "description": "",
+                            "deprecated": "since v4.0. Use option slot instead.\nCustom item template."
+                        },
+                        {
+                            "name": "option",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">option</span>: <span class=\"doc-option-parameter-type\">any</span>, <span class=\"doc-option-parameter-type\">// Option of the component</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">selected</span>: <span class=\"doc-option-parameter-type\">boolean</span>, <span class=\"doc-option-parameter-type\">// Selection state</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">index</span>: <span class=\"doc-option-parameter-type\">number</span>, <span class=\"doc-option-parameter-type\">// Index of the option.</span>\n }",
+                                    "description": "option slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom option template."
                         },
                         {
                             "name": "sourceheader",
diff --git a/doc/orderlist/BasicDoc.vue b/doc/orderlist/BasicDoc.vue
index 565e9f041..45764e2c2 100644
--- a/doc/orderlist/BasicDoc.vue
+++ b/doc/orderlist/BasicDoc.vue
@@ -1,11 +1,11 @@
 <template>
     <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>
+        <p>OrderList requires an array as its value bound with the <i>v-model</i> directive and <i>option</i> template for its content.</p>
     </DocSectionText>
     <div class="card sm:flex sm:justify-center">
         <OrderList v-model="products" dataKey="id" breakpoint="575px" pt:pcList:root="w-full sm:w-56">
-            <template #item="{ item }">
-                {{ item.name }}
+            <template #option="{ option }">
+                {{ option.name }}
             </template>
         </OrderList>
     </div>
@@ -22,8 +22,8 @@ export default {
             code: {
                 basic: `
 <OrderList v-model="products" dataKey="id" breakpoint="575px" pt:pcList:root="w-full sm:w-56">
-    <template #item="{ item }">
-        {{ item.name }}
+    <template #option="{ option }">
+        {{ option.name }}
     </template>
 </OrderList>
 `,
@@ -31,8 +31,8 @@ export default {
 <template>
     <div class="card sm:flex sm:justify-center">
         <OrderList v-model="products" dataKey="id" breakpoint="575px" pt:pcList:root="w-full sm:w-56">
-            <template #item="{ item }">
-                {{ item.name }}
+            <template #option="{ option }">
+                {{ option.name }}
             </template>
         </OrderList>
     </div>
@@ -56,8 +56,8 @@ export default {
 <template>
     <div class="card sm:flex sm:justify-center">
         <OrderList v-model="products" dataKey="id" breakpoint="575px" pt:pcList:root="w-full sm:w-56">
-            <template #item="{ item }">
-                {{ item.name }}
+            <template #option="{ option }">
+                {{ option.name }}
             </template>
         </OrderList>
     </div>
diff --git a/doc/orderlist/TemplateDoc.vue b/doc/orderlist/TemplateDoc.vue
index 188c408ef..74b22176c 100644
--- a/doc/orderlist/TemplateDoc.vue
+++ b/doc/orderlist/TemplateDoc.vue
@@ -1,17 +1,17 @@
 <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>
+        <p>For custom content support define an <i>option</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 sm:flex sm:justify-center">
         <OrderList v-model="products" dataKey="id" breakpoint="575px" scrollHeight="20rem">
-            <template #item="{ item, selected }">
+            <template #option="{ option, selected }">
                 <div class="flex flex-wrap p-1 items-center gap-4 w-full">
-                    <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
+                    <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + option.image" :alt="option.name" />
                     <div class="flex-1 flex flex-col">
-                        <span class="font-medium text-sm">{{ item.name }}</span>
-                        <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ item.category }}</span>
+                        <span class="font-medium text-sm">{{ option.name }}</span>
+                        <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ option.category }}</span>
                     </div>
-                    <span class="font-bold sm:ml-8">${{ item.price }}</span>
+                    <span class="font-bold sm:ml-8">${{ option.price }}</span>
                 </div>
             </template>
         </OrderList>
@@ -28,14 +28,14 @@ export default {
             code: {
                 basic: `
 <OrderList v-model="products" dataKey="id" breakpoint="575px" scrollHeight="20rem">
-    <template #item="{ item, selected }">
+    <template #option="{ option , selected }">
         <div class="flex flex-wrap p-1 items-center gap-4 w-full">
-            <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
+            <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + option.image" :alt="option.name" />
             <div class="flex-1 flex flex-col">
-                <span class="font-medium text-sm">{{ item.name }}</span>
-                <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ item.category }}</span>
+                <span class="font-medium text-sm">{{ option.name }}</span>
+                <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ option.category }}</span>
             </div>
-            <span class="font-bold sm:ml-8">\${{ item.price }}</span>
+            <span class="font-bold sm:ml-8">\${{ option.price }}</span>
         </div>
     </template>
 </OrderList>
@@ -44,14 +44,14 @@ export default {
 <template>
     <div class="card sm:flex sm:justify-center">
         <OrderList v-model="products" dataKey="id" breakpoint="575px" scrollHeight="20rem">
-            <template #item="{ item, selected }">
+            <template #option="{ option , selected }">
                 <div class="flex flex-wrap p-1 items-center gap-4 w-full">
-                    <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
+                    <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + option.image" :alt="option.name" />
                     <div class="flex-1 flex flex-col">
-                        <span class="font-medium text-sm">{{ item.name }}</span>
-                        <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ item.category }}</span>
+                        <span class="font-medium text-sm">{{ option.name }}</span>
+                        <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ option.category }}</span>
                     </div>
-                    <span class="font-bold sm:ml-8">\${{ item.price }}</span>
+                    <span class="font-bold sm:ml-8">\${{ option.price }}</span>
                 </div>
             </template>
         </OrderList>
@@ -76,14 +76,14 @@ export default {
 <template>
     <div class="card sm:flex sm:justify-center">
         <OrderList v-model="products" dataKey="id" breakpoint="575px" scrollHeight="20rem">
-            <template #item="{ item, selected }">
+            <template #option="{ option , selected }">
                 <div class="flex flex-wrap p-1 items-center gap-4 w-full">
-                    <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
+                    <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + option.image" :alt="option.name" />
                     <div class="flex-1 flex flex-col">
-                        <span class="font-medium text-sm">{{ item.name }}</span>
-                        <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ item.category }}</span>
+                        <span class="font-medium text-sm">{{ option.name }}</span>
+                        <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ option.category }}</span>
                     </div>
-                    <span class="font-bold sm:ml-8">\${{ item.price }}</span>
+                    <span class="font-bold sm:ml-8">\${{ option.price }}</span>
                 </div>
             </template>
         </OrderList>
diff --git a/doc/picklist/BasicDoc.vue b/doc/picklist/BasicDoc.vue
index 492dd8ad3..792665045 100644
--- a/doc/picklist/BasicDoc.vue
+++ b/doc/picklist/BasicDoc.vue
@@ -1,11 +1,11 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <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>
+        <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>option</i> instance and the index via slotProps.</p>
     </DocSectionText>
     <div class="card">
         <PickList v-model="products" dataKey="id" breakpoint="1400px">
-            <template #item="{ item }">
-                {{ item.name }}
+            <template #option="{ option }">
+                {{ option.name }}
             </template>
         </PickList>
     </div>
@@ -22,8 +22,8 @@ export default {
             code: {
                 basic: `
 <PickList v-model="products" dataKey="id" breakpoint="1400px">
-    <template #item="{ item }">
-        {{ item.name }}
+    <template #option="{ option  }">
+        {{ option.name }}
     </template>
 </PickList>
 `,
@@ -31,8 +31,8 @@ export default {
 <template>
     <div class="card">
         <PickList v-model="products" dataKey="id" breakpoint="1400px">
-            <template #item="{ item }">
-                {{ item.name }}
+            <template #option="{ option  }">
+                {{ option.name }}
             </template>
         </PickList>
     </div>
@@ -56,8 +56,8 @@ export default {
 <template>
     <div class="card">
         <PickList v-model="products" dataKey="id" breakpoint="1400px">
-            <template #item="{ item }">
-                {{ item.name }}
+            <template #option="{ option  }">
+                {{ option.name }}
             </template>
         </PickList>
     </div>
diff --git a/doc/picklist/TemplateDoc.vue b/doc/picklist/TemplateDoc.vue
index 6b78b5d31..418cc5d9f 100644
--- a/doc/picklist/TemplateDoc.vue
+++ b/doc/picklist/TemplateDoc.vue
@@ -1,17 +1,17 @@
 <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>
+        <p>For custom content support define an <i>option</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" scrollHeight="20rem">
-            <template #item="{ item, selected }">
+            <template #option="{ option, selected }">
                 <div class="flex flex-wrap p-1 items-center gap-4 w-full">
-                    <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
+                    <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + option.image" :alt="option.name" />
                     <div class="flex-1 flex flex-col">
-                        <span class="font-medium text-sm">{{ item.name }}</span>
-                        <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ item.category }}</span>
+                        <span class="font-medium text-sm">{{ option.name }}</span>
+                        <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ option.category }}</span>
                     </div>
-                    <span class="font-bold">${{ item.price }}</span>
+                    <span class="font-bold">${{ option.price }}</span>
                 </div>
             </template>
         </PickList>
@@ -29,14 +29,14 @@ export default {
             code: {
                 basic: `
 <PickList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem>
-    <template #item="{ item, selected }">
+    <template #option="{ option , selected }">
         <div class="flex flex-wrap p-1 items-center gap-4 w-full">
-            <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
+            <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + option.image" :alt="option.name" />
             <div class="flex-1 flex flex-col">
-                <span class="font-medium text-sm">{{ item.name }}</span>
-                <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ item.category }}</span>
+                <span class="font-medium text-sm">{{ option.name }}</span>
+                <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ option.category }}</span>
             </div>
-            <span class="font-bold">\${{ item.price }}</span>
+            <span class="font-bold">\${{ option.price }}</span>
         </div>
     </template>
 </PickList>
@@ -45,14 +45,14 @@ export default {
 <template>
     <div class="card">
         <PickList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem>
-            <template #item="{ item, selected }">
+            <template #option="{ option , selected }">
                 <div class="flex flex-wrap p-1 items-center gap-4 w-full">
-                    <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
+                    <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + option.image" :alt="option.name" />
                     <div class="flex-1 flex flex-col">
-                        <span class="font-medium text-sm">{{ item.name }}</span>
-                        <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ item.category }}</span>
+                        <span class="font-medium text-sm">{{ option.name }}</span>
+                        <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ option.category }}</span>
                     </div>
-                    <span class="font-bold">\${{ item.price }}</span>
+                    <span class="font-bold">\${{ option.price }}</span>
                 </div>
             </template>
         </PickList>
@@ -77,14 +77,14 @@ export default {
 <template>
     <div class="card">
         <PickList v-model="products" dataKey="id" breakpoint="1400px">
-            <template #item="{ item, selected }">
+            <template #option="{ option , selected }">
                 <div class="flex flex-wrap p-1 items-center gap-4 w-full">
-                    <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
+                    <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + option.image" :alt="option.name" />
                     <div class="flex-1 flex flex-col">
-                        <span class="font-medium text-sm">{{ item.name }}</span>
-                        <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ item.category }}</span>
+                        <span class="font-medium text-sm">{{ option.name }}</span>
+                        <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ option.category }}</span>
                     </div>
-                    <span class="font-bold">\${{ item.price }}</span>
+                    <span class="font-bold">\${{ option.price }}</span>
                 </div>
             </template>
         </PickList>