Skip to content

Commit 4a273d0

Browse files
woothuwoothu
committed
feat: Widgets rework
- CWidgetSmallText renamed to CWidgetHeaderDetails - CWidgetSocial renamed to CWidgetBrand - Added additional header and footer slots to most Widgets - Make functional widgets stateful - Delete default texts in props, now when props is not passed node is not rendered - change default variants to primary
1 parent 9beb5d8 commit 4a273d0

File tree

9 files changed

+135
-193
lines changed

9 files changed

+135
-193
lines changed

‎src/components/Widgets/CWidgetBrand.vue

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<template>
2+
<div class="c-card">
3+
<div
4+
class="c-card-header c-content-center c-text-white c-p-0"
5+
:class="[`c-bg-${variant}`, addHeaderClasses]"
6+
>
7+
<slot></slot>
8+
</div>
9+
<slot name="body">
10+
<div class="c-card-body c-row c-text-center">
11+
<div class="c-col">
12+
<div v-if="rightHeader" class="c-text-value-lg">
13+
{{rightHeader}}
14+
</div>
15+
<div v-if="rightFooter" class="c-text-uppercase c-text-muted c-small">
16+
{{rightFooter}}
17+
</div>
18+
</div>
19+
<div class="c-vr"></div>
20+
<div class="c-col">
21+
<div v-if="leftHeader" class="c-text-value-lg">
22+
{{leftHeader}}
23+
</div>
24+
<div v-if="leftFooter" class="c-text-uppercase c-text-muted c-small">
25+
{{leftFooter}}
26+
</div>
27+
</div>
28+
</div>
29+
</slot>
30+
</div>
31+
</template>
32+
33+
<script>
34+
export default {
35+
name: 'CWidgetBrand',
36+
props: {
37+
variant: {
38+
type: String,
39+
variant: 'primary'
40+
},
41+
rightHeader: String,
42+
rightFooter: String,
43+
leftHeader: String,
44+
leftFooter: String,
45+
addHeaderClasses: String
46+
}
47+
}
48+
</script>
49+
50+
<style lang="scss">
51+
@import "~@coreui/coreui/scss/partials/widgets.scss";
52+
@import "~@coreui/coreui/scss/partials/card.scss";
53+
@import "~@coreui/coreui/scss/partials/grid.scss";
54+
@import "~@coreui/coreui/scss/utilities/_position.scss";
55+
@import "~@coreui/coreui/scss/utilities/_spacing.scss";
56+
@import "~@coreui/coreui/scss/utilities/_text.scss";
57+
@import "~@coreui/coreui/scss/utilities/_background.scss";
58+
</style>

‎src/components/Widgets/CWidgetDropdown.vue

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
<template functional>
2-
<div class="c-card" :class="`c-bg-${props.variant}`">
1+
<template>
2+
<div class="c-card" :class="`c-bg-${variant}`">
3+
<slot name="header"></slot>
34
<div class="c-card-body c-pb-0">
4-
<slot name="dropdown"></slot>
5-
<h4 class="c-mb-0">{{props.header}}</h4>
6-
<p>{{props.text}}</p>
5+
<slot></slot>
6+
<h4 v-if="header" class="c-mb-0">{{header}}</h4>
7+
<p v-if="text">{{text}}</p>
78
</div>
8-
<slot></slot>
9+
<slot name="footer"></slot>
910
</div>
1011
</template>
1112

@@ -17,14 +18,8 @@ export default {
1718
type: String,
1819
default: 'primary'
1920
},
20-
header: {
21-
type: String,
22-
default: 'header:string'
23-
},
24-
text: {
25-
type: String,
26-
default: 'text:string'
27-
}
21+
header: String,
22+
text: String
2823
}
2924
}
3025
</script>

‎src/components/Widgets/CWidgetSmallText.vue renamed to ‎src/components/Widgets/CWidgetHeaderDetails.vue

Lines changed: 11 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
<template functional>
2-
<div class="c-card" :class="`c-bg-${props.variant}`">
1+
<template>
2+
<div class="c-card" :class="`c-bg-${variant}`">
33
<div class="c-card-header">
44
<div class="c-font-weight-bold">
5-
<span>{{props.rightHeader}}</span>
6-
<span class="c-float-right">{{props.leftHeader}}</span>
5+
<span v-if="rightHeader">{{rightHeader}}</span>
6+
<span v-if="leftHeader" class="c-float-right">{{leftHeader}}</span>
77
</div>
88
<div>
99
<span>
10-
<small>{{props.rightFooter}}</small>
10+
<small v-if="rightFooter">{{rightFooter}}</small>
1111
</span>
1212
<span class="c-float-right">
13-
<small>{{props.leftFooter}}</small>
13+
<small v-if="leftFooter">{{leftFooter}}</small>
1414
</span>
1515
</div>
1616
<slot></slot>
@@ -20,28 +20,16 @@
2020

