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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.eslintrc
View File

@ -9,9 +9,6 @@
"browser": true, "browser": true,
"es6": true "es6": true
}, },
"plugins": [
"html",
],
extends: [ extends: [
"eslint:recommended", "eslint:recommended",
"plugin:vue/recommended" "plugin:vue/recommended"

1
package.json
View File

@ -20,7 +20,6 @@
"css-loader": "^0.28.5", "css-loader": "^0.28.5",
"eslint": "^4.5.0", "eslint": "^4.5.0",
"eslint-loader": "^1.9.0", "eslint-loader": "^1.9.0",
"eslint-plugin-html": "^3.2.0",
"eslint-plugin-vue": "^3.12.0", "eslint-plugin-vue": "^3.12.0",
"less": "^2.7.2", "less": "^2.7.2",
"less-loader": "^4.0.5", "less-loader": "^4.0.5",

6
src/components/my-form.vue
View File

@ -70,9 +70,9 @@ export default {
}, },
buttonClick(type) { buttonClick(type) {
switch(type) { switch(type) {
case 'submit': case 'submit':
this.submit(); this.submit();
break; break;
} }
}, },
submit() { submit() {

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

@ -2,7 +2,7 @@
<div class="cms_table"> <div class="cms_table">
<!-- Header --> <!-- Header -->
<div class="table_header"> <div class="table_header">
<div v-for="(col, i) in columns" <div v-for="(col, i) in columns"
:class="['table_cell', {['sortable']: col.orderBy, [`align-${col.align}`]: col.align}]" :class="['table_cell', {['sortable']: col.orderBy, [`align-${col.align}`]: col.align}]"
:key="i"> :key="i">
@ -11,19 +11,19 @@
<div @click="orderBy(col.orderBy)" v-if="col.orderBy"> <div @click="orderBy(col.orderBy)" v-if="col.orderBy">
{{ col.heading }} {{ col.heading }}
<i class="icon icon-angle-up" aria-hidden="true" v-if="currentOrderBy !== col.orderBy"></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-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-circled-up" aria-hidden="true" v-else></i>
</div> </div>
<!-- Column without sorting --> <!-- Column without sorting -->
<div v-else>{{ col.heading }}</div> <div v-else>{{ col.heading }}</div>
</div> </div>
<div class="table_cell cell_settings" v-if="actions.length"></div> <div class="table_cell cell_settings" v-if="actions.length"></div>
</div> </div>
<!-- Content --> <!-- 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"> <div class="table_row" v-for="(row, ri) in rows" :key="ri">
<!-- Row content --> <!-- Row content -->
@ -36,102 +36,102 @@
</div> </div>
<!-- Row actions --> <!-- Row actions -->
<div class="table_cell cell_settings" v-if="actions.length" ref="row_actions"> <div class="table_cell cell_settings" v-if="actions.length" ref="row_actions">
<ul class="actions_container"> <ul class="actions_container">
<li v-for="(a, i) in actions" :title="a.title" @click="a.action(row)"> <li v-for="(a, i) in actions" :title="a.title" @click="a.action(row)" :key="i">
<i :class="['icon', a.icon]"></i> <i :class="['icon', a.icon]"></i>
</li> </li>
</ul> </ul>
<div title="Open actions" class="actions_btn" @click="toggleActions"> <div title="Open actions" class="actions_btn" @click="toggleActions">
<i class="icon icon-cog" aria-hidden="true"></i> <i class="icon icon-cog" aria-hidden="true"></i>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'My-Table', name: 'My-Table',
props: { props: {
actions: { actions: {
type: Array, type: Array,
default() { default() {
return [ ]; 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");
} }
} },
} 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> </script>
<style lang="less"> <style lang="less">
@import "~mixins"; @import "~mixins";
.list-item { .list-item {
display: inline-block; display: inline-block;
margin-right: 10px; margin-right: 10px;
} }
.list-enter-active, .list-leave-active { .list-enter-active, .list-leave-active {
transition: all 0.2s; transition: all 0.2s;
} }
.list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ { .list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
opacity: 0; opacity: 0;
transform: translateY(30px); transform: translateY(30px);
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Content Tables # Content Tables
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.cms_table { .cms_table {
.table_header{ .table_header{

188
src/components/scroll-table.vue
View File

@ -20,131 +20,131 @@ import MyInput from './my-input.vue';
import { ObserveVisibility } from 'vue-observe-visibility/dist/vue-observe-visibility'; import { ObserveVisibility } from 'vue-observe-visibility/dist/vue-observe-visibility';
export default { export default {
name: "ScrollTable", name: "ScrollTable",
directives: { directives: {
ObserveVisibility ObserveVisibility
}, },
components: { components: {
MyTable, MyTable,
MyInput MyInput
}, },
props: { props: {
actions: { actions: {
type: Array, type: Array,
default() { default() {
return [ ]; return [ ];
} }
}, },
columns: { columns: {
type: Array, type: Array,
default() { default() {
return [ ]; return [ ];
} }
}, },
newRows: { newRows: {
type: Array, type: Array,
default() { default() {
return [ ]; return [ ];
} }
}, },
offset: { offset: {
type: Number, type: Number,
default: 0 default: 0
}, },
limit: { limit: {
type: Number, type: Number,
default: 10 default: 10
}, },
orderBy: { orderBy: {
type: String type: String
}, },
orderDesc: { orderDesc: {
type: Boolean, type: Boolean,
default: false default: false
}, },
search: { search: {
type: String type: String
}, },
loading: { loading: {
type: Boolean, type: Boolean,
default: false default: false
}, },
hasMore: { hasMore: {
type: Boolean, type: Boolean,
default: true default: true
}, },
handler: { handler: {
type: Function, type: Function,
default: () => {} default: () => {}
} }
}, },
watch: { watch: {
newRows(rows) { newRows(rows) {
rows.forEach(row => { rows.forEach(row => {
this.rowsToPush.push(row); this.rowsToPush.push(row);
}); });
this.currentOffset += rows.length; this.currentOffset += rows.length;
this.pushRows(); // for transition this.pushRows(); // for transition
}, },
loading(l) { loading(l) {
if (!l) { if (!l) {
// delay after loading for visibility observer // delay after loading for visibility observer
setTimeout(() => { setTimeout(() => {
this.loadingDelayed = false; this.loadingDelayed = false;
}, 200); }, 200);
} else { } else {
this.loadingDelayed = true; this.loadingDelayed = true;
} }
} }
}, },
data() { data() {
return { return {
rows: [ ], rows: [ ],
rowsToPush: [ ], rowsToPush: [ ],
currentOffset: this.offset, currentOffset: this.offset,
currentOrderBy: this.orderBy, currentOrderBy: this.orderBy,
currentOrderDesc: this.orderDesc, currentOrderDesc: this.orderDesc,
currentSearch: this.search, currentSearch: this.search,
loadingDelayed: false, loadingDelayed: false,
reloadTriggered: false reloadTriggered: false
} }
}, },
methods: { methods: {
visibilityChanged(isVisible, entry) { visibilityChanged(isVisible) {
if (isVisible) { if (isVisible) {
// infinite scrolling // infinite scrolling
this.reloadTriggered = false; this.reloadTriggered = false;
this.handler(this.currentOffset, this.limit, this.currentOrderBy, this.currentOrderDesc, this.currentSearch); this.handler(this.currentOffset, this.limit, this.currentOrderBy, this.currentOrderDesc, this.currentSearch);
} }
}, },
pushRows() { pushRows() {
let row = this.rowsToPush.shift(); let row = this.rowsToPush.shift();
if (row) { if (row) {
this.rows.push(row); this.rows.push(row);
setTimeout(() => { setTimeout(() => {
this.pushRows(); this.pushRows();
}, 20); }, 20);
} }
}, },
clear() { clear() {
this.currentOffset = 0; this.currentOffset = 0;
this.rows = []; this.rows = [];
this.rowsToPush = []; this.rowsToPush = [];
}, },
sort(e) { sort(e) {
if (e.orderBy == this.currentOrderBy) { if (e.orderBy == this.currentOrderBy) {
this.currentOrderDesc = !this.currentOrderDesc; this.currentOrderDesc = !this.currentOrderDesc;
} else { } else {
this.currentOrderDesc = false; this.currentOrderDesc = false;
} }
this.currentOrderBy = e.orderBy; this.currentOrderBy = e.orderBy;
this.reloadTriggered = true; this.reloadTriggered = true;
this.clear(); this.clear();
}, },
searchChanged(e) { searchChanged(e) {
this.currentSearch = e; this.currentSearch = e;
this.reloadTriggered = true; this.reloadTriggered = true;
this.clear(); this.clear();
} }
} }
} }

64
src/components/topbar.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="topbar"> <div class="topbar">
<div class="logo"><a href="#"><img src="assets/images/cms_logo.png" alt=""></a></div> <div class="logo"><a href="#"><img src="assets/images/cms_logo.png" alt=""></a></div>
<div class="name">Meine Website</div> <div class="name">Meine Website</div>
<!-- User Profile --> <!-- User Profile -->
<div class="user_profile" ref="user_profile"> <div class="user_profile" ref="user_profile">
@ -23,7 +23,7 @@
</ul> </ul>
</nav> </nav>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
@ -38,49 +38,49 @@ export default {
</script> </script>
<style lang="less"> <style lang="less">
@import "../mixins.less"; @import "../mixins.less";
@barHeight: 40px; @barHeight: 40px;
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Topbar (Sitename) # Topbar (Sitename)
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.topbar { .topbar {
.clearfix(); .clearfix();
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
left: 0px; left: 0px;
background: @cms_bg_light; background: @cms_bg_light;
color: white; color: white;
height: @barHeight; height: @barHeight;
z-index: 1500; z-index: 1500;
&>.logo { &>.logo {
display: block; display: block;
width: 70px; width: 70px;
height: @barHeight; height: @barHeight;
float: left; float: left;
position: relative; position: relative;
a { a {
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
&:hover { &:hover {
background: rgba(40,183,141,0.3); background: rgba(40,183,141,0.3);
} }
} }
img { img {
display: block; display: block;
width: 30px; width: 30px;
height: auto; height: auto;
margin: 0 auto; margin: 0 auto;
padding-top: 4px; padding-top: 4px;
} }
} }
&>.name { &>.name {
float: left; float: left;
@ -107,7 +107,7 @@ export default {
// background: fade(@cms_brand_primary, 30%); // background: fade(@cms_brand_primary, 30%);
// } // }
// } // }
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Topbar (User Profile) # Topbar (User Profile)

9
src/views/forms/formdemo.vue
View File

@ -8,13 +8,12 @@
</header> </header>
<input type="text" value="" name="" placeholder="Titel hier eintragen"> <input type="text" value="" name="" placeholder="Titel hier eintragen">
</div> </div>
<div class="input_holder"> <div class="input_holder">
<header class="input_header"> <header class="input_header">
<label for="">Permalink</label> <label for="">Permalink</label>
<div class="input_description">Hier steht ein Beschreibungstext für etwas begriffsstutzige Menschen, die eine Beschreibung zum Befüllen des Feldes brauchen.</div> <div class="input_description">Hier steht ein Beschreibungstext für etwas begriffsstutzige Menschen, die eine Beschreibung zum Befüllen des Feldes brauchen.</div>
</header> </header>
<input type="text" value="" name="" placeholder="Permalink"> <input type="text" value="" name="" placeholder="Permalink">
</div> </div>
@ -23,10 +22,10 @@
<label for="">Inhalt</label> <label for="">Inhalt</label>
<div class="input_description">Hier steht ein Beschreibungstext für etwas begriffsstutzige Menschen, die eine Beschreibung zum Befüllen des Feldes brauchen.</div> <div class="input_description">Hier steht ein Beschreibungstext für etwas begriffsstutzige Menschen, die eine Beschreibung zum Befüllen des Feldes brauchen.</div>
</header> </header>
<textarea name="" id="" rows="10" placeholder="Dies ist ein normales Textfeld"></textarea> <textarea name="" id="" rows="10" placeholder="Dies ist ein normales Textfeld"></textarea>
</div> </div>
<!-- Fieldgroup --> <!-- Fieldgroup -->
<div class="cms_fieldgroup fieldgroup_open"> <div class="cms_fieldgroup fieldgroup_open">
<header class="cms_fieldgroup_header">Feldergruppe <div class="cms_fieldgroup_trigger"><i class="ion-chevron-down"></i></div></header> <header class="cms_fieldgroup_header">Feldergruppe <div class="cms_fieldgroup_trigger"><i class="ion-chevron-down"></i></div></header>
@ -36,7 +35,7 @@
<label for="">Noch ein Feld</label> <label for="">Noch ein Feld</label>
<!-- <div class="input_description">Hier steht ein Beschreibungstext für etwas begriffsstutzige Menschen, die eine Beschreibung zum Befüllen des Feldes brauchen.</div> --> <!-- <div class="input_description">Hier steht ein Beschreibungstext für etwas begriffsstutzige Menschen, die eine Beschreibung zum Befüllen des Feldes brauchen.</div> -->
</header> </header>
<input type="text" value="" name="" placeholder="Noch ein Feld"> <input type="text" value="" name="" placeholder="Noch ein Feld">
</div> </div>

34
src/views/forms/login.vue
View File

@ -2,7 +2,7 @@
<div id="login_form"> <div id="login_form">
<div class="holder"> <div class="holder">
<div class="logo"> <div class="logo">
<img src="assets/images/cms_logo_white.png" valid-v-on:foo="bar" alt=""> <img src="assets/images/cms_logo_white.png" alt="">
</div> </div>
<div class="content"> <div class="content">
@ -43,25 +43,25 @@ export default {
} }
}, },
buttons: [{ buttons: [{
label: "login", label: "login",
type: "submit" type: "submit"
}] }]
} }
}, },
methods: { methods: {
login(formData) { login(formData) {
this.$store.dispatch("login", formData) this.$store.dispatch("login", formData)
.then(user => { .then(user => {
console.log("---- user login --------"); console.log("---- user login --------");
console.log(user); console.log(user);
this.$router.go(-1); this.$router.go(-1);
}) })
.catch(error => { .catch(error => {
console.log("---- login error -------"); console.log("---- login error -------");
console.log(error); console.log(error);
}); });
} }
} }
} }
</script> </script>

2
src/views/lists/userlist.vue
View File

@ -66,7 +66,7 @@ export default {
}, { }, {
heading: 'Render', heading: 'Render',
render(row) { render(row) {
return 'ID:' + row.ID; return 'ID:' + row.ID;
} }
}], }],
newRows: [ ], newRows: [ ],