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

PTViewer added to Data components III

pull/6439/head
tugcekucukoglu 2024-09-19 09:53:36 +03:00
parent d9db64cbc8
commit b242b6df1f
9 changed files with 133 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/showcase/doc/organizationchart/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/orgchart.jpg" />
</div>
</template>

54
apps/showcase/doc/organizationchart/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,54 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<OrganizationChart :value="data" collapsible>
<template #default="slotProps">
<span>{{ slotProps.node.label }}</span>
</template>
</OrganizationChart>
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
data: {
label: 'Argentina',
children: [
{
label: 'Argentina',
children: [
{
label: 'Argentina'
},
{
label: 'Croatia'
}
]
},
{
label: 'France',
children: [
{
label: 'France'
},
{
label: 'Morocco'
}
]
}
]
},
docs: [
{
data: getPTOptions('OrganizationChart'),
key: 'OrganizationChart'
}
]
};
}
};
</script>

8
apps/showcase/doc/organizationchart/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.organizationchart',

8
apps/showcase/doc/timeline/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/timeline.jpg" />
</div>
</template>

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

@ -0,0 +1,36 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="ptViewerDoc">
<Timeline :value="events">
<template #opposite="slotProps">
<small class="text-surface-500 dark:text-surface-400">{{ slotProps.item.date }}</small>
</template>
<template #content="slotProps">
{{ slotProps.item.status }}
</template>
</Timeline>
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
events: [
{ status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0' },
{ status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
{ status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
{ status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
],
ptViewerDoc: [
{
data: getPTOptions('Timeline'),
key: 'Timeline'
}
]
};
}
};
</script>

8
apps/showcase/doc/toast/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.toast',

8
apps/showcase/doc/virtualscroller/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/virtualscroller.jpg" />
</div>
</template>

31
apps/showcase/doc/virtualscroller/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
<template v-slot:item="{ item, options }">
<div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
</template>
</VirtualScroller>
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
items: null,
docs: [
{
data: getPTOptions('VirtualScroller'),
key: 'VirtualScroller'
}
]
};
},
mounted() {
this.items = Array.from({ length: 100000 }).map((_, i) => `Item #${i}`);
}
};
</script>

8
apps/showcase/doc/virtualscroller/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.virtualscroller',