2121
<script>
2222
export default {
23-
name: 'CWidgetSmallText',
23+
name: 'CWidgetHeaderDetails',
2424
props: {
2525
variant: {
2626
type: String,
2727
default: 'primary'
2828
},
29-
rightHeader: {
30-
type: String,
31-
default: 'rightHeader:string'
32-
},
33-
rightFooter: {
34-
type: String,
35-
default: 'rightFooter:string'
36-
},
37-
leftHeader: {
38-
type: String,
39-
default: 'leftHeader:string'
40-
},
41-
leftFooter: {
42-
type: String,
43-
default: 'leftFooter:string'
44-
}
29+
rightHeader: String,
30+
rightFooter: String,
31+
leftHeader: String,
32+
leftFooter: String
4533
}
4634
}
4735
</script>

‎src/components/Widgets/CWidgetIcon.vue

Lines changed: 9 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<template>
22
<div class="c-card">
3+
<slot name="header"></slot>
34
<div
45
class="c-card-body c-clearfix c-d-flex c-align-items-center"
56
:class="noPadding ? 'c-p-0' : 'c-p-3'"
@@ -10,57 +11,28 @@
1011
>
1112
<slot></slot>
1213
</div>
13-
1414
<div>
15-
<div :class="`c-text-value c-text-${variant}`">
15+
<div v-if="header" :class="`c-text-value c-text-${variant}`">
1616
{{header}}
1717
</div>
18-
<div class="c-text-muted c-text-uppercase c-font-weight-bold c-small">
18+
<div
19+
v-if="text"
20+
class="c-text-muted c-text-uppercase c-font-weight-bold c-small"
21+
>
1922
{{text}}
2023
</div>
2124
</div>
2225
</div>
23-
<div
24-
v-if="link || $slots.link"
25-
class="c-card-footer c-px-3 c-py-2"
26-
>
27-
<slot name="link">
28-
<CLink
29-
class="c-font-weight-bold c-font-xs c-btn-block c-text-muted"
30-
:href="link"
31-
>
32-
{{linkText}}
33-
<CIcon name="arrowRight" class="c-float-right" width="16"/>
34-
</CLink>
35-
</slot>
36-
</div>
26+
<slot name="footer"></slot>
3727
</div>
3828
</template>
3929

