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

PtViewer demos added

pull/6439/head
tugcekucukoglu 2024-09-19 10:36:09 +03:00
parent 46bf8838ba
commit 19324e94ff
12 changed files with 130 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/showcase/components/doc/DocPTViewer.vue
View File

@ -35,6 +35,7 @@ export default {
if (componentName === 'ConfirmDialog') cmpName = 'Dialog';
else if (componentName === 'ScrollTop') cmpName = 'Button';
else if (componentName === 'Galleria') cmpName = 'GalleriaContent';
if (item.label === 'root') selector = `[data-pc-name="${cmpName.toLowerCase()}"]`;
else if (item.label.startsWith('pc')) selector = `[data-pc-name="${item.label.toLowerCase()}"]`;

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

41
apps/showcase/doc/divider/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,41 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Asperiores debitis praesentium aliquam.</p>
<Divider align="left" type="solid">
<b>Left</b>
</Divider>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem doloremque laudantium.</p>
<Divider align="center" type="dotted">
<b>Center</b>
</Divider>
<p>Temporibus autem quibusdam et aut officiis debitis aut rerum saepe eveniet ut et voluptates.</p>
<Divider align="right" type="dashed">
<b>Right</b>
</Divider>
</div>
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
docs: [
{
data: getPTOptions('Divider'),
key: 'Divider'
}
]
};
}
};
</script>

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

8
apps/showcase/doc/galleria/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>

45
apps/showcase/doc/galleria/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,45 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
</template>
<template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
</template>
</Galleria>
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
import { PhotoService } from '@/service/PhotoService';
export default {
data() {
return {
images: null,
responsiveOptions: [
{
breakpoint: '1300px',
numVisible: 4
},
{
breakpoint: '575px',
numVisible: 1
}
],
docs: [
{
data: getPTOptions('Galleria'),
key: 'Galleria'
}
]
};
},
mounted() {
PhotoService.getImages().then((data) => (this.images = data));
}
};
</script>

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

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

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

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

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

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

3
packages/primevue/src/galleria/GalleriaContent.vue
View File

@ -118,7 +118,8 @@ export default {
props: {
...this.$attrs,
pt: this.pt,
unstyled: this.unstyled
unstyled: this.unstyled,
'data-pc-name': 'galleria'
}
});
},