Update OverlayPanel Demo

src/views/datatable/DataTableTemplatingDemo.vue

@@ -43,8 +43,6 @@
                     </template>
                 </DataTable>
             </div>
-
-
 		</div>
 
         <div class="content-section documentation">

src/views/overlaypanel/OverlayPanelDemo.vue

@@ -3,16 +3,28 @@
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>OverlayPanel</h1>
-                <p>OverlayPanel is a container component that can overlay other components on page.</p>
+                <p>OverlayPanel is a container component positioned as connected to its target.</p>
             </div>
         </div>
 
         <div class="content-section implementation">
             <div class="card">
-                <Button type="button" label="Toggle" @click="toggle" aria:haspopup="true" aria-controls="overlay_panel" />
+                <Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria:haspopup="true" aria-controls="overlay_panel" />
 
-                <OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" id="overlay_panel">
-                    <img src="demo/images/nature/nature1.jpg" alt="Nature Image">
+                <OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" id="overlay_panel" style="width: 450px">
+                    <DataTable :value="products" :selection.sync="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
+                        <Column field="name" header="Name" sortable></Column>
+                        <Column header="Image">
+                            <template #body="slotProps">
+                                <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
+                            </template>
+                        </Column>
+                        <Column field="price" header="Price" sortable>
+                            <template #body="slotProps">
+                                {{formatCurrency(slotProps.data.price)}}
+                            </template>
+                        </Column>
+                    </DataTable>
                 </OverlayPanel>
             </div>
         </div>
@@ -22,16 +34,48 @@
 </template>
 
 <script>
+import ProductService from '../../service/ProductService';
 import OverlayPanelDoc from './OverlayPanelDoc';
 
 export default {
+    data() {
+        return {
+            products: null,
+            selectedProduct: null
+        }
+    },
+    productService: null,
+    created() {
+        this.productService = new ProductService();
+    },
+    mounted() {
+        this.productService.getProductsSmall().then(data => this.products = data);
+    },
     methods: {
         toggle(event) {
             this.$refs.op.toggle(event);
+        },
+        formatCurrency(value) {
+            return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
+        },
+        onProductSelect(event) {
+            this.$refs.op.hide();
+            this.$toast.add({severity:'info', summary: 'Product Select', detail: event.data.name, life: 3000});
         }
     },
     components: {
         'OverlayPanelDoc': OverlayPanelDoc
     }
 }
-</script>
+</script>
+
+<style lang="scss" scoped>
+button {
+    min-width: 15rem;
+}
+
+.product-image {
+    width: 50px;
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
+}
+</style>

src/views/overlaypanel/OverlayPanelDoc.vue

@@ -152,21 +152,55 @@ toggle(event) {
 				</a>
 <CodeHighlight>
 <template v-pre>
-&lt;Button type="button" label="Toggle" @click="toggle" aria:haspopup="true" aria-controls="overlay_panel"/&gt;
+&lt;Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria:haspopup="true" aria-controls="overlay_panel" /&gt;
 
-&lt;OverlayPanel ref="op" id="overlay_panel"&gt;
-	&lt;img src="demo/images/nature/nature1.jpg" alt="Nature Image"&gt;
+&lt;OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" id="overlay_panel" style="width: 450px"&gt;
+    &lt;DataTable :value="products" :selection.sync="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect"&gt;
+        &lt;Column field="name" header="Name" sortable&gt;&lt;/Column&gt;
+        &lt;Column header="Image"&gt;
+            &lt;template #body="slotProps"&gt;
+                &lt;img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" /&gt;
+            &lt;/template&gt;
+        &lt;/Column&gt;
+        &lt;Column field="price" header="Price" sortable&gt;
+            &lt;template #body="slotProps"&gt;
+                {{formatCurrency(slotProps.data.price)}}
+            &lt;/template&gt;
+        &lt;/Column&gt;
+    &lt;/DataTable&gt;
 &lt;/OverlayPanel&gt;
 </template>
 </CodeHighlight>
 
 <CodeHighlight lang="javascript">
+import ProductService from '../../service/ProductService';
+
 export default {
-	methods: {
-		toggle(event) {
-			this.$refs.op.toggle(event);
-		}
-	}
+    data() {
+        return {
+            products: null,
+            selectedProduct: null
+        }
+    },
+    productService: null,
+    created() {
+        this.productService = new ProductService();
+    },
+    mounted() {
+        this.productService.getProductsSmall().then(data => this.products = data);
+    },
+    methods: {
+        toggle(event) {
+            this.$refs.op.toggle(event);
+        },
+        formatCurrency(value) {
+            return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
+        },
+        onProductSelect(event) {
+            this.$refs.op.hide();
+            this.$toast.add({severity:'info', summary: 'Product Select', detail: event.data.name, life: 3000});
+        }
+    }
 }
 </CodeHighlight>
 			</TabPanel>