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

fix vue-plugin for eslint -> it doesn't like the html plugin, fix eslint errors

Browse Source
This commit is contained in:
Anton Schubert
2017-08-30 13:35:24 +02:00
parent 311e911523
commit 6cd58726c5
9 changed files with 237 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,7 +2,7 @@
<div class="cms_table">
<!-- Header -->
<div class="table_header">
<div class="table_header">
<div v-for="(col, i) in columns"
:class="['table_cell', {['sortable']: col.orderBy, [`align-${col.align}`]: col.align}]"
:key="i">
@@ -11,19 +11,19 @@
<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>
<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>
<!-- Column without sorting -->
<div v-else>{{ col.heading }}</div>
</div>
<div class="table_cell cell_settings" v-if="actions.length"></div>
</div>
</div>
<!-- Content -->
<div class="table_content" is="transition-group" name="list">
<div class="table_content" is="transition-group" name="list">
<div class="table_row" v-for="(row, ri) in rows" :key="ri">
<!-- Row content -->
@@ -36,102 +36,102 @@
</div>
<!-- Row actions -->
<div class="table_cell cell_settings" v-if="actions.length" ref="row_actions">
<ul class="actions_container">
<li v-for="(a, i) in actions" :title="a.title" @click="a.action(row)">
<div class="table_cell cell_settings" v-if="actions.length" ref="row_actions">
<ul class="actions_container">
<li v-for="(a, i) in actions" :title="a.title" @click="a.action(row)" :key="i">
<i :class="['icon', a.icon]"></i>
</li>
</ul>
</ul>
<div title="Open actions" class="actions_btn" @click="toggleActions">
<i class="icon icon-cog" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'My-Table',
props: {
actions: {
type: Array,
default() {
return [ ];
}
},
columns: {
type: Array,
default() {
return [ ];
}
},
rows: {
type: Array,
default() {
return [ ];
}
},
currentOrderBy: {
type: String
},
currentOrderDesc: {
type: Boolean
}
},
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;
},
toggleActions(event) {
const parent = event.currentTarget.parentNode;
this.$refs.row_actions.forEach((item) => {
if (item !== parent)
item.classList.remove("open")
});
parent.classList.toggle("open");
export default {
name: 'My-Table',
props: {
actions: {
type: Array,
default() {
return [ ];
}
}
}
},
columns: {
type: Array,
default() {
return [ ];
}
},
rows: {
type: Array,
default() {
return [ ];
}
},
currentOrderBy: {
type: String
},
currentOrderDesc: {
type: Boolean
}
},
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;
},
toggleActions(event) {
const parent = event.currentTarget.parentNode;
this.$refs.row_actions.forEach((item) => {
if (item !== parent)
item.classList.remove("open")
});
parent.classList.toggle("open");
}
}
}
</script>
<style lang="less">
@import "~mixins";
@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);
}
.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
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Content Tables
--------------------------------------------------------------*/
.cms_table {
.table_header{