From eab5018ab270d21026edf12894e8641e8fe2f9af Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 23 Oct 2023 17:30:41 +0300
Subject: [PATCH] Update template demo

---
 doc/fieldset/TemplateDoc.vue   | 26 +++++++++++++-------------
 doc/fieldset/ToggleableDoc.vue |  5 +----
 2 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/doc/fieldset/TemplateDoc.vue b/doc/fieldset/TemplateDoc.vue
index aa77b686b..d6885cac9 100644
--- a/doc/fieldset/TemplateDoc.vue
+++ b/doc/fieldset/TemplateDoc.vue
@@ -1,13 +1,13 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Legend section can also be defined with custom content instead of primitive values.</p>
+        <p>Legend section can be customized with custom content using templating.</p>
     </DocSectionText>
     <div class="card">
         <Fieldset>
             <template #legend>
-                <div class="flex align-items-center text-primary">
-                    <span class="pi pi-user mr-2"></span>
-                    <span class="font-bold text-lg">User Details</span>
+                <div class="flex align-items-center gap-2 px-2">
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                    <span class="font-bold">Amy Elsner</span>
                 </div>
             </template>
             <p class="m-0">
@@ -27,9 +27,9 @@ export default {
                 basic: `
 <Fieldset>
     <template #legend>
-        <div class="flex align-items-center text-primary">
-            <span class="pi pi-user mr-2"></span>
-            <span class="font-bold text-lg">User Details</span>
+        <div class="flex align-items-center gap-2 px-2">
+            <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
+            <span class="font-bold">Amy Elsner</span>
         </div>
     </template>
     <p class="m-0">
@@ -43,9 +43,9 @@ export default {
     <div class="card">
         <Fieldset>
             <template #legend>
-                <div class="flex align-items-center text-primary">
-                    <span class="pi pi-user mr-2"></span>
-                    <span class="font-bold text-lg">User Details</span>
+                <div class="flex align-items-center gap-2 px-2">
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                    <span class="font-bold">Amy Elsner</span>
                 </div>
             </template>
             <p class="m-0">
@@ -64,9 +64,9 @@ export default {
     <div class="card">
         <Fieldset>
             <template #legend>
-                <div class="flex align-items-center text-primary">
-                    <span class="pi pi-user mr-2"></span>
-                    <span class="font-bold text-lg">User Details</span>
+                <div class="flex align-items-center gap-2 px-2">
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                    <span class="font-bold">Amy Elsner</span>
                 </div>
             </template>
             <p class="m-0">
diff --git a/doc/fieldset/ToggleableDoc.vue b/doc/fieldset/ToggleableDoc.vue
index b3fe671f0..286a1c460 100644
--- a/doc/fieldset/ToggleableDoc.vue
+++ b/doc/fieldset/ToggleableDoc.vue
@@ -1,9 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>
-            Content of the fieldset can be expanded and collapsed when <i>toggleable</i> option is enabled. A toggleable fieldset can either be used as a Controlled or Uncontrolled component. In controlled mode a binding to <i>collapsed</i>property
-            along with <i>toggle</i> event are needed to manage the content state.
-        </p>
+        <p>Content of the fieldset can be expanded and collapsed when <i>toggleable</i> option is enabled.</p>
     </DocSectionText>
     <div class="card">
         <Fieldset legend="Header" :toggleable="true">