Skip to content

Commit 631fa5b

Browse files
mrholekmrholek
committed
refactor(CWidgets): update widgets
1 parent a646fb2 commit 631fa5b

File tree

10 files changed

+1313
-868
lines changed

10 files changed

+1313
-868
lines changed

‎docs/4.0/components/widgets.md

Lines changed: 1009 additions & 627 deletions
Large diffs are not rendered by default.

‎src/components/widgets/CWidgetDropdown.ts

Lines changed: 0 additions & 58 deletions
This file was deleted.

‎src/components/widgets/CWidgetIcon.ts

Lines changed: 0 additions & 87 deletions
This file was deleted.

‎src/components/widgets/CWidgetStatsA.ts

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import { defineComponent, h } from 'vue'
2+
3+
import { CCard, CCardBody } from '../card'
4+
5+
const CWidgetStatsA = defineComponent({
6+
name: 'CWidgetStatsA',
7+
props: {
8+
color: {
9+
type: String,
10+
default: undefined,
11+
require: false,
12+
},
13+
/**
14+
* Title node for your component. If you want to pass non-string value please use dedicated slot `<template #title>...</template>`
15+
*/
16+
title: {
17+
type: String,
18+
default: undefined,
19+
require: false,
20+
},
21+
/**
22+
* Value node for your component. If you want to pass non-string value please use dedicated slot `<template #value>...</template>`
23+
*/
24+
value: {
25+
type: [Number, String],
26+
default: 0,
27+
require: false,
28+
},
29+
},
30+
setup(props, { slots }) {
31+
return () =>
32+
h(
33+
CCard,
34+
{
35+
class: [
36+
{ [`bg-${props.color}`]: props.color, 'text-high-emphasis-inverse': props.color },
37+
],
38+
},
39+
() => [
40+
h(
41+
CCardBody,
42+
{
43+
class: 'pb-0 d-flex justify-content-between align-items-start',
44+
},
45+
() => [
46+
h('div', {}, [
47+
(props.value || slots.value) &&
48+
h(
49+
'div',
50+
{ class: 'fs-4 fw-semibold' },
51+
{
52+
default: () => (slots.value && slots.value()) || props.value,
53+
},
54+
),
55+
(props.title || slots.title) &&
56+
h(
57+
'div',
58+
{},
59+
{
60+
default: () => (slots.title && slots.title()) || props.title,
61+
},
62+
),
63+
]),
64+
slots.action && slots.action(),
65+
],
66+
),
67+
slots.chart && slots.chart(),
68+
slots.default && slots.default(),
69+
],
70+
)
71+
},
72+
})
73+
74+
export { CWidgetStatsA }

‎src/components/widgets/CWidgetProgress.ts renamed to ‎src/components/widgets/CWidgetStatsB.ts

Lines changed: 43 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,76 @@
11
import { defineComponent, h } from 'vue'
2+
import { shape } from 'vue-types'
23

4+
import { Color } from '../props'
35
import { CCard, CCardBody } from './../card'
46
import { CProgress } from '../progress/CProgress'
57

6-
const CWidgetProgress = defineComponent({
7-
name: 'CWidgetProgress',
8+
const CWidgetStatsB = defineComponent({
9+
name: 'CWidgetStatsB',
810
props: {
911
/**
10-
* Sets the color context of the component to one of CoreUI’s themed colors. [docs]
12+
* Sets the color context of the component to one of CoreUI’s themed colors
1113
*
1214
* @values 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
1315
*/
14-
color: {
15-
type: String,
16-
default: undefined,
17-
require: false,
18-
},
16+
color: Color,
17+
/**
18+
* Colors have been inverted from their default dark shade.
19+
*/
1920
inverse: {
2021
type: Boolean,
2122
default: undefined,
2223
require: false,
2324
},
25+
progress: shape({
26+
/**
27+
* Sets the color context of the progress bar to one of CoreUI’s themed colors
28+
*
29+
* @values 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
30+
*/
31+
color: Color,
32+
/**
33+
* The percent to progress the ProgressBar (out of 100).
34+
* @default 0
35+
*/
36+
value: {
37+
type: Number,
38+
default: 0,
39+
},
40+
}),
2441
/**
25-
* Sets the color context of the progress bar to one of CoreUI’s themed colors. [docs]
26-
*
27-
* @values 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
42+
* Helper text for your component. If you want to pass non-string value please use dedicated slot `<template #text>...</template>`
2843
*/
29-
progressColor: {
30-
type: String,
31-
default: undefined,
32-
require: false,
33-
},
34-
progressValue: {
35-
type: Number,
36-
default: 0,
37-
require: false,
38-
},
3944
text: {
4045
type: String,
4146
default: undefined,
4247
require: false,
4348
},
49+
/**
50+
* Title node for your component. If you want to pass non-string value please use dedicated slot `<template #title>...</template>`
51+
*/
4452
title: {
4553
type: String,
4654
default: undefined,
4755
require: false,
4856
},
57+
/**
58+
* Value node for your component. If you want to pass non-string value please use dedicated slot `<template #value>...</template>`
59+
*/
4960
value: {
5061
type: [Number, String],
5162
default: 0,
5263
require: false,
5364
},
5465
},
55-
setup(props) {
66+
setup(props, { slots }) {
5667
return () =>
5768
h(
5869
CCard,
5970
{
6071
class: [
6172
{
62-
['text-white']: props.inverse,
73+
['text-high-emphasis-inverse']: props.inverse,
6374
},
6475
],
6576
color: props.color,
@@ -71,32 +82,32 @@ const CWidgetProgress = defineComponent({
7182
class: 'card-body',
7283
},
7384
() => [
74-
props.value &&
85+
(props.value || slots.value) &&
7586
h(
7687
'div',
7788
{
7889
class: 'fs-4 fw-semibold',
7990
},
8091
{
81-
default: () => props.value,
92+
default: () => (slots.value && slots.value()) || props.value,
8293
},
8394
),
84-
props.title &&
95+
(props.title || slots.title) &&
8596
h(
8697
'div',
8798
{},
8899
{
89-
default: () => props.title,
100+
default: () => (slots.title && slots.title()) || props.title,
90101
},
91102
),
92103
h(CProgress, {
93104
class: 'my-2',
94-
color: props.progressColor,
105+
color: props.progress?.color,
95106
height: 4,
96-
value: props.progressValue,
107+
value: props.progress?.value,
97108
white: props.inverse,
98109
}),
99-
props.text &&
110+
(props.text || slots.text) &&
100111
h(
101112
'small',
102113
{
@@ -105,7 +116,7 @@ const CWidgetProgress = defineComponent({
105116
],
106117
},
107118
{
108-
default: () => props.text,
119+
default: () => (slots.text && slots.text()) || props.text,
109120
},
110121
),
111122
],
@@ -114,4 +125,4 @@ const CWidgetProgress = defineComponent({
114125
},
115126
})
116127

117-
export { CWidgetProgress }
128+
export { CWidgetStatsB }

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy