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

PTViewer added to Menu components II

pull/6424/head
tugcekucukoglu 2024-09-17 15:20:05 +03:00
parent a3636d8b63
commit 5b358df016
12 changed files with 361 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

83
apps/showcase/doc/megamenu/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,83 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="ptViewerDoc">
<MegaMenu :model="items" />
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
items: [
{
label: 'Furniture',
icon: 'pi pi-box',
items: [
[
{
label: 'Living Room',
items: [{ label: 'Accessories' }, { label: 'Armchair' }, { label: 'Coffee Table' }, { label: 'Couch' }, { label: 'TV Stand' }]
}
],
[
{
label: 'Kitchen',
items: [{ label: 'Bar stool' }, { label: 'Chair' }, { label: 'Table' }]
},
{
label: 'Bathroom',
items: [{ label: 'Accessories' }]
}
]
]
},
{
label: 'Electronics',
icon: 'pi pi-mobile',
items: [
[
{
label: 'Computer',
items: [{ label: 'Monitor' }, { label: 'Mouse' }, { label: 'Notebook' }, { label: 'Keyboard' }, { label: 'Printer' }, { label: 'Storage' }]
}
],
[
{
label: 'Home Theater',
items: [{ label: 'Projector' }, { label: 'Speakers' }, { label: 'TVs' }]
}
]
]
},
{
label: 'Sports',
icon: 'pi pi-clock',
items: [
[
{
label: 'Football',
items: [{ label: 'Kits' }, { label: 'Shoes' }, { label: 'Shorts' }, { label: 'Training' }]
}
],
[
{
label: 'Running',
items: [{ label: 'Accessories' }, { label: 'Shoes' }, { label: 'T-Shirts' }, { label: 'Shorts' }]
}
]
]
}
],
ptViewerDoc: [
{
data: getPTOptions('MegaMenu'),
key: 'MegaMenu'
}
]
};
}
};
</script>

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

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

69
apps/showcase/doc/menubar/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,69 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="ptViewerDoc">
<Menubar :model="items" />
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
items: [
{
label: 'Home',
icon: 'pi pi-home'
},
{
label: 'Features',
icon: 'pi pi-star'
},
{
label: 'Projects',
icon: 'pi pi-search',
items: [
{
label: 'Components',
icon: 'pi pi-bolt'
},
{
label: 'Blocks',
icon: 'pi pi-server'
},
{
label: 'UI Kit',
icon: 'pi pi-pencil'
},
{
label: 'Templates',
icon: 'pi pi-palette',
items: [
{
label: 'Apollo',
icon: 'pi pi-palette'
},
{
label: 'Ultima',
icon: 'pi pi-palette'
}
]
}
]
},
{
label: 'Contact',
icon: 'pi pi-envelope'
}
],
ptViewerDoc: [
{
data: getPTOptions('Menubar'),
key: 'Menubar'
}
]
};
}
};
</script>

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

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

101
apps/showcase/doc/panelmenu/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,101 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="ptViewerDoc">
<PanelMenu :model="items" class="w-full md:w-80" />
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
items: [
{
label: 'Files',
icon: 'pi pi-file',
items: [
{
label: 'Documents',
icon: 'pi pi-file',
items: [
{
label: 'Invoices',
icon: 'pi pi-file-pdf',
items: [
{
label: 'Pending',
icon: 'pi pi-stop'
},
{
label: 'Paid',
icon: 'pi pi-check-circle'
}
]
},
{
label: 'Clients',
icon: 'pi pi-users'
}
]
},
{
label: 'Images',
icon: 'pi pi-image',
items: [
{
label: 'Logos',
icon: 'pi pi-image'
}
]
}
]
},
{
label: 'Cloud',
icon: 'pi pi-cloud',
items: [
{
label: 'Upload',
icon: 'pi pi-cloud-upload'
},
{
label: 'Download',
icon: 'pi pi-cloud-download'
},
{
label: 'Sync',
icon: 'pi pi-refresh'
}
]
},
{
label: 'Devices',
icon: 'pi pi-desktop',
items: [
{
label: 'Phone',
icon: 'pi pi-mobile'
},
{
label: 'Desktop',
icon: 'pi pi-desktop'
},
{
label: 'Tablet',
icon: 'pi pi-tablet'
}
]
}
],
ptViewerDoc: [
{
data: getPTOptions('PanelMenu'),
key: 'PanelMenu'
}
]
};
}
};
</script>

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

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

92
apps/showcase/doc/tieredmenu/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,92 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="ptViewerDoc">
<TieredMenu :model="items" />
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
items: [
{
label: 'File',
icon: 'pi pi-file',
items: [
{
label: 'New',
icon: 'pi pi-plus',
items: [
{
label: 'Document',
icon: 'pi pi-file'
},
{
label: 'Image',
icon: 'pi pi-image'
},
{
label: 'Video',
icon: 'pi pi-video'
}
]
},
{
label: 'Open',
icon: 'pi pi-folder-open'
},
{
label: 'Print',
icon: 'pi pi-print'
}
]
},
{
label: 'Edit',
icon: 'pi pi-file-edit',
items: [
{
label: 'Copy',
icon: 'pi pi-copy'
},
{
label: 'Delete',
icon: 'pi pi-times'
}
]
},
{
label: 'Search',
icon: 'pi pi-search'
},
{
separator: true
},
{
label: 'Share',
icon: 'pi pi-share-alt',
items: [
{
label: 'Slack',
icon: 'pi pi-slack'
},
{
label: 'Whatsapp',
icon: 'pi pi-whatsapp'
}
]
}
],
ptViewerDoc: [
{
data: getPTOptions('TieredMenu'),
key: 'TieredMenu'
}
]
};
}
};
</script>

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