4030
<script>
41-
import CLink from '../Link/CLink'
42-
import { CIcon as CIconRaw } from '@coreui/icons/vue'
43-
import { arrowRight } from '@coreui/icons'
44-
const CIcon = Object.assign({}, CIconRaw, { icons : { arrowRight }})
45-
4631
export default {
4732
name: 'CWidgetIcon',
48-
components: { CLink, CIcon },
4933
props: {
50-
addIconClasses: String,
51-
header: {
52-
type: String,
53-
default: 'header:string'
54-
},
55-
text: {
56-
type: String,
57-
default: 'text:string'
58-
},
59-
linkText: {
60-
type: String,
61-
default: 'View More'
62-
},
63-
link: String,
34+
header: String,
35+
text: String,
6436
noPadding: Boolean,
6537
variant: {
6638
type: String,

‎src/components/Widgets/CWidgetProgress.vue

Lines changed: 16 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
1-
<template functional>
2-
<div :class="props.inverse ? `c-card c-text-white c-bg-${props.variant}` : 'c-card'">
1+
<template>
2+
<div :class="inverse ? `c-card c-text-white c-bg-${variant}` : 'c-card'">
3+
<slot name="header"></slot>
34
<div class="c-card-body">
4-
<div class="c-h4 c-m-0">{{props.header}}</div>
5-
<div>{{props.text}}</div>
5+
<div v-if="header" class="c-h4 c-m-0">{{header}}</div>
6+
<div v-if="text">{{text}}</div>
67
<slot>
78
<CProgress
8-
:variant="!props.inverse ? props.variant : ''"
9-
:value = "props.value"
10-
:class="props.inverse ? 'c-progress-white' : ''"
9+
:variant="!inverse ? variant : ''"
10+
:value="value"
11+
:class="inverse ? 'c-progress-white' : ''"
1112
class="c-progress-xs c-my-3 c-mb-0"
1213
/>
1314
</slot>
14-
<small class="c-text-muted">
15-
{{props.footer}}
15+
<small v-if="footer" class="c-text-muted">
16+
{{footer}}
1617
</small>
1718
</div>
19+
<slot name="footer"></slot>
1820
</div>
1921
</template>
2022

@@ -26,19 +28,13 @@ export default {
2628
CProgress
2729
},
2830
props: {
29-
header: {
31+
header: String,
32+
text: String,
33+
footer: String,
34+
variant: {
3035
type: String,
31-
default: 'header:string'
36+
default: 'primary'
3237
},
33-
text: {
34-
type: String,
35-
default: 'text:string'
36-
},
37-
footer: {
38-
type: String,
39-
default: 'footer:string'
40-
},
41-
variant: String,
4238
inverse: Boolean,
4339
value: {
4440
type: Number,

‎src/components/Widgets/CWidgetProgressIcon.vue

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,30 @@
1-
<template functional>
2-
<div :class="props.inverse ? `c-card c-text-white c-bg-${props.variant}` : 'c-card'">
1+
<template>
2+
<div :class="inverse ? `c-card c-text-white c-bg-${variant}` : 'c-card'">
3+
<slot name="header"></slot>
34
<div class="c-card-body">
45
<div
56
v-if="$slots.default"
67
class="c-h1 c-text-muted c-text-right c-mb-4"
78
>
89
<slot></slot>
9-
<!-- <i :class="props.iconClasses"></i> -->
1010
</div>
11-
<div class="c-h4 c-mb-0">{{props.header}}</div>
12-
<small class="c-text-muted c-text-uppercase c-font-weight-bold">
13-
{{props.text}}
11+
<div v-if="header" class="c-h4 c-mb-0">{{header}}</div>
12+
<small
13+
v-if="text"
14+
class="c-text-muted c-text-uppercase c-font-weight-bold"
15+
>
16+
{{text}}
1417
</small>
1518
<slot name="progress">
1619
<CProgress
17-
:variant="!props.inverse ? props.variant : ''"
18-
:value="props.value"
19-
:class="props.inverse ? 'c-progress-white' : ''"
20+
:variant="!inverse ? variant : ''"
21+
:value="value"
22+
:class="inverse ? 'c-progress-white' : ''"
2023
class="c-progress-xs c-my-3 c-mb-0"
2124
/>
2225
</slot>
2326
</div>
27+
<slot name="footer"></slot>
2428
</div>
2529
</template>
2630

@@ -32,16 +36,12 @@ export default {
3236
CProgress
3337
},
3438
props: {
35-
iconClasses: String,
36-
header: {
37-
type: String,
38-
default: 'header:string'
39-
},
40-
text: {
39+
header: String,
40+
text: String,
41+
variant: {
4142
type: String,
42-
default: 'text:string'
43+
default: 'primary'
4344
},
44-
variant: String,
4545
inverse: Boolean,
4646
value: {
4747
type: Number,

‎src/components/Widgets/CWidgetSimple.vue

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,26 @@
1-
<template functional>
1+
<template>
22
<div class="c-card">
3+
<slot name="header"></slot>
34
<div class="c-card-body c-text-center">
4-
<div class="c-text-muted c-small c-text-uppercase c-font-weight-bold">
5-
{{props.header}}
5+
<div
6+
v-if="header"
7+
class="c-text-muted c-small c-text-uppercase c-font-weight-bold"
8+
>
9+
{{header}}
610
</div>
7-
<div class="c-h2 c-py-3">{{props.text}}</div>
11+
<div v-if="text" class="c-h2 c-py-3">{{text}}</div>
812
<slot></slot>
913
</div>
14+
<slot name="footer"></slot>
1015
</div>
1116
</template>
1217

1318
<script>
1419
export default {
1520
name: 'CWidgetSimple',
1621
props: {
17-
header: {
18-
type: String,
19-
default: 'header:string'
20-
},
21-
text: {
22-
type: String,
23-
default: 'text:string'
24-
}
22+
header: String,
23+
text: String
2524
}
2625
}
2726
</script>

0 commit comments

Comments
 (0)