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

PTViewer added to Data components II

pull/6439/head
tugcekucukoglu 2024-09-18 16:11:12 +03:00
parent f404a5c3a1
commit 270762cab7
9 changed files with 102 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/showcase/doc/paginator/pt/PTImage.vue
View File

@ -1,8 +0,0 @@
<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/paginator.png" />
</div>
</template>

25
apps/showcase/doc/paginator/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,25 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="ptViewerDoc">
<div class="w-full">
<Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]"></Paginator>
</div>
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
ptViewerDoc: [
{
data: getPTOptions('Paginator'),
key: 'Paginator'
}
]
};
}
};
</script>

8
apps/showcase/doc/paginator/pt/index.vue
View File

@ -11,16 +11,16 @@
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOptions } from '@/components/doc/helpers';
import PTImage from './PTImage.vue';
import PTViewer from './PTViewer.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
id: 'pt.viewer',
label: 'Viewer',
component: PTViewer
},
{
id: 'pt.doc.paginator',

8
apps/showcase/doc/tree/pt/PTImage.vue
View File

@ -1,8 +0,0 @@
<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/tree.jpg" />
</div>
</template>

29
apps/showcase/doc/tree/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,29 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="ptViewerDoc">
<Tree v-model:selectionKeys="selectedKey" filter :value="nodes" selectionMode="checkbox" class="w-full md:w-[30rem]"></Tree>
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
import { NodeService } from '@/service/NodeService';
export default {
data() {
return {
nodes: null,
selectedKey: null,
ptViewerDoc: [
{
data: getPTOptions('Tree'),
key: 'Tree'
}
]
};
},
mounted() {
NodeService.getTreeNodes().then((data) => (this.nodes = data));
}
};
</script>

8
apps/showcase/doc/tree/pt/index.vue
View File

@ -11,16 +11,16 @@
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOptions } from '@/components/doc/helpers';
import PTImage from './PTImage.vue';
import PTViewer from './PTViewer.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
id: 'pt.viewer',
label: 'Viewer',
component: PTViewer
},
{
id: 'pt.doc.tree',

8
apps/showcase/doc/treetable/pt/PTImage.vue
View File

@ -1,8 +0,0 @@
<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/wireframe-placeholder.jpg" />
</div>
</template>

36
apps/showcase/doc/treetable/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,36 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="ptViewerDoc">
<TreeTable :value="nodes" tableStyle="min-width: 50rem">
<Column field="name" header="Name" expander style="width: 34%"></Column>
<Column field="size" header="Size" style="width: 33%"></Column>
<Column field="type" header="Type" style="width: 33%"></Column>
</TreeTable>
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
import { NodeService } from '@/service/NodeService';
export default {
data() {
return {
nodes: null,
ptViewerDoc: [
{
data: getPTOptions('TreeTable'),
key: 'TreeTable'
},
{
data: getPTOptions('Column'),
key: 'Column'
}
]
};
},
mounted() {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
}
};
</script>

8
apps/showcase/doc/treetable/pt/index.vue
View File

@ -11,16 +11,16 @@
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOptions } from '@/components/doc/helpers';
import PTImage from './PTImage.vue';
import PTViewer from './PTViewer.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
id: 'pt.viewer',
label: 'Viewer',
component: PTViewer
},
{
id: 'pt.doc.treetable',