update csb
parent
47cb922654
commit
1a2e3a6a94
|
@ -186,7 +186,7 @@ import AvatarGroup from 'primevue/avatargroup';
|
|||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/avatar" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<LiveEditor name="AvatarDemo" :sources="sources" :components="['AvatarGroup']" />
|
||||
<LiveEditor name="AvatarDemo" :sources="sources" :directives="['Badge']" :components="['AvatarGroup']" />
|
||||
</div>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
|
|
|
@ -185,7 +185,7 @@ Vue.directive('badge', BadgeDirective);
|
|||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/badge" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<LiveEditor name="BadgeDemo" :sources="sources" :components="['Button']" />
|
||||
<LiveEditor name="BadgeDemo" :sources="sources" :directives="['Badge']" :components="['Button']" />
|
||||
</div>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
|
|
|
@ -449,7 +449,7 @@ export default {
|
|||
</div>
|
||||
<div>
|
||||
<h4 class="p-mb-1">{{slotProps.data.name}}</h4>
|
||||
<h6 class="p-mt-0 p-mb-3">{{slotProps.data.price}}</h6>
|
||||
<h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6>
|
||||
<span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
|
||||
<div class="car-buttons p-mt-5">
|
||||
<Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
|
||||
|
@ -476,7 +476,7 @@ export default {
|
|||
</div>
|
||||
<div>
|
||||
<h4 class="p-mb-1">{{slotProps.data.name}}</h4>
|
||||
<h6 class="p-mt-0 p-mb-3">{{slotProps.data.price}}</h6>
|
||||
<h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6>
|
||||
<span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
|
||||
<div class="car-buttons p-mt-5">
|
||||
<Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
|
||||
|
@ -504,7 +504,7 @@ export default {
|
|||
</div>
|
||||
<div>
|
||||
<h4 class="p-mb-1">{{slotProps.data.name}}</h4>
|
||||
<h6 class="p-mt-0 p-mb-3">{{slotProps.data.price}}</h6>
|
||||
<h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6>
|
||||
<span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
|
||||
<div class="car-buttons p-mt-5">
|
||||
<Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
|
||||
|
|
|
@ -248,7 +248,7 @@ export default {
|
|||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/dialog" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<LiveEditor name="ConfirmDialogDemo" :sources="sources" :components="['Button']" />
|
||||
<LiveEditor name="ConfirmDialogDemo" :sources="sources" :confirmationService="true" :toastService="true" :components="['Button']" />
|
||||
</div>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
|
@ -427,39 +427,95 @@ export default {
|
|||
},
|
||||
'api': {
|
||||
content: `<template>
|
||||
<div class="layout-content">
|
||||
<Toast />
|
||||
<ConfirmDialog />
|
||||
<Button @click="del" icon="pi pi-check" label="Confirm"></Button>
|
||||
<div class="content-section implementation">
|
||||
<ConfirmDialog></ConfirmDialog>
|
||||
<ConfirmDialog group="positionDialog"></ConfirmDialog>
|
||||
|
||||
<div class="card">
|
||||
<h5>Basic</h5>
|
||||
<Button @click="confirm1()" icon="pi pi-check" label="Confirm" class="p-mr-2"></Button>
|
||||
<Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button>
|
||||
|
||||
<h5>Position</h5>
|
||||
<div class="p-grid p-dir-col">
|
||||
<div class="p-col">
|
||||
<Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" class="p-button-help p-mr-2"></Button>
|
||||
<Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"></Button>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down" label="TopLeft" class="p-button-warning p-mr-2"></Button>
|
||||
<Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning p-mr-2"></Button>
|
||||
<Button @click="confirmPosition('topright')" icon="pi pi-arrow-down" label="TopRight" class="p-button-warning"></Button>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up" label="BottomLeft" class="p-button-success p-mr-2"></Button>
|
||||
<Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success p-mr-2"></Button>
|
||||
<Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up" label="BottomRight" class="p-button-success"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, defineComponent } from "vue";
|
||||
import { defineComponent } from "vue";
|
||||
import { useConfirm } from "primevue/useconfirm";
|
||||
import { useToast } from "primevue/usetoast";
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const message = ref(null);
|
||||
const confirm = useConfirm();
|
||||
const toast = useToast();
|
||||
|
||||
const del = () => {
|
||||
const confirm1 = () => {
|
||||
confirm.require({
|
||||
message: "Are you sure you want to proceed?",
|
||||
header: "Confirmation",
|
||||
icon: "pi pi-exclamation-triangle",
|
||||
message: 'Are you sure you want to proceed?',
|
||||
header: 'Confirmation',
|
||||
icon: 'pi pi-exclamation-triangle',
|
||||
accept: () => {
|
||||
//callback to execute when user confirms the action
|
||||
toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
|
||||
},
|
||||
reject: () => {
|
||||
//callback to execute when user rejects the action
|
||||
toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
return { message, del };
|
||||
const confirm2 = () => {
|
||||
confirm.require({
|
||||
message: 'Do you want to delete this record?',
|
||||
header: 'Delete Confirmation',
|
||||
icon: 'pi pi-info-circle',
|
||||
acceptClass: 'p-button-danger',
|
||||
accept: () => {
|
||||
toast.add({severity:'info', summary:'Confirmed', detail:'Record deleted', life: 3000});
|
||||
},
|
||||
reject: () => {
|
||||
toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const confirmPosition = (position) => {
|
||||
confirm.require({
|
||||
key: 'positionDialog',
|
||||
message: 'Do you want to delete this record?',
|
||||
header: 'Delete Confirmation',
|
||||
icon: 'pi pi-info-circle',
|
||||
position: position,
|
||||
accept: () => {
|
||||
toast.add({severity:'info', summary:'Confirmed', detail:'Record deleted', life: 3000});
|
||||
},
|
||||
reject: () => {
|
||||
toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return { confirm1, confirm2, confirmPosition };
|
||||
}
|
||||
});`
|
||||
}
|
||||
|
|
|
@ -262,7 +262,7 @@ export default {
|
|||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/dialog" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<LiveEditor name="ConfirmPopupDemo" :sources="sources" :components="['Button']" />
|
||||
<LiveEditor name="ConfirmPopupDemo" :sources="sources" :confirmationService="true" :toastService="true" :components="['Button']" />
|
||||
</div>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
|
@ -371,9 +371,17 @@ export default {
|
|||
},
|
||||
'api': {
|
||||
content: `<template>
|
||||
<div class="layout-content">
|
||||
<Toast />
|
||||
<div class="content-section implementation">
|
||||
<ConfirmPopup></ConfirmPopup>
|
||||
|
||||
<Button @click="del($event)" icon="pi pi-check" label="Confirm"></Button>
|
||||
<div class="card">
|
||||
<Button @click="confirm1($event)" icon="pi pi-check" label="Confirm" class="p-mr-2"></Button>
|
||||
<Button @click="confirm2($event)" icon="pi pi-times" label="Delete" class="p-button-danger p-button-outlined"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
@ -386,22 +394,36 @@ export default defineComponent({
|
|||
const confirm = useConfirm();
|
||||
const toast = useToast();
|
||||
|
||||
const del = (event) => {
|
||||
const confirm1 = (event) => {
|
||||
confirm.require({
|
||||
message: "Are you sure you want to proceed?",
|
||||
icon: "pi pi-exclamation-triangle",
|
||||
target: event.currentTarget,
|
||||
message: 'Are you sure you want to proceed?',
|
||||
icon: 'pi pi-exclamation-triangle',
|
||||
accept: () => {
|
||||
//callback to execute when user confirms the action
|
||||
toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
|
||||
},
|
||||
reject: () => {
|
||||
//callback to execute when user rejects the action
|
||||
toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
|
||||
},
|
||||
toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
return { del };
|
||||
const confirm2 = (event) => {
|
||||
confirm.require({
|
||||
target: event.currentTarget,
|
||||
message: 'Do you want to delete this record?',
|
||||
icon: 'pi pi-info-circle',
|
||||
acceptClass: 'p-button-danger',
|
||||
accept: () => {
|
||||
toast.add({severity:'info', summary:'Confirmed', detail:'Record deleted', life: 3000});
|
||||
},
|
||||
reject: () => {
|
||||
toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return { confirm1, confirm2 };
|
||||
},
|
||||
})
|
||||
`
|
||||
|
|
|
@ -420,7 +420,7 @@ export default {
|
|||
<a href="https://github.com/primefaces/primevue/tree/master/src/showcase/dataview" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<LiveEditor name="DataViewDemo" :sources="sources" service="ProductService" data="products" :components="['Button', 'Dropdown', 'Rating']" />
|
||||
<LiveEditor name="DataViewDemo" :sources="sources" service="ProductService" data="products" :components="['DataViewLayoutOptions', 'Button', 'Dropdown', 'Rating']" />
|
||||
</div>
|
||||
|
||||
<pre v-code>
|
||||
|
@ -559,7 +559,7 @@ export default {
|
|||
<template #list="slotProps">
|
||||
<div class="p-col-12">
|
||||
<div class="product-list-item">
|
||||
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name"/>
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name"/>
|
||||
<div class="product-list-detail">
|
||||
<div class="product-name">{{slotProps.data.name}}</div>
|
||||
<div class="product-description">{{slotProps.data.description}}</div>
|
||||
|
@ -567,7 +567,7 @@ export default {
|
|||
<i class="pi pi-tag product-category-icon"></i><span class="product-category">{{slotProps.data.category}}</span>
|
||||
</div>
|
||||
<div class="product-list-action">
|
||||
<span class="product-price">{{slotProps.data.price}}</span>
|
||||
<span class="product-price">\${{slotProps.data.price}}</span>
|
||||
<Button icon="pi pi-shopping-cart" label="Add to Cart" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
|
||||
<span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
|
||||
</div>
|
||||
|
@ -592,7 +592,7 @@ export default {
|
|||
<Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false"></Rating>
|
||||
</div>
|
||||
<div class="product-grid-item-bottom">
|
||||
<span class="product-price">{{slotProps.data.price}}</span>
|
||||
<span class="product-price">\${{slotProps.data.price}}</span>
|
||||
<Button icon="pi pi-shopping-cart" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -677,7 +677,7 @@ export default {
|
|||
width: 100%;
|
||||
|
||||
img {
|
||||
width: 100px;
|
||||
width: 50px;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
@ -719,7 +719,6 @@ export default {
|
|||
}
|
||||
|
||||
img {
|
||||
width: 75%;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
@ -740,7 +739,6 @@ export default {
|
|||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 75%;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
|
|
|
@ -74,7 +74,7 @@ import DeferredContent from 'primevue/deferredcontent';
|
|||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/deferredcontent" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<LiveEditor name="DeferredContentDemo" :sources="sources" service="ProductService" data="products-small" :components="['DataTable', 'Column']" />
|
||||
<LiveEditor name="DeferredContentDemo" :sources="sources" service="ProductService" :toastService="true" data="products-small" :components="['DataTable', 'Column']" />
|
||||
</div>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
|
|
|
@ -435,6 +435,9 @@ export default {
|
|||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
|
||||
<div>{{ slotProps.value.name }}</div>
|
||||
</div>
|
||||
<span v-else>
|
||||
{{slotProps.placeholder}}
|
||||
</span>
|
||||
</template>
|
||||
<template #option="slotProps">
|
||||
<div class="country-item">
|
||||
|
@ -485,8 +488,7 @@ export default {
|
|||
width: 14rem;
|
||||
}
|
||||
|
||||
.country-item,
|
||||
.country-item-value {
|
||||
.country-item {
|
||||
img {
|
||||
width: 17px;
|
||||
margin-right: 0.5rem;
|
||||
|
|
|
@ -330,7 +330,7 @@ myUploader(event) {
|
|||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/fileupload" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<LiveEditor name="FileUploadDemo" :sources="sources" />
|
||||
<LiveEditor name="FileUploadDemo" :sources="sources" :toastService="true" />
|
||||
</div>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
|
|
|
@ -303,7 +303,7 @@ export default {
|
|||
<span class="product-category">{{slotProps.item.category}}</span>
|
||||
</div>
|
||||
<div class="product-list-action">
|
||||
<h6 class="p-mb-2">{{slotProps.item.price}}</h6>
|
||||
<h6 class="p-mb-2">\${{slotProps.item.price}}</h6>
|
||||
<span :class="'product-badge status-'+slotProps.item.inventoryStatus.toLowerCase()">{{slotProps.item.inventoryStatus}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -494,7 +494,7 @@ export default {
|
|||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/organizationchart" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<LiveEditor name="OrganizationChartDemo" :sources="sources" />
|
||||
<LiveEditor name="OrganizationChartDemo" :sources="sources" :toastService="true" />
|
||||
</div>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
|
@ -728,7 +728,7 @@ export default {
|
|||
<template #person="slotProps">
|
||||
<div class="node-header ui-corner-top">{{slotProps.node.data.label}}</div>
|
||||
<div class="node-content">
|
||||
<img :src="'demo/images/organization/' + slotProps.node.data.avatar" width="32">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="32">
|
||||
<div>{{slotProps.node.data.name}}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -159,7 +159,7 @@ toggle(event) {
|
|||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/overlaypanel" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<LiveEditor name="OverlayPanelDemo" :sources="sources" service="ProductService" data="products-small" :components="['Button', 'DataTable', 'Column']" />
|
||||
<LiveEditor name="OverlayPanelDemo" :sources="sources" service="ProductService" data="products-small" :toastService="true" :components="['Button', 'DataTable', 'Column']" />
|
||||
</div>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
|
|
|
@ -365,10 +365,10 @@ export default {
|
|||
<div class="product-list-detail">
|
||||
<h5 class="p-mb-2">{{slotProps.item.name}}</h5>
|
||||
<i class="pi pi-tag product-category-icon"></i>
|
||||
<span class="product-category">{{slotProps.item.category}}</span>
|
||||
<span class="product-category">{slotProps.item.category}}</span>
|
||||
</div>
|
||||
<div class="product-list-action">
|
||||
<h6 class="p-mb-2">{{slotProps.item.price}}</h6>
|
||||
<h6 class="p-mb-2">\${{{slotProps.item.price}}</h6>
|
||||
<span :class="'product-badge status-'+slotProps.item.inventoryStatus.toLowerCase()">{{slotProps.item.inventoryStatus}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -189,9 +189,12 @@ export default {
|
|||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/splitbutton" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<LiveEditor name="SplitButtonDemo" :sources="sources" :toastService="true" />
|
||||
</div>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
<h3>Basic</h3>
|
||||
|
@ -263,3 +266,84 @@ export default {
|
|||
</TabView>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LiveEditor from '../liveeditor/LiveEditor';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sources:{
|
||||
'template': {
|
||||
content:`<template>
|
||||
<div class="layout-content">
|
||||
<Toast />
|
||||
<div class="content-section implementation">
|
||||
<div class="card">
|
||||
<h5>Basic</h5>
|
||||
<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items"></SplitButton>
|
||||
|
||||
<h5>Severities</h5>
|
||||
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-mb-2"></SplitButton>
|
||||
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-secondary p-mb-2"></SplitButton>
|
||||
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-success p-mb-2"></SplitButton>
|
||||
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-info p-mb-2"></SplitButton>
|
||||
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-warning p-mb-2"></SplitButton>
|
||||
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-help p-mb-2"></SplitButton>
|
||||
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-danger p-mb-2"></SplitButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh',
|
||||
command: () => {
|
||||
this.$toast.add({severity:'success', summary:'Updated', detail:'Data Updated', life: 3000});
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-times',
|
||||
command: () => {
|
||||
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000});
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Vue Website',
|
||||
icon: 'pi pi-external-link',
|
||||
command: () => {
|
||||
window.location.href = 'https://vuejs.org/'
|
||||
}
|
||||
},
|
||||
{ label: 'Upload',
|
||||
icon: 'pi pi-upload',
|
||||
to: '/fileupload'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
save() {
|
||||
this.$toast.add({severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000});
|
||||
}
|
||||
}
|
||||
}`,
|
||||
style: `<style lang="scss" scoped>
|
||||
.p-splitbutton {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
</style>` }
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
}
|
||||
}
|
||||
</script>
|
|
@ -142,7 +142,7 @@ export default {
|
|||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/terminal" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<LiveEditor name="TerminalDemo" :sources="sources" />
|
||||
<LiveEditor name="TerminalDemo" :sources="sources" :terminalService="true" />
|
||||
</div>
|
||||
<pre v-code>
|
||||
<code>
|
||||
|
|
|
@ -286,7 +286,7 @@ this.$toast.add({severity:'success', summary: 'Specific Message', group: 'mykey'
|
|||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/toast" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<LiveEditor name="ToastDemo" :sources="sources" :components="['Button']" />
|
||||
<LiveEditor name="ToastDemo" :sources="sources" :toastService="true" :components="['Button']" />
|
||||
</div>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
|
@ -370,6 +370,10 @@ export default {
|
|||
content: ` <template>
|
||||
<div class="layout-content">
|
||||
<Toast />
|
||||
<Toast position="top-left" group="tl" />
|
||||
<Toast position="bottom-left" group="bl" />
|
||||
<Toast position="bottom-right" group="br" />
|
||||
|
||||
<div class="content-section implementation">
|
||||
<div class="card">
|
||||
<h5>Severities</h5>
|
||||
|
@ -452,8 +456,34 @@ button {
|
|||
},
|
||||
'api': {
|
||||
content: `<template>
|
||||
<div class="layout-content">
|
||||
<Toast />
|
||||
<Button @click="set" icon="pi pi-check" label="Confirm"></Button>
|
||||
<Toast position="top-left" group="tl" />
|
||||
<Toast position="bottom-left" group="bl" />
|
||||
<Toast position="bottom-right" group="br" />
|
||||
|
||||
<div class="content-section implementation">
|
||||
<div class="card">
|
||||
<h5>Severities</h5>
|
||||
<Button label="Success" class="p-button-success" @click="showSuccess" />
|
||||
<Button label="Info" class="p-button-info" @click="showInfo" />
|
||||
<Button label="Warn" class="p-button-warning" @click="showWarn" />
|
||||
<Button label="Error" class="p-button-danger" @click="showError" />
|
||||
|
||||
<h5>Positions</h5>
|
||||
<Button label="Top Left" class="p-mr-2" @click="showTopLeft" />
|
||||
<Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" />
|
||||
<Button label="Bottom Right" class="p-button-success" @click="showBottomRight" />
|
||||
|
||||
<h5>Options</h5>
|
||||
<Button @click="showMultiple" label="Multiple" class="p-button-warning" />
|
||||
<Button @click="showSticky" label="Sticky" />
|
||||
|
||||
<h5>Remove All</h5>
|
||||
<Button @click="clear" label="Clear" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
@ -463,12 +493,55 @@ import { useToast } from "primevue/usetoast";
|
|||
export default defineComponent({
|
||||
setup() {
|
||||
const toast = useToast();
|
||||
const set = () => {
|
||||
toast.add({ severity: "info", summary: "Info Message", detail: "Message Content", life: 3000 });
|
||||
};
|
||||
return { set };
|
||||
|
||||
const showSuccess = () => {
|
||||
toast.add({severity:'success', summary: 'Success Message', detail:'Message Content', life: 3000});
|
||||
}
|
||||
});`
|
||||
const showInfo = () => {
|
||||
toast.add({severity:'info', summary: 'Info Message', detail:'Message Content', life: 3000});
|
||||
}
|
||||
const showWarn = () => {
|
||||
toast.add({severity:'warn', summary: 'Warn Message', detail:'Message Content', life: 3000});
|
||||
}
|
||||
const showError = () => {
|
||||
toast.add({severity:'error', summary: 'Error Message', detail:'Message Content', life: 3000});
|
||||
}
|
||||
const showTopLeft = () => {
|
||||
toast.add({severity: 'info', summary: 'Info Message', detail: 'Message Content', group: 'tl', life: 3000});
|
||||
}
|
||||
const showBottomLeft = () => {
|
||||
toast.add({severity:'warn', summary: 'Warn Message', detail:'Message Content', group: 'bl', life: 3000});
|
||||
}
|
||||
const showBottomRight = () => {
|
||||
toast.add({severity:'success', summary: 'Success Message', detail:'Message Content', group: 'br', life: 3000});
|
||||
}
|
||||
const showSticky = () => {
|
||||
toast.add({severity: 'info', summary: 'Sticky Message', detail: 'Message Content'});
|
||||
}
|
||||
const showMultiple = () => {
|
||||
toast.add({severity:'info', summary:'Message 1', detail:'Message 1 Content', life: 3000});
|
||||
toast.add({severity:'info', summary:'Message 2', detail:'Message 2 Content', life: 3000});
|
||||
toast.add({severity:'info', summary:'Message 3', detail:'Message 3 Content', life: 3000});
|
||||
}
|
||||
const clear = () => {
|
||||
toast.removeAllGroups();
|
||||
}
|
||||
return { showSuccess, showInfo, showWarn, showError, showTopLeft, showBottomLeft, showBottomRight, showSticky, showMultiple, clear };
|
||||
}
|
||||
});`,
|
||||
style: `<style lang="scss" scoped>
|
||||
button {
|
||||
min-width: 10rem;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 960px) {
|
||||
button {
|
||||
width: 100%;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
}
|
||||
</style>`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -176,7 +176,7 @@ export default {
|
|||
{ label: 'Upload',
|
||||
icon: 'pi pi-upload',
|
||||
command: () => {
|
||||
this.$router.push('fileupload');
|
||||
window.location.hash = "/fileupload"
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
|
@ -93,7 +93,7 @@ directives: {
|
|||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/tooltip" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<LiveEditor name="TooltipDemo" :sources="sources" :components="['InputText', 'Button']"/>
|
||||
<LiveEditor name="TooltipDemo" :sources="sources" :directives="['Tooltip']" :components="['InputText', 'Button']"/>
|
||||
</div>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
|
|
Loading…
Reference in New Issue