fix vue-plugin for eslint -> it doesn't like the html plugin, fix eslint errors
This commit is contained in:
parent
311e911523
commit
6cd58726c5
@ -9,9 +9,6 @@
|
||||
"browser": true,
|
||||
"es6": true
|
||||
},
|
||||
"plugins": [
|
||||
"html",
|
||||
],
|
||||
extends: [
|
||||
"eslint:recommended",
|
||||
"plugin:vue/recommended"
|
||||
|
||||
@ -20,7 +20,6 @@
|
||||
"css-loader": "^0.28.5",
|
||||
"eslint": "^4.5.0",
|
||||
"eslint-loader": "^1.9.0",
|
||||
"eslint-plugin-html": "^3.2.0",
|
||||
"eslint-plugin-vue": "^3.12.0",
|
||||
"less": "^2.7.2",
|
||||
"less-loader": "^4.0.5",
|
||||
|
||||
@ -70,9 +70,9 @@ export default {
|
||||
},
|
||||
buttonClick(type) {
|
||||
switch(type) {
|
||||
case 'submit':
|
||||
this.submit();
|
||||
break;
|
||||
case 'submit':
|
||||
this.submit();
|
||||
break;
|
||||
}
|
||||
},
|
||||
submit() {
|
||||
|
||||
@ -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{
|
||||
|
||||
@ -20,131 +20,131 @@ import MyInput from './my-input.vue';
|
||||
import { ObserveVisibility } from 'vue-observe-visibility/dist/vue-observe-visibility';
|
||||
|
||||
export default {
|
||||
name: "ScrollTable",
|
||||
directives: {
|
||||
ObserveVisibility
|
||||
},
|
||||
components: {
|
||||
MyTable,
|
||||
MyInput
|
||||
},
|
||||
props: {
|
||||
name: "ScrollTable",
|
||||
directives: {
|
||||
ObserveVisibility
|
||||
},
|
||||
components: {
|
||||
MyTable,
|
||||
MyInput
|
||||
},
|
||||
props: {
|
||||
actions: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [ ];
|
||||
}
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [ ];
|
||||
}
|
||||
},
|
||||
newRows: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [ ];
|
||||
}
|
||||
},
|
||||
offset: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
orderBy: {
|
||||
type: String
|
||||
},
|
||||
orderDesc: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
search: {
|
||||
type: String
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
hasMore: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
handler: {
|
||||
type: Function,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
newRows(rows) {
|
||||
rows.forEach(row => {
|
||||
this.rowsToPush.push(row);
|
||||
});
|
||||
this.currentOffset += rows.length;
|
||||
columns: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [ ];
|
||||
}
|
||||
},
|
||||
newRows: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [ ];
|
||||
}
|
||||
},
|
||||
offset: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
orderBy: {
|
||||
type: String
|
||||
},
|
||||
orderDesc: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
search: {
|
||||
type: String
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
hasMore: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
handler: {
|
||||
type: Function,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
newRows(rows) {
|
||||
rows.forEach(row => {
|
||||
this.rowsToPush.push(row);
|
||||
});
|
||||
this.currentOffset += rows.length;
|
||||
this.pushRows(); // for transition
|
||||
},
|
||||
loading(l) {
|
||||
if (!l) {
|
||||
if (!l) {
|
||||
// delay after loading for visibility observer
|
||||
setTimeout(() => {
|
||||
this.loadingDelayed = false;
|
||||
this.loadingDelayed = false;
|
||||
}, 200);
|
||||
} else {
|
||||
this.loadingDelayed = true;
|
||||
this.loadingDelayed = true;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
rows: [ ],
|
||||
rowsToPush: [ ],
|
||||
currentOffset: this.offset,
|
||||
currentOrderBy: this.orderBy,
|
||||
currentOrderDesc: this.orderDesc,
|
||||
currentSearch: this.search,
|
||||
loadingDelayed: false,
|
||||
reloadTriggered: false
|
||||
}
|
||||
return {
|
||||
rows: [ ],
|
||||
rowsToPush: [ ],
|
||||
currentOffset: this.offset,
|
||||
currentOrderBy: this.orderBy,
|
||||
currentOrderDesc: this.orderDesc,
|
||||
currentSearch: this.search,
|
||||
loadingDelayed: false,
|
||||
reloadTriggered: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
visibilityChanged(isVisible, entry) {
|
||||
if (isVisible) {
|
||||
visibilityChanged(isVisible) {
|
||||
if (isVisible) {
|
||||
// infinite scrolling
|
||||
this.reloadTriggered = false;
|
||||
this.handler(this.currentOffset, this.limit, this.currentOrderBy, this.currentOrderDesc, this.currentSearch);
|
||||
}
|
||||
},
|
||||
pushRows() {
|
||||
let row = this.rowsToPush.shift();
|
||||
if (row) {
|
||||
this.rows.push(row);
|
||||
setTimeout(() => {
|
||||
this.pushRows();
|
||||
}, 20);
|
||||
}
|
||||
let row = this.rowsToPush.shift();
|
||||
if (row) {
|
||||
this.rows.push(row);
|
||||
setTimeout(() => {
|
||||
this.pushRows();
|
||||
}, 20);
|
||||
}
|
||||
},
|
||||
clear() {
|
||||
this.currentOffset = 0;
|
||||
this.rows = [];
|
||||
this.rowsToPush = [];
|
||||
this.currentOffset = 0;
|
||||
this.rows = [];
|
||||
this.rowsToPush = [];
|
||||
},
|
||||
sort(e) {
|
||||
if (e.orderBy == this.currentOrderBy) {
|
||||
this.currentOrderDesc = !this.currentOrderDesc;
|
||||
} else {
|
||||
this.currentOrderDesc = false;
|
||||
}
|
||||
this.currentOrderBy = e.orderBy;
|
||||
this.reloadTriggered = true;
|
||||
this.clear();
|
||||
if (e.orderBy == this.currentOrderBy) {
|
||||
this.currentOrderDesc = !this.currentOrderDesc;
|
||||
} else {
|
||||
this.currentOrderDesc = false;
|
||||
}
|
||||
this.currentOrderBy = e.orderBy;
|
||||
this.reloadTriggered = true;
|
||||
this.clear();
|
||||
},
|
||||
searchChanged(e) {
|
||||
this.currentSearch = e;
|
||||
this.reloadTriggered = true;
|
||||
this.clear();
|
||||
this.currentSearch = e;
|
||||
this.reloadTriggered = true;
|
||||
this.clear();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="topbar">
|
||||
<div class="logo"><a href="#"><img src="assets/images/cms_logo.png" alt=""></a></div>
|
||||
<div class="name">Meine Website</div>
|
||||
<div class="topbar">
|
||||
<div class="logo"><a href="#"><img src="assets/images/cms_logo.png" alt=""></a></div>
|
||||
<div class="name">Meine Website</div>
|
||||
|
||||
<!-- User Profile -->
|
||||
<div class="user_profile" ref="user_profile">
|
||||
@ -23,7 +23,7 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -38,49 +38,49 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import "../mixins.less";
|
||||
@import "../mixins.less";
|
||||
|
||||
@barHeight: 40px;
|
||||
@barHeight: 40px;
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Topbar (Sitename)
|
||||
--------------------------------------------------------------*/
|
||||
.topbar {
|
||||
.clearfix();
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0px;
|
||||
background: @cms_bg_light;
|
||||
color: white;
|
||||
height: @barHeight;
|
||||
z-index: 1500;
|
||||
.topbar {
|
||||
.clearfix();
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0px;
|
||||
background: @cms_bg_light;
|
||||
color: white;
|
||||
height: @barHeight;
|
||||
z-index: 1500;
|
||||
|
||||
&>.logo {
|
||||
display: block;
|
||||
width: 70px;
|
||||
height: @barHeight;
|
||||
float: left;
|
||||
position: relative;
|
||||
&>.logo {
|
||||
display: block;
|
||||
width: 70px;
|
||||
height: @barHeight;
|
||||
float: left;
|
||||
position: relative;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&:hover {
|
||||
background: rgba(40,183,141,0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
img {
|
||||
display: block;
|
||||
width: 30px;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
padding-top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>.name {
|
||||
float: left;
|
||||
@ -107,7 +107,7 @@ export default {
|
||||
// background: fade(@cms_brand_primary, 30%);
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Topbar (User Profile)
|
||||
|
||||
@ -8,13 +8,12 @@
|
||||
</header>
|
||||
<input type="text" value="" name="" placeholder="Titel hier eintragen">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="input_holder">
|
||||
<header class="input_header">
|
||||
<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>
|
||||
</header>
|
||||
|
||||
<input type="text" value="" name="" placeholder="Permalink">
|
||||
</div>
|
||||
|
||||
@ -23,10 +22,10 @@
|
||||
<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>
|
||||
</header>
|
||||
|
||||
|
||||
<textarea name="" id="" rows="10" placeholder="Dies ist ein normales Textfeld"></textarea>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Fieldgroup -->
|
||||
<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>
|
||||
@ -36,7 +35,7 @@
|
||||
<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> -->
|
||||
</header>
|
||||
|
||||
|
||||
<input type="text" value="" name="" placeholder="Noch ein Feld">
|
||||
</div>
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div id="login_form">
|
||||
<div class="holder">
|
||||
<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 class="content">
|
||||
@ -43,25 +43,25 @@ export default {
|
||||
}
|
||||
},
|
||||
buttons: [{
|
||||
label: "login",
|
||||
type: "submit"
|
||||
label: "login",
|
||||
type: "submit"
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
login(formData) {
|
||||
this.$store.dispatch("login", formData)
|
||||
.then(user => {
|
||||
console.log("---- user login --------");
|
||||
console.log(user);
|
||||
this.$router.go(-1);
|
||||
})
|
||||
.catch(error => {
|
||||
console.log("---- login error -------");
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
methods: {
|
||||
login(formData) {
|
||||
this.$store.dispatch("login", formData)
|
||||
.then(user => {
|
||||
console.log("---- user login --------");
|
||||
console.log(user);
|
||||
this.$router.go(-1);
|
||||
})
|
||||
.catch(error => {
|
||||
console.log("---- login error -------");
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -66,7 +66,7 @@ export default {
|
||||
}, {
|
||||
heading: 'Render',
|
||||
render(row) {
|
||||
return 'ID:' + row.ID;
|
||||
return 'ID:' + row.ID;
|
||||
}
|
||||
}],
|
||||
newRows: [ ],
|
||||
|
||||
Loading…
Reference in New Issue
Block a user