Update DynamicDialogDoc.vue
Tuğçe Küçükoğlu
parent
098abdcbd4
commit
e8a9500312
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<AppDoc name="DynamicDialogDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="dynamicdialog/DynamicDialogDemo.vue">
|
<AppDoc name="DynamicDialogDemo" :sources="sources" :extPages="pages" :service="['ProductService']" :data="['products-small']" github="dynamicdialog/DynamicDialogDemo.vue">
|
||||||
<h5>DialogService</h5>
|
<h5>DialogService</h5>
|
||||||
<p>Dynamic dialogs require the <i>DialogService</i> to be configured globally.</p>
|
<p>Dynamic dialogs require the <i>DialogService</i> to be configured globally.</p>
|
||||||
|
|
||||||
|
|
@ -45,7 +45,7 @@ const dialogRef = this.$dialog;
|
||||||
<h5>Composition API</h5>
|
<h5>Composition API</h5>
|
||||||
<p>The service can be injected with the <i>useDialog</i> function.</p>
|
<p>The service can be injected with the <i>useDialog</i> function.</p>
|
||||||
<pre v-code.script><code>
|
<pre v-code.script><code>
|
||||||
import { useDialog } from 'primevue/useDialog';
|
import { useDialog } from 'primevue/usedialog';
|
||||||
|
|
||||||
const dialog = useDialog();
|
const dialog = useDialog();
|
||||||
|
|
||||||
|
|
@ -72,7 +72,7 @@ export default {
|
||||||
<h6>Composition API</h6>
|
<h6>Composition API</h6>
|
||||||
<pre v-code.script><code>
|
<pre v-code.script><code>
|
||||||
import ProductListDemo from './ProductListDemo';
|
import ProductListDemo from './ProductListDemo';
|
||||||
import { useDialog } from 'primevue/useDialog';
|
import { useDialog } from 'primevue/usedialog';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
methods:{
|
methods:{
|
||||||
|
|
@ -332,7 +332,7 @@ export default {
|
||||||
<script>
|
<script>
|
||||||
import { h } from 'vue';
|
import { h } from 'vue';
|
||||||
import Button from 'primevue/button';
|
import Button from 'primevue/button';
|
||||||
import ProductListDemo from './ProductListDemo';
|
import ProductListDemo from './components/ProductListDemo';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
methods:{
|
methods:{
|
||||||
|
|
@ -369,8 +369,346 @@ export default {
|
||||||
}
|
}
|
||||||
<\\/script>
|
<\\/script>
|
||||||
`
|
`
|
||||||
|
},
|
||||||
|
'composition-api': {
|
||||||
|
tabName: 'Composition API Source',
|
||||||
|
content: `
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<Button label="Show" @click="onShow" />
|
||||||
|
<Toast />
|
||||||
|
|
||||||
|
<DynamicDialog />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { h } from 'vue';
|
||||||
|
import { useDialog } from 'primevue/usedialog';
|
||||||
|
import { useToast } from 'priemvue/usetoast';
|
||||||
|
import Button from 'primevue/button';
|
||||||
|
import ProductListDemo from './components/ProductListDemo';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
const dialog = useDialog();
|
||||||
|
const toast = useToast();
|
||||||
|
|
||||||
|
const showProducts = () => {
|
||||||
|
const dialogRef = 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 };
|
||||||
|
|
||||||
|
toast.add({ severity:'info', ...summary_and_detail, life: 3000 });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return { dialog, showProducts }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
<\\/script>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
'browser-source': {
|
||||||
|
tabName: 'Browser Source',
|
||||||
|
imports: `<script src="https://unpkg.com/primevue@^3/dynamicdialog/dynamicdialog.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/dynamicdialogservice/dynamicdialogservice.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/toast/toast.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/toastservice/toastservice.min.js"><\\/script>`,
|
||||||
|
content: `<div id="app">
|
||||||
|
<p-button label="Show" @click="onShow"></p-button>
|
||||||
|
<p-toast></p-toast>
|
||||||
|
|
||||||
|
<p-dynamicdialog></p-dynamicdialog>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
const { createApp } = Vue;
|
||||||
|
const { useDialog } = primevue.usedialog;
|
||||||
|
const { useToast } = primevue.usetoast;
|
||||||
|
|
||||||
|
const App = {
|
||||||
|
setup() {
|
||||||
|
const dialog = useDialog();
|
||||||
|
const toast = useToast();
|
||||||
|
|
||||||
|
const showProducts = () => {
|
||||||
|
const dialogRef = 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 };
|
||||||
|
|
||||||
|
toast.add({ severity:'info', ...summary_and_detail, life: 3000 });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
"p-dynamicdialog": primevue.dynamicdialog,
|
||||||
|
"p-button": primevue.button,
|
||||||
|
"p-toast": primevue.toast
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
createApp(App)
|
||||||
|
.use(primevue.config.default)
|
||||||
|
.use(primevue.dialogservice)
|
||||||
|
.use(primevue.toastservice)
|
||||||
|
.mount("#app");
|
||||||
|
<\\/script>
|
||||||
|
<\\/script>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
'demo1': {
|
||||||
|
tabName: 'ProductListDemo.vue',
|
||||||
|
content: `
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-content-end mt-1 mb-3">
|
||||||
|
<Button icon="pi pi-external-link" label="Nested Dialog" class="p-button-outlined p-button-success" @click="showInfo" />
|
||||||
|
</div>
|
||||||
|
<DataTable :value="products" responsiveLayout="scroll">
|
||||||
|
<Column field="code" header="Code"></Column>
|
||||||
|
<Column field="name" header="Name"></Column>
|
||||||
|
<Column header="Image">
|
||||||
|
<template #body="slotProps">
|
||||||
|
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
|
||||||
|
</template>
|
||||||
|
</Column>
|
||||||
|
<Column field="category" header="Category"></Column>
|
||||||
|
<Column field="quantity" header="Quantity"></Column>
|
||||||
|
<Column style="width:5rem">
|
||||||
|
<template #body="slotProps">
|
||||||
|
<Button type="button" icon="pi pi-plus" class="p-button-text p-button-rounded" @click="selectProduct(slotProps.data)"></Button>
|
||||||
|
</template>
|
||||||
|
</Column>
|
||||||
|
</DataTable>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import ProductService from '../../service/ProductService';
|
||||||
|
import InfoDemo from './InfoDemo.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
inject: ['dialogRef'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
products: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
productService: null,
|
||||||
|
created() {
|
||||||
|
this.productService = new ProductService();
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.productService.getProductsSmall().then(data => this.products = data.slice(0,5));
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
selectProduct(data) {
|
||||||
|
this.dialogRef.close(data);
|
||||||
|
},
|
||||||
|
showInfo() {
|
||||||
|
this.$dialog.open(InfoDemo, {
|
||||||
|
props: {
|
||||||
|
header: 'Information',
|
||||||
|
modal: true,
|
||||||
|
dismissableMask: true
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
totalProducts: this.products ? this.products.length : 0
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
<\\/script>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
'demo2': {
|
||||||
|
tabName: 'InfoDemo.vue',
|
||||||
|
content: `
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<p>There are <strong>{{totalProducts}}</strong> products in total in this list.</p>
|
||||||
|
<div class="flex justify-content-end">
|
||||||
|
<Button type="button" label="Close" @click="closeDialog"></Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
inject: ['dialogRef'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
totalProducts: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.totalProducts = this.dialogRef.data.totalProducts;
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
closeDialog() {
|
||||||
|
this.dialogRef.close();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
<\\/script>
|
||||||
|
|
||||||
|
`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
pages: [
|
||||||
|
{
|
||||||
|
tabName: 'ProductsListDemo',
|
||||||
|
content: `
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-content-end mt-1 mb-3">
|
||||||
|
<Button icon="pi pi-external-link" label="Nested Dialog" class="p-button-outlined p-button-success" @click="showInfo" />
|
||||||
|
</div>
|
||||||
|
<DataTable :value="products" responsiveLayout="scroll">
|
||||||
|
<Column field="code" header="Code"></Column>
|
||||||
|
<Column field="name" header="Name"></Column>
|
||||||
|
<Column header="Image">
|
||||||
|
<template #body="slotProps">
|
||||||
|
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
|
||||||
|
</template>
|
||||||
|
</Column>
|
||||||
|
<Column field="category" header="Category"></Column>
|
||||||
|
<Column field="quantity" header="Quantity"></Column>
|
||||||
|
<Column style="width:5rem">
|
||||||
|
<template #body="slotProps">
|
||||||
|
<Button type="button" icon="pi pi-plus" class="p-button-text p-button-rounded" @click="selectProduct(slotProps.data)"></Button>
|
||||||
|
</template>
|
||||||
|
</Column>
|
||||||
|
</DataTable>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import ProductService from '../../service/ProductService';
|
||||||
|
import InfoDemo from './InfoDemo.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
inject: ['dialogRef'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
products: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
productService: null,
|
||||||
|
created() {
|
||||||
|
this.productService = new ProductService();
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.productService.getProductsSmall().then(data => this.products = data.slice(0,5));
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
selectProduct(data) {
|
||||||
|
this.dialogRef.close(data);
|
||||||
|
},
|
||||||
|
showInfo() {
|
||||||
|
this.$dialog.open(InfoDemo, {
|
||||||
|
props: {
|
||||||
|
header: 'Information',
|
||||||
|
modal: true,
|
||||||
|
dismissableMask: true
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
totalProducts: this.products ? this.products.length : 0
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
<\\/script>
|
||||||
|
|
||||||
|
`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tabName: 'InfoDemo',
|
||||||
|
content: `
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<p>There are <strong>{{totalProducts}}</strong> products in total in this list.</p>
|
||||||
|
<div class="flex justify-content-end">
|
||||||
|
<Button type="button" label="Close" @click="closeDialog"></Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
inject: ['dialogRef'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
totalProducts: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.totalProducts = this.dialogRef.data.totalProducts;
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
closeDialog() {
|
||||||
|
this.dialogRef.close();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
<\\/script>
|
||||||
|
|
||||||
|
`
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue