Skip to content

Commit f9c12b2

Browse files
woothuwoothu
committed
refactor: Widgets changed to functional, added slots for subcomponents.
1 parent 3a2ea71 commit f9c12b2

File tree

8 files changed

+100
-94
lines changed

8 files changed

+100
-94
lines changed

‎src/components/Widgets/CWidget01.vue

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,25 @@
1-
<template>
2-
<div class='card' :class="styleClasses">
3-
<div class='card-body'>
4-
<div class="h4 m-0">{{header}}</div>
5-
<div>{{text}}</div>
6-
<c-progress height={} :variant="variant" :value="value"
7-
:class="[backgroundColor ? 'progress-white' : '', 'progress-xs my-3 mb-0']"/>
8-
<small class="text-muted">{{footer}}</small>
1+
<template functional>
2+
<div :class="props.inverse ? `card text-white bg-${props.variant}` : 'card'">
3+
<div class="card-body">
4+
<div class="h4 m-0">{{props.header}}</div>
5+
<div>{{props.text}}</div>
6+
<slot>
7+
<CProgress :variant="!props.inverse ? props.variant : ''"
8+
:value = "props.value"
9+
:class="props.inverse ? 'progress-white' : ''"
10+
class="progress-xs my-3 mb-0"/>
11+
</slot>
12+
<small class="text-muted">{{props.footer}}</small>
913
</div>
1014
</div>
1115
</template>
1216

1317
<script>
18+
import CProgress from '../Progress/CProgress'
1419
export default {
1520
name: 'CWidget01',
16-
data () {
17-
return{
18-
backgroundColor: '',
19-
styleClasses: '',
20-
}
21-
},
22-
created () {
23-
if(this.variant.includes('background')){
24-
this.backgroundColor = this.variant.replace('background-','');
25-
this.styleClasses = 'text-white bg-' + this.backgroundColor
26-
}
21+
components: {
22+
CProgress
2723
},
2824
props: {
2925
header: {
@@ -34,18 +30,22 @@ export default {
3430
type: String,
3531
default: 'text:string'
3632
},
37-
variant: {
38-
type: String,
39-
default: ''
40-
},
4133
footer: {
4234
type: String,
4335
default: 'footer:string'
4436
},
37+
variant: {
38+
type: String,
39+
default: 'success'
40+
},
41+
inverse: {
42+
type: Boolean,
43+
default: false
44+
},
4545
value: {
4646
type: Number,
4747
default: 25
48-
},
48+
}
4949
}
5050
}
5151
</script>

‎src/components/Widgets/CWidget02.vue

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,32 @@
1-
<template>
2-
<div class='card'>
1+
<template functional>
2+
<div class="card">
33
<div class="card-body p-3 clearfix">
4-
<i :class="iconClasses" class="fa fa-cogs bg-primary p-3 font-2xl mr-3 float-left"></i>
5-
<div class="h5 text-primary mb-0 mt-2">{{header}}</div>
6-
<div class="text-muted text-uppercase font-weight-bold font-xs">{{text}}</div>
4+
<i class="p-3 font-2xl mr-3 float-left"
5+
:class="props.iconClasses">
6+
</i>
7+
<div class="h5 text-primary mb-0 mt-2">{{props.header}}</div>
8+
<div class="text-muted text-uppercase font-weight-bold font-xs">{{props.text}}</div>
79
</div>
8-
<div class='card-footer px-3 py-2' v-if="showLink">
9-
<c-link class="font-weight-bold font-xs btn-block text-muted" :href="link">View More <i class="fa fa-angle-right float-right font-lg"></i></c-link>
10+
<div class="card-footer px-3 py-2"
11+
v-if="props.showLink">
12+
<slot>
13+
<CLink class="font-weight-bold font-xs btn-block text-muted"
14+
:href="props.link">
15+
View More
16+
<i class="fa fa-angle-right float-right font-lg"></i>
17+
</CLink>
18+
</slot>
1019
</div>
1120
</div>
1221
</template>
1322

1423
<script>
24+
import CLink from '../Link/CLink'
1525
export default {
1626
name: 'CWidget02',
27+
components: {
28+
CLink
29+
},
1730
props: {
1831
iconClasses: {
1932
type: String,
@@ -34,7 +47,7 @@ export default {
3447
link: {
3548
type: String,
3649
default: '#'
37-
},
50+
}
3851
}
3952
}
4053
</script>

‎src/components/Widgets/CWidget03.vue

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
<template>
2-
<div class='card'>
3-
<div class='card-body p-0 clearfix'>
4-
<i :class="iconClasses" class="p-4 font-2xl mr-3 float-left"></i>
5-
<div class="h5 text-primary mb-0 pt-3">{{header}}</div>
6-
<div class="text-muted text-uppercase font-weight-bold font-xs">{{text}}</div>
1+
<template functional>
2+
<div class="card">
3+
<div class="card-body p-0 clearfix">
4+
<i :class="props.iconClasses"
5+
class="p-4 font-2xl mr-3 float-left"></i>
6+
<div class="h5 text-primary mb-0 pt-3">{{props.header}}</div>
7+
<div class="text-muted text-uppercase font-weight-bold font-xs">{{props.text}}</div>
78
</div>
89
</div>
910
</template>
@@ -23,7 +24,7 @@ export default {
2324
text: {
2425
type: String,
2526
default: 'text:string'
26-
},
27+
}
2728
}
2829
}
2930
</script>

