@coreui/vue-pro/dist/cjs/components/widgets/CWidgetStatsA.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');
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');

const CWidgetStatsA = vue.defineComponent({
    name: 'CWidgetStatsA',
    props: {
        color: String,
        /**
         * Title for your component. If you want to pass non-string value please use dedicated slot `<template #title>...</template>`
         */
        title: 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 action component, ex. `<CDropdown>`.
     *
     * @slot action
     */
    /**
     * Location for chart component.
     *
     * @slot chart
     */
    setup(props, { slots }) {
        return () => vue.h(CCard.CCard, {
            class: [{ [`bg-${props.color}`]: props.color, 'text-white': props.color }],
        }, () => [
            vue.h(CCardBody.CCardBody, {
                class: 'pb-0 d-flex justify-content-between align-items-start',
            }, () => [
                vue.h('div', {}, [
                    (props.value || slots.value) &&
                        vue.h('div', { class: 'fs-4 fw-semibold' }, {
                            default: () => (slots.value && slots.value()) || props.value,
                        }),
                    (props.title || slots.title) &&
                        vue.h('div', {}, {
                            default: () => (slots.title && slots.title()) || props.title,
                        }),
                ]),
                /**
                 * @slot Location for action component, ex. `<CDropdown>`.
                 */
                slots.action && slots.action(),
            ]),
            /**
             * @slot Location for chart component.
             */
            slots.chart && slots.chart(),
            slots.default && slots.default(),
        ]);
    },
});

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