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

PTViewer added to Menu components I

pull/6424/head
tugcekucukoglu 2024-09-17 12:03:44 +03:00
parent bca8373526
commit 3a9ee1665f
12 changed files with 172 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

27
apps/showcase/doc/breadcrumb/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,27 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="ptViewerDoc">
<Breadcrumb :home="home" :model="items" />
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
home: {
icon: 'pi pi-home'
},
items: [{ label: 'Electronics' }, { label: 'Computer', icon: 'pi pi-desktop' }, { label: 'Accessories' }, { label: 'Keyboard' }, { label: 'Wireless' }],
ptViewerDoc: [
{
data: getPTOptions('Breadcrumb'),
key: 'Breadcrumb'
}
]
};
}
};
</script>

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

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

28
apps/showcase/doc/contextmenu/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,28 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="ptViewerDoc">
<img id="logo" alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature2.jpg" class="w-full md:w-[20rem] rounded shadow-lg" @contextmenu="onImageRightClick" aria-haspopup="true" />
<ContextMenu ref="menu" appendTo="#logo" :model="items" />
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
items: [
{ label: 'Copy', icon: 'pi pi-copy' },
{ label: 'Rename', icon: 'pi pi-file-edit' }
],
ptViewerDoc: [
{
data: getPTOptions('ContextMenu'),
key: 'ContextMenu'
}
]
};
}
};
</script>

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

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

47
apps/showcase/doc/dock/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,47 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="ptViewerDoc">
<div class="relative w-full h-[400px]">
<Dock :model="items">
<template #itemicon="{ item }">
<img v-tooltip.top="item.label" :alt="item.label" :src="item.icon" style="width: 100%" />
</template>
</Dock>
</div>
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
items: [
{
label: 'Finder',
icon: 'https://primefaces.org/cdn/primevue/images/dock/finder.svg'
},
{
label: 'App Store',
icon: 'https://primefaces.org/cdn/primevue/images/dock/appstore.svg'
},
{
label: 'Photos',
icon: 'https://primefaces.org/cdn/primevue/images/dock/photos.svg'
},
{
label: 'Trash',
icon: 'https://primefaces.org/cdn/primevue/images/dock/trash.png'
}
],
ptViewerDoc: [
{
data: getPTOptions('Dock'),
key: 'Dock'
}
]
};
}
};
</script>

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

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

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

@ -0,0 +1,54 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="ptViewerDoc">
<Menu :model="items" />
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
items: [
{
label: 'Documents',
items: [
{
label: 'New',
icon: 'pi pi-plus'
},
{
label: 'Search',
icon: 'pi pi-search'
}
]
},
{
separator: true
},
{
label: 'Profile',
items: [
{
label: 'Settings',
icon: 'pi pi-cog'
},
{
label: 'Logout',
icon: 'pi pi-sign-out'
}
]
}
],
ptViewerDoc: [
{
data: getPTOptions('Menu'),
key: 'Menu'
}
]
};
}
};
</script>

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