PTViewer added to overlay components
tugcekucukoglu
parent
d38d5bc97a
commit
16654516d6
|
|
@ -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/confirmpopup.jpg" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="ptViewerDoc">
|
||||
<ConfirmPopup group="ptviewer"></ConfirmPopup>
|
||||
<Button ref="btn" @click="confirm1($event)" label="Open Popup" outlined></Button>
|
||||
</DocPTViewer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ptViewerDoc: [
|
||||
{
|
||||
data: getPTOptions('ConfirmPopup'),
|
||||
key: 'ConfirmPopup'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
confirm1(event) {
|
||||
this.$confirm.require({
|
||||
target: event.currentTarget,
|
||||
message: 'Are you sure you want to proceed?',
|
||||
icon: 'pi pi-exclamation-triangle',
|
||||
rejectProps: {
|
||||
label: 'Cancel',
|
||||
severity: 'secondary',
|
||||
outlined: true
|
||||
},
|
||||
acceptProps: {
|
||||
label: 'Save'
|
||||
},
|
||||
accept: () => {
|
||||
this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
|
||||
},
|
||||
reject: () => {
|
||||
this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -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.confirmpopup',
|
||||
|
|
|
|||
|
|
@ -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/dialog.jpg" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="ptViewerDoc">
|
||||
<Dialog v-model:visible="visible" appendTo="#doc-ptviewer" header="Edit Profile" maximizable pt:mask="!relative" :draggable="false" class="!my-auto" :style="{ width: '25rem' }">
|
||||
<span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<label for="username" class="font-semibold w-24">Username</label>
|
||||
<InputText id="username" class="flex-auto" autocomplete="off" />
|
||||
</div>
|
||||
<div class="flex items-center gap-4 mb-8">
|
||||
<label for="email" class="font-semibold w-24">Email</label>
|
||||
<InputText id="email" class="flex-auto" autocomplete="off" />
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="flex justify-end gap-2">
|
||||
<Button type="button" label="Cancel" severity="secondary"></Button>
|
||||
<Button type="button" label="Save"></Button>
|
||||
</div>
|
||||
</template>
|
||||
</Dialog>
|
||||
</DocPTViewer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: true,
|
||||
ptViewerDoc: [
|
||||
{
|
||||
data: getPTOptions('Dialog'),
|
||||
key: 'Dialog'
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -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.dialog',
|
||||
|
|
|
|||
|
|
@ -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/dialog.jpg" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>For more information visit <PrimeVueNuxtLink to="/dialog/#pt.viewer">Dialog PT</PrimeVueNuxtLink>.</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -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.dynamicdialog',
|
||||
|
|
|
|||
|
|
@ -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/overlaypanel.jpg" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="ptViewerDoc">
|
||||
<Button ref="btn" type="button" icon="pi pi-share-alt" label="Share" @click="toggle" />
|
||||
<Popover ref="op" appendTo="self">
|
||||
<div class="flex flex-col gap-4 w-[25rem]">
|
||||
<div>
|
||||
<span class="font-medium block mb-2">Share this document</span>
|
||||
<InputGroup>
|
||||
<InputText value="https://primevue.org/12323ff26t2g243g423g234gg52hy25XADXAG3" readonly class="w-[25rem]"></InputText>
|
||||
<InputGroupAddon>
|
||||
<i class="pi pi-copy"></i>
|
||||
</InputGroupAddon>
|
||||
</InputGroup>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-medium block mb-2">Invite Member</span>
|
||||
<InputGroup>
|
||||
<InputText disabled></InputText>
|
||||
<Button label="Invite" icon="pi pi-users"></Button>
|
||||
</InputGroup>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-medium block mb-2">Team Members</span>
|
||||
<ul class="list-none p-0 m-0 flex flex-col gap-4">
|
||||
<li v-for="member in members" :key="member.name" class="flex items-center gap-2">
|
||||
<img :src="`https://primefaces.org/cdn/primevue/images/avatar/${member.image}`" style="width: 32px" />
|
||||
<div>
|
||||
<span class="font-medium">{{ member.name }}</span>
|
||||
<div class="text-sm text-surface-500 dark:text-surface-400">{{ member.email }}</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-surface-500 dark:text-surface-400 ml-auto text-sm">
|
||||
<span>{{ member.role }}</span>
|
||||
<i class="pi pi-angle-down"></i>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</Popover>
|
||||
</DocPTViewer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
members: [
|
||||
{ name: 'Amy Elsner', image: 'amyelsner.png', email: 'amy@email.com', role: 'Owner' },
|
||||
{ name: 'Bernardo Dominic', image: 'bernardodominic.png', email: 'bernardo@email.com', role: 'Editor' },
|
||||
{ name: 'Ioni Bowcher', image: 'ionibowcher.png', email: 'ioni@email.com', role: 'Viewer' }
|
||||
],
|
||||
ptViewerDoc: [
|
||||
{
|
||||
data: getPTOptions('Popover'),
|
||||
key: 'Popover'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toggle(event) {
|
||||
this.$refs.op.show(event);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -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.popover',
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="ptViewerDoc">
|
||||
<Button v-tooltip="{ value: 'Confirm to proceed', hideDelay: 300000 }" severity="secondary" label="Tooltip" />
|
||||
</DocPTViewer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ptViewerDoc: [
|
||||
{
|
||||
data: getPTOptions('Tooltip'),
|
||||
key: 'Tooltip'
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -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.tooltip',
|
||||
|
|
|
|||
Loading…
Reference in New Issue