Skip to content

Commit 401e6b3

Browse files
rakieta2015rakieta2015
committed
feat: add widgets
1 parent d772fd6 commit 401e6b3

File tree

9 files changed

+700
-0
lines changed

9 files changed

+700
-0
lines changed

‎docs/.vuepress/clientAppEnhance.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,15 @@ import { CTooltip, CPopover, CClickaway } from '../../src/directives'
157157

158158
import '@coreui/coreui/scss/coreui.scss'
159159

160+
import {
161+
CWidgetSimple,
162+
CWidgetBrand,
163+
CWidgetDropdown,
164+
CWidgetIcon,
165+
CWidgetProgress,
166+
CWidgetProgressIcon
167+
} from '../../src/components/widgets'
168+
160169
//import CIcon from '@coreui/icons-vue/src/CIconRaw.vue'
161170
//import CIcon from '../../node_modules/@coreui/icons-vue/src/CIconRaw.vue'
162171
//import { CIcon, CIconTestIcon } from '../../src/components/icon'
@@ -296,6 +305,13 @@ const clientAppEnhance: ClientAppEnhance = ({ app }) => {
296305
app.component('CToaster', CToaster)
297306
app.component('CToastHeader', CToastHeader)
298307

308+
app.component('CWidgetSimple', CWidgetSimple)
309+
app.component('CWidgetBrand', CWidgetBrand)
310+
app.component('CWidgetDropdown', CWidgetDropdown)
311+
app.component('CWidgetIcon', CWidgetIcon)
312+
app.component('CWidgetProgress', CWidgetProgress)
313+
app.component('CWidgetProgressIcon', CWidgetProgressIcon)
314+
299315
app.directive('CTooltip', CTooltip)
300316
app.directive('CPopover', CPopover)
301317
app.directive('CClickaway', CClickaway)

‎docs/4.0/components/widgets.md

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
---
2+
title: Vue Widgets Components
3+
name: Widgets
4+
description:
5+
---
6+
7+
## Examples
8+
9+
### Widget Simple
10+
11+
::: demo
12+
<CWidgetSimple header="title" text="1,123"/>
13+
:::
14+
15+
16+
```vue
17+
<CWidgetSimple header="title" text="1,123"/>
18+
```
19+
20+
<br>
21+
22+
### Widget Brand
23+
24+
::: demo
25+
<CWidgetBrand
26+
color="success"
27+
leftHeader="leftHeader"
28+
rightHeader="rightHeader"
29+
leftFooter="leftFooter"
30+
rightFooter="rightFooter"
31+
/>
32+
:::
33+
34+
35+
```vue
36+
<CWidgetBrand
37+
color="success"
38+
leftHeader="leftHeader"
39+
rightHeader="rightHeader"
40+
leftFooter="leftFooter"
41+
rightFooter="rightFooter"
42+
/>
43+
```
44+
45+
<br>
46+
47+
### Widget Dropdown
48+
49+
::: demo
50+
<CWidgetDropdown color="info" header="9.823" text="Members online">
51+
<template #default>
52+
<CDropdown>
53+
<CDropdownToggle color="info" class="text-white">Dropdown Button</CDropdownToggle>
54+
<CDropdownMenu>
55+
<CDropdownItem href="#">Action</CDropdownItem>
56+
<CDropdownItem href="#">Another action</CDropdownItem>
57+
<CDropdownItem href="#">Something else here</CDropdownItem>
58+
</CDropdownMenu>
59+
</CDropdown>
60+
</template>
61+
<template #footer>
62+
footer footer footer
63+
</template>
64+
</CWidgetDropdown>
65+
:::
66+
67+
68+
```vue
69+
<CWidgetDropdown color="info" header="9.823" text="Members online">
70+
<template #default>
71+
<CDropdown>
72+
<CDropdownToggle color="info" class="text-white">Dropdown Button</CDropdownToggle>
73+
<CDropdownMenu>
74+
<CDropdownItem href="#">Action</CDropdownItem>
75+
<CDropdownItem href="#">Another action</CDropdownItem>
76+
<CDropdownItem href="#">Something else here</CDropdownItem>
77+
</CDropdownMenu>
78+
</CDropdown>
79+
</template>
80+
<template #footer>
81+
footer footer footer
82+
</template>
83+
</CWidgetDropdown>
84+
```
85+
86+
<br>
87+
88+
### Widget Icon
89+
90+
<CWidgetIcon
91+
header="$1.999,50"
92+
text="Income"
93+
color="info">Icon</CWidgetIcon>
94+
95+
96+
```vue
97+
<CWidgetIcon
98+
header="$1.999,50"
99+
text="Income"
100+
color="info">Icon</CWidgetIcon>
101+
```
102+
103+
104+
105+
<br>
106+
107+
### Widget Progress
108+
109+
110+
<CWidgetProgress
111+
header="Header"
112+
text="Some text"
113+
footer="Lorem ipsum dolor sit amet enim."
114+
color="warning"
115+
value="75"
116+
>
117+
118+
</CWidgetProgress>
119+
120+
121+
```vue
122+
<CWidgetProgress
123+
header="Header"
124+
text="Some text"
125+
footer="Lorem ipsum dolor sit amet enim."
126+
color="warning"
127+
value="75"
128+
>
129+
```
130+
131+
<CWidgetProgress
132+
header="Header"
133+
text="Some text"
134+
footer="Lorem ipsum dolor sit amet enim."
135+
color="warning"
136+
value="75"
137+
inverse
138+
>
139+
140+
</CWidgetProgress>
141+
142+
143+
```vue
144+
<CWidgetProgress
145+
header="Header"
146+
text="Some text"
147+
footer="Lorem ipsum dolor sit amet enim."
148+
color="warning"
149+
value="75"
150+
inverse
151+
>
152+
153+
</CWidgetProgress>
154+
```
155+
<br>
156+
157+
### Widget Progress Icon
158+
159+
<CWidgetProgressIcon
160+
header="87.500"
161+
text="Visitors"
162+
color="info">Icon</CWidgetProgressIcon>
163+
164+
```vue
165+
<CWidgetProgressIcon
166+
header="87.500"
167+
text="Visitors"
168+
color="info">Icon</CWidgetProgressIcon>
169+
```
170+
171+
<CWidgetProgressIcon
172+
header="87.500"
173+
text="Visitors"
174+
color="info"
175+
inverse>Icon</CWidgetProgressIcon>
176+
177+
```vue
178+
<CWidgetProgressIcon
179+
header="87.500"
180+
text="Visitors"
181+
color="info"
182+
inverse>Icon</CWidgetProgressIcon>
183+
```

‎src/components/widgets/CWidgetBrand.ts

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
2+
import { defineComponent, h } from "vue"
3+
4+
const CWidgetBrandProps = {
5+
color: {
6+
type: String,
7+
require: false
8+
},
9+
rightHeader: {
10+
type: String,
11+
require: false
12+
},
13+
rightFooter: {
14+
type: String,
15+
require: false
16+
},
17+
leftHeader: {
18+
type: String,
19+
require: false
20+
},
21+
leftFooter: {
22+
type: String,
23+
require: false
24+
},
25+
addHeaderClasses: {
26+
type: [String, Array, Object],
27+
require: false
28+
}
29+
}
30+
31+
const CWidgetBrand = defineComponent({
32+
name: 'CWidgetBrand',
33+
props: CWidgetBrandProps,
34+
setup ( props ) {
35+
return () => h(
36+
'div',
37+
{
38+
class: 'card'
39+
},
40+
h(
41+
'div',
42+
{
43+
class: ['card-header', 'content-center', 'text-white', 'p-0', `bg-${props.color}`, props.addHeaderClasses]
44+
},
45+
h(
46+
'div',
47+
{
48+
class: 'card-body row text-center',
49+
},
50+
[
51+
h(
52+
'div',
53+
{
54+
class: 'col-6 border-end'
55+
},
56+
[
57+
props.leftHeader &&
58+
h(
59+
'div',
60+
{
61+
class: 'text-value-lg'
62+
},
63+
props.leftHeader
64+
),
65+
props.leftFooter &&
66+
h(
67+
'div',
68+
{
69+
class: 'text-uppercase text-muted small'
70+
},
71+
props.leftFooter
72+
)
73+
]
74+
),
75+
h(
76+
'div',
77+
{
78+
class: 'col-6'
79+
},
80+
[
81+
props.rightHeader &&
82+
h(
83+
'div',
84+
{
85+
class: 'text-value-lg'
86+
},
87+
props.rightHeader
88+
),
89+
props.rightFooter &&
90+
h(
91+
'div',
92+
{
93+
class: 'text-uppercase text-muted small'
94+
},
95+
props.rightFooter
96+
)
97+
]
98+
)
99+
]
100+
)
101+
)
102+
)
103+
}
104+
})
105+
106+
export { CWidgetBrand }

‎src/components/widgets/CWidgetDropdown.ts

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
2+
import { defineComponent, h } from "vue"
3+
4+
const CWidgetDropdownProps = {
5+
color: {
6+
type: String,
7+
require: false
8+
},
9+
header: {
10+
type: String,
11+
require: false
12+
},
13+
text: {
14+
type: String,
15+
require: false
16+
},
17+
}
18+
19+
const CWidgetDropdown = defineComponent({
20+
name: 'CWidgetDropdown',
21+
props: CWidgetDropdownProps,
22+
setup ( props, { slots } ) {
23+
return () => h(
24+
'div',
25+
{
26+
class: ['card', 'text-white', `bg-${props.color}`]
27+
},
28+
[
29+
h(
30+
'div',
31+
{
32+
class: 'card-body pb-0 d-flex justify-content-between'
33+
},
34+
[
35+
props.header &&
36+
h(
37+
'div',
38+
{
39+
class: 'text-value-lg'
40+
},
41+
props.header
42+
),
43+
props.text &&
44+
h(
45+
'div',
46+
{},
47+
props.text
48+
),
49+
slots.default && slots.default()
50+
]
51+
),
52+
slots.footer && slots.footer()
53+
]
54+
)
55+
}
56+
})
57+
58+
export { CWidgetDropdown }

0 commit comments

Comments
 (0)