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

ContextMenu and Responsive update

pull/358/head
cagataycivici 2020-06-30 16:57:30 +03:00
parent 847a8d460d
commit 2b2b98633b
2 changed files with 99 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
src/views/datatable/DataTableContextMenuDemo.vue
View File

@ -9,11 +9,15 @@
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card"> <div class="card">
<DataTable :value="cars" contextMenu :contextMenuSelection.sync="selectedCar" @row-contextmenu="onRowContextMenu"> <DataTable :value="products" contextMenu :contextMenuSelection.sync="selectedProduct" @row-contextmenu="onRowContextMenu">
<Column field="vin" header="Vin"></Column> <Column field="code" header="Code"></Column>
<Column field="year" header="Year"></Column> <Column field="name" header="Name"></Column>
<Column field="brand" header="Brand"></Column> <Column field="category" header="Category"></Column>
<Column field="color" header="Color"></Column> <Column field="price" header="Price">
<template #body="slotProps">
{{formatCurrency(slotProps.data.price)}}
</template>
</Column>
</DataTable> </DataTable>
</div> </div>
@ -25,11 +29,15 @@
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;DataTable :value="cars" contextMenu :contextMenuSelection.sync="selectedCar" @row-contextmenu="onRowContextMenu"&gt; &lt;DataTable :value="products" contextMenu :contextMenuSelection.sync="selectedProduct" @row-contextmenu="onRowContextMenu"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt; &lt;Column field="code" header="Code"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt; &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt; &lt;Column field="category" header="Category"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt; &lt;Column field="price" header="Price"&gt;
&lt;template #body="slotProps"&gt;
{{formatCurrency(slotProps.data.price)}}
&lt;/template&gt;
&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
&lt;ContextMenu :model="menuModel" ref="cm" /&gt; &lt;ContextMenu :model="menuModel" ref="cm" /&gt;
@ -37,37 +45,40 @@
</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,
selectedCar: null, selectedProduct: null,
menuModel: [ menuModel: [
{label: 'View', icon: 'pi pi-fw pi-search', command: () => this.viewCar(this.selectedCar)}, {label: 'View', icon: 'pi pi-fw pi-search', command: () => this.viewProduct(this.selectedProduct)},
{label: 'Delete', icon: 'pi pi-fw pi-times', command: () => this.deleteCar(this.selectedCar)} {label: 'Delete', icon: 'pi pi-fw pi-times', command: () => this.deleteProduct(this.selectedProduct)}
] ]
} }
}, },
carService: null, productService: null,
created() { created() {
this.carService = new CarService(); this.productService = new ProductService();
}, },
mounted() { mounted() {
this.carService.getCarsSmall().then(data => this.cars = data); this.productService.getProductsSmall().then(data => this.products = data);
}, },
methods: { methods: {
onRowContextMenu(event) { onRowContextMenu(event) {
this.$refs.cm.show(event.originalEvent); this.$refs.cm.show(event.originalEvent);
}, },
viewCar(car) { viewProduct(product) {
this.$toast.add({severity: 'info', summary: 'Car Selected', detail: car.vin + ' - ' + car.brand}); this.$toast.add({severity: 'info', summary: 'Product Selected', detail: product.name});
}, },
deleteCar(car) { deleteProduct(product) {
this.cars = this.cars.filter((c) => c.vin !== car.vin); this.products = this.products.filter((p) => p.id !== product.id);
this.$toast.add({severity: 'info', summary: 'Car Deleted', detail: car.vin + ' - ' + car.brand}); this.$toast.add({severity: 'info', summary: 'Product Deleted', detail: product.name});
this.selectedCar = null; this.selectedProduct = null;
},
formatCurrency(value) {
return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
} }
} }
} }
@ -79,37 +90,40 @@ export default {
</template> </template>
<script> <script>
import CarService from '../../service/CarService'; import ProductService from '../../service/ProductService';
export default { export default {
data() { data() {
return { return {
cars: null, products: null,
selectedCar: null, selectedProduct: null,
menuModel: [ menuModel: [
{label: 'View', icon: 'pi pi-fw pi-search', command: () => this.viewCar(this.selectedCar)}, {label: 'View', icon: 'pi pi-fw pi-search', command: () => this.viewProduct(this.selectedProduct)},
{label: 'Delete', icon: 'pi pi-fw pi-times', command: () => this.deleteCar(this.selectedCar)} {label: 'Delete', icon: 'pi pi-fw pi-times', command: () => this.deleteProduct(this.selectedProduct)}
] ]
} }
}, },
carService: null, productService: null,
created() { created() {
this.carService = new CarService(); this.productService = new ProductService();
}, },
mounted() { mounted() {
this.carService.getCarsSmall().then(data => this.cars = data); this.productService.getProductsSmall().then(data => this.products = data);
}, },
methods: { methods: {
onRowContextMenu(event) { onRowContextMenu(event) {
this.$refs.cm.show(event.originalEvent); this.$refs.cm.show(event.originalEvent);
}, },
viewCar(car) { viewProduct(product) {
this.$toast.add({severity: 'info', summary: 'Car Selected', detail: car.vin + ' - ' + car.brand}); this.$toast.add({severity: 'info', summary: 'Product Selected', detail: product.name});
}, },
deleteCar(car) { deleteProduct(product) {
this.cars = this.cars.filter((c) => c.vin !== car.vin); this.products = this.products.filter((p) => p.id !== product.id);
this.$toast.add({severity: 'info', summary: 'Car Deleted', detail: car.vin + ' - ' + car.brand}); this.$toast.add({severity: 'info', summary: 'Product Deleted', detail: product.name});
this.selectedCar = null; this.selectedProduct = null;
},
formatCurrency(value) {
return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
} }
} }
} }

87
src/views/datatable/DataTableResponsiveDemo.vue
View File

@ -9,32 +9,32 @@
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card"> <div class="card">
<DataTable :value="cars" class="p-datatable-responsive-demo" :paginator="true" :rows="10" paginatorPosition="both"> <DataTable :value="products" class="p-datatable-responsive-demo" :paginator="true" :rows="10">
<template #header> <template #header>
Responsive Responsive
</template> </template>
<Column field="vin" header="Vin"> <Column field="code" header="Code">
<template #body="slotProps"> <template #body="slotProps">
<span class="p-column-title">Vin</span> <span class="p-column-title">Code</span>
{{slotProps.data.vin}} {{slotProps.data.code}}
</template> </template>
</Column> </Column>
<Column field="year" header="Year"> <Column field="name" header="Name">
<template #body="slotProps"> <template #body="slotProps">
<span class="p-column-title">Year</span> <span class="p-column-title">Name</span>
{{slotProps.data.year}} {{slotProps.data.name}}
</template> </template>
</Column> </Column>
<Column field="brand" header="Brand"> <Column field="category" header="Category">
<template #body="slotProps"> <template #body="slotProps">
<span class="p-column-title">Brand</span> <span class="p-column-title">Category</span>
{{slotProps.data.brand}} {{slotProps.data.category}}
</template> </template>
</Column> </Column>
<Column field="color" header="Color"> <Column field="quantity" header="Quantity">
<template #body="slotProps"> <template #body="slotProps">
<span class="p-column-title">Color</span> <span class="p-column-title">Quantity</span>
{{slotProps.data.color}} {{slotProps.data.quantity}}
</template> </template>
</Column> </Column>
</DataTable> </DataTable>
@ -46,32 +46,32 @@
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;DataTable :value="cars" class="p-datatable-responsive" :paginator="true" rows="10" paginatorPosition="both"&gt; &lt;DataTable :value="products" class="p-datatable-responsive-demo" :paginator="true" :rows="10"&gt;
&lt;template #header&gt; &lt;template #header&gt;
Responsive Responsive
&lt;/template&gt; &lt;/template&gt;
&lt;Column field="vin" header="Vin"&gt; &lt;Column field="code" header="Code"&gt;
&lt;template #body="slotProps"&gt; &lt;template #body="slotProps"&gt;
&lt;span class="p-column-title"&gt;Vin&lt;/span&gt; &lt;span class="p-column-title"&gt;Code&lt;/span&gt;
{{slotProps.data.vin}} {{slotProps.data.code}}
&lt;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;/Column&gt;
&lt;Column field="year" header="Year"&gt; &lt;Column field="name" header="Name"&gt;
&lt;template #body="slotProps"&gt; &lt;template #body="slotProps"&gt;
&lt;span class="p-column-title"&gt;Year&lt;/span&gt; &lt;span class="p-column-title"&gt;Name&lt;/span&gt;
{{slotProps.data.year}} {{slotProps.data.name}}
&lt;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;/Column&gt;
&lt;Column field="brand" header="Brand"&gt; &lt;Column field="category" header="Category"&gt;
&lt;template #body="slotProps"&gt; &lt;template #body="slotProps"&gt;
&lt;span class="p-column-title"&gt;Brand&lt;/span&gt; &lt;span class="p-column-title"&gt;Category&lt;/span&gt;
{{slotProps.data.brand}} {{slotProps.data.category}}
&lt;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;/Column&gt;
&lt;Column field="color" header="Color"&gt; &lt;Column field="quantity" header="Quantity"&gt;
&lt;template #body="slotProps"&gt; &lt;template #body="slotProps"&gt;
&lt;span class="p-column-title"&gt;Color&lt;/span&gt; &lt;span class="p-column-title"&gt;Quantity&lt;/span&gt;
{{slotProps.data.color}} {{slotProps.data.quantity}}
&lt;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
@ -79,20 +79,20 @@
</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
} }
}, },
carService: null, productService: null,
created() { created() {
this.carService = new CarService(); this.productService = new ProductService();
}, },
mounted() { mounted() {
this.carService.getCarsSmall().then(data => this.cars = data); this.productService.getProducts().then(data => this.products = data);
} }
} }
</CodeHighlight> </CodeHighlight>
@ -113,10 +113,10 @@ export default {
.p-datatable-tbody > tr > td { .p-datatable-tbody > tr > td {
text-align: left; text-align: left;
display: block; display: block;
border: 0 none !important; width: 100%;
width: 100% !important;
float: left; float: left;
clear: left; clear: left;
border: 0 none;
.p-column-title { .p-column-title {
padding: .4rem; padding: .4rem;
@ -125,6 +125,10 @@ export default {
margin: -.4em 1em -.4em -.4rem; margin: -.4em 1em -.4em -.4rem;
font-weight: bold; font-weight: bold;
} }
&:last-child {
border-bottom: 1px solid var(--surface-d);
}
} }
} }
} }
@ -137,20 +141,20 @@ export default {
</template> </template>
<script> <script>
import CarService from '../../service/CarService'; import ProductService from '../../service/ProductService';
export default { export default {
data() { data() {
return { return {
cars: null products: null
} }
}, },
carService: null, productService: null,
created() { created() {
this.carService = new CarService(); this.productService = new ProductService();
}, },
mounted() { mounted() {
this.carService.getCarsMedium().then(data => this.cars = data); this.productService.getProducts().then(data => this.products = data);
} }
} }
</script> </script>
@ -171,8 +175,7 @@ export default {
.p-datatable-tbody > tr > td { .p-datatable-tbody > tr > td {
text-align: left; text-align: left;
display: block; display: block;
border: 0 none !important; width: 100%;
width: 100% !important;
float: left; float: left;
clear: left; clear: left;
border: 0 none; border: 0 none;
@ -184,6 +187,10 @@ export default {
margin: -.4em 1em -.4em -.4rem; margin: -.4em 1em -.4em -.4rem;
font-weight: bold; font-weight: bold;
} }
&:last-child {
border-bottom: 1px solid var(--surface-d);
}
} }
} }
} }