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

Updated DynamicDialog documentation

pull/4759/head
Cagatay Civici 2023-11-02 09:28:24 +03:00
parent 03732ab3f8
commit dbac600078
11 changed files with 160 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
doc/dynamicdialog/AccessibilityDoc.vue
View File

@ -1,5 +1,5 @@
<template>
<DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
<p>DynamicDialog uses the Dialog component internally, visit <NuxtLink to="/dialog/#accessibility">dialog</NuxtLink> for more information.</p>
<p>Visit accessibility section of <NuxtLink to="/dialog/#accessibility">dialog</NuxtLink> component for more information.</p>
</DocSectionText>
</template>

29
doc/dynamicdialog/CloseDialogDoc.vue
View File

@ -1,8 +1,8 @@
<template>
<DocSectionText v-bind="$attrs">
<p>The <i>close</i> function of the <i>dialogRef</i> is used to hide a Dialog. The <i>dialogRef</i> is injected to the component that is loaded by the dialog.</p>
<p>The <i>close</i> function is available through a <i>dialogRef</i> that is injected to the component loaded by the dialog.</p>
</DocSectionText>
<DocSectionCode :code="code" importCode hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
</template>
<script>
@ -11,33 +11,14 @@ export default {
return {
code: {
basic: `
export default {
inject: ['dialogRef'],
methods:{
closeDialog() {
this.dialogRef.close();
}
}
}
`,
options: `
export default {
inject: ['dialogRef'],
methods:{
closeDialog() {
this.dialogRef.close();
}
}
}
`,
composition: `
import { inject } from "vue";
const dialogRef = inject('dialogRef');
const closeDialog = () => {
dialogRef.value.close();
}`
}
`
}
};
}

49
doc/dynamicdialog/CustomizationDoc.vue
View File

@ -1,6 +1,6 @@
<template>
<DocSectionText v-bind="$attrs">
<p>DynamicDialog uses the Dialog component internally, visit <NuxtLink to="/dialog">dialog</NuxtLink> for more information.</p>
<p>DynamicDialog uses the Dialog component internally, visit <NuxtLink to="/dialog">dialog</NuxtLink> for more information about the available props.</p>
</DocSectionText>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
</template>
@ -11,38 +11,27 @@ export default {
return {
code: {
basic: `
import { markRaw } from 'vue';
import ProductListDemo from './ProductListDemo';
import FooterDemo from './FooterDemo';
import { useDialog } from 'primevue/usedialog';
export default {
methods:{
showProducts() {
const dialogRef = this.$dialog.open(ProductListDemo, {
props: {
header: 'Product List',
style: {
width: '50vw',
},
breakpoints:{
'960px': '75vw',
'640px': '90vw'
},
modal: true
},
templates: {
footer: markRaw(FooterDemo)
},
onClose: (options) => {
const data = options.data;
if (data) {
this.$toast.add({ severity:'info', summary: 'Info Message', detail:'Order submitted', life: 3000 });
}
}
});
const dialog = useDialog();
const showProducts = () => {
dialog.open(ProductListDemo, {
props: {
header: 'Product List',
style: {
width: '50vw',
},
breakpoints:{
'960px': '75vw',
'640px': '90vw'
},
modal: true
}
}
}`
});
}
`
}
};
}

30
doc/dynamicdialog/DialogServiceDoc.vue
View File

@ -1,12 +1,12 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Dynamic dialogs are controlled via the <i>DialogService</i> that needs to be installed as an application plugin.</p>
<p>A single shared dialog instance is required in the application, ideal location would be defining it once at the main application template.</p>
<DocSectionCode :code="code1" hideToggleCode hideCodeSandbox hideStackBlitz />
<p>A dynamic dialog is controlled via the <i>DialogService</i> that needs to be installed as an application plugin.</p>
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<p>The service is available with the <i>useDialog</i> function for Composition API or using the <i>$dialog</i> property of the application for Options API.</p>
<DocSectionCode :code="code3" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
</DocSectionText>
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<div class="doc-section-description">
<p><i>$dialog</i> is available as a property in the application instance for Options API. The service can be injected with the <i>useDialog</i> function for Composition API.</p>
</div>
<DocSectionCode :code="code2" importCode hideCodeSandbox hideStackBlitz />
</template>
<script>
@ -15,6 +15,11 @@ export default {
return {
code1: {
basic: `
<DynamicDialog />
`
},
code2: {
basic: `
import {createApp} from 'vue';
import DialogService from 'primevue/dialogservice';
@ -22,19 +27,16 @@ const app = createApp(App);
app.use(DialogService);
`
},
code2: {
code3: {
basic: `
/* Composition API */
import { useDialog } from 'primevue/usedialog';
const dialog = useDialog();
`,
options: `const dialogRef = this.$dialog;
`,
composition: `
import { useDialog } from 'primevue/usedialog';
const dialog = useDialog();`
/* Options API */
const dialog = this.$dialog;
`
}
};
}

50
doc/dynamicdialog/EmitsDoc.vue
View File

@ -1,50 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
The <i>emits</i> object can be used to handle events emitted by the child component. Each method name used in this object must begin with 'on'. Then the emit name should come. This is an
<a href="https://vuejs.org/guide/essentials/event-handling.html#listening-to-events">event handling</a> rule of Vue.
</p>
<DocSectionCode :code="code1" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code2" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
</DocSectionText>
</template>
<script>
export default {
data() {
return {
code1: {
basic: `
this.$dialog.open(ProductListDemo, {
emits: {
onInfo: (e) => { // The 'on' prefix and same emit name are required.
console.log(e); // {user: 'primetime'}
}
},
};
`
},
code2: {
basic: `
// ProductListDemo
<template>
<Button label="Submit" @click="showInfo" />
</template>
<script>
export default {
emits: ['info'],
methods: {
showInfo() {
this.$emit('info', { user: 'primetime' });
}
}
};
<\/script>
`
}
};
}
};
</script>

45
doc/dynamicdialog/EventsDoc.vue Normal file
View File

@ -0,0 +1,45 @@
<template>
<DocSectionText v-bind="$attrs">
<p>The <i>emits</i> object defines callbacks to handle events emitted by the component within the Dialog.</p>
<DocSectionCode :code="code1" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code2" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
</DocSectionText>
</template>
<script>
export default {
data() {
return {
code1: {
basic: `
import ProductListDemo from './ProductListDemo';
import { useDialog } from 'primevue/usedialog';
const dialog = useDialog();
const showProducts = () => {
dialog.open(ProductListDemo, {
onCancel: (e) => {
console.log(e); // {user: 'primetime'}
}
});
}
`
},
code2: {
basic: `
<script setup>
/* ProductListDemo.vue */
const emit = defineEmits(['onCancel', 'onSave'])
function buttonClick() {
emit('onCancel', {user: 'primetime'});
}
<\/script>
`
}
};
}
};
</script>

13
doc/dynamicdialog/UsageDoc.vue → doc/dynamicdialog/ExampleDoc.vue
View File

@ -1,9 +1,6 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
Dialogs can be created dynamically with any component as the content using a DialogService along with a <i>DynamicDialog</i> component. Ideal location of a DynamicDialog is the main template so that it can be used by any component within
the application.
</p>
<p>A sample implementation to demonstrate loading components asynchronously, nested content and passing data.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
@ -15,7 +12,7 @@
<script>
import { markRaw } from 'vue';
import FooterDemo from './demo/FooterDemo.vue';
import FooterDemo from './demo/FooterDemo';
import ProductListDemo from './demo/ProductListDemo';
export default {
@ -239,8 +236,7 @@ export default {
'src/components/FooterDemo.vue': {
content: `
<template>
<Button type="button" label="No" icon="pi pi-times" @click="closeDialog({ buttonType: 'No' })" text></Button>
<Button type="button" label="Yes" icon="pi pi-check" @click="closeDialog({ buttonType: 'Yes' })" autofocus></Button>
<Button type="button" label="Cancel" icon="pi pi-times" @click="closeDialog({ buttonType: 'Cancel' })" autofocus></Button>
</template>
<script>
@ -349,8 +345,7 @@ const closeDialog = () => {
'src/components/FooterDemo.vue': {
content: `
<template>
<Button type="button" label="No" icon="pi pi-times" @click="closeDialog({ buttonType: 'No' })" text></Button>
<Button type="button" label="Yes" icon="pi pi-check" @click="closeDialog({ buttonType: 'Yes' })" autofocus></Button>
<Button type="button" label="Cancel" icon="pi pi-times" @click="closeDialog({ buttonType: 'Cancel' })" autofocus></Button>
</template>
<script setup>

48
doc/dynamicdialog/OpenDialogDoc.vue
View File

@ -1,46 +1,40 @@
<template>
<DocSectionText v-bind="$attrs">
<p>The <i>open</i> function of the <i>DialogService</i> is used to open a Dialog. First parameter is the component to load and second one is the configuration object to customize the Dialog.</p>
<DocSectionCode :code="code1" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
<p>The component can also be loaded asynchronously, this approach is useful in conditional cases and to improve initial load times as well.</p>
<DocSectionCode :code="code2" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
</DocSectionText>
<DocSectionCode :code="code" importCode hideCodeSandbox hideStackBlitz />
</template>
<script>
export default {
data() {
return {
code: {
code1: {
basic: `
import ProductListDemo from './ProductListDemo';
export default {
methods:{
showProducts() {
this.$dialog.open(ProductListDemo, {});
}
}
}
`,
options: `
import ProductListDemo from './ProductListDemo';
export default {
methods:{
showProducts() {
this.$dialog.open(ProductListDemo, {});
}
}
}
`,
composition: `
import ProductListDemo from './ProductListDemo';
import { useDialog } from 'primevue/usedialog';
const dialog = useDialog();
const showProducts = () => {
const dialog = useDialog();
dialog.open(ProductListDemo, {});
}`
}
`
},
code2: {
basic: `
import { useDialog } from 'primevue/usedialog';
const dialog = useDialog();
const dynamicComponent = defineAsyncComponent(() => import('./ProductListDemo.vue'));
const showProducts = () => {
dialog.open(dynamicComponent, {});
}
`
}
};
}

60
doc/dynamicdialog/PassingDataDoc.vue
View File

@ -1,11 +1,11 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Data can be passed to the component that is loaded by the Dialog and also from the component back to the caller component. Use the <i>open</i> function and pass your parameters with the <i>data</i> property in the options object.</p>
<p>Use the <i>data</i> property to pass parameters when opening a Dialog, the internal component can later access this data using <i>dialogRef</i>.</p>
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<p>Similarly when hiding a Dialog, any parameter passed to the <i>close</i> function is received from the <i>onClose</i> callback defined by the <i>open</i> function at the caller.</p>
<p>Similarly when hiding a Dialog, any parameter passed to the <i>close</i> function is received from the <i>onClose</i> callback.</p>
<DocSectionCode :code="code3" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code4" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
</DocSectionText>
@ -17,41 +17,51 @@ export default {
return {
code1: {
basic: `
this.$dialog.open(ProductListDemo, {
data: {
user: 'primetime'
}
};
const dialog = useDialog();
const showProducts = () => {
dialog.open(ProductListDemo, {
data: {
user: 'primetime'
}
});
}
`
},
code2: {
basic: `
export default {
inject: ['dialogRef'],
mounted:{
const params = this.dialogRef.data; // {user: 'primetime'}
}
}
import { inject, onMounted } from "vue";
const dialogRef = inject('dialogRef');
onMounted(() => {
const params = this.dialogRef.data; // {user: 'primetime'}
})
`
},
code3: {
basic: `
this.$dialog.open(ProductListDemo, {
onClose(options) {
const callbackParams = options.data; // {id: 12}
}
);
const dialog = useDialog();
const showProducts = () => {
dialog.open(ProductListDemo, {
onClose: (opt) => {
const callbackParams = opt.data; // {selectedId: 12}
}
});
}
`
},
code4: {
basic: `
export default {
inject: ['dialogRef'],
methods:{
closeDialog() {
this.dialogRef.close({id: 12});
}
}
import { inject } from "vue";
const dialogRef = inject('dialogRef');
const closeDialog = () => {
dialogRef.value.close({
selectedId: 12
});
}
`
}

3
doc/dynamicdialog/demo/FooterDemo.vue
View File

@ -1,6 +1,5 @@
<template>
<Button type="button" label="No" icon="pi pi-times" @click="closeDialog({ buttonType: 'No' })" text></Button>
<Button type="button" label="Yes" icon="pi pi-check" @click="closeDialog({ buttonType: 'Yes' })" autofocus></Button>
<Button type="button" label="Cancel" icon="pi pi-times" @click="closeDialog({ buttonType: 'Cancel' })" autofocus></Button>
</template>
<script>

26
pages/dynamicdialog/index.vue
View File

@ -15,11 +15,11 @@ import AccessibilityDoc from '@/doc/dynamicdialog/AccessibilityDoc.vue';
import CloseDialogDoc from '@/doc/dynamicdialog/CloseDialogDoc.vue';
import CustomizationDoc from '@/doc/dynamicdialog/CustomizationDoc.vue';
import DialogServiceDoc from '@/doc/dynamicdialog/DialogServiceDoc.vue';
import EmitsDoc from '@/doc/dynamicdialog/EmitsDoc.vue';
import EventsDoc from '@/doc/dynamicdialog/EventsDoc.vue';
import ExampleDoc from '@/doc/dynamicdialog/ExampleDoc.vue';
import ImportDoc from '@/doc/dynamicdialog/ImportDoc.vue';
import OpenDialogDoc from '@/doc/dynamicdialog/OpenDialogDoc.vue';
import PassingDataDoc from '@/doc/dynamicdialog/PassingDataDoc.vue';
import UsageDoc from '@/doc/dynamicdialog/UsageDoc.vue';
import PTComponent from '@/doc/dynamicdialog/pt/index.vue';
import ThemingDoc from '@/doc/dynamicdialog/theming/index.vue';
@ -37,16 +37,16 @@ export default {
label: 'Dialog Service',
component: DialogServiceDoc
},
{
id: 'usage',
label: 'Usage',
component: UsageDoc
},
{
id: 'open',
label: 'Open',
component: OpenDialogDoc
},
{
id: 'customization',
label: 'Customization',
component: CustomizationDoc
},
{
id: 'close',
label: 'Close',
@ -58,14 +58,14 @@ export default {
component: PassingDataDoc
},
{
id: 'emits',
label: 'Emits',
component: EmitsDoc
id: 'events',
label: 'Events',
component: EventsDoc
},
{
id: 'customization',
label: 'Customization',
component: CustomizationDoc
id: 'example',
label: 'Example',
component: ExampleDoc
},
{
id: 'accessibility',