From 3a23abc41a50411e496db236e2b04472d51701e4 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 24 Jan 2024 13:00:53 +0300
Subject: [PATCH] Add new overlay panel demo

---
 doc/overlaypanel/BasicDoc.vue     | 230 +++++++++++++++++++++++++++++-
 doc/overlaypanel/DataTableDoc.vue |   8 +-
 2 files changed, 229 insertions(+), 9 deletions(-)

diff --git a/doc/overlaypanel/BasicDoc.vue b/doc/overlaypanel/BasicDoc.vue
index 964761683..8578d4fec 100644
--- a/doc/overlaypanel/BasicDoc.vue
+++ b/doc/overlaypanel/BasicDoc.vue
@@ -3,10 +3,65 @@
         <p>OverlayPanel is accessed via its ref and visibility is controlled using <i>toggle</i>, <i>show</i> and <i>hide</i> functions with an event of the target.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
+        <Button type="button" icon="pi pi-share-alt" label="Share" @click="toggle" />
 
         <OverlayPanel ref="op">
-            <img src="https://primefaces.org/cdn/primevue/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
+            <div class="flex flex-column gap-3 w-25rem">
+                <div>
+                    <span class="font-medium text-900 block mb-2">Share this document</span>
+                    <InputGroup>
+                        <InputText value="https://primevue.org/12323ff26t2g243g423g234gg52hy25XADXAG3" readonly class="w-25rem"></InputText>
+                        <InputGroupAddon>
+                            <i class="pi pi-copy"></i>
+                        </InputGroupAddon>
+                    </InputGroup>
+                </div>
+                <div>
+                    <span class="font-medium text-900 block mb-2">Invite Member</span>
+                    <InputGroup>
+                        <Chips disabled></Chips>
+                        <Button label="Invite" icon="pi pi-users"></Button>
+                    </InputGroup>
+                </div>
+                <div>
+                    <span class="font-medium text-900 block mb-2">Team Members</span>
+                    <ul class="list-none p-0 m-0 flex flex-column gap-3">
+                        <li class="flex align-items-center gap-2">
+                            <img src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" style="width: 32px" />
+                            <div>
+                                <span class="font-medium">Amy Elsner</span>
+                                <div class="text-sm text-color-secondary">amy@email.com</div>
+                            </div>
+                            <div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
+                                <span>Owner</span>
+                                <i class="pi pi-angle-down"></i>
+                            </div>
+                        </li>
+                        <li class="flex align-items-center gap-2">
+                            <img src="https://primefaces.org/cdn/primevue/images/avatar/bernardodominic.png" style="width: 32px" />
+                            <div>
+                                <span class="font-medium">Bernardo Dominic</span>
+                                <div class="text-sm text-color-secondary">bernardo@email.com</div>
+                            </div>
+                            <div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
+                                <span>Editor</span>
+                                <i class="pi pi-angle-down"></i>
+                            </div>
+                        </li>
+                        <li class="flex align-items-center gap-2">
+                            <img src="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" style="width: 32px" />
+                            <div>
+                                <span class="font-medium">Ioni Bowcher Elsner</span>
+                                <div class="text-sm text-color-secondary">ioni@email.com</div>
+                            </div>
+                            <div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
+                                <span>Viewer</span>
+                                <i class="pi pi-angle-down"></i>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+            </div>
         </OverlayPanel>
     </div>
     <DocSectionCode :code="code" />
@@ -21,7 +76,62 @@ export default {
 <Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
 
 <OverlayPanel ref="op">
-    <img src="/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
+    <div class="flex flex-column gap-3 w-25rem">
+        <div>
+            <span class="font-medium text-900 block mb-2">Share this document</span>
+            <InputGroup>
+                <InputText value="https://primevue.org/12323ff26t2g243g423g234gg52hy25XADXAG3" readonly class="w-25rem"></InputText>
+                <InputGroupAddon>
+                    <i class="pi pi-copy"></i>
+                </InputGroupAddon>
+            </InputGroup>
+        </div>
+        <div>
+            <span class="font-medium text-900 block mb-2">Invite Member</span>
+            <InputGroup>
+                <Chips disabled></Chips>
+                <Button label="Invite" icon="pi pi-users"></Button>
+            </InputGroup>
+        </div>
+        <div>
+            <span class="font-medium text-900 block mb-2">Team Members</span>
+            <ul class="list-none p-0 m-0 flex flex-column gap-3">
+                <li class="flex align-items-center gap-2">
+                    <img src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" style="width: 32px" />
+                    <div>
+                        <span class="font-medium">Amy Elsner</span>
+                        <div class="text-sm text-color-secondary">amy@email.com</div>
+                    </div>
+                    <div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
+                        <span>Owner</span>
+                        <i class="pi pi-angle-down"></i>
+                    </div>
+                </li>
+                <li class="flex align-items-center gap-2">
+                    <img src="https://primefaces.org/cdn/primevue/images/avatar/bernardodominic.png" style="width: 32px" />
+                    <div>
+                        <span class="font-medium">Bernardo Dominic</span>
+                        <div class="text-sm text-color-secondary">bernardo@email.com</div>
+                    </div>
+                    <div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
+                        <span>Editor</span>
+                        <i class="pi pi-angle-down"></i>
+                    </div>
+                </li>
+                <li class="flex align-items-center gap-2">
+                    <img src="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" style="width: 32px" />
+                    <div>
+                        <span class="font-medium">Ioni Bowcher Elsner</span>
+                        <div class="text-sm text-color-secondary">ioni@email.com</div>
+                    </div>
+                    <div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
+                        <span>Viewer</span>
+                        <i class="pi pi-angle-down"></i>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </div>
 </OverlayPanel>
 `,
                 options: `
@@ -30,7 +140,62 @@ export default {
         <Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
 
         <OverlayPanel ref="op">
-            <img src="https://primefaces.org/cdn/primevue/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
+            <div class="flex flex-column gap-3 w-25rem">
+                <div>
+                    <span class="font-medium text-900 block mb-2">Share this document</span>
+                    <InputGroup>
+                        <InputText value="https://primevue.org/12323ff26t2g243g423g234gg52hy25XADXAG3" readonly class="w-25rem"></InputText>
+                        <InputGroupAddon>
+                            <i class="pi pi-copy"></i>
+                        </InputGroupAddon>
+                    </InputGroup>
+                </div>
+                <div>
+                    <span class="font-medium text-900 block mb-2">Invite Member</span>
+                    <InputGroup>
+                        <Chips disabled></Chips>
+                        <Button label="Invite" icon="pi pi-users"></Button>
+                    </InputGroup>
+                </div>
+                <div>
+                    <span class="font-medium text-900 block mb-2">Team Members</span>
+                    <ul class="list-none p-0 m-0 flex flex-column gap-3">
+                        <li class="flex align-items-center gap-2">
+                            <img src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" style="width: 32px" />
+                            <div>
+                                <span class="font-medium">Amy Elsner</span>
+                                <div class="text-sm text-color-secondary">amy@email.com</div>
+                            </div>
+                            <div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
+                                <span>Owner</span>
+                                <i class="pi pi-angle-down"></i>
+                            </div>
+                        </li>
+                        <li class="flex align-items-center gap-2">
+                            <img src="https://primefaces.org/cdn/primevue/images/avatar/bernardodominic.png" style="width: 32px" />
+                            <div>
+                                <span class="font-medium">Bernardo Dominic</span>
+                                <div class="text-sm text-color-secondary">bernardo@email.com</div>
+                            </div>
+                            <div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
+                                <span>Editor</span>
+                                <i class="pi pi-angle-down"></i>
+                            </div>
+                        </li>
+                        <li class="flex align-items-center gap-2">
+                            <img src="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" style="width: 32px" />
+                            <div>
+                                <span class="font-medium">Ioni Bowcher Elsner</span>
+                                <div class="text-sm text-color-secondary">ioni@email.com</div>
+                            </div>
+                            <div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
+                                <span>Viewer</span>
+                                <i class="pi pi-angle-down"></i>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+            </div>
         </OverlayPanel>
     </div>
 </template>
@@ -51,7 +216,62 @@ export default {
         <Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
 
         <OverlayPanel ref="op">
-            <img src="https://primefaces.org/cdn/primevue/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
+            <div class="flex flex-column gap-3 w-25rem">
+                <div>
+                    <span class="font-medium text-900 block mb-2">Share this document</span>
+                    <InputGroup>
+                        <InputText value="https://primevue.org/12323ff26t2g243g423g234gg52hy25XADXAG3" readonly class="w-25rem"></InputText>
+                        <InputGroupAddon>
+                            <i class="pi pi-copy"></i>
+                        </InputGroupAddon>
+                    </InputGroup>
+                </div>
+                <div>
+                    <span class="font-medium text-900 block mb-2">Invite Member</span>
+                    <InputGroup>
+                        <Chips disabled></Chips>
+                        <Button label="Invite" icon="pi pi-users"></Button>
+                    </InputGroup>
+                </div>
+                <div>
+                    <span class="font-medium text-900 block mb-2">Team Members</span>
+                    <ul class="list-none p-0 m-0 flex flex-column gap-3">
+                        <li class="flex align-items-center gap-2">
+                            <img src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" style="width: 32px" />
+                            <div>
+                                <span class="font-medium">Amy Elsner</span>
+                                <div class="text-sm text-color-secondary">amy@email.com</div>
+                            </div>
+                            <div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
+                                <span>Owner</span>
+                                <i class="pi pi-angle-down"></i>
+                            </div>
+                        </li>
+                        <li class="flex align-items-center gap-2">
+                            <img src="https://primefaces.org/cdn/primevue/images/avatar/bernardodominic.png" style="width: 32px" />
+                            <div>
+                                <span class="font-medium">Bernardo Dominic</span>
+                                <div class="text-sm text-color-secondary">bernardo@email.com</div>
+                            </div>
+                            <div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
+                                <span>Editor</span>
+                                <i class="pi pi-angle-down"></i>
+                            </div>
+                        </li>
+                        <li class="flex align-items-center gap-2">
+                            <img src="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" style="width: 32px" />
+                            <div>
+                                <span class="font-medium">Ioni Bowcher Elsner</span>
+                                <div class="text-sm text-color-secondary">ioni@email.com</div>
+                            </div>
+                            <div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
+                                <span>Viewer</span>
+                                <i class="pi pi-angle-down"></i>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+            </div>
         </OverlayPanel>
     </div>
 </template>
diff --git a/doc/overlaypanel/DataTableDoc.vue b/doc/overlaypanel/DataTableDoc.vue
index 1faa181e3..be418b22d 100644
--- a/doc/overlaypanel/DataTableDoc.vue
+++ b/doc/overlaypanel/DataTableDoc.vue
@@ -17,7 +17,7 @@
             <span class="text-600">{{ selectedProduct.category }}</span>
         </div>
 
-        <OverlayPanel ref="op" appendTo="body" showCloseIcon>
+        <OverlayPanel ref="op" appendTo="body">
             <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
                 <Column field="name" header="Name" sortable style="min-width: 12rem"></Column>
                 <Column header="Image">
@@ -57,7 +57,7 @@ export default {
     <span class="text-600">{{ selectedProduct.category }}</span>
 </div>
 
-<OverlayPanel ref="op" appendTo="body" showCloseIcon>
+<OverlayPanel ref="op" appendTo="body">
     <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
         <Column field="name" header="Name" sortable style="width: 50%"></Column>
         <Column header="Image" style="width: 20%">
@@ -90,7 +90,7 @@ export default {
             <span class="text-600">{{ selectedProduct.category }}</span>
         </div>
 
-        <OverlayPanel ref="op" appendTo="body" showCloseIcon>
+        <OverlayPanel ref="op" appendTo="body">
             <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
                 <Column field="name" header="Name" sortable style="min-width: 12rem"></Column>
                 <Column header="Image">
@@ -152,7 +152,7 @@ export default {
             <span class="text-600">{{ selectedProduct.category }}</span>
         </div>
 
-        <OverlayPanel ref="op" appendTo="body" showCloseIcon>
+        <OverlayPanel ref="op" appendTo="body">
             <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
                 <Column field="name" header="Name" sortable style="min-width: 12rem"></Column>
                 <Column header="Image">