import { defineComponent, computed } from 'vue';
export const badge = defineComponent({
    name: 'badge',
    props: {
        value: {
            type: [String, Number],
        },
        color: {
            type: String,
            default: '#FF4D4F',
        },
        max: {
            type: Number,
        },
        min: {
            type: Number,
            default: 0,
        },
        hideLowerLimit: {
            type: Boolean,
            default: false,
        },
        dot: {
            type: Boolean,
            default: false,
        },
    },
    setup(props, { slots }) {
        const supStyle = computed(() => {
            return {
                'background-color': props.color,
                display: props.value <= props.min && props.hideLowerLimit
                    ? 'none'
                    : 'inline-flex',
            };
        });
        const filterValue = computed(() => {
            if (props.value > props.max) {
                return props.max + '+';
            }
            else if (props.value < props.min) {
                return props.min;
            }
            else {
                return props.value;
            }
        });
        const supClass = computed(() => {
            return props.dot ? 'u-badge-dot' : 'u-badge-round';
        });
        return () => {
            var _a;
            return (<div class={['u-badge']}>
        {(_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)}
        <sup class={['u-badge-sup', supClass.value]} style={supStyle.value}>
          {props.dot || filterValue.value}
        </sup>
      </div>);
        };
    },
});
export default badge;