+
-
+
-
+
-
+
-
-
-
+
-
+
-
+
-
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -157,6 +177,146 @@
+
+
+
+
+
+
+
+
+ Action
+ Another action
+ Something else here...
+ Disabled action
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Action
+ Another action
+ Something else here...
+ Disabled action
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Action
+ Another action
+ Something else here...
+ Disabled action
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Action
+ Another action
+ Something else here...
+ Disabled action
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -166,6 +326,13 @@ import Widget02 from './widgets/Widget02'
import Widget03 from './widgets/Widget03'
import Widget04 from './widgets/Widget04'
import Widget05 from './widgets/Widget05'
+import Widget06 from './widgets/Widget06'
+import Widget07 from './widgets/Widget07'
+import Widget08 from './widgets/Widget08'
+import SocialBoxChartExample from './dashboard/SocialBoxChartExample'
+import LineChart1 from './dashboard/LineChart1'
+import LineChart2 from './dashboard/LineChart2'
+import BarChart1 from './dashboard/BarChart1'
export default {
name: 'Widgets',
@@ -174,7 +341,27 @@ export default {
Widget02,
Widget03,
Widget04,
- Widget05
+ Widget05,
+ Widget06,
+ Widget07,
+ Widget08,
+ SocialBoxChartExample,
+ LineChart1,
+ LineChart2,
+ BarChart1,
},
+ methods:{
+ copyTry:function($event){
+ var componentCode = $event.target.closest('.col-md-3').getAttribute('data-code')
+ if(componentCode)
+ console.log(componentCode)
+ const el = document.createElement('textarea');
+ el.value = componentCode;
+ document.body.appendChild(el);
+ el.select();
+ document.execCommand('copy');
+ document.body.removeChild(el);
+ },
+ }
}
diff --git a/src/views/dashboard/BarChart1.vue b/src/views/dashboard/BarChart1.vue
new file mode 100644
index 00000000..ce506d04
--- /dev/null
+++ b/src/views/dashboard/BarChart1.vue
@@ -0,0 +1,69 @@
+
diff --git a/src/views/dashboard/LineChart1.vue b/src/views/dashboard/LineChart1.vue
new file mode 100644
index 00000000..0856734b
--- /dev/null
+++ b/src/views/dashboard/LineChart1.vue
@@ -0,0 +1,95 @@
+
diff --git a/src/views/dashboard/LineChart2.vue b/src/views/dashboard/LineChart2.vue
new file mode 100644
index 00000000..cfb0eb2b
--- /dev/null
+++ b/src/views/dashboard/LineChart2.vue
@@ -0,0 +1,111 @@
+
diff --git a/src/views/dashboard/SocialBoxChartExample.vue b/src/views/dashboard/SocialBoxChartExample.vue
index d5b9dc1a..717b8db0 100644
--- a/src/views/dashboard/SocialBoxChartExample.vue
+++ b/src/views/dashboard/SocialBoxChartExample.vue
@@ -7,18 +7,29 @@ export default {
props: {
data: {
type: Array,
- default: () => [0, 22, 34, 46, 58, 70, 46]
+ default: () => [0, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
},
height: {
type: String,
default: '100'
+ },
+ label:{
+ type: String,
+ default: 'label|string'
+ },
+ labels:{
+ type: Array,
+ default () {
+ return(['January', 'February', 'March', 'April', 'May', 'June', 'July','August','September','October','November','December'])
+ }
}
},
mounted () {
this.renderChart({
- labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ labels: this.labels,
datasets: [
{
+ label: this.label,
backgroundColor: 'rgba(255,255,255,.1)',
borderColor: 'rgba(255,255,255,.55)',
pointHoverBackgroundColor: '#fff',
diff --git a/src/views/widgets/Widget01.md b/src/views/widgets/Widget01.md
new file mode 100644
index 00000000..8bd62255
--- /dev/null
+++ b/src/views/widgets/Widget01.md
@@ -0,0 +1,17 @@
+### Widget01
+
+This widget style can be configured by changing variant property, which name is one of standard bootstrap classes (i.e. success, info, warning, danger). If you want to change background color of widget instead of changing progress bar style add background- prefix to class (i.e. 'background-success').
+
+Value is the procentage value of displayed progress-bar.
+
+prop | default
+--- | ---
+variant | `''`
+value | `25`
+header| `'header:string'`
+text | `'text:string'`
+footer | `'footer:string'`
+
+#### Example:
+>
variant="info" :value="30"/>
diff --git a/src/views/widgets/Widget01.vue b/src/views/widgets/Widget01.vue
index 0d78eb9f..ca72a0c8 100644
--- a/src/views/widgets/Widget01.vue
+++ b/src/views/widgets/Widget01.vue
@@ -26,11 +26,11 @@ export default {
props: {
header: {
type: String,
- default: 'header|string'
+ default: 'header:string'
},
text: {
type: String,
- default: 'text|string'
+ default: 'text:string'
},
variant: {
type: String,
@@ -38,7 +38,7 @@ export default {
},
footer: {
type: String,
- default: 'footer|string'
+ default: 'footer:string'
},
value: {
type: Number,
diff --git a/src/views/widgets/Widget02.md b/src/views/widgets/Widget02.md
new file mode 100644
index 00000000..0e900249
--- /dev/null
+++ b/src/views/widgets/Widget02.md
@@ -0,0 +1,14 @@
+### Widget02
+This widget can be display with or without link. If you want to display link set showLink property to true.
+
+prop | default
+--- | ---
+iconClasses | `'fa fa-cogs bg-primary'`
+showLink | `true`
+header| `'header:string'`
+text | `'text:string'`
+link | `'#'`
+
+#### Example:
+>
diff --git a/src/views/widgets/Widget02.vue b/src/views/widgets/Widget02.vue
index feb74f6d..d9625548 100644
--- a/src/views/widgets/Widget02.vue
+++ b/src/views/widgets/Widget02.vue
@@ -21,11 +21,11 @@ export default {
},
header: {
type: String,
- default: 'header|string'
+ default: 'header:string'
},
text: {
type: String,
- default: 'text|string'
+ default: 'text:string'
},
showLink: {
type: Boolean,
diff --git a/src/views/widgets/Widget03.md b/src/views/widgets/Widget03.md
new file mode 100644
index 00000000..395f98f0
--- /dev/null
+++ b/src/views/widgets/Widget03.md
@@ -0,0 +1,11 @@
+### Widget03
+This widget style depends classes attached to iconClasses property. If you want to get diffrent size of icon block just add padding utility classes (i.e. 'px-5').
+
+prop | default
+--- | ---
+iconClasses | `'fa fa-cogs bg-primary'`
+header| `'header:string'`
+text | `'text:string'`
+
+#### Example:
+>
diff --git a/src/views/widgets/Widget03.vue b/src/views/widgets/Widget03.vue
index f8ee91a7..41c57b4b 100644
--- a/src/views/widgets/Widget03.vue
+++ b/src/views/widgets/Widget03.vue
@@ -18,11 +18,11 @@ export default {
},
header: {
type: String,
- default: 'header|string'
+ default: 'header:string'
},
text: {
type: String,
- default: 'text|string'
+ default: 'text:string'
},
}
}
diff --git a/src/views/widgets/Widget04.md b/src/views/widgets/Widget04.md
new file mode 100644
index 00000000..618fb2a8
--- /dev/null
+++ b/src/views/widgets/Widget04.md
@@ -0,0 +1,17 @@
+### Widget04
+This widget style depends on type property which defines which social widget background color and icon will be used (i.e facebook, twitter, linkedin, google-plus). Inside component there is slot for placing data chart.
+
+prop | default
+--- | ---
+type | `facebook`
+rightHeader | `'rightHeader:string'`
+rightFooter | `'rightFooter:string'`
+leftHeader | `'leftHeader:string'`
+leftFooter | `'leftFooter:string'`
+
+
+#### Example:
+>
+> label='Contracts' style='height:100px' backgroundColor='rgba(255,255,255,.1)'/>
+>
diff --git a/src/views/widgets/Widget04.vue b/src/views/widgets/Widget04.vue
index 4450faac..716612b3 100644
--- a/src/views/widgets/Widget04.vue
+++ b/src/views/widgets/Widget04.vue
@@ -1,9 +1,9 @@
-
+
@@ -20,38 +20,28 @@
diff --git a/src/views/widgets/Widget08.vue b/src/views/widgets/Widget08.vue
new file mode 100644
index 00000000..1299cae4
--- /dev/null
+++ b/src/views/widgets/Widget08.vue
@@ -0,0 +1,31 @@
+
+
+
+
{{header}}
+
{{text}}
+
+
+
+
+
+
+
diff --git a/tests/unit/widgets/Widget01.spec.js b/tests/unit/widgets/Widget01.spec.js
index 9b9a98ed..a7033491 100644
--- a/tests/unit/widgets/Widget01.spec.js
+++ b/tests/unit/widgets/Widget01.spec.js
@@ -22,10 +22,10 @@ describe(ComponentName + '.vue', () => {
const vm = new Vue(Component).$mount()
expect(vm.backgroundColor).toBe('')
expect(vm.styleClasses).toBe('')
- expect(vm.header).toBe('header|string')
- expect(vm.text).toBe('text|string')
+ expect(vm.header).toBe('header:string')
+ expect(vm.text).toBe('text:string')
expect(vm.variant).toBe('')
- expect(vm.footer).toBe('footer|string')
+ expect(vm.footer).toBe('footer:string')
expect(vm.value == 25).toBe(true)
})
it('correctly sets variant when background is not white', () => {
diff --git a/tests/unit/widgets/Widget02.spec.js b/tests/unit/widgets/Widget02.spec.js
index d3ab4551..39874048 100644
--- a/tests/unit/widgets/Widget02.spec.js
+++ b/tests/unit/widgets/Widget02.spec.js
@@ -17,8 +17,8 @@ describe(ComponentName + '.vue', () => {
})
it('correctly sets default props when created', () => {
const vm = new Vue(Component).$mount()
- expect(vm.header).toBe('header|string')
- expect(vm.text).toBe('text|string')
+ expect(vm.header).toBe('header:string')
+ expect(vm.text).toBe('text:string')
expect(vm.link).toBe('#')
expect(vm.iconClasses).toBe('fa fa-cogs bg-primary')
expect(vm.showLink).toBe(false)
diff --git a/tests/unit/widgets/Widget03.spec.js b/tests/unit/widgets/Widget03.spec.js
index 5dc049b6..6f79ca39 100644
--- a/tests/unit/widgets/Widget03.spec.js
+++ b/tests/unit/widgets/Widget03.spec.js
@@ -17,8 +17,8 @@ describe(ComponentName + '.vue', () => {
})
it('correctly sets default props when created', () => {
const vm = new Vue(Component).$mount()
- expect(vm.header).toBe('header|string')
- expect(vm.text).toBe('text|string')
+ expect(vm.header).toBe('header:string')
+ expect(vm.text).toBe('text:string')
expect(vm.iconClasses).toBe('fa fa-cogs bg-primary')
})
})
diff --git a/tests/unit/widgets/Widget04.spec.js b/tests/unit/widgets/Widget04.spec.js
index 8391af7b..03abe542 100644
--- a/tests/unit/widgets/Widget04.spec.js
+++ b/tests/unit/widgets/Widget04.spec.js
@@ -16,10 +16,9 @@ describe(ComponentName + '.vue', () => {
expect(wrapper.isVueInstance()).toBe(true)
})
it('correctly sets default props and data when created', () => {
- const vm = new Vue(Component).$mount()
- expect(vm.rightHeader).toBe('rightHeader|string')
- expect(vm.rightFooter).toBe('rightFooter|string')
- expect(vm.leftHeader).toBe('leftHeader|string')
- expect(vm.leftFooter).toBe('leftFooter|string')
+ expect(wrapper.props().rightHeader).toBe('rightHeader:string')
+ expect(wrapper.props().rightFooter).toBe('rightFooter:string')
+ expect(wrapper.props().leftHeader).toBe('leftHeader:string')
+ expect(wrapper.props().leftFooter).toBe('leftFooter:string')
})
})
diff --git a/tests/unit/widgets/Widget05.spec.js b/tests/unit/widgets/Widget05.spec.js
index 8249d9b1..3d163d9b 100644
--- a/tests/unit/widgets/Widget05.spec.js
+++ b/tests/unit/widgets/Widget05.spec.js
@@ -22,8 +22,8 @@ describe(ComponentName + '.vue', () => {
const vm = new Vue(Component).$mount()
expect(vm.backgroundColor).toBe('')
expect(vm.styleClasses).toBe('')
- expect(vm.header).toBe('header|string')
- expect(vm.text).toBe('text|string')
+ expect(vm.header).toBe('header:string')
+ expect(vm.text).toBe('text:string')
expect(vm.variant).toBe('')
expect(vm.value == 25).toBe(true)
})
diff --git a/tests/unit/widgets/Widget06.spec.js b/tests/unit/widgets/Widget06.spec.js
index 78a87618..2d2374ab 100644
--- a/tests/unit/widgets/Widget06.spec.js
+++ b/tests/unit/widgets/Widget06.spec.js
@@ -17,8 +17,8 @@ describe(ComponentName + '.vue', () => {
})
it('correctly sets default props and data when created', () => {
expect(wrapper.props().cardClasses).toBe('')
- expect(wrapper.props().header).toBe('header|string')
- expect(wrapper.props().text).toBe('text|string')
+ expect(wrapper.props().header).toBe('header:string')
+ expect(wrapper.props().text).toBe('text:string')
expect(wrapper.props().chartType).toBe('chart1')
expect(wrapper.props().chartHeight == 70).toBe(true)
})