@coreui/vue
Version:
UI Components Library for Vue.js
89 lines (86 loc) • 3.25 kB
JavaScript
import { defineComponent, h } from 'vue';
import { CCard } from '../card/CCard.js';
import { CCardBody } from '../card/CCardBody.js';
import { CCardFooter } from '../card/CCardFooter.js';
import '../card/CCardGroup.js';
import '../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 { Color } from '../../props.js';
const CWidgetStatsF = defineComponent({
name: 'CWidgetStatsF',
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,
/**
* Set padding of your component.
*/
padding: {
type: Boolean,
default: true,
},
/**
* Title for your component. If you want to pass non-string value please use dedicated slot `<template #title>...</template>`
*/
title: String,
/**
* Helper text for your component. If you want to pass non-string value please use dedicated slot `<template #text>...</template>`
*/
text: 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 () => h(CCard, {}, {
default: () => [
h(CCardBody, {
class: ['d-flex align-items-center', props.padding === false && 'p-0'],
}, () => [
h('div', {
class: [
'me-3',
'text-white',
`bg-${props.color}`,
props.padding ? 'p-3' : 'p-4',
],
}, (slots.default && slots.default()) || (slots.icon && slots.icon())),
h('div', {}, [
(props.value || slots.value) &&
h('div', {
class: [`fs-6 fw-semibold text-${props.color}`],
}, {
default: () => (slots.value && slots.value()) || props.value,
}),
(props.title || slots.title) &&
h('div', {
class: 'text-body-secondary text-uppercase fw-semibold small',
}, {
default: () => (slots.title && slots.title()) || props.title,
}),
]),
]),
slots.footer && h(CCardFooter, {}, () => slots.footer && slots.footer()),
],
});
},
});
export { CWidgetStatsF };
//# sourceMappingURL=CWidgetStatsF.js.map