From bd8d3c7869b36bafede26704e9234a3bcb1e3a0a Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Mon, 22 Jul 2019 17:15:32 +0300
Subject: [PATCH] Improved docs

---
 src/views/orderlist/OrderListDoc.vue | 31 +++++++++++++++-------
 src/views/picklist/PickListDoc.vue   | 39 ++++++++++++++++++----------
 2 files changed, 47 insertions(+), 23 deletions(-)

diff --git a/src/views/orderlist/OrderListDoc.vue b/src/views/orderlist/OrderListDoc.vue
index d93b09ac4..cfa8012e1 100644
--- a/src/views/orderlist/OrderListDoc.vue
+++ b/src/views/orderlist/OrderListDoc.vue
@@ -164,17 +164,28 @@ import OrderList from 'primevue/orderlist';
 				</a>
 <CodeHighlight>
 <template v-pre>
-&lt;OrderList v-model="cars" listStyle="height:auto" dataKey="vin"&gt;
-    &lt;template #header&gt;
-        List of Cars
-    &lt;/template&gt;
-    &lt;template #item="slotProps"&gt;
-        &lt;div class="p-caritem"&gt;
-            &lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt;
-            &lt;div&gt;&#123;&#123;slotProps.item.brand&#125;&#125; - &#123;&#123;slotProps.item.year&#125;&#125; - &#123;&#123;slotProps.item.color&#125;&#125;&lt;/div&gt;
+&lt;div&gt;
+    &lt;div class="content-section introduction"&gt;
+        &lt;div class="feature-intro"&gt;
+            &lt;h1&gt;OrderList&lt;/h1&gt;
+            &lt;p&gt;OrderList is used to managed the order of a collection.&lt;/p&gt;
         &lt;/div&gt;
-    &lt;/template&gt;
-&lt;/OrderList&gt;
+    &lt;/div&gt;
+
+    &lt;div class="content-section implementation"&gt;
+        &lt;OrderList v-model="cars" listStyle="height:auto" dataKey="vin"&gt;
+            &lt;template #header&gt;
+                List of Cars
+            &lt;/template&gt;
+            &lt;template #item="slotProps"&gt;
+                &lt;div class="p-caritem"&gt;
+                    &lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt;
+                    &lt;div&gt;&#123;&#123;slotProps.item.brand&#125; - &#123;&#123;slotProps.item.year&#125;&#125; - &#123;&#123;slotProps.item.color&#125;&#125;&lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/template&gt;
+        &lt;/OrderList&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
 </template>
 </CodeHighlight>
 
diff --git a/src/views/picklist/PickListDoc.vue b/src/views/picklist/PickListDoc.vue
index fa55c7dec..9d245749d 100644
--- a/src/views/picklist/PickListDoc.vue
+++ b/src/views/picklist/PickListDoc.vue
@@ -220,20 +220,33 @@ import PickList from 'primevue/picklist';
 				</a>
 <CodeHighlight>
 <template v-pre>
-&lt;PickList v-model="cars" dataKey="vin"&gt;
-    &lt;template #sourceHeader&gt;
-        Available
-    &lt;/template&gt;
-    &lt;template #targetHeader&gt;
-        Selected
-    &lt;/template&gt;
-    &lt;template #item="slotProps"&gt;
-        &lt;div class="p-caritem"&gt;
-            &lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt;
-            &lt;div&gt;&#123;&#123;slotProps.item.brand&#125;&#125; - &#123;&#123;slotProps.item.year&#125;&#125; - &#123;&#123;slotProps.item.color&#125;&#125;&lt;/div&gt;
+&lt;div&gt;
+    &lt;div class="content-section introduction"&gt;
+        &lt;div class="feature-intro"&gt;
+            &lt;h1&gt;PickList&lt;/h1&gt;
+            &lt;p&gt;PickList is used to reorder items between different lists.&lt;/p&gt;
         &lt;/div&gt;
-    &lt;/template&gt;
-&lt;/PickList&gt;
+    &lt;/div&gt;
+
+    &lt;div class="content-section implementation"&gt;
+        &lt;PickList v-model="cars" listStyle="height:342px" dataKey="vin"&gt;
+            &lt;template #sourceHeader&gt;
+                Available
+            &lt;/template&gt;
+            &lt;template #targetHeader&gt;
+                Selected
+            &lt;/template&gt;
+            &lt;template #item="slotProps"&gt;
+                &lt;div class="p-caritem"&gt;
+                    &lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt;
+                    &lt;div&gt;&#123;&#123;slotProps.item.brand&#125;&#125; - &#123;&#123;slotProps.item.year&#125;&#125; - &#123;&#123;slotProps.item.color&#125;&#125;&lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/template&gt;
+        &lt;/PickList&gt;
+    &lt;/div&gt;
+
+    &lt;PickListDoc /&gt;
+&lt;/div&gt;
 </template>
 </CodeHighlight>