Fixed #3649 - Badge: do not render Zero correctly
parent
2641659296
commit
26433c3f12
|
@ -1,7 +1,7 @@
|
||||||
const BadgeProps = [
|
const BadgeProps = [
|
||||||
{
|
{
|
||||||
name: 'value',
|
name: 'value',
|
||||||
type: 'any',
|
type: 'string | number',
|
||||||
default: 'null',
|
default: 'null',
|
||||||
description: 'Value to display inside the badge.'
|
description: 'Value to display inside the badge.'
|
||||||
},
|
},
|
||||||
|
|
|
@ -17,15 +17,15 @@ export interface BadgeProps {
|
||||||
/**
|
/**
|
||||||
* Value to display inside the badge.
|
* Value to display inside the badge.
|
||||||
*/
|
*/
|
||||||
value?: any;
|
value?: string | number;
|
||||||
/**
|
/**
|
||||||
* Severity type of the badge.
|
* Severity type of the badge.
|
||||||
*/
|
*/
|
||||||
severity?: 'info' | 'success' | 'warning' | 'danger' | undefined;
|
severity?: 'info' | 'success' | 'warning' | 'danger' | null | undefined;
|
||||||
/**
|
/**
|
||||||
* Size of the badge, valid options are 'large' and 'xlarge'.
|
* Size of the badge, valid options are 'large' and 'xlarge'.
|
||||||
*/
|
*/
|
||||||
size?: 'large' | 'xlarge' | undefined;
|
size?: 'large' | 'xlarge' | null | undefined;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -5,12 +5,23 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { ObjectUtils } from 'primevue/utils';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Badge',
|
name: 'Badge',
|
||||||
props: {
|
props: {
|
||||||
value: null,
|
value: {
|
||||||
severity: null,
|
type: [String, Number],
|
||||||
size: null
|
default: null
|
||||||
|
},
|
||||||
|
severity: {
|
||||||
|
type: String,
|
||||||
|
default: null
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
type: String,
|
||||||
|
default: null
|
||||||
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
containerClass() {
|
containerClass() {
|
||||||
|
@ -20,8 +31,8 @@ export default {
|
||||||
return [
|
return [
|
||||||
'p-badge p-component',
|
'p-badge p-component',
|
||||||
{
|
{
|
||||||
'p-badge-no-gutter': this.value && String(this.value).length === 1,
|
'p-badge-no-gutter': ObjectUtils.isNotEmpty(this.value) && String(this.value).length === 1,
|
||||||
'p-badge-dot': !this.value && !this.$slots.default,
|
'p-badge-dot': ObjectUtils.isEmpty(this.value) && !this.$slots.default,
|
||||||
'p-badge-lg': this.size === 'large',
|
'p-badge-lg': this.size === 'large',
|
||||||
'p-badge-xl': this.size === 'xlarge',
|
'p-badge-xl': this.size === 'xlarge',
|
||||||
'p-badge-info': this.severity === 'info',
|
'p-badge-info': this.severity === 'info',
|
||||||
|
|
Loading…
Reference in New Issue