@coreui/vue-pro
Version:
UI Components Library for Vue.js
105 lines (101 loc) • 3.81 kB
JavaScript
'use strict';
var vue = require('vue');
var vueTypes_modern = require('../../node_modules/vue-types/dist/vue-types.modern.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');
require('../progress/CProgressBar.js');
require('../progress/CProgressStacked.js');
var props = require('../../props.js');
const CWidgetStatsB = vue.defineComponent({
name: 'CWidgetStatsB',
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,
},
}),
/**
* Helper text for your component. If you want to pass non-string value please use dedicated slot `<template #text>...</template>`
*/
text: 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,
},
},
setup(props, { slots }) {
return () => vue.h(CCard.CCard, {
class: [
{
'text-white': props.inverse,
},
],
color: props.color,
}, () => vue.h(CCardBody.CCardBody, {
class: 'card-body',
}, () => [
(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,
}),
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,
}),
(props.text || slots.text) &&
vue.h('small', {
class: [props.inverse ? 'text-white text-opacity-75' : 'text-body-secondary'],
}, {
default: () => (slots.text && slots.text()) || props.text,
}),
]));
},
});
exports.CWidgetStatsB = CWidgetStatsB;
//# sourceMappingURL=CWidgetStatsB.js.map