@coreui/vue-pro/dist/cjs/components/widgets/CWidgetStatsD.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');
var CCardHeader = 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 CCol = require('../grid/CCol.js');
require('../grid/CContainer.js');
require('../grid/CRow.js');
var props = require('../../props.js');

const CWidgetStatsD = vue.defineComponent({
    name: 'CWidgetStatsD',
    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,
        /**
         * Values and titles for your component.
         */
        values: {
            type: Array,
            default: () => [],
        },
    },
    /**
     * Location for icon component, ex. `<CDropdown>`.
     *
     * @slot icon
     */
    /**
     * Location for chart component.
     *
     * @slot chart
     */
    setup(props, { slots }) {
        return () => vue.h(CCard.CCard, {}, {
            default: () => [
                vue.h(CCardHeader.CCardHeader, {
                    class: [
                        'position-relative d-flex justify-content-center align-items-center',
                        {
                            [`bg-${props.color}`]: props.color,
                        },
                    ],
                }, () => [slots.icon && slots.icon(), slots.chart && slots.chart()]),
                vue.h(CCardBody.CCardBody, {
                    class: 'row text-center',
                }, {
                    default: () => props.values &&
                        props.values.map((value, index) => [
                            index % 2 !== 0 && vue.h('div', { class: 'vr' }),
                            vue.h(CCol.CCol, {}, {
                                default: () => [
                                    vue.h(CCol.CCol, { class: 'fs-5 fw-semibold' }, () => value.value),
                                    vue.h(CCol.CCol, { class: 'text-uppercase text-body-secondary small' }, () => value.title),
                                ],
                            }),
                        ]),
                }),
            ],
        });
    },
});

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