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

Fixed conditional style demo

pull/5806/head
Cagatay Civici 2024-05-25 12:17:06 +03:00
parent 2beb7027f4
commit 659ae3bb22
1 changed files with 20 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
doc/datatable/ConditionalStyleDoc.vue
View File

@ -10,9 +10,7 @@
<Column field="category" header="Category"></Column> <Column field="category" header="Category"></Column>
<Column field="quantity" header="Quantity"> <Column field="quantity" header="Quantity">
<template #body="slotProps"> <template #body="slotProps">
<div :class="stockClass(slotProps.data)"> <Badge :value="slotProps.data.quantity" :severity="stockSeverity(slotProps.data)" />
{{ slotProps.data.quantity }}
</div>
</template> </template>
</Column> </Column>
</DataTable> </DataTable>
@ -36,9 +34,7 @@ export default {
<Column field="category" header="Category"></Column> <Column field="category" header="Category"></Column>
<Column field="quantity" header="Quantity"> <Column field="quantity" header="Quantity">
<template #body="slotProps"> <template #body="slotProps">
<div :class="stockClass(slotProps.data)"> <Badge :value="slotProps.data.quantity" :severity="stockSeverity(slotProps.data)" />
{{ slotProps.data.quantity }}
</div>
</template> </template>
</Column> </Column>
</DataTable> </DataTable>
@ -52,9 +48,7 @@ export default {
<Column field="category" header="Category"></Column> <Column field="category" header="Category"></Column>
<Column field="quantity" header="Quantity"> <Column field="quantity" header="Quantity">
<template #body="slotProps"> <template #body="slotProps">
<div :class="stockClass(slotProps.data)"> <Badge :value="slotProps.data.quantity" :severity="stockSeverity(slotProps.data)" />
{{ slotProps.data.quantity }}
</div>
</template> </template>
</Column> </Column>
</DataTable> </DataTable>
@ -75,22 +69,17 @@ export default {
}, },
methods: { methods: {
rowClass(data) { rowClass(data) {
return [{ 'bg-primary text-primary-contrast': data.category === 'Fitness' }]; return [{ '!bg-primary !text-primary-contrast': data.category === 'Fitness' }];
}, },
rowStyle(data) { rowStyle(data) {
if (data.quantity === 0) { if (data.quantity === 0) {
return { fontWeight: 'bold', fontStyle: 'italic' }; return { fontWeight: 'bold', fontStyle: 'italic' };
} }
}, },
stockClass(data) { stockSeverity(data) {
return [ if (data.quantity === 0) return 'danger';
'rounded-full w-8 h-8 inline-flex font-bold justify-center items-center text-sm', else if (data.quantity > 0 && data.quantity < 10) return 'warn';
{ else return 'success';
'bg-red-100 text-red-900': data.quantity === 0,
'bg-blue-100 text-blue-900': data.quantity > 0 && data.quantity < 10,
'bg-teal-100 text-teal-900': data.quantity > 10
}
];
} }
} }
}; };
@ -105,9 +94,7 @@ export default {
<Column field="category" header="Category"></Column> <Column field="category" header="Category"></Column>
<Column field="quantity" header="Quantity"> <Column field="quantity" header="Quantity">
<template #body="slotProps"> <template #body="slotProps">
<div :class="stockClass(slotProps.data)"> <Badge :value="slotProps.data.quantity" :severity="stockSeverity(slotProps.data)" />
{{ slotProps.data.quantity }}
</div>
</template> </template>
</Column> </Column>
</DataTable> </DataTable>
@ -125,23 +112,18 @@ onMounted(() => {
const products = ref(); const products = ref();
const rowClass = (data) => { const rowClass = (data) => {
return [{ 'bg-primary text-primary-contrast': data.category === 'Fitness' }]; return [{ '!bg-primary !text-primary-contrast': data.category === 'Fitness' }];
}; };
const rowStyle = (data) => { const rowStyle = (data) => {
if (data.quantity === 0) { if (data.quantity === 0) {
return { fontWeight: 'bold', fontStyle: 'italic' }; return { fontWeight: 'bold', fontStyle: 'italic' };
} }
}; };
const stockClass = (data) => { const stockSeverity = (data) => {
return [ if (data.quantity === 0) return 'danger';
'rounded-full w-8 h-8 inline-flex font-bold justify-center items-center text-sm', else if (data.quantity > 0 && data.quantity < 10) return 'warn';
{ else return 'success';
'bg-red-100 text-red-900': data.quantity === 0, }
'bg-blue-100 text-blue-900': data.quantity > 0 && data.quantity < 10,
'bg-teal-100 text-teal-900': data.quantity > 10
}
];
};
<\/script> <\/script>
`, `,
@ -167,22 +149,17 @@ const stockClass = (data) => {
ProductService.getProductsSmall().then((data) => (this.products = data)); ProductService.getProductsSmall().then((data) => (this.products = data));
}, },
rowClass(data) { rowClass(data) {
return [{ 'bg-primary text-primary-contrast': data.category === 'Fitness' }]; return [{ '!bg-primary !text-primary-contrast': data.category === 'Fitness' }];
}, },
rowStyle(data) { rowStyle(data) {
if (data.quantity === 0) { if (data.quantity === 0) {
return { fontWeight: 'bold', fontStyle: 'italic' }; return { fontWeight: 'bold', fontStyle: 'italic' };
} }
}, },
stockClass(data) { stockSeverity(data) {
return [ if (data.quantity === 0) return 'danger';
'rounded-full w-8 h-8 inline-flex font-bold justify-center items-center text-sm', else if (data.quantity > 0 && data.quantity < 10) return 'warn';
{ else return 'success';
'bg-red-100 text-red-900': data.quantity === 0,
'bg-blue-100 text-blue-900': data.quantity > 0 && data.quantity < 10,
'bg-teal-100 text-teal-900': data.quantity > 10
}
];
} }
} }
}; };