vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

New DataView demo

pull/358/head
cagataycivici 2020-06-30 16:09:53 +03:00
parent 4ed4931915
commit 466cc61e51
2 changed files with 251 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

289
src/views/dataview/DataViewDemo.vue
View File

@ -9,44 +9,61 @@
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card"> <div class="card">
<DataView :value="cars" :layout="layout" paginatorPosition="bottom" :paginator="true" :rows="20" <DataView :value="products" :layout="layout" :paginator="true" :rows="9" :sortOrder="sortOrder" :sortField="sortField">
:sortOrder="sortOrder" :sortField="sortField"> <template #header>
<template #header>
<div class="p-grid p-nogutter"> <div class="p-grid p-nogutter">
<div class="p-col-6" style="text-align: left"> <div class="p-col-6" style="text-align: left">
<Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By" @change="onSortChange($event)"/> <Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)"/>
</div> </div>
<div class="p-col-6" style="text-align: right"> <div class="p-col-6" style="text-align: right">
<DataViewLayoutOptions v-model="layout" /> <DataViewLayoutOptions v-model="layout" />
</div> </div>
</div> </div>
</template> </template>
<template #list="slotProps" >
<div class="p-col-12"> <template #list="slotProps">
<div class="car-details"> <div class="p-col-12">
<div> <div class="product-list-item">
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/> <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name"/>
<div class="p-grid"> <div class="product-list-detail">
<div class="p-col-12">Vin: <b>{{slotProps.data.vin}}</b></div> <div class="product-name">{{slotProps.data.name}}</div>
<div class="p-col-12">Year: <b>{{slotProps.data.year}}</b></div> <div class="product-description">{{slotProps.data.description}}</div>
<div class="p-col-12">Brand: <b>{{slotProps.data.brand}}</b></div> <Rating :value="slotProps.data.rating" :readonly="true" :cancel="false"></Rating>
<div class="p-col-12">Color: <b>{{slotProps.data.color}}</b></div> <i class="pi pi-tag product-category-icon"></i><span class="product-category">{{slotProps.data.category}}</span>
</div> </div>
</div> <div class="product-list-action">
<Button icon="pi pi-search"></Button> <span class="product-price">${{slotProps.data.price}}</span>
</div> <Button icon="pi pi-shopping-cart" label="Add to Cart" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div> <span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
</template> </div>
<template #grid="slotProps"> </div>
<div style="padding: .5em" class="p-col-12 p-md-3"> </div>
<Panel :header="slotProps.data.vin" style="text-align: center"> </template>
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
<div class="car-detail">{{slotProps.data.year}} - {{slotProps.data.color}}</div> <template #grid="slotProps">
<Button icon="pi pi-search"></Button> <div class="p-col-12 p-md-4">
</Panel> <div class="product-grid-item card">
</div> <div class="product-grid-item-top">
</template> <div>
</DataView> <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="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name"/>
<div class="product-name">{{slotProps.data.name}}</div>
<div class="product-description">{{slotProps.data.description}}</div>
<Rating :value="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> </div>
@ -55,30 +72,29 @@
</template> </template>
<script> <script>
import CarService from '../../service/CarService'; import ProductService from '../../service/ProductService';
import DataViewDoc from './DataViewDoc'; import DataViewDoc from './DataViewDoc';
export default { export default {
data() { data() {
return { return {
cars: null, products: null,
layout: 'list', layout: 'grid',
sortKey: null, sortKey: null,
sortOrder: null, sortOrder: null,
sortField: null, sortField: null,
sortOptions: [ sortOptions: [
{label: 'Newest First', value: '!year'}, {label: 'Price High to Low', value: '!price'},
{label: 'Oldest First', value: 'year'}, {label: 'Price Low to High', value: 'price'},
{label: 'Brand', value: 'brand'}
] ]
} }
}, },
carService: null, productService: null,
created() { created() {
this.carService = new CarService(); this.productService = new ProductService();
}, },
mounted() { mounted() {
this.carService.getCarsLarge().then(data => this.cars = data); this.productService.getProducts().then(data => this.products = data);
}, },
methods: { methods: {
onSortChange(event){ onSortChange(event){
@ -105,54 +121,163 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.p-dropdown { .p-dropdown {
width: 12rem; width: 14rem;
font-weight: normal; font-weight: normal;
} }
.p-dataview { .product-name {
.car-details { font-size: 1.5rem;
display: flex; font-weight: 700;
justify-content: space-between;
align-items: center;
padding: 2rem;
& > div {
display: flex;
align-items: center;
img {
margin-right: 14px;
}
}
}
.car-detail {
padding: 0 1em 1em 1rem;
border-bottom: 1px solid #d9dad9;
margin: 1rem;
}
.p-panel-content {
padding: 1rem;
}
} }
@media (max-width: 1024px) { .product-description {
.p-dataview { margin: 0 0 1rem 0;
.car-details {
img {
width: 75px;
}
}
}
} }
/* Dark Theme such as luna-amber, luna-blue, luna-green and luna-pink */ .product-category-icon {
.dark-theme { vertical-align: middle;
.p-dataview { margin-right: .5rem;
.car-detail { }
border-bottom: 1px solid #191919;
} .product-category {
} font-weight: 600;
vertical-align: middle;
}
.product-list-item {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding: 1rem;
width: 100%;
img {
width: 150px;
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;
-ms-flex: 1 1 0px;
}
.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: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
}
.p-button {
margin-bottom: .5rem;
}
}
.product-badge {
border-radius: 2px;
padding: .25em .5rem;
text-transform: uppercase;
font-weight: 700;
font-size: 12px;
letter-spacing: .3px;
&.status-instock {
background: #C8E6C9;
color: #256029;
}
&.status-outofstock {
background: #FFCDD2;
color: #C63737;
}
&.status-lowstock {
background: #FEEDAF;
color: #8A5340;
}
}
.product-grid-item {
margin: .5em;
border: 1px solid #dee2e6;
.product-grid-item-top,
.product-grid-item-bottom {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justify;
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 {
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
align-items: center;
img {
width: 75%;
margin: 2rem 0;
}
.product-list-detail {
text-align: center;
}
.product-price {
align-self: center;
}
.product-list-action {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
}
.product-list-action {
margin-top: 2rem;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: center;
align-items: center;
width: 100%;
}
}
} }
</style> </style>

130
src/views/dataview/DataViewDoc.vue
View File

@ -411,40 +411,58 @@ export default {
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;DataView :value="cars" :layout="layout" paginatorPosition="bottom" :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField"&gt; &lt;DataView :value="products" :layout="layout" :paginator="true" :rows="9" :sortOrder="sortOrder" :sortField="sortField"&gt;
&lt;template #header&gt; &lt;template #header&gt;
&lt;div class="p-grid p-nogutter"&gt; &lt;div class="p-grid p-nogutter"&gt;
&lt;div class="p-col-6" style="text-align: left"&gt; &lt;div class="p-col-6" style="text-align: left"&gt;
&lt;Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By" @change="onSortChange($event)"/&gt; &lt;Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)"/&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-col-6" style="text-align: right"&gt; &lt;div class="p-col-6" style="text-align: right"&gt;
&lt;DataViewLayoutOptions v-model="layout" /&gt; &lt;DataViewLayoutOptions v-model="layout" /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #list="slotProps"&gt; &lt;template #list="slotProps"&gt;
&lt;div class="p-col-12"&gt; &lt;div class="p-col-12"&gt;
&lt;div class="car-details"&gt; &lt;div class="product-list-item"&gt;
&lt;div&gt; &lt;img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name"/&gt;
&lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt; &lt;div class="product-list-detail"&gt;
&lt;div class="p-grid"&gt; &lt;div class="product-name"&gt;{{slotProps.data.name}}&lt;/div&gt;
&lt;div class="p-col-12"&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt; &lt;div class="product-description"&gt;{{slotProps.data.description}}&lt;/div&gt;
&lt;div class="p-col-12"&gt;Year: &lt;b&gt;&#123;&#123;slotProps.data.year&#125;&#125;&lt;/b&gt;&lt;/div&gt; &lt;Rating :value="slotProps.data.rating" :readonly="true" :cancel="false"&gt;&lt;/Rating&gt;
&lt;div class="p-col-12"&gt;Brand: &lt;b&gt;&#123;&#123;slotProps.data.brand&#125;&#125;&lt;/b&gt;&lt;/div&gt; &lt;i class="pi pi-tag product-category-icon"&gt;&lt;/i&gt;&lt;span class="product-category"&gt;{{slotProps.data.category}}&lt;/span&gt;
&lt;div class="p-col-12"&gt;Color: &lt;b&gt;&#123;&#123;slotProps.data.color&#125;&#125;&lt;/b&gt;&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;div class="product-list-action"&gt;
&lt;span class="product-price"&gt;${{slotProps.data.price}}&lt;/span&gt;
&lt;Button icon="pi pi-shopping-cart" label="Add to Cart" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"&gt;&lt;/Button&gt;
&lt;span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()"&gt;{{slotProps.data.inventoryStatus}}&lt;/span&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;Button icon="pi pi-search"&gt;&lt;/Button&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #grid="slotProps"&gt; &lt;template #grid="slotProps"&gt;
&lt;div style="padding: .5em" class="p-col-12 p-md-3"&gt; &lt;div class="p-col-12 p-md-4"&gt;
&lt;Panel :header="slotProps.data.vin" style="text-align: center"&gt; &lt;div class="product-grid-item card"&gt;
&lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt; &lt;div class="product-grid-item-top"&gt;
&lt;div class="car-detail"&gt;{{slotProps.data.year}} - {{slotProps.data.color}}&lt;/div&gt; &lt;div&gt;
&lt;Button icon="pi pi-search"&gt;&lt;/Button&gt; &lt;i class="pi pi-tag product-category-icon"&gt;&lt;/i&gt;
&lt;/Panel&gt; &lt;span class="product-category"&gt;{{slotProps.data.category}}&lt;/span&gt;
&lt;/div&gt;
&lt;span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()"&gt;{{slotProps.data.inventoryStatus}}&lt;/span&gt;
&lt;/div&gt;
&lt;div class="product-grid-item-content"&gt;
&lt;img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name"/&gt;
&lt;div class="product-name"&gt;{{slotProps.data.name}}&lt;/div&gt;
&lt;div class="product-description"&gt;{{slotProps.data.description}}&lt;/div&gt;
&lt;Rating :value="slotProps.data.rating" :readonly="true" :cancel="false"&gt;&lt;/Rating&gt;
&lt;/div&gt;
&lt;div class="product-grid-item-bottom"&gt;
&lt;span class="product-price"&gt;${{slotProps.data.price}}&lt;/span&gt;
&lt;Button icon="pi pi-shopping-cart" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"&gt;&lt;/Button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/DataView&gt; &lt;/DataView&gt;
@ -452,29 +470,28 @@ export default {
</CodeHighlight> </CodeHighlight>
<CodeHighlight lang="javascript"> <CodeHighlight lang="javascript">
import CarService from '../../service/CarService'; import ProductService from '../../service/ProductService';
export default { export default {
data() { data() {
return { return {
cars: null, products: null,
layout: 'list', layout: 'grid',
sortKey: null, sortKey: null,
sortOrder: null, sortOrder: null,
sortField: null, sortField: null,
sortOptions: [ sortOptions: [
{label: 'Newest First', value: '!year'}, {label: 'Price High to Low', value: '!price'},
{label: 'Oldest First', value: 'year'}, {label: 'Price Low to High', value: 'price'},
{label: 'Brand', value: 'brand'}
] ]
} }
}, },
carService: null, productService: null,
created() { created() {
this.carService = new CarService(); this.productService = new ProductService();
}, },
mounted() { mounted() {
this.carService.getCarsLarge().then(data => this.cars = data); this.productService.getProducts().then(data => this.products = data);
}, },
methods: { methods: {
onSortChange(event){ onSortChange(event){
@ -494,65 +511,6 @@ export default {
} }
} }
} }
</CodeHighlight>
<CodeHighlight lang="css">
.p-dropdown {
width: 12rem;
font-weight: normal;
}
.p-dataview {
.car-details {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem;
border-bottom: 1px solid #d9dad9;
&amp; > div {
display: flex;
align-items: center;
img {
margin-right: 14px;
}
}
}
.car-detail {
padding: 0 1em 1em 1rem;
border-bottom: 1px solid #d9dad9;
margin: 1rem;
}
.p-panel-content {
padding: 1rem;
}
}
@media (max-width: 1024px) {
.p-dataview {
.car-details {
img {
width: 75px;
}
}
}
}
/* Dark Theme such as luna-amber, luna-blue, luna-green and luna-pink */
.dark-theme {
.p-dataview {
.car-details {
border-bottom-color: #191919;
}
.car-detail {
border-bottom: 1px solid #191919;
}
}
}
</CodeHighlight> </CodeHighlight>
</TabPanel> </TabPanel>
</TabView> </TabView>