refactor: refactoring template
This commit is contained in:
woothu
@@ -1,17 +0,0 @@
|
||||
### 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:
|
||||
> <widget01 header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
|
||||
> variant="info" :value="30"/>
|
||||
@@ -1,49 +0,0 @@
|
||||
<template>
|
||||
<b-card :class="styleClasses">
|
||||
<div class="h4 m-0">{{header}}</div>
|
||||
<div>{{text}}</div>
|
||||
<b-progress height={} :variant="variant" :value="value"
|
||||
:class="[backgroundColor ? 'progress-white' : '', 'progress-xs my-3 mb-0']"/>
|
||||
<small class="text-muted">{{footer}}</small>
|
||||
</b-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Widget01',
|
||||
data () {
|
||||
return{
|
||||
backgroundColor: '',
|
||||
styleClasses: '',
|
||||
}
|
||||
},
|
||||
created () {
|
||||
if(this.variant.includes('background')){
|
||||
this.backgroundColor = this.variant.replace('background-','');
|
||||
this.styleClasses = 'text-white bg-' + this.backgroundColor
|
||||
}
|
||||
},
|
||||
props: {
|
||||
header: {
|
||||
type: String,
|
||||
default: 'header:string'
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: 'text:string'
|
||||
},
|
||||
variant: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
footer: {
|
||||
type: String,
|
||||
default: 'footer:string'
|
||||
},
|
||||
value: {
|
||||
type: Number,
|
||||
default: 25
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,14 +0,0 @@
|
||||
### 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:
|
||||
> <widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" text="Income"
|
||||
:showLink="true" link="#"/>
|
||||
@@ -1,40 +0,0 @@
|
||||
<template>
|
||||
<b-card :no-body="true" footer-class="px-3 py-2">
|
||||
<b-card-body class="p-3 clearfix">
|
||||
<i :class="iconClasses" class="fa fa-cogs bg-primary p-3 font-2xl mr-3 float-left"></i>
|
||||
<div class="h5 text-primary mb-0 mt-2">{{header}}</div>
|
||||
<div class="text-muted text-uppercase font-weight-bold font-xs">{{text}}</div>
|
||||
</b-card-body>
|
||||
<div slot="footer" v-if="showLink">
|
||||
<b-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></b-link>
|
||||
</div>
|
||||
</b-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Widget02',
|
||||
props: {
|
||||
iconClasses: {
|
||||
type: String,
|
||||
default: 'fa fa-cogs bg-primary'
|
||||
},
|
||||
header: {
|
||||
type: String,
|
||||
default: 'header:string'
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: 'text:string'
|
||||
},
|
||||
showLink: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
link: {
|
||||
type: String,
|
||||
default: '#'
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,11 +0,0 @@
|
||||
### 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:
|
||||
> <widget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary px-5"/>
|
||||
@@ -1,29 +0,0 @@
|
||||
<template>
|
||||
<b-card :no-body="true">
|
||||
<b-card-body class="p-0 clearfix">
|
||||
<i :class="iconClasses" class="p-4 font-2xl mr-3 float-left"></i>
|
||||
<div class="h5 text-primary mb-0 pt-3">{{header}}</div>
|
||||
<div class="text-muted text-uppercase font-weight-bold font-xs">{{text}}</div>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Widget03',
|
||||
props: {
|
||||
iconClasses: {
|
||||
type: String,
|
||||
default: 'fa fa-cogs bg-primary'
|
||||
},
|
||||
header: {
|
||||
type: String,
|
||||
default: 'header:string'
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: 'text:string'
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,15 +0,0 @@
|
||||
### 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 default slot for placing data chart.
|
||||
|
||||
prop | default
|
||||
--- | ---
|
||||
type | `facebook`
|
||||
rightHeader | `'rightHeader:string'`
|
||||
rightFooter | `'rightFooter:string'`
|
||||
leftHeader | `'leftHeader:string'`
|
||||
leftFooter | `'leftFooter:string'`
|
||||
|
||||
|
||||
#### Example:
|
||||
> <widget04 type="linkedin" rightHeader="500+" rightFooter="contracts"
|
||||
> leftHeader="292" leftFooter="feeds"/>
|
||||
@@ -1,48 +0,0 @@
|
||||
<template>
|
||||
<div class="brand-card">
|
||||
<div :class="'bg-' + type" class="brand-card-header">
|
||||
<i class="fa" :class="'fa-'+ type"></i>
|
||||
<div class="chart-wrapper">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
<div class="brand-card-body">
|
||||
<div>
|
||||
<div class="text-value">{{rightHeader}}</div>
|
||||
<div class="text-uppercase text-muted small">{{rightFooter}}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-value">{{leftHeader}}</div>
|
||||
<div class="text-uppercase text-muted small">{{leftFooter}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Widget04',
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: 'facebook'
|
||||
},
|
||||
rightHeader: {
|
||||
type: String,
|
||||
default: 'rightHeader:string'
|
||||
},
|
||||
rightFooter: {
|
||||
type: String,
|
||||
default: 'rightFooter:string'
|
||||
},
|
||||
leftHeader: {
|
||||
type: String,
|
||||
default: 'leftHeader:string'
|
||||
},
|
||||
leftFooter: {
|
||||
type: String,
|
||||
default: 'leftFooter:string'
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,15 +0,0 @@
|
||||
### Widget05
|
||||
|
||||
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 | `success`
|
||||
value | `30`
|
||||
iconClasses | `icon-people`
|
||||
header| `header:string`
|
||||
text | `text:string`
|
||||
|
||||
> <widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="background-warning"/>
|
||||
@@ -1,51 +0,0 @@
|
||||
<template>
|
||||
<b-card :class="styleClasses">
|
||||
<div class="h1 text-muted text-right mb-4">
|
||||
<i :class="iconClasses"></i>
|
||||
</div>
|
||||
<div class="h4 mb-0">{{header}}</div>
|
||||
<small class="text-muted text-uppercase font-weight-bold">{{text}}</small>
|
||||
<b-progress height={} :variant="variant" :value="value"
|
||||
:class="[backgroundColor ? 'progress-white' : '', 'progress-xs my-3 mb-0']"/>
|
||||
</b-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Widget05',
|
||||
data () {
|
||||
return{
|
||||
backgroundColor: '',
|
||||
styleClasses: '',
|
||||
}
|
||||
},
|
||||
created () {
|
||||
if(this.variant.includes('background')){
|
||||
this.backgroundColor = this.variant.replace('background-','');
|
||||
this.styleClasses = 'text-white bg-' + this.backgroundColor
|
||||
}
|
||||
},
|
||||
props: {
|
||||
iconClasses: {
|
||||
type: String,
|
||||
default: 'icon-people'
|
||||
},
|
||||
header: {
|
||||
type: String,
|
||||
default: 'header:string'
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: 'text:string'
|
||||
},
|
||||
variant: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
value: {
|
||||
type: Number,
|
||||
default: 25
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,21 +0,0 @@
|
||||
### Widget06
|
||||
|
||||
This widget can style is defined by cardClasses. Inside component there is additional slot for chart (name="chart").
|
||||
|
||||
prop | default
|
||||
--- | ---
|
||||
cardClasses | `''`
|
||||
header| `header:string`
|
||||
text | `text:string`
|
||||
|
||||
> <widget06 cardClasses="bg-primary" header="9.823" text="Members online">
|
||||
<b-dropdown class="float-right" variant="transparent p-0" right>
|
||||
<template slot="button-content">
|
||||
<i class="icon-settings"></i>
|
||||
</template>
|
||||
<b-dropdown-item>Action</b-dropdown-item>
|
||||
<b-dropdown-item>Another action</b-dropdown-item>
|
||||
<b-dropdown-item>Something else here...</b-dropdown-item>
|
||||
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</widget06>
|
||||
@@ -1,39 +0,0 @@
|
||||
<template>
|
||||
<b-card no-body :class="cardClasses">
|
||||
<b-card-body class="pb-0">
|
||||
<slot name='dropdown'></slot>
|
||||
<h4 class="mb-0">{{header}}</h4>
|
||||
<p>{{text}}</p>
|
||||
</b-card-body>
|
||||
<div class="chart-wrapper">
|
||||
<slot name='chart'></slot>
|
||||
</div>
|
||||
</b-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Widget06',
|
||||
data () {
|
||||
return{
|
||||
backgroundColor: '',
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
props: {
|
||||
cardClasses: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
header: {
|
||||
type: String,
|
||||
default: 'header:string'
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: 'text:string'
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,19 +0,0 @@
|
||||
### Widget07
|
||||
|
||||
This widget can style is defined by cardClasses. Inside component there is default slot for additional data (i.e. chart).
|
||||
|
||||
prop | default
|
||||
--- | ---
|
||||
cardClasses | `'bg-primary'`
|
||||
rightHeader | `'rightHeader:string'`
|
||||
rightFooter | `'rightFooter:string'`
|
||||
leftHeader | `'leftHeader:string'`
|
||||
leftFooter | `'leftFooter:string'`
|
||||
|
||||
> <widget07 rightHeader='SALE' rightFooter='Today 6:43 AM'
|
||||
leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
|
||||
<line-chart1 style="height:40px" chartId="widget07_line1" label='Sales'
|
||||
:data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' />
|
||||
<bar-chart1 style="height:40px" chartId="widget07_bar1" label='Sales'
|
||||
:data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'/>
|
||||
</widget07>
|
||||
@@ -1,49 +0,0 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<div :class="cardClasses" class="card-header">
|
||||
<div class="font-weight-bold">
|
||||
<span>{{rightHeader}}</span>
|
||||
<span class="float-right">{{leftHeader}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
<small>{{rightFooter}}</small>
|
||||
</span>
|
||||
<span class="float-right">
|
||||
<small>{{leftFooter}}</small>
|
||||
</span>
|
||||
</div>
|
||||
<div class="chart-wrapper">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Widget07',
|
||||
props: {
|
||||
cardClasses: {
|
||||
type: String,
|
||||
default: 'bg-primary'
|
||||
},
|
||||
rightHeader: {
|
||||
type: String,
|
||||
default: 'rightHeader:string'
|
||||
},
|
||||
rightFooter: {
|
||||
type: String,
|
||||
default: 'rightFooter:string'
|
||||
},
|
||||
leftHeader: {
|
||||
type: String,
|
||||
default: 'leftHeader:string'
|
||||
},
|
||||
leftFooter: {
|
||||
type: String,
|
||||
default: 'leftFooter:string'
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,19 +0,0 @@
|
||||
### Widget08
|
||||
|
||||
This widget can style is defined by cardClasses. Inside component there is default slot for additional data (i.e. chart).
|
||||
|
||||
prop | default
|
||||
--- | ---
|
||||
cardClasses | `'bg-primary'`
|
||||
rightHeader | `'rightHeader:string'`
|
||||
rightFooter | `'rightFooter:string'`
|
||||
leftHeader | `'leftHeader:string'`
|
||||
leftFooter | `'leftFooter:string'`
|
||||
|
||||
> <widget07 rightHeader='SALE' rightFooter='Today 6:43 AM'
|
||||
leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
|
||||
<line-chart1 style="height:40px" chartId="widget07_line1" label='Sales'
|
||||
:data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' />
|
||||
<bar-chart1 style="height:40px" chartId="widget07_bar1" label='Sales'
|
||||
:data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'/>
|
||||
</widget07>
|
||||
@@ -1,31 +0,0 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="card-body text-center">
|
||||
<div class="text-muted small text-uppercase font-weight-bold">{{header}}</div>
|
||||
<div class="h2 py-3">{{text}}</div>
|
||||
<div class="chart-wrapper">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Widget08',
|
||||
props: {
|
||||
cardClasses: {
|
||||
type: String,
|
||||
default: 'bg-primary'
|
||||
},
|
||||
header: {
|
||||
type: String,
|
||||
default: 'header:string'
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: 'text:string'
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user