Add basic vue structure

Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2018-11-24 10:17:17 +01:00
parent ed53de4cf1
commit 1e4d663c11
16 changed files with 640 additions and 43 deletions

5
.babelrc Normal file
View File

@@ -0,0 +1,5 @@
{
"plugins": [
"@babel/plugin-syntax-dynamic-import"
]
}

67
.eslintrc.js Normal file
View File

@@ -0,0 +1,67 @@
module.exports = {
root: true,
env: {
browser: true,
es6: true,
node: true,
jest: true
},
globals: {
t: true,
n: true,
OC: true,
OCA: true,
Vue: true,
VueRouter: true
},
parserOptions: {
parser: 'babel-eslint',
ecmaVersion: 6
},
extends: [
'eslint:recommended',
'plugin:node/recommended',
'plugin:vue/essential',
'plugin:vue/recommended',
'standard'
],
plugins: ['vue', 'node'],
rules: {
// space before function ()
'space-before-function-paren': ['error', 'never'],
// curly braces always space
'object-curly-spacing': ['error', 'always'],
// stay consistent with array brackets
'array-bracket-newline': ['error', 'consistent'],
// 1tbs brace style
'brace-style': 'error',
// tabs only
indent: ['error', 'tab'],
'no-tabs': 0,
'vue/html-indent': ['error', 'tab'],
// only debug console
'no-console': ['error', { allow: ['error', 'warn', 'debug'] }],
// classes blocks
'padded-blocks': ['error', { classes: 'always' }],
// always have the operator in front
'operator-linebreak': ['error', 'before'],
// ternary on multiline
'multiline-ternary': ['error', 'always-multiline'],
// es6 import/export and require
'node/no-unpublished-require': ['off'],
'node/no-unsupported-features/es-syntax': ['off'],
// space before self-closing elements
'vue/html-closing-bracket-spacing': 'error',
// code spacing with attributes
'vue/max-attributes-per-line': [
'error',
{
singleline: 3,
multiline: {
max: 3,
allowFirstLine: true
}
}
]
}
}

View File

@@ -1,43 +0,0 @@
root: true
extends:
- eslint:recommended
env:
browser: true
amd: true
es6: true
globals:
global: false
app: false
angular: false
$: false
escapeHTML: false
OC: false
OCA: false
t: false
oc_current_user: false
oc_requesttoken: false
Clipboard: false
oc_defaults: false
parserOptions:
ecmaVersion: 6
sourceType: "module"
rules:
curly: error
eqeqeq: ["error", "smart"]
guard-for-in: error
no-console: off
no-fallthrough: error
no-mixed-spaces-and-tabs: error
no-unused-vars: warn
no-useless-escape: warn
no-use-before-define: error
semi: ["error", "always"]
indent:
- error
- tab
- SwitchCase: 1

4
.gitignore vendored
View File