‎src/components/Widgets/CWidget04.vue

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
<template>
1+
<template functional>
22
<div class="brand-card">
3-
<div :class="'bg-' + type" class="brand-card-header">
4-
<i class="fa" :class="'fa-'+ type"></i>
3+
<div :class="`brand-card-header bg-${props.type}`">
4+
<i :class="`fa fa-${props.type}`"></i>
55
<div class="chart-wrapper">
66
<slot></slot>
77
</div>
88
</div>
99
<div class="brand-card-body">
1010
<div>
11-
<div class="text-value">{{rightHeader}}</div>
12-
<div class="text-uppercase text-muted small">{{rightFooter}}</div>
11+
<div class="text-value">{{props.rightHeader}}</div>
12+
<div class="text-uppercase text-muted small">{{props.rightFooter}}</div>
1313
</div>
1414
<div>
15-
<div class="text-value">{{leftHeader}}</div>
16-
<div class="text-uppercase text-muted small">{{leftFooter}}</div>
15+
<div class="text-value">{{props.leftHeader}}</div>
16+
<div class="text-uppercase text-muted small">{{props.leftFooter}}</div>
1717
</div>
1818
</div>
1919
</div>
@@ -42,7 +42,7 @@ export default {
4242
leftFooter: {
4343
type: String,
4444
default: 'leftFooter:string'
45-
},
45+
}
4646
}
4747
}
4848
</script>

‎src/components/Widgets/CWidget05.vue

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,27 @@
1-
<template>
2-
<div class="card" :class="styleClasses">
1+
<template functional>
2+
<div :class="props.inverse ? `card text-white bg-${props.variant}` : 'card'">
33
<div class="card-body">
44
<div class="h1 text-muted text-right mb-4">
5-
<i :class="iconClasses"></i>
5+
<i :class="props.iconClasses"></i>
66
</div>
7-
<div class="h4 mb-0">{{header}}</div>
8-
<small class="text-muted text-uppercase font-weight-bold">{{text}}</small>
9-
<c-progress height={} :variant="variant" :value="value"
10-
:class="[backgroundColor ? 'progress-white' : '', 'progress-xs my-3 mb-0']"/>
7+
<div class="h4 mb-0">{{props.header}}</div>
8+
<small class="text-muted text-uppercase font-weight-bold">{{props.text}}</small>
9+
<slot>
10+
<CProgress :variant="!props.inverse ? props.variant : ''"
11+
:value="props.value"
12+
:class="props.inverse ? 'progress-white' : ''"
13+
class="progress-xs my-3 mb-0"/>
14+
</slot>
1115
</div>
1216
</div>
1317
</template>
1418

1519
<script>
20+
import CProgress from '../Progress/CProgress'
1621
export default {
1722
name: 'CWidget05',
18-
data () {
19-
return{
20-
backgroundColor: '',
21-
styleClasses: '',
22-
}
23-
},
24-
created () {
25-
if(this.variant.includes('background')){
26-
this.backgroundColor = this.variant.replace('background-','');
27-
this.styleClasses = 'text-white bg-' + this.backgroundColor
28-
}
23+
components: {
24+
CProgress
2925
},
3026
props: {
3127
iconClasses: {
@@ -42,12 +38,16 @@ export default {
4238
},
4339
variant: {
4440
type: String,
45-
default: ''
41+
default: 'success'
42+
},
43+
inverse: {
44+
type: Boolean,
45+
default: false
4646
},
4747
value: {
4848
type: Number,
4949
default: 25
50-
},
50+
}
5151
}
5252
}
5353
</script>

‎src/components/Widgets/CWidget06.vue

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,19 @@
1-
<template>
2-
<div class="card" :class="cardClasses">
1+
<template functional>
2+
<div class="card" :class="props.cardClasses">
33
<div class="card-body pb-0">
4-
<slot name='dropdown'></slot>
5-
<h4 class="mb-0">{{header}}</h4>
6-
<p>{{text}}</p>
4+
<slot name="dropdown"></slot>
5+
<h4 class="mb-0">{{props.header}}</h4>
6+
<p>{{props.text}}</p>
77
</div>
88
<div class="chart-wrapper">
9-
<slot name='chart'></slot>
9+
<slot name="chart"></slot>
1010
</div>
1111
</div>
1212
</template>
1313

1414
<script>
1515
export default {
1616
name: 'CWidget06',
17-
data () {
18-
return{
19-
backgroundColor: '',
20-
}
21-
},
2217
props: {
2318
cardClasses: {
2419
type: String,
@@ -31,7 +26,7 @@ export default {
3126
text: {
3227
type: String,
3328
default: 'text:string'
34-
},
29+
}
3530
}
3631
}
3732
</script>

‎src/components/Widgets/CWidget07.vue

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
1-
<template>
1+
<template functional>
22
<div class="card">
3-
<div :class="cardClasses" class="card-header">
3+
<div class="card-header"
4+
:class="props.cardClasses">
45
<div class="font-weight-bold">
5-
<span>{{rightHeader}}</span>
6-
<span class="float-right">{{leftHeader}}</span>
6+
<span>{{props.rightHeader}}</span>
7+
<span class="float-right">{{props.leftHeader}}</span>
78
</div>
89
<div>
910
<span>
10-
<small>{{rightFooter}}</small>
11+
<small>{{props.rightFooter}}</small>
1112
</span>
1213
<span class="float-right">
13-
<small>{{leftFooter}}</small>
14+
<small>{{props.leftFooter}}</small>
1415
</span>
1516
</div>
1617
<div class="chart-wrapper">
@@ -43,7 +44,7 @@ export default {
4344
leftFooter: {
4445
type: String,
4546
default: 'leftFooter:string'
46-
},
47+
}
4748
}
4849
}
4950
</script>

‎src/components/Widgets/CWidget08.vue

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
<template>
1+
<template functional>
22
<div class="card">
33
<div class="card-body text-center">
4-
<div class="text-muted small text-uppercase font-weight-bold">{{header}}</div>
5-
<div class="h2 py-3">{{text}}</div>
4+
<div class="text-muted small text-uppercase font-weight-bold">{{props.header}}</div>
5+
<div class="h2 py-3">{{props.text}}</div>
66
<div class="chart-wrapper">
77
<slot></slot>
88
</div>
@@ -14,18 +14,14 @@
1414
export default {
1515
name: 'CWidget08',
1616
props: {
17-
cardClasses: {
18-
type: String,
19-
default: 'bg-primary'
20-
},
2117
header: {
2218
type: String,
2319
default: 'header:string'
2420
},
2521
text: {
2622
type: String,
2723
default: 'text:string'
28-
},
24+
}
2925
}
3026
}
3127
</script>

0 commit comments

Comments
 (0)