@coreui/vue-pro/dist/cjs/components/widgets/CWidgetStatsF.js

UI Components Library for Vue.js

'use strict';

var vue = require('vue');
var CCard = require('../card/CCard.js');
var CCardBody = require('../card/CCardBody.js');
var CCardFooter = require('../card/CCardFooter.js');
require('../card/CCardGroup.js');
require('../card/CCardHeader.js');
require('../card/CCardImage.js');
require('../card/CCardImageOverlay.js');
require('../card/CCardLink.js');
require('../card/CCardSubtitle.js');
require('../card/CCardText.js');
require('../card/CCardTitle.js');
var props = require('../../props.js');

const CWidgetStatsF = vue.defineComponent({
    name: 'CWidgetStatsF',
    props: {
        /**
         * Sets the color context of the component to one of CoreUI’s themed colors.
         *
         * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
         */
        color: props.Color,
        /**
         * Set padding of your component.
         */
        padding: {
            type: Boolean,
            default: true,
        },
        /**
         * Title for your component. If you want to pass non-string value please use dedicated slot `<template #title>...</template>`
         */
        title: String,
        /**
         * Helper text for your component. If you want to pass non-string value please use dedicated slot `<template #text>...</template>`
         */
        text: String,
        /**
         * Value for your component. If you want to pass non-string or non-number value please use dedicated slot `<template #value>...</template>`
         */
        value: {
            type: [Number, String],
            default: 0,
        },
    },
    /**
     * Location for icon component.
     *
     * @slot icon
     */
    setup(props, { slots }) {
        return () => vue.h(CCard.CCard, {}, {
            default: () => [
                vue.h(CCardBody.CCardBody, {
                    class: ['d-flex align-items-center', props.padding === false && 'p-0'],
                }, () => [
                    vue.h('div', {
                        class: [
                            'me-3',
                            'text-white',
                            `bg-${props.color}`,
                            props.padding ? 'p-3' : 'p-4',
                        ],
                    }, (slots.default && slots.default()) || (slots.icon && slots.icon())),
                    vue.h('div', {}, [
                        (props.value || slots.value) &&
                            vue.h('div', {
                                class: [`fs-6 fw-semibold text-${props.color}`],
                            }, {
                                default: () => (slots.value && slots.value()) || props.value,
                            }),
                        (props.title || slots.title) &&
                            vue.h('div', {
                                class: 'text-body-secondary text-uppercase fw-semibold small',
                            }, {
                                default: () => (slots.title && slots.title()) || props.title,
                            }),
                    ]),
                ]),
                slots.footer && vue.h(CCardFooter.CCardFooter, {}, () => slots.footer && slots.footer()),
            ],
        });
    },
});

exports.CWidgetStatsF = CWidgetStatsF;
//# sourceMappingURL=CWidgetStatsF.js.map