mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-09 17:02:38 +00:00
Dialog & DynamicDialog pt demos added
This commit is contained in:
Tuğçe Küçükoğlu
parent
37cf1e2861
commit
ceb42fdecd
8 changed files with 243 additions and 3 deletions
100
doc/dialog/pt/PTDoc.vue
Normal file
100
doc/dialog/pt/PTDoc.vue
Normal 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
8
doc/dialog/pt/PTImage.vue
Normal 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
41
doc/dialog/pt/index.vue
Normal 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
37
doc/dynamicdialog/pt/PTDoc.vue
Normal 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
8
doc/dynamicdialog/pt/PTImage.vue
Normal 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
41
doc/dynamicdialog/pt/index.vue
Normal 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>
|
||||
|
|
@ -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,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
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue