Vue example app

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

2 files changed, 162 insertions, 0 deletions

diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 00000000..fd0db47d
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,128 @@
+<template>
+	<div id="content" class="app-vueexample">
+		<div id="app-navigation">
+			<app-navigation :menu="menu">
+				<template slot="settings-content">Example settings</template>
+			</app-navigation>
+		</div>
+		<div id="app-content">
+			<div class="vueexample__container">
+				<h3>Nextcloud app example with vue components</h3>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import {
+		PopoverMenu,
+		AppNavigation
+	} from 'vue-components';
+
+	export default {
+		name: 'App',
+		components: {
+			PopoverMenu, AppNavigation
+		},
+		data: function () {
+			return {
+				isOpen: false,
+				// example popover in the content
+				menuPopover: [
+					{
+						icon: 'icon-delete',
+						text: 'Delete item',
+						action: () => {
+							alert('Deleted!');
+						}
+					},
+					{
+						icon: 'icon-user',
+						text: 'Nextcloud website',
+						action: () => {},
+						href: 'https://nextcloud.com'
+					},
+					{
+						icon: 'icon-details',
+						longtext: 'Add item',
+						action: () => {
+							alert('details');
+						}
+					}
+				]
+			};
+		},
+		computed: {
+			// App navigation
+			menu: function () {
+				let defaultCategories = [
+					{
+						id: 'app-category-your-apps',
+						classes: [],
+						href: '#',
+						icon: 'icon-category-installed',
+						text: t('settings', 'Your apps'),
+					},
+					{
+						caption: true,
+						text: t('vueexample', 'Section'),
+					},
+					{
+						id: 'app-category-enabled',
+						classes: [],
+						icon: 'icon-category-enabled',
+						href: '#',
+						utils: {
+							actions: [{
+								icon: 'icon-delete',
+								text: t('settings', 'Remove group'),
+								action: function () {
+									console.log('remove')
+								}
+							}]
+						},
+						text: t('settings', 'Active apps'),
+					},
+					{
+						id: 'app-category-enabled',
+						classes: [],
+						icon: 'icon-category-enabled',
+						href: '#',
+						utils: {
+							counter: 123,
+							actions: [
+								{
+									icon: 'icon-delete',
+									text: t('settings', 'Remove group'),
+									action: function () {
+										console.log('remove')
+									}
+								},
+								{
+									icon: 'icon-delete',
+									text: t('settings', 'Remove group'),
+									action: function () {
+										console.log('remove')
+									}
+								}
+							]
+						},
+						text: t('settings', 'Active apps'),
+					},
+					{
+						id: 'app-category-disabled',
+						classes: [],
+						icon: 'icon-category-disabled',
+						href: '#',
+						undo: true,
+						text: t('settings', 'Disabled apps'),
+					}
+				];
+				return {
+					items: defaultCategories,
+					loading: false
+				}
+			}
+		}
+	}
+</script>
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 00000000..bf06512c
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,34 @@
+/**
+ * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @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'
+
+Vue.prototype.t = t
+Vue.prototype.n = n
+Vue.prototype.OC = OC
+Vue.prototype.OCA = OCA
+
+/* eslint-disable-next-line no-new */
+new Vue({
+  render: h => h(App)
+}).$mount('#content')