@@ -1,3 +1,7 @@
node_modules/*
js/*deck.js
js/*deck.js.map
js/node_modules/*
js/vendor/
js/public/

99
package.json Normal file
View File

@@ -0,0 +1,99 @@
{
"name": "deck",
"description": "",
"version": "1.0.0",
"authors": [
{
"name": "Julius Härtl",
"email": "jus@bitgrid.net",
"role": "Developer"
},
{
"name": "Michael Weimann",
"email": "mail@michael-weimann.eu",
"role": "Developer"
}
],
"license": "agpl",
"private": true,
"scripts": {
"dev": "webpack --config webpack.dev.js",
"watch": "webpack --progress --watch --config webpack.dev.js",
"build": "webpack --progress --hide-modules --config webpack.prod.js",
"lint": "eslint --ext .js,.vue src tests",
"lint:fix": "eslint --ext .js,.vue src tests --fix",
"test": "jest",
"test:coverage": "jest --coverage"
},
"dependencies": {
"@babel/polyfill": "^7.0.0",
"nextcloud-axios": "^0.1.2",
"nextcloud-server": "^0.15.9",
"nextcloud-vue": "^0.4.2",
"vue": "^2.5.16",
"vue-click-outside": "^1.0.7",
"vue-infinite-loading": "^2.4.1",
"vue-router": "^3.0.1",
"vuex": "^3.0.1",
"vuex-router-sync": "^5.0.0"
},
"browserslist": [
"last 2 versions",
"not ie <= 11"
],
"engines": {
"node": ">=10.0.0"
},
"devDependencies": {
"@babel/core": "^7.1.2",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/preset-env": "^7.1.0",
"@vue/test-utils": "^1.0.0-beta.25",
"babel-eslint": "^8.2.5",
"babel-jest": "^23.6.0",
"babel-loader": "^8.0.4",
"css-loader": "^0.28.11",
"eslint": "^4.19.1",
"eslint-config-standard": "^11.0.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^2.1.1",
"eslint-plugin-import": "^2.13.0",
"eslint-plugin-node": "^7.0.1",
"eslint-plugin-promise": "^3.8.0",
"eslint-plugin-standard": "^3.1.0",
"eslint-plugin-vue": "^4.5.0",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.11",
"jest": "^23.6.0",
"jest-serializer-vue": "^2.0.2",
"mini-css-extract-plugin": "^0.4.4",
"prettier-eslint": "^8.8.2",
"raw-loader": "^0.5.1",
"stylelint": "^8.4.0",
"stylelint-config-recommended-scss": "^3.2.0",
"stylelint-webpack-plugin": "^0.10.5",
"vue-jest": "^2.6.0",
"vue-loader": "^15.4.2",
"vue-style-loader": "^4.1.1",
"vue-template-compiler": "^2.5.16",
"webpack": "^4.23.1",
"webpack-cli": "^3.1.2",
"webpack-merge": "^4.1.2"
},
"jest": {
"moduleFileExtensions": [
"js",
"vue"
],
"moduleNameMapper": {
"^@/(.*)$": "<rootDir>/src/$1"
},
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
},
"snapshotSerializers": [
"<rootDir>/node_modules/jest-serializer-vue"
]
}
}

31
src/App.vue Normal file
View File

@@ -0,0 +1,31 @@
<!--
- @copyright Copyright (c) 2018 Christoph Wurst <christoph@winzerhof-wurst.at>
-
- @author Christoph Wurst <christoph@winzerhof-wurst.at>
-
- @license GNU AGPL version 3 or any later version
-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU Affero General Public License as
- published by the Free Software Foundation, either version 3 of the
- License, or (at your option) any later version.
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU Affero General Public License for more details.
-
- You should have received a copy of the GNU Affero General Public License
- along with this program. If not, see <http://www.gnu.org/licenses/>.
-
-->
<template>
<router-view />
</template>
<script>
export default {
name: 'App'
}
</script>

53
src/main.js Normal file
View File

@@ -0,0 +1,53 @@
/*
* @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
*
* @author Julius Härtl <jus@bitgrid.net>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/main'
import { sync } from 'vuex-router-sync'
import { translate, translatePlural } from 'nextcloud-server/dist/l10n'
import { generateFilePath } from 'nextcloud-server/dist/router'
import VTooltip from 'v-tooltip'
// eslint-disable-next-line
__webpack_nonce__ = btoa(OC.requestToken)
// eslint-disable-next-line
__webpack_public_path__ = generateFilePath('deck', '', 'js/')
sync(store, router)
Vue.mixin({
methods: {
t: translate,
n: translatePlural
}
})
Vue.use(VTooltip)
/* eslint-disable-next-line no-new */
new Vue({
el: '#content',
router,
store,
render: h => h(App)
})

51
src/router.js Normal file
View File

