csb added
Tuğçe Küçükoğlu
parent
2b4a99d651
commit
01d2af1b2c
|
|
@ -76,7 +76,7 @@ import Card from 'primevue/card';
|
|||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/card" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<LiveEditor name="CardDemo" :sources="sources" :components="['Card', 'Button']"/>
|
||||
<LiveEditor name="CardDemo" :sources="sources" :components="['Button']"/>
|
||||
</div>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
|
|
@ -138,7 +138,7 @@ export default {
|
|||
|
||||
<Card style="width: 25em">
|
||||
<template #header>
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/02/primefacesorg-primevue-2020.png" style="height: 10rem" />
|
||||
</template>
|
||||
<template #title>
|
||||
Advanced Card
|
||||
|
|
|
|||
|
|
@ -274,9 +274,12 @@ data() {
|
|||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/carousel" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/carousel" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<LiveEditor name="CarouselDemo" :sources="sources" service="ProductService" data="products-small" :components="['Button']" />
|
||||
</div>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
<div class="card">
|
||||
|
|
@ -422,3 +425,158 @@ export default {
|
|||
</TabView>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LiveEditor from '../liveeditor/LiveEditor';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sources: {
|
||||
'template': {
|
||||
content: `<template>
|
||||
<div class="layout-content">
|
||||
<div class="content-section implementation">
|
||||
<div class="card">
|
||||
<Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
|
||||
<template #header>
|
||||
<h5>Basic</h5>
|
||||
</template>
|
||||
<template #item="slotProps">
|
||||
<div class="product-item">
|
||||
<div class="product-item-content">
|
||||
<div class="p-mb-3">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="p-mb-1">{{slotProps.data.name}}</h4>
|
||||
<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" />
|
||||
<Button icon="pi pi-star" class="p-button-success p-button-rounded p-mr-2" />
|
||||
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Carousel>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" class="custom-carousel" :circular="true" :autoplayInterval="3000">
|
||||
<template #header>
|
||||
<h5>Circular, AutoPlay, 3 Items per Page and Scroll by 1</h5>
|
||||
</template>
|
||||
<template #item="slotProps">
|
||||
<div class="product-item">
|
||||
<div class="product-item-content">
|
||||
<div class="p-mb-3">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="p-mb-1">{{slotProps.data.name}}</h4>
|
||||
<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" />
|
||||
<Button icon="pi pi-star" class="p-button-success p-button-rounded p-mr-2" />
|
||||
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Carousel>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="352px"
|
||||
style="max-width: 400px; margin-top: 2em">
|
||||
<template #header>
|
||||
<h5>Vertical</h5>
|
||||
</template>
|
||||
<template #item="slotProps">
|
||||
<div class="product-item">
|
||||
<div class="product-item-content">
|
||||
<div class="p-mb-3">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="p-mb-1">{{slotProps.data.name}}</h4>
|
||||
<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" />
|
||||
<Button icon="pi pi-star" class="p-button-success p-button-rounded p-mr-2" />
|
||||
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Carousel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProductService from '../service/ProductService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
products: null,
|
||||
responsiveOptions: [
|
||||
{
|
||||
breakpoint: '1024px',
|
||||
numVisible: 3,
|
||||
numScroll: 3
|
||||
},
|
||||
{
|
||||
breakpoint: '600px',
|
||||
numVisible: 2,
|
||||
numScroll: 2
|
||||
},
|
||||
{
|
||||
breakpoint: '480px',
|
||||
numVisible: 1,
|
||||
numScroll: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
productService: null,
|
||||
created() {
|
||||
this.productService = new ProductService();
|
||||
},
|
||||
mounted() {
|
||||
this.productService.getProductsSmall().then(data => this.products = data.slice(0,9));
|
||||
}
|
||||
}`,
|
||||
style: `<style lang="scss" scoped>
|
||||
.product-item {
|
||||
.product-item-content {
|
||||
border: 1px solid var(--surface-d);
|
||||
border-radius: 3px;
|
||||
margin: .3rem;
|
||||
text-align: center;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
width: 50%;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
|
||||
}
|
||||
}
|
||||
</style>`
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -318,9 +318,12 @@ data() {
|
|||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/cascadeselect" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/cascadeselect" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<LiveEditor name="CascadeSelectDemo" :sources="sources" />
|
||||
</div>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
<h5>Basic</h5>
|
||||
|
|
@ -433,4 +436,137 @@ export default {
|
|||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LiveEditor from '../liveeditor/LiveEditor';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sources: {
|
||||
'template': {
|
||||
content: `<template>
|
||||
<div class="layout-content">
|
||||
<div class="content-section implementation">
|
||||
<div class="card">
|
||||
<h5>Basic</h5>
|
||||
<CascadeSelect v-model="selectedCity1" :options="countries" optionLabel="cname" optionGroupLabel="name"
|
||||
:optionGroupChildren="['states', 'cities']" style="minWidth: 14rem" placeholder="Select a City" />
|
||||
|
||||
<h5>Templating</h5>
|
||||
<CascadeSelect v-model="selectedCity2" :options="countries" optionLabel="cname" optionGroupLabel="name"
|
||||
:optionGroupChildren="['states', 'cities']" style="minWidth: 14rem" placeholder="Select a City">
|
||||
<template #option="slotProps">
|
||||
<div class="country-item">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" v-if="slotProps.option.states" />
|
||||
<i class="pi pi-compass p-mr-2" v-if="slotProps.option.cities"></i>
|
||||
<i class="pi pi-map-marker p-mr-2" v-if="slotProps.option.cname"></i>
|
||||
<span>{{slotProps.option.cname || slotProps.option.name}}</span>
|
||||
</div>
|
||||
</template>
|
||||
</CascadeSelect>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
selectedCity1: null,
|
||||
selectedCity2: null,
|
||||
countries: [
|
||||
{
|
||||
name: 'Australia',
|
||||
code: 'AU',
|
||||
states: [
|
||||
{
|
||||
name: 'New South Wales',
|
||||
cities: [
|
||||
{cname: 'Sydney', code: 'A-SY'},
|
||||
{cname: 'Newcastle', code: 'A-NE'},
|
||||
{cname: 'Wollongong', code: 'A-WO'}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Queensland',
|
||||
cities: [
|
||||
{cname: 'Brisbane', code: 'A-BR'},
|
||||
{cname: 'Townsville', code: 'A-TO'}
|
||||
]
|
||||
},
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Canada',
|
||||
code: 'CA',
|
||||
states: [
|
||||
{
|
||||
name: 'Quebec',
|
||||
cities: [
|
||||
{cname: 'Montreal', code: 'C-MO'},
|
||||
{cname: 'Quebec City', code: 'C-QU'}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Ontario',
|
||||
cities: [
|
||||
{cname: 'Ottawa', code: 'C-OT'},
|
||||
{cname: 'Toronto', code: 'C-TO'}
|
||||
]
|
||||
},
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'United States',
|
||||
code: 'US',
|
||||
states: [
|
||||
{
|
||||
name: 'California',
|
||||
cities: [
|
||||
{cname: 'Los Angeles', code: 'US-LA'},
|
||||
{cname: 'San Diego', code: 'US-SD'},
|
||||
{cname: 'San Francisco', code: 'US-SF'}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Florida',
|
||||
cities: [
|
||||
{cname: 'Jacksonville', code: 'US-JA'},
|
||||
{cname: 'Miami', code: 'US-MI'},
|
||||
{cname: 'Tampa', code: 'US-TA'},
|
||||
{cname: 'Orlando', code: 'US-OR'}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Texas',
|
||||
cities: [
|
||||
{cname: 'Austin', code: 'US-AU'},
|
||||
{cname: 'Dallas', code: 'US-DA'},
|
||||
{cname: 'Houston', code: 'US-HO'}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}`,
|
||||
style: `<style>
|
||||
img {
|
||||
width: 18px;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
</style>`
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -244,9 +244,12 @@ export default {
|
|||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<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>
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<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']" />
|
||||
</div>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
<ConfirmDialog></ConfirmDialog>
|
||||
|
|
@ -332,3 +335,139 @@ 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">
|
||||
<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>
|
||||
export default {
|
||||
methods: {
|
||||
confirm1() {
|
||||
this.$confirm.require({
|
||||
message: 'Are you sure you want to proceed?',
|
||||
header: 'Confirmation',
|
||||
icon: 'pi pi-exclamation-triangle',
|
||||
accept: () => {
|
||||
this.$toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
|
||||
},
|
||||
reject: () => {
|
||||
this.$toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
|
||||
}
|
||||
});
|
||||
},
|
||||
confirm2() {
|
||||
this.$confirm.require({
|
||||
message: 'Do you want to delete this record?',
|
||||
header: 'Delete Confirmation',
|
||||
icon: 'pi pi-info-circle',
|
||||
acceptClass: 'p-button-danger',
|
||||
accept: () => {
|
||||
this.$toast.add({severity:'info', summary:'Confirmed', detail:'Record deleted', life: 3000});
|
||||
},
|
||||
reject: () => {
|
||||
this.$toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
|
||||
}
|
||||
});
|
||||
},
|
||||
confirmPosition(position) {
|
||||
this.$confirm.require({
|
||||
key: 'positionDialog',
|
||||
message: 'Do you want to delete this record?',
|
||||
header: 'Delete Confirmation',
|
||||
icon: 'pi pi-info-circle',
|
||||
position: position,
|
||||
accept: () => {
|
||||
this.$toast.add({severity:'info', summary:'Confirmed', detail:'Record deleted', life: 3000});
|
||||
},
|
||||
reject: () => {
|
||||
this.$toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}`
|
||||
},
|
||||
'api': {
|
||||
content: `<template>
|
||||
<Toast />
|
||||
<ConfirmDialog />
|
||||
<Button @click="del" icon="pi pi-check" label="Confirm"></Button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, 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 = () => {
|
||||
confirm.require({
|
||||
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 };
|
||||
}
|
||||
});`
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -258,9 +258,12 @@ export default {
|
|||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<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>
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<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']" />
|
||||
</div>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
<ConfirmPopup></ConfirmPopup>
|
||||
|
|
@ -311,3 +314,103 @@ 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">
|
||||
<ConfirmPopup></ConfirmPopup>
|
||||
|
||||
<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>
|
||||
export default {
|
||||
methods: {
|
||||
confirm1(event) {
|
||||
this.$confirm.require({
|
||||
target: event.currentTarget,
|
||||
message: 'Are you sure you want to proceed?',
|
||||
icon: 'pi pi-exclamation-triangle',
|
||||
accept: () => {
|
||||
this.$toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
|
||||
},
|
||||
reject: () => {
|
||||
this.$toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
|
||||
}
|
||||
});
|
||||
},
|
||||
confirm2(event) {
|
||||
this.$confirm.require({
|
||||
target: event.currentTarget,
|
||||
message: 'Do you want to delete this record?',
|
||||
icon: 'pi pi-info-circle',
|
||||
acceptClass: 'p-button-danger',
|
||||
accept: () => {
|
||||
this.$toast.add({severity:'info', summary:'Confirmed', detail:'Record deleted', life: 3000});
|
||||
},
|
||||
reject: () => {
|
||||
this.$toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}`
|
||||
},
|
||||
'api': {
|
||||
content: `<template>
|
||||
<ConfirmPopup></ConfirmPopup>
|
||||
|
||||
<Button @click="del($event)" icon="pi pi-check" label="Confirm"></Button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent } from "vue";
|
||||
import { useConfirm } from "primevue/useconfirm";
|
||||
import { useToast } from "primevue/usetoast";
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const confirm = useConfirm();
|
||||
const toast = useToast();
|
||||
|
||||
const del = (event) => {
|
||||
confirm.require({
|
||||
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});
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return { del };
|
||||
},
|
||||
})
|
||||
`
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -416,9 +416,13 @@ export default {
|
|||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<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>
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<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']" />
|
||||
</div>
|
||||
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
<DataView :value="products" :layout="layout" :paginator="true" :rows="9" :sortOrder="sortOrder" :sortField="sortField">
|
||||
|
|
@ -528,3 +532,247 @@ export default {
|
|||
</TabView>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LiveEditor from '../liveeditor/LiveEditor';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sources: {
|
||||
'template': {
|
||||
content: `<template>
|
||||
<div class="layout-content">
|
||||
<div class="content-section implementation">
|
||||
<div class="card">
|
||||
<DataView :value="products" :layout="layout" :paginator="true" :rows="9" :sortOrder="sortOrder" :sortField="sortField">
|
||||
<template #header>
|
||||
<div class="p-grid p-nogutter">
|
||||
<div class="p-col-6" style="text-align: left">
|
||||
<Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)"/>
|
||||
</div>
|
||||
<div class="p-col-6" style="text-align: right">
|
||||
<DataViewLayoutOptions v-model="layout" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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"/>
|
||||
<div class="product-list-detail">
|
||||
<div class="product-name">{{slotProps.data.name}}</div>
|
||||
<div class="product-description">{{slotProps.data.description}}</div>
|
||||
<Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false"></Rating>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #grid="slotProps">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="product-grid-item card">
|
||||
<div class="product-grid-item-top">
|
||||
<div>
|
||||
<i class="pi pi-tag product-category-icon"></i>
|
||||
<span class="product-category">{{slotProps.data.category}}</span>
|
||||
</div>
|
||||
<span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
|
||||
</div>
|
||||
<div class="product-grid-item-content">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name"/>
|
||||
<div class="product-name">{{slotProps.data.name}}</div>
|
||||
<div class="product-description">{{slotProps.data.description}}</div>
|
||||
<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>
|
||||
<Button icon="pi pi-shopping-cart" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</DataView>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProductService from '../service/ProductService';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
products: null,
|
||||
layout: 'grid',
|
||||
sortKey: null,
|
||||
sortOrder: null,
|
||||
sortField: null,
|
||||
sortOptions: [
|
||||
{label: 'Price High to Low', value: '!price'},
|
||||
{label: 'Price Low to High', value: 'price'},
|
||||
]
|
||||
}
|
||||
},
|
||||
productService: null,
|
||||
created() {
|
||||
this.productService = new ProductService();
|
||||
},
|
||||
mounted() {
|
||||
this.productService.getProducts().then(data => this.products = data);
|
||||
},
|
||||
methods: {
|
||||
onSortChange(event){
|
||||
const value = event.value.value;
|
||||
const sortValue = event.value;
|
||||
|
||||
if (value.indexOf('!') === 0) {
|
||||
this.sortOrder = -1;
|
||||
this.sortField = value.substring(1, value.length);
|
||||
this.sortKey = sortValue;
|
||||
}
|
||||
else {
|
||||
this.sortOrder = 1;
|
||||
this.sortField = value;
|
||||
this.sortKey = sortValue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
style: `<style lang="scss" scoped>
|
||||
.p-dropdown {
|
||||
width: 14rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.product-description {
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.product-category-icon {
|
||||
vertical-align: middle;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
.product-category {
|
||||
font-weight: 600;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
::v-deep(.product-list-item) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
width: 100px;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
.product-list-detail {
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
.p-rating {
|
||||
margin: 0 0 .5rem 0;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: .5rem;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.product-list-action {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.p-button {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep(.product-grid-item) {
|
||||
margin: .5rem;
|
||||
border: 1px solid #dee2e6;
|
||||
|
||||
.product-grid-item-top,
|
||||
.product-grid-item-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.product-grid-item-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 576px) {
|
||||
.product-list-item {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 75%;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.product-list-detail {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.product-list-action {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.product-list-action {
|
||||
margin-top: 2rem;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>`
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -167,9 +167,12 @@ import OrderList from 'primevue/orderlist';
|
|||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/orderlist" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/orderlist" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<LiveEditor name="OrderListDemo" :sources="sources" service="ProductService" data="products-small" />
|
||||
</div>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
<OrderList v-model="products" listStyle="height:auto" dataKey="id">
|
||||
|
|
@ -272,4 +275,117 @@ export default {
|
|||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LiveEditor from '../liveeditor/LiveEditor';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sources: {
|
||||
'template': {
|
||||
content: `<template>
|
||||
<div class="layout-content">
|
||||
<div class="content-section implementation">
|
||||
<div class="card">
|
||||
<OrderList v-model="products" listStyle="height:auto" dataKey="id">
|
||||
<template #header>
|
||||
List of Products
|
||||
</template>
|
||||
<template #item="slotProps">
|
||||
<div class="product-item">
|
||||
<div class="image-container">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.item.name" />
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<div class="product-list-action">
|
||||
<h6 class="p-mb-2">{{slotProps.item.price}}</h6>
|
||||
<span :class="'product-badge status-'+slotProps.item.inventoryStatus.toLowerCase()">{{slotProps.item.inventoryStatus}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</OrderList>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProductService from '../service/ProductService';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
products: null
|
||||
}
|
||||
},
|
||||
productService: null,
|
||||
created() {
|
||||
this.productService = new ProductService();
|
||||
},
|
||||
mounted() {
|
||||
this.productService.getProductsSmall().then(data => this.products = data);
|
||||
}
|
||||
}`,
|
||||
style: `<style lang="scss" scoped>
|
||||
.product-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: .5rem;
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
width: 75px;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.product-list-detail {
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
.product-list-action {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.product-category-icon {
|
||||
vertical-align: middle;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
.product-category {
|
||||
vertical-align: middle;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 576px) {
|
||||
.product-item {
|
||||
flex-wrap: wrap;
|
||||
|
||||
.image-container {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
img {
|
||||
margin: 0 0 1rem 0;
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>`
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -490,9 +490,12 @@ export default {
|
|||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<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>
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<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" />
|
||||
</div>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
<h3>Advanced</h3>
|
||||
|
|
@ -705,4 +708,231 @@ export default {
|
|||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</template>
|
||||
</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>Advanced</h5>
|
||||
<OrganizationChart :value="data1" :collapsible="true" class="company" selectionMode="single" v-model:selectionKeys="selection"
|
||||
@node-select="onNodeSelect" @node-unselect="onNodeUnselect" @node-collapse="onNodeCollapse" @node-expand="onNodeExpand">
|
||||
<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">
|
||||
<div>{{slotProps.node.data.name}}</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #default="slotProps">
|
||||
<span>{{slotProps.node.data.label}}</span>
|
||||
</template>
|
||||
</OrganizationChart>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Basic</h5>
|
||||
<OrganizationChart :value="data2">
|
||||
<template #default="slotProps">
|
||||
<span>{{slotProps.node.data.label}}</span>
|
||||
</template>
|
||||
</OrganizationChart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data1: {
|
||||
key: '0',
|
||||
type: 'person',
|
||||
styleClass: 'p-person',
|
||||
data: {label: 'CEO', name: 'Walter White', avatar: 'walter.jpg'},
|
||||
children: [
|
||||
{
|
||||
key: '0_0',
|
||||
type: 'person',
|
||||
styleClass: 'p-person',
|
||||
data: {label: 'CFO', name:'Saul Goodman', avatar: 'saul.jpg'},
|
||||
children:[{
|
||||
key: '0_0_0',
|
||||
data: {label: 'Tax'},
|
||||
selectable: false,
|
||||
styleClass: 'department-cfo'
|
||||
},
|
||||
{
|
||||
key: '0_0_1',
|
||||
data: {label: 'Legal'},
|
||||
selectable: false,
|
||||
styleClass: 'department-cfo'
|
||||
}],
|
||||
},
|
||||
{
|
||||
key: '0_1',
|
||||
type: 'person',
|
||||
styleClass: 'p-person',
|
||||
data: {label: 'COO', name:'Mike E.', avatar: 'mike.jpg'},
|
||||
children:[{
|
||||
key: '0_1_0',
|
||||
data: {label: 'Operations'},
|
||||
selectable: false,
|
||||
styleClass: 'department-coo'
|
||||
}]
|
||||
},
|
||||
{
|
||||
key: '0_2',
|
||||
type: 'person',
|
||||
styleClass: 'p-person',
|
||||
data: {label: 'CTO', name:'Jesse Pinkman', avatar: 'jesse.jpg'},
|
||||
children:[{
|
||||
key: '0_2_0',
|
||||
data: {label: 'Development'},
|
||||
selectable: false,
|
||||
styleClass: 'department-cto',
|
||||
children:[{
|
||||
key: '0_2_0_0',
|
||||
data: {label: 'Analysis'},
|
||||
selectable: false,
|
||||
styleClass: 'department-cto'
|
||||
},
|
||||
{
|
||||
key: '0_2_0_1',
|
||||
data: {label: 'Front End'},
|
||||
selectable: false,
|
||||
styleClass: 'department-cto'
|
||||
},
|
||||
{
|
||||
key: '0_2_0_2',
|
||||
data: {label: 'Back End'},
|
||||
selectable: false,
|
||||
styleClass: 'department-cto'
|
||||
}]
|
||||
},
|
||||
{
|
||||
key: '0_2_1',
|
||||
data: {label: 'QA'},
|
||||
selectable: false,
|
||||
styleClass: 'department-cto'
|
||||
},
|
||||
{
|
||||
key: '0_2_2',
|
||||
data: {label: 'R&D'},
|
||||
selectable: false,
|
||||
styleClass: 'department-cto'
|
||||
}]
|
||||
}
|
||||
]
|
||||
},
|
||||
data2 : {
|
||||
key: '0',
|
||||
data: {label: 'F.C. Barcelona'},
|
||||
children: [
|
||||
{
|
||||
key: '0_0',
|
||||
data: {label: 'F.C. Barcelona'},
|
||||
children: [
|
||||
{
|
||||
key: '0_0_0',
|
||||
data: {label: 'Chelsea F.C.'}
|
||||
},
|
||||
{
|
||||
key: '0_0_1',
|
||||
data: {label: 'F.C. Barcelona'}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
key: '0_1',
|
||||
data: {label: 'Real Madrid'},
|
||||
children: [
|
||||
{
|
||||
key: '0_1_0',
|
||||
data: {label: 'Bayern Munich'}
|
||||
},
|
||||
{
|
||||
key: '0_1_1',
|
||||
data: {label: 'Real Madrid'}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
selection: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onNodeSelect(node) {
|
||||
this.$toast.add({severity:'success', summary: 'Node Selected', detail: node.data.label, life: 3000});
|
||||
},
|
||||
onNodeUnselect(node) {
|
||||
this.$toast.add({severity:'success', summary: 'Node Unselected', detail: node.data.label, life: 3000});
|
||||
},
|
||||
onNodeExpand(node) {
|
||||
this.$toast.add({severity:'success', summary: 'Node Expanded', detail: node.data.label, life: 3000});
|
||||
},
|
||||
onNodeCollapse(node) {
|
||||
this.$toast.add({severity:'success', summary: 'Node Collapsed', detail: node.data.label, life: 3000});
|
||||
}
|
||||
}
|
||||
}`,
|
||||
style: `<style scoped lang="scss">
|
||||
::v-deep(.p-organizationchart) {
|
||||
.p-person {
|
||||
padding: 0;
|
||||
border: 0 none;
|
||||
}
|
||||
|
||||
.node-header, .node-content {
|
||||
padding: .5em .7rem;
|
||||
}
|
||||
|
||||
.node-header {
|
||||
background-color: #495ebb;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.node-content {
|
||||
text-align: center;
|
||||
border: 1px solid #495ebb;
|
||||
}
|
||||
|
||||
.node-content img {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.department-cfo {
|
||||
background-color: #7247bc;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.department-coo {
|
||||
background-color: #a534b6;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.department-cto {
|
||||
background-color: #e9286f;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
</style>`
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -155,9 +155,12 @@ toggle(event) {
|
|||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<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>
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<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']" />
|
||||
</div>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
<Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria:haspopup="true" aria-controls="overlay_panel" />
|
||||
|
|
@ -217,3 +220,86 @@ 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">
|
||||
<Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria:haspopup="true" aria-controls="overlay_panel" />
|
||||
|
||||
<OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" id="overlay_panel" style="width: 450px">
|
||||
<DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
|
||||
<Column field="name" header="Name" sortable></Column>
|
||||
<Column header="Image">
|
||||
<template #body="slotProps">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.image" class="product-image" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="price" header="Price" sortable>
|
||||
<template #body="slotProps">
|
||||
{{formatCurrency(slotProps.data.price)}}
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</OverlayPanel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProductService from '../service/ProductService';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
products: null,
|
||||
selectedProduct: null
|
||||
}
|
||||
},
|
||||
productService: null,
|
||||
created() {
|
||||
this.productService = new ProductService();
|
||||
},
|
||||
mounted() {
|
||||
this.productService.getProductsSmall().then(data => this.products = data);
|
||||
},
|
||||
methods: {
|
||||
toggle(event) {
|
||||
this.$refs.op.toggle(event);
|
||||
},
|
||||
formatCurrency(value) {
|
||||
return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
|
||||
},
|
||||
onProductSelect(event) {
|
||||
this.$refs.op.hide();
|
||||
this.$toast.add({severity:'info', summary: 'Product Selected', detail: event.data.name, life: 3000});
|
||||
}
|
||||
}
|
||||
}`,
|
||||
style: `<style lang="scss" scoped>
|
||||
button {
|
||||
min-width: 15rem;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
width: 50px;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
|
||||
}
|
||||
</style>`
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -257,9 +257,12 @@ onPage(event) {
|
|||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/showcase/paginator" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/showcase/paginator" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<LiveEditor name="PaginatorDemo" :sources="sources" :components="['Button']" />
|
||||
</div>
|
||||
<pre v-code>
|
||||
<code>
|
||||
<h3>Basic</h3>
|
||||
|
|
@ -321,4 +324,77 @@ export default {
|
|||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LiveEditor from '../liveeditor/LiveEditor';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sources: {
|
||||
'template': {
|
||||
content: `<template>
|
||||
<div class="layout-content">
|
||||
<div class="content-section implementation">
|
||||
<div class="card">
|
||||
<h5>Basic</h5>
|
||||
<Paginator :rows="10" :totalRecords="totalRecords" :rowsPerPageOptions="[10,20,30]"></Paginator>
|
||||
|
||||
<h5>Custom</h5>
|
||||
<Paginator v-model:first="first" :rows="1" :totalRecords="totalRecords2"
|
||||
template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink">
|
||||
<template #left>
|
||||
<Button type="button" icon="pi pi-refresh" @click="reset()"/>
|
||||
</template>
|
||||
<template #right>
|
||||
<Button type="button" icon="pi pi-search" />
|
||||
</template>
|
||||
</Paginator>
|
||||
|
||||
<div class="image-gallery">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
first: 0,
|
||||
totalRecords: 120,
|
||||
totalRecords2: 12
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
reset() {
|
||||
this.first = 0;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
image() {
|
||||
return 'nature' + (this.first + 1);
|
||||
}
|
||||
}
|
||||
}`,
|
||||
style: `<style scoped>
|
||||
.p-button.p-button-icon-only {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.image-gallery {
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
</style>`
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -226,9 +226,12 @@ import PickList from 'primevue/picklist';
|
|||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/picklist" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/picklist" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<LiveEditor name="PickListDemo" :sources="sources" service="ProductService" data="products-small" />
|
||||
</div>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
<PickList v-model="products" listStyle="height:342px" dataKey="id">
|
||||
|
|
@ -334,4 +337,120 @@ product-item {
|
|||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LiveEditor from '../liveeditor/LiveEditor';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sources: {
|
||||
'template': {
|
||||
content: `<template>
|
||||
<div class="layout-content">
|
||||
<div class="content-section implementation">
|
||||
<div class="card">
|
||||
<PickList v-model="products" listStyle="height:342px" dataKey="id">
|
||||
<template #sourceHeader>
|
||||
Available
|
||||
</template>
|
||||
<template #targetHeader>
|
||||
Selected
|
||||
</template>
|
||||
<template #item="slotProps">
|
||||
<div class="product-item">
|
||||
<div class="image-container">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<div class="product-list-action">
|
||||
<h6 class="p-mb-2">{{slotProps.item.price}}</h6>
|
||||
<span :class="'product-badge status-'+slotProps.item.inventoryStatus.toLowerCase()">{{slotProps.item.inventoryStatus}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</PickList>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProductService from '../service/ProductService';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
products: null
|
||||
}
|
||||
},
|
||||
productService: null,
|
||||
created() {
|
||||
this.productService = new ProductService();
|
||||
},
|
||||
mounted() {
|
||||
this.productService.getProductsSmall().then(data => this.products = [data, []]);
|
||||
}
|
||||
}`,
|
||||
style: `<style lang="scss" scoped>
|
||||
.product-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: .5rem;
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
width: 75px;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.product-list-detail {
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
.product-list-action {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.product-category-icon {
|
||||
vertical-align: middle;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
.product-category {
|
||||
vertical-align: middle;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 576px) {
|
||||
.product-item {
|
||||
flex-wrap: wrap;
|
||||
|
||||
.image-container {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
img {
|
||||
margin: 0 0 1rem 0;
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>`
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -135,9 +135,12 @@ import Skeleton from 'primevue/skeleton';
|
|||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/skeleton" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/skeleton" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<LiveEditor name="SkeletonDemo" :sources="sources" :components="['DataTable', 'Column']" />
|
||||
</div>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
<div class="card">
|
||||
|
|
@ -276,3 +279,174 @@ import Skeleton from 'primevue/skeleton';
|
|||
</TabView>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LiveEditor from '../liveeditor/LiveEditor';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sources: {
|
||||
'template': {
|
||||
content: `<template>
|
||||
<div class="layout-content">
|
||||
<div class="content-section implementation">
|
||||
<div class="card">
|
||||
<div class="p-grid p-formgrid">
|
||||
<div class="p-field p-col-12 p-md-6">
|
||||
<h5>Rectangle</h5>
|
||||
<Skeleton class="p-mb-2"></Skeleton>
|
||||
<Skeleton width="10rem" class="p-mb-2"></Skeleton>
|
||||
<Skeleton width="5rem" class="p-mb-2"></Skeleton>
|
||||
<Skeleton height="2rem" class="p-mb-2"></Skeleton>
|
||||
<Skeleton width="10rem" height="4rem"></Skeleton>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-6">
|
||||
<h5>Rounded</h5>
|
||||
<Skeleton class="p-mb-2" borderRadius="16px"></Skeleton>
|
||||
<Skeleton width="10rem" class="p-mb-2" borderRadius="16px"></Skeleton>
|
||||
<Skeleton width="5rem" borderRadius="16px" class="p-mb-2"></Skeleton>
|
||||
<Skeleton height="2rem" class="p-mb-2" borderRadius="16px"></Skeleton>
|
||||
<Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-6">
|
||||
<h5 class="p-mt-3">Square</h5>
|
||||
<div class="p-d-flex p-ai-end">
|
||||
<Skeleton size="2rem" class="p-mr-2"></Skeleton>
|
||||
<Skeleton size="3rem" class="p-mr-2"></Skeleton>
|
||||
<Skeleton size="4rem" class="p-mr-2"></Skeleton>
|
||||
<Skeleton size="5rem"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-6">
|
||||
<h5 class="p-mt-3">Circle</h5>
|
||||
<div class="p-d-flex p-ai-end">
|
||||
<Skeleton shape="circle" size="2rem" class="p-mr-2"></Skeleton>
|
||||
<Skeleton shape="circle" size="3rem" class="p-mr-2"></Skeleton>
|
||||
<Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
|
||||
<Skeleton shape="circle" size="5rem"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="p-grid p-formgrid">
|
||||
<div class="p-field p-col-12 p-md-6 p-pr-md-6 p-pr-0">
|
||||
<h5>Card</h5>
|
||||
<div class="custom-skeleton p-p-4">
|
||||
<div class="p-d-flex p-mb-3">
|
||||
<Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
|
||||
<div>
|
||||
<Skeleton width="10rem" class="p-mb-2"></Skeleton>
|
||||
<Skeleton width="5rem" class="p-mb-2"></Skeleton>
|
||||
<Skeleton height=".5rem"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
<Skeleton width="100%" height="150px"></Skeleton>
|
||||
<div class="p-d-flex p-jc-between p-mt-3">
|
||||
<Skeleton width="4rem" height="2rem"></Skeleton>
|
||||
<Skeleton width="4rem" height="2rem"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-field p-col-12 p-md-6">
|
||||
<h5>List</h5>
|
||||
<div class="custom-skeleton p-p-4">
|
||||
<ul class="p-m-0 p-p-0">
|
||||
<li class="p-mb-3">
|
||||
<div class="p-d-flex">
|
||||
<Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
|
||||
<div style="flex: 1">
|
||||
<Skeleton width="100%" class="p-mb-2"></Skeleton>
|
||||
<Skeleton width="75%"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="p-mb-3">
|
||||
<div class="p-d-flex">
|
||||
<Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
|
||||
<div style="flex: 1">
|
||||
<Skeleton width="100%" class="p-mb-2"></Skeleton>
|
||||
<Skeleton width="75%"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="p-mb-3">
|
||||
<div class="p-d-flex">
|
||||
<Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
|
||||
<div style="flex: 1">
|
||||
<Skeleton width="100%" class="p-mb-2"></Skeleton>
|
||||
<Skeleton width="75%"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="p-d-flex">
|
||||
<Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
|
||||
<div style="flex: 1">
|
||||
<Skeleton width="100%" class="p-mb-2"></Skeleton>
|
||||
<Skeleton width="75%"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>DataTable</h5>
|
||||
<DataTable :value="products">
|
||||
<Column field="code" header="Code">
|
||||
<template #body>
|
||||
<Skeleton></Skeleton>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="name" header="Name">
|
||||
<template #body>
|
||||
<Skeleton></Skeleton>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="category" header="Category">
|
||||
<template #body>
|
||||
<Skeleton></Skeleton>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="quantity" header="Quantity">
|
||||
<template #body>
|
||||
<Skeleton></Skeleton>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
products: new Array(5)
|
||||
}
|
||||
}
|
||||
}`,
|
||||
style: `<style lang="scss" scoped>
|
||||
.custom-skeleton {
|
||||
border: 1px solid var(--surface-d);
|
||||
border-radius: 4px;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
</style>`
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -434,9 +434,8 @@ export default {
|
|||
this.$toast.removeAllGroups();
|
||||
}
|
||||
}
|
||||
}`
|
||||
},
|
||||
style: `<style lang="scss" scoped>
|
||||
}`,
|
||||
style: `<style lang="scss" scoped>
|
||||
button {
|
||||
min-width: 10rem;
|
||||
margin-right: .5rem;
|
||||
|
|
@ -449,6 +448,27 @@ button {
|
|||
}
|
||||
}
|
||||
</style>`
|
||||
},
|
||||
'api': {
|
||||
content: `<template>
|
||||
<Toast />
|
||||
<Button @click="set" icon="pi pi-check" label="Confirm"></Button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent } from "vue";
|
||||
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 };
|
||||
}
|
||||
});`
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue