panel/baseui
1
0
Fork 0
Code Issues 8 Pull Requests Releases Wiki Activity

add table styles

Browse Source
This commit is contained in:
Anton Schubert
2017-08-29 21:47:25 +02:00
parent a759e65ead
commit 7cd9501f3d
10 changed files with 264 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

258
src/components/my-table.vue
View File

@@ -1,81 +1,193 @@
<template>
<div class="My-Table">
<table>
<thead>
<tr>
<th v-for="(c, i) in columns" :key="i">
<span @click="orderBy(c.orderBy)" v-if="c.orderBy">{{ c.heading }} V</span>
<span v-else>{{ c.heading }}</span>
</th>
</tr>
</thead>
<tbody is="transition-group" name="list">
<tr v-for="(r, ri) in rows" :key="ri">
<td v-for="(c, ci) in columns" :key="ci + 'c'">
<span v-if="c.prop">{{ getProp(r, c.prop) }}</span>
<span v-else-if="c.render">{{ c.render(r) }}</span>
</td>
</tr>
</tbody>
</table>
<div class="cms_table">
<div class="table_header">
<div class="table_row">
<div v-for="(col, i) in columns" :class="['table_cell', {['sortable']: col.orderBy}]" :key="i">
<div @click="orderBy(col.orderBy)" v-if="col.orderBy">
{{ col.heading }}
<i class="icon icon-angle-up" aria-hidden="true" v-if="currentOrderBy !== col.orderBy"></i>
<i class="icon icon-angle-circled-down" aria-hidden="true" v-else-if="currentOrderDesc"></i>
<i class="icon icon-angle-circled-up" aria-hidden="true" v-else></i>
</div>
<div v-else>{{ col.heading }}</div>
</div>
</div>
</div>
<div class="table_content" is="transition-group" name="list">
<div class="table_row" v-for="(row, ri) in rows" :key="ri">
<div class="table_cell" v-for="(col, ci) in columns" :key="ci + 'c'">
<div v-if="col.prop">{{ getProp(row, col.prop) }}</div>
<div v-else-if="col.render">{{ col.render(row) }}</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'My-Table',
props: {
columns: {
type: Array,
default() {
return [ ];
}
},
rows: {
type: Array,
default() {
return [ ];
}
}
},
data() {
return {
}
},
methods: {
orderBy(col) {
console.log(col);
this.$emit('sort', {
orderBy: col,
orderDesc: false
});
},
getProp(row, prop) {
let props = prop.split('.');
let val = row;
props.forEach((p) => {
if (typeof val == 'object') {
val = val[p];
}
});
return val;
}
}
}
export default {
name: 'My-Table',
props: {
currentOrderBy: {
type: String
},
currentOrderDesc: {
type: Boolean
},
columns: {
type: Array,
default() {
return [ ];
}
},
rows: {
type: Array,
default() {
return [ ];
}
}
},
data() {
return {
}
},
methods: {
orderBy(col) {
console.log(col);
this.$emit('sort', {
orderBy: col,
orderDesc: false
});
},
getProp(row, prop) {
let props = prop.split('.');
let val = row;
props.forEach((p) => {
if (typeof val == 'object') {
val = val[p];
}
});
return val;
}
}
}
</script>
<style>
.list-item {
display: inline-block;
margin-right: 10px;
}
.list-enter-active, .list-leave-active {
transition: all 1s;
}
.list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
opacity: 0;
transform: translateY(30px);
}
<style lang="less">
@import "../mixins";
.list-item {
display: inline-block;
margin-right: 10px;
}
.list-enter-active, .list-leave-active {
transition: all 0.2s;
}
.list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
opacity: 0;
transform: translateY(30px);
}
/*--------------------------------------------------------------
# Content Tables
--------------------------------------------------------------*/
.cms_table{
&>.table_header, &>.table_content{margin: 0px -25px;}
&>.table_header{
.table_row {background:none; font-size:13px; padding:10px 15px;}
.icon {font-size:14px;}
}
.table_row{
position: relative;
display: table;
width: 100%;
table-layout: fixed;
background: white;
padding: 10px 15px;
&:nth-child(even) {
background:#f5f3f4;
}
}
.table_cell {
display: table-cell;
vertical-align: middle;
padding:0px 10px;
&.sortable{
&:hover{
cursor: pointer;
}
}
}
/*.cell_checkbox {width:40px;}
.cell_image {width:120px; line-height:0;} .cell_image img {width:100%;}
.cell_title {position:relative;}
.cell_title a {color:#000;} .cell_title a:hover {color:#28b78d;}*/
/* === Other cell types === */
/*.cell_date {}
.cell_author {}
.cell_category {}
.cell_status {position:relative; padding-left:20px;}
.cell_status:before {
content:"";
display:block;
position:absolute;
left:0px; top:50%;
margin-top:-5px;
width:12px; height:12px;
border-radius:100%;
background:#88c87a;
}
.cell_status_online {color:#28b78d;} .cell_status_online:before {background-color:#28b78d;}
.cell_status_offline {color:#ea5e5d;} .cell_status_offline:before {background-color:#ea5e5d;}
.cell_status_remaining {color:#5fb1e9;} .cell_status_remaining:before {background-color:#5fb1e9;}
.cell_status_expired {color:#eba760;} .cell_status_expired:before {background-color:#eba760;}
*/
/* === Cell settings === */
/*.cell_settings {text-align:right; width:150px; position:relative; right:0px;}
.cell_settings a {color:#000; list-style-type:none;}
.cell_settings .fa-cog {font-size:20px;}
.cell_settings_inner {
position:absolute;
width:205px; height:40px;
top:50%;
right:-3px;
margin-top:-21px;
border-radius:20px;
background:#e0e0e0;
padding:0px 10px;
z-index:-1;
overflow:hidden;
opacity:0;
-webkit-opacity:0;
-moz-opacity:0;
transition:all 0.3s;
}
.cell_settings_inner_container {float:right;}
.cell_settings_inner_section {float:left; border-right:solid 1px #999; padding:0px 10px;}
.cell_settings_inner_section_last {border:none; padding-right:3px;}
.cell_settings_inner_section ul {list-style-type:none;}
.cell_settings_inner_section ul li {float:left; padding-right:7px;}
.cell_settings_inner_section_last ul li {padding:0px;}
.cell_settings_inner_section ul li a {color:#000;}
.cell_settings_inner_section ul li .fa {line-height:40px; font-size:20px;}
.cell_settings_click, .cell_settings_close {cursor:pointer;}
.cell_settings a:hover, .cell_settings_click:hover {color:#28b78d!important;}
.cell_settings_inner_open {
opacity:1;
-webkit-opacity:1;
-moz-opacity:1;
width:205px;
z-index:600;
transition:all 0.3s;
}*/
}
</style>