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

Dialog & DynamicDialog pt demos added

pull/3913/head
Tuğçe Küçükoğlu 2023-04-28 11:54:50 +03:00
parent 37cf1e2861
commit ceb42fdecd
8 changed files with 243 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
doc/dialog/pt/PTDoc.vue Normal file
View File

@ -0,0 +1,100 @@
<template>
<DocSectionText v-bind="$attrs"> </DocSectionText>
<div class="card flex justify-content-center">
<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
<Dialog
v-model:visible="visible"
modal
header="Header"
:pt="{
root: { class: 'w-12 sm:w-9 md:w-6' }
}"
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</Dialog>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
visible: false,
code: {
basic: `
<Dialog
v-model:visible="visible"
modal
header="Header"
:pt="{
root: { class: 'w-12 sm:w-9 md:w-6' }
}"
>
<p>Lorem ipsum </p>
</Dialog>`,
options: `
<template>
<div class="card flex justify-content-center">
<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
<Dialog
v-model:visible="visible"
modal
header="Header"
:pt="{
root: { class: 'w-12 sm:w-9 md:w-6' }
}"
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</Dialog>
</div>
</template>
<script>
export default {
data() {
return {
visible: false
};
}
};
<\/script>`,
composition: `
<template>
<div class="card flex justify-content-center">
<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
<Dialog
v-model:visible="visible"
modal
header="Header"
:pt="{
root: { class: 'w-12 sm:w-9 md:w-6' }
}"
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</Dialog>
</div>
</template>
<script setup>
import { ref } from "vue";
const visible = ref(false);
<\/script>`
}
};
}
};
</script>

8
doc/dialog/pt/PTImage.vue Normal file
View File

@ -0,0 +1,8 @@
<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>

41
doc/dialog/pt/index.vue Normal file
View File

@ -0,0 +1,41 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>Dialog Pass Through</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
import PtDoc from './PTDoc.vue';
import PTImage from './PTImage.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
},
{
id: 'pt.doc.dialog',
label: 'Dialog PT Options',
component: DocApiTable,
data: getPTOption('Dialog')
},
{
id: 'pt.demo',
label: 'Demo',
component: PtDoc
}
]
};
}
};
</script>

37
doc/dynamicdialog/pt/PTDoc.vue Normal file
View File

@ -0,0 +1,37 @@
<template>
<DocSectionText v-bind="$attrs"></DocSectionText>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
</template>
<script>
export default {
data() {
return {
code: {
basic: `
<DynamicDialog
:pt="{
root: { class: 'w-12 sm:w-9 md:w-6' }
}"
/>`,
options: `
<template>
<DynamicDialog
:pt="{
root: { class: 'w-12 sm:w-9 md:w-6' }
}"
/>
</template>`,
composition: `
<template>
<DynamicDialog
:pt="{
root: { class: 'w-12 sm:w-9 md:w-6' }
}"
/>
</template>`
}
};
}
};
</script>

8
doc/dynamicdialog/pt/PTImage.vue Normal file
View File

@ -0,0 +1,8 @@
<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>

41
doc/dynamicdialog/pt/index.vue Normal file
View File

@ -0,0 +1,41 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>Dynamic Dialog Pass Through</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
import PtDoc from './PTDoc.vue';
import PTImage from './PTImage.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
},
{
id: 'pt.doc.dynamicdialog',
label: 'Dialog Elements',
component: DocApiTable,
data: getPTOption('Dialog')
},
{
id: 'pt.demo',
label: 'Demo',
component: PtDoc
}
]
};
}
};
</script>

6
pages/dialog/index.vue
View File

@ -1,5 +1,5 @@
<template>
<DocComponent title="Vue Dialog Component" header="Dialog" description="Dialog is a container to display content in an overlay window" :componentDocs="docs" :apiDocs="['Dialog']" />
<DocComponent title="Vue Dialog Component" header="Dialog" description="Dialog is a container to display content in an overlay window" :componentDocs="docs" :apiDocs="['Dialog']" :ptTabComponent="ptComponent" />
</template>
<script>
@ -13,6 +13,7 @@ import PositionDoc from '@/doc/dialog/PositionDoc';
import ResponsiveDoc from '@/doc/dialog/ResponsiveDoc';
import StyleDoc from '@/doc/dialog/StyleDoc';
import WithoutModalDoc from '@/doc/dialog/WithoutModalDoc';
import PTComponent from '@/doc/dialog/pt/index.vue';
export default {
data() {
@ -68,7 +69,8 @@ export default {
label: 'Accessibility',
component: AccessibilityDoc
}
]
],
ptComponent: PTComponent
};
}
};

5
pages/dynamicdialog/index.vue
View File

@ -5,6 +5,7 @@
description="Dialogs can be created dynamically with any component as the content using a DialogService."
:componentDocs="docs"
:apiDocs="['DynamicDialog', 'Dialog', 'DialogService-UseDialog', 'DynamicDialogOptions']"
:ptTabComponent="ptComponent"
/>
</template>
@ -18,6 +19,7 @@ import ImportDoc from '@/doc/dynamicdialog/ImportDoc';
import OpenDialogDoc from '@/doc/dynamicdialog/OpenDialogDoc';
import PassingDataDoc from '@/doc/dynamicdialog/PassingDataDoc';
import UsageDoc from '@/doc/dynamicdialog/UsageDoc';
import PTComponent from '@/doc/dynamicdialog/pt/index.vue';
export default {
data() {
@ -68,7 +70,8 @@ export default {
label: 'Accessibility',
component: AccessibilityDoc
}
]
],
ptComponent: PTComponent
};
}
};