@coreui/vue
Version:
UI Components Library for Vue.js
77 lines (74 loc) • 2.54 kB
JavaScript
import { defineComponent, h } from 'vue';
import { CCard } from '../card/CCard.js';
import { CCardBody } from '../card/CCardBody.js';
import '../card/CCardFooter.js';
import '../card/CCardGroup.js';
import { CCardHeader } from '../card/CCardHeader.js';
import '../card/CCardImage.js';
import '../card/CCardImageOverlay.js';
import '../card/CCardLink.js';
import '../card/CCardSubtitle.js';
import '../card/CCardText.js';
import '../card/CCardTitle.js';
import { CCol } from '../grid/CCol.js';
import '../grid/CContainer.js';
import '../grid/CRow.js';
import { Color } from '../../props.js';
const CWidgetStatsD = 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: 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 () => h(CCard, {}, {
default: () => [
h(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()]),
h(CCardBody, {
class: 'row text-center',
}, {
default: () => props.values &&
props.values.map((value, index) => [
index % 2 !== 0 && h('div', { class: 'vr' }),
h(CCol, {}, {
default: () => [
h(CCol, { class: 'fs-5 fw-semibold' }, () => value.value),
h(CCol, { class: 'text-uppercase text-body-secondary small' }, () => value.title),
],
}),
]),
}),
],
});
},
});
export { CWidgetStatsD };
//# sourceMappingURL=CWidgetStatsD.js.map