update csb

pull/880/head
Tuğçe Küçükoğlu 2021-01-22 17:11:17 +03:00
parent 47cb922654
commit 1a2e3a6a94
18 changed files with 307 additions and 72 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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" />

View File

@ -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 };
}
});`
}

View File

@ -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 };
},
})
`

View File

@ -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;
}

View File

@ -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>

View File

@ -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;

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>
&lt;h3&gt;Basic&lt;/h3&gt;
@ -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>

View File

@ -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>

View File

@ -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>`
}
}
}

View File

@ -176,7 +176,7 @@ export default {
{ label: 'Upload',
icon: 'pi pi-upload',
command: () => {
this.$router.push('fileupload');
window.location.hash = "/fileupload"
}
}
]

View File

@ -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>