75 lines
2.5 KiB
Vue
75 lines
2.5 KiB
Vue
<template>
|
|
<div>
|
|
<Head>
|
|
<Title>Vue Dynamic Dialog Component</Title>
|
|
<Meta name="description" content="Dynamic Dialog is a Dialog container to display content dynamicaly in an overlay window." />
|
|
</Head>
|
|
|
|
<div class="content-section introduction">
|
|
<div class="feature-intro">
|
|
<h1>Dynamic Dialog</h1>
|
|
<p>Dialogs can be created dynamically with any component as the content using a DialogService.</p>
|
|
</div>
|
|
<AppDemoActions />
|
|
</div>
|
|
|
|
<div class="content-section implementation">
|
|
<div class="card">
|
|
<Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
|
|
|
|
<DynamicDialog />
|
|
</div>
|
|
</div>
|
|
|
|
<DynamicDialogDoc />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Button from 'primevue/button';
|
|
import { h } from 'vue';
|
|
import DynamicDialogDoc from './DynamicDialogDoc.vue';
|
|
import ProductListDemo from './ProductListDemo';
|
|
|
|
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: () => {
|
|
return [
|
|
h(Button, { label: 'No', icon: 'pi pi-times', onClick: () => dialogRef.close({ buttonType: 'No' }), class: 'p-button-text' }),
|
|
h(Button, { label: 'Yes', icon: 'pi pi-check', onClick: () => dialogRef.close({ buttonType: 'Yes' }), autofocus: true })
|
|
];
|
|
}
|
|
},
|
|
onClose: (options) => {
|
|
const data = options.data;
|
|
|
|
if (data) {
|
|
const buttonType = data.buttonType;
|
|
const summary_and_detail = buttonType ? { summary: 'No Product Selected', detail: `Pressed '${buttonType}' button` } : { summary: 'Product Selected', detail: data.name };
|
|
|
|
this.$toast.add({ severity: 'info', ...summary_and_detail, life: 3000 });
|
|
}
|
|
}
|
|
});
|
|
}
|
|
},
|
|
components: {
|
|
DynamicDialogDoc: DynamicDialogDoc
|
|
}
|
|
};
|
|
</script>
|