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

PTViewer added to Button components

pull/6439/head
tugcekucukoglu 2024-09-18 12:58:59 +03:00
parent 828c123924
commit ca5b1b46b9
9 changed files with 117 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

23
apps/showcase/doc/button/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,23 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<Button label="Profile" icon="pi pi-user" severity="secondary" badge="2" badgeSeverity="contrast" />
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
docs: [
{
data: getPTOptions('Button'),
key: 'Button'
}
]
};
}
};
</script>

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

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

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

@ -0,0 +1,47 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<div style="position: relative; height: 300px">
<SpeedDial :model="items" direction="down" style="position: absolute; left: calc(50% - 2rem); top: 0" />
</div>
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
items: [
{
label: 'Add',
icon: 'pi pi-pencil'
},
{
label: 'Update',
icon: 'pi pi-refresh'
},
{
label: 'Delete',
icon: 'pi pi-trash'
},
{
label: 'Upload',
icon: 'pi pi-upload'
},
{
label: 'Vue Website',
icon: 'pi pi-external-link'
}
],
docs: [
{
data: getPTOptions('SpeedDial'),
key: 'SpeedDial'
}
]
};
}
};
</script>

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

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

35
apps/showcase/doc/splitbutton/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,35 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<SplitButton label="Save" icon="pi pi-check" dropdownIcon="pi pi-cog" @click="save" :model="items" />
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
items: [
{
label: 'Update'
},
{
label: 'Delete'
},
{
label: 'Vue Website'
},
{ label: 'Upload', to: '/fileupload' }
],
docs: [
{
data: getPTOptions('SplitButton'),
key: 'SplitButton'
}
]
};
}
};
</script>

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