refactor: Dashboard, Collapses, Popovers, Tooltips, Table refreshes.
This commit is contained in:
woothu
@@ -1,44 +1,64 @@
|
||||
<template>
|
||||
<CDropdown right
|
||||
nav
|
||||
no-caret
|
||||
no-popper
|
||||
addMenuClasses="dropdown-menu-right"
|
||||
<CDropdown
|
||||
right
|
||||
nav
|
||||
noCaret
|
||||
noPopper
|
||||
addMenuClasses="dropdown-menu-right"
|
||||
>
|
||||
<img slot="buttonContent"
|
||||
src="img/avatars/6.jpg"
|
||||
class="img-avatar"
|
||||
alt="admin@bootstrapmaster.com"
|
||||
/>
|
||||
<CDropdownHeader tag="div" class="text-center"><strong>Account</strong></CDropdownHeader>
|
||||
<CDropdownItem><i class="fa fa-bell-o" /> Updates
|
||||
<template #buttonContent>
|
||||
<img
|
||||
src="img/avatars/6.jpg"
|
||||
class="img-avatar"
|
||||
alt="admin@bootstrapmaster.com"
|
||||
/>
|
||||
</template>
|
||||
<CDropdownHeader tag="div" class="text-center">
|
||||
<strong>Account</strong>
|
||||
</CDropdownHeader>
|
||||
<CDropdownItem>
|
||||
<i class="fa fa-bell-o" /> Updates
|
||||
<CBadge variant="info" additionalClasses="hehe">{{ itemsCount }}</CBadge>
|
||||
</CDropdownItem>
|
||||
<CDropdownItem><i class="fa fa-envelope-o" /> Messages
|
||||
<CDropdownItem>
|
||||
<i class="fa fa-envelope-o" /> Messages
|
||||
<CBadge variant="success">{{ itemsCount }}</CBadge>
|
||||
</CDropdownItem>
|
||||
<CDropdownItem><i class="fa fa-tasks" /> Tasks
|
||||
<CDropdownItem>
|
||||
<i class="fa fa-tasks" /> Tasks
|
||||
<CBadge variant="danger">{{ itemsCount }}</CBadge>
|
||||
</CDropdownItem>
|
||||
<CDropdownItem><i class="fa fa-comments" /> Comments
|
||||
<CDropdownItem>
|
||||
<i class="fa fa-comments" /> Comments
|
||||
<CBadge variant="warning">{{ itemsCount }}</CBadge>
|
||||
</CDropdownItem>
|
||||
<CDropdownHeader
|
||||
tag="div"
|
||||
class="text-center">
|
||||
class="text-center"
|
||||
>
|
||||
<strong>Settings</strong>
|
||||
</CDropdownHeader>
|
||||
<CDropdownItem><i class="fa fa-user" /> Profile</CDropdownItem>
|
||||
<CDropdownItem><i class="fa fa-wrench" /> Settings</CDropdownItem>
|
||||
<CDropdownItem><i class="fa fa-usd" /> Payments
|
||||
<CDropdownItem>
|
||||
<i class="fa fa-user" /> Profile
|
||||
</CDropdownItem>
|
||||
<CDropdownItem>
|
||||
<i class="fa fa-wrench" /> Settings
|
||||
</CDropdownItem>
|
||||
<CDropdownItem>
|
||||
<i class="fa fa-usd" /> Payments
|
||||
<CBadge variant="secondary">{{ itemsCount }}</CBadge>
|
||||
</CDropdownItem>
|
||||
<CDropdownItem><i class="fa fa-file" /> Projects
|
||||
<CDropdownItem>
|
||||
<i class="fa fa-file" /> Projects
|
||||
<CBadge variant="primary">{{ itemsCount }}</CBadge>
|
||||
</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem><i class="fa fa-shield" /> Lock Account</CDropdownItem>
|
||||
<CDropdownItem><i class="fa fa-lock" /> Logout</CDropdownItem>
|
||||
<CDropdownItem>
|
||||
<i class="fa fa-shield" /> Lock Account
|
||||
</CDropdownItem>
|
||||
<CDropdownItem>
|
||||
<i class="fa fa-lock" /> Logout
|
||||
</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -186,23 +186,23 @@
|
||||
<CCol sm="12" lg="6">
|
||||
<CRow>
|
||||
<CCol sm="6">
|
||||
<Callout variant="info">
|
||||
<CCallout variant="info">
|
||||
<small class="text-muted">New Clients</small><br>
|
||||
<strong class="h4">9,123</strong>
|
||||
<div :style="{ top: '-10px'}">
|
||||
<!--<CalloutChartExample :data="[35, 23, 56, 22, 97, 23, 64]" variant="#20a8d8" width="80" height="30" />-->
|
||||
<CalloutChartExample :data="[35, 23, 56, 22, 97, 23, 64]" variant="info" width="80" height="30" />
|
||||
</div>
|
||||
</Callout>
|
||||
</CCallout>
|
||||
</CCol>
|
||||
<CCol sm="6">
|
||||
<Callout variant="danger">
|
||||
<CCallout variant="danger">
|
||||
<small class="text-muted">Recurring Clients</small><br>
|
||||
<strong class="h4">22,643</strong>
|
||||
<div :style="{ top: '-10px'}">
|
||||
<CalloutChartExample :data="[65, 59, 84, 84, 51, 55, 40]" variant="danger" width="80" height="30" />
|
||||
</div>
|
||||
</Callout>
|
||||
</CCallout>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<hr class="mt-0">
|
||||
@@ -296,22 +296,22 @@
|
||||
<CCol sm="12" lg="6">
|
||||
<CRow>
|
||||
<CCol sm="6">
|
||||
<Callout variant="warning">
|
||||
<CCallout variant="warning">
|
||||
<small class="text-muted">Pageviews</small><br>
|
||||
<strong class="h4">78,623</strong>
|
||||
<div :style="{ top: '-10px'}">
|
||||
<CalloutChartExample :data="[35, 23, 56, 22, 97, 23, 64]" variant="#f8cb00" width="80" height="30"/>
|
||||
</div>
|
||||
</Callout>
|
||||
</CCallout>
|
||||
</CCol>
|
||||
<CCol sm="6">
|
||||
<Callout variant="success">
|
||||
<CCallout variant="success">
|
||||
<small class="text-muted">Organic</small><br>
|
||||
<strong class="h4">49,123</strong>
|
||||
<div :style="{ top: '-10px'}">
|
||||
<CalloutChartExample :data="[65, 59, 84, 84, 51, 55, 40]" variant="#4dbd74" width="80" height="30" />
|
||||
</div>
|
||||
</Callout>
|
||||
</CCallout>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<hr class="mt-0">
|
||||
|
||||
@@ -13,12 +13,16 @@
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<CButton v-b-toggle.collapse1 variant="primary">Toggle Collapse</CButton>
|
||||
<CCollapse id="collapse1" class="mt-2">
|
||||
<CButton id="collapse1" variant="primary">
|
||||
Toggle Collapse
|
||||
</CButton>
|
||||
<CCollapse toggler="collapse1" class="mt-2">
|
||||
<CCard>
|
||||
<p class="card-text">Collapse contents Here</p>
|
||||
<CButton v-b-toggle.collapse1_inner size="sm">Toggle Inner Collapse</CButton>
|
||||
<CCollapse id=collapse1_inner class="mt-2">
|
||||
<CButton id="collapse2" size="sm">
|
||||
Toggle Inner Collapse
|
||||
</CButton>
|
||||
<CCollapse toggler="collapse2" class="mt-2">
|
||||
<CCard>Hello!</CCard>
|
||||
</CCollapse>
|
||||
</CCard>
|
||||
@@ -26,19 +30,16 @@
|
||||
</div>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol cols="12" md="6">
|
||||
<!-- <CCol cols="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>v-b-toggle</code> directive</small>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<!-- Using modifiers -->
|
||||
<CButton v-b-toggle.collapse2 class="m-1">Toggle Collapse</CButton>
|
||||
|
||||
<!-- Using value -->
|
||||
<CButton v-b-toggle="'collapse2'" class="m-1">Toggle Collapse</CButton>
|
||||
|
||||
<!-- element to collapse -->
|
||||
<CCollapse id="collapse2">
|
||||
<CCard>
|
||||
I am collapsible content!
|
||||
@@ -92,10 +93,8 @@
|
||||
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>multiple elements</small>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<!-- Single button triggers two CCollapse components -->
|
||||
<CButton v-b-toggle.collapseA.collapseB>Toggle Both Collapse A and B</CButton>
|
||||
|
||||
<!-- elements to collapse -->
|
||||
<CCollapse id="collapseA" class="mt-2">
|
||||
<CCard>
|
||||
I am collapsable content A!
|
||||
@@ -115,7 +114,7 @@
|
||||
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small><code>accordion</code> support</small>
|
||||
</CCardHeader>
|
||||
<div role="tablist">
|
||||
<CCard noWrapper class="mb-1">
|
||||
<CCard class="mb-1">
|
||||
<CCardHeader slot="header" class="p-1" role="tab">
|
||||
<CButton block href="#" v-b-toggle.accordion1 variant="info">Accordion 1</CButton>
|
||||
</CCardHeader>
|
||||
@@ -130,7 +129,7 @@
|
||||
</CCardBody>
|
||||
</CCollapse>
|
||||
</CCard>
|
||||
<CCard noWrapper class="mb-1">
|
||||
<CCard class="mb-1">
|
||||
<CCardHeader slot="header" class="p-1" role="tab">
|
||||
<CButton block href="#" v-b-toggle.accordion2 variant="info">Accordion 2</CButton>
|
||||
</CCardHeader>
|
||||
@@ -142,7 +141,7 @@
|
||||
</CCardBody>
|
||||
</CCollapse>
|
||||
</CCard>
|
||||
<CCard noWrapper class="mb-1">
|
||||
<CCard class="mb-1">
|
||||
<CCardHeader slot="header" class="p-1" role="tab">
|
||||
<CButton block href="#" v-b-toggle.accordion3 variant="info">Accordion 3</CButton>
|
||||
</CCardHeader>
|
||||
@@ -156,7 +155,7 @@
|
||||
</CCard>
|
||||
</div>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CCol> -->
|
||||
</CRow>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -11,10 +11,11 @@
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CRow>
|
||||
<CCol cols="6">
|
||||
<CCol cols="4">
|
||||
<div class="my-3 text-center">
|
||||
<CButton
|
||||
v-c-popover.hover="{
|
||||
variant="primary"
|
||||
v-c-popover="{
|
||||
header: 'Popover header',
|
||||
content: 'I am popover content!'
|
||||
}"
|
||||
@@ -23,16 +24,31 @@
|
||||
</CButton>
|
||||
</div>
|
||||
</CCol>
|
||||
<CCol cols="6">
|
||||
<CCol cols="4">
|
||||
<div class="my-3 text-center">
|
||||
<CButton
|
||||
variant="primary"
|
||||
v-c-popover.hover.active="{
|
||||
v-c-popover="{
|
||||
header: 'Popover!',
|
||||
content: 'I start <strong>open</strong>'
|
||||
content: 'I start <strong>open</strong>',
|
||||
active: true
|
||||
}"
|
||||
text="Hover me"
|
||||
/>
|
||||
</div>
|
||||
</CCol>
|
||||
<CCol cols="4">
|
||||
<div class="my-3 text-center">
|
||||
<CButton
|
||||
variant="primary"
|
||||
v-c-popover.click="{
|
||||
header: 'Popover!',
|
||||
content: 'I am showing on click and hiding on click outside tooltip!',
|
||||
placement: 'bottom',
|
||||
active: true
|
||||
}"
|
||||
>
|
||||
Button
|
||||
Click me
|
||||
</CButton>
|
||||
</div>
|
||||
</CCol>
|
||||
@@ -53,7 +69,7 @@
|
||||
>
|
||||
<CButton
|
||||
variant="primary"
|
||||
v-c-popover.hover.focus="{
|
||||
v-c-popover="{
|
||||
header: 'Popover!',
|
||||
content: `Placement ${placement}`,
|
||||
placement
|
||||
|
||||
+57
-94
@@ -2,82 +2,61 @@
|
||||
<div class="animated fadeIn">
|
||||
<CRow>
|
||||
<CCol sm="12">
|
||||
<CCard header="test1 ">
|
||||
|
||||
<!-- <CTable :items="items.slice(0)"
|
||||
noSorting
|
||||
striped
|
||||
/> -->
|
||||
|
||||
<CCard header="CTable power presentation">
|
||||
<CTable :items="items.slice(0)"
|
||||
:fields="fields"
|
||||
:activePage="page"
|
||||
@pages-change="val => pages = val"
|
||||
:perPage="5"
|
||||
ref="table"
|
||||
indexCol="onlyFilter"
|
||||
filterRow
|
||||
smalls
|
||||
noPagination
|
||||
@row-clicked2="(item, index) => toggleDetails(index)"
|
||||
loadings
|
||||
hover
|
||||
striped
|
||||
optionsRow="onlyFilter2"
|
||||
:defaultSorter="{ name:'username', direction:'desc'}"
|
||||
defaultTableFilter="staff"
|
||||
:defaultColumnFilter="{username:'zby'}"
|
||||
:fields="fields"
|
||||
:perPage="6"
|
||||
indexColumn
|
||||
filterRow
|
||||
optionsRow
|
||||
loadings
|
||||
hover
|
||||
:defaultSorter="{ name:'username', direction:'desc'}"
|
||||
:defaultColumnFilter="{ role:'staff' }"
|
||||
>
|
||||
<template slot="status-header" slot-scope="{item}">
|
||||
Status scoped slot
|
||||
</template>
|
||||
|
||||
<!-- <tempalate slot="sorting-icon" slot-scope={state}>
|
||||
{{state}}
|
||||
</tempalate> -->
|
||||
<!-- <td slot="status-filter" slot-scope="{clear, colName}" @click="clear">
|
||||
<i class="cui-ban icons text-danger d-block mt-2 ml-1"></i>
|
||||
</td> -->
|
||||
<!-- <div slot="underTable">hehe</div>
|
||||
<caption slot="caption" style="caption-side: top;">
|
||||
This is a table caption at the top.
|
||||
</caption> -->
|
||||
<td slot="status" slot-scope="{item}">
|
||||
<CBadge :variant="getBadge(item.status)">{{item.status}}</CBadge>
|
||||
</td>
|
||||
<td slot="show_details" slot-scope="{item, index}">
|
||||
<button class="btn btn-primary" @click="toggleDetails(index)">
|
||||
{{details.includes(index) ? 'Hide' : 'Show'}}
|
||||
</button>
|
||||
</td>
|
||||
<td slot="index-col"
|
||||
slot-scope="{index}"
|
||||
<template #index-col="{index}">
|
||||
<td
|
||||
@click="toggleDetails(index)"
|
||||
style="cursor:pointer"
|
||||
class="text-center"
|
||||
>
|
||||
<i class="icons font-lg d-block cui-chevron-right"
|
||||
style="transition: transform 0.4s"
|
||||
:style="details.includes(index) ? 'transform:rotate(90deg)': ''"></i>
|
||||
</td>
|
||||
<CCollapse :show="details.includes(index)"
|
||||
slot="details"
|
||||
slot-scope="{item, index}">
|
||||
<CCardBody>
|
||||
{{index + 1}} - {{item}}
|
||||
</CCardBody>
|
||||
</CCollapse>
|
||||
>
|
||||
<i
|
||||
class="icons font-lg d-block cui-chevron-right"
|
||||
style="transition: transform 0.4s"
|
||||
:style="details.includes(index) ? 'transform:rotate(90deg)': ''"
|
||||
></i>
|
||||
</td>
|
||||
</template>
|
||||
<template #status="{item}">
|
||||
<td>
|
||||
<CBadge :variant="getBadge(item.status)">
|
||||
{{item.status}}
|
||||
</CBadge>
|
||||
</td>
|
||||
</template>
|
||||
<template #show_details="{item, index}">
|
||||
<td class="py-2">
|
||||
<CButton
|
||||
variant="outline-primary"
|
||||
square
|
||||
size="sm"
|
||||
@click="toggleDetails(index)"
|
||||
:text="details.includes(index) ? 'Hide' : 'Show'"
|
||||
/>
|
||||
</td>
|
||||
</template>
|
||||
<template #details="{item, index}">
|
||||
<CCollapse :show="details.includes(index)">
|
||||
<CCardBody>
|
||||
{{index + 1}} - {{item}}
|
||||
</CCardBody>
|
||||
</CCollapse>
|
||||
</template>
|
||||
</CTable>
|
||||
<CPagination v-show="pages > 1"
|
||||
v-model="page"
|
||||
:pages="pages"
|
||||
align="center"
|
||||
size="lg"
|
||||
/>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<!-- <CRow>
|
||||
<CCol sm="12">
|
||||
<CCard header="test2">
|
||||
<CTable
|
||||
@@ -86,8 +65,8 @@
|
||||
:perPage="5"
|
||||
indexCol="onlyCleaner"
|
||||
filterRow
|
||||
optionsRow="onlyFilter"
|
||||
:paginationProps="{align:'center', size:'lg'}"
|
||||
optionsRow="onlyFiltesr"
|
||||
:paginationProps="{align:'center'}"
|
||||
>
|
||||
<td slot="status" slot-scope="{item}">
|
||||
<CBadge :variant="getBadge(item.status)">{{item.status}}</CBadge>
|
||||
@@ -95,7 +74,7 @@
|
||||
</CTable>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CRow> -->
|
||||
|
||||
|
||||
<CRow>
|
||||
@@ -171,13 +150,12 @@
|
||||
<script>
|
||||
import CTableWrapper from './Table.vue'
|
||||
|
||||
// const fields = ['username', 'registered', 'role']
|
||||
const fields = [
|
||||
{ key: 'username', label: 'UsErNaMe', _style:'width:40%'},
|
||||
{ key: 'registered' , style:'width:20%', noSorting: true, noFilter: true},
|
||||
{ key: 'role', _classes: 'table-danger2', _style:'width:20%; color:bluse'},
|
||||
{ key: 'status' },
|
||||
// { key: 'show_details' , label:'',_style:'width:1%', noSorting: true, noFilter: true },
|
||||
{ key: 'username', _style:'width:40%' },
|
||||
{ key: 'registered' , style:'width:20%' },
|
||||
{ key: 'role', _style:'width:20%;' },
|
||||
{ key: 'status', _style:'width:20%;' },
|
||||
{ key: 'show_details' , label:'', _style:'width:1%', noSorting: true, noFilter: true },
|
||||
]
|
||||
const items = [
|
||||
{number:11.1, username: '<b>Samppa Nori</b>', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||
@@ -215,8 +193,6 @@ export default {
|
||||
items: items,
|
||||
fields: fields,
|
||||
page: 1,
|
||||
page2: 1,
|
||||
itemsNumber: 0,
|
||||
pages: null,
|
||||
details: []
|
||||
}
|
||||
@@ -224,15 +200,10 @@ export default {
|
||||
methods: {
|
||||
getBadge (status) {
|
||||
return status === 'Active' ? 'success'
|
||||
: status === 'Inactive' ? 'secondary'
|
||||
: status === 'Pending' ? 'warning'
|
||||
: status === 'Banned' ? 'danger' : 'primary'
|
||||
: status === 'Inactive' ? 'secondary'
|
||||
: status === 'Pending' ? 'warning'
|
||||
: status === 'Banned' ? 'danger' : 'primary'
|
||||
},
|
||||
// test () {
|
||||
// this.$refs.table.changeSort('username')
|
||||
// this.$refs.table.filter = 't'
|
||||
// // console.log(this.items)
|
||||
// },
|
||||
shuffleArray (array) {
|
||||
for (let i = array.length - 1; i > 0; i--) {
|
||||
let j = Math.floor(Math.random() * (i + 1))
|
||||
@@ -242,9 +213,6 @@ export default {
|
||||
}
|
||||
return array
|
||||
},
|
||||
log(val) {
|
||||
console.log(val)
|
||||
},
|
||||
toggleDetails (index) {
|
||||
const position = this.details.indexOf(index)
|
||||
position !== -1 ? this.details.splice(position, 1) : this.details.push(index)
|
||||
@@ -253,10 +221,5 @@ export default {
|
||||
return this.shuffleArray(this.items.slice(0))
|
||||
}
|
||||
}
|
||||
// computed: {
|
||||
// pages () {
|
||||
// return this.$refs.table.pages
|
||||
// }
|
||||
// }
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -13,17 +13,26 @@
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CRow>
|
||||
<CCol cols="6">
|
||||
<CCol cols="4">
|
||||
<div class="text-center my-3">
|
||||
<CButton v-c-tooltip.hover="'I am a tooltip!'">
|
||||
<CButton v-c-tooltip.hover.click="'I am a tooltip!'">
|
||||
Hover Me
|
||||
</CButton>
|
||||
</div>
|
||||
</CCol>
|
||||
<CCol cols="6">
|
||||
<CCol cols="4">
|
||||
<div class="text-center my-3">
|
||||
<CButton v-c-tooltip.hover.active="'I start open!'">
|
||||
Button
|
||||
<CButton v-c-tooltip="{content: 'I start open!', active:true }">
|
||||
Hover me
|
||||
</CButton>
|
||||
</div>
|
||||
</CCol>
|
||||
<CCol cols="4">
|
||||
<div class="text-center my-3">
|
||||
<CButton v-c-tooltip.click="
|
||||
'I am showing on click and hiding on click outside tooltip!'
|
||||
">
|
||||
Click me
|
||||
</CButton>
|
||||
</div>
|
||||
</CCol>
|
||||
@@ -135,10 +144,6 @@ export default {
|
||||
name: 'tooltips',
|
||||
data () {
|
||||
return {
|
||||
// show: true,
|
||||
// disabled: false,
|
||||
// smh: 0,
|
||||
// placement: 'bottom-end',
|
||||
placements: [
|
||||
'top-start', 'top', 'top-end',
|
||||
'bottom-start', 'bottom', 'bottom-end',
|
||||
|
||||
Reference in New Issue
Block a user