Update inplace docs

components/lib/inplace/style/InplaceStyle.js

@@ -2,8 +2,9 @@ import BaseStyle from 'primevue/base/style';
 
 const theme = ({ dt }) => `
 .p-inplace-display {
-    display: inline;
+    display: inline-block;
     cursor: pointer;
+    border: 1px solid transparent;
     padding: ${dt('inplace.padding')};
     border-radius: ${dt('inplace.border.radius')};
     transition: background ${dt('inplace.transition.duration')}, color ${dt('inplace.transition.duration')}, outline-color ${dt('inplace.transition.duration')}, box-shadow ${dt('inplace.transition.duration')};
@@ -22,7 +23,7 @@ const theme = ({ dt }) => `
 }
 
 .p-inplace-content {
-    display: inline;
+    display: block;
 }
 `;
 

doc/inplace/ImageDoc.vue

@@ -3,13 +3,15 @@
         <p>Any content such as an image can be placed inside an Inplace.</p>
     </DocSectionText>
     <div class="card">
-        <Inplace class="w-full">
+        <Inplace>
             <template #display>
-                <span class="pi pi-search" style="vertical-align: middle"></span>
-                <span style="margin-left: 0.5rem; vertical-align: middle">View Picture</span>
+                <span class="inline-flex items-center gap-2">
+                    <span class="pi pi-image"></span>
+                    <span>View Photo</span>
+                </span>
             </template>
             <template #content>
-                <img class="w-full" alt="Nature" src="https://primefaces.org/cdn/primevue/images/nature/nature1.jpg" />
+                <img class="w-full sm:w-80 shadow-md" alt="Nature" src="https://primefaces.org/cdn/primevue/images/nature/nature8.jpg" />
             </template>
         </Inplace>
     </div>
@@ -24,11 +26,13 @@ export default {
                 basic: `
 <Inplace>
     <template #display>
-        <span class="pi pi-search" style="vertical-align: middle"></span>
-        <span style="margin-left: 0.5rem; vertical-align: middle">View Picture</span>
+        <span class="inline-flex items-center gap-2">
+            <span class="pi pi-image"></span>
+            <span>View Photo</span>
+        </span>
     </template>
     <template #content>
-        <img class="w-full" alt="Nature" src="/images/nature/nature1.jpg" />
+        <img class="w-full sm:w-80 shadow-md" alt="Nature" src="https://primefaces.org/cdn/primevue/images/nature/nature8.jpg" />
     </template>
 </Inplace>
 `,
@@ -37,11 +41,13 @@ export default {
     <div class="card">
         <Inplace>
             <template #display>
-                <span class="pi pi-search" style="vertical-align: middle"></span>
-                <span style="margin-left: 0.5rem; vertical-align: middle">View Picture</span>
+                <span class="inline-flex items-center gap-2">
+                    <span class="pi pi-image"></span>
+                    <span>View Photo</span>
+                </span>
             </template>
             <template #content>
-                <img class="w-full" src="https://primefaces.org/cdn/primevue/images/nature/nature1.jpg"/>
+                <img class="w-full sm:w-80 shadow-md" alt="Nature" src="https://primefaces.org/cdn/primevue/images/nature/nature8.jpg" />
             </template>
         </Inplace>
     </div>
@@ -55,11 +61,13 @@ export default {
     <div class="card">
         <Inplace>
             <template #display>
-                <span class="pi pi-search" style="vertical-align: middle"></span>
-                <span style="margin-left: 0.5rem; vertical-align: middle">View Picture</span>
+                <span class="inline-flex items-center gap-2">
+                    <span class="pi pi-image"></span>
+                    <span>View Photo</span>
+                </span>
             </template>
             <template #content>
-                <img class="w-full" alt="Nature" src="https://primefaces.org/cdn/primevue/images/nature/nature1.jpg" />
+                <img class="w-full sm:w-80 shadow-md" alt="Nature" src="https://primefaces.org/cdn/primevue/images/nature/nature8.jpg" />
             </template>
         </Inplace>
     </div>

doc/inplace/InputDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Inplace can be used within a form to display a value as read only before making it editable.</p>
+        <p>The <i>closeCallback</i> switches the state back to display mode when called from an event.</p>
     </DocSectionText>
     <div class="card">
         <Inplace>
@@ -8,8 +8,10 @@
                 {{ text || 'Click to Edit' }}
             </template>
             <template #content="{ closeCallback }">
+                <span class="inline-flex items-center gap-2">
                     <InputText v-model="text" autofocus />
                     <Button icon="pi pi-times" text severity="danger" @click="closeCallback" />
+                </span>
             </template>
         </Inplace>
     </div>
@@ -28,8 +30,10 @@ export default {
         {{ text || 'Click to Edit' }}
     </template>
     <template #content="{ closeCallback }">
+        <span class="inline-flex items-center gap-2">
             <InputText v-model="text" autofocus />
             <Button icon="pi pi-times" text severity="danger" @click="closeCallback" />
+        </span>
     </template>
 </Inplace>
 `,
@@ -41,8 +45,10 @@ export default {
                 {{ text || 'Click to Edit' }}
             </template>
             <template #content="{ closeCallback }">
+                <span class="inline-flex items-center gap-2">
                     <InputText v-model="text" autofocus />
                     <Button icon="pi pi-times" text severity="danger" @click="closeCallback" />
+                </span>
             </template>
         </Inplace>
     </div>
@@ -66,8 +72,10 @@ export default {
                 {{ text || 'Click to Edit' }}
             </template>
             <template #content="{ closeCallback }">
+                <span class="inline-flex items-center gap-2">
                     <InputText v-model="text" autofocus />
                     <Button icon="pi pi-times" text severity="danger" @click="closeCallback" />
+                </span>
             </template>
         </Inplace>
     </div>

doc/inplace/LazyDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Using the <i>open</i> event, data can be loaded in a lazy manner before displaying it in a table.</p>
+        <p>The <i>open</i> event is used to initialize the content such as loading data in a lazy manner.</p>
     </DocSectionText>
     <div class="card">
         <Inplace @open="loadData">
@@ -67,7 +67,7 @@ export default {
     },
     methods: {
         loadData() {
-            ProductService.getProductsSmall().then((data) => (this.products = data));
+            ProductService.getProductsMini().then((data) => (this.products = data));
         }
     }
 }
@@ -97,7 +97,7 @@ import {ProductService} from "@/service/ProductService";
 
 const products = ref();
 const loadData = () => {
-    ProductService.getProductsSmall().then((data) => (products.value = data));
+    ProductService.getProductsMini().then((data) => (products.value = data));
 }
 <\/script>
 `
@@ -106,7 +106,7 @@ const loadData = () => {
     },
     methods: {
         loadData() {
-            ProductService.getProductsSmall().then((data) => (this.products = data));
+            ProductService.getProductsMini().then((data) => (this.products = data));
         }
     }
 };