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

Inplace pt demo added

pull/3913/head
Tuğçe Küçükoğlu 2023-04-27 14:55:28 +03:00
parent 87fcb6225e
commit 9e5baefc4c
4 changed files with 148 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
doc/inplace/pt/PTDoc.vue Normal file
View File

@ -0,0 +1,88 @@
<template>
<DocSectionText v-bind="$attrs"></DocSectionText>
<div class="card">
<Inplace
:pt="{
display: { class: 'bg-primary' }
}"
>
<template #display> View Content </template>
<template #content>
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</template>
</Inplace>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
code: {
basic: `
<Inplace
:pt="{
display: { class: 'bg-primary' }
}"
>
<template #display> View Content </template>
<template #content>
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</template>
</Inplace>`,
options: `
<template>
<div class="card">
<Inplace
:pt="{
display: { class: 'bg-primary' }
}"
>
<template #display> View Content </template>
<template #content>
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</template>
</Inplace>
</div>
</template>
<script>
<\/script>`,
composition: `
<template>
<div class="card">
<Inplace
:pt="{
display: { class: 'bg-primary' }
}"
>
<template #display> View Content </template>
<template #content>
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</template>
</Inplace>
</div>
</template>
<script setup>
<\/script>`
}
};
}
};
</script>

8
doc/inplace/pt/PTImage.vue Normal file
View File

@ -0,0 +1,8 @@
<template>
<DocSectionText v-bind="$attrs">
<p>{{ $attrs.description }}</p>
</DocSectionText>
<div class="card">
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/inplace.jpg" />
</div>
</template>

41
doc/inplace/pt/index.vue Normal file
View File

@ -0,0 +1,41 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>Inplace Pass Through</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
import PtDoc from './PTDoc.vue';
import PTImage from './PTImage.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
},
{
id: 'pt.doc.badge',
label: 'Inplace PT Options',
component: DocApiTable,
data: getPTOption('Inplace')
},
{
id: 'pt.demo',
label: 'Demo',
component: PtDoc
}
]
};
}
};
</script>

13
pages/inplace/index.vue
View File

@ -1,5 +1,12 @@
<template>
<DocComponent title="Vue Inplace Component" header="Inplace" description="Inplace provides an easy to do editing and display at the same time where clicking the output displays the actual content." :componentDocs="docs" :apiDocs="['Inplace']" />
<DocComponent
title="Vue Inplace Component"
header="Inplace"
description="Inplace provides an easy to do editing and display at the same time where clicking the output displays the actual content."
:componentDocs="docs"
:apiDocs="['Inplace']"
:ptTabComponent="ptComponent"
/>
</template>
<script>
@ -10,6 +17,7 @@ import ImportDoc from '@/doc/inplace/ImportDoc';
import InputDoc from '@/doc/inplace/InputDoc';
import LazyDoc from '@/doc/inplace/LazyDoc';
import StyleDoc from '@/doc/inplace/StyleDoc';
import PTComponent from '@/doc/inplace/pt/index.vue';
export default {
data() {
@ -50,7 +58,8 @@ export default {
label: 'Accessibility',
component: AccessibilityDoc
}
]
],
ptComponent: PTComponent
};
}
};