feat: Bootstrap Vue components changed to Coreui-Vue components
This commit is contained in:
woothu
+114
-61
@@ -1,8 +1,14 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col sm="12">
|
||||
<b-card header="test1 ">
|
||||
<CRow>
|
||||
<CCol sm="12">
|
||||
<CCard header="test1 ">
|
||||
|
||||
<!-- <CTable :items="items.slice(0)"
|
||||
noSorting
|
||||
striped
|
||||
/> -->
|
||||
|
||||
<CTable :items="items.slice(0)"
|
||||
:fields="fields"
|
||||
:activePage="page"
|
||||
@@ -14,7 +20,7 @@
|
||||
smalls
|
||||
noPagination
|
||||
@row-clicked2="(item, index) => toggleDetails(index)"
|
||||
loading
|
||||
loadings
|
||||
hover
|
||||
striped
|
||||
optionsRow="onlyFilter2"
|
||||
@@ -39,20 +45,21 @@
|
||||
<td slot="status" slot-scope="{item}">
|
||||
<CBadge :variant="getBadge(item.status)">{{item.status}}</CBadge>
|
||||
</td>
|
||||
<!-- <td slot="show_details" slot-scope="{item, index}">
|
||||
<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"
|
||||
</td>
|
||||
<td slot="index-col"
|
||||
slot-scope="{index}"
|
||||
@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> -->
|
||||
</td>
|
||||
<CCollapse :show="details.includes(index)"
|
||||
slot="details"
|
||||
slot-scope="{item, index}">
|
||||
@@ -67,55 +74,94 @@
|
||||
align="center"
|
||||
size="lg"
|
||||
/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col sm="12">
|
||||
<b-card header="test2">
|
||||
<CTable :items="items.slice(0)"
|
||||
:fields="fields"
|
||||
:perPage="5"
|
||||
indexCol="onlyIndexes2"
|
||||
filterRow
|
||||
optionsRow="onlyFilter2"
|
||||
:paginationProps="{align:'center', size:'lg'}"
|
||||
noPagination
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm="12">
|
||||
<CCard header="test2">
|
||||
<CTable
|
||||
:items="items.slice(0)"
|
||||
:fields="fields"
|
||||
:perPage="5"
|
||||
indexCol="onlyCleaner"
|
||||
filterRow
|
||||
optionsRow="onlyFilter"
|
||||
:paginationProps="{align:'center', size:'lg'}"
|
||||
>
|
||||
<td slot="status" slot-scope="{item}">
|
||||
<CBadge :variant="getBadge(item.status)">{{item.status}}</CBadge>
|
||||
</td>
|
||||
</CTable>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
|
||||
<b-row @click="test">
|
||||
<b-col lg="6">
|
||||
<old-table caption="<i class='fa fa-align-justify' items='{username: 'Samppa Nori', registered: '2012/01/01', role: 'Member', status: 'Active'}' ></i> Simple Table"></old-table>
|
||||
</b-col><!--/.col-->
|
||||
<CRow>
|
||||
<CCol lg="6">
|
||||
<CTableWrapper
|
||||
:items="getItems()"
|
||||
caption="<i class='fa fa-align-justify'></i> Simple Table"
|
||||
/>
|
||||
</CCol><!--/.col-->
|
||||
|
||||
<b-col lg="6">
|
||||
<old-table striped caption="<i class='fa fa-align-justify'></i> Striped Table"></old-table>
|
||||
</b-col><!--/.col-->
|
||||
</b-row><!--/.row-->
|
||||
<CCol lg="6">
|
||||
<CTableWrapper
|
||||
:items="getItems()"
|
||||
striped
|
||||
caption="<i class='fa fa-align-justify'></i> Striped Table"
|
||||
/>
|
||||
</CCol><!--/.col-->
|
||||
</CRow><!--/.row-->
|
||||
|
||||
<b-row>
|
||||
<b-col lg="6">
|
||||
<old-table small caption="<i class='fa fa-align-justify'></i> Condensed Table"></old-table>
|
||||
</b-col><!--/.col-->
|
||||
<CRow>
|
||||
<CCol lg="6">
|
||||
<CTableWrapper
|
||||
:items="getItems()"
|
||||
small
|
||||
caption="<i class='fa fa-align-justify'></i> Condensed Table"
|
||||
/>
|
||||
</CCol><!--/.col-->
|
||||
|
||||
<b-col lg="6">
|
||||
<old-table fixed bordered caption="<i class='fa fa-align-justify'></i> Bordered Table"></old-table>
|
||||
</b-col><!--/.col-->
|
||||
</b-row><!--/.row-->
|
||||
<CCol lg="6">
|
||||
<CTableWrapper
|
||||
:items="getItems()"
|
||||
fixed
|
||||
bordered
|
||||
caption="<i class='fa fa-align-justify'></i> Bordered Table"
|
||||
/>
|
||||
</CCol><!--/.col-->
|
||||
</CRow><!--/.row-->
|
||||
|
||||
<b-row>
|
||||
<b-col sm="12">
|
||||
<old-table hover striped bordered small fixed caption="<i class='fa fa-align-justify'></i> Combined All Table"></old-table>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<CRow>
|
||||
<CCol sm="12">
|
||||
<CTableWrapper
|
||||
:items="getItems()"
|
||||
hover
|
||||
striped
|
||||
bordered
|
||||
small
|
||||
fixed
|
||||
caption="<i class='fa fa-align-justify'></i> Combined All Table"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
<CRow>
|
||||
<CCol sm="12">
|
||||
<CTableWrapper
|
||||
:items="getItems()"
|
||||
hover
|
||||
striped
|
||||
bordered
|
||||
small
|
||||
fixed
|
||||
dark
|
||||
caption="<i class='fa fa-align-justify'></i> Combined All Table"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
|
||||
</div>
|
||||
@@ -123,7 +169,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import oldTable from './Table.vue'
|
||||
import CTableWrapper from './Table.vue'
|
||||
|
||||
// const fields = ['username', 'registered', 'role']
|
||||
const fields = [
|
||||
@@ -134,17 +180,17 @@ const fields = [
|
||||
// { 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', _classes: 'table-success2',_cellClasses: {role: 'table-success'}, role: 'Member', status: 'Active'},
|
||||
{number:11.1, username: '<b>Samppa Nori</b>', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||
{number:1.3, username: 'Estavan Lykos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||
{number:1.3, username: 'Chetan Mohamed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||
{number:1.3, username: 'Derick Maximinus', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
||||
{number:1.3, username: 'Friderik Dávid', registered: '2012/01/21', role: 'Staff', status: 'Active'},
|
||||
{number:1.3, username: 'Yiorgos Avraamu', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||
{number:1.3, username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||
{number:1.3, username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned', _classes: 'table-success'},
|
||||
{number:1.3, username: 'Quintin Ed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||
{number:1.3, username: 'Enéas Kwadwo', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
||||
{number:1.3, username: 'Agapetus Tadeáš', registered: '2012/01/21', role: 'Staff', status: 'Active'},
|
||||
{number:1.3, username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||
{number:1.3, username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active', _classes: 'table-info'},
|
||||
{number:1.3, username: 'Nehemiah Tatius', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||
{number:1.3, username: 'Ebbe Gemariah', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||
{number:1.3, username: 'Eustorgios Amulius', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
||||
@@ -156,14 +202,14 @@ const items = [
|
||||
{number:1.3, username: 'Hiroto Šimun', registered: '2012/01/21', role: 'Staff', status: 'Active'},
|
||||
{number:1.3, username: 'Vishnu Serghei', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||
{number: 0.9, username: 'Zbyněk Phoibos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||
{number: 1.3, username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||
{number: 1.3, username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive', _classes: 'table-danger'},
|
||||
{number: 1.2, username: 'Félix Troels', registered: '2012/03/21', role: 'Staff', status: 'Active'},
|
||||
{number: 11.1, username: 'Aulus Agmundr', registered: '2012/01/01', role: 'Member', status: 'Pending'}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'tables',
|
||||
components: { oldTable },
|
||||
components: { CTableWrapper },
|
||||
data () {
|
||||
return {
|
||||
items: items,
|
||||
@@ -182,22 +228,29 @@ export default {
|
||||
: status === 'Pending' ? 'warning'
|
||||
: status === 'Banned' ? 'danger' : 'primary'
|
||||
},
|
||||
test () {
|
||||
this.$refs.table.changeSort('username')
|
||||
this.$refs.table.filter = 't'
|
||||
// console.log(this.items)
|
||||
},
|
||||
test3 (item, index) {
|
||||
alert(index + ' - ' + item.username)
|
||||
// console.log()
|
||||
// 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))
|
||||
let temp = array[i]
|
||||
array[i] = array[j]
|
||||
array[j] = temp
|
||||
}
|
||||
return array
|
||||
},
|
||||
log(val) {
|
||||
console.log(val)
|
||||
},
|
||||
toggleDetails (index) {
|
||||
// console.log('hehe')
|
||||
const position = this.details.indexOf(index)
|
||||
position !== -1 ? this.details.splice(position, 1) : this.details.push(index)
|
||||
},
|
||||
getItems () {
|
||||
return this.shuffleArray(this.items.slice(0))
|
||||
}
|
||||
}
|
||||
// computed: {
|
||||
|
||||
Reference in New Issue
Block a user