@@ -0,0 +1,51 @@
/*
* @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
*
* @author Julius Härtl <jus@bitgrid.net>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
import Vue from 'vue'
import Router from 'vue-router'
import { generateUrl } from 'nextcloud-server/dist/router'
const Main = () => import('./views/Main')
Vue.use(Router)
export default new Router({
base: generateUrl('/apps/deck/'),
linkActiveClass: 'active',
routes: [
{
path: '/',
name: 'main',
component: Main
},
{
path: '/boards',
name: 'boards',
component: Main
},
{
path: '/boards/archived',
name: 'boards.archived',
component: Main
}
]
})

34
src/store/main.js Normal file
View File

@@ -0,0 +1,34 @@
/*
* @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
*
* @author Julius Härtl <jus@bitgrid.net>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production'
export default new Vuex.Store({
modules: {
},
strict: debug
})

35
src/views/Board.vue Normal file
View File

@@ -0,0 +1,35 @@
<!--
- @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
-
- @author Julius Härtl <jus@bitgrid.net>
-
- @license GNU AGPL version 3 or any later version
-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU Affero General Public License as
- published by the Free Software Foundation, either version 3 of the
- License, or (at your option) any later version.
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU Affero General Public License for more details.
-
- You should have received a copy of the GNU Affero General Public License
- along with this program. If not, see <http://www.gnu.org/licenses/>.
-
-->
<template>
<div />
</template>
<script>
export default {
name: 'Board'
}
</script>
<style scoped>
</style>

35
src/views/List.vue Normal file
View File

@@ -0,0 +1,35 @@
<!--
- @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
-
- @author Julius Härtl <jus@bitgrid.net>
-
- @license GNU AGPL version 3 or any later version
-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU Affero General Public License as
- published by the Free Software Foundation, either version 3 of the
- License, or (at your option) any later version.
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU Affero General Public License for more details.
-
- You should have received a copy of the GNU Affero General Public License
- along with this program. If not, see <http://www.gnu.org/licenses/>.
-
-->
<template>
<div />
</template>
<script>
export default {
name: 'List'
}
</script>
<style scoped>
</style>

130
src/views/Main.vue Normal file
View File

@@ -0,0 +1,130 @@
<!--
- @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
-
- @author Julius Härtl <jus@bitgrid.net>
-
- @license GNU AGPL version 3 or any later version
-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU Affero General Public License as
- published by the Free Software Foundation, either version 3 of the
- License, or (at your option) any later version.
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU Affero General Public License for more details.
-
- You should have received a copy of the GNU Affero General Public License
- along with this program. If not, see <http://www.gnu.org/licenses/>.
-
-->
<template>
<div id="content">
<AppNavigation :menu="menu" />
<div id="app-content">
content
</div>
<div id="app-sidebar">
sidebar
</div>
</div>
</template>
<style scoped>
</style>
<script>
import { AppNavigation } from 'nextcloud-vue'
export default {
name: 'Main',
components: {
AppNavigation
},
computed: {
// TODO: move to mixin so we can use it in separate views (see mail app)
menu() {
let defaultCategories = [
{
id: 'deck-boards',
classes: [],
icon: 'icon-deck',
text: t('deck', 'All boards'),
router: {
name: 'boards'
}
},
{
id: 'deck-boards-archived',
classes: [],
icon: 'icon-archive',
text: t('deck', 'Archived boards'),
router: {
name: 'boards.archived'
}
},
{
id: 'deck-boards-shared',
classes: [],
icon: 'icon-shared',
text: t('deck', 'Shared boards'),
router: {
name: 'boards.shared'
}
}
]
const boardActions = [
{
action: () => {},
icon: 'icon-edit',
text: t('deck', 'Edit board')
},
{
action: () => {},
icon: 'icon-archive',
text: t('deck', 'Archive board')
},
{
action: () => {},
icon: 'icon-delete',
text: t('deck', 'Delete board')
},
{
action: () => {},
icon: 'icon-settings',
text: t('deck', 'Board details')
}
]
let boards = [
{
id: 'deck-board-1',
classes: [],
bullet: '#00cc00',
text: 'Example board',
router: {
name: 'board',
params: { id: 1 }
},
utils: {
actions: boardActions
}
}
]
const addButton = {
icon: 'icon-add',
text: t('deck', 'Create new board'),
action: () => {}
}
return {
items: defaultCategories.concat(boards).concat([addButton]),
loading: false
}
}
}
}
</script>

35
src/views/Sidebar.vue Normal file
View File

@@ -0,0 +1,35 @@
<!--
- @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
-
- @author Julius Härtl <jus@bitgrid.net>
-
- @license GNU AGPL version 3 or any later version
-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU Affero General Public License as
- published by the Free Software Foundation, either version 3 of the
- License, or (at your option) any later version.
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU Affero General Public License for more details.
-
- You should have received a copy of the GNU Affero General Public License
- along with this program. If not, see <http://www.gnu.org/licenses/>.
-
-->
<template>
<div />
</template>
<script>
export default {
name: 'Sidebar'
}
</script>
<style scoped>
</style>

42
webpack.common.js Normal file
View File

@@ -0,0 +1,42 @@
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
entry: path.join(__dirname, 'src', 'main.js'),
output: {
path: path.resolve(__dirname, './js'),
publicPath: '/js/',
filename: 'deck.js'
},
module: {
rules: [
{
test: /\.css$/,
use: ['vue-style-loader', 'css-loader']
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
plugins: [new VueLoaderPlugin()],
resolve: {
alias: {
vue$: 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
}
};

12
webpack.dev.js Normal file
View File

@@ -0,0 +1,12 @@
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'development',
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
devtool: 'source-map',
})

7
webpack.prod.js Normal file
View File

@@ -0,0 +1,7 @@
const merge = require('webpack-merge')
const common = require('./webpack.common.js')
module.exports = merge(common, {
mode: 'production',
devtool: '#source-map'
})