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

UI Components Library for Vue.js

'use strict';

var vue = require('vue');
var vueTypes_modern = require('../../node_modules/vue-types/dist/vue-types.modern.js');
var props = require('../../props.js');
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');
var CProgress = require('../progress/CProgress.js');

const CWidgetStatsC = vue.defineComponent({
    name: 'CWidgetStatsC',
    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,
        /**
         * Colors have been inverted from their default dark shade.
         */
        inverse: Boolean,
        progress: vueTypes_modern.shape({
            /**
             * Sets the color context of the progress bar to one of CoreUI’s themed colors
             *
             * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
             */
            color: props.Color,
            /**
             * The percent to progress the ProgressBar (out of 100).
             */
            value: {
                type: Number,
                default: 0,
            },
        }),
        /**
         * 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 icon component.
     *
     * @slot icon
     */
    setup(props, { slots }) {
        return () => vue.h(CCard.CCard, {
            class: [
                {
                    ['text-white']: props.inverse,
                },
            ],
            color: props.color,
        }, () => vue.h(CCardBody.CCardBody, {
            class: 'card-body',
        }, () => [
            slots.icon &&
                vue.h('div', {
                    class: [
                        'text-end mb-4',
                        props.inverse ? 'text-white text-opacity-75' : 'text-body-secondary',
                    ],
                }, slots.icon && slots.icon()),
            (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', {
                    class: [
                        'text-uppercase fw-semibold small',
                        props.inverse ? 'text-white text-opacity-75' : 'text-body-secondary',
                    ],
                }, {
                    default: () => (slots.title && slots.title()) || props.title,
                }),
            vue.h(CProgress.CProgress, {
                class: 'my-2',
                ...(props.progress && props.progress.color && { color: props.progress.color }),
                height: 4,
                ...(props.progress && props.progress.value && { value: props.progress.value }),
                white: props.inverse,
            }),
        ]));
    },
});

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