From d5306b72920f4c30f7f7025aa50d097ae9c22d58 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Fri, 10 May 2024 14:15:51 +0300
Subject: [PATCH] Inplace input demo

---
 doc/inplace/InputDoc.vue | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/doc/inplace/InputDoc.vue b/doc/inplace/InputDoc.vue
index b29fec86e..7e402389a 100644
--- a/doc/inplace/InputDoc.vue
+++ b/doc/inplace/InputDoc.vue
@@ -1,14 +1,15 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Inplace can be used within a form to display a value as read only before making it editable. The <i>closable</i> property adds a close button next to the content to switch back to read only mode.</p>
+        <p>Inplace can be used within a form to display a value as read only before making it editable.</p>
     </DocSectionText>
     <div class="card">
-        <Inplace :closable="true">
+        <Inplace>
             <template #display>
                 {{ text || 'Click to Edit' }}
             </template>
-            <template #content>
+            <template #content="{ closeCallback }">
                 <InputText v-model="text" autofocus />
+                <Button icon="pi pi-times" text severity="danger" @click="closeCallback" />
             </template>
         </Inplace>
     </div>
@@ -22,24 +23,26 @@ export default {
             text: null,
             code: {
                 basic: `
-<Inplace :closable="true">
+<Inplace>
     <template #display>
         {{ text || 'Click to Edit' }}
     </template>
-    <template #content>
+    <template #content="{ closeCallback }">
         <InputText v-model="text" autofocus />
+        <Button icon="pi pi-times" text severity="danger" @click="closeCallback" />
     </template>
 </Inplace>
 `,
                 options: `
 <template>
     <div class="card">
-        <Inplace :closable="true">
+        <Inplace>
             <template #display>
                 {{ text || 'Click to Edit' }}
             </template>
-            <template #content>
+            <template #content="{ closeCallback }">
                 <InputText v-model="text" autofocus />
+                <Button icon="pi pi-times" text severity="danger" @click="closeCallback" />
             </template>
         </Inplace>
     </div>
@@ -58,12 +61,13 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <Inplace :closable="true">
+        <Inplace>
             <template #display>
                 {{ text || 'Click to Edit' }}
             </template>
-            <template #content>
+            <template #content="{ closeCallback }">
                 <InputText v-model="text" autofocus />
+                <Button icon="pi pi-times" text severity="danger" @click="closeCallback" />
             </template>
         </Inplace>
     </div>