vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Update inplace docs

pull/5806/head
Cagatay Civici 2024-05-25 17:14:15 +03:00
parent 40201d667a
commit afefbbb2de
4 changed files with 45 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/lib/inplace/style/InplaceStyle.js
View File

@ -2,8 +2,9 @@ import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => ` const theme = ({ dt }) => `
.p-inplace-display { .p-inplace-display {
display: inline; display: inline-block;
cursor: pointer; cursor: pointer;
border: 1px solid transparent;
padding: ${dt('inplace.padding')}; padding: ${dt('inplace.padding')};
border-radius: ${dt('inplace.border.radius')}; 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')}; 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 { .p-inplace-content {
display: inline; display: block;
} }
`; `;

34
doc/inplace/ImageDoc.vue
View File

@ -3,13 +3,15 @@
<p>Any content such as an image can be placed inside an Inplace.</p> <p>Any content such as an image can be placed inside an Inplace.</p>
</DocSectionText> </DocSectionText>
<div class="card"> <div class="card">
<Inplace class="w-full"> <Inplace>
<template #display> <template #display>
<span class="pi pi-search" style="vertical-align: middle"></span> <span class="inline-flex items-center gap-2">
<span style="margin-left: 0.5rem; vertical-align: middle">View Picture</span> <span class="pi pi-image"></span>
<span>View Photo</span>
</span>
</template> </template>
<template #content> <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> </template>
</Inplace> </Inplace>
</div> </div>
@ -24,11 +26,13 @@ export default {
basic: ` basic: `
<Inplace> <Inplace>
<template #display> <template #display>
<span class="pi pi-search" style="vertical-align: middle"></span> <span class="inline-flex items-center gap-2">
<span style="margin-left: 0.5rem; vertical-align: middle">View Picture</span> <span class="pi pi-image"></span>
<span>View Photo</span>
</span>
</template> </template>
<template #content> <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> </template>
</Inplace> </Inplace>
`, `,
@ -37,11 +41,13 @@ export default {
<div class="card"> <div class="card">
<Inplace> <Inplace>
<template #display> <template #display>
<span class="pi pi-search" style="vertical-align: middle"></span> <span class="inline-flex items-center gap-2">
<span style="margin-left: 0.5rem; vertical-align: middle">View Picture</span> <span class="pi pi-image"></span>
<span>View Photo</span>
</span>
</template> </template>
<template #content> <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> </template>
</Inplace> </Inplace>
</div> </div>
@ -55,11 +61,13 @@ export default {
<div class="card"> <div class="card">
<Inplace> <Inplace>
<template #display> <template #display>
<span class="pi pi-search" style="vertical-align: middle"></span> <span class="inline-flex items-center gap-2">
<span style="margin-left: 0.5rem; vertical-align: middle">View Picture</span> <span class="pi pi-image"></span>
<span>View Photo</span>
</span>
</template> </template>
<template #content> <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> </template>
</Inplace> </Inplace>
</div> </div>

10
doc/inplace/InputDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <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> </DocSectionText>
<div class="card"> <div class="card">
<Inplace> <Inplace>
@ -8,8 +8,10 @@
{{ text || 'Click to Edit' }} {{ text || 'Click to Edit' }}
</template> </template>
<template #content="{ closeCallback }"> <template #content="{ closeCallback }">
<span class="inline-flex items-center gap-2">
<InputText v-model="text" autofocus /> <InputText v-model="text" autofocus />
<Button icon="pi pi-times" text severity="danger" @click="closeCallback" /> <Button icon="pi pi-times" text severity="danger" @click="closeCallback" />
</span>
</template> </template>
</Inplace> </Inplace>
</div> </div>
@ -28,8 +30,10 @@ export default {
{{ text || 'Click to Edit' }} {{ text || 'Click to Edit' }}
</template> </template>
<template #content="{ closeCallback }"> <template #content="{ closeCallback }">
<span class="inline-flex items-center gap-2">
<InputText v-model="text" autofocus /> <InputText v-model="text" autofocus />
<Button icon="pi pi-times" text severity="danger" @click="closeCallback" /> <Button icon="pi pi-times" text severity="danger" @click="closeCallback" />
</span>
</template> </template>
</Inplace> </Inplace>
`, `,
@ -41,8 +45,10 @@ export default {
{{ text || 'Click to Edit' }} {{ text || 'Click to Edit' }}
</template> </template>
<template #content="{ closeCallback }"> <template #content="{ closeCallback }">
<span class="inline-flex items-center gap-2">
<InputText v-model="text" autofocus /> <InputText v-model="text" autofocus />
<Button icon="pi pi-times" text severity="danger" @click="closeCallback" /> <Button icon="pi pi-times" text severity="danger" @click="closeCallback" />
</span>
</template> </template>
</Inplace> </Inplace>
</div> </div>
@ -66,8 +72,10 @@ export default {
{{ text || 'Click to Edit' }} {{ text || 'Click to Edit' }}
</template> </template>
<template #content="{ closeCallback }"> <template #content="{ closeCallback }">
<span class="inline-flex items-center gap-2">
<InputText v-model="text" autofocus /> <InputText v-model="text" autofocus />
<Button icon="pi pi-times" text severity="danger" @click="closeCallback" /> <Button icon="pi pi-times" text severity="danger" @click="closeCallback" />
</span>
</template> </template>
</Inplace> </Inplace>
</div> </div>

8
doc/inplace/LazyDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <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> </DocSectionText>
<div class="card"> <div class="card">
<Inplace @open="loadData"> <Inplace @open="loadData">
@ -67,7 +67,7 @@ export default {
}, },
methods: { methods: {
loadData() { 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 products = ref();
const loadData = () => { const loadData = () => {
ProductService.getProductsSmall().then((data) => (products.value = data)); ProductService.getProductsMini().then((data) => (products.value = data));
} }
<\/script> <\/script>
` `
@ -106,7 +106,7 @@ const loadData = () => {
}, },
methods: { methods: {
loadData() { loadData() {
ProductService.getProductsSmall().then((data) => (this.products = data)); ProductService.getProductsMini().then((data) => (this.products = data));
} }
} }
}; };