Skip to content

Commit 905c4bd

Browse files
mrholekmrholek
committed
refactor: improve widget syntax
1 parent 5c3a996 commit 905c4bd

File tree

7 files changed

+111
-104
lines changed

7 files changed

+111
-104
lines changed

‎src/components/props.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ const Color = {
3838
'dark',
3939
'light',
4040
'link',
41+
'transparent',
4142
].includes(value)
4243
},
4344
}

‎src/components/widgets/CWidgetBrand.ts

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const CWidgetBrand = defineComponent({
3434
},
3535
],
3636
},
37-
slots.default && slots.default(),
37+
() => slots.default && slots.default(),
3838
),
3939
h(
4040
CCardBody,
@@ -51,8 +51,12 @@ const CWidgetBrand = defineComponent({
5151
{},
5252
{
5353
default: () => [
54-
h(CCol, { class: 'fs-5 fw-semibold' }, value[0]),
55-
h(CCol, { class: 'text-uppercase text-medium-emphasis small' }, value[1]),
54+
h(CCol, { class: 'fs-5 fw-semibold' }, () => value[0]),
55+
h(
56+
CCol,
57+
{ class: 'text-uppercase text-medium-emphasis small' },
58+
() => value[1],
59+
),
5660
],
5761
},
5862
),

‎src/components/widgets/CWidgetDropdown.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const CWidgetDropdown = defineComponent({
3030
{ [`bg-${props.color}`]: props.color, 'text-high-emphasis-inverse': props.color },
3131
],
3232
},
33-
[
33+
() => [
3434
h(
3535
CCardBody,
3636
{

‎src/components/widgets/CWidgetIcon.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const CWidgetIcon = defineComponent({
2727
require: false,
2828
},
2929
value: {
30-
type: Number,
30+
type: [Number, String],
3131
default: 0,
3232
require: false,
3333
},
@@ -44,7 +44,7 @@ const CWidgetIcon = defineComponent({
4444
{
4545
class: [`d-flex align-items-center p-${props.padding}`],
4646
},
47-
[
47+
() => [
4848
h(
4949
'div',
5050
{
@@ -77,7 +77,7 @@ const CWidgetIcon = defineComponent({
7777
]),
7878
],
7979
),
80-
slots.footer && h(CCardFooter, {}, slots.footer && slots.footer()),
80+
slots.footer && h(CCardFooter, {}, () => slots.footer && slots.footer()),
8181
],
8282
},
8383
)

‎src/components/widgets/CWidgetProgress.ts

Lines changed: 47 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const CWidgetProgress = defineComponent({
4747
require: false,
4848
},
4949
value: {
50-
type: Number,
50+
type: [Number, String],
5151
default: 0,
5252
require: false,
5353
},
@@ -64,49 +64,52 @@ const CWidgetProgress = defineComponent({
6464
],
6565
color: props.color,
6666
},
67-
h(
68-
CCardBody,
69-
{
70-
class: 'card-body',
71-
},
72-
() => [
73-
props.value &&
74-
h(
75-
'div',
76-
{
77-
class: 'fs-4 fw-semibold',
78-
},
79-
{
80-
default: () => props.value,
81-
},
82-
),
83-
props.title &&
84-
h(
85-
'div',
86-
{},
87-
{
88-
default: () => props.title,
89-
},
90-
),
91-
h(CProgress, {
92-
class: 'my-2',
93-
color: props.progressColor,
94-
height: 4,
95-
value: props.progressValue,
96-
white: props.inverse,
97-
}),
98-
props.text &&
99-
h(
100-
'small',
101-
{
102-
class: [props.inverse ? 'text-medium-emphasis-inverse' : 'text-medium-emphasis'],
103-
},
104-
{
105-
default: () => props.text,
106-
},
107-
),
108-
],
109-
),
67+
() =>
68+
h(
69+
CCardBody,
70+
{
71+
class: 'card-body',
72+
},
73+
() => [
74+
props.value &&
75+
h(
76+
'div',
77+
{
78+
class: 'fs-4 fw-semibold',
79+
},
80+
{
81+
default: () => props.value,
82+
},
83+
),
84+
props.title &&
85+
h(
86+
'div',
87+
{},
88+
{
89+
default: () => props.title,
90+
},
91+
),
92+
h(CProgress, {
93+
class: 'my-2',
94+
color: props.progressColor,
95+
height: 4,
96+
value: props.progressValue,
97+
white: props.inverse,
98+
}),
99+
props.text &&
100+
h(
101+
'small',
102+
{
103+
class: [
104+
props.inverse ? 'text-medium-emphasis-inverse' : 'text-medium-emphasis',
105+
],
106+
},
107+
{
108+
default: () => props.text,
109+
},
110+
),
111+
],
112+
),
110113
)
111114
},
112115
})

‎src/components/widgets/CWidgetProgressIcon.ts

Lines changed: 51 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ const CWidgetProgressIcon = defineComponent({
4242
require: false,
4343
},
4444
value: {
45-
type: Number,
45+
type: [Number, String],
4646
default: 0,
4747
require: false,
4848
},
@@ -59,55 +59,56 @@ const CWidgetProgressIcon = defineComponent({
5959
],
6060
color: props.color,
6161
},
62-
h(
63-
CCardBody,
64-
{
65-
class: 'card-body',
66-
},
67-
() => [
68-
slots.icon &&
69-
h(
70-
'div',
71-
{
72-
class: [
73-
'text-end mb-4',
74-
props.inverse ? 'text-medium-emphasis-inverse' : 'text-medium-emphasis',
75-
],
76-
},
77-
slots.icon && slots.icon(),
78-
),
79-
props.value &&
80-
h(
81-
'div',
82-
{
83-
class: 'fs-4 fw-semibold',
84-
},
85-
{
86-
default: () => props.value,
87-
},
88-
),
89-
props.title &&
90-
h(
91-
'div',
92-
{
93-
class: [
94-
'text-uppercase fw-semibold small',
95-
props.inverse ? 'text-medium-emphasis-inverse' : 'text-medium-emphasis',
96-
],
97-
},
98-
{
99-
default: () => props.title,
100-
},
101-
),
102-
h(CProgress, {
103-
class: 'my-2',
104-
color: props.progressColor,
105-
height: 4,
106-
value: props.progressValue,
107-
white: props.inverse,
108-
}),
109-
],
110-
),
62+
() =>
63+
h(
64+
CCardBody,
65+
{
66+
class: 'card-body',
67+
},
68+
() => [
69+
slots.icon &&
70+
h(
71+
'div',
72+
{
73+
class: [
74+
'text-end mb-4',
75+
props.inverse ? 'text-medium-emphasis-inverse' : 'text-medium-emphasis',
76+
],
77+
},
78+
slots.icon && slots.icon(),
79+
),
80+
props.value &&
81+
h(
82+
'div',
83+
{
84+
class: 'fs-4 fw-semibold',
85+
},
86+
{
87+
default: () => props.value,
88+
},
89+
),
90+
props.title &&
91+
h(
92+
'div',
93+
{
94+
class: [
95+
'text-uppercase fw-semibold small',
96+
props.inverse ? 'text-medium-emphasis-inverse' : 'text-medium-emphasis',
97+
],
98+
},
99+
{
100+
default: () => props.title,
101+
},
102+
),
103+
h(CProgress, {
104+
class: 'my-2',
105+
color: props.progressColor,
106+
height: 4,
107+
value: props.progressValue,
108+
white: props.inverse,
109+
}),
110+
],
111+
),
111112
)
112113
},
113114
})

‎src/components/widgets/CWidgetSimple.ts

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,7 @@ const CWidgetSimple = defineComponent({
1818
},
1919
setup(props, { slots }) {
2020
return () =>
21-
h(
22-
CCard,
23-
{},
21+
h(CCard, {}, () =>
2422
h(
2523
CCardBody,
2624
{

0 commit comments

Comments
